diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
index cda99f6c09..6859ff6dab 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form #testScriptContainer class="test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup">
+<form #testScriptContainer class="cf-test-dialog-container size-full" [formGroup]="calculatedFieldScriptTestFormGroup">
   <mat-toolbar class="flex justify-between" color="primary">
     <h2>{{ 'calculated-fields.test-script-function' | translate }} ({{ 'api-usage.tbel' | translate }})</h2>
     <button mat-icon-button
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.scss b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.scss
index d944e2a683..94766e944a 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.scss
@@ -13,62 +13,79 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
-  .test-dialog-container {
-    .block-label {
-      padding: 4px;
-      color: #00acc1;
-      background: rgba(220, 220, 220, .35);
-      border-radius: 5px;
-    }
 
-    .test-block-content {
-      padding-top: 5px;
-      padding-left: 5px;
-      border: 1px solid #c0c0c0;
-      overflow: scroll;
-    }
+.cf-test-dialog-container {
+  .gutter {
+    background-color: #eee;
+    background-repeat: no-repeat;
+    background-position: 50%;
+  }
 
-    .block-label-container {
-      position: absolute;
-      z-index: 10;
-      font-size: 12px;
-      font-weight: bold;
+  .gutter.gutter-horizontal {
+    cursor: col-resize;
+    background-image: url("../../../../../../../assets/split.js/grips/horizontal.png");
+  }
 
-      &.left {
-        right: 112px;
-        top: 9px;
-      }
+  .gutter.gutter-vertical {
+    cursor: row-resize;
+    background-image: url("../../../../../../../assets/split.js/grips/vertical.png");
+  }
 
-      &.right-bottom {
-        right: 40px;
-        top: 6px;
-      }
+  .block-label {
+    padding: 4px;
+    color: #00acc1;
+    background: rgba(220, 220, 220, .35);
+    border-radius: 5px;
+  }
 
-      &.right-top {
-        right: 8px;
-        top: 2px;
-      }
-    }
+  .test-block-content {
+    padding-top: 5px;
+    padding-left: 5px;
+    border: 1px solid #c0c0c0;
+    overflow: scroll;
   }
-}
 
-:host::ng-deep {
-  .test-dialog-container {
-    .gutter {
-      background-color: #eee;
-      background-repeat: no-repeat;
-      background-position: 50%;
+  .block-label-container {
+    position: absolute;
+    z-index: 10;
+    font-size: 12px;
+    font-weight: bold;
+
+    &.left {
+      right: 112px;
+      top: 9px;
+    }
+
+    &.right-bottom {
+      right: 40px;
+      top: 6px;
     }
 
-    .gutter.gutter-horizontal {
-      cursor: col-resize;
-      background-image: url("../../../../../../../assets/split.js/grips/horizontal.png");
+    &.right-top {
+      right: 8px;
+      top: 2px;
     }
+  }
+}
 
-    .gutter.gutter-vertical {
-      cursor: row-resize;
-      background-image: url("../../../../../../../assets/split.js/grips/vertical.png");
+.tb-js-func {
+  .ace_tb {
+    &.ace_calculated-field {
+      &-ctx {
+        color: #C52F00;
+      }
+      &-args {
+        color: #185F2A;
+      }
+      &-key {
+        color: #c24c1a;
+      }
+      &-time-window, &-values, &-func, &-value, &-ts {
+        color: #7214D0;
+      }
+      &-start-ts, &-end-ts {
+        color: #2CAA00;
+      }
     }
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.ts b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.ts
index 78c3b17bcb..4e15e4a240 100644
--- a/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.ts
@@ -22,6 +22,7 @@ import {
   Inject,
   OnDestroy,
   ViewChild,
+  ViewEncapsulation,
 } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
@@ -49,6 +50,7 @@ import {
   selector: 'tb-calculated-field-script-test-dialog',
   templateUrl: './calculated-field-script-test-dialog.component.html',
   styleUrls: ['./calculated-field-script-test-dialog.component.scss'],
+  encapsulation: ViewEncapsulation.None
 })
 export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<CalculatedFieldScriptTestDialogComponent,
   string> implements AfterViewInit, OnDestroy {
@@ -70,7 +72,7 @@ export class CalculatedFieldScriptTestDialogComponent extends DialogComponent<Ca
 
   readonly ContentType = ContentType;
   readonly ScriptLanguage = ScriptLanguage;
-  readonly functionArgs = Object.keys(this.data.arguments);
+  readonly functionArgs = ['ctx', ...Object.keys(this.data.arguments)];
 
   private testScriptResize: ResizeObserver;
   private splitObjects: SplitObject[] = [];