diff --git a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
index 6806fb4a37..d0178b8c64 100644
--- a/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/wizard/device-wizard-dialog.component.html
@@ -17,7 +17,7 @@
 -->
 <mat-toolbar color="primary">
   <h2 translate>device.add-device-text</h2>
-  <span fxFlex></span>
+  <span class="flex-1"></span>
   <div [tb-help]="'devices'"></div>
   <button mat-icon-button
           (click)="cancel()"
@@ -103,7 +103,7 @@
     <button mat-stroked-button *ngIf="selectedIndex > 0"
             [disabled]="(isLoading$ | async)"
             (click)="previousStep()">{{ 'action.back' | translate }}</button>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-stroked-button
             color="primary"
             *ngIf="showNext"
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
index 96d8d62bc3..ec959a956f 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-customer-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="addEntitiesToCustomerFormGroup" (ngSubmit)="assign()">
   <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -39,7 +39,7 @@
       </tb-entity-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
index fb8bb008e8..fc0d394b80 100644
--- a/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/add-entities-to-edge-dialog.component.html
@@ -16,9 +16,9 @@
 
 -->
 <form [formGroup]="addEntitiesToEdgeFormGroup" (ngSubmit)="assign()">
-  <mat-toolbar fxLayout="row" color="primary">
+  <mat-toolbar class="flex flex-row" color="primary">
     <h2>{{ assignToEdgeTitle | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -39,7 +39,7 @@
       </tb-entity-list>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             style="margin-right: 20px;"
             type="button"
diff --git a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
index c740994ea5..fa46d6d950 100644
--- a/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/dialogs/assign-to-customer-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="assignToCustomerFormGroup" (ngSubmit)="assign()">
   <mat-toolbar color="primary">
     <h2>{{ assignToCustomerTitle | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="cancel()"
             type="button">
@@ -38,7 +38,7 @@
       </tb-entity-autocomplete>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex flex-row items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
index 870058bda3..027c605d48 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/general-settings.component.html
@@ -18,7 +18,7 @@
 <mat-card appearance="outlined" class="settings-card">
   <mat-card-header>
     <mat-card-title>
-      <div fxLayout="row">
+      <div class="flex flex-row">
         <span class="mat-headline-5" translate>admin.general-settings</span>
       </div>
     </mat-card-title>
@@ -44,7 +44,7 @@
           </div>
         </div>
       </fieldset>
-      <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
+      <div class="flex flex-row flex-wrap items-center justify-end gap-2">
         <button mat-button color="primary"
                 [disabled]="generalSettings.pristine"
                 (click)="discardGeneralSettings()"
@@ -96,11 +96,11 @@
               {{ 'admin.device-connectivity.' + protocol | translate }}
             </mat-slide-toggle>
             <div class="tb-form-row column-xs no-border no-padding tb-standard-fields">
-              <mat-form-field fxFlex>
+              <mat-form-field class="flex-1">
                 <mat-label translate>admin.device-connectivity.host</mat-label>
                 <input matInput formControlName="host"/>
               </mat-form-field>
-              <mat-form-field fxFlex>
+              <mat-form-field class="flex-1">
                 <mat-label translate>admin.device-connectivity.port</mat-label>
                 <input matInput type="number" min="0" max="65535" formControlName="port"/>
                 <mat-error *ngIf="deviceConnectivitySettingsForm.get(protocol + '.port').hasError('pattern')">
@@ -114,7 +114,7 @@
             </div>
           </div>
         </ng-template>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
+        <div class="flex flex-row flex-wrap items-center justify-end gap-2">
           <button mat-button color="primary"
                   [disabled]="deviceConnectivitySettingsForm.pristine"
                   (click)="discardDeviceConnectivitySettings()"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
index d928712547..9df874863b 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/home-settings.component.html
@@ -24,25 +24,25 @@
     </mat-card-header>
     <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>
     <mat-card-content style="padding-top: 16px;">
       <form [formGroup]="homeSettings" (ngSubmit)="save()">
         <fieldset [disabled]="isLoading$ | async">
-          <section class="tb-default-dashboard" fxFlex fxLayout="column">
-            <section fxFlex fxLayout="column" fxLayout.gt-sm="row">
+          <section class="tb-default-dashboard flex flex-1 flex-col">
+            <section class="flex flex-1 flex-col gt-sm:flex-row">
               <tb-dashboard-autocomplete
-                fxFlex
+                class="flex-1"
                 label="{{ 'dashboard.home-dashboard' | translate }}"
                 formControlName="dashboardId"
                 [dashboardsScope]="'tenant'"
                 [selectFirstDashboard]="false"
               ></tb-dashboard-autocomplete>
-              <mat-checkbox fxFlex formControlName="hideDashboardToolbar">
+              <mat-checkbox class="flex-1" formControlName="hideDashboardToolbar">
                 {{ 'dashboard.home-dashboard-hide-toolbar' | translate }}
               </mat-checkbox>
             </section>
           </section>
-          <div fxLayout="row" fxLayoutAlign="end center" style="width: 100%;" class="layout-wrap">
+          <div class="flex w-full flex-row flex-wrap items-center justify-end">
             <button mat-button mat-raised-button color="primary" [disabled]="(isLoading$ | async) || homeSettings.invalid || !homeSettings.dirty"
                     type="submit">{{'action.save' | translate}}
             </button>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
index c613234714..14a6358efb 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/mail-server.component.html
@@ -21,7 +21,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.outgoing-mail-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="outgoingMailSettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -49,7 +49,7 @@
 
           <mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="mailSettings.get('providerId').value === mailServerOauth2Provider.CUSTOM">
             <mat-expansion-panel-header>
-              <mat-panel-title fxLayoutAlign="start center" translate>
+              <mat-panel-title class="flex items-center justify-start" translate>
                 admin.connection-settings
               </mat-panel-title>
             </mat-expansion-panel-header>
@@ -62,15 +62,15 @@
                   </mat-option>
                 </mat-select>
               </mat-form-field>
-              <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="10px">
-                <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">
+              <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2.5">
+                <mat-form-field class="mat-block flex-full gt-sm:max-w-60%">
                   <mat-label translate>admin.smtp-host</mat-label>
                   <input matInput formControlName="smtpHost" placeholder="localhost" required/>
                   <mat-error *ngIf="mailSettings.get('smtpHost').hasError('required')">
                     {{ 'admin.smtp-host-required' | translate }}
                   </mat-error>
                 </mat-form-field>
-                <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">
+                <mat-form-field class="mat-block flex-full gt-sm:max-w-40%">
                   <mat-label translate>admin.smtp-port</mat-label>
                   <input matInput #smtpPortInput formControlName="smtpPort" placeholder="25" maxlength="5" required/>
                   <mat-hint align="end">{{smtpPortInput.value?.length || 0}}/5</mat-hint>
@@ -93,10 +93,10 @@
                   {{ 'admin.timeout-invalid' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-slide-toggle fxFlex formControlName="enableTls" style="display: block; padding-bottom: 22px;">
+              <mat-slide-toggle class="flex-1" formControlName="enableTls" style="display: block; padding-bottom: 22px;">
                 {{ 'admin.enable-tls' | translate }}
               </mat-slide-toggle>
-              <mat-form-field fxFlex class="mat-block" *ngIf="mailSettings.get('enableTls').value">
+              <mat-form-field class="mat-block flex-1" *ngIf="mailSettings.get('enableTls').value">
                 <mat-label translate>admin.tls-version</mat-label>
                 <mat-select formControlName="tlsVersion">
                   <mat-option *ngFor="let tlsVersion of tlsVersions" [value]="tlsVersion">
@@ -108,15 +108,15 @@
                 {{ 'admin.enable-proxy' | translate }}
               </mat-slide-toggle>
               <div *ngIf="mailSettings.get('enableProxy').value">
-                <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="8px">
-                  <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="60">
+                <div class="gt-sm:flex gt-sm:flex-row gt-sm:gap-2">
+                  <mat-form-field class="mat-block flex-full gt-sm:max-w-60%">
                     <mat-label translate>admin.proxy-host</mat-label>
                     <input matInput required formControlName="proxyHost">
                     <mat-error *ngIf="mailSettings.get('proxyHost').hasError('required')">
                       {{ 'admin.proxy-host-required' | translate }}
                     </mat-error>
                   </mat-form-field>
-                  <mat-form-field class="mat-block" fxFlex="100" fxFlex.gt-sm="40">
+                  <mat-form-field class="mat-block flex-full gt-sm:max-w-40%">
                     <mat-label translate>admin.proxy-port</mat-label>
                     <input matInput required formControlName="proxyPort" type="number" step="1" min="1" max="65535">
                     <mat-error *ngIf="mailSettings.get('proxyPort').hasError('required')">
@@ -129,12 +129,12 @@
                     </mat-error>
                   </mat-form-field>
                 </div>
-                <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                  <mat-form-field fxFlex class="mat-block">
+                <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                  <mat-form-field class="mat-block flex-1">
                     <mat-label translate>admin.proxy-user</mat-label>
                     <input matInput formControlName="proxyUser">
                   </mat-form-field>
-                  <mat-form-field fxFlex class="mat-block">
+                  <mat-form-field class="mat-block flex-1">
                     <mat-label translate>admin.proxy-password</mat-label>
                     <input matInput type="password" formControlName="proxyPassword" autocomplete="new-proxy-password">
                     <tb-toggle-password matSuffix></tb-toggle-password>
@@ -144,19 +144,19 @@
             </ng-template>
           </mat-expansion-panel>
 
-          <fieldset class="fields-group" fxLayout="column">
+          <fieldset class="fields-group flex flex-col">
             <legend class="group-title" translate>admin.oauth2.authentication</legend>
             <mat-form-field class="mat-block">
               <mat-label translate>common.username</mat-label>
               <input matInput formControlName="username" placeholder="{{ 'common.enter-username' | translate }}"
                      autocomplete="new-username"/>
             </mat-form-field>
-            <div fxLayoutAlign="space-between center" style="height: 50px; padding-bottom: 20px" [fxHide]="mailSettings.get('providerId').value === 'SENDGRID'">
+            <div class="flex items-center justify-between" style="height: 50px; padding-bottom: 20px" [class.!hidden]="mailSettings.get('providerId').value === 'SENDGRID'">
               <mat-button-toggle-group class="tb-notification-unread-toggle-group"
                                        style="width: 250px;"
                                        formControlName="enableOauth2">
-                <mat-button-toggle fxFlex [value]=false>{{ 'admin.oauth2.basic' | translate }}</mat-button-toggle>
-                <mat-button-toggle fxFlex [value]=true>{{ 'admin.oauth2.oauth2' | translate }}</mat-button-toggle>
+                <mat-button-toggle class="flex-1" [value]=false>{{ 'admin.oauth2.basic' | translate }}</mat-button-toggle>
+                <mat-button-toggle class="flex-1" [value]=true>{{ 'admin.oauth2.oauth2' | translate }}</mat-button-toggle>
               </mat-button-toggle-group>
               <div class="details-buttons" *ngIf="helpLink && mailSettings.get('enableOauth2').value">
                 <div [tb-help]="helpLink"></div>
@@ -174,8 +174,8 @@
               </mat-form-field>
             </section>
             <section *ngIf="mailSettings.get('enableOauth2').value">
-              <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                <mat-form-field fxFlex class="mat-block">
+              <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.oauth2.client-id</mat-label>
                   <input matInput formControlName="clientId" required>
                   <mat-error *ngIf="mailSettings.get('clientId').hasError('required')">
@@ -186,7 +186,7 @@
                   </mat-error>
                 </mat-form-field>
 
-                <mat-form-field fxFlex class="mat-block">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.oauth2.client-secret</mat-label>
                   <input matInput formControlName="clientSecret" required>
                   <mat-error *ngIf="mailSettings.get('clientSecret').hasError('required')">
@@ -198,7 +198,7 @@
                 </mat-form-field>
               </div>
 
-              <mat-form-field fxFlex class="mat-block" *ngIf="mailSettings.get('providerId').value === mailServerOauth2Provider.OFFICE_365">
+              <mat-form-field class="mat-block flex-1" *ngIf="mailSettings.get('providerId').value === mailServerOauth2Provider.OFFICE_365">
                 <mat-label translate>admin.oauth2.microsoft-tenant-id</mat-label>
                 <input matInput formControlName="providerTenantId" required>
                 <mat-error *ngIf="mailSettings.get('providerTenantId').hasError('required')">
@@ -207,13 +207,13 @@
               </mat-form-field>
               <mat-expansion-panel class="mat-elevation-z0" [expanded]="mailSettings.get('providerId').value === mailServerOauth2Provider.CUSTOM">
                 <mat-expansion-panel-header>
-                  <mat-panel-description fxLayoutAlign="end" translate>
+                  <mat-panel-description class="flex items-stretch justify-end" translate>
                     tenant-profile.advanced-settings
                   </mat-panel-description>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                    <mat-form-field fxFlex class="mat-block">
+                  <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.oauth2.authorization-uri</mat-label>
                       <input matInput formControlName="authUri" required>
                       <button mat-icon-button matSuffix
@@ -229,7 +229,7 @@
                       </mat-error>
                     </mat-form-field>
 
-                    <mat-form-field fxFlex class="mat-block">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.oauth2.token-uri</mat-label>
                       <input matInput formControlName="tokenUri" required>
                       <button mat-icon-button matSuffix
@@ -245,7 +245,7 @@
                       </mat-error>
                     </mat-form-field>
                   </div>
-                  <mat-form-field fxFlex class="mat-block">
+                  <mat-form-field class="mat-block flex-1">
                     <mat-label translate>admin.oauth2.scope</mat-label>
                     <mat-chip-grid #scopeList>
                       <mat-chip-row *ngFor="let scope of mailSettings.get('scope').value; let k = index; trackBy: trackByParams"
@@ -265,12 +265,12 @@
                 </ng-template>
               </mat-expansion-panel>
 
-              <fieldset class="fields-group" fxLayout="column">
+              <fieldset class="fields-group flex flex-col">
                 <legend class="group-title" translate>admin.oauth2.redirect-uri</legend>
-                <div fxFlex fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
-                  <div fxLayout="column" fxFlex.sm="60" fxFlex.gt-sm="50" [formGroup]="domainForm">
-                    <div fxLayout="row" fxLayout.xs="column" fxLayout.md="column" fxLayoutGap="8px" fxLayoutGap.md="0px">
-                      <mat-form-field fxFlex="30" fxFlex.md fxFlex.xs class="mat-block">
+                <div class="flex flex-1 flex-row gap-2 xs:flex-col">
+                  <div class="flex flex-col sm:max-w-60% sm:flex-full gt-sm:max-w-50% gt-sm:flex-full" [formGroup]="domainForm">
+                    <div class="flex flex-row gap-2 xs:flex-col md:flex-col md:gap-0">
+                      <mat-form-field class="mat-block max-w-30% flex-full xs:max-w-full xs:flex-1 md:max-w-full md:flex-1">
                         <mat-label translate>admin.oauth2.protocol</mat-label>
                         <mat-select formControlName="scheme">
                           <mat-option *ngFor="let protocol of protocols" [value]="protocol">
@@ -278,7 +278,7 @@
                           </mat-option>
                         </mat-select>
                       </mat-form-field>
-                      <mat-form-field fxFlex class="mat-block">
+                      <mat-form-field class="mat-block flex-1">
                         <mat-label translate>admin.domain-name</mat-label>
                         <input matInput formControlName="name" required>
                         <mat-error *ngIf="domainForm.get('name').hasError('pattern')">
@@ -294,8 +294,8 @@
                     </mat-error>
                   </div>
 
-                  <div fxFlex fxLayout="column">
-                    <mat-form-field fxFlex class="mat-block">
+                  <div class="flex flex-1 flex-col">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.oauth2.redirect-uri-template</mat-label>
                       <input matInput formControlName="redirectUri" readonly>
                       <tb-copy-button
@@ -311,10 +311,7 @@
                 </div>
               </fieldset>
             </section>
-            <section fxLayout="row"
-                     fxLayout.xs="column"
-                     fxLayoutAlign.gt-xs="space-between center"
-                     style="padding-bottom: 12px"
+            <section class="flex flex-row pb-3 xs:flex-col gt-xs:items-center gt-xs:justify-between"
                      *ngIf="mailSettings.get('enableOauth2').value">
               <div>
                 <span class="token-status" translate>admin.oauth2.access-token-status</span>
@@ -329,7 +326,7 @@
               </button>
             </section>
           </fieldset>
-          <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
+          <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch">
             <button mat-raised-button type="button"
                     [disabled]="(isLoading$ | async) || mailSettings.get('enableOauth2').value ? mailSettings.invalid || domainForm.invalid || (mailSettings.dirty || domainForm.dirty) : mailSettings.invalid"
                     (click)="sendTestMail()">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
index dcce273be2..6fa0f29556 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client-dialog.component.html
@@ -18,7 +18,7 @@
 <form (ngSubmit)="save()" style="width: 850px;max-height: 100vh">
   <mat-toolbar color="primary">
     <h2>{{ 'admin.oauth2.add-client' | translate }}</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div [tb-help]="helpLinkId()"></div>
     <button mat-icon-button
             (click)="cancel()"
@@ -32,7 +32,7 @@
   <div mat-dialog-content style="padding: 0">
     <tb-client createNewDialog #clientComponent></tb-client>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             cdkFocusInitial
diff --git a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
index 060c4177e8..a5404d0933 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/oauth2/clients/client.component.html
@@ -72,7 +72,7 @@
   </div>
   <mat-expansion-panel class="configuration-panel mat-elevation-z0" [expanded]="advancedExpanded">
     <mat-expansion-panel-header>
-      <mat-panel-title fxLayoutAlign="start center" translate>
+      <mat-panel-title class="flex items-center justify-start" translate>
         admin.oauth2.advanced-settings
       </mat-panel-title>
     </mat-expansion-panel-header>
@@ -235,7 +235,7 @@
                   </mat-select>
                 </mat-form-field>
                 <mat-form-field class="flex"
-                                [fxShow]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
+                                [class.!hidden]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value !== 'CUSTOM'">
                   <mat-label translate>admin.oauth2.tenant-name-pattern</mat-label>
                   <input matInput formControlName="tenantNamePattern"
                          [required]="entityForm.get('mapperConfig.basic.tenantNameStrategy').value === 'CUSTOM'">
diff --git a/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html b/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
index ff5a07dbb6..f25cd1c857 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/queue/queue.component.html
@@ -15,31 +15,31 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'queue.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onQueueIdCopied($event)"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>queue.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column" [formGroup]="entityForm">
+<div class="mat-padding flex flex-col" [formGroup]="entityForm">
   <tb-queue-form
     [newQueue]="isAdd"
     [systemQueue]="true"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html
index 441a311021..0389d32aab 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/resource/resources-library.component.html
@@ -15,37 +15,37 @@
     limitations under the License.
 
 -->
-<div class="tb-details-buttons" fxLayout.xs="column">
+<div class="tb-details-buttons xs:flex xs:flex-col">
   <button mat-raised-button color="primary"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'open')"
-          [fxShow]="!isEdit && !isDetailsPage">
+          [class.!hidden]="isEdit || isDetailsPage">
     {{'common.open-details-page' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'downloadResource')"
-          [fxShow]="!isEdit">
+          [class.!hidden]="isEdit">
     {{ 'resource.download' | translate }}
   </button>
-  <button mat-raised-button color="primary" fxFlex.xs
+  <button mat-raised-button color="primary" class="xs:flex-1"
           [disabled]="(isLoading$ | async)"
           (click)="onEntityAction($event, 'delete')"
-          [fxShow]="!hideDelete() && !isEdit">
+          [class.!hidden]="hideDelete() || isEdit">
     {{ 'resource.delete' | translate }}
   </button>
-  <div fxLayout="row" fxLayout.xs="column">
+  <div class="flex flex-row xs:flex-col">
     <button mat-raised-button
             ngxClipboard
             (cbOnSuccess)="onResourceIdCopied()"
             [cbContent]="entity?.id?.id"
-            [fxShow]="!isEdit">
+            [class.!hidden]="isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>resource.copyId</span>
     </button>
   </div>
 </div>
-<div class="mat-padding" fxLayout="column">
+<div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
       <mat-form-field class="mat-block">
@@ -80,8 +80,8 @@
         [existingFileName]="entityForm.get('fileName')?.value"
         (fileNameChanged)="entityForm?.get('fileName').patchValue($event)">
       </tb-file-input>
-      <div *ngIf="!isAdd && !(isEdit && entityForm.get('resourceType').value === resourceType.JS_MODULE)" fxLayout="row" fxLayoutGap.gt-md="8px" fxLayoutGap.sm="8px" fxLayout.xs="column" fxLayout.md="column">
-        <mat-form-field fxFlex>
+      <div *ngIf="!isAdd && !(isEdit && entityForm.get('resourceType').value === resourceType.JS_MODULE)" class="flex flex-row xs:flex-col sm:gap-2 md:flex-col gt-md:gap-2">
+        <mat-form-field class="flex-1">
           <mat-label translate>resource.file-name</mat-label>
           <input matInput formControlName="fileName" type="text">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
index 0b9df7c5ae..bdb422f856 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/security-settings.component.html
@@ -20,7 +20,7 @@
     <mat-card-title>
       <span class="mat-headline-5" translate>admin.security-settings</span>
     </mat-card-title>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="securitySettings"></div>
   </mat-card-header>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -89,8 +89,8 @@
         <fieldset class="fields-group">
           <legend class="group-title" translate>admin.password-policy</legend>
           <section formGroupName="passwordPolicy">
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-password-length</mat-label>
                 <input matInput type="number"
                        formControlName="minimumLength"
@@ -108,7 +108,7 @@
                   {{ 'admin.minimum-password-length-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block" subscriptSizing="dynamic">
+              <mat-form-field class="mat-block flex-1" subscriptSizing="dynamic">
                 <mat-label translate>admin.maximum-password-length</mat-label>
                 <input matInput type="number" formControlName="maximumLength" step="1" min="6"/>
                 <mat-hint></mat-hint>
@@ -120,8 +120,8 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-uppercase-letters</mat-label>
                 <input matInput type="number"
                        formControlName="minimumUppercaseLetters"
@@ -132,7 +132,7 @@
                   {{ 'admin.minimum-uppercase-letters-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-lowercase-letters</mat-label>
                 <input matInput type="number"
                        formControlName="minimumLowercaseLetters"
@@ -144,8 +144,8 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-digits</mat-label>
                 <input matInput type="number"
                        formControlName="minimumDigits"
@@ -155,7 +155,7 @@
                   {{ 'admin.minimum-digits-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.minimum-special-characters</mat-label>
                 <input matInput type="number"
                        formControlName="minimumSpecialCharacters"
@@ -167,8 +167,8 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-form-field fxFlex class="mat-block">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.password-expiration-period-days</mat-label>
                 <input matInput type="number"
                        formControlName="passwordExpirationPeriodDays"
@@ -179,7 +179,7 @@
                   {{ 'admin.password-expiration-period-days-range' | translate }}
                 </mat-error>
               </mat-form-field>
-              <mat-form-field fxFlex class="mat-block">
+              <mat-form-field class="mat-block flex-1">
                 <mat-label translate>admin.password-reuse-frequency-days</mat-label>
                 <input matInput type="number"
                        formControlName="passwordReuseFrequencyDays"
@@ -191,11 +191,11 @@
                 </mat-error>
               </mat-form-field>
             </div>
-            <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-              <mat-checkbox fxFlex formControlName="allowWhitespaces" style="margin-bottom: 16px">
+            <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+              <mat-checkbox class="flex-1" formControlName="allowWhitespaces" style="margin-bottom: 16px">
                 <mat-label translate>admin.allow-whitespace</mat-label>
               </mat-checkbox>
-              <mat-checkbox fxFlex formControlName="forceUserToResetPasswordIfNotValid" style="margin-bottom: 16px">
+              <mat-checkbox class="flex-1" formControlName="forceUserToResetPasswordIfNotValid" style="margin-bottom: 16px">
                 <mat-label tb-hint-tooltip-icon="{{'admin.force-reset-password-if-no-valid-hint' | translate}}">
                   {{'admin.force-reset-password-if-no-valid' | translate}}
                 </mat-label>
@@ -203,7 +203,7 @@
             </div>
           </section>
         </fieldset>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap" style="margin-top: 16px">
+        <div class="flex flex-row flex-wrap items-center justify-end gap-2" style="margin-top: 16px">
           <button mat-button color="primary"
                   [disabled]="securitySettingsFormGroup.pristine"
                   (click)="discardSetting()"
@@ -222,21 +222,21 @@
     <mat-card-title>
       <span class="mat-headline-5" translate>admin.jwt.security-settings</span>
     </mat-card-title>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="jwtSecuritySettings"></div>
   </mat-card-header>
   <mat-card-content style="padding-top: 16px;">
     <form [formGroup]="jwtSecuritySettingsFormGroup" (ngSubmit)="saveJwtSettings()" autocomplete="off">
-      <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="8px">
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
-          <mat-form-field fxFlex class="mat-block">
+      <fieldset [disabled]="isLoading$ | async" class="flex flex-col gap-2">
+        <div class="flex flex-row gap-2 xs:flex-col">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.issuer-name</mat-label>
             <input matInput required formControlName="tokenIssuer"/>
             <mat-error *ngIf="jwtSecuritySettingsFormGroup.get('tokenIssuer').hasError('required')">
               {{ 'admin.jwt.issuer-name-required' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.signings-key</mat-label>
             <input matInput (focus)="markAsTouched()" required formControlName="tokenSigningKey"/>
             <button type="button"
@@ -259,8 +259,8 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div fxLayout="row" fxLayout.xs="column" fxLayoutGap="8px">
-          <mat-form-field fxFlex class="mat-block">
+        <div class="flex flex-row gap-2 xs:flex-col">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.expiration-time</mat-label>
             <input matInput type="number" required
                    formControlName="tokenExpirationTime"
@@ -276,7 +276,7 @@
               {{ 'admin.jwt.expiration-time-min' | translate }}
             </mat-error>
           </mat-form-field>
-          <mat-form-field fxFlex class="mat-block">
+          <mat-form-field class="mat-block flex-1">
             <mat-label translate>admin.jwt.refresh-expiration-time</mat-label>
             <input matInput type="number" required
                    formControlName="refreshTokenExpTime"
@@ -296,7 +296,7 @@
             </mat-error>
           </mat-form-field>
         </div>
-        <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px" class="layout-wrap">
+        <div class="flex flex-row flex-wrap items-center justify-end gap-2">
           <button mat-button color="primary"
                   [disabled]="jwtSecuritySettingsFormGroup.pristine"
                   (click)="discardJwtSetting()"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
index 891f84d08d..26b3ad6a67 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
@@ -18,7 +18,7 @@
 <form [formGroup]="sendTestSmsFormGroup" style="min-width: 500px; position: relative;">
   <mat-toolbar color="primary">
     <h2 translate>admin.send-test-sms</h2>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <button mat-icon-button
             (click)="close()"
             type="button">
@@ -47,7 +47,7 @@
       </mat-form-field>
     </fieldset>
   </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
+  <div mat-dialog-actions class="flex items-center justify-end">
     <button mat-button color="primary"
             type="button"
             [disabled]="(isLoading$ | async)"
diff --git a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
index ba8e24c302..b69bc5a377 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/sms-provider.component.html
@@ -20,7 +20,7 @@
     <mat-card-title>
       <span class="mat-headline-5" translate>admin.sms-provider-settings</span>
     </mat-card-title>
-    <span fxFlex></span>
+    <span class="flex-1"></span>
     <div tb-help="smsProviderSettings"></div>
   </mat-card-header>
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -32,7 +32,7 @@
         required
         formControlName="configuration">
       </tb-sms-provider-configuration>
-      <div fxLayout="row" fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end" fxLayoutGap="16px">
+      <div class="flex flex-row items-center justify-end gap-4 xs:flex-col xs:items-stretch">
         <button mat-raised-button type="button"
                 [disabled]="(isLoading$ | async) || smsProvider.invalid" (click)="sendTestSms()">
           {{'admin.send-test-sms' | translate}}
@@ -50,7 +50,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.slack-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="slackSettings"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -66,7 +66,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.mobile-settings</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <!--    <div tb-help="mobileSettings"></div>-->
     </mat-card-header>
     <mat-card-content formGroupName="MOBILE_APP" *ngIf="isSysAdmin()">
@@ -79,7 +79,7 @@
                      (fileNameChanged)="notificationSettingsForm?.get('deliveryMethodsConfigs.MOBILE_APP.firebaseServiceAccountCredentialsFileName').patchValue($event)">
       </tb-file-input>
     </mat-card-content>
-    <mat-card-actions fxLayoutAlign="end center" fxLayout.xs="column" fxLayoutAlign.xs="end">
+    <mat-card-actions  class="flex items-center justify-end xs:flex-col xs:items-stretch">
       <button mat-button mat-raised-button color="primary"
               [disabled]="(isLoading$ | async) || notificationSettingsForm.invalid || !notificationSettingsForm.dirty"
               type="submit">{{'action.save' | translate}}
diff --git a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
index d2e6419479..d62ad94428 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/two-factor-auth-settings.component.html
@@ -21,7 +21,7 @@
       <mat-card-title>
         <span class="mat-headline-5" translate>admin.2fa.2fa</span>
       </mat-card-title>
-      <span fxFlex></span>
+      <span class="flex-1"></span>
       <div tb-help="twoFactorAuthentication"></div>
     </mat-card-header>
     <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
@@ -36,7 +36,7 @@
               <ng-container *ngFor="let provider of providersForm.controls; let i = index; let $last = last; trackBy: trackByElement">
                 <mat-expansion-panel class="provider" [formGroupName]="i">
                   <mat-expansion-panel-header>
-                    <mat-panel-title fxLayoutAlign="start center">
+                    <mat-panel-title class="flex items-center justify-start">
                       <mat-slide-toggle
                         (mousedown)="toggleExtensionPanel($event, i, provider.get('enable').value)"
                         formControlName="enable">
@@ -48,7 +48,7 @@
                   <ng-template matExpansionPanelContent>
                     <ng-container [ngSwitch]="provider.get('providerType').value">
                       <ng-container *ngSwitchCase="twoFactorAuthProviderType.TOTP">
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.issuer-name</mat-label>
                           <input matInput formControlName="issuerName" required>
                           <mat-error *ngIf="provider.get('issuerName').hasError('required') ||
@@ -58,8 +58,8 @@
                         </mat-form-field>
                       </ng-container>
                       <div *ngSwitchCase="twoFactorAuthProviderType.SMS"
-                           fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                        <mat-form-field fxFlex class="mat-block">
+                           class="flex flex-row xs:flex-col gt-xs:gap-2">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.verification-message-template</mat-label>
                           <input matInput formControlName="smsVerificationMessageTemplate" required>
                           <mat-error *ngIf="provider.get('smsVerificationMessageTemplate').hasError('required')">
@@ -70,7 +70,7 @@
                           </mat-error>
                         </mat-form-field>
 
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
                           <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
                           <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
@@ -83,7 +83,7 @@
                         </mat-form-field>
                       </div>
                       <div *ngSwitchCase="twoFactorAuthProviderType.EMAIL">
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.verification-code-lifetime</mat-label>
                           <input matInput formControlName="verificationCodeLifetime" type="number" step="1" min="1" required>
                           <mat-error *ngIf="provider.get('verificationCodeLifetime').hasError('required')">
@@ -96,7 +96,7 @@
                         </mat-form-field>
                       </div>
                       <div *ngSwitchCase="twoFactorAuthProviderType.BACKUP_CODE">
-                        <mat-form-field fxFlex class="mat-block">
+                        <mat-form-field class="mat-block flex-1">
                           <mat-label translate>admin.2fa.number-of-codes</mat-label>
                           <input matInput formControlName="codesQuantity" type="number" step="1" min="1" required>
                           <mat-error *ngIf="provider.get('codesQuantity').hasError('required')">
@@ -116,8 +116,8 @@
             </fieldset>
             <fieldset class="fields-group">
               <legend class="group-title" translate>admin.2fa.verification-limitations</legend>
-              <div class="input-row" fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                <mat-form-field fxFlex class="mat-block">
+              <div class="input-row flex flex-row xs:flex-col gt-xs:gap-2">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.2fa.total-allowed-time-for-verification</mat-label>
                   <input matInput required formControlName="totalAllowedTimeForVerification" type="number" step="1" min="60">
                   <mat-error *ngIf="twoFaFormGroup.get('totalAllowedTimeForVerification').hasError('required')">
@@ -128,7 +128,7 @@
                     {{ 'admin.2fa.total-allowed-time-for-verification-pattern' | translate }}
                   </mat-error>
                 </mat-form-field>
-                <mat-form-field fxFlex class="mat-block">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.2fa.retry-verification-code-period</mat-label>
                   <input matInput required formControlName="minVerificationCodeSendPeriod" type="number" step="1" min="5">
                   <mat-error *ngIf="twoFaFormGroup.get('minVerificationCodeSendPeriod').hasError('required')">
@@ -139,7 +139,7 @@
                     {{ 'admin.2fa.retry-verification-code-period-pattern' | translate }}
                   </mat-error>
                 </mat-form-field>
-                <mat-form-field fxFlex class="mat-block">
+                <mat-form-field class="mat-block flex-1">
                   <mat-label translate>admin.2fa.max-verification-failures-before-user-lockout</mat-label>
                   <input matInput formControlName="maxVerificationFailuresBeforeUserLockout" type="number" step="1" min="0" max="65535">
                   <mat-error *ngIf="twoFaFormGroup.get('maxVerificationFailuresBeforeUserLockout').hasError('pattern')
@@ -152,7 +152,7 @@
 
               <mat-expansion-panel class="provider">
                 <mat-expansion-panel-header>
-                  <mat-panel-title fxLayoutAlign="start center">
+                  <mat-panel-title class="flex items-center justify-start">
                     <mat-slide-toggle (mousedown)="toggleExtensionPanel($event, providersForm.length, twoFaFormGroup.get('verificationCodeCheckRateLimitEnable').value)"
                                       formControlName="verificationCodeCheckRateLimitEnable">
                     </mat-slide-toggle>
@@ -160,8 +160,8 @@
                   </mat-panel-title>
                 </mat-expansion-panel-header>
                 <ng-template matExpansionPanelContent>
-                  <div fxLayout="row" fxLayout.xs="column" fxLayoutGap.gt-xs="8px">
-                    <mat-form-field fxFlex class="mat-block">
+                  <div class="flex flex-row xs:flex-col gt-xs:gap-2">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.2fa.number-of-checking-attempts</mat-label>
                       <input matInput formControlName="verificationCodeCheckRateLimitNumber" required type="number" step="1" min="1">
                       <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitNumber').hasError('required')">
@@ -172,7 +172,7 @@
                         {{ 'admin.2fa.number-of-checking-attempts-pattern' | translate }}
                       </mat-error>
                     </mat-form-field>
-                    <mat-form-field fxFlex class="mat-block">
+                    <mat-form-field class="mat-block flex-1">
                       <mat-label translate>admin.2fa.within-time</mat-label>
                       <input matInput formControlName="verificationCodeCheckRateLimitTime" required type="number" step="1" min="1">
                       <mat-error *ngIf="twoFaFormGroup.get('verificationCodeCheckRateLimitTime').hasError('required')">
@@ -188,7 +188,7 @@
               </mat-expansion-panel>
             </fieldset>
           </div>
-          <div fxLayout="row" fxLayoutAlign="end center" fxLayoutGap="8px">
+          <div class="flex flex-row items-center justify-end gap-2">
             <button mat-button mat-raised-button color="primary"
                     [disabled]="(isLoading$ | async) || twoFaFormGroup.invalid || !twoFaFormGroup.dirty"
                     type="submit">