diff --git a/eform-client/src/app/app.module.ts b/eform-client/src/app/app.module.ts
index 4144184708..8689d2ad81 100644
--- a/eform-client/src/app/app.module.ts
+++ b/eform-client/src/app/app.module.ts
@@ -5,6 +5,8 @@ import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {GalleryModule} from 'ng-gallery';
 import {TranslateModule} from '@ngx-translate/core';
 import {LightboxModule} from 'ng-gallery/lightbox';
+import { AppIconComponent } from './components/icons/app-icon/app-icon.component';
+
 // TODO fix ngx-mask
 //import {NgxMaskModule} from 'ngx-mask';
 import {ToastrModule} from 'ngx-toastr';
@@ -136,6 +138,7 @@ import {NgxMaterialTimepickerModule} from 'ngx-material-timepicker';
     MatProgressSpinnerModule,
     // EformDateFnsDateModule,
     EformMatDateFnsDateModule,
+    AppIconComponent,
   ],
   schemas: [NO_ERRORS_SCHEMA],
   providers: [providers],
diff --git a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.html b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.html
index 90850ec1cc..1677db2f76 100644
--- a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.html
+++ b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.html
@@ -11,9 +11,9 @@ <h3 mat-dialog-title>{{ 'New tag' | translate }}</h3>
     <mat-label>{{ 'Name' | translate }}</mat-label>
   </mat-form-field>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
+    class="btn-primary btn-primary--icon-left"
     color="accent"
     id="newTagSaveBtn"
     [disabled]="!name"
@@ -22,7 +22,7 @@ <h3 mat-dialog-title>{{ 'New tag' | translate }}</h3>
     {{ 'Save' | translate }}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="newTagSaveCancelBtn"
     (click)="cancelCreate()"
   >
diff --git a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tags/shared-tags.component.html b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tags/shared-tags.component.html
index 77e8b286bb..bae98c8437 100644
--- a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tags/shared-tags.component.html
+++ b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tags/shared-tags.component.html
@@ -4,22 +4,20 @@ <h3 mat-dialog-title>{{ 'Tags management' | translate }}</h3>
   <div class="d-flex flex-row justify-content-end mb-2">
     <button
       *ngIf="showMultipleCreateBtn"
-      mat-raised-button
-      color="primary"
+      class="btn-primary btn-primary--icon-left"
       id="newTagsBtn"
       (click)="showMultipleCreateTagModal()"
       type="button">
       <mat-icon>add</mat-icon>
-      {{'Add bulk' | translate}}
+      <span>{{'Add bulk' | translate}}</span>
     </button>
     <button
-      mat-raised-button
-      color="accent"
+      class="btn-primary btn-primary--icon-left"
       id="newTagBtn"
       (click)="showCreateTagModal()"
       type="button">
       <mat-icon>add</mat-icon>
-      {{'Add new' | translate}}
+      <span>{{'Add new' | translate}}</span>
     </button>
   </div>
   <div class="d-flex flex-column">
@@ -53,7 +51,7 @@ <h3 mat-dialog-title>{{ 'Tags management' | translate }}</h3>
 </div></div>
 <div mat-dialog-actions class="d-flex flex-row justify-content-end">
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
     id="tagsModalCloseBtn">
     {{ 'Close' | translate }}
diff --git a/eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.html b/eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.html
index 362f66c04a..e78e0dbb3a 100644
--- a/eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.html
+++ b/eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.html
@@ -1,8 +1,7 @@
 <eform-new-subheader [title]="title | translate" [forceStaticTitle]="true">
   <button
     *ngIf="edit"
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="entityUpdateSaveBtn"
     (click)="updateEntityGroup()"
     [disabled]="entityGroupEditModel.isLocked && !entityGroupEditModel.isEditable"
@@ -11,8 +10,7 @@
   </button>
   <button
     *ngIf="!edit"
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="entityCreateSaveBtn"
     (click)="createEntityGroup()"
     [disabled]="!entityGroupEditModel.name"
@@ -20,8 +18,7 @@
     {{ 'Create' | translate }}
   </button>
   <button
-    mat-raised-button
-    color="primary"
+    class="btn-cancel"
     id="entitySearchUpdateCancelBtn"
     (click)="goBack()"
   >
diff --git a/eform-client/src/app/common/modules/eform-shared/components/entity-item-edit-name/entity-item-edit-name.component.html b/eform-client/src/app/common/modules/eform-shared/components/entity-item-edit-name/entity-item-edit-name.component.html
index f5b6ad71e1..360cec5668 100644
--- a/eform-client/src/app/common/modules/eform-shared/components/entity-item-edit-name/entity-item-edit-name.component.html
+++ b/eform-client/src/app/common/modules/eform-shared/components/entity-item-edit-name/entity-item-edit-name.component.html
@@ -9,17 +9,16 @@ <h3 mat-dialog-title>{{ 'Edit element' | translate}}</h3>
       id="entityItemEditNameBox">
   </mat-form-field>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="emitValue();"
     id="entityItemSaveBtn"
   >
     {{'Save' | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="entityItemCancelBtn"
     (click)="hide()"
   >
diff --git a/eform-client/src/app/components/app.component.ts b/eform-client/src/app/components/app.component.ts
index 80c7f2022d..81cc37bff2 100644
--- a/eform-client/src/app/components/app.component.ts
+++ b/eform-client/src/app/components/app.component.ts
@@ -11,6 +11,7 @@ import {
 } from 'src/app/state';
 import {AuthStateService} from 'src/app/common/store';
 import {TranslateService} from '@ngx-translate/core';
+import IconService from './icons/index';
 
 @Component({
     selector: 'app-root',
@@ -18,6 +19,7 @@ import {TranslateService} from '@ngx-translate/core';
     standalone: false
 })
 export class AppComponent implements OnInit, OnDestroy {
+  private iconService = inject(IconService);
   private router = inject(Router);
   private authStore = inject(Store);
   private userSettings = inject(UserSettingsService);
@@ -31,6 +33,7 @@ export class AppComponent implements OnInit, OnDestroy {
   public selectIsAuth$ = this.authStore.select(selectAuthIsAuth);
 
   ngOnInit(): void {
+    this.iconService.register();
     this.authSyncStorageService.init();
     this.selectIsAuth$.pipe(debounceTime(1000), take(1)).subscribe((isAuth) => {
       if (isAuth) {
diff --git a/eform-client/src/app/components/icons/app-icon/app-icon.component.html b/eform-client/src/app/components/icons/app-icon/app-icon.component.html
new file mode 100644
index 0000000000..fbbf3aac22
--- /dev/null
+++ b/eform-client/src/app/components/icons/app-icon/app-icon.component.html
@@ -0,0 +1,10 @@
+<mat-icon
+  [svgIcon]="name"
+  [ngStyle]="{
+    'width.px': size,
+    'height.px': size,
+    'font-size.px': size,
+    'color': color
+  }"
+  class="app-icon"
+></mat-icon>
diff --git a/eform-client/src/app/components/icons/app-icon/app-icon.component.scss b/eform-client/src/app/components/icons/app-icon/app-icon.component.scss
new file mode 100644
index 0000000000..8be6f4583d
--- /dev/null
+++ b/eform-client/src/app/components/icons/app-icon/app-icon.component.scss
@@ -0,0 +1,5 @@
+.app-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/eform-client/src/app/components/icons/app-icon/app-icon.component.ts b/eform-client/src/app/components/icons/app-icon/app-icon.component.ts
new file mode 100644
index 0000000000..69c931f834
--- /dev/null
+++ b/eform-client/src/app/components/icons/app-icon/app-icon.component.ts
@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import {NgStyle} from '@angular/common';
+
+@Component({
+  selector: 'app-icon',
+  standalone: true,
+  imports: [MatIconModule, NgStyle],
+  templateUrl: './app-icon.component.html',
+  styleUrls: ['./app-icon.component.scss']
+})
+export class AppIconComponent {
+  @Input() name!: string;
+  @Input() size: number | string = 20;
+  @Input() color: string = 'currentColor';
+}
diff --git a/eform-client/src/app/components/icons/icons.ts b/eform-client/src/app/components/icons/icons.ts
new file mode 100644
index 0000000000..a0ab2171ea
--- /dev/null
+++ b/eform-client/src/app/components/icons/icons.ts
@@ -0,0 +1,32 @@
+export const CUSTOM_ICONS: Record<string, string> = {
+  xmlFile: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+      <path d="M15.8333 18.3346H4.16667C3.24619 18.3346 2.5 17.5884 2.5 16.668L2.5 3.33464C2.5 2.41416 3.24619 1.66797 4.16667 1.66797H10L15.8333 7.5013V9.16797M15.4167 7.5013H11.665C10.7446 7.5013 9.99837 6.75511 9.99837 5.83464V2.08464"
+        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M5.4165 11.6798L7.05439 13.7142M7.05439 13.7142L8.74984 15.7753M7.05439 13.7142L8.63236 11.668M7.05439 13.7142L5.43119 15.8346M10.4165 15.8346V11.668L12.0832 14.168L13.7498 11.668V15.8346M15.8332 11.668V15.8346H17.4998"
+        stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
+
+  tags: `
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none">
+      <path d="M12.0791 8.33464C12.7802 7.86845 13.4025 7.12039 13.7892 6.19008C14.5875 4.26932 14.0788 2.299 12.6532 1.78925C11.2274 1.27949 9.42441 2.42334 8.62616 4.34409C8.49266 4.66519 8.39575 4.98769 8.3335 5.30449" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      <path d="M8.3335 16.6667V8.89952C8.3335 8.54826 8.5178 8.22275 8.819 8.04203L11.6668 6.33333M8.3335 16.6667V17.3333C8.3335 17.8856 8.78121 18.3333 9.3335 18.3333H15.6668C16.2191 18.3333 16.6668 17.8856 16.6668 17.3333V8.89952C16.6668 8.54826 16.4825 8.22275 16.1813 8.04203L13.0147 6.14203C12.698 5.95202 12.3023 5.95202 11.9857 6.14203L11.6668 6.33333M8.3335 16.6667L4.41295 16.0132C3.83317 15.9166 3.46136 15.3432 3.60973 14.7744L5.6874 6.81005C5.77777 6.46361 6.04647 6.19192 6.3919 6.09771L9.83596 5.15842C10.1933 5.06096 10.5753 5.16901 10.8286 5.43924L11.6668 6.33333" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    </svg>
+  `,
+
+  upload: `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none">
+    <path d="M5.33301 2.83203L7.41634 0.748698L9.49967 2.83203M7.41634 9.08203V1.25602" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M14.0833 11.168L13.9452 11.9968C13.7845 12.9611 12.9501 13.668 11.9724 13.668H2.86092C1.88324 13.668 1.04886 12.9611 0.888133 11.9968L0.75 11.168" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+  `,
+  pencil: `
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" fill="none">
+    <path d="M13.3756 5.04304L4.74938 13.6693H0.75V9.66927L9.37561 1.04309C9.76613 0.652545 10.3993 0.652534 10.7898 1.04307L13.3756 3.62883C13.7661 4.01936 13.7661 4.65252 13.3756 5.04304Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M7.41602 3.00195L11.416 7.00195" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
+    <path d="M14.0833 13.668H8.75" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+  </svg>
+  `
+
+};
diff --git a/eform-client/src/app/components/icons/index.ts b/eform-client/src/app/components/icons/index.ts
new file mode 100644
index 0000000000..3c771c32e1
--- /dev/null
+++ b/eform-client/src/app/components/icons/index.ts
@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+import { MatIconRegistry } from '@angular/material/icon';
+import { CUSTOM_ICONS } from './icons';
+
+@Injectable({ providedIn: 'root' })
+class IconService {
+  constructor(private registry: MatIconRegistry, private sanitizer: DomSanitizer) {}
+
+  register(): void {
+    Object.entries(CUSTOM_ICONS).forEach(([name, svg]) => {
+      this.registry.addSvgIconLiteral(
+        name,
+        this.sanitizer.bypassSecurityTrustHtml(svg)
+      );
+    });
+  }
+}
+
+export default IconService
diff --git a/eform-client/src/app/components/navigation/navigation.component.html b/eform-client/src/app/components/navigation/navigation.component.html
index 7ee572a2db..b278f630c6 100644
--- a/eform-client/src/app/components/navigation/navigation.component.html
+++ b/eform-client/src/app/components/navigation/navigation.component.html
@@ -8,7 +8,7 @@
       <!-- use a disabled button to provide padding for tree leaf -->
       <a mat-button
          style="width: 100%"
-         color="{{this.router.url === node.link ? 'accent' : ''}}"
+         [class.selected-node]="router.url === node.link"
          *ngIf="node.isInternalLink"
          routerLink="{{ node.link }}"
          class="nav-link px-3"
diff --git a/eform-client/src/app/components/navigation/navigation.component.scss b/eform-client/src/app/components/navigation/navigation.component.scss
index da88a45359..1c1b1da992 100644
--- a/eform-client/src/app/components/navigation/navigation.component.scss
+++ b/eform-client/src/app/components/navigation/navigation.component.scss
@@ -15,6 +15,17 @@ mat-tree {
         line-height: 1.4em;
       }
     }
+
+    .selected-node {
+      background-color: var(--mdc-theme-primary) !important;
+      color: var(--mdc-theme-on-primary) !important;
+      border-radius: var(--rounded-full);
+
+      &:hover{
+          background-color: var(--mdc-theme-primary-dark) !important;
+      }
+    }
+
   }
 
   mat-nested-tree-node { // styles for nested tree nodes
diff --git a/eform-client/src/app/modules/account-management/components/profile/change-password/change-password.component.html b/eform-client/src/app/modules/account-management/components/profile/change-password/change-password.component.html
index 9f9ccbd4c5..01794d27ca 100644
--- a/eform-client/src/app/modules/account-management/components/profile/change-password/change-password.component.html
+++ b/eform-client/src/app/modules/account-management/components/profile/change-password/change-password.component.html
@@ -1,7 +1,6 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="changePasswordSaveBtn"
     [disabled]="!valid"
     (click)="updateUserPassword()"
diff --git a/eform-client/src/app/modules/account-management/components/profile/profile-settings/profile-settings.component.html b/eform-client/src/app/modules/account-management/components/profile/profile-settings/profile-settings.component.html
index 42b1d6ad2d..527f45cc9a 100644
--- a/eform-client/src/app/modules/account-management/components/profile/profile-settings/profile-settings.component.html
+++ b/eform-client/src/app/modules/account-management/components/profile/profile-settings/profile-settings.component.html
@@ -1,8 +1,7 @@
 <eform-new-subheader>
   <div>
     <button
-      mat-raised-button
-      color="accent"
+      class="btn-primary btn-primary--icon-left"
       matTooltip="Save settings"
       id="ProfileSettingsSaveBtn"
       (click)="updateUserProfileSettings()">
@@ -75,17 +74,16 @@
         <div class="d-flex pt-2">
           <div class="align-self-center align-self-end mb-3">
             <button
-              mat-raised-button
-              color="primary"
+              class="btn-primary btn-primary--icon-left"
               *ngIf="profilePictureUploader?.queue?.length === 0"
               id="loginPageImageUploadBtn"
               (click)="loginPagefileInput.click()"
             >
-              {{ 'Upload' | translate }}
+              <mat-icon>upload</mat-icon>
+              <span>{{ 'Upload' | translate }}</span>
             </button>
             <button
-              mat-raised-button
-              color="warn"
+              class="btn-warning"
               *ngIf="profilePictureUploader?.queue?.length > 0"
               (click)="loginPagefileInput.click()"
             >
@@ -102,8 +100,7 @@
           </div>
           <div class="align-self-center align-self-end mb-3 pl-2">
             <button
-              mat-raised-button
-              color="accent"
+             class="btn-cancel"
               id="resetProfilePicture"
               (click)="resetProfilePicture()"
               matTooltip="{{ 'Reset' | translate }}"
diff --git a/eform-client/src/app/modules/account-management/components/users/user-modal/user-modal.component.html b/eform-client/src/app/modules/account-management/components/users/user-modal/user-modal.component.html
index 25ea61990d..a17d0dcd34 100644
--- a/eform-client/src/app/modules/account-management/components/users/user-modal/user-modal.component.html
+++ b/eform-client/src/app/modules/account-management/components/users/user-modal/user-modal.component.html
@@ -82,10 +82,9 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit User' : 'New User') | translate }}</h3>
     </div>
   </form>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     type="submit"
     [disabled]="userForm.invalid"
     (click)="submit()"
@@ -94,7 +93,7 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit User' : 'New User') | translate }}</h3>
     {{ (edit ? 'Save' : 'Create') | translate }}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
     type="button"
     [id]="edit ? 'editUserCancelSaveBtn' : 'createAdministrationUserCancelBtn'"
diff --git a/eform-client/src/app/modules/account-management/components/users/user-set-password-modal/user-set-password.component.html b/eform-client/src/app/modules/account-management/components/users/user-set-password-modal/user-set-password.component.html
index 42694c9ff9..72c2ef99c7 100644
--- a/eform-client/src/app/modules/account-management/components/users/user-set-password-modal/user-set-password.component.html
+++ b/eform-client/src/app/modules/account-management/components/users/user-set-password-modal/user-set-password.component.html
@@ -88,10 +88,9 @@ <h3 mat-dialog-title>{{ 'Set user password' | translate }}</h3>
     </mat-form-field>
   </form>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="warn"
+    class="btn-warning"
     id="userDeleteBtn"
     (click)="setPassword()"
     [disabled]="setPasswordForm.invalid"
@@ -99,7 +98,7 @@ <h3 mat-dialog-title>{{ 'Set user password' | translate }}</h3>
     {{ 'Save' | translate }}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="userDeleteCancelBtn"
     (click)="hide()"
   >
diff --git a/eform-client/src/app/modules/account-management/components/users/users-page/users-page.component.html b/eform-client/src/app/modules/account-management/components/users/users-page/users-page.component.html
index aee37fa060..3a9accb328 100644
--- a/eform-client/src/app/modules/account-management/components/users/users-page/users-page.component.html
+++ b/eform-client/src/app/modules/account-management/components/users/users-page/users-page.component.html
@@ -1,7 +1,6 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="openNewUserModal()"
     *ngIf="selectCurrentUserClaimsUsersCreate$ | async"
     matTooltip="{{ 'Create user' | translate }}"
diff --git a/eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.html b/eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.html
index 13754afe08..1a5ff26cf6 100644
--- a/eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.html
+++ b/eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.html
@@ -1,14 +1,14 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="createEntitySearchBtn"
     matTooltip="{{ 'Create new searchable list' | translate }}"
     *ngIf="selectCurrentUserClaimsEntitySearchCreate$ | async"
     matTooltipPosition="left"
     [routerLink]="['/advanced/entity-search/create']"
   >
-    {{ 'New list' | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ 'New list' | translate }}</span>
   </button>
 </eform-new-subheader>
 
diff --git a/eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.html b/eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.html
index 4e21402cfa..0852e8208a 100644
--- a/eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.html
+++ b/eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.html
@@ -1,14 +1,14 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="entitySelectCreateBtn"
     matTooltip="{{ 'Create new selectable list' | translate }}"
     *ngIf="selectCurrentUserClaimsEntitySelectCreate$ | async"
     matTooltipPosition="left"
     [routerLink]="['/advanced/entity-select/create']"
   >
-    {{ 'New list' | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ 'New list' | translate }}</span>
   </button>
 </eform-new-subheader>
 
diff --git a/eform-client/src/app/modules/advanced/components/folders/folder-edit-create/folder-edit-create.component.html b/eform-client/src/app/modules/advanced/components/folders/folder-edit-create/folder-edit-create.component.html
index 97011389d0..24c6d23296 100644
--- a/eform-client/src/app/modules/advanced/components/folders/folder-edit-create/folder-edit-create.component.html
+++ b/eform-client/src/app/modules/advanced/components/folders/folder-edit-create/folder-edit-create.component.html
@@ -62,17 +62,16 @@ <h3 mat-dialog-title>{{(edit ? 'Edit folder' : 'New folder') | translate}}</h3>
     </ng-container>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="edit ? updateFolder() : createFolder()"
     id="{{edit ? 'saveEditBtn' : 'folderSaveBtn'}}"
   >
     {{(edit ? 'Save' : 'Create') | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="{{edit ? 'cancelEditBtn' : 'cancelCreateBtn'}}"
     (click)="hide()"
   >
diff --git a/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.html b/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.html
index 9dec3116e0..85539ed198 100644
--- a/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.html
+++ b/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.html
@@ -13,14 +13,14 @@
       (deleteNode)="openDeleteModal($event)"
     ></app-eform-tree-view-picker>
     <button
-      mat-raised-button
+     class="btn-primary btn-primary--icon-left"
       style="margin-top: 10px"
       id="newFolderBtn"
       (click)="openCreateModal()"
       *ngIf="selectCurrentUserClaimsWorkersCreate$ | async"
     >
       <mat-icon>add</mat-icon>
-      {{ 'Add new' | translate }}
+      <span>{{ 'Add new' | translate }}</span>
     </button>
   </mat-card-content>
 </mat-card>
diff --git a/eform-client/src/app/modules/advanced/components/sites/site-edit/site-edit.component.html b/eform-client/src/app/modules/advanced/components/sites/site-edit/site-edit.component.html
index 3838789393..3831a066c1 100644
--- a/eform-client/src/app/modules/advanced/components/sites/site-edit/site-edit.component.html
+++ b/eform-client/src/app/modules/advanced/components/sites/site-edit/site-edit.component.html
@@ -26,17 +26,16 @@ <h3 mat-dialog-title>{{ 'Edit' | translate}}</h3>
   </div>
 </div>
 
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="siteEditSaveBtn"
     (click)="updateSingle()"
   >
-    {{'Save' | translate}}
+    <span>{{'Save' | translate}}</span>
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="siteEditCancelBtn"
     (click)="hide()"
   >
diff --git a/eform-client/src/app/modules/advanced/components/sites/sites/sites.component.html b/eform-client/src/app/modules/advanced/components/sites/sites/sites.component.html
index 2b47a44e01..ba43c300c2 100644
--- a/eform-client/src/app/modules/advanced/components/sites/sites/sites.component.html
+++ b/eform-client/src/app/modules/advanced/components/sites/sites/sites.component.html
@@ -1,7 +1,7 @@
 <eform-new-subheader>
   <div class="">
     <button
-      mat-icon-button
+      class="btn-secondary btn-secondary--icon-rounded-border"
       id="sitesManageTagsBtn"
       (click)="openEditTagsModal()"
       matTooltip="{{ 'Manage tags' | translate }}"
diff --git a/eform-client/src/app/modules/advanced/components/units/unit-move/unit-move.component.html b/eform-client/src/app/modules/advanced/components/units/unit-move/unit-move.component.html
index e53be62161..b03d3a2072 100644
--- a/eform-client/src/app/modules/advanced/components/units/unit-move/unit-move.component.html
+++ b/eform-client/src/app/modules/advanced/components/units/unit-move/unit-move.component.html
@@ -25,17 +25,16 @@ <h3 mat-dialog-title>{{'Move unit' | translate}}</h3>
     </mat-form-field>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
     id="workerSaveBtn"
-    mat-raised-button
-    color="warn"
+    class="btn-warning"
     (click)="moveUnit()"
   >
     {{'Move' | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
   >
     {{'Cancel' | translate}}
diff --git a/eform-client/src/app/modules/advanced/components/workers/worker-edit-create/worker-edit-create.component.html b/eform-client/src/app/modules/advanced/components/workers/worker-edit-create/worker-edit-create.component.html
index 98de01c42e..aaa41c4f75 100644
--- a/eform-client/src/app/modules/advanced/components/workers/worker-edit-create/worker-edit-create.component.html
+++ b/eform-client/src/app/modules/advanced/components/workers/worker-edit-create/worker-edit-create.component.html
@@ -37,10 +37,9 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit' : 'Create Worker') | translate}}</h3>
     </mat-form-field>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="edit ? updateSingle() : createWorker()"
     [disabled]="!workerModel.firstName || !workerModel.lastName"
     id="{{edit ? 'workerEditSaveBtn' : 'workerSaveBtn'}}"
@@ -48,7 +47,7 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit' : 'Create Worker') | translate}}</h3>
     {{(edit ? 'Save' : 'Create') | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="{{edit ? 'workerCancelEditBtn' : 'workerCancelCreateBtn'}}"
     (click)="hide()"
   >
diff --git a/eform-client/src/app/modules/advanced/components/workers/workers/workers.component.html b/eform-client/src/app/modules/advanced/components/workers/workers/workers.component.html
index 751f45e63b..678e20c2c5 100644
--- a/eform-client/src/app/modules/advanced/components/workers/workers/workers.component.html
+++ b/eform-client/src/app/modules/advanced/components/workers/workers/workers.component.html
@@ -1,12 +1,13 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
+    id="newDeviceUserBtn"
     id="workerCreateBtn"
     *ngIf="selectCurrentUserClaimsWorkersCreate$ | async"
     (click)="openCreateModal()"
   >
-    {{ 'Create Worker' | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ 'Create Worker' | translate }}</span>
   </button>
 </eform-new-subheader>
 
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-dropdown/navigation-menu-custom-dropdown.component.html b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-dropdown/navigation-menu-custom-dropdown.component.html
index ff057decbb..88e58c5dd9 100644
--- a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-dropdown/navigation-menu-custom-dropdown.component.html
+++ b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-dropdown/navigation-menu-custom-dropdown.component.html
@@ -24,17 +24,16 @@ <h3 mat-dialog-title>{{'New dropdown' | translate}}</h3>
     />
   </mat-form-field>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="customDropdownCreateBtn"
     (click)="hide(true)"
   >
     {{'Add' | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="menuItemDeleteCancelBtn"
     (click)="hide()"
   >
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-link/navigation-menu-custom-link.component.html b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-link/navigation-menu-custom-link.component.html
index 7b38709005..85c5630efd 100644
--- a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-link/navigation-menu-custom-link.component.html
+++ b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-link/navigation-menu-custom-link.component.html
@@ -47,17 +47,16 @@ <h3 mat-dialog-title>{{ 'New custom link' | translate }}</h3>
     </mat-form-field>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="customLinkCreateBtn"
     (click)="addCustomLink()"
   >
     {{ 'Add' | translate }}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
     type="button"
     id="customLinkCancelCreateBtn"
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.html b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.html
index a1a443af06..a54cfbc2c2 100644
--- a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.html
+++ b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.html
@@ -66,17 +66,16 @@ <h3 mat-dialog-title>{{'Edit menu entry' | translate}}</h3>
     </mat-form-field>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="editItemSaveBtn"
     (click)="updateItem()"
   >
     {{'Save' | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="editItemSaveCancelBtn"
     (click)="hide()"
   >
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-page/navigation-menu-page.component.html b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-page/navigation-menu-page.component.html
index 8de68bdd4c..f92a09ff4a 100644
--- a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-page/navigation-menu-page.component.html
+++ b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-page/navigation-menu-page.component.html
@@ -1,7 +1,7 @@
 <eform-new-subheader>
-  <div>
+  <div class="d-flex justify-content-center align-items-center gap-12">
     <button
-      mat-icon-button
+      class="btn-secondary btn-secondary--icon-rounded-border"
       id="resetBtn"
       matTooltip="{{ 'Reset' | translate }}"
       (click)="showResetNavigationMenuModal()"
@@ -9,7 +9,7 @@
       <mat-icon>undo</mat-icon>
     </button>
     <button
-      mat-raised-button
+      class="btn-primary btn-primary--icon-left"
       id="navigationMenuSaveBtn"
       (click)="updateNavigationMenu()"
       color="accent"
diff --git a/eform-client/src/app/modules/application-settings/components/admin-settings/admin-settings.component.html b/eform-client/src/app/modules/application-settings/components/admin-settings/admin-settings.component.html
index 88b755f217..585a30785b 100644
--- a/eform-client/src/app/modules/application-settings/components/admin-settings/admin-settings.component.html
+++ b/eform-client/src/app/modules/application-settings/components/admin-settings/admin-settings.component.html
@@ -1,8 +1,7 @@
 <ng-container *ngIf="selectAuthIsAuth$ | async">
 <eform-new-subheader [subtitle]="adminSettingsModel.assemblyVersion">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     matTooltip="{{ 'Save settings' | translate }}"
     matTooltipPosition="left"
     id="applicationSettingsSaveBtn"
@@ -84,8 +83,7 @@ <h4>
             </div>
             <div class="align-self-center align-self-end mb-3">
               <button
-                mat-raised-button
-                color="primary"
+                class="btn-primary btn-primary--icon-left"
                 *ngIf="loginPageImageUploader?.queue?.length === 0"
                 id="loginPageImageUploadBtn"
                 (click)="loginPagefileInput.click()"
@@ -93,7 +91,7 @@ <h4>
                 {{ 'Upload' | translate }}
               </button>
               <button
-                mat-raised-button
+                class="btn-warning"
                 color="warn"
                 *ngIf="loginPageImageUploader?.queue?.length > 0"
                 (click)="loginPagefileInput.click()"
@@ -193,8 +191,7 @@ <h4 class="d-flex">
             </div>
             <div class="align-self-center align-self-end mb-3">
               <button
-                mat-raised-button
-                color="primary"
+                class="btn-primary btn-primary--icon-left"
                 *ngIf="headerImageUploader?.queue?.length === 0"
                 id="siteHeaderUploadBtn"
                 (click)="headerImageUploaderInput.click()"
@@ -202,8 +199,7 @@ <h4 class="d-flex">
                 {{ 'Upload' | translate }}
               </button>
               <button
-                mat-raised-button
-                color="warn"
+                class="btn-warning"
                 *ngIf="headerImageUploader?.queue?.length > 0"
                 (click)="headerImageUploaderInput.click()"
               >
diff --git a/eform-client/src/app/modules/auth/components/auth/login/login.component.html b/eform-client/src/app/modules/auth/components/auth/login/login.component.html
index 874e0ee85a..4fbc2dae0f 100644
--- a/eform-client/src/app/modules/auth/components/auth/login/login.component.html
+++ b/eform-client/src/app/modules/auth/components/auth/login/login.component.html
@@ -27,9 +27,8 @@
     <button
       type="submit"
       id="loginBtn"
-      mat-raised-button
-      color="accent"
-      style="text-transform: uppercase;"
+      class="btn-primary btn-primary--icon-left"
+      style="text-transform: uppercase; color: #0F1316"
       (click)="submitLoginForm()"
     >
       {{ 'Login' | translate }}
diff --git a/eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.html b/eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.html
index f67101341a..074e4168d9 100644
--- a/eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.html
+++ b/eform-client/src/app/modules/device-users/components/device-users-page/device-users-page.component.html
@@ -1,13 +1,13 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
     id="newDeviceUserBtn"
     *ngIf="selectCurrentUserClaimsDeviceUsersCreate$ | async"
     matTooltip="{{ 'Create Device User' | translate }}"
     (click)="openCreateModal()"
+    class="btn-primary btn-primary--icon-left"
   >
-    {{ 'New Device User' | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ 'New Device User' | translate }}</span>
   </button>
 </eform-new-subheader>
 
diff --git a/eform-client/src/app/modules/device-users/components/edit-create-user-modal/edit-create-user-modal.component.html b/eform-client/src/app/modules/device-users/components/edit-create-user-modal/edit-create-user-modal.component.html
index 1f6d364809..fe3982da8a 100644
--- a/eform-client/src/app/modules/device-users/components/edit-create-user-modal/edit-create-user-modal.component.html
+++ b/eform-client/src/app/modules/device-users/components/edit-create-user-modal/edit-create-user-modal.component.html
@@ -34,18 +34,17 @@ <h3 mat-dialog-title>{{ (edit ? 'Edit Device User' : 'New Device User') | transl
   </div>
 </div>
 
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="edit ? updateSingle() : createDeviceUser()"
     [disabled]="!simpleSiteModel.userFirstName || !simpleSiteModel.userLastName"
     id="{{edit ? 'saveEditBtn' : 'saveCreateBtn'}}"
   >
-    {{(edit ? 'Save' : 'Create') | translate}}
+    <span>{{(edit ? 'Save' : 'Create') | translate}}</span>
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="{{edit ? 'cancelEditBtn' : 'cancelCreateBtn'}}"
     (click)="hide()"
   >
diff --git a/eform-client/src/app/modules/eforms/components/eform-columns-modal/eform-columns-modal.component.html b/eform-client/src/app/modules/eforms/components/eform-columns-modal/eform-columns-modal.component.html
index 6f87a96b3e..72b781095f 100644
--- a/eform-client/src/app/modules/eforms/components/eform-columns-modal/eform-columns-modal.component.html
+++ b/eform-client/src/app/modules/eforms/components/eform-columns-modal/eform-columns-modal.component.html
@@ -101,16 +101,15 @@ <h3 mat-dialog-title>{{ 'Select columns for displaying in Cases' | translate }}<
     </mat-form-field>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="updateColumns()"
   >
-    {{ 'Save' | translate }}
+    <span>{{ 'Save' | translate }}</span>
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
   >
     {{ 'Cancel' | translate }}
diff --git a/eform-client/src/app/modules/eforms/components/eform-create-modal/eform-create-modal.component.html b/eform-client/src/app/modules/eforms/components/eform-create-modal/eform-create-modal.component.html
index 8ece9aaef5..0bde495bba 100644
--- a/eform-client/src/app/modules/eforms/components/eform-create-modal/eform-create-modal.component.html
+++ b/eform-client/src/app/modules/eforms/components/eform-create-modal/eform-create-modal.component.html
@@ -40,18 +40,18 @@ <h3 mat-dialog-title>{{ 'Create eForm' | translate }}</h3>
   </div>
 </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="createEformBtn"
     [disabled]="!eFormCreateModel.eFormXml"
     (click)="createTemplate()"
   >
-    {{'Create' | translate}}
+    <mat-icon>add</mat-icon>
+    <span>{{'Create' | translate}}</span>
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="cancelCreateEformBtn"
     (click)="hide()"
   >
diff --git a/eform-client/src/app/modules/eforms/components/eform-duplicate-confrim-modal/eform-duplicate-confirm-modal.component.html b/eform-client/src/app/modules/eforms/components/eform-duplicate-confrim-modal/eform-duplicate-confirm-modal.component.html
index 1d568239b3..749af69131 100644
--- a/eform-client/src/app/modules/eforms/components/eform-duplicate-confrim-modal/eform-duplicate-confirm-modal.component.html
+++ b/eform-client/src/app/modules/eforms/components/eform-duplicate-confrim-modal/eform-duplicate-confirm-modal.component.html
@@ -18,17 +18,16 @@ <h3 mat-dialog-title>{{ 'Are you sure you want to duplicate eForm' | translate }
     <strong>{{ selectedTemplateDto.label }}</strong>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="eFormDuplicateDuplicateBtn"
     (click)="duplicateEfrom()"
   >
-    {{ 'Duplicate' | translate }}
+    <span>{{ 'Duplicate' | translate }}</span>
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="eFormDuplicateCancelBtn"
     (click)="hide()"
   >
diff --git a/eform-client/src/app/modules/eforms/components/eform-edit-tags-modal/eform-edit-tags-modal.component.html b/eform-client/src/app/modules/eforms/components/eform-edit-tags-modal/eform-edit-tags-modal.component.html
index a5b1413e30..b170fb6f38 100644
--- a/eform-client/src/app/modules/eforms/components/eform-edit-tags-modal/eform-edit-tags-modal.component.html
+++ b/eform-client/src/app/modules/eforms/components/eform-edit-tags-modal/eform-edit-tags-modal.component.html
@@ -52,18 +52,17 @@ <h3 mat-dialog-title>{{ 'Select tags for template' | translate }}</h3>
     </div>
   </div>-->
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
     id="tagEditSaveBtn"
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="updateTemplateTags()"
   >
-    {{ 'Save' | translate }}
+    <span>{{ 'Save' | translate }}</span>
   </button>
   <button
     id="tagEditSaveCancelBtn"
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
   >
     {{ 'Cancel' | translate }}
diff --git a/eform-client/src/app/modules/eforms/components/eform-upload-zip-modal/eform-upload-zip-modal.component.html b/eform-client/src/app/modules/eforms/components/eform-upload-zip-modal/eform-upload-zip-modal.component.html
index d3e7a921f5..0258d1381c 100644
--- a/eform-client/src/app/modules/eforms/components/eform-upload-zip-modal/eform-upload-zip-modal.component.html
+++ b/eform-client/src/app/modules/eforms/components/eform-upload-zip-modal/eform-upload-zip-modal.component.html
@@ -1,16 +1,14 @@
 <h3 mat-dialog-title>{{'Upload template ZIP' | translate}}</h3>
-<div mat-dialog-content class="d-flex flex-column align-items-start">
+<div mat-dialog-content class="d-flex flex-column align-items-start" style="height: 100%; min-height: 100px">
   <button
-    mat-raised-button
-    color="primary"
+    class="btn-primary btn-primary--icon-left"
     *ngIf="zipFileUploader?.queue?.length == 0"
     (click)="zipInput.click()"
   >
-    {{'Upload' | translate}}
+    <span>{{'Upload' | translate}}</span>
   </button>
   <button
-    mat-raised-button
-    color="warn"
+    class="btn-warning"
     *ngIf="zipFileUploader?.queue?.length > 0"
     (click)="zipInput.click()"
   >
@@ -32,17 +30,17 @@ <h3 mat-dialog-title>{{'Upload template ZIP' | translate}}</h3>
     </div>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="uploadTemplateZIP()"
     [disabled]="zipFileUploader?.queue?.length == 0"
   >
-    {{'Upload' | translate}}
+    <mat-icon>upload</mat-icon>
+    <span>{{'Upload' | translate}}</span>
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hideZipModal()"
   >
     {{'Close' | translate}}
diff --git a/eform-client/src/app/modules/eforms/components/eforms-bulk-import-modal/eforms-bulk-import-modal.component.html b/eform-client/src/app/modules/eforms/components/eforms-bulk-import-modal/eforms-bulk-import-modal.component.html
index 9924ee4bbb..d71edbb3e1 100644
--- a/eform-client/src/app/modules/eforms/components/eforms-bulk-import-modal/eforms-bulk-import-modal.component.html
+++ b/eform-client/src/app/modules/eforms/components/eforms-bulk-import-modal/eforms-bulk-import-modal.component.html
@@ -2,17 +2,16 @@ <h3 mat-dialog-title>{{ 'Upload excel file' | translate }}</h3>
 <div mat-dialog-content class="">
   <div class="d-flex flex-row justify-content-start">
     <button
-      mat-raised-button
-      color="primary"
+      class="btn-primary btn-primary--icon-left"
       *ngIf="xlsxEformsFileUploader?.queue?.length == 0"
       (click)="xlsxEforms.click()"
       [loading]="loaderService.isLoading | async"
     >
-      {{ 'Upload' | translate }}
+      <mat-icon>upload</mat-icon>
+      <span>{{ 'Upload' | translate }}</span>
     </button>
     <button
-      mat-raised-button
-      color="warn"
+      class="btn-warning"
       *ngIf="xlsxEformsFileUploader?.queue?.length > 0"
       (click)="xlsxEforms.click()"
       [loading]="loaderService.isLoading | async"
@@ -44,7 +43,7 @@ <h3 mat-dialog-title>{{ 'Upload excel file' | translate }}</h3>
 </div>
 <div mat-dialog-actions class="d-flex flex-row justify-content-end">
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="excelEformsModal()"
   >
     {{ 'Close' | translate }}
diff --git a/eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.html b/eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.html
index c584fd25dd..65fbb416ba 100644
--- a/eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.html
+++ b/eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.html
@@ -1,39 +1,44 @@
 <eform-new-subheader>
-  <div class="">
+  <div class="d-flex flex-row justify-content-center align-items-center gap-12">
+    <div class="line-vert"></div>
     <button
-      mat-icon-button
+      class="btn-secondary btn-secondary--icon-rounded-border"
       id="importEformsBtn"
       matTooltip="{{ 'Import eforms' | translate }}"
       *ngIf="selectCurrentUserClaimsEformsCreate$ | async"
       (click)="openEformsImportModal()">
-      <mat-icon>file_upload</mat-icon>
+      <mat-icon class="icon-secondary">upload</mat-icon>
     </button>
     <button
-      mat-icon-button
+      class="btn-secondary btn-secondary--icon-rounded-border"
       id="eformsManageTagsBtn"
       (click)="openTagsModal()"
       matTooltip="{{ 'Manage tags' | translate }}"
       *ngIf="selectEformAllowManagingEformTags$ | async"
     >
-      <mat-icon>discount</mat-icon>
+      <mat-icon class="icon-secondary">style</mat-icon>
     </button>
-    <a
-      mat-icon-button
-      id="eformsVisualEditor"
-      *ngIf="selectCurrentUserClaimsEformsCreate$ | async"
-      [routerLink]="['visual-editor']"
-      matTooltip="{{ 'New eForm' | translate }}"
-    >
-      <mat-icon>add</mat-icon>
-    </a>
+
     <button
-      mat-icon-button
       matTooltip="{{ 'New eForm from XML' | translate }}"
       id="newEFormBtn"
       *ngIf="selectCurrentUserClaimsEformsCreate$ | async"
       (click)="openNewEformModal()"
+      class="btn-secondary btn-secondary--icon-rounded-border"
+    >
+      <mat-icon class="icon-secondary">text_snippet</mat-icon>
+    </button>
+
+    <div class="line-vert"></div>
+
+    <button
+      id="eformsVisualEditor"
+      class="btn-primary btn-primary--icon-left"
+      *ngIf="selectCurrentUserClaimsEformsCreate$ | async"
+      [routerLink]="['visual-editor']"
     >
-      <mat-icon>code</mat-icon>
+      <mat-icon>add</mat-icon>
+      <span>{{ 'New eForm' | translate }}</span>
     </button>
   </div>
 </eform-new-subheader>
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist-modal/visual-editor-checklist-modal.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist-modal/visual-editor-checklist-modal.component.html
index 6d7af01b21..e59e8bfc44 100644
--- a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist-modal/visual-editor-checklist-modal.component.html
+++ b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist-modal/visual-editor-checklist-modal.component.html
@@ -34,17 +34,16 @@ <h3 mat-dialog-title>{{ (isChecklistSelected ? 'Edit sub eForm' : 'New sub eForm
     </ng-container>
   </ng-container>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="isChecklistSelected ? onUpdateChecklist() : onCreateChecklist()"
     id="changeChecklistSaveBtn"
   >
-    {{(isChecklistSelected ? 'Save' : 'Create') | translate}}
+    <span>{{(isChecklistSelected ? 'Save' : 'Create') | translate}}</span>
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
     id="changeChecklistSaveCancelBtn"
   >
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.html
index 8b65a1ca8b..cebcfd1735 100644
--- a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.html
+++ b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/checklist/visual-editor-checklist/visual-editor-checklist.component.html
@@ -24,7 +24,7 @@
             *ngIf="checklist.fields.length == 0"
             mat-icon-button
             [matTooltip]="'New sub eForm' | translate"
-            color="accent"
+            color="primary"
             id="addNewNestedChecklist{{ checklistIndex }}"
             (click)="onAddNewNestedChecklist()"
           >
@@ -33,7 +33,7 @@
           <button
             *ngIf="checklist.checkLists.length == 0"
             mat-icon-button
-            color="accent"
+            color="primary"
             [matTooltip]="'New nested field' | translate"
             id="addNewNestedField{{ checklistIndex }}"
             (click)="onAddNewNestedField()"
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field-modal/visual-editor-field-modal.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field-modal/visual-editor-field-modal.component.html
index b09fa9b983..3c90427b93 100644
--- a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field-modal/visual-editor-field-modal.component.html
+++ b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-field-modal/visual-editor-field-modal.component.html
@@ -162,17 +162,17 @@ <h3 mat-dialog-title>{{ (isFieldSelected ? 'Edit field' : 'New field') | transla
   >
   </app-visual-editor-additional-field-show-picture>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end gap-12">
   <button
-    mat-raised-button
+    class="btn-primary btn-primary--icon-left"
     color="accent"
     (click)="isFieldSelected ? onUpdateField() : onCreateField()"
     id="changeFieldSaveBtn"
   >
-    {{'Save' | translate}}
+    <span>{{'Save' | translate}}</span>
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
     id="changeFieldSaveCancelBtn"
   >
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.html
index 172bf0b8ed..73490a5ce7 100644
--- a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.html
+++ b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-page/eform-visual-editor-container/eform-visual-editor-container.component.html
@@ -2,26 +2,30 @@
   [forceStaticTitle]="true"
   [title]="(selectedTemplateId ? 'eForm' : 'New eForm') | translate"
 >
+  <div class="d-flex flex-row justify-content-center align-items-center gap-12">
   <button
-    mat-raised-button
+    class="btn-secondary btn-secondary--icon-rounded-border"
     *ngIf="selectCurrentUserIsAdmin$ | async"
     id="reportEditHeadersBtn"
     color="accent"
     (click)="showHeadersEditModal()"
+    matTooltip="{{ 'Edit headers' | translate }}"
   >
-    {{ 'Edit headers' | translate }}
+    <mat-icon class="icon-secondary">border_color</mat-icon>
   </button>
   <button
-    mat-icon-button
+    class="btn-secondary btn-secondary--icon-rounded-border"
     id="manageTags"
     (click)="openTagsModal()"
     matTooltip="{{ 'Manage tags' | translate }}"
   >
-    <mat-icon>discount</mat-icon>
+    <mat-icon class="icon-secondary">style</mat-icon>
   </button>
+
+  <div class="line-vert"></div>
+
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="
         selectedTemplateId ? updateVisualTemplate() : createVisualTemplate()
       "
@@ -29,16 +33,17 @@
     id="saveCreateEformBtn"
     [disabled]="isAllNamesEmpty"
   >
-    {{ (selectedTemplateId ? 'Save' : 'Create') | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ (selectedTemplateId ? 'Save' : 'Create') | translate }}</span>
   </button>
   <button
-    mat-raised-button
-    color="primary"
     id="cancel{{(selectedTemplateId ? 'Edit' : 'Create')}}Btn"
     [routerLink]="['/']"
+    class="btn-cancel"
   >
     {{'Cancel'| translate}}
   </button>
+  </div>
 </eform-new-subheader>
 
 <mat-card class="d-flex flex-column mb-3" style="padding-right: 0; padding-left: 0; padding-bottom: 0">
@@ -141,7 +146,7 @@
       mat-icon-button
       id="initialFieldCreateBtn"
       [matTooltip]="'Add field' | translate"
-      color="accent"
+      color="primary"
       (click)="showFieldModal()"
     >
       <mat-icon>add</mat-icon>
@@ -149,7 +154,7 @@
     <button
       *ngIf="visualEditorTemplateModel.fields.length === 0"
       mat-icon-button
-      color="accent"
+      color="primary"
       id="initialChecklistCreateBtn"
       [matTooltip]="'Add sub eForm' | translate"
       (click)="showChecklistModal()"
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/eform-visual-editor.module.ts b/eform-client/src/app/modules/eforms/eform-visual-editor/eform-visual-editor.module.ts
index e12e34d225..76a3e92102 100644
--- a/eform-client/src/app/modules/eforms/eform-visual-editor/eform-visual-editor.module.ts
+++ b/eform-client/src/app/modules/eforms/eform-visual-editor/eform-visual-editor.module.ts
@@ -39,6 +39,7 @@ import {DragDropModule} from '@angular/cdk/drag-drop';
 import {MtxGridModule} from '@ng-matero/extensions/grid';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatDatepickerModule} from '@angular/material/datepicker';
+import {AppIconComponent} from "src/app/components/icons/app-icon/app-icon.component";
 
 @NgModule({
   declarations: [
@@ -84,6 +85,7 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
     MtxGridModule,
     MatSlideToggleModule,
     MatDatepickerModule,
+    AppIconComponent,
   ],
 })
 export class EformVisualEditorModule {
diff --git a/eform-client/src/app/modules/eforms/eforms.module.ts b/eform-client/src/app/modules/eforms/eforms.module.ts
index 3b7f982340..b068cd3073 100644
--- a/eform-client/src/app/modules/eforms/eforms.module.ts
+++ b/eform-client/src/app/modules/eforms/eforms.module.ts
@@ -31,6 +31,7 @@ import {MtxGridModule} from '@ng-matero/extensions/grid';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MtxButtonModule} from '@ng-matero/extensions/button';
 import {MatChipsModule} from '@angular/material/chips';
+import {AppIconComponent} from "src/app/components/icons/app-icon/app-icon.component";
 
 @NgModule({
     imports: [
@@ -55,6 +56,7 @@ import {MatChipsModule} from '@angular/material/chips';
         MatTooltipModule,
         MtxButtonModule,
         MatChipsModule,
+        AppIconComponent,
     ],
   declarations: [
     EformsPageComponent,
diff --git a/eform-client/src/app/modules/email-recipients/components/email-recipients-page/email-recipients-page.component.html b/eform-client/src/app/modules/email-recipients/components/email-recipients-page/email-recipients-page.component.html
index 5ff5bff28a..c35bbf70c0 100644
--- a/eform-client/src/app/modules/email-recipients/components/email-recipients-page/email-recipients-page.component.html
+++ b/eform-client/src/app/modules/email-recipients/components/email-recipients-page/email-recipients-page.component.html
@@ -1,20 +1,22 @@
 <eform-new-subheader>
+<div class="d-flex justify-content-center align-items-center gap-12">
   <button
-    mat-icon-button
+    class="btn-secondary btn-secondary--icon-rounded-border"
     (click)="openTagsModal()"
     matTooltip="{{ 'Manage tags' | translate }}"
   >
     <mat-icon>discount</mat-icon>
   </button>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     id="createEmailRecipientBtn"
     matTooltip="{{ 'Add Recipients' | translate }}"
     (click)="openCreateModal()"
   >
-    {{ 'Add Recipients' | translate }}
+    <mat-icon>add</mat-icon>
+    <span>{{ 'Add Recipients' | translate }}</span>
   </button>
+</div>
 </eform-new-subheader>
 
 <ng-template #toolbarTpl>
diff --git a/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-new/email-recipients-new.component.html b/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-new/email-recipients-new.component.html
index ea80aa6cc7..de97e051b7 100644
--- a/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-new/email-recipients-new.component.html
+++ b/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-new/email-recipients-new.component.html
@@ -35,17 +35,16 @@ <h3 mat-dialog-title>{{'New Email recipients' | translate}}</h3>
     </mat-form-field>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="createEmailRecipients(textAreaData)"
     id="emailRecipientsCreateSaveBtn"
   >
     {{'Save' | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     id="emailRecipientsSaveCancelBtn"
     (click)="hide()"
   >
diff --git a/eform-client/src/app/modules/plugins-management/components/installed/installed-plugin-permissions/installed-plugin-permissions.component.html b/eform-client/src/app/modules/plugins-management/components/installed/installed-plugin-permissions/installed-plugin-permissions.component.html
index 6bdae733c8..4ddc22722a 100644
--- a/eform-client/src/app/modules/plugins-management/components/installed/installed-plugin-permissions/installed-plugin-permissions.component.html
+++ b/eform-client/src/app/modules/plugins-management/components/installed/installed-plugin-permissions/installed-plugin-permissions.component.html
@@ -22,17 +22,16 @@ <h3>{{ getSecurityGroupName(groupPermissions.groupId) }}</h3>
     </mat-card>
   </div>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="updatePluginPermissions()"
     id="saveBtn"
   >
-    {{ 'Save' | translate }}
+    <span>{{ 'Save' | translate }}</span>
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
     id="cancelCreateBtn"
   >
diff --git a/eform-client/src/app/modules/security/components/security-group-create/security-group-create.component.html b/eform-client/src/app/modules/security/components/security-group-create/security-group-create.component.html
index f7d0e8a8d0..b5ff213840 100644
--- a/eform-client/src/app/modules/security/components/security-group-create/security-group-create.component.html
+++ b/eform-client/src/app/modules/security/components/security-group-create/security-group-create.component.html
@@ -1,7 +1,6 @@
 <eform-new-subheader [title]="'Create Security Group' | translate" [forceStaticTitle]="true">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     [disabled]="!securityGroupCreateModel.name"
     (click)="createSecurityGroup()"
     matTooltip="{{ 'Create Group' | translate }}"
diff --git a/eform-client/src/app/modules/security/components/security-group-permissions/security-group-eforms-permissions/security-group-eforms-permissions.component.html b/eform-client/src/app/modules/security/components/security-group-permissions/security-group-eforms-permissions/security-group-eforms-permissions.component.html
index b475f2e138..b2edb377f2 100644
--- a/eform-client/src/app/modules/security/components/security-group-permissions/security-group-eforms-permissions/security-group-eforms-permissions.component.html
+++ b/eform-client/src/app/modules/security/components/security-group-permissions/security-group-eforms-permissions/security-group-eforms-permissions.component.html
@@ -16,8 +16,7 @@
     </div>
     <div class="d-flex">
       <button
-        mat-raised-button
-        color="accent"
+        class="btn-primary btn-primary--icon-left"
         (click)="openEformBindModal()"
         matTooltip="{{ 'Add Eform to Group' | translate }}"
         id="newSecurityGroupBtn"
diff --git a/eform-client/src/app/modules/security/components/security-group-permissions/security-group-general-permissions/security-group-general-permissions.component.html b/eform-client/src/app/modules/security/components/security-group-permissions/security-group-general-permissions/security-group-general-permissions.component.html
index 648c9bcab4..3a6c6c8e0c 100644
--- a/eform-client/src/app/modules/security/components/security-group-permissions/security-group-general-permissions/security-group-general-permissions.component.html
+++ b/eform-client/src/app/modules/security/components/security-group-permissions/security-group-general-permissions/security-group-general-permissions.component.html
@@ -7,8 +7,7 @@
   [forceStaticTitle]="true"
 >
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="updateSecurityGroupGeneralPermissions()"
     matTooltip="{{ 'Update Permissions' | translate }}"
     id="newSecurityGroupBtn"
diff --git a/eform-client/src/app/modules/security/components/security-group-settings/security-group-settings.component.html b/eform-client/src/app/modules/security/components/security-group-settings/security-group-settings.component.html
index de05c43a54..569c21a9fa 100644
--- a/eform-client/src/app/modules/security/components/security-group-settings/security-group-settings.component.html
+++ b/eform-client/src/app/modules/security/components/security-group-settings/security-group-settings.component.html
@@ -12,16 +12,15 @@ <h3 mat-dialog-title>{{'Permission group settings' | translate}}</h3>
     />
   </mat-form-field>
 </div>
-<div mat-dialog-actions class="d-flex flex-row justify-content-end">
+<div mat-dialog-actions class="d-flex flex-row justify-content-end align-items-center gap-12">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     (click)="updateGroupSettings()"
   >
     {{ 'Update' | translate}}
   </button>
   <button
-    mat-raised-button
+    class="btn-cancel"
     (click)="hide()"
   >
     {{ 'Cancel' | translate}}
diff --git a/eform-client/src/app/modules/security/components/security-group-update/security-group-update.component.html b/eform-client/src/app/modules/security/components/security-group-update/security-group-update.component.html
index efecc1b546..fa0dd65f6f 100644
--- a/eform-client/src/app/modules/security/components/security-group-update/security-group-update.component.html
+++ b/eform-client/src/app/modules/security/components/security-group-update/security-group-update.component.html
@@ -1,7 +1,6 @@
 <eform-new-subheader [title]="'Update security group' | translate" [forceStaticTitle]="true">
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     [disabled]="!securityGroupModel.groupName"
     (click)="updateSecurityGroup()"
     matTooltip="{{ 'Update Group' | translate }}"
@@ -40,12 +39,12 @@
     </div>
     <div class="d-flex flex-column">
       <button
-        mat-raised-button
-        color="accent"
+       class="btn-primary btn-primary--icon-left"
         (click)="addUserToGroup(usersSelector)"
         matTooltip="{{ 'Add user to group' | translate }}"
       >
-        + {{ 'Bind to Group' | translate }}
+        <mat-icon>add</mat-icon>
+        <span>{{ 'Bind to Group' | translate }}</span>
       </button>
     </div>
   </div>
diff --git a/eform-client/src/app/modules/security/components/security-page/security-page.component.html b/eform-client/src/app/modules/security/components/security-page/security-page.component.html
index a2b564c6a7..5a8ffbd486 100644
--- a/eform-client/src/app/modules/security/components/security-page/security-page.component.html
+++ b/eform-client/src/app/modules/security/components/security-page/security-page.component.html
@@ -1,7 +1,6 @@
 <eform-new-subheader>
   <button
-    mat-raised-button
-    color="accent"
+    class="btn-primary btn-primary--icon-left"
     [routerLink]="['create-group']"
     matTooltip="{{ 'Create Group' | translate }}"
     id="newSecurityGroupBtn"
diff --git a/eform-client/src/scss/libs/theme.scss b/eform-client/src/scss/libs/theme.scss
index bb410c10bb..b24bed2348 100644
--- a/eform-client/src/scss/libs/theme.scss
+++ b/eform-client/src/scss/libs/theme.scss
@@ -1,5 +1,4 @@
 /* You can add global styles to this file, and also import other style files 2 */
-
 @use '@angular/material' as mat;
 @use '@ng-matero/extensions' as mtx;
 @use './ngx-editor/ngx-editor' as ngx-editor;
@@ -10,9 +9,8 @@
 @use '../libs/ngx-toastr/ngx-toastr' as ngx-toastr;
 //@use '../libs/ng-datepicker/ng-datepicker' as ng-datepicker;
 @use '../components/tag' as tag;
+@use '../utilities/colors' as *;
 @include mat.core();
-
-
 $letter-spacing: normal;
 $eform-font-family: Nunito Sans, Roboto, "Helvetica Neue", sans-serif;
 // Define a typography
@@ -81,10 +79,10 @@ $eform-typography: mat.m2-define-typography-config(
     $line-height: 1.15,
     $letter-spacing: $letter-spacing,
   ));
-
 // Define a light theme
-$eform-light-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
-$eform-light-accent: mat.m2-define-palette(mat.$m2-pink-palette);
+//$eform-light-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$eform-light-primary: mat.m2-define-palette(mat.$m2-teal-palette);
+$eform-light-accent: mat.m2-define-palette(mat.$m2-teal-palette);
 $eform-light-theme: mat.m2-define-light-theme((
   color: (
     primary: $eform-light-primary,
@@ -92,10 +90,10 @@ $eform-light-theme: mat.m2-define-light-theme((
   ),
   typography: $eform-typography,
 ));
-
 // Define a dark theme
-$eform-dark-primary: mat.m2-define-palette(mat.$m2-blue-grey-palette);
-$eform-dark-accent: mat.m2-define-palette(mat.$m2-pink-palette);
+//$eform-dark-primary: mat.m2-define-palette(mat.$m2-blue-grey-palette);
+$eform-dark-primary: mat.m2-define-palette(mat.$m2-teal-palette);
+$eform-dark-accent: mat.m2-define-palette(mat.$m2-teal-palette);
 $eform-dark-theme: mat.m2-define-dark-theme((
   color: (
     primary: $eform-dark-primary,
@@ -103,7 +101,6 @@ $eform-dark-theme: mat.m2-define-dark-theme((
   ),
   typography: $eform-typography,
 ));
-
 body {
   @each $key, $val in (('light', $eform-light-theme), ('dark', $eform-dark-theme)) {
     &.theme-#{$key} {
@@ -120,26 +117,21 @@ body {
       //@include mtx.all-experimental-component-themes($val);
     }
   }
-
   &.mat-typography {
     margin: 0 0 0 0;
   }
-
   #main-header-text {
     font-weight: 400;
   }
 }
-
 .mdc-evolution-chip__action {
   padding-top: 3px !important;
   padding-bottom: 0px !important;
 }
-
 .mdc-evolution-chip__text-label > span {
   position: relative;
   top: -1px;
 }
-
 .mat-mdc-icon-button {
   padding: 0 !important;
   width: 28px !important;
@@ -151,14 +143,12 @@ body {
   height: var(--mdc-icon-button-state-layer-size) !important;
   padding: 8px !important;
 }
-
 .mat-calendar-next-button.mdc-icon-button.mat-mdc-icon-button.mat-unthemed.mat-mdc-button-base {
   --mdc-icon-button-state-layer-size: 40px !important;
   width: var(--mdc-icon-button-state-layer-size) !important;
   height: var(--mdc-icon-button-state-layer-size) !important;
   padding: 8px !important;
 }
-
 //  padding: 0px;// !important;
 //  height: 28px;// !important;
 //  width: 28px;// !important;
@@ -170,22 +160,17 @@ body {
 //  height: var(--mdc-icon-button-state-layer-size);
 //  padding: 8px !important;
 //}
-
-
 .microting-uid {
   color: mat.m2-get-color-from-palette(mat.$m2-indigo-palette, 300);
 }
-
 .mat-sort-header-content {
   text-align: start !important;
 }
-
 .theme-dark {
   .mdc-text-field--filled:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-floating-label {
     color: white; // Replace with your desired color value
   }
 }
-
 .cdk-overlay-container {
   @include mat.dialog-overrides((
     container-shape: 20px,
@@ -193,7 +178,6 @@ body {
     actions-padding: 20px,
   ));
 }
-
 /* Global button shape overrides */
 button.mat-mdc-raised-button,
 a.mat-mdc-raised-button,
@@ -205,13 +189,11 @@ button.mat-mdc-text-button,
 a.mat-mdc-text-button {
   border-radius: 20px;
 }
-
 /* Icon buttons */
 button.mat-mdc-icon-button,
 a.mat-mdc-icon-button {
   border-radius: 20px;
 }
-
 /* Optional: FABs */
 button.mat-mdc-fab,
 a.mat-mdc-fab,
@@ -219,3 +201,15 @@ button.mat-mdc-mini-fab,
 a.mat-mdc-mini-fab {
   border-radius: 20px;
 }
+body, .theme-light {
+  --mdc-theme-primary: #{$primary};
+  --mdc-theme-on-primary: #{$on-primary};
+  --mdc-theme-primary-dark: #{$primary-dark-light-mode};
+  --mdc-theme-on-primary-dark: #{$on-primary-dark};
+}
+body, .theme-dark {
+  --mdc-theme-primary: #{$primary-dark};
+  --mdc-theme-on-primary: #{$on-primary-dark};
+  --mdc-theme-primary-dark: #{$primary-dark-dark-mode};
+  --mdc-theme-on-primary-dark: #{$on-primary-dark};
+}
diff --git a/eform-client/src/scss/styles.scss b/eform-client/src/scss/styles.scss
index 9585d887c9..97db07e80a 100644
--- a/eform-client/src/scss/styles.scss
+++ b/eform-client/src/scss/styles.scss
@@ -44,6 +44,11 @@ h2 {
     background-color: white;
   }
 }
+:root {
+  --rounded-full: #{$border-rounded-full};
+  --font-family: #{$eform-font-family};
+}
+
 
 body, .theme-light {
   --black-800: #242729;
@@ -54,6 +59,13 @@ body, .theme-light {
   --tp-border: #EBEFF2;
   --tp-text: #111827;
   --tp-white-text: black;
+  --border: #{$border-light};
+  --icon-secondary: #{$icon-secondary-light};
+  --bg:  #{$bg-light};
+  --text-header: #{$text-header-light};
+  //--mat-card-elevated-container-color: #{$bg-light}!important;
+  --primary: #{$primary-light};
+  --warning: #{$warning-light};
 }
 
 body, .theme-dark {
@@ -62,6 +74,13 @@ body, .theme-dark {
   --tp-border: #2B2B2B;
   --tp-text: #E6E6E6;
   --tp-white-text: white;
+  --border: #{$border-dark};
+  --icon-secondary: #{$icon-secondary-dark};
+  --bg: #{$bg-dark};
+  --text-header: #{$text-header-dark};
+  //--mat-card-elevated-container-color: #{$bg-dark}!important;
+  --primary: #{$primary-dark};
+  --warning: #{$warning-dark};
 }
 
 a {
@@ -362,3 +381,132 @@ ngx-material-timepicker-container {
 .cdk-overlay-backdrop {
   background-color: rgba(0, 0, 0, 1) !important;
 }
+
+
+// New styling
+
+.gap-12{
+  gap: 12px;
+}
+
+.line-vert{
+  width: 1px;
+  height: 20px;
+  background: var(--border);
+}
+
+.btn-primary {
+  border-radius: var(--rounded-full);
+  background-color: var(--mdc-theme-primary) !important;
+  color: var(--mdc-theme-on-primary) !important;
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--mdc-theme-primary-dark, #00695C) !important;
+  }
+
+  &:disabled,
+  &[disabled] {
+    background-color: var(--border) !important;
+    color: var(--tp-text) !important;
+    opacity: 0.5;
+    cursor: not-allowed !important;
+    pointer-events: none;
+  }
+
+
+  &--icon-left{
+    display: inline-flex;
+    height: 48px;
+    padding: var(--312-px, 12px) var(--520-px, 20px);
+    justify-content: center;
+    align-items: center;
+    gap: var(--156-px, 6px);
+    flex-shrink: 0;
+    box-shadow: none!important;
+    border: none!important;
+
+    .mat-icon {
+      display: flex;
+      width: 20px;
+      height: 20px;
+      padding: 3.332px 3.333px 3.335px 3.333px;
+      justify-content: center;
+      align-items: center;
+    }
+    span {
+      font-family: var(--font-family);
+      font-size: var(--Text-size-sm, 14px);
+      font-style: normal;
+      //font-weight: 600;
+      line-height: var(--Text-line-height-sm, 22px);
+    }
+  }
+
+
+}
+
+.btn-secondary{
+  border-radius: var(--rounded-full);
+  background: unset;
+  cursor: pointer;
+  color: var(--text-header)!important;
+
+  &--icon-rounded-border{
+    display: flex;
+    padding: var(--3514-px, 14px);
+    justify-content: center;
+    align-items: center;
+    gap: var(--28-px, 8px);
+    border: 1px solid var(--border);
+  }
+
+}
+
+.icon-secondary {
+  color: var(--icon-secondary) !important;
+}
+
+.btn-cancel{
+  display: flex;
+  height: 48px;
+  padding: var(--312-px, 12px) var(--832-px, 32px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--156-px, 6px);
+  border-radius: var(--rounded-full);
+  border: 1px solid var(--border);
+  //background: var(--bg);
+  background: unset;
+  color: var(--text-header);
+  cursor: pointer;
+
+  /* Text/sm/Medium */
+  font-family: var(--font-family);
+  font-size: var(--Text-size-sm, 14px);
+  font-style: normal;
+  //font-weight: 600;
+  line-height: var(--Text-line-height-sm, 22px); /* 157.143% */
+}
+
+
+.btn-warning{
+  display: flex;
+  height: 48px;
+  padding: var(--312-px, 12px) var(--832-px, 32px);
+  justify-content: center;
+  align-items: center;
+  gap: var(--156-px, 6px);
+  border-radius: var(--rounded-full);
+  background: var(--warning);
+  color: var(--text-header);
+  cursor: pointer;
+  border: unset;
+
+  /* Text/sm/Medium */
+  font-family: var(--font-family);
+  font-size: var(--Text-size-sm, 14px);
+  font-style: normal;
+  //font-weight: 600;
+  line-height: var(--Text-line-height-sm, 22px); /* 157.143% */
+}
diff --git a/eform-client/src/scss/utilities/_colors.scss b/eform-client/src/scss/utilities/_colors.scss
index 6949550b0a..47be3df119 100644
--- a/eform-client/src/scss/utilities/_colors.scss
+++ b/eform-client/src/scss/utilities/_colors.scss
@@ -1,9 +1,46 @@
+// Gray shades
 $eform-gray-light: #F1F1F1;
 $eform-gray: #263238;
 $eform-gray-dark: #000a12;
-$eform-red-dark: #7f0000;
+
+// Red shades
 $eform-red-light: #f05545;
 $eform-red: #b71c1c;
+$eform-red-dark: #7f0000;
+
+// Orange
 $eform-orange: #d9921e;
+
+// Green shades
 $eform-green: #61BA5B;
 $eform-green-dark: #4B9F45;
+$eform-teal: #289694;
+$eform-teal-dark: #00716F;
+
+// Light theme
+$primary: #289694;
+$primary-light: #289694;
+$warning-light: #E2A01C;
+$primary-light-light-mode: #F5FCFC;
+$primary-dark-light-mode: #00716F;
+$on-primary: #FFFFFF;
+
+// Dark theme
+$primary-dark: #4FCAC8;
+$primary-light-dark-mode: #0D4746;
+$primary-dark-dark-mode: #00ADAB;
+$on-primary-dark: #0F1316;
+$warning-dark: #F4C25E;
+
+
+$border-light: #EBEFF2;
+$border-dark: #37383A;
+
+$icon-secondary-light: #0F1316;
+$icon-secondary-dark: #FFFFFF;
+
+$bg-light: #FFFFFF;
+$bg-dark: #202122;
+
+$text-header-light: #0F1316;
+$text-header-dark: #F3F5F7;
diff --git a/eform-client/src/scss/utilities/_variables.scss b/eform-client/src/scss/utilities/_variables.scss
index d10cc6195d..bcb5a80e80 100644
--- a/eform-client/src/scss/utilities/_variables.scss
+++ b/eform-client/src/scss/utilities/_variables.scss
@@ -25,3 +25,6 @@ $cursors: (pointer, text, move, copy, 'no-drop', default);
 $positions: static, relative, absolute, fixed, sticky !default;
 $displays: none, inline, inline-block, block, table, table-row, table-cell, grid, flex, inline-flex !default;
 $icon-size: 18px;
+
+
+$border-rounded-full: 9999px;