diff --git a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
index 66480c8218..b921c89c52 100644
--- a/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/action/widget-action-dialog.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnDestroy, OnInit, SkipSelf, ViewChild } from '@angular/core';
+import { Component, DestroyRef, Inject, OnDestroy, OnInit, SkipSelf, ViewChild } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -28,7 +28,6 @@ import {
   ValidatorFn,
   Validators
 } from '@angular/forms';
-import { Subject } from 'rxjs';
 import { Router } from '@angular/router';
 import { DialogComponent } from '@app/shared/components/dialog.component';
 import {
@@ -48,12 +47,12 @@ import {
   widgetHeaderActionButtonTypeTranslationMap,
   widgetType
 } from '@shared/models/widget.models';
-import { takeUntil } from 'rxjs/operators';
 import { CustomActionEditorCompleter } from '@home/components/widget/lib/settings/common/action/custom-action.models';
 import { WidgetService } from '@core/http/widget.service';
 import { isDefinedAndNotNull, isNotEmptyStr } from '@core/utils';
 import { MatSelect } from '@angular/material/select';
 import { TranslateService } from '@ngx-translate/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 
 export interface WidgetActionDialogData {
   isAdd: boolean;
@@ -72,8 +71,6 @@ export interface WidgetActionDialogData {
 export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDialogComponent,
                                                  WidgetActionDescriptorInfo> implements OnInit, OnDestroy, ErrorStateMatcher {
 
-  private destroy$ = new Subject<void>();
-
   widgetActionFormGroup: FormGroup;
 
   isAdd: boolean;
@@ -103,7 +100,8 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
               @SkipSelf() private errorStateMatcher: ErrorStateMatcher,
               public dialogRef: MatDialogRef<WidgetActionDialogComponent, WidgetActionDescriptorInfo>,
               public fb: FormBuilder,
-              private translate: TranslateService) {
+              private translate: TranslateService,
+              private destroyRef: DestroyRef) {
     super(store, router, dialogRef);
     this.isAdd = data.isAdd;
     if (this.isAdd) {
@@ -141,7 +139,7 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
     this.updateShowWidgetActionForm();
     this.widgetHeaderButtonValidators();
     this.widgetActionFormGroup.get('actionSourceId').valueChanges.pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed(this.destroyRef)
     ).subscribe((value) => {
       this.widgetActionFormGroup.get('name').updateValueAndValidity();
       this.updateShowWidgetActionForm();
@@ -153,12 +151,12 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
       }
     });
     this.widgetActionFormGroup.get('useShowWidgetActionFunction').valueChanges.pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed(this.destroyRef)
     ).subscribe(() => {
       this.updateShowWidgetActionForm();
     });
     this.widgetActionFormGroup.get('buttonType').valueChanges.pipe(
-      takeUntil(this.destroy$)
+      takeUntilDestroyed(this.destroyRef)
     ).subscribe(() => this.widgetHeaderButtonValidators());
     setTimeout(() => {
       if (this.action?.actionSourceId === 'cellClick') {
@@ -172,8 +170,6 @@ export class WidgetActionDialogComponent extends DialogComponent<WidgetActionDia
   }
 
   ngOnDestroy() {
-    this.destroy$.next();
-    this.destroy$.complete();
     super.ngOnDestroy();
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
index 7a4fd83660..67664beb84 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.html
@@ -37,77 +37,10 @@
          class="tb-widget-actions"
          [class]="{'tb-widget-actions-absolute': !(widget.showWidgetTitlePanel && !widgetComponent.widgetContext?.embedTitlePanel && (widget.showTitle||widget.hasAggregation))}"
          (mousedown)="$event.stopPropagation()">
-      <div class="flex items-center gap-2">
-        <ng-container *ngFor="let action of widget.customHeaderActions">
-          @switch (action.buttonType) {
-            @case (widgetHeaderActionButtonType.icon) {
-              <button mat-icon-button
-                      [style]="action.customButtonStyle"
-                      [class.!hidden]="isEdit"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.miniFab) {
-              <button mat-mini-fab
-                      [style]="action.customButtonStyle"
-                      [class.!hidden]="isEdit"
-                      [style.background-color]="action.buttonFillColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.basic) {
-              <button [class.!hidden]="isEdit" mat-button
-                      [style]="action.customButtonStyle"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.raised) {
-              <button [class.!hidden]="isEdit" mat-raised-button
-                      [style]="action.customButtonStyle"
-                      [style.background-color]="action.buttonFillColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.stroked) {
-              <button [class.!hidden]="isEdit" mat-stroked-button
-                      [style]="action.customButtonStyle"
-                      [style.border-color]="action.buttonBorderColor"
-                      [style.background-color]="action.buttonFillColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-            @case (widgetHeaderActionButtonType.flat) {
-              <button [class.!hidden]="isEdit" mat-flat-button
-                      [style]="action.customButtonStyle"
-                      [style.background-color]="action.buttonFillColor"
-                      [style.border-color]="action.buttonBorderColor"
-                      (click)="action.onAction($event)"
-                      matTooltip="{{ action.displayName }}"
-                      matTooltipPosition="above">
-                <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
-                <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
-              </button>
-            }
-          }
-        </ng-container>
+      <div class="flex items-center">
+        @for (action of widget.customHeaderActions; track action.name; let last = $last) {
+          <ng-container *ngTemplateOutlet="widgetHeaderActionButton; context:{ action, last }"></ng-container>
+        }
       </div>
 
       <button mat-icon-button *ngFor="let action of widget.widgetActions"
@@ -168,3 +101,79 @@
     </tb-timewindow>
   </div>
 </ng-template>
+
+<ng-template #widgetHeaderActionButton let-action="action" let-last="last">
+@switch (action.buttonType) {
+  @case (widgetHeaderActionButtonType.icon) {
+    <button mat-icon-button
+            [style]="action.customButtonStyle"
+            [class.!hidden]="isEdit"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.miniFab) {
+    <button mat-mini-fab
+            [style]="action.customButtonStyle"
+            [class.!hidden]="isEdit"
+            [class.mr-2]="!last"
+            [style.background-color]="action.buttonFillColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.basic) {
+    <button [class.!hidden]="isEdit" mat-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.raised) {
+    <button [class.!hidden]="isEdit" mat-raised-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            [style.background-color]="action.buttonFillColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.stroked) {
+    <button [class.!hidden]="isEdit" mat-stroked-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            [style.border-color]="action.buttonBorderColor"
+            [style.background-color]="action.buttonFillColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+  @case (widgetHeaderActionButtonType.flat) {
+    <button [class.!hidden]="isEdit" mat-flat-button
+            [class.mr-2]="!last"
+            [style]="action.customButtonStyle"
+            [style.background-color]="action.buttonFillColor"
+            [style.border-color]="action.buttonBorderColor"
+            (click)="action.onAction($event)"
+            matTooltip="{{ action.displayName }}"
+            matTooltipPosition="above">
+      <tb-icon matButtonIcon *ngIf="action.showIcon" [style.color]="action.buttonColor">{{ action.icon }}</tb-icon>
+      <span [style.color]="action.buttonColor">{{ action.displayName }}</span>
+    </button>
+  }
+}
+</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss
index d763c11c9e..b246bc1662 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-container.component.scss
@@ -86,8 +86,8 @@ div.tb-widget {
     flex-direction: row;
     place-content: center flex-start;
     align-items: center;
-    z-index: 19;
-    margin: 5px 0 5px;
+    z-index: 101;
+    margin: 5px 0 0;
 
     &-absolute {
       position: absolute;