diff --git a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.spec.ts b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.spec.ts
index 3eef0e481a..ebd6d9c851 100644
--- a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.spec.ts
+++ b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-create/shared-tag-create.component.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { TranslateService } from '@ngx-translate/core';
 import { of } from 'rxjs';
@@ -17,12 +17,22 @@ describe('EmailRecipientTagNewComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockDialogRef = {
       close: vi.fn(),
     };
diff --git a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-delete/shared-tag-delete.component.spec.ts b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-delete/shared-tag-delete.component.spec.ts
index 20393303a4..4876cfa088 100644
--- a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-delete/shared-tag-delete.component.spec.ts
+++ b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-delete/shared-tag-delete.component.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { TranslateService } from '@ngx-translate/core';
 import { of } from 'rxjs';
@@ -17,12 +17,22 @@ describe('EmailRecipientTagDeleteComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockDialogRef = {
       close: vi.fn()
     };
diff --git a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-edit/shared-tag-edit.component.spec.ts b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-edit/shared-tag-edit.component.spec.ts
index 1727ffc9c2..f4678eaa81 100644
--- a/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-edit/shared-tag-edit.component.spec.ts
+++ b/eform-client/src/app/common/modules/eform-shared-tags/components/shared-tag-edit/shared-tag-edit.component.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { TranslateService } from '@ngx-translate/core';
 import { of } from 'rxjs';
@@ -17,12 +17,22 @@ describe('EmailRecipientTagEditComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockDialogRef = {
       close: vi.fn(),
     };
diff --git a/eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.ts b/eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.ts
index a706f7a39f..c4e5599b7a 100644
--- a/eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.ts
+++ b/eform-client/src/app/common/modules/eform-shared/components/entity-edit-create/entity-edit-create.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, inject } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, inject, ChangeDetectorRef } from '@angular/core';
 import {
   EntityGroupEditModel,
   EntityItemModel,
@@ -37,6 +37,7 @@ export class EntityEditCreateComponent implements OnInit, OnDestroy{
   private location = inject(Location);
   dialog = inject(MatDialog);
   private overlay = inject(Overlay);
+  private cdr = inject(ChangeDetectorRef);
 
   entityGroupEditModel: EntityGroupEditModel = new EntityGroupEditModel();
   @ViewChild('frame', { static: true }) frame;
@@ -91,6 +92,8 @@ export class EntityEditCreateComponent implements OnInit, OnDestroy{
               description: data.model.description,
             }
             this.actualizeEntityItemPositions();
+            // Trigger change detection after async update
+            this.cdr.detectChanges();
           }
         });
     } else if (this.header === 'selectable'){
@@ -108,6 +111,8 @@ export class EntityEditCreateComponent implements OnInit, OnDestroy{
               description: data.model.description,
             }
             this.actualizeEntityItemPositions();
+            // Trigger change detection after async update
+            this.cdr.detectChanges();
           }
         });
     }
diff --git a/eform-client/src/app/components/footer/footer.component.ts b/eform-client/src/app/components/footer/footer.component.ts
index e8f1732e35..c17bc4ec05 100644
--- a/eform-client/src/app/components/footer/footer.component.ts
+++ b/eform-client/src/app/components/footer/footer.component.ts
@@ -1,4 +1,4 @@
-import { Component, inject, OnInit, DestroyRef } from '@angular/core';
+import { Component, inject, OnInit, DestroyRef, ChangeDetectorRef } from '@angular/core';
 import { Store } from '@ngrx/store';
 import {
   selectCurrentUserFullName,
@@ -36,6 +36,7 @@ export class FooterComponent implements OnInit {
   private authStore = inject(Store);
   private destroyRef = inject(DestroyRef);
   private selectCurrentUserClaims$ = this.authStore.select(selectCurrentUserClaims);
+  private cdr = inject(ChangeDetectorRef);
 
   fullName = '';
   userName = '';
@@ -46,15 +47,27 @@ export class FooterComponent implements OnInit {
   ngOnInit() {
     this.store.select(selectCurrentUserFullName)
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(name => this.fullName = name);
+      .subscribe(name => {
+        this.fullName = name;
+        // Trigger change detection after async update
+        this.cdr.detectChanges();
+      });
 
     this.store.select(selectCurrentUserName)
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(user => this.userName = user);
+      .subscribe(user => {
+        this.userName = user;
+        // Trigger change detection after async update
+        this.cdr.detectChanges();
+      });
 
     this.store.select(selectCurrentUserAvatarUrl)
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(url => this.avatarUrl = url);
+      .subscribe(url => {
+        this.avatarUrl = url;
+        // Trigger change detection after async update
+        this.cdr.detectChanges();
+      });
   }
 
   checkGuards(guards: string[]): Observable<boolean> {
diff --git a/eform-client/src/app/components/header/header.component.ts b/eform-client/src/app/components/header/header.component.ts
index e893c0a962..2834d28715 100644
--- a/eform-client/src/app/components/header/header.component.ts
+++ b/eform-client/src/app/components/header/header.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, inject } from '@angular/core';
+import { Component, OnInit, inject, ChangeDetectorRef } from '@angular/core';
 import {Router} from '@angular/router';
 import {EventBrokerService} from 'src/app/common/helpers';
 import {HeaderSettingsModel} from 'src/app/common/models/settings';
@@ -16,6 +16,7 @@ export class HeaderComponent implements OnInit {
   private eventBrokerService = inject(EventBrokerService);
   private settingsService = inject(AppSettingsService);
   private router = inject(Router);
+  private cdr = inject(ChangeDetectorRef);
 
   headerSettingsModel: HeaderSettingsModel = new HeaderSettingsModel;
   logoImage: any;
@@ -46,6 +47,8 @@ export class HeaderComponent implements OnInit {
             } else if (!this.headerSettingsModel.imageLink) {
               this.logoImage = '../../../assets/images/logo.png';
             }
+            // Trigger change detection after async update
+            this.cdr.detectChanges();
           }
         }));
       } else {
diff --git a/eform-client/src/app/components/layouts/full-layout/full-layout.component.ts b/eform-client/src/app/components/layouts/full-layout/full-layout.component.ts
index ce782c2c14..7a8a8254ec 100644
--- a/eform-client/src/app/components/layouts/full-layout/full-layout.component.ts
+++ b/eform-client/src/app/components/layouts/full-layout/full-layout.component.ts
@@ -1,4 +1,4 @@
-import { AfterViewInit, Component, HostListener, OnDestroy, OnInit, Renderer2, ViewChild, inject } from '@angular/core';
+import { AfterViewInit, Component, HostListener, OnDestroy, OnInit, Renderer2, ViewChild, inject, ChangeDetectorRef } from '@angular/core';
 import {AuthStateService} from 'src/app/common/store';
 import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
 import {Observable, of, Subscription, take, tap} from 'rxjs';
@@ -46,6 +46,7 @@ export class FullLayoutComponent implements OnInit, OnDestroy, AfterViewInit {
   private eventBrokerService = inject(EventBrokerService);
   private settingsService = inject(AppSettingsService);
   private loaderService = inject(LoaderService);
+  private cdr = inject(ChangeDetectorRef);
 
   @ViewChild('drawer') drawer: MatDrawer;
   isDarkThemeAsync$: Subscription;
@@ -136,6 +137,8 @@ export class FullLayoutComponent implements OnInit, OnDestroy, AfterViewInit {
         } else if (!this.headerSettingsModel.imageLink) {
           this.logoImage = '../../../assets/images/logo.png';
         }
+        // Trigger change detection after async update
+        this.cdr.detectChanges();
       }
     }));
   }
diff --git a/eform-client/src/app/components/navigation/navigation.component.ts b/eform-client/src/app/components/navigation/navigation.component.ts
index 548eb0c313..2fe612ab37 100644
--- a/eform-client/src/app/components/navigation/navigation.component.ts
+++ b/eform-client/src/app/components/navigation/navigation.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, inject } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output, inject, ChangeDetectorRef } from '@angular/core';
 import {AutoUnsubscribe} from 'ngx-auto-unsubscribe';
 import {Observable, Subscription} from 'rxjs';
 import { MatTreeNestedDataSource, MatTree, MatTreeNodeDef, MatTreeNode, MatTreeNodePadding, MatNestedTreeNode, MatTreeNodeToggle, MatTreeNodeOutlet } from '@angular/material/tree';
@@ -34,6 +34,7 @@ interface MenuNode {
 export class NavigationComponent implements OnInit, OnDestroy {
   router = inject(Router);
   private authStore = inject(Store);
+  private cdr = inject(ChangeDetectorRef);
 
   @Output() clickOnLink: EventEmitter<void> = new EventEmitter<void>();
 
@@ -58,6 +59,8 @@ export class NavigationComponent implements OnInit, OnDestroy {
         if (x.length > 0) {
           this.menu.data = [...x];
           this.restoreOpenedMenu();
+          // Trigger change detection after async update
+          this.cdr.detectChanges();
         }
       });
     });
diff --git a/eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.ts b/eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.ts
index 7348b77035..8fa9d3fcf9 100644
--- a/eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.ts
+++ b/eform-client/src/app/modules/advanced/components/entity-search/entity-search/entity-search.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject, ChangeDetectorRef } from '@angular/core';
 import {
   EntityGroupModel,
   Paged,
@@ -48,6 +48,7 @@ export class EntitySearchComponent implements OnInit, OnDestroy {
   private dialog = inject(MatDialog);
   private overlay = inject(Overlay);
   private translateService = inject(TranslateService);
+  private cdr = inject(ChangeDetectorRef);
 
   advEntitySearchableGroupListModel: Paged<EntityGroupModel> = new Paged<EntityGroupModel>();
   entitySearchRemoveComponentAfterClosedSub$: Subscription;
@@ -84,6 +85,8 @@ export class EntitySearchComponent implements OnInit, OnDestroy {
         if (data && data.model) {
           this.advEntitySearchableGroupListModel = data.model;
           this.store.dispatch(updateEntitySearchTotal({total: data.model.total}));
+          // Trigger change detection after async update
+          this.cdr.detectChanges();
         }
       });
   }
diff --git a/eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.ts b/eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.ts
index 37c03503d5..fb94b5898c 100644
--- a/eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.ts
+++ b/eform-client/src/app/modules/advanced/components/entity-select/entity-select/entity-select.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit, inject, ChangeDetectorRef } from '@angular/core';
 import {
   Paged,
   EntityGroupModel,
@@ -50,6 +50,7 @@ export class EntitySelectComponent implements OnInit, OnDestroy {
   private dialog = inject(MatDialog);
   private overlay = inject(Overlay);
   private translateService = inject(TranslateService);
+  private cdr = inject(ChangeDetectorRef);
 
   advEntitySelectableGroupListModel: Paged<EntityGroupModel> = new Paged<EntityGroupModel>();
   entitySelectRemoveComponentAfterClosedSub$: Subscription;
@@ -87,6 +88,8 @@ export class EntitySelectComponent implements OnInit, OnDestroy {
         if (data && data.model) {
           this.advEntitySelectableGroupListModel = data.model;
           this.store.dispatch(updateEntitySelectTotal({total: data.model.total}));
+          // Trigger change detection after async update
+          this.cdr.detectChanges();
         }
       });
   }
diff --git a/eform-client/src/app/modules/advanced/components/folders/folder-delete/folder-delete.component.spec.ts b/eform-client/src/app/modules/advanced/components/folders/folder-delete/folder-delete.component.spec.ts
index 19229508db..7a3ab14c03 100644
--- a/eform-client/src/app/modules/advanced/components/folders/folder-delete/folder-delete.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/components/folders/folder-delete/folder-delete.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { FolderDeleteComponent } from './folder-delete.component';
 import { FoldersService } from 'src/app/common/services';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -21,12 +21,22 @@ describe('FolderDeleteComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     mockFoldersService = {
           deleteSingleFolder: vi.fn(),
         };
diff --git a/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.spec.ts b/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.spec.ts
index 5da90e4a9f..415c0527d8 100644
--- a/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA, ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { FoldersComponent } from './folders.component';
 import { FoldersService } from 'src/app/common/services';
 import { MatDialog } from '@angular/material/dialog';
@@ -23,16 +23,33 @@ describe('FoldersComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockAppMenuStateService = {
       updateState: vi.fn(),
       loadMobileMenuItems: vi.fn()
     };
+    const mockChangeDetectorRef = {
+      markForCheck: vi.fn(),
+      detectChanges: vi.fn(),
+      checkNoChanges: vi.fn(),
+      detach: vi.fn(),
+      reattach: vi.fn()
+    };
     mockFoldersService = {
           getAllFolders: vi.fn(),
           getAllFoldersList: vi.fn(),
@@ -54,6 +71,7 @@ describe('FoldersComponent', () => {
         { provide: Store, useValue: mockStore },
         { provide: TranslateService, useValue: mockTranslateService },
         { provide: AppMenuStateService, useValue: mockAppMenuStateService },
+        { provide: ChangeDetectorRef, useValue: mockChangeDetectorRef },
         { provide: Overlay, useValue: { scrollStrategies: { reposition: () => ({}) } } }
     ],
     schemas: [NO_ERRORS_SCHEMA]
diff --git a/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.ts b/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.ts
index 8852461423..8182f2dcdd 100644
--- a/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.ts
+++ b/eform-client/src/app/modules/advanced/components/folders/folders/folders.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, OnInit, ViewChild, inject, ChangeDetectorRef } from '@angular/core';
 import { Router } from '@angular/router';
 import { FoldersService } from 'src/app/common/services';
 import {FolderDto, LanguagesModel} from 'src/app/common/models';
@@ -27,6 +27,7 @@ export class FoldersComponent implements OnInit {
   private foldersService = inject(FoldersService);
   private dialog = inject(MatDialog);
   private overlay = inject(Overlay);
+  private cdr = inject(ChangeDetectorRef);
 
   foldersFlatList: Array<FolderDto> = [];
   foldersDto: Array<FolderDto> = [];
@@ -64,6 +65,8 @@ export class FoldersComponent implements OnInit {
     this.foldersService.getAllFolders().subscribe((operation) => {
       if (operation && operation.success) {
         this.foldersDto = operation.model;
+        // Trigger change detection after async update
+        this.cdr.detectChanges();
       }
     });
   }
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 3831a066c1..cbba6f6f1c 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
@@ -13,14 +13,14 @@ <h3 mat-dialog-title>{{ 'Edit' | translate}}</h3>
       <mat-label>{{ 'Current tags' | translate }}</mat-label>
       <mtx-select
         class="custom"
+        [appendTo]="'.cdk-overlay-pane'"
         [dropdownPosition]="'bottom'"
         [(ngModel)]="site.tags"
         [bindValue]="'id'"
         [bindLabel]="'name'"
         [items]="availableTags"
         id="tagSelector"
-        [multiple]="true"
-        appendTo="body">
+        [multiple]="true">
       </mtx-select>
     </mat-form-field>
   </div>
diff --git a/eform-client/src/app/modules/advanced/components/units/unit-create/unit-create.component.spec.ts b/eform-client/src/app/modules/advanced/components/units/unit-create/unit-create.component.spec.ts
index 559348b5d4..134895ca30 100644
--- a/eform-client/src/app/modules/advanced/components/units/unit-create/unit-create.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/components/units/unit-create/unit-create.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { UnitCreateComponent } from './unit-create.component';
 import { UnitsService } from 'src/app/common/services';
 import { DeviceUserService } from 'src/app/common/services/device-users';
@@ -22,12 +22,22 @@ describe('UnitCreateComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     mockUnitsService = {
           createUnit: vi.fn(),
         };
diff --git a/eform-client/src/app/modules/advanced/components/units/units-otp-code/units-otp-code.component.spec.ts b/eform-client/src/app/modules/advanced/components/units/units-otp-code/units-otp-code.component.spec.ts
index 7b509d1917..b3f61c2fd9 100644
--- a/eform-client/src/app/modules/advanced/components/units/units-otp-code/units-otp-code.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/components/units/units-otp-code/units-otp-code.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { UnitsOtpCodeComponent } from './units-otp-code.component';
 import { UnitsService } from 'src/app/common/services/advanced';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -21,12 +21,22 @@ describe('UnitsOtpCodeComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     mockUnitsService = {
           requestOtp: vi.fn(),
         };
diff --git a/eform-client/src/app/modules/advanced/components/units/units.component.spec.ts b/eform-client/src/app/modules/advanced/components/units/units.component.spec.ts
index 9a6525b9ae..e630d67c7d 100644
--- a/eform-client/src/app/modules/advanced/components/units/units.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/components/units/units.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { UnitsComponent } from './units.component';
 import { UnitsService } from 'src/app/common/services';
 import { MatDialog } from '@angular/material/dialog';
@@ -23,12 +23,22 @@ describe('UnitsComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     mockUnitsService = {
           getAllUnits: vi.fn(),
         };
diff --git a/eform-client/src/app/modules/advanced/components/workers/worker-delete/worker-delete.component.spec.ts b/eform-client/src/app/modules/advanced/components/workers/worker-delete/worker-delete.component.spec.ts
index d93547c41b..9f33cc4deb 100644
--- a/eform-client/src/app/modules/advanced/components/workers/worker-delete/worker-delete.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/components/workers/worker-delete/worker-delete.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { WorkerDeleteComponent } from './worker-delete.component';
 import { WorkersService } from 'src/app/common/services';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@@ -21,12 +21,22 @@ describe.skip('WorkerDeleteComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     mockWorkersService = {
           deleteSingleWorker: vi.fn(),
         };
diff --git a/eform-client/src/app/modules/advanced/components/workers/workers/workers.component.spec.ts b/eform-client/src/app/modules/advanced/components/workers/workers/workers.component.spec.ts
index b7140dd528..b5f5fe5719 100644
--- a/eform-client/src/app/modules/advanced/components/workers/workers/workers.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/components/workers/workers/workers.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { WorkersComponent } from './workers.component';
 import { WorkersService } from 'src/app/common/services';
 import { MatDialog } from '@angular/material/dialog';
@@ -24,12 +24,22 @@ describe('WorkersComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockAppMenuStateService = {
       updateState: vi.fn(),
       loadMobileMenuItems: vi.fn()
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 88e58c5dd9..33629ef765 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
@@ -3,7 +3,8 @@ <h3 mat-dialog-title>{{'New dropdown' | translate}}</h3>
   <mat-form-field>
     <mat-label>{{'Security groups' | translate}}</mat-label>
     <mtx-select
-      dropdownPosition="bottom"
+      [appendTo]="'.cdk-overlay-pane'"
+      [dropdownPosition]="'bottom'"
       [(ngModel)]="customDropdownModel.securityGroupsIds"
       [bindValue]="'id'"
       [bindLabel]="'name'"
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-dropdown/navigation-menu-custom-dropdown.component.spec.ts b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-dropdown/navigation-menu-custom-dropdown.component.spec.ts
index bcd80516fc..a7213e59c0 100644
--- a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-dropdown/navigation-menu-custom-dropdown.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-dropdown/navigation-menu-custom-dropdown.component.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { TranslateService } from '@ngx-translate/core';
 import { of } from 'rxjs';
@@ -17,12 +17,22 @@ describe('NavigationMenuCustomDropdownComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockDialogRef = {
       close: vi.fn(),
     };
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 85c5630efd..cc3ae29df7 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
@@ -4,7 +4,8 @@ <h3 mat-dialog-title>{{ 'New custom link' | translate }}</h3>
     <mat-form-field>
       <mat-label>{{ 'Security groups' | translate }}</mat-label>
       <mtx-select
-        dropdownPosition="bottom"
+        [appendTo]="'.cdk-overlay-pane'"
+        [dropdownPosition]="'bottom'"
         [(ngModel)]="customLinkModel.securityGroupsIds"
         [bindValue]="'id'"
         [bindLabel]="'name'"
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-link/navigation-menu-custom-link.component.spec.ts b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-link/navigation-menu-custom-link.component.spec.ts
index 66e466208a..f736a62f2a 100644
--- a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-link/navigation-menu-custom-link.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom-link/navigation-menu-custom-link.component.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { TranslateService } from '@ngx-translate/core';
 import { of } from 'rxjs';
@@ -17,12 +17,22 @@ describe('NavigationMenuCustomLinkComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockDialogRef = {
       close: vi.fn(),
     };
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom/navigation-menu-custom.component.spec.ts b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom/navigation-menu-custom.component.spec.ts
index bde8d32cd7..d0b54b8623 100644
--- a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom/navigation-menu-custom.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-custom/navigation-menu-custom/navigation-menu-custom.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { NavigationMenuCustomComponent } from './navigation-menu-custom.component';
 import { TranslateService } from '@ngx-translate/core';
@@ -15,12 +15,22 @@ describe('NavigationMenuCustomComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
 
     TestBed.configureTestingModule({
     imports: [FormsModule, NavigationMenuCustomComponent],
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-delete/navigation-menu-item-delete.component.spec.ts b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-delete/navigation-menu-item-delete.component.spec.ts
index 279bf323a8..2296cbde2c 100644
--- a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-delete/navigation-menu-item-delete.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-delete/navigation-menu-item-delete.component.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { TranslateService } from '@ngx-translate/core';
 import { of } from 'rxjs';
@@ -17,12 +17,22 @@ describe('NavigationMenuItemDeleteComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockDialogRef = {
       close: vi.fn(),
     };
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 a54cfbc2c2..8295b49773 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
@@ -4,13 +4,14 @@ <h3 mat-dialog-title>{{'Edit menu entry' | translate}}</h3>
     <mat-form-field>
       <mat-label>{{'Security groups' | translate}}</mat-label>
       <mtx-select
-        dropdownPosition="bottom"
+        [appendTo]="'.cdk-overlay-pane'"
+        [dropdownPosition]="'bottom'"
         [(ngModel)]="item.securityGroupsIds"
         [bindValue]="'id'"
         [bindLabel]="'name'"
         [items]="availableSecurityGroups"
         id="editSecurityGroupsSelector"
-        [multiple]="true"      >
+        [multiple]="true">
       </mtx-select>
     </mat-form-field>
     <mat-form-field>
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.spec.ts b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.spec.ts
index af1c325522..0659485cf6 100644
--- a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/menu-item/navigation-menu-item-edit/navigation-menu-item-edit.component.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { TranslateService } from '@ngx-translate/core';
 import { of } from 'rxjs';
@@ -17,12 +17,22 @@ describe.skip('NavigationMenuItemEditComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockDialogRef = {
       close: vi.fn(),
     };
diff --git a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-reset/navigation-menu-reset.component.spec.ts b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-reset/navigation-menu-reset.component.spec.ts
index 27f4869c0c..fd889341e9 100644
--- a/eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-reset/navigation-menu-reset.component.spec.ts
+++ b/eform-client/src/app/modules/advanced/modules/navigation-menu/components/navigation-menu-reset/navigation-menu-reset.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MatDialogRef } from '@angular/material/dialog';
 import { NavigationMenuResetComponent } from './navigation-menu-reset.component';
 import { MockTranslatePipe } from 'src/test-helpers';
@@ -17,12 +17,22 @@ describe('NavigationMenuResetComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     mockDialogRef = {
           close: vi.fn(),
         };
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 4cad68a28d..aac52923de 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
@@ -6,6 +6,7 @@ <h3 mat-dialog-title>{{ 'Create eForm' | translate }}</h3>
       <mat-label>{{ 'Tags' | translate }}</mat-label>
       <mtx-select
         class="custom"
+        [appendTo]="'.cdk-overlay-pane'"
         [dropdownPosition]="'bottom'"
         [(ngModel)]="eFormCreateModel.tagIds"
         [bindValue]="'id'"
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 864d87c883..c3d74aca74 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
@@ -4,6 +4,7 @@ <h3 mat-dialog-title>{{ 'Select tags for template' | translate }}</h3>
     <mat-label>{{ 'Current tags' | translate }}</mat-label>
     <mtx-select
       class="custom"
+      [appendTo]="'.cdk-overlay-pane'"
       [dropdownPosition]="'bottom'"
       [(ngModel)]="selectedTemplateTagsIds"
       [bindValue]="'id'"
@@ -11,7 +12,6 @@ <h3 mat-dialog-title>{{ 'Select tags for template' | translate }}</h3>
       [items]="availableTags"
       id="tagSelector"
       [multiple]="true"
-      appendTo="body"
     ></mtx-select>
   </mat-form-field>
   <!--<div class="row">
diff --git a/eform-client/src/app/modules/eforms/components/eform-excel-report-modal/eform-excel-report-modal.component.spec.ts b/eform-client/src/app/modules/eforms/components/eform-excel-report-modal/eform-excel-report-modal.component.spec.ts
index e505480c9e..3a436f7f33 100644
--- a/eform-client/src/app/modules/eforms/components/eform-excel-report-modal/eform-excel-report-modal.component.spec.ts
+++ b/eform-client/src/app/modules/eforms/components/eform-excel-report-modal/eform-excel-report-modal.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { EformExcelReportModalComponent } from './eform-excel-report-modal.component';
 import { EFormService } from 'src/app/common/services/eform';
@@ -17,12 +17,22 @@ describe('EformExcelReportModalComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockEFormService = {
       downloadEformExcel: vi.fn().mockReturnValue(of(new Blob())),
     };
diff --git a/eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.ts b/eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.ts
index 6fecd997d4..a7bde032a5 100644
--- a/eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.ts
+++ b/eform-client/src/app/modules/eforms/components/eforms-page/eforms-page.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnDestroy, OnInit, ViewChild, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, inject, ChangeDetectorRef } from '@angular/core';
 import {Subject, Subscription} from 'rxjs';
 import {debounceTime} from 'rxjs/operators';
 import {UserClaimsEnum} from 'src/app/common/const';
@@ -78,6 +78,7 @@ export class EformsPageComponent implements OnInit, OnDestroy {
   dialog = inject(MatDialog);
   private overlay = inject(Overlay);
   private translateService = inject(TranslateService);
+  private cdr = inject(ChangeDetectorRef);
 
   @ViewChild('modalTags', {static: true}) modalTags: EformsTagsComponent;
 
@@ -163,6 +164,8 @@ export class EformsPageComponent implements OnInit, OnDestroy {
       .subscribe((operation) => {
         if (operation && operation.success) {
           this.templateListModel = operation.model;
+          // Mark for check instead of immediate detectChanges for Angular 21 compatibility
+          this.cdr.markForCheck();
         }
       });
   }
@@ -176,6 +179,8 @@ export class EformsPageComponent implements OnInit, OnDestroy {
           if (data && data.success) {
             this.availableTags = data.model;
             this.loadSelectedUserTags();
+            // Mark for check instead of immediate detectChanges for Angular 21 compatibility
+            this.cdr.markForCheck();
           }
         });
     // } else {
diff --git a/eform-client/src/app/modules/eforms/eform-docx-report/components/eform-docx-report-header-editor/eform-docx-report-header-editor.component.spec.ts b/eform-client/src/app/modules/eforms/eform-docx-report/components/eform-docx-report-header-editor/eform-docx-report-header-editor.component.spec.ts
index 0561858143..c300cbe834 100644
--- a/eform-client/src/app/modules/eforms/eform-docx-report/components/eform-docx-report-header-editor/eform-docx-report-header-editor.component.spec.ts
+++ b/eform-client/src/app/modules/eforms/eform-docx-report/components/eform-docx-report-header-editor/eform-docx-report-header-editor.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { EformDocxReportHeaderEditorComponent } from './eform-docx-report-header-editor.component';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@@ -16,12 +16,22 @@ describe('EformDocxReportHeaderEditorComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockDialogRef = {
       close: vi.fn(),
     };
diff --git a/eform-client/src/app/modules/eforms/eform-docx-report/components/eform-docx-report-header/eform-docx-report-header.component.spec.ts b/eform-client/src/app/modules/eforms/eform-docx-report/components/eform-docx-report-header/eform-docx-report-header.component.spec.ts
index a9b7bc6f05..8bae21a5a1 100644
--- a/eform-client/src/app/modules/eforms/eform-docx-report/components/eform-docx-report-header/eform-docx-report-header.component.spec.ts
+++ b/eform-client/src/app/modules/eforms/eform-docx-report/components/eform-docx-report-header/eform-docx-report-header.component.spec.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { MockTranslatePipe } from 'src/test-helpers';
 import { EformDocxReportHeaderComponent } from './eform-docx-report-header.component';
 import { TranslateService } from '@ngx-translate/core';
@@ -16,12 +16,22 @@ describe('EformDocxReportHeaderComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     
     TestBed.configureTestingModule({
     imports: [FormsModule, EformDocxReportHeaderComponent],
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-additional-fields/visual-editor-additional-field-entity-search/visual-editor-additional-field-entity-search.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-additional-fields/visual-editor-additional-field-entity-search/visual-editor-additional-field-entity-search.component.html
index 1ad5d27dfc..4d60cc3768 100644
--- a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-additional-fields/visual-editor-additional-field-entity-search/visual-editor-additional-field-entity-search.component.html
+++ b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-additional-fields/visual-editor-additional-field-entity-search/visual-editor-additional-field-entity-search.component.html
@@ -3,7 +3,7 @@
     <mat-form-field>
       <mat-label>{{'Selected entity group search' | translate}}</mat-label>
       <mtx-select
-        appendTo="body"
+        [appendTo]="'.cdk-overlay-pane'"
         [dropdownPosition]="'bottom'"
         [clearable]="false"
         [bindLabel]="'name'"
diff --git a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-additional-fields/visual-editor-additional-field-entity-select/visual-editor-additional-field-entity-select.component.html b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-additional-fields/visual-editor-additional-field-entity-select/visual-editor-additional-field-entity-select.component.html
index 79713a49c0..995d2fede5 100644
--- a/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-additional-fields/visual-editor-additional-field-entity-select/visual-editor-additional-field-entity-select.component.html
+++ b/eform-client/src/app/modules/eforms/eform-visual-editor/components/eform-visual-editor-elements/field/visual-editor-additional-fields/visual-editor-additional-field-entity-select/visual-editor-additional-field-entity-select.component.html
@@ -3,7 +3,7 @@
     <mat-form-field>
       <mat-label>{{'Selected entity group select' | translate}}</mat-label>
       <mtx-select
-        appendTo="body"
+        [appendTo]="'.cdk-overlay-pane'"
         [dropdownPosition]="'bottom'"
         [clearable]="false"
         [bindLabel]="'name'"
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 3c90427b93..092b6cce97 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
@@ -13,6 +13,7 @@ <h3 mat-dialog-title>{{ (isFieldSelected ? 'Edit field' : 'New field') | transla
             <mat-label>{{'Type' | translate}}</mat-label>
             <mtx-select
               class="custom"
+              [appendTo]="'.cdk-overlay-pane'"
               [dropdownPosition]="'bottom'"
               [clearable]="false"
               [bindLabel]="'name'"
diff --git a/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-delete/email-recipient-delete.component.spec.ts b/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-delete/email-recipient-delete.component.spec.ts
index 200089885b..37d070dd48 100644
--- a/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-delete/email-recipient-delete.component.spec.ts
+++ b/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-delete/email-recipient-delete.component.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { of } from 'rxjs';
 
 import { EmailRecipientDeleteComponent } from './email-recipient-delete.component';
@@ -19,12 +19,22 @@ describe('EmailRecipientDeleteComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockEmailRecipientsService = {
           delete: vi.fn(),
         };
diff --git a/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-edit/email-recipient-edit.component.html b/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-edit/email-recipient-edit.component.html
index e8fdc4131b..adad23d8ef 100644
--- a/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-edit/email-recipient-edit.component.html
+++ b/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-edit/email-recipient-edit.component.html
@@ -5,6 +5,7 @@ <h3 mat-dialog-title>{{'Edit email recipient' | translate}}</h3>
       <mat-label>{{'Tags' | translate }}</mat-label>
       <mtx-select
         class="custom"
+        [appendTo]="'.cdk-overlay-pane'"
         [dropdownPosition]="'bottom'"
         [(ngModel)]="emailRecipientUpdateModel.tagsIds"
         [bindValue]="'id'"
diff --git a/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-edit/email-recipient-edit.component.spec.ts b/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-edit/email-recipient-edit.component.spec.ts
index b278a7524b..8b2cd1709b 100644
--- a/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-edit/email-recipient-edit.component.spec.ts
+++ b/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-edit/email-recipient-edit.component.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { of } from 'rxjs';
 import { EmailRecipientEditComponent } from './email-recipient-edit.component';
 import { EmailRecipientsService } from 'src/app/common/services';
@@ -18,12 +18,22 @@ describe('EmailRecipientEditComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockEmailRecipientsService = {
           update: vi.fn(),
         };
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 de97e051b7..39cb274a2d 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
@@ -5,6 +5,7 @@ <h3 mat-dialog-title>{{'New Email recipients' | translate}}</h3>
       <mat-label>{{'Tags' | translate }}</mat-label>
       <mtx-select
         class="custom"
+        [appendTo]="'.cdk-overlay-pane'"
         [dropdownPosition]="'bottom'"
         [(ngModel)]="emailRecipientsCreateModel.tagsIds"
         [bindValue]="'id'"
diff --git a/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-new/email-recipients-new.component.spec.ts b/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-new/email-recipients-new.component.spec.ts
index d0f242c6c8..a799fd04c8 100644
--- a/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-new/email-recipients-new.component.spec.ts
+++ b/eform-client/src/app/modules/email-recipients/components/recipients/email-recipient-new/email-recipients-new.component.spec.ts
@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { ComponentFixture, TestBed  } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { NO_ERRORS_SCHEMA , EventEmitter } from '@angular/core';
 import { of } from 'rxjs';
 
 import { EmailRecipientsNewComponent } from './email-recipients-new.component';
@@ -19,12 +19,22 @@ describe('EmailRecipientCreateComponent', () => {
     const mockTranslateService = {
       instant: vi.fn((key: string) => key),
       get: vi.fn((key: string) => of(key)),
-      use: vi.fn(),
+      use: vi.fn(() => of(null)),
       setDefaultLang: vi.fn(),
+      getDefaultLang: vi.fn(() => 'en'),
+      addLangs: vi.fn(),
+      getLangs: vi.fn(() => ['en']),
+      getBrowserLang: vi.fn(() => 'en'),
+      getBrowserCultureLang: vi.fn(() => 'en'),
       currentLang: 'en',
-      stream: vi.fn()
+      defaultLang: 'en',
+      stream: vi.fn((key: string) => of(key)),
+      getParsedResult: vi.fn((translations: any, key: string) => key),
+      getCurrentLang: vi.fn(() => 'en'),
+      onLangChange: new EventEmitter(),
+      onTranslationChange: new EventEmitter(),
+      onDefaultLangChange: new EventEmitter()
     };
-    mockTranslateService.stream.mockReturnValue(of('Test'));
     const mockEmailRecipientsService = {
           create: vi.fn(),
         };
diff --git a/eform-client/src/scss/styles.scss b/eform-client/src/scss/styles.scss
index 6c2e62f90f..aa9dd7cbe3 100644
--- a/eform-client/src/scss/styles.scss
+++ b/eform-client/src/scss/styles.scss
@@ -504,9 +504,14 @@ ngx-material-timepicker-container {
 }
 
 .cdk-overlay-backdrop {
-  background-color: rgba(0, 0, 0, 1) !important;
+  background-color: rgba(0, 0, 0, 0.32) !important;
 }
 
+// Angular 21 Dialog Top-Layer Fix
+// Per ng-select issue #2738: When using appendTo='.cdk-overlay-pane', 
+// dropdowns render inside the dialog's top-layer context.
+// No additional CSS needed - just the appendTo attribute on mtx-select components.
+
 
 // New styling