diff --git a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
index 1c63fe12e5..3fe25965c1 100644
--- a/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/alias/entity-aliases-dialog.component.html
@@ -27,14 +27,14 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
     <div class="tb-aliases-header flex flex-row justify-start items-center">
-      <span class="flex-[1_1_5%]"></span>
-      <div class="flex-[1_1_95%] flex flex-row justify-start items-center">
-        <span class="tb-header-label flex-1 gt-sm:flex-[1_1_208px] gt-sm:min-w-52 gt-sm:max-w-52" translate>alias.name</span>
+      <span class="flex-full max-w-5%"></span>
+      <div class="flex-full max-w-95% flex flex-row justify-start items-center">
+        <span class="tb-header-label flex-1 gt-sm:basis-52 gt-sm:min-w-52 gt-sm:max-w-52" translate>alias.name</span>
         <span class="tb-header-label flex-1" translate style="padding-left: 10px;">alias.entity-filter</span>
-        <span class="tb-header-label flex-[1_1_128px] min-w-32 max-w-32" translate style="padding-left: 10px;">alias.resolve-multiple</span>
+        <span class="tb-header-label flex-1 basis-32 min-w-32 max-w-32" translate style="padding-left: 10px;">alias.resolve-multiple</span>
         <span style="min-width: 80px;"></span>
       </div>
     </div>
@@ -43,9 +43,9 @@
       <div class="flex-1 flex flex-row justify-start items-center"
            formArrayName="entityAliases"
            *ngFor="let entityAliasControl of entityAliasesFormArray().controls; let $index = index">
-        <span class="flex-[1_1_5%]">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-alias flex-[1_1_95%] flex flex-row justify-start items-center">
-          <mat-form-field class="mat-block flex-1 gt-sm:flex-[1_1_208px] gt-sm:min-w-52 gt-sm:max-w-52" style="padding-top: 20px;">
+        <span class="flex-full max-w-5%">{{$index + 1}}.</span>
+        <div class="mat-elevation-z4 tb-alias flex-full max-w-95% flex flex-row justify-start items-center">
+          <mat-form-field class="mat-block flex-1 gt-sm:basis-52 gt-sm:min-w-52 gt-sm:max-w-52" style="padding-top: 20px;">
             <input matInput [formControl]="entityAliasControl.get('alias')" required placeholder="{{ 'entity.alias' | translate }}">
             <mat-error *ngIf="entityAliasControl.get('alias').hasError('required')">
               {{ 'entity.alias-required' | translate }}
@@ -54,7 +54,7 @@
           <tb-entity-filter-view class="flex-1" style="padding-left: 10px;" [formControl]="entityAliasControl.get('filter')">
           </tb-entity-filter-view>
           <section style="padding-left: 10px;"
-                   class="tb-resolve-multiple-switch flex-[1_1_128px] min-w-32 max-w-32 flex flex-col justify-center items-center">
+                   class="tb-resolve-multiple-switch flex-1 basis-32 min-w-32 max-w-32 flex flex-col justify-center items-center">
             <mat-slide-toggle class="resolve-multiple-switch"
                    [formControl]="entityAliasControl.get('resolveMultiple')">
             </mat-slide-toggle>
diff --git a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
index e0b9e7658c..0d79d338b3 100644
--- a/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/entity/entity-details-page.component.html
@@ -51,7 +51,7 @@
       </section>
     </div>
   </mat-toolbar>
-  <mat-card-content class="flex-[1_1_100%]">
+  <mat-card-content class="flex-full">
     <mat-tab-group mat-stretch-tabs="false" class="tb-absolute-fill w-full h-full" [class.tb-headless]="hideDetailsTabs()" [(selectedIndex)]="selectedTab">
       <mat-tab label="{{ 'details.details' | translate }}">
         <tb-anchor #entityDetailsForm></tb-anchor>
diff --git a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
index 4f0b916545..87cd22b7d8 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-content-dialog.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<mat-toolbar fxLayout="row" color="primary">
+<mat-toolbar class="flex flex-row" color="primary">
   <h2 translate>{{ title }}</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <button mat-icon-button
           [mat-dialog-close]="false"
           type="button">
     <mat-icon class="material-icons">close</mat-icon>
   </button>
 </mat-toolbar>
-<div mat-dialog-content fxLayout="column">
+<div mat-dialog-content class="flex flex-col">
   <div #eventContentEditor class="tb-event-content">
   </div>
 </div>
-<div mat-dialog-actions fxLayout="row">
-  <span fxFlex></span>
+<div mat-dialog-actions class="flex flex-row">
+  <span class="flex-1"></span>
   <button mat-button color="primary"
           type="button"
           [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
index 51e7269550..91879f5f51 100644
--- a/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/event/event-filter-panel.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<form fxLayout="column" class="tb-filter" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
-  <div fxLayout="column" class="tb-filter-container mat-padding">
+<form class="tb-filter flex flex-col" [formGroup]="eventFilterFormGroup" (ngSubmit)="update()">
+  <div class="tb-filter-container mat-padding flex flex-col">
     <ng-container *ngFor="let column of showColumns">
       <ng-container [ngSwitch]="column.key">
         <ng-template [ngSwitchCase]="isSelector(column.key)">
@@ -46,7 +46,7 @@
           </tb-checkbox>
         </ng-template>
         <ng-template [ngSwitchCase]="'errorStr'">
-          <mat-form-field fxHide [fxShow]="showErrorMsgFields()">
+          <mat-form-field [class.!hidden]="!showErrorMsgFields()">
             <mat-label>{{ column.title | translate}}</mat-label>
             <input matInput type="text" name="errorSearchText" formControlName="errorStr">
           </mat-form-field>
@@ -60,7 +60,7 @@
       </ng-container>
     </ng-container>
   </div>
-  <div fxLayout="row" class="tb-panel-actions mat-padding" fxLayoutAlign="end center">
+  <div class="tb-panel-actions mat-padding flex flex-row justify-end items-center">
     <button type="button"
             mat-button
             (click)="cancel()">
diff --git a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
index a499300dea..68f107dd65 100644
--- a/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/boolean-filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="booleanFilterPredicateFormGroup">
-  <mat-form-field hideRequiredMarker fxFlex="30" class="mat-block">
+<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="booleanFilterPredicateFormGroup">
+  <mat-form-field hideRequiredMarker class="mat-block flex-full max-w-30%">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
       <mat-option *ngFor="let operation of booleanOperations" [value]="operation">
         {{booleanOperationTranslations.get(booleanOperationEnum[operation]) | translate}}
@@ -25,7 +25,7 @@
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             fxFlex="70"
+                             class="flex-full max-w-70%"
                              [valueType]="valueTypeEnum.BOOLEAN"
                              formControlName="value">
   </tb-filter-predicate-value>
diff --git a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
index 2d9ae17eb9..088e5e6a31 100644
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="complexFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
   <mat-toolbar color="primary">
     <h2 translate>filter.complex-filter</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -26,7 +26,7 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async"  class="flex flex-col">
       <mat-form-field class="mat-block">
         <mat-label translate>filter.operation.operation</mat-label>
         <mat-select required formControlName="operation">
@@ -46,7 +46,7 @@
       </tb-filter-predicate-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
index 57224e434f..d12d989277 100644
--- a/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/complex-filter-predicate.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+<div class="flex-1 flex flex-row justify-start items-center gap-2">
   <mat-label translate>filter.complex-filter</mat-label>
   <button mat-icon-button color="primary"
           class="tb-mat-32"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
index f71ee78e5e..1b93e92649 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="filterFormGroup" (ngSubmit)="save()" style="width: 700px;">
   <mat-toolbar color="primary">
     <h2>{{ (isAdd ? 'filter.add' : 'filter.edit') | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -29,9 +29,9 @@
   </mat-progress-bar>
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
-      <div fxFlex fxLayout="column">
-        <div fxLayout="row">
-          <mat-form-field fxFlex class="mat-block">
+      <div class="flex-1 flex flex-col">
+        <div class="flex flex-row">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>filter.name</mat-label>
             <input matInput formControlName="filter" required>
             <mat-error *ngIf="filterFormGroup.get('filter').hasError('required')">
@@ -41,7 +41,7 @@
               {{ 'filter.duplicate-filter' | translate }}
             </mat-error>
           </mat-form-field>
-          <section class="tb-editable-switch" fxLayout="column" fxLayoutAlign="start center">
+          <section class="tb-editable-switch flex flex-col justify-start items-center">
             <label class="tb-small editable-label" translate>filter.editable</label>
             <mat-slide-toggle class="editable-switch"
                               formControlName="editable">
@@ -54,7 +54,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions  class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
index c664967b3e..3708938cad 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-list.component.html
@@ -15,41 +15,41 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" [formGroup]="filterListFormGroup">
+<section class="flex flex-col" [formGroup]="filterListFormGroup">
   <mat-expansion-panel [expanded]="true">
     <mat-expansion-panel-header>
       <mat-panel-title>
         <div translate>filter.filters</div>
       </mat-panel-title>
     </mat-expansion-panel-header>
-    <div fxLayout="row">
-      <span fxFlex="8"></span>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex="92">
-        <div fxFlex fxLayout="row" fxLayoutGap="8px">
-          <div fxFlex="30" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-            <label fxFlex translate class="tb-title no-padding">filter.operation.operation</label>
+    <div class="flex flex-row">
+      <span class="flex-full max-w-8%"></span>
+      <div class="flex-full max-w-92% flex flex-row justify-start items-center gap-2">
+        <div class="flex-1 flex flex-row gap-2">
+          <div class="flex-full max-w-30% flex flex-row justify-start items-center gap-2">
+            <label translate class="tb-title no-padding flex-1">filter.operation.operation</label>
             <label *ngIf="valueType === valueTypeEnum.STRING"
                    translate class="tb-title no-padding" style="min-width: 70px;">filter.ignore-case</label>
           </div>
-          <label fxFlex="70" translate class="tb-title no-padding">filter.value</label>
+          <label translate class="tb-title no-padding flex-full max-w-70%">filter.value</label>
         </div>
         <label *ngIf="displayUserParameters"
                translate class="tb-title no-padding" style="width: 60px;">filter.user-parameters</label>
-        <span [fxShow]="!disabled" style="min-width: 40px;">&nbsp;</span>
+        <span [class.!hidden]="disabled" style="min-width: 40px;">&nbsp;</span>
       </div>
     </div>
     <mat-divider style="padding-bottom: 5px;"></mat-divider>
     <div class="predicate-list">
-      <div fxLayout="row" fxLayoutAlign="start" style="height: 76px;"
+      <div class="flex flex-row justify-start items-stretch" style="height: 76px;"
            formArrayName="predicates"
            *ngFor="let predicateControl of predicatesFormArray.controls; let $index = index">
-        <div fxFlex="8" fxLayout="row" fxLayoutAlign="center" class="filters-operation">
+        <div class="filters-operation flex-full max-w-8% flex flex-row justify-center items-stretch">
           <span *ngIf="$index > 0">{{ complexOperationTranslations.get(operation) | translate }}</span>
         </div>
-        <div fxLayout="column" fxFlex="92">
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" fxFlex>
+        <div class="flex-full max-w-92% flex flex-col">
+          <div class="flex-1 flex flex-row justify-start items-center gap-2">
             <tb-filter-predicate
-              fxFlex
+              class="flex-1"
               [valueType]="valueType"
               [displayUserParameters]="displayUserParameters"
               [allowUserDynamicSource]="allowUserDynamicSource"
@@ -58,7 +58,7 @@
               [formControl]="predicateControl">
             </tb-filter-predicate>
             <button mat-icon-button color="primary"
-                    [fxShow]="!disabled"
+                    [class.!hidden]="disabled"
                     type="button"
                     (click)="removePredicate($index)"
                     matTooltip="{{ 'filter.remove-filter' | translate }}"
@@ -68,13 +68,13 @@
           </div>
         </div>
       </div>
-      <span [fxShow]="!predicatesFormArray.length"
-            fxLayoutAlign="center center" [ngClass]="{'disabled': disabled}"
-            class="no-data-found" translate>filter.no-filters</span>
+      <span [class.!hidden]="!!predicatesFormArray.length"
+            [class.disabled]="disabled"
+            class="no-data-found flex justify-center items-center" translate>filter.no-filters</span>
     </div>
-    <div style="margin-top: 16px;" fxLayout="row" fxLayoutGap="8px">
+    <div style="margin-top: 16px;" class="flex flex-row gap-2">
       <button mat-button mat-raised-button color="primary"
-              [fxShow]="!disabled"
+              [class.!hidden]="disabled"
               (click)="addPredicate(false)"
               type="button"
               matTooltip="{{ 'filter.add-filter' | translate }}"
@@ -82,7 +82,7 @@
         {{ 'action.add' | translate }}
       </button>
       <button mat-button mat-raised-button color="primary"
-              [fxShow]="!disabled"
+              [class.!hidden]="disabled"
               (click)="addPredicate(true)"
               type="button"
               matTooltip="{{ 'filter.add-complex-filter' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
index c6ae39f295..6c7906d327 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate-value.component.html
@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="filterPredicateValueFormGroup">
-  <div fxFlex fxLayout="column" [fxShow]="!dynamicMode && !onlyUserDynamicSource">
-    <div fxLayout="column" [ngSwitch]="valueType">
+<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="filterPredicateValueFormGroup">
+  <div class="flex-1 flex flex-col" [class.!hidden]="dynamicMode || onlyUserDynamicSource">
+    <div class="flex flex-col" [ngSwitch]="valueType">
       <ng-template [ngSwitchCase]="valueTypeEnum.STRING">
         <mat-form-field hideRequiredMarker class="mat-block">
           <input matInput formControlName="defaultValue" placeholder="{{'filter.value' | translate}}">
@@ -43,9 +43,9 @@
     </div>
     <div class="tb-hint">{{ hintText | translate }}</div>
   </div>
-  <div fxFlex fxLayout="column" [fxShow]="dynamicMode || onlyUserDynamicSource">
-    <div formGroupName="dynamicValue" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-      <div fxFlex="35" fxLayout="column">
+  <div class="flex flex-col" [class.!hidden]="!dynamicMode && !onlyUserDynamicSource">
+    <div formGroupName="dynamicValue" class="flex flex-row justify-start items-center gap-2">
+      <div class="flex-full max-w-35% flex flex-col">
         <mat-form-field hideRequiredMarker class="mat-block">
           <mat-select formControlName="sourceType" placeholder="{{'filter.dynamic-source-type' | translate}}">
             <mat-option [value]="null">
@@ -58,14 +58,14 @@
         </mat-form-field>
         <div class="tb-hint" translate>filter.dynamic-source-type</div>
       </div>
-      <div fxFlex fxLayout="column">
+      <div class="flex-1 flex flex-col">
         <mat-form-field hideRequiredMarker class="mat-block">
           <input matInput formControlName="sourceAttribute" placeholder="{{'filter.source-attribute' | translate}}">
         </mat-form-field>
         <div class="tb-hint" translate>filter.source-attribute</div>
       </div>
       <div *ngIf="!allow && inheritMode"
-           fxLayout="column"
+           class="flex flex-col"
            style="padding-top: 6px">
         <mat-checkbox formControlName="inherit">
           {{ 'filter.inherit-owner' | translate}}
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
index 0faced041e..d4157ac25b 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" [formGroup]="filterPredicateFormGroup">
-  <div fxFlex fxLayout="column" [ngSwitch]="type">
+<div class="flex-1 flex flex-row justify-start items-center gap-2" [formGroup]="filterPredicateFormGroup">
+  <div class="flex-1 flex flex-col" [ngSwitch]="type">
     <ng-template [ngSwitchCase]="filterPredicateType.STRING">
       <tb-string-filter-predicate
         [allowUserDynamicSource]="allowUserDynamicSource"
@@ -52,7 +52,7 @@
   </div>
   <tb-filter-user-info *ngIf="type !== filterPredicateType.COMPLEX && displayUserParameters"
                        style="width: 60px;"
-                       fxLayout="row" fxLayoutAlign="center"
+                       class="flex flex-row justify-center items-stretch"
                        [valueType]="valueType"
                        [operation]="filterPredicateFormGroup.get('predicate').value?.operation"
                        [key]="key"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
index 9c037a5195..37b70e9244 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filter-user-info-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="filterUserInfoFormGroup" (ngSubmit)="save()" style="width: 500px;">
   <mat-toolbar color="primary">
     <h2>{{(data.readonly ? 'filter.filter-user-params' : 'filter.edit-filter-user-params') | translate}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -26,12 +26,12 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
       <mat-checkbox formControlName="editable" style="margin-bottom: 16px;">
         {{ 'filter.editable' | translate }}
       </mat-checkbox>
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-        <mat-form-field fxFlex class="mat-block">
+      <div class="flex flex-row justify-start items-center gap-2">
+        <mat-form-field class="mat-block flex-1">
           <mat-label translate>filter.display-label</mat-label>
           <input matInput formControlName="label">
         </mat-form-field>
@@ -45,7 +45,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
index dafcd7900c..1a0e7688e5 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="filtersFormGroup" (ngSubmit)="save()" style="width: 700px;">
   <mat-toolbar color="primary">
     <h2>{{ title | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -27,30 +27,27 @@
   </mat-toolbar>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
-  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div style="height: 4px;" *ngIf="(isLoading$ | async) === false"></div>
   <div mat-dialog-content>
-    <div class="tb-filters-header" fxLayout="row" fxLayoutAlign="start center">
-      <span fxFlex="5"></span>
-      <div fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-        <div class="tb-header-label" translate fxFlex>filter.filter</div>
-        <div class="tb-header-label" translate fxFlex="80px"
-             fxLayout="column" fxLayoutAlign="center center"
+    <div class="tb-filters-header flex flex-row justify-start items-center">
+      <span class="flex-full max-w-5%"></span>
+      <div class="flex-full max-w-95% flex flex-row justify-start items-center">
+        <div class="tb-header-label flex-1" translate>filter.filter</div>
+        <div class="tb-header-label flex-1 basis-20 min-w-20 max-w-20 flex flex-col justify-center items-center" translate
              style="padding-left: 5px;">filter.editable</div>
         <div style="min-width: 132px;"></div>
       </div>
     </div>
     <fieldset [disabled]="isLoading$ | async">
       <mat-divider></mat-divider>
-      <div fxFlex fxLayout="row" fxLayoutAlign="start center"
+      <div class="flex-1 flex flex-row justify-start items-center"
            formArrayName="filters"
            *ngFor="let filterControl of filtersFormArray().controls; let $index = index">
-        <span fxFlex="5">{{$index + 1}}.</span>
-        <div class="mat-elevation-z4 tb-filter" fxFlex="95" fxLayout="row" fxLayoutAlign="start center">
-          <mat-label fxFlex>{{filterControl.get('filter').value}}</mat-label>
-          <section fxFlex="80px" style="padding-left: 10px;"
-                   class="tb-editable-switch"
-                   fxLayout="column"
-                   fxLayoutAlign="center center">
+        <span class="flex-full max-w-5%">{{$index + 1}}.</span>
+        <div class="mat-elevation-z4 tb-filter flex-full max-w-5% flex flex-row justify-start items-center">
+          <mat-label class="flex-1">{{filterControl.get('filter').value}}</mat-label>
+          <section style="padding-left: 10px;"
+                   class="tb-editable-switch flex-1 basis-20 min-w-20 max-w-20 flex flex-col justify-center items-center">
             <mat-slide-toggle class="editable-switch"
                               [formControl]="filterControl.get('editable')">
             </mat-slide-toggle>
@@ -90,13 +87,13 @@
     <button mat-raised-button color="primary"
             type="button"
             (click)="addFilter()"
-            [fxShow]="!disableAdd"
+            [class.!hidden]="disableAdd"
             [disabled]="isLoading$ | async"
             matTooltip="{{ 'filter.add' | translate }}"
             matTooltipPosition="above">
       {{ 'filter.add' | translate }}
     </button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
index 0264381e82..d2a1110479 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit-panel.component.html
@@ -15,10 +15,10 @@
     limitations under the License.
 
 -->
-<div fxLayout="column" class="mat-content mat-padding">
+<div class="mat-content mat-padding flex flex-col">
   <div *ngFor="let filter of filtersInfo | keyvalue; let last = last">
-    <div fxLayout="row" fxLayoutAlign="start center">
-      <mat-label fxFlex>{{filter.value.filter}}</mat-label>
+    <div class="flex flex-row justify-start items-center">
+      <mat-label class="flex-1">{{filter.value.filter}}</mat-label>
       <button mat-icon-button color="primary"
               style="min-width: 40px;"
               type="button"
diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
index 4f475bdf7a..4ad6ccf06b 100644
--- a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section class="tb-filters-edit" fxLayout="row" fxLayoutAlign="start center" *ngIf="hasEditableFilters">
+<section class="tb-filters-edit flex flex-row justify-start items-center" *ngIf="hasEditableFilters">
   <button mat-icon-button
           cdkOverlayOrigin #filtersEditPanelOrigin="cdkOverlayOrigin"
           (click)="openEditMode()"
@@ -23,7 +23,7 @@
           [matTooltipPosition]="tooltipPosition">
     <mat-icon>filter_list</mat-icon>
   </button>
-  <span fxHide.lt-lg
+  <span class="lt-lg:!hidden"
         (click)="openEditMode()"
         matTooltip="{{ 'filter.filters' | translate }}"
         [matTooltipPosition]="tooltipPosition">
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
index 6692189704..3ce82ebc2a 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="keyFilterFormGroup" (ngSubmit)="save()" style="width: 1200px;">
   <mat-toolbar color="primary">
     <h2>{{(data.isAdd ? 'filter.add-key-filter' : (data.readonly ? 'filter.key-filter' : 'filter.edit-key-filter')) | translate}}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -26,10 +26,15 @@
     </button>
   </mat-toolbar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column">
-      <section fxLayout="row" fxLayoutGap="8px" class="entity-key">
-        <section [fxFlex]="isConstantKeyType ? 45 : 70" fxLayout="row" formGroupName="key" fxLayoutGap="8px">
-          <mat-form-field fxFlex="40" class="mat-block">
+    <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
+      <section class="entity-key flex flex-row gap-2">
+        <section class="flex-full flex flex-row gap-2"
+                 [class]="{
+                    'max-w-45%': isConstantKeyType,
+                    'max-w-70%': !isConstantKeyType
+                 }"
+                 formGroupName="key">
+          <mat-form-field class="mat-block flex-full max-w-40%">
             <mat-label translate>filter.key-type.key-type</mat-label>
             <mat-select required formControlName="type">
               <mat-option *ngFor="let type of entityKeyTypes" [value]="type">
@@ -37,7 +42,7 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field fxFlex="60" class="mat-block">
+          <mat-form-field class="mat-block flex-full max-w-60%">
             <mat-label translate>filter.key-name</mat-label>
             <input matInput required formControlName="key"
                    #keyNameInput
@@ -60,7 +65,11 @@
             </mat-error>
           </mat-form-field>
         </section>
-        <mat-form-field [fxFlex]="isConstantKeyType ? 20 : 30" class="mat-block tb-value-type">
+        <mat-form-field class="mat-block tb-value-type flex-full"
+                        [class]="{
+                          'max-w-20%': isConstantKeyType,
+                          'max-w-30%': !isConstantKeyType
+                        }">
           <mat-label translate>filter.value-type.value-type</mat-label>
           <mat-select formControlName="valueType">
             <mat-select-trigger>
@@ -76,8 +85,8 @@
             {{ 'filter.value-type-required' | translate }}
           </mat-error>
         </mat-form-field>
-        <div fxFlex *ngIf="isConstantKeyType">
-          <div fxLayout="column" [ngSwitch]="keyFilterFormGroup.get('valueType').value">
+        <div class="flex-1" *ngIf="isConstantKeyType">
+          <div class="flex flex-col" [ngSwitch]="keyFilterFormGroup.get('valueType').value">
             <ng-template [ngSwitchCase]="entityKeyValueTypeEnum.STRING">
               <mat-form-field class="mat-block">
                 <mat-label translate>filter.value</mat-label>
@@ -114,7 +123,7 @@
       </tb-filter-predicate-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
index df14546754..31afdddb62 100644
--- a/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/key-filter-list.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<section fxLayout="column" [formGroup]="keyFilterListFormGroup">
+<section class="flex flex-col" [formGroup]="keyFilterListFormGroup">
   <mat-accordion [multi]="true">
     <mat-expansion-panel [expanded]="true">
       <mat-expansion-panel-header>
@@ -23,27 +23,27 @@
           <div translate>filter.key-filters</div>
         </mat-panel-title>
       </mat-expansion-panel-header>
-      <div fxLayout="row">
-        <span fxFlex="8"></span>
-        <div fxLayout="row" fxLayoutAlign="start center" fxFlex="92">
-          <label fxFlex translate class="tb-title no-padding">filter.key-name</label>
-          <label fxFlex translate class="tb-title no-padding">filter.key-type.key-type</label>
-          <span [fxShow]="!disabled" style="min-width: 80px;">&nbsp;</span>
-          <span [fxShow]="disabled" style="min-width: 40px;">&nbsp;</span>
+      <div class="flex flex-row">
+        <span class="flex-full max-w-8%"></span>
+        <div class="flex-full max-w-92% flex flex-row justify-start items-center">
+          <label translate class="tb-title no-padding flex-1">filter.key-name</label>
+          <label translate class="tb-title no-padding flex-1">filter.key-type.key-type</label>
+          <span [class.!hidden]="disabled" style="min-width: 80px;">&nbsp;</span>
+          <span [class.!hidden]="!disabled" style="min-width: 40px;">&nbsp;</span>
         </div>
       </div>
       <mat-divider></mat-divider>
       <div class="key-filter-list">
-        <div fxLayout="row" fxLayoutAlign="start" style="max-height: 76px;"
+        <div class="flex flex-row justify-start items-stretch" style="max-height: 76px;"
              formArrayName="keyFilters"
              *ngFor="let keyFilterControl of keyFiltersFormArray.controls; let $index = index">
-          <div fxFlex="8" class="filters-operation">
+          <div class="filters-operation flex-full max-w-8%">
             <span *ngIf="$index > 0" translate>filter.operation.and</span>
           </div>
-          <div fxLayout="column" fxFlex="92">
-            <div fxLayout="row" fxLayoutAlign="start center">
-              <div fxFlex>{{ keyFilterControl.value.key.key }}</div>
-              <div fxFlex>{{ entityKeyTypeTranslations.get(keyFilterControl.value.key.type) | translate }}</div>
+          <div class="flex-full max-w-92% flex flex-col">
+            <div class="flex flex-row justify-start items-center">
+              <div class="flex-1">{{ keyFilterControl.value.key.key }}</div>
+              <div class="flex-1">{{ entityKeyTypeTranslations.get(keyFilterControl.value.key.type) | translate }}</div>
               <button mat-icon-button color="primary"
                       type="button"
                       (click)="editKeyFilter($index)"
@@ -52,7 +52,7 @@
                 <mat-icon>{{disabled ? 'more_vert' : 'edit'}}</mat-icon>
               </button>
               <button mat-icon-button color="primary"
-                      [fxShow]="!disabled"
+                      [class.!hidden]="disabled"
                       type="button"
                       (click)="removeKeyFilter($index)"
                       matTooltip="{{ 'filter.remove-key-filter' | translate }}"
@@ -63,13 +63,13 @@
             <mat-divider></mat-divider>
           </div>
         </div>
-        <span [fxShow]="!keyFiltersFormArray.length"
-              fxLayoutAlign="center center" [ngClass]="{'disabled': disabled}"
-              class="no-data-found" translate>filter.no-key-filters</span>
+        <span [class.!hidden]="!!keyFiltersFormArray.length"
+              [class.disabled]="disabled"
+              class="no-data-found flex justify-center items-center" translate>filter.no-key-filters</span>
       </div>
       <div style="margin-top: 16px;">
         <button mat-button mat-raised-button color="primary"
-                [fxShow]="!disabled"
+                [class.!hidden]="disabled"
                 (click)="addKeyFilter()"
                 type="button"
                 matTooltip="{{ 'filter.add-key-filter' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
index e2bec1a194..87ac3649bc 100644
--- a/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/numeric-filter-predicate.component.html
@@ -15,8 +15,8 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="numericFilterPredicateFormGroup">
-  <mat-form-field hideRequiredMarker fxFlex="30" class="mat-block">
+<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="numericFilterPredicateFormGroup">
+  <mat-form-field hideRequiredMarker class="mat-block flex-full max-w-30%">
     <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
       <mat-option *ngFor="let operation of numericOperations" [value]="operation">
         {{numericOperationTranslations.get(numericOperationEnum[operation]) | translate}}
@@ -25,7 +25,7 @@
   </mat-form-field>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             fxFlex="70"
+                             class="flex-full max-w-70%"
                              [valueType]="valueType"
                              formControlName="value">
   </tb-filter-predicate-value>
diff --git a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
index c2888fa06f..6957d5cdd8 100644
--- a/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/string-filter-predicate.component.html
@@ -15,21 +15,21 @@
     limitations under the License.
 
 -->
-<div fxFlex fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="8px" [formGroup]="stringFilterPredicateFormGroup">
-  <div fxFlex="30" fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
-    <mat-form-field hideRequiredMarker fxFlex class="mat-block">
+<div class="flex-1 flex flex-row justify-start items-start gap-2" [formGroup]="stringFilterPredicateFormGroup">
+  <div class="flex-full max-w-30% flex flex-row justify-start items-center gap-2">
+    <mat-form-field hideRequiredMarker class="mat-block flex-1">
       <mat-select required formControlName="operation" placeholder="{{'filter.operation.operation' | translate}}">
         <mat-option *ngFor="let operation of stringOperations" [value]="operation">
           {{stringOperationTranslations.get(stringOperationEnum[operation]) | translate}}
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-checkbox fxLayout="row" fxLayoutAlign="center" formControlName="ignoreCase" style="min-width: 70px;">
+    <mat-checkbox class="flex flex-row justify-center items-stretch" formControlName="ignoreCase" style="min-width: 70px;">
     </mat-checkbox>
   </div>
   <tb-filter-predicate-value [allowUserDynamicSource]="allowUserDynamicSource"
                              [onlyUserDynamicSource]="onlyUserDynamicSource"
-                             fxFlex="70"
+                             class="flex-full max-w-70%"
                              [valueType]="valueTypeEnum.STRING"
                              [operation]="stringFilterPredicateFormGroup.get('operation').value"
                              formControlName="value">
diff --git a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
index 03c42e788d..3b0b389859 100644
--- a/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/filter/user-filter-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="userFilterFormGroup" (ngSubmit)="save()" style="width: 400px;">
   <mat-toolbar color="primary">
     <h2>{{ filter.filter }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -60,7 +60,7 @@
       </div>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex justify-end items-center">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
index ca7894c010..2119f7d7d8 100644
--- a/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
+++ b/ui-ngx/src/app/shared/components/time/history-selector/history-selector.component.html
@@ -23,7 +23,7 @@
         <button mat-icon-button class="mat-icon-button" aria-label="Previous" (click)="movePrev()">
             <mat-icon class="material-icons" [style.color]="settings.buttonColor">skip_previous</mat-icon>
         </button>
-        <div class="flex flex-col flex-[1_1_100%]">
+        <div class="flex flex-col flex-full">
             <mat-slider [min]="minTimeIndex" [max]="maxTimeIndex" #ngSlider><input matSliderThumb [(ngModel)]="index"  (input)="changeIndex({source: ngSliderThumb, parent: ngSlider, value: ngSliderThumb.value}.value)" #ngSliderThumb="matSliderThumb" />
             </mat-slider>
             <div class="panel-timer">
diff --git a/ui-ngx/tailwind.config.js b/ui-ngx/tailwind.config.js
index e14eb06ccf..8a397b4272 100644
--- a/ui-ngx/tailwind.config.js
+++ b/ui-ngx/tailwind.config.js
@@ -61,11 +61,53 @@ module.exports = {
       }
     },
     extend: {
+      flex: {
+        full: '1 1 100%'
+      },
       gap: {
         '0.75': '0.1875rem'
+      },
+      maxWidth: {
+        '5%': '5%',
+        '8%': '8%',
+        '10%': '10%',
+        '15%': '15%',
+        '20%': '20%',
+        '25%': '25%',
+        '30%': '30%',
+        '35%': '35%',
+        '40%': '40%',
+        '45%': '45%',
+        '50%': '50%',
+        '55%': '55%',
+        '60%': '60%',
+        '65%': '65%',
+        '70%': '70%',
+        '75%': '75%',
+        '80%': '80%',
+        '85%': '85%',
+        '90%': '90%',
+        '92%': '92%',
+        '95%': '95%',
+        '1/2': '50%',
+        '1/3': '33.333333%',
+        '2/3': '66.666667%',
+        '1/6': '16.666667%',
+        '2/6': '33.333333%',
+        '4/6': '66.666667%',
+        '5/6': '83.333333%',
+        '1/12': '8.333333%',
+        '2/12': '16.666667%',
+        '4/12': '33.333333%',
+        '5/12': '41.666667%',
+        '7/12': '58.333333%',
+        '8/12': '66.666667%',
+        '10/12': '83.333333%',
+        '11/12': '91.666667%'
       }
     },
   },
+  safelist: [],
   corePlugins: {
     preflight: false
   },