diff --git a/application/src/main/data/json/system/widget_bundles/gateway_widgets.json b/application/src/main/data/json/system/widget_bundles/gateway_widgets.json
index 1f7278892b..b1abb45b62 100644
--- a/application/src/main/data/json/system/widget_bundles/gateway_widgets.json
+++ b/application/src/main/data/json/system/widget_bundles/gateway_widgets.json
@@ -12,11 +12,10 @@
     "gateway_widgets.attributes_card",
     "gateway_widgets.gateway_configuration2",
     "gateway_widgets.config_form_latest",
-    "gateway_widgets.gateway_events",
     "gateway_widgets.gateway_connector",
     "gateway_widgets.gateway_logs",
     "gateway_widgets.gateway_statistics",
     "gateway_widgets.gateway_general_statistics",
     "gateway_widgets.service_rpc"
   ]
-}
\ No newline at end of file
+}
diff --git a/ui-ngx/src/app/core/http/device.service.ts b/ui-ngx/src/app/core/http/device.service.ts
index 137421e93d..801bdeb8c3 100644
--- a/ui-ngx/src/app/core/http/device.service.ts
+++ b/ui-ngx/src/app/core/http/device.service.ts
@@ -27,7 +27,8 @@ import {
   DeviceCredentials,
   DeviceInfo,
   DeviceInfoQuery,
-  DeviceSearchQuery, PublishLaunchCommand,
+  DeviceSearchQuery,
+  PublishLaunchCommand,
   PublishTelemetryCommand
 } from '@app/shared/models/device.models';
 import { EntitySubtype } from '@app/shared/models/entity-type.models';
diff --git a/ui-ngx/src/app/core/utils.ts b/ui-ngx/src/app/core/utils.ts
index 200f8963c1..b67609c47e 100644
--- a/ui-ngx/src/app/core/utils.ts
+++ b/ui-ngx/src/app/core/utils.ts
@@ -812,3 +812,8 @@ export const getOS = (): string => {
 
   return os;
 };
+
+
+export const camelCase = (str: string): string => {
+  return _.camelCase(str);
+};
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html
index 63f121c22d..f1a0430fcf 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div mat-dialog-content tb-toast fxLayout="column" toastTarget="dockerCommandDialogContent" style="padding-top: 5px">
+<div mat-dialog-content fxLayout="column" style="padding: 0">
   <div fxLayout="row" fxLayoutAlign="space-between center">
     <span class="tb-no-data-text">{{ 'gateway.docker-label' | translate }}</span>
     <div fxFlexAlign="end" class="tb-help" [tb-help]="helpLink"></div>
@@ -29,14 +29,9 @@
         Windows
       </ng-template>
       <ng-template matTabContent>
-        <div class="tb-form-panel no-padding no-border tb-tab-body">
-          <tb-markdown usePlainMarkdown containerClass="start-code" data="
-                    ```bash
-                    {{windowsCode}}
-                    {:copy-code}
-                    ```
-                "></tb-markdown>
-        </div>
+        <ng-container
+          *ngTemplateOutlet="commandsExample; context: {command: commands?.mqtt?.windows }">
+        </ng-container>
       </ng-template>
     </mat-tab>
     <mat-tab>
@@ -45,14 +40,9 @@
         Linux
       </ng-template>
       <ng-template matTabContent>
-        <div class="tb-form-panel no-padding no-border tb-tab-body">
-          <tb-markdown usePlainMarkdown containerClass="start-code" data="
-                    ```bash
-                    {{linuxCode}}
-                    {:copy-code}
-                    ```
-                "></tb-markdown>
-        </div>
+        <ng-container
+          *ngTemplateOutlet="commandsExample; context: {command: commands?.mqtt?.linux }">
+        </ng-container>
       </ng-template>
     </mat-tab>
     <mat-tab>
@@ -61,15 +51,22 @@
         MacOS
       </ng-template>
       <ng-template matTabContent>
-        <div class="tb-form-panel no-padding no-border tb-tab-body">
-          <tb-markdown usePlainMarkdown containerClass="start-code" data="
-                    ```bash
-                    {{linuxCode}}
-                    {:copy-code}
-                    ```
-                "></tb-markdown>
-        </div>
+        <ng-container
+          *ngTemplateOutlet="commandsExample; context: {command: commands?.mqtt?.linux }">
+        </ng-container>
       </ng-template>
     </mat-tab>
   </mat-tab-group>
 </div>
+
+<ng-template #commandsExample let-command="command">
+  <div class="tb-form-panel no-padding no-border tb-tab-body">
+    <tb-markdown usePlainMarkdown containerClass="start-code"
+       data="
+          ```bash
+          {{ command }}
+          {:copy-code}
+          ```
+      "></tb-markdown>
+  </div>
+</ng-template>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.ts
index 0a20292058..d5516dd59b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/device-gateway-command.component.ts
@@ -15,15 +15,10 @@
 ///
 
 import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
-import { Router } from '@angular/router';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { TranslateService } from '@ngx-translate/core';
-import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { DeviceService } from '@core/http/device.service';
 import { helpBaseUrl } from '@shared/models/constants';
 import { getOS } from '@core/utils';
-
+import { PublishLaunchCommand } from '@shared/models/device.models';
 
 @Component({
   selector: 'tb-gateway-command',
@@ -39,17 +34,13 @@ export class DeviceGatewayCommandComponent implements OnInit {
   @Input()
   deviceId: string;
 
-  linuxCode: string;
-  windowsCode: string;
+  commands: PublishLaunchCommand;
 
   helpLink: string = helpBaseUrl + '/docs/iot-gateway/install/docker-installation/';
 
   tabIndex = 0;
 
-  constructor(protected router: Router,
-              protected store: Store<AppState>,
-              private translate: TranslateService,
-              private cd: ChangeDetectorRef,
+  constructor(private cd: ChangeDetectorRef,
               private deviceService: DeviceService) {
   }
 
@@ -57,7 +48,7 @@ export class DeviceGatewayCommandComponent implements OnInit {
   ngOnInit(): void {
     if (this.deviceId) {
       this.deviceService.getDevicePublishLaunchCommands(this.deviceId).subscribe(commands => {
-        this.createRunCode(commands.mqtt);
+        this.commands = commands;
         this.cd.detectChanges();
       });
     }
@@ -78,21 +69,4 @@ export class DeviceGatewayCommandComponent implements OnInit {
         this.tabIndex = 1;
     }
   }
-
-  createRunCode(commands) {
-    this.linuxCode = commands.linux;
-    this.windowsCode = commands.windows;
-  }
-
-  onDockerCodeCopied() {
-    this.store.dispatch(new ActionNotificationShow(
-      {
-        message: this.translate.instant('gateway.command-copied-message'),
-        type: 'success',
-        target: 'dockerCommandDialogContent',
-        duration: 1200,
-        verticalPosition: 'bottom',
-        horizontalPosition: 'left'
-      }));
-  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
index cfa03bd97a..6f8c675e6f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
@@ -15,819 +15,715 @@
     limitations under the License.
 
 -->
-<form [formGroup]="gatewayConfigGroup" style="height: 100%" fxLayout="column">
-  <mat-toolbar color="primary">
-    <h2 translate>gateway.gateway-configuration</h2>
-    <span fxFlex></span>
-    <button mat-icon-button
-            type="button"
-            (click)="cancel()"
-            *ngIf="dialogRef">
-      <mat-icon class="material-icons" style="color:#000;">close</mat-icon>
-    </button>
-  </mat-toolbar>
-  <mat-tab-group style="max-height: calc(100% - 117px); flex-grow: 1">
-    <mat-tab label="{{'gateway.thingsboard-general' | translate}}">
-      <div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding">
-          <div style="padding-top: 20px" class="tb-form-panel">
-            <div fxLayout="row wrap">
-              <mat-slide-toggle color="primary" fxFlex="100" formControlName="remoteConfiguration">
-                {{ 'gateway.remote-configuration'  | translate }}
-                <mat-icon class="material-icons-outlined suffix-icon slider-icon " aria-hidden="false" aria-label="help-icon"
-                          style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.remote-configuration' | translate }}">info
-                </mat-icon>
-              </mat-slide-toggle>
-              <mat-slide-toggle color="primary" fxFlex="100" formControlName="remoteShell">
-                {{ 'gateway.remote-shell' | translate }}
-                <mat-icon class="material-icons-outlined suffix-icon slider-icon " aria-hidden="false" aria-label="help-icon"
-                          style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.remote-shell' | translate }}">info
-                </mat-icon>
-              </mat-slide-toggle>
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                <mat-label translate>gateway.thingsboard-host</mat-label>
-                <input matInput formControlName="host"/>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.host' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.host').hasError('required')">
-                  {{ 'gateway.thingsboard-host-required' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                <mat-label translate>gateway.thingsboard-port</mat-label>
-                <input matInput formControlName="port" type="number" min="0"/>
-                <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('required')">
-                  {{'gateway.thingsboard-port-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('min')">
-                  {{'gateway.thingsboard-port-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('max')">
-                  {{'gateway.thingsboard-port-max' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('pattern')">
-                  {{'gateway.thingsboard-port-pattern' | translate }}
-                </mat-error>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                          aria-label="help-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.port' | translate }}">info_outlined
-                </mat-icon>
-              </mat-form-field>
-
-            </div>
-          </div>
-          <div  class="tb-form-panel">
-            <div translate class="expansion-panel-header tb-form-panel-title tb-form-panel-title">security.security</div>
-            <div fxLayout="column" formGroupName="security">
-              <tb-toggle-header fxFlex="100" class="security-toggle-group"
-                                [value]="gatewayConfigGroup.get('thingsboard.security.type').value"
-                                name="securityTypeToggle" (valueChange)="updateSecurityValidators($event)"
-                                useSelectOnMdLg="false" ignoreMdLgSize="true">
-                <tb-toggle-option *ngFor="let securityType of securityTypes | keyvalue"
-                                  [value]="securityType.key">{{ securityType.value | translate }}</tb-toggle-option>
-              </tb-toggle-header>
-              <div fxLayout="row wrap">
-                <mat-form-field appearance="outline"
-                  *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value.toLowerCase().includes('accesstoken')"
-                  fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>security.access-token</mat-label>
-                  <input matInput formControlName="accessToken"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.accessToken').hasError('required')">
-                    {{'security.access-token-required' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.token' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>security.clientId</mat-label>
-                  <input matInput formControlName="clientId"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.clientId').hasError('required')">
-                    {{'security.clientId-required' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.client-id' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>security.username</mat-label>
-                  <input matInput formControlName="username"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.username').hasError('required')">
-                    {{'security.username-required' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.username' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>security.password</mat-label>
-                  <input matInput formControlName="password"/>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.password' | translate }}">info_outlined
-                  </mat-icon>
-
-                </mat-form-field>
-                <tb-error style="margin-top: -12px; display: block;" fxFlex="100"
-                          [error]="gatewayConfigGroup.get('thingsboard.security').hasError('atLeastOne') ?
-              ('device.client-id-or-user-name-necessary' | translate) : ''"></tb-error>
-                <tb-file-input
-                  fxFlex="100"
-                  hint="{{'gateway.hints.ca-cert' | translate}}"
-                  *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value.toLowerCase().includes('tls')"
-                  formControlName="caCert"
-                  label="{{'security.ca-cert' | translate}}"
-                  [allowedExtensions]="'pem, cert, key'"
-                  [accept]="'.pem, application/pem,.cert, application/cert, .key,application/key'"
-                  dropLabel="{{'gateway.drop-file' | translate}}">
-                </tb-file-input>
-                <tb-file-input
-                  fxFlex="100"
-                  hint="{{'gateway.hints.cert' | translate}}"
-                  *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'tlsPrivateKey'"
-                  formControlName="cert"
-                  label="{{'security.cert' | translate}}"
-                  [allowedExtensions]="'pem, cert, key'"
-                  [accept]="'.pem, application/pem,.cert, application/cert, .key,application/key'"
-                  dropLabel="{{'gateway.drop-file' | translate}}">
-                </tb-file-input>
-                <tb-file-input
-                  fxFlex="100"
-                  hint="{{'gateway.hints.private-key' | translate}}"
-                  *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'tlsPrivateKey'"
-                  formControlName="privateKey"
-                  label="{{'security.private-key' | translate}}"
-                  [allowedExtensions]="'pem, cert, key'"
-                  [accept]="'.pem, application/pem,.cert, application/cert, .key,application/key'"
-                  dropLabel="{{'gateway.drop-file' | translate}}">
-                </tb-file-input>
-              </div>
-            </div>
-          </div>
+<mat-toolbar color="primary">
+  <h2 translate>gateway.gateway-configuration</h2>
+  <span fxFlex></span>
+  <button mat-icon-button
+          type="button"
+          (click)="cancel()"
+          *ngIf="dialogRef">
+    <mat-icon class="material-icons" style="color:#000;">close</mat-icon>
+  </button>
+</mat-toolbar>
+<mat-tab-group style="max-height: calc(100% - 117px); height: 100%;" [formGroup]="gatewayConfigGroup">
+  <mat-tab label="{{ 'gateway.thingsboard-general' | translate }}">
+    <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">
+      <div class="tb-form-panel no-padding-bottom">
+        <div tb-hint-tooltip-icon="{{ 'gateway.hints.remote-configuration' | translate }}"
+             class="tb-form-row no-border no-padding">
+          <mat-slide-toggle class="mat-slide" color="primary" formControlName="remoteConfiguration">
+            {{ 'gateway.remote-configuration'  | translate }}
+          </mat-slide-toggle>
+        </div>
+        <div tb-hint-tooltip-icon="{{ 'gateway.hints.remote-shell' | translate }}"
+             class="tb-form-row no-border no-padding">
+          <mat-slide-toggle class="mat-slide" color="primary" formControlName="remoteShell">
+            {{ 'gateway.remote-shell' | translate }}
+          </mat-slide-toggle>
+        </div>
+        <div class="tb-form-row no-border no-padding tb-not-inline-field">
+          <mat-form-field appearance="outline" class="flex">
+            <mat-label translate>gateway.thingsboard-host</mat-label>
+            <input matInput formControlName="host"/>
+            <mat-icon matIconSuffix style="cursor:pointer;"
+                      matTooltip="{{ 'gateway.hints.host' | translate }}">info_outlined
+            </mat-icon>
+            <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.host').hasError('required')">
+              {{ 'gateway.thingsboard-host-required' | translate }}
+            </mat-error>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="flex">
+            <mat-label translate>gateway.thingsboard-port</mat-label>
+            <input matInput formControlName="port" type="number" min="0"/>
+            <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('required')">
+              {{ 'gateway.thingsboard-port-required' | translate }}
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('min')">
+              {{ 'gateway.thingsboard-port-min' | translate }}
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('max')">
+              {{ 'gateway.thingsboard-port-max' | translate }}
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.port').hasError('pattern')">
+              {{ 'gateway.thingsboard-port-pattern' | translate }}
+            </mat-error>
+            <mat-icon matIconSuffix style="cursor:pointer;"
+                      matTooltip="{{ 'gateway.hints.port' | translate }}">info_outlined
+            </mat-icon>
+          </mat-form-field>
+        </div>
       </div>
-    </mat-tab>
-    <mat-tab label="{{'gateway.logs.logs' | translate}}">
-      <div formGroupName="logs" fxLayout="column" class="mat-content mat-padding">
-          <div  class="tb-form-panel" style="padding-top: 20px">
-            <div fxLayout="row wrap">
-              <mat-form-field appearance="outline" fxFlex="100" class="mat-block tb-value-type">
-                <mat-label translate>gateway.logs.date-format</mat-label>
-                <input matInput formControlName="dateFormat"/>
-                <mat-error *ngIf="gatewayConfigGroup.get('logs.dateFormat').hasError('required')">
-                  {{'gateway.logs.date-format-required' | translate }}
-                </mat-error>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                          aria-label="help-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.date-form' | translate }}">info_outlined
-                </mat-icon>
-              </mat-form-field>
-              <mat-form-field appearance="outline" fxFlex="100" class="mat-block tb-value-type">
-                <mat-label translate>gateway.logs.log-format</mat-label>
-                <textarea matInput formControlName="logFormat" rows="2"></textarea>
-                <mat-error *ngIf="gatewayConfigGroup.get('logs.logFormat').hasError('required')">
-                  {{'gateway.logs.log-format-required' | translate }}
-                </mat-error>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                          aria-label="help-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.log-format' | translate }}">info_outlined
-                </mat-icon>
-              </mat-form-field>
-            </div>
-          </div>
-          <div  class="tb-form-panel" formGroupName="remote">
-              <div translate class="expansion-panel-header tb-form-panel-title">gateway.logs.remote</div>
-            <mat-slide-toggle color="primary" formControlName="enabled">
-              {{ 'gateway.logs.remote-logs'  | translate }}
-              <mat-icon class="mat-form-field-infix pointer-event suffix-icon slider-icon " aria-hidden="false"
-                        aria-label="help-icon"
-                        matSuffix style="cursor:pointer;"
-                        matTooltip="{{'gateway.hints.remote-log' | translate }}">info
+      <div class="tb-form-panel">
+        <div translate class="tb-form-panel-title">security.security</div>
+        <ng-container formGroupName="security">
+          <tb-toggle-select class="toggle-group" formControlName="type">
+            <tb-toggle-option *ngFor="let securityType of securityTypes | keyvalue"
+                              [value]="securityType.key">{{ securityType.value | translate }}</tb-toggle-option>
+          </tb-toggle-select>
+          <mat-form-field appearance="outline"
+                          *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value.toLowerCase().includes('accesstoken')">
+            <mat-label translate>security.access-token</mat-label>
+            <input matInput formControlName="accessToken"/>
+            <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.accessToken').hasError('required')">
+              {{ 'security.access-token-required' | translate }}
+            </mat-error>
+            <mat-icon matIconSuffix style="cursor:pointer;"
+                      matTooltip="{{ 'gateway.hints.token' | translate }}">info_outlined
+            </mat-icon>
+          </mat-form-field>
+          <div class="tb-form-row no-border no-padding tb-not-inline-field"
+               *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'">
+            <mat-form-field appearance="outline" class="flex" subscriptSizing="dynamic">
+              <mat-label translate>security.clientId</mat-label>
+              <input matInput formControlName="clientId"/>
+              <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.clientId').hasError('required')">
+                {{ 'security.clientId-required' | translate }}
+              </mat-error>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.client-id' | translate }}">info_outlined
+              </mat-icon>
+            </mat-form-field>
+            <mat-form-field appearance="outline" class="flex" subscriptSizing="dynamic">
+              <mat-label translate>security.username</mat-label>
+              <input matInput formControlName="username"/>
+              <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.security.username').hasError('required')">
+                {{ 'security.username-required' | translate }}
+              </mat-error>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.username' | translate }}">info_outlined
               </mat-icon>
-            </mat-slide-toggle>
-            <mat-form-field appearance="outline" class="mat-block tb-value-type">
-              <mat-label translate>gateway.logs.level</mat-label>
-              <mat-select formControlName="logLevel">
-                <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{logLevel}}</mat-option>
-              </mat-select>
             </mat-form-field>
           </div>
-          <div  class="tb-form-panel" formGroupName="local">
-              <div translate class="expansion-panel-header tb-form-panel-title">gateway.logs.local</div>
-            <div fxLayout="column">
-              <tb-toggle-header fxFlex="100" class="security-toggle-group"
-                                [value]="logSelector.value" name="logTypeToggle" (valueChange)="updateLogType($event)"
-                                useSelectOnMdLg="false" ignoreMdLgSize="true">
-                <tb-toggle-option *ngFor="let logConfig of localLogsConfigLabels| keyvalue" [value]="logConfig.key"
-                                  class="first-capital">{{ logConfig.value }}</tb-toggle-option>
-              </tb-toggle-header>
-              <div fxFlex="100" fxLayout="row wrap" fxLayout.lt-sm="column"
-                   [formGroup]="getLogFormGroup(logSelector.value)">
-                <mat-form-field appearance="outline" class="mat-block tb-value-type" fxFlex="calc(50%-15px)">
-                  <mat-label translate>gateway.logs.level</mat-label>
-                  <mat-select formControlName="logLevel">
-                    <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{logLevel}}</mat-option>
-                  </mat-select>
-                </mat-form-field>
-                <mat-form-field appearance="outline" class="mat-block tb-value-type" fxFlex="calc(50%-15px)">
-                  <mat-label translate>gateway.logs.file-path</mat-label>
-                  <input matInput formControlName="filePath"/>
-                  <mat-error
-                    *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.filePath').hasError('required')">
-                    {{'gateway.logs.file-path-required' | translate }}
-                  </mat-error>
-                </mat-form-field>
-                <div fxLayout="row" fxFlex="50" fxLayoutGap="15px">
-                  <mat-form-field appearance="outline" class="mat-block tb-value-type" fxFlex>
-                    <mat-label translate>gateway.logs.saving-period</mat-label>
-                    <input matInput formControlName="savingTime" type="number" min="0"/>
-                    <mat-error
-                      *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.savingTime').hasError('required')">
-                      {{'gateway.logs.saving-period-required' | translate }}
-                    </mat-error>
-                    <mat-error
-                      *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.savingTime').hasError('min')">
-                      {{'gateway.logs.saving-period-min' | translate }}
-                    </mat-error>
-                  </mat-form-field>
-                  <mat-form-field appearance="outline" class="mat-block tb-value-type" style="min-width: 110px; width: 30%">
-                    <mat-label translate></mat-label>
-                    <mat-select formControlName="savingPeriod">
-                      <mat-option *ngFor="let period of logSavingPeriods | keyvalue" [value]="period.key">
-                        {{period.value | translate}}
-                      </mat-option>
-                    </mat-select>
-                  </mat-form-field>
-                </div>
-                <mat-form-field appearance="outline" class="mat-block tb-value-type" fxFlex="calc(50%-30px)">
-                  <mat-label translate>gateway.logs.backup-count</mat-label>
-                  <input matInput formControlName="backupCount" type="number" min="0"/>
-                  <mat-error
-                    *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.backupCount').hasError('required')">
-                    {{'gateway.logs.backup-count-required' | translate }}
-                  </mat-error>
-                  <mat-error
-                    *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.backupCount').hasError('min')">
-                    {{'gateway.logs.backup-count-min' | translate }}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.backup-count' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-              </div>
-            </div>
-          </div>
+          <mat-form-field appearance="outline" subscriptSizing="dynamic"
+                          *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'">
+            <mat-label translate>security.password</mat-label>
+            <input matInput formControlName="password"/>
+            <mat-icon matIconSuffix style="cursor:pointer;"
+                      matTooltip="{{ 'gateway.hints.password' | translate }}">info_outlined
+            </mat-icon>
+          </mat-form-field>
+          <tb-error style="margin-top: -12px; display: block;" fxFlex="100"
+                    *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'"
+                    [error]="gatewayConfigGroup.get('thingsboard.security').hasError('atLeastOne') ?
+          ('device.client-id-or-user-name-necessary' | translate) : ''"></tb-error>
+          <tb-file-input
+            fxFlex="100"
+            hint="{{ 'gateway.hints.ca-cert' | translate }}"
+            *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value.toLowerCase().includes('tls')"
+            formControlName="caCert"
+            label="{{ 'security.ca-cert' | translate }}"
+            [allowedExtensions]="'pem, cert, key'"
+            [accept]="'.pem, application/pem,.cert, application/cert, .key,application/key'"
+            dropLabel="{{ 'gateway.drop-file' | translate }}">
+          </tb-file-input>
+        </ng-container>
       </div>
-    </mat-tab>
-    <mat-tab label="{{'gateway.storage' | translate}}">
-      <div formGroupName="storage" fxLayout="column" class="mat-content mat-padding">
-          <div  class="tb-form-panel">
-              <div translate class="expansion-panel-header tb-form-panel-title">gateway.storage
-                <span class="tb-hint">{{'gateway.hints.storage' | translate}}</span>
-              </div>
-            <div fxLayout="column">
-              <tb-toggle-header fxFlex="100" class="security-toggle-group"
-                                [value]="gatewayConfigGroup.get('storage.type').value" name="storageType"
-                                (valueChange)="updateStorageType($event)"
-                                useSelectOnMdLg="false" ignoreMdLgSize="true">
-                <tb-toggle-option *ngFor="let storageType of storageTypes | keyvalue" [value]="storageType.key">
-                  {{ storageType.value | translate }}</tb-toggle-option>
-
-              </tb-toggle-header>
-              <div class="line-break "></div>
-              <span class="tb-hint" style="padding-left: 0">
-                  {{'gateway.hints.' + gatewayConfigGroup.get('storage.type').value | translate}}</span>
-              <div fxLayout="row wrap" fxLayout.lt-sm="column">
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'memory'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>gateway.storage-read-record-count</mat-label>
-                  <input type="number" matInput formControlName="read_records_count"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.read_records_count').hasError('required')">
-                    {{'gateway.storage-read-record-count-required' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.read_records_count').hasError('min')">
-                    {{'gateway.storage-read-record-count-min' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.read_records_count').hasError('pattern')">
-                    {{'gateway.storage-read-record-count-pattern' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.read-record-count' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'memory'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>gateway.storage-max-records</mat-label>
-                  <input type="number" matInput formControlName="max_records_count"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_count').hasError('required')">
-                    {{'gateway.storage-max-records-required' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_count').hasError('min')">
-                    {{'gateway.storage-max-records-min' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_count').hasError('pattern')">
-                    {{'gateway.storage-max-records-pattern' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.max-records-count' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>gateway.storage-data-folder-path</mat-label>
-                  <input matInput formControlName="data_folder_path"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.data_folder_path').hasError('required')">
-                    {{'gateway.storage-data-folder-path-required' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.data-folder' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>gateway.storage-max-files</mat-label>
-                  <input matInput type="number" formControlName="max_file_count"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_file_count').hasError('required')">
-                    {{'gateway.storage-max-files-required' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_file_count').hasError('min')">
-                    {{'gateway.storage-max-files-min' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_file_count').hasError('pattern')">
-                    {{'gateway.storage-max-files-pattern' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.max-file-count' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>gateway.storage-max-read-record-count</mat-label>
-                  <input matInput type="number" formControlName="max_read_records_count"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_read_records_count').hasError('required')">
-                    {{'gateway.storage-max-read-record-count-required' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_read_records_count').hasError('min')">
-                    {{'gateway.storage-max-read-record-count-min' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_read_records_count').hasError('pattern')">
-                    {{'gateway.storage-max-read-record-count-pattern' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.max-read-count' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'file'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>gateway.storage-max-file-records</mat-label>
-                  <input matInput type="number" formControlName="max_records_per_file"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_per_file').hasError('required')">
-                    {{'gateway.storage-max-records-required' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_per_file').hasError('min')">
-                    {{'gateway.storage-max-records-min' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_per_file').hasError('pattern')">
-                    {{'gateway.storage-max-records-pattern' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.max-records' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'sqlite'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>gateway.storage-path</mat-label>
-                  <input matInput formControlName="data_file_path"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.data_file_path').hasError('required')">
-                    {{'gateway.storage-path-required' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.data-folder' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'sqlite'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                  <mat-label translate>gateway.messages-ttl-check-in-hours</mat-label>
-                  <input matInput type="number" formControlName="messages_ttl_check_in_hours"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_check_in_hours').hasError('required')">
-                    {{'gateway.messages-ttl-check-in-hours-required' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_check_in_hours').hasError('min')">
-                    {{'gateway.messages-ttl-check-in-hours-min' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_check_in_hours').hasError('pattern')">
-                    {{'gateway.messages-ttl-check-in-hours-pattern' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.ttl-check-hour' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-                <mat-form-field appearance="outline" *ngIf="gatewayConfigGroup.get('storage.type').value === 'sqlite'"
-                                fxFlex="calc(50%-15px)" class="mat-block tb-value-type" style="flex-grow: 0">
-                  <mat-label translate>gateway.messages-ttl-in-days</mat-label>
-                  <input matInput type="number" formControlName="messages_ttl_in_days"/>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_in_days').hasError('required')">
-                    {{'gateway.messages-ttl-in-days-required' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_in_days').hasError('min')">
-                    {{'gateway.messages-ttl-in-days-min' | translate}}
-                  </mat-error>
-                  <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_in_days').hasError('pattern')">
-                    {{'gateway.messages-ttl-in-days-pattern' | translate}}
-                  </mat-error>
-                  <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                            aria-label="help-icon"
-                            matSuffix style="cursor:pointer;"
-                            matTooltip="{{'gateway.hints.ttl-messages-day' | translate }}">info_outlined
-                  </mat-icon>
-                </mat-form-field>
-              </div>
-            </div>
-          </div>
+    </div>
+  </mat-tab>
+  <mat-tab label="{{ 'gateway.logs.logs' | translate }}">
+    <div formGroupName="logs" class="mat-content mat-padding configuration-block">
+      <div class="tb-form-panel no-padding-bottom">
+        <div fxLayout="column">
+          <mat-form-field appearance="outline">
+            <mat-label translate>gateway.logs.date-format</mat-label>
+            <input matInput formControlName="dateFormat"/>
+            <mat-error *ngIf="gatewayConfigGroup.get('logs.dateFormat').hasError('required')">
+              {{ 'gateway.logs.date-format-required' | translate }}
+            </mat-error>
+            <mat-icon matIconSuffix style="cursor:pointer;"
+                      matTooltip="{{ 'gateway.hints.date-form' | translate }}">info_outlined
+            </mat-icon>
+          </mat-form-field>
+          <mat-form-field appearance="outline">
+            <mat-label translate>gateway.logs.log-format</mat-label>
+            <textarea matInput formControlName="logFormat" rows="2"></textarea>
+            <mat-error *ngIf="gatewayConfigGroup.get('logs.logFormat').hasError('required')">
+              {{ 'gateway.logs.log-format-required' | translate }}
+            </mat-error>
+            <mat-icon matIconSuffix style="cursor:pointer;"
+                      matTooltip="{{ 'gateway.hints.log-format' | translate }}">info_outlined
+            </mat-icon>
+          </mat-form-field>
+        </div>
       </div>
-    </mat-tab>
-    <mat-tab label="{{'gateway.grpc' | translate}}">
-      <div formGroupName="grpc" fxLayout="column" class="mat-content mat-padding">
-          <div  class="tb-form-panel" style="padding-top: 20px">
-            <div fxLayout="row wrap" fxLayout.lt-md="column">
-              <mat-slide-toggle color="primary" fxFlex="100" formControlName="enabled">
-                {{ 'gateway.grpc'  | translate }}
-              </mat-slide-toggle>
-              <mat-slide-toggle color="primary" fxFlex="100" formControlName="keepalivePermitWithoutCalls">
-                {{ 'gateway.permit-without-calls'  | translate }}
-                <mat-icon class="material-icons-outlined suffix-icon slider-icon " aria-hidden="false" aria-label="help-icon"
-                          style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.permit-without-calls' | translate }}">info
-                </mat-icon>
-              </mat-slide-toggle>
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
-                <mat-label translate>gateway.server-port</mat-label>
-                <input matInput formControlName="serverPort" type="number" min="0"/>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.server-port' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.serverPort').hasError('required')">
-                  {{'gateway.thingsboard-port-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.serverPort').hasError('min')">
-                  {{'gateway.thingsboard-port-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.serverPort').hasError('max')">
-                  {{'gateway.thingsboard-port-max' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.serverPort').hasError('pattern')">
-                  {{'gateway.thingsboard-port-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
-                <mat-label translate>gateway.grpc-keep-alive-timeout</mat-label>
-                <input matInput formControlName="keepAliveTimeoutMs" type="number" min="0"/>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.grpc-keep-alive-timeout' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeoutMs').hasError('required')">
-                  {{'gateway.grpc-keep-alive-timeout-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeoutMs').hasError('min')">
-                  {{'gateway.grpc-keep-alive-timeout-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeoutMs').hasError('pattern')">
-                  {{'gateway.grpc-keep-alive-timeout-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
-                <mat-label translate>gateway.grpc-keep-alive</mat-label>
-                <input matInput formControlName="keepAliveTimeMs" type="number" min="0"/>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.grpc-keep-alive' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeMs').hasError('required')">
-                  {{'gateway.grpc-keep-alive-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeMs').hasError('min')">
-                  {{'gateway.grpc-keep-alive-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeMs').hasError('pattern')">
-                  {{'gateway.grpc-keep-alive-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
-                <mat-label translate>gateway.grpc-min-time-between-pings</mat-label>
-                <input matInput formControlName="minTimeBetweenPingsMs" type="number" min="0"/>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.grpc-min-time-between-pings' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.minTimeBetweenPingsMs').hasError('required')">
-                  {{'gateway.grpc-min-time-between-pings-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.minTimeBetweenPingsMs').hasError('min')">
-                  {{'gateway.grpc-min-time-between-pings-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.minTimeBetweenPingsMs').hasError('pattern')">
-                  {{'gateway.grpc-min-time-between-pings-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
-                <mat-label translate>gateway.grpc-max-pings-without-data</mat-label>
-                <input matInput formControlName="maxPingsWithoutData" type="number" min="0"/>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.grpc-max-pings-without-data' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.maxPingsWithoutData').hasError('required')">
-                  {{'gateway.grpc-max-pings-without-data-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.maxPingsWithoutData').hasError('min')">
-                  {{'gateway.grpc-max-pings-without-data-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.maxPingsWithoutData').hasError('pattern')">
-                  {{'gateway.grpc-max-pings-without-data-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md="100" class="mat-block tb-value-type">
-                <mat-label translate>gateway.grpc-min-ping-interval-without-data</mat-label>
-                <input matInput formControlName="minPingIntervalWithoutDataMs" type="number" min="0"/>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.grpc-min-ping-interval-without-data' | translate }}">info_outlined
-                </mat-icon>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('required')">
-                  {{'gateway.grpc-min-ping-interval-without-data-required' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('min')">
-                  {{'gateway.grpc-min-ping-interval-without-data-min' | translate }}
-                </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('pattern')">
-                  {{'gateway.grpc-min-ping-interval-without-data-pattern' | translate }}
-                </mat-error>
-              </mat-form-field>
-            </div>
-          </div>
+      <div class="tb-form-panel no-padding-bottom" formGroupName="remote">
+        <div translate class="tb-form-panel-title">gateway.logs.remote</div>
+        <div tb-hint-tooltip-icon="{{ 'gateway.hints.remote-log' | translate }}"
+             class="tb-form-row no-border no-padding">
+          <mat-slide-toggle class="mat-slide" color="primary" formControlName="enabled">
+            {{ 'gateway.logs.remote-logs'  | translate }}
+          </mat-slide-toggle>
+        </div>
+        <mat-form-field appearance="outline">
+          <mat-label translate>gateway.logs.level</mat-label>
+          <mat-select formControlName="logLevel">
+            <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>
+          </mat-select>
+        </mat-form-field>
       </div>
-    </mat-tab>
-    <mat-tab label="{{'gateway.statistics.statistics' | translate}}">
-      <div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding">
-          <div  class="tb-form-panel" style="padding-top: 20px">
-            <div fxLayout="row wrap" formGroupName="statistics">
-              <mat-slide-toggle color="primary" fxFlex="100" formControlName="enable">
-                {{ 'gateway.statistics.statistics'  | translate }}
-              </mat-slide-toggle>
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                <mat-label translate>gateway.statistics.send-period</mat-label>
-                <input matInput formControlName="statsSendPeriodInSeconds" type="number" min="60"/>
-                <mat-error
-                  *ngIf="gatewayConfigGroup.get('thingsboard.statistics.statsSendPeriodInSeconds').hasError('required')">
-                  {{'gateway.statistics.send-period-required' | translate }}
-                </mat-error>
+      <div class="tb-form-panel no-padding-bottom" formGroupName="local">
+        <div translate class="tb-form-panel-title">gateway.logs.local</div>
+        <tb-toggle-select class="toggle-group" [formControl]="logSelector">
+          <tb-toggle-option *ngFor="let logConfig of localLogsConfigs" [value]="logConfig"
+                            class="first-capital">{{ localLogsConfigTranslateMap.get(logConfig) }}</tb-toggle-option>
+        </tb-toggle-select>
+        <ng-container [formGroup]="getLogFormGroup(logSelector.value)">
+          <div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+            <mat-form-field appearance="outline" class="flex">
+              <mat-label translate>gateway.logs.level</mat-label>
+              <mat-select formControlName="logLevel">
+                <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>
+              </mat-select>
+            </mat-form-field>
+            <mat-form-field appearance="outline" class="flex">
+              <mat-label translate>gateway.logs.file-path</mat-label>
+              <input matInput formControlName="filePath"/>
+              <mat-error *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.filePath').hasError('required')">
+                {{ 'gateway.logs.file-path-required' | translate }}
+              </mat-error>
+            </mat-form-field>
+          </div>
+          <div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+            <div class="tb-form-row no-border no-padding tb-not-inline-field saving-period">
+              <mat-form-field appearance="outline" class="flex">
+                <mat-label translate>gateway.logs.saving-period</mat-label>
+                <input matInput formControlName="savingTime" type="number" min="0"/>
                 <mat-error
-                  *ngIf="gatewayConfigGroup.get('thingsboard.statistics.statsSendPeriodInSeconds').hasError('min')">
-                  {{'gateway.statistics.send-period-min' | translate }}
+                  *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.savingTime').hasError('required')">
+                  {{ 'gateway.logs.saving-period-required' | translate }}
                 </mat-error>
                 <mat-error
-                  *ngIf="gatewayConfigGroup.get('thingsboard.statistics.statsSendPeriodInSeconds').hasError('pattern')">
-                  {{'gateway.statistics.send-period-pattern' | translate }}
+                  *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.savingTime').hasError('min')">
+                  {{ 'gateway.logs.saving-period-min' | translate }}
                 </mat-error>
               </mat-form-field>
+              <mat-form-field appearance="outline" hideRequiredMarker style="min-width: 110px; width: 30%">
+                <mat-select formControlName="savingPeriod">
+                  <mat-option *ngFor="let period of logSavingPeriods | keyvalue" [value]="period.key">
+                    {{ period.value | translate }}
+                  </mat-option>
+                </mat-select>
+              </mat-form-field>
             </div>
+            <mat-form-field appearance="outline" class="flex">
+              <mat-label translate>gateway.logs.backup-count</mat-label>
+              <input matInput formControlName="backupCount" type="number" min="0"/>
+              <mat-error
+                *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.backupCount').hasError('required')">
+                {{ 'gateway.logs.backup-count-required' | translate }}
+              </mat-error>
+              <mat-error
+                *ngIf="gatewayConfigGroup.get('logs.local.' + logSelector.value + '.backupCount').hasError('min')">
+                {{ 'gateway.logs.backup-count-min' | translate }}
+              </mat-error>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.backup-count' | translate }}">info_outlined
+              </mat-icon>
+            </mat-form-field>
           </div>
-          <div  class="tb-form-panel">
-              <div class="expansion-panel-header tb-form-panel-title">{{"gateway.statistics.commands" |translate}}
-                <span class="tb-hint">
-                  {{'gateway.hints.commands' | translate}}</span></div>
-            <div fxLayout="column" formGroupName="statistics">
-              <div fxLayout="row" formArrayName="commands"
-                   *ngFor="let commandControl of commandFormArray().controls; let $index = index"
-                   style="margin-bottom: 15px">
-                <mat-card fxFlex.lt-md fxLayout="row wrap" fxLayout.lt-md="column" [formGroupName]="$index"
-                          class="statistics-block">
-                  <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md class="mat-block tb-value-type">
-                    <mat-label translate>gateway.statistics.attribute-name</mat-label>
-                    <input matInput formControlName="attributeOnGateway"/>
-                    <mat-error
-                      *ngIf="commandControl.get('attributeOnGateway').hasError('required')">
-                      {{'gateway.statistics.attribute-name-required' | translate }}
-                    </mat-error>
-                    <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                              aria-label="help-icon"
-                              matSuffix style="cursor:pointer;"
-                              matTooltip="{{'gateway.hints.attribute' | translate }}">info_outlined
-                    </mat-icon>
-                  </mat-form-field>
-                  <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md class="mat-block tb-value-type">
-                    <mat-label translate>gateway.statistics.timeout</mat-label>
-                    <input matInput formControlName="timeout" type="number" min="0"/>
-                    <mat-error
-                      *ngIf="commandControl.get('timeout').hasError('required')">
-                      {{'gateway.statistics.timeout-required' | translate }}
-                    </mat-error>
-                    <mat-error
-                      *ngIf="commandControl.get('timeout').hasError('min')">
-                      {{'gateway.statistics.timeout-min' | translate }}
-                    </mat-error>
-                    <mat-error
-                      *ngIf="commandControl.get('timeout').hasError('pattern')">
-                      {{'gateway.statistics.timeout-pattern' | translate }}
-                    </mat-error>
-                    <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                              aria-label="help-icon"
-                              matSuffix style="cursor:pointer;"
-                              matTooltip="{{'gateway.hints.timeout' | translate }}">info_outlined
-                    </mat-icon>
-                  </mat-form-field>
-                  <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" fxFlex.lt-md class="mat-block tb-value-type"
-                                  style="flex-grow: 0">
-                    <mat-label translate>gateway.statistics.command</mat-label>
-                    <input matInput formControlName="command"/>
-                    <mat-error
-                      *ngIf="commandControl.get('command').hasError('required')">
-                      {{'gateway.statistics.command-required' | translate }}
-                    </mat-error>
-                    <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                              aria-label="help-icon"
-                              matSuffix style="cursor:pointer;"
-                              matTooltip="{{'gateway.hints.command' | translate }}">info_outlined
-                    </mat-icon>
-                  </mat-form-field>
-                </mat-card>
-                <button mat-icon-button (click)="removeCommandControl($index, $event)"
-                        [disabled]="!gatewayConfigGroup.get('thingsboard.remoteConfiguration').value"
-                        matTooltip="{{ 'gateway.statistics.remove' | translate }}"
-                        matTooltipPosition="above">
-                  <mat-icon>close</mat-icon>
-                </button>
-              </div>
-              <button mat-stroked-button color="primary"
-                      style="width: fit-content;"
-                      type="button"
-                      [disabled]="!gatewayConfigGroup.get('thingsboard.remoteConfiguration').value"
-                      (click)="addCommand()">
-                {{ 'gateway.statistics.add' | translate }}
-              </button>
-            </div>
-          </div>
+        </ng-container>
       </div>
-    </mat-tab>
-    <mat-tab label="{{'gateway.other' | translate}}">
-      <div formGroupName="thingsboard" fxLayout="column" class="mat-content mat-padding">
-          <div  class="tb-form-panel" formGroupName="checkingDeviceActivity">
-              <div class="expansion-panel-header tb-form-panel-title">
-                <mat-slide-toggle color="primary" fxFlex="100" formControlName="checkDeviceInactivity">
-                  {{ 'gateway.checking-device-activity'  | translate }}
-                </mat-slide-toggle>
-                <span class="tb-hint"
-                      style="padding-left: 40px; margin-top: -15px;">{{'gateway.hints.check-device-activity' | translate}}</span>
-              </div>
-            <div fxLayout="row wrap" fxLayout.lt-sm="column">
-              <mat-form-field
-                appearance="outline"
-                *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value"
-                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                <mat-label translate>gateway.inactivity-timeout-seconds</mat-label>
-                <input matInput formControlName="inactivityTimeoutSeconds" type="number" min="0"/>
-                <mat-error
-                  *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds').hasError('required')">
-                  {{'gateway.inactivity-timeout-seconds-required' | translate }}
-                </mat-error>
-                <mat-error
-                  *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds').hasError('min')">
-                  {{'gateway.inactivity-timeout-seconds-min' | translate }}
+    </div>
+  </mat-tab>
+  <mat-tab label="{{ 'gateway.storage' | translate }}">
+    <div formGroupName="storage" class="mat-content mat-padding configuration-block">
+      <div class="tb-form-panel no-padding-bottom">
+        <div translate class="tb-form-panel-title">gateway.storage</div>
+        <div translate class="tb-form-panel-hint">gateway.hints.storage</div>
+        <tb-toggle-select class="toggle-group" formControlName="type">
+          <tb-toggle-option *ngFor="let storageType of storageTypes" [value]="storageType">
+            {{ storageTypesTranslationMap.get(storageType) | translate }}
+          </tb-toggle-option>
+        </tb-toggle-select>
+        <div class="tb-form-panel-hint">{{ 'gateway.hints.' + gatewayConfigGroup.get('storage.type').value | translate }}</div>
+        <ng-container [ngSwitch]="gatewayConfigGroup.get('storage.type').value">
+          <section *ngSwitchCase="StorageTypes.MEMORY" class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+            <mat-form-field appearance="outline" class="flex">
+              <mat-label translate>gateway.storage-read-record-count</mat-label>
+              <input type="number" matInput formControlName="read_records_count"/>
+              <mat-error *ngIf="gatewayConfigGroup.get('storage.read_records_count').hasError('required')">
+                {{ 'gateway.storage-read-record-count-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('storage.read_records_count').hasError('min')">
+                {{ 'gateway.storage-read-record-count-min' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('storage.read_records_count').hasError('pattern')">
+                {{ 'gateway.storage-read-record-count-pattern' | translate }}
+              </mat-error>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.read-record-count' | translate }}">info_outlined
+              </mat-icon>
+            </mat-form-field>
+            <mat-form-field appearance="outline" class="flex">
+              <mat-label translate>gateway.storage-max-records</mat-label>
+              <input type="number" matInput formControlName="max_records_count"/>
+              <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_count').hasError('required')">
+                {{ 'gateway.storage-max-records-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_count').hasError('min')">
+                {{ 'gateway.storage-max-records-min' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_count').hasError('pattern')">
+                {{ 'gateway.storage-max-records-pattern' | translate }}
+              </mat-error>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.max-records-count' | translate }}">info_outlined
+              </mat-icon>
+            </mat-form-field>
+          </section>
+          <section *ngSwitchCase="StorageTypes.FILE">
+            <div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+              <mat-form-field appearance="outline" class="flex">
+                <mat-label translate>gateway.storage-data-folder-path</mat-label>
+                <input matInput formControlName="data_folder_path"/>
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.data_folder_path').hasError('required')">
+                  {{ 'gateway.storage-data-folder-path-required' | translate }}
                 </mat-error>
                 <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
                           aria-label="help-icon"
                           matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.inactivity-timeout' | translate }}">info_outlined
+                          matTooltip="{{ 'gateway.hints.data-folder' | translate }}">info_outlined
                 </mat-icon>
               </mat-form-field>
-              <mat-form-field
-                appearance="outline"
-                *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value"
-                fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                <mat-label translate>gateway.inactivity-check-period-seconds</mat-label>
-                <input matInput formControlName="inactivityCheckPeriodSeconds"/>
-                <mat-error
-                  *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds').hasError('required')">
-                  {{'gateway.inactivity-check-period-seconds-required' | translate }}
+              <mat-form-field appearance="outline" class="flex">
+                <mat-label translate>gateway.storage-max-files</mat-label>
+                <input matInput type="number" formControlName="max_file_count"/>
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.max_file_count').hasError('required')">
+                  {{ 'gateway.storage-max-files-required' | translate }}
                 </mat-error>
-                <mat-error
-                  *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds').hasError('min')">
-                  {{'gateway.inactivity-check-period-seconds-min' | translate }}
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.max_file_count').hasError('min')">
+                  {{ 'gateway.storage-max-files-min' | translate }}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                          aria-label="help-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.inactivity-period' | translate }}">info_outlined
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.max_file_count').hasError('pattern')">
+                  {{ 'gateway.storage-max-files-pattern' | translate }}
+                </mat-error>
+                <mat-icon matIconSuffix style="cursor:pointer;"
+                          matTooltip="{{ 'gateway.hints.max-file-count' | translate }}">info_outlined
                 </mat-icon>
               </mat-form-field>
             </div>
-          </div>
-          <div  class="tb-form-panel">
-              <div translate class="expansion-panel-header tb-form-panel-title">gateway.advanced</div>
-            <div fxLayout="row wrap" fxLayout.lt-sm="column">
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                <mat-label translate>gateway.min-pack-send-delay</mat-label>
-                <input matInput formControlName="minPackSendDelayMS" type="number" min="0"/>
-                <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.minPackSendDelayMS').hasError('required')">
-                  {{ 'gateway.min-pack-send-delay-required' | translate }}
+            <div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+              <mat-form-field appearance="outline" class="flex">
+                <mat-label translate>gateway.storage-max-read-record-count</mat-label>
+                <input matInput type="number" formControlName="max_read_records_count"/>
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.max_read_records_count').hasError('required')">
+                  {{ 'gateway.storage-max-read-record-count-required' | translate }}
                 </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.minPackSendDelayMS').hasError('min')">
-                  {{ 'gateway.min-pack-send-delay-min' | translate }}
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.max_read_records_count').hasError('min')">
+                  {{ 'gateway.storage-max-read-record-count-min' | translate }}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                          aria-label="help-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.minimal-pack-delay' | translate }}">info_outlined
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.max_read_records_count').hasError('pattern')">
+                  {{ 'gateway.storage-max-read-record-count-pattern' | translate }}
+                </mat-error>
+                <mat-icon matIconSuffix style="cursor:pointer;"
+                          matTooltip="{{ 'gateway.hints.max-read-count' | translate }}">info_outlined
                 </mat-icon>
               </mat-form-field>
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                <mat-label translate>gateway.mqtt-qos</mat-label>
-                <input matInput formControlName="qos" type="number" min="0" max="1"/>
-                <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('required')">
-                  {{ 'gateway.mqtt-qos-required' | translate}}
+              <mat-form-field appearance="outline" class="flex">
+                <mat-label translate>gateway.storage-max-file-records</mat-label>
+                <input matInput type="number" formControlName="max_records_per_file"/>
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_per_file').hasError('required')">
+                  {{ 'gateway.storage-max-records-required' | translate }}
                 </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('min')">
-                  {{ 'gateway.mqtt-qos-range' | translate}}
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_per_file').hasError('min')">
+                  {{ 'gateway.storage-max-records-min' | translate }}
                 </mat-error>
-                <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('max')">
-                  {{ 'gateway.mqtt-qos-range' | translate}}
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.max_records_per_file').hasError('pattern')">
+                  {{ 'gateway.storage-max-records-pattern' | translate }}
                 </mat-error>
-                <mat-icon class="mat-form-field-infix pointer-event suffix-icon" aria-hidden="false"
-                          aria-label="help-icon"
-                          matSuffix style="cursor:pointer;"
-                          matTooltip="{{'gateway.hints.qos' | translate }}">info_outlined
+                <mat-icon matIconSuffix style="cursor:pointer;"
+                          matTooltip="{{ 'gateway.hints.max-records' | translate }}">info_outlined
                 </mat-icon>
               </mat-form-field>
-              <mat-form-field appearance="outline" fxFlex="calc(50%-15px)" class="mat-block tb-value-type">
-                <mat-label translate>gateway.statistics.check-connectors-configuration</mat-label>
-                <input matInput formControlName="checkConnectorsConfigurationInSeconds" type="number" min="0"/>
-                <mat-error
-                  *ngIf="gatewayConfigGroup.get('thingsboard.checkConnectorsConfigurationInSeconds').hasError('required')">
-                  {{'gateway.statistics.check-connectors-configuration-required' | translate }}
+            </div>
+          </section>
+          <section *ngSwitchCase="StorageTypes.SQLITE">
+            <div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+              <mat-form-field appearance="outline" class="flex">
+                <mat-label translate>gateway.storage-path</mat-label>
+                <input matInput formControlName="data_file_path"/>
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.data_file_path').hasError('required')">
+                  {{ 'gateway.storage-path-required' | translate }}
+                </mat-error>
+                <mat-icon matIconSuffix style="cursor:pointer;"
+                          matTooltip="{{ 'gateway.hints.data-folder' | translate }}">info_outlined
+                </mat-icon>
+              </mat-form-field>
+              <mat-form-field appearance="outline" class="flex">
+                <mat-label translate>gateway.messages-ttl-check-in-hours</mat-label>
+                <input matInput type="number" formControlName="messages_ttl_check_in_hours"/>
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_check_in_hours').hasError('required')">
+                  {{ 'gateway.messages-ttl-check-in-hours-required' | translate }}
                 </mat-error>
-                <mat-error
-                  *ngIf="gatewayConfigGroup.get('thingsboard.checkConnectorsConfigurationInSeconds').hasError('min')">
-                  {{'gateway.statistics.check-connectors-configuration-min' | translate }}
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_check_in_hours').hasError('min')">
+                  {{ 'gateway.messages-ttl-check-in-hours-min' | translate }}
                 </mat-error>
-                <mat-error
-                  *ngIf="gatewayConfigGroup.get('thingsboard.checkConnectorsConfigurationInSeconds').hasError('pattern')">
-                  {{'gateway.statistics.check-connectors-configuration-pattern' | translate }}
+                <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_check_in_hours').hasError('pattern')">
+                  {{ 'gateway.messages-ttl-check-in-hours-pattern' | translate }}
                 </mat-error>
+                <mat-icon matIconSuffix style="cursor:pointer;"
+                          matTooltip="{{ 'gateway.hints.ttl-check-hour' | translate }}">info_outlined
+                </mat-icon>
               </mat-form-field>
             </div>
+            <mat-form-field appearance="outline" class="mat-block">
+              <mat-label translate>gateway.messages-ttl-in-days</mat-label>
+              <input matInput type="number" formControlName="messages_ttl_in_days"/>
+              <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_in_days').hasError('required')">
+                {{ 'gateway.messages-ttl-in-days-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_in_days').hasError('min')">
+                {{ 'gateway.messages-ttl-in-days-min' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('storage.messages_ttl_in_days').hasError('pattern')">
+                {{ 'gateway.messages-ttl-in-days-pattern' | translate }}
+              </mat-error>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.ttl-messages-day' | translate }}">info_outlined
+              </mat-icon>
+            </mat-form-field>
+          </section>
+        </ng-container>
+      </div>
+    </div>
+  </mat-tab>
+  <mat-tab label="{{ 'gateway.grpc' | translate }}">
+    <div formGroupName="grpc" class="mat-content mat-padding configuration-block">
+      <div class="tb-form-panel no-padding-bottom">
+        <mat-slide-toggle class="mat-slide" color="primary" formControlName="enabled">
+          {{ 'gateway.grpc'  | translate }}
+        </mat-slide-toggle>
+        <div tb-hint-tooltip-icon="{{ 'gateway.hints.permit-without-calls' | translate }}"
+             class="tb-form-row no-border no-padding">
+          <mat-slide-toggle class="mat-slide" color="primary" formControlName="keepalivePermitWithoutCalls">
+            {{ 'gateway.permit-without-calls'  | translate }}
+          </mat-slide-toggle>
+        </div>
+        <section>
+          <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+            <mat-form-field appearance="outline" class="flex">
+              <mat-label translate>gateway.server-port</mat-label>
+              <input matInput formControlName="serverPort" type="number" min="0"/>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.server-port' | translate }}">info_outlined
+              </mat-icon>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.serverPort').hasError('required')">
+                {{ 'gateway.thingsboard-port-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.serverPort').hasError('min')">
+                {{ 'gateway.thingsboard-port-min' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.serverPort').hasError('max')">
+                {{ 'gateway.thingsboard-port-max' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.serverPort').hasError('pattern')">
+                {{ 'gateway.thingsboard-port-pattern' | translate }}
+              </mat-error>
+            </mat-form-field>
+            <mat-form-field appearance="outline" class="flex">
+              <mat-label translate>gateway.grpc-keep-alive-timeout</mat-label>
+              <input matInput formControlName="keepAliveTimeoutMs" type="number" min="0"/>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.grpc-keep-alive-timeout' | translate }}">info_outlined
+              </mat-icon>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeoutMs').hasError('required')">
+                {{ 'gateway.grpc-keep-alive-timeout-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeoutMs').hasError('min')">
+                {{ 'gateway.grpc-keep-alive-timeout-min' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeoutMs').hasError('pattern')">
+                {{ 'gateway.grpc-keep-alive-timeout-pattern' | translate }}
+              </mat-error>
+            </mat-form-field>
+          </section>
+          <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+            <mat-form-field appearance="outline" class="flex">
+              <mat-label translate>gateway.grpc-keep-alive</mat-label>
+              <input matInput formControlName="keepAliveTimeMs" type="number" min="0"/>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.grpc-keep-alive' | translate }}">info_outlined
+              </mat-icon>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeMs').hasError('required')">
+                {{ 'gateway.grpc-keep-alive-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeMs').hasError('min')">
+                {{ 'gateway.grpc-keep-alive-min' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.keepAliveTimeMs').hasError('pattern')">
+                {{ 'gateway.grpc-keep-alive-pattern' | translate }}
+              </mat-error>
+            </mat-form-field>
+            <mat-form-field appearance="outline" class="flex">
+              <mat-label translate>gateway.grpc-min-time-between-pings</mat-label>
+              <input matInput formControlName="minTimeBetweenPingsMs" type="number" min="0"/>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.grpc-min-time-between-pings' | translate }}">info_outlined
+              </mat-icon>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.minTimeBetweenPingsMs').hasError('required')">
+                {{ 'gateway.grpc-min-time-between-pings-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.minTimeBetweenPingsMs').hasError('min')">
+                {{ 'gateway.grpc-min-time-between-pings-min' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.minTimeBetweenPingsMs').hasError('pattern')">
+                {{ 'gateway.grpc-min-time-between-pings-pattern' | translate }}
+              </mat-error>
+            </mat-form-field>
+          </section>
+          <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+            <mat-form-field appearance="outline" class="flex">
+              <mat-label translate>gateway.grpc-max-pings-without-data</mat-label>
+              <input matInput formControlName="maxPingsWithoutData" type="number" min="0"/>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.grpc-max-pings-without-data' | translate }}">info_outlined
+              </mat-icon>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.maxPingsWithoutData').hasError('required')">
+                {{ 'gateway.grpc-max-pings-without-data-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.maxPingsWithoutData').hasError('min')">
+                {{ 'gateway.grpc-max-pings-without-data-min' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.maxPingsWithoutData').hasError('pattern')">
+                {{ 'gateway.grpc-max-pings-without-data-pattern' | translate }}
+              </mat-error>
+            </mat-form-field>
+            <mat-form-field appearance="outline" class="flex">
+              <mat-label translate>gateway.grpc-min-ping-interval-without-data</mat-label>
+              <input matInput formControlName="minPingIntervalWithoutDataMs" type="number" min="0"/>
+              <mat-icon matIconSuffix style="cursor:pointer;"
+                        matTooltip="{{ 'gateway.hints.grpc-min-ping-interval-without-data' | translate }}">info_outlined
+              </mat-icon>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('required')">
+                {{ 'gateway.grpc-min-ping-interval-without-data-required' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('min')">
+                {{ 'gateway.grpc-min-ping-interval-without-data-min' | translate }}
+              </mat-error>
+              <mat-error *ngIf="gatewayConfigGroup.get('grpc.minPingIntervalWithoutDataMs').hasError('pattern')">
+                {{ 'gateway.grpc-min-ping-interval-without-data-pattern' | translate }}
+              </mat-error>
+            </mat-form-field>
+          </section>
+        </section>
+      </div>
+    </div>
+  </mat-tab>
+  <mat-tab label="{{ 'gateway.statistics.statistics' | translate }}">
+    <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">
+      <div class="tb-form-panel no-padding-bottom" formGroupName="statistics">
+        <mat-slide-toggle color="primary" class="mat-slide" formControlName="enable">
+          {{ 'gateway.statistics.statistics'  | translate }}
+        </mat-slide-toggle>
+        <mat-form-field appearance="outline">
+          <mat-label translate>gateway.statistics.send-period</mat-label>
+          <input matInput formControlName="statsSendPeriodInSeconds" type="number" min="60"/>
+          <mat-error
+            *ngIf="gatewayConfigGroup.get('thingsboard.statistics.statsSendPeriodInSeconds').hasError('required')">
+            {{ 'gateway.statistics.send-period-required' | translate }}
+          </mat-error>
+          <mat-error
+            *ngIf="gatewayConfigGroup.get('thingsboard.statistics.statsSendPeriodInSeconds').hasError('min')">
+            {{ 'gateway.statistics.send-period-min' | translate }}
+          </mat-error>
+          <mat-error
+            *ngIf="gatewayConfigGroup.get('thingsboard.statistics.statsSendPeriodInSeconds').hasError('pattern')">
+            {{ 'gateway.statistics.send-period-pattern' | translate }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+      <div class="tb-form-panel">
+        <div class="tb-form-panel-title" translate>gateway.statistics.commands</div>
+        <div class="tb-form-panel-hint" translate>gateway.hints.commands</div>
+        <ng-container formGroupName="statistics">
+          <div fxLayout="row" formArrayName="commands"
+               *ngFor="let commandControl of commandFormArray().controls; let $index = index">
+            <section [formGroupName]="$index" class="tb-form-panel stroked no-padding-bottom no-gap">
+              <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+                <mat-form-field appearance="outline" class="flex">
+                  <mat-label translate>gateway.statistics.attribute-name</mat-label>
+                  <input matInput formControlName="attributeOnGateway"/>
+                  <mat-error *ngIf="commandControl.get('attributeOnGateway').hasError('required')">
+                    {{ 'gateway.statistics.attribute-name-required' | translate }}
+                  </mat-error>
+                  <mat-icon matIconSuffix style="cursor:pointer;"
+                            matTooltip="{{ 'gateway.hints.attribute' | translate }}">info_outlined
+                  </mat-icon>
+                </mat-form-field>
+                <mat-form-field appearance="outline" class="flex">
+                  <mat-label translate>gateway.statistics.timeout</mat-label>
+                  <input matInput formControlName="timeout" type="number" min="0"/>
+                  <mat-error *ngIf="commandControl.get('timeout').hasError('required')">
+                    {{ 'gateway.statistics.timeout-required' | translate }}
+                  </mat-error>
+                  <mat-error *ngIf="commandControl.get('timeout').hasError('min')">
+                    {{ 'gateway.statistics.timeout-min' | translate }}
+                  </mat-error>
+                  <mat-error *ngIf="commandControl.get('timeout').hasError('pattern')">
+                    {{ 'gateway.statistics.timeout-pattern' | translate }}
+                  </mat-error>
+                  <mat-icon matIconSuffix style="cursor:pointer;"
+                            matTooltip="{{ 'gateway.hints.timeout' | translate }}">info_outlined
+                  </mat-icon>
+                </mat-form-field>
+              </section>
+              <mat-form-field appearance="outline" class="mat-block">
+                <mat-label translate>gateway.statistics.command</mat-label>
+                <input matInput formControlName="command"/>
+                <mat-error *ngIf="commandControl.get('command').hasError('required')">
+                  {{ 'gateway.statistics.command-required' | translate }}
+                </mat-error>
+                <mat-icon matIconSuffix style="cursor:pointer;"
+                          matTooltip="{{ 'gateway.hints.command' | translate }}">info_outlined
+                </mat-icon>
+              </mat-form-field>
+            </section>
+            <button mat-icon-button (click)="removeCommandControl($index, $event)"
+                    [disabled]="!gatewayConfigGroup.get('thingsboard.remoteConfiguration').value"
+                    matTooltip="{{ 'gateway.statistics.remove' | translate }}"
+                    matTooltipPosition="above">
+              <mat-icon>close</mat-icon>
+            </button>
           </div>
-
+          <button mat-stroked-button color="primary"
+                  style="width: fit-content;"
+                  type="button"
+                  [disabled]="!gatewayConfigGroup.get('thingsboard.remoteConfiguration').value"
+                  (click)="addCommand()">
+            {{ 'gateway.statistics.add' | translate }}
+          </button>
+        </ng-container>
       </div>
-    </mat-tab>
-  </mat-tab-group>
-  <div mat-dialog-actions fxLayoutAlign="start center">
-    <button mat-button color="primary"
-            type="button"
-            *ngIf="dialogRef"
-            (click)="cancel()">
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-raised-button color="primary"
-            type="button"
-            [disabled]="gatewayConfigGroup.invalid || !gatewayConfigGroup.dirty"
-            (click)="saveConfig()">
-      {{ 'action.save' | translate }}
-    </button>
-
-  </div>
-</form>
+    </div>
+  </mat-tab>
+  <mat-tab label="{{ 'gateway.other' | translate }}">
+    <div formGroupName="thingsboard" class="mat-content mat-padding configuration-block">
+      <div class="tb-form-panel" formGroupName="checkingDeviceActivity"
+            [class.no-padding-bottom]="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value">
+        <div tb-hint-tooltip-icon="{{ 'gateway.hints.check-device-activity' | translate }}"
+             class="tb-form-row no-border no-padding">
+          <mat-slide-toggle class="mat-slide" color="primary" formControlName="checkDeviceInactivity">
+            {{ 'gateway.checking-device-activity'  | translate }}
+          </mat-slide-toggle>
+        </div>
+        <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs"
+                 *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value">
+          <mat-form-field appearance="outline" class="flex">
+            <mat-label translate>gateway.inactivity-timeout-seconds</mat-label>
+            <input matInput formControlName="inactivityTimeoutSeconds" type="number" min="0"/>
+            <mat-error
+              *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds').hasError('required')">
+              {{ 'gateway.inactivity-timeout-seconds-required' | translate }}
+            </mat-error>
+            <mat-error
+              *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityTimeoutSeconds').hasError('min')">
+              {{ 'gateway.inactivity-timeout-seconds-min' | translate }}
+            </mat-error>
+            <mat-icon matIconSuffix style="cursor:pointer;"
+                      matTooltip="{{ 'gateway.hints.inactivity-timeout' | translate }}">info_outlined
+            </mat-icon>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="flex">
+            <mat-label translate>gateway.inactivity-check-period-seconds</mat-label>
+            <input matInput formControlName="inactivityCheckPeriodSeconds"/>
+            <mat-error
+              *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds').hasError('required')">
+              {{ 'gateway.inactivity-check-period-seconds-required' | translate }}
+            </mat-error>
+            <mat-error
+              *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.inactivityCheckPeriodSeconds').hasError('min')">
+              {{ 'gateway.inactivity-check-period-seconds-min' | translate }}
+            </mat-error>
+            <mat-icon matIconSuffix style="cursor:pointer;"
+                      matTooltip="{{ 'gateway.hints.inactivity-period' | translate }}">info_outlined
+            </mat-icon>
+          </mat-form-field>
+        </section>
+      </div>
+      <div class="tb-form-panel no-padding-bottom">
+        <div class="tb-form-panel-title" translate>gateway.advanced</div>
+        <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+          <mat-form-field appearance="outline" class="flex">
+            <mat-label translate>gateway.min-pack-send-delay</mat-label>
+            <input matInput formControlName="minPackSendDelayMS" type="number" min="0"/>
+            <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.minPackSendDelayMS').hasError('required')">
+              {{ 'gateway.min-pack-send-delay-required' | translate }}
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.minPackSendDelayMS').hasError('min')">
+              {{ 'gateway.min-pack-send-delay-min' | translate }}
+            </mat-error>
+            <mat-icon matIconSuffix style="cursor:pointer;"
+                      matTooltip="{{ 'gateway.hints.minimal-pack-delay' | translate }}">info_outlined
+            </mat-icon>
+          </mat-form-field>
+          <mat-form-field appearance="outline" class="flex">
+            <mat-label translate>gateway.mqtt-qos</mat-label>
+            <input matInput formControlName="qos" type="number" min="0" max="1"/>
+            <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('required')">
+              {{ 'gateway.mqtt-qos-required' | translate }}
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('min')">
+              {{ 'gateway.mqtt-qos-range' | translate }}
+            </mat-error>
+            <mat-error *ngIf="gatewayConfigGroup.get('thingsboard.qos').hasError('max')">
+              {{ 'gateway.mqtt-qos-range' | translate }}
+            </mat-error>
+            <mat-icon matIconSuffix style="cursor:pointer;"
+                      matTooltip="{{ 'gateway.hints.qos' | translate }}">info_outlined
+            </mat-icon>
+          </mat-form-field>
+        </section>
+        <mat-form-field appearance="outline" class="mat-block">
+          <mat-label translate>gateway.statistics.check-connectors-configuration</mat-label>
+          <input matInput formControlName="checkConnectorsConfigurationInSeconds" type="number" min="0"/>
+          <mat-error
+            *ngIf="gatewayConfigGroup.get('thingsboard.checkConnectorsConfigurationInSeconds').hasError('required')">
+            {{ 'gateway.statistics.check-connectors-configuration-required' | translate }}
+          </mat-error>
+          <mat-error
+            *ngIf="gatewayConfigGroup.get('thingsboard.checkConnectorsConfigurationInSeconds').hasError('min')">
+            {{ 'gateway.statistics.check-connectors-configuration-min' | translate }}
+          </mat-error>
+          <mat-error
+            *ngIf="gatewayConfigGroup.get('thingsboard.checkConnectorsConfigurationInSeconds').hasError('pattern')">
+            {{ 'gateway.statistics.check-connectors-configuration-pattern' | translate }}
+          </mat-error>
+        </mat-form-field>
+      </div>
+    </div>
+  </mat-tab>
+</mat-tab-group>
+<div mat-dialog-actions fxLayoutAlign="start center">
+  <button mat-button color="primary"
+          type="button"
+          *ngIf="dialogRef"
+          (click)="cancel()">
+    {{ 'action.cancel' | translate }}
+  </button>
+  <button mat-raised-button color="primary"
+          type="button"
+          [disabled]="gatewayConfigGroup.invalid || !gatewayConfigGroup.dirty"
+          (click)="saveConfig()">
+    {{ 'action.save' | translate }}
+  </button>
+</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss
index 1bf599727d..803654734f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.scss
@@ -16,14 +16,13 @@
 :host {
   width: 100%;
   height: 100%;
-  display: block;
+  display: flex;
+  flex-direction: column;
 
-  .mat-icon {
-    color: rgba(0, 0, 0, .12);
-  }
-
-  .tb-form-panel {
-    margin-bottom: 20px;
+  .configuration-block {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
   }
 
   .mat-toolbar {
@@ -31,113 +30,37 @@
     color: rgba(0, 0, 0, .87) !important;
   }
 
-  .mat-content {
-    .expansion-panel-header {
-      font-weight: 600;
-      color: rgba(0, 0, 0, .87) !important;
-    }
-
-    mat-slide-toggle {
-      margin-bottom: 16px;
-    }
-
-    mat-form-field {
-      margin-right: 15px;
-    }
-
-    .slider-icon {
-      position: absolute;
-      transform: translateY(-3px);
-    }
-
-    .block-title {
-      font-size: 20px;
-      font-weight: 400;
-      padding-top: 16px;
-    }
-
-    .hover-cursor {
-      cursor: pointer;
-    }
-  }
-
-  .security-toggle-group {
-    margin-bottom: 15px;
+  .toggle-group {
     margin-right: auto;
   }
 
-  .logs-label {
-    font-weight: 500;
-    margin-bottom: 10px;
-  }
-
-  .statistics-block {
-    margin-bottom: 15px;
-    padding-left: 15px;
-    padding-top: 15px;
-  }
-
   .first-capital {
     text-transform: capitalize;
   }
 
-  mat-panel-title {
-    display: block;
-    padding-top: 20px;
-  }
-
-  mat-panel-title span {
-    display: block;
-    padding-left: 0;
-    padding-top: 5px;
-  }
-
-  .tb-hint {
-    font-size: 13px;
-    color: rgba(0, 0, 0, .54);
-    width: fit-content;
-    cursor: pointer;
-    text-transform: none !important;
-  }
-
-  .line-break {
-    width: 100%;
-  }
-
   textarea {
     resize: none;
   }
-}
-
-:host ::ng-deep {
-  .mat-tab-label-active {
-    color: white;
-    opacity: 1;
-  }
-
-  .mat-tab-label, .mat-tab-label-active{
-    min-width: 50px !important;
-    padding: 3px !important;
-    margin: 3px !important;
-    flex-grow: 1;
-  }
 
-  .mat-ink-bar {
-    height: 100%;
-    z-index: -10;
-    border-radius: 5px;
+  .saving-period {
+    flex: 1;
   }
+}
 
+:host ::ng-deep {
   .pointer-event {
     pointer-events: all;
   }
 
-  .mat-mdc-form-field-icon-suffix {
-    z-index: 100;
+  .toggle-group span {
+    padding: 0 25px;
   }
 
-  .security-toggle-group span {
-    padding: 0 25px;
+  .mat-mdc-form-field-icon-suffix {
+    color: #E0E0E0;
+    &:hover {
+      color: #9E9E9E;
+    }
   }
 }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.ts
index a57bd6750e..bef0c2cc74 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.ts
@@ -15,15 +15,11 @@
 ///
 
 import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { Router } from '@angular/router';
 import {
   FormArray,
   FormBuilder,
   FormControl,
   FormGroup,
-  UntypedFormGroup,
   ValidationErrors,
   ValidatorFn,
   Validators
@@ -41,79 +37,17 @@ import { Observable, of } from 'rxjs';
 import { mergeMap } from 'rxjs/operators';
 import { DeviceCredentials, DeviceCredentialsType } from '@shared/models/device.models';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
-
-export enum StorageTypes {
-  MEMORY = 'memory',
-  FILE = 'file',
-  SQLITE = 'sqlite'
-}
-
-export enum GatewayLogLevel {
-  none = 'NONE',
-  critical = 'CRITICAL',
-  error = 'ERROR',
-  warning = 'WARNING',
-  info = 'INFO',
-  debug = 'DEBUG'
-}
-
-export enum LogSavingPeriod {
-  days = 'D',
-  hours = 'H',
-  minutes = 'M',
-  seconds = 'S'
-}
-
-export enum LocalLogsConfigs {
-  service = 'service',
-  connector = 'connector',
-  converter = 'converter',
-  tb_connection = 'tb_connection',
-  storage = 'storage',
-  extension = 'extension'
-}
-
-export const localLogsConfigLabels = new Map<LocalLogsConfigs, string>([
-  [LocalLogsConfigs.service, 'Service'],
-  [LocalLogsConfigs.connector, 'Connector'],
-  [LocalLogsConfigs.converter, 'Converter'],
-  [LocalLogsConfigs.tb_connection, 'TB Connection'],
-  [LocalLogsConfigs.storage, 'Storage'],
-  [LocalLogsConfigs.extension, 'Extension']
-]);
-
-export const logSavingPeriodTranslations = new Map<LogSavingPeriod, string>(
-  [
-    [LogSavingPeriod.days, 'gateway.logs.days'],
-    [LogSavingPeriod.hours, 'gateway.logs.hours'],
-    [LogSavingPeriod.minutes, 'gateway.logs.minutes'],
-    [LogSavingPeriod.seconds, 'gateway.logs.seconds']
-  ]
-);
-
-export const storageTypesTranslations = new Map<StorageTypes, string>(
-  [
-    [StorageTypes.MEMORY, 'gateway.storage-types.memory-storage'],
-    [StorageTypes.FILE, 'gateway.storage-types.file-storage'],
-    [StorageTypes.SQLITE, 'gateway.storage-types.sqlite']
-  ]
-);
-
-export enum SecurityTypes {
-  ACCESS_TOKEN = 'accessToken',
-  USERNAME_PASSWORD = 'usernamePassword',
-  TLS_ACCESS_TOKEN = 'tlsAccessToken',
-  TLS_PRIVATE_KEY = 'tlsPrivateKey'
-}
-
-export const securityTypesTranslationsMap = new Map<SecurityTypes, string>(
-  [
-    [SecurityTypes.ACCESS_TOKEN, 'gateway.security-types.access-token'],
-    [SecurityTypes.USERNAME_PASSWORD, 'gateway.security-types.username-password'],
-    [SecurityTypes.TLS_ACCESS_TOKEN, 'gateway.security-types.tls-access-token'],
-    // [SecurityTypes.TLS_PRIVATE_KEY, 'gateway.security-types.tls-private-key'],
-  ]
-);
+import {
+  GatewayLogLevel,
+  GecurityTypesTranslationsMap,
+  LocalLogsConfigTranslateMap,
+  LocalLogsConfigs,
+  LogSavingPeriod,
+  LogSavingPeriodTranslations,
+  SecurityTypes,
+  StorageTypes,
+  StorageTypesTranslationMap
+} from './gateway-widget.models';
 
 @Component({
   selector: 'tb-gateway-configuration',
@@ -124,13 +58,16 @@ export class GatewayConfigurationComponent implements OnInit {
 
   gatewayConfigGroup: FormGroup;
 
-  storageTypes = storageTypesTranslations;
+  StorageTypes = StorageTypes;
+  storageTypes = Object.values(StorageTypes) as StorageTypes[];
+  storageTypesTranslationMap = StorageTypesTranslationMap;
 
-  logSavingPeriods = logSavingPeriodTranslations;
+  logSavingPeriods = LogSavingPeriodTranslations;
 
-  localLogsConfigLabels = localLogsConfigLabels;
+  localLogsConfigs = Object.keys(LocalLogsConfigs) as LocalLogsConfigs[];
+  localLogsConfigTranslateMap = LocalLogsConfigTranslateMap;
 
-  securityTypes = securityTypesTranslationsMap;
+  securityTypes = GecurityTypesTranslationsMap;
 
   gatewayLogLevel = Object.values(GatewayLogLevel);
 
@@ -142,18 +79,13 @@ export class GatewayConfigurationComponent implements OnInit {
 
   logSelector: FormControl;
 
-  securityType: SecurityTypes;
+  private initialCredentials: DeviceCredentials;
 
-  initialCredentials: DeviceCredentials;
-
-
-  constructor(protected router: Router,
-              protected store: Store<AppState>,
-              protected fb: FormBuilder,
-              protected attributeService: AttributeService,
-              protected deviceService: DeviceService,
+  constructor(private fb: FormBuilder,
+              private attributeService: AttributeService,
+              private deviceService: DeviceService,
               private cd: ChangeDetectorRef,
-              public dialog: MatDialog) {
+              private dialog: MatDialog) {
   }
 
   ngOnInit() {
@@ -221,7 +153,7 @@ export class GatewayConfigurationComponent implements OnInit {
         type: ['remote', [Validators.required]],
         remote: this.fb.group({
           enabled: [false],
-          logLevel: [GatewayLogLevel.info, [Validators.required]],
+          logLevel: [GatewayLogLevel.INFO, [Validators.required]],
         }),
         local: this.fb.group({})
       })
@@ -231,7 +163,7 @@ export class GatewayConfigurationComponent implements OnInit {
       if (password && password !== '') {
         this.gatewayConfigGroup.get('thingsboard.security.username').setValidators([Validators.required]);
       } else {
-        this.gatewayConfigGroup.get('thingsboard.security.username').setValidators([]);
+        this.gatewayConfigGroup.get('thingsboard.security.username').clearValidators();
       }
       this.gatewayConfigGroup.get('thingsboard.security.username').updateValueAndValidity({emitEvent: false});
     });
@@ -258,10 +190,10 @@ export class GatewayConfigurationComponent implements OnInit {
         checkingDeviceActivityGroup.get('inactivityCheckPeriodSeconds').setValidators([Validators.min(1), Validators.required]);
       } else {
         checkingDeviceActivityGroup.get('inactivityTimeoutSeconds').clearValidators();
-        checkingDeviceActivityGroup.get('inactivityTimeoutSeconds').setErrors(null);
         checkingDeviceActivityGroup.get('inactivityCheckPeriodSeconds').clearValidators();
-        checkingDeviceActivityGroup.get('inactivityCheckPeriodSeconds').setErrors(null);
       }
+      checkingDeviceActivityGroup.get('inactivityTimeoutSeconds').updateValueAndValidity({emitEvent: false});
+      checkingDeviceActivityGroup.get('inactivityCheckPeriodSeconds').updateValueAndValidity({emitEvent: false});
     });
 
     this.gatewayConfigGroup.get('grpc.enabled').valueChanges.subscribe(value => {
@@ -287,16 +219,14 @@ export class GatewayConfigurationComponent implements OnInit {
         securityGroup.get('caCert').addValidators([Validators.required]);
         securityGroup.get('caCert').updateValueAndValidity();
       } else if (type === SecurityTypes.USERNAME_PASSWORD) {
-        securityGroup.addValidators([this.atLeastOneRequired(Validators.required, ['clientId', 'username'])])
-        // securityGroup.get('password').addValidators([Validators.required]);
-        // securityGroup.get('password').updateValueAndValidity();
+        securityGroup.addValidators([this.atLeastOneRequired(Validators.required, ['clientId', 'username'])]);
       }
       securityGroup.updateValueAndValidity();
     });
 
-    securityGroup.get('caCert').valueChanges.subscribe(_ => this.cd.detectChanges());
-    securityGroup.get('privateKey').valueChanges.subscribe(_ => this.cd.detectChanges());
-    securityGroup.get('cert').valueChanges.subscribe(_ => this.cd.detectChanges());
+    securityGroup.get('caCert').valueChanges.subscribe(() => this.cd.detectChanges());
+    securityGroup.get('privateKey').valueChanges.subscribe(() => this.cd.detectChanges());
+    securityGroup.get('cert').valueChanges.subscribe(() => this.cd.detectChanges());
 
     const storageGroup = this.gatewayConfigGroup.get('storage') as FormGroup;
     storageGroup.get('type').valueChanges.subscribe(type => {
@@ -306,6 +236,8 @@ export class GatewayConfigurationComponent implements OnInit {
           [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]);
         storageGroup.get('max_records_count').addValidators(
           [Validators.min(1), Validators.pattern(/^-?[0-9]+$/), Validators.required]);
+        storageGroup.get('read_records_count').updateValueAndValidity({emitEvent: false});
+        storageGroup.get('max_records_count').updateValueAndValidity({emitEvent: false});
       } else if (type === StorageTypes.FILE) {
         storageGroup.get('data_folder_path').addValidators([Validators.required]);
         storageGroup.get('max_file_count').addValidators(
@@ -314,20 +246,27 @@ export class GatewayConfigurationComponent implements OnInit {
           [Validators.min(1), Validators.pattern(/^-?[0-9]+$/), Validators.required]);
         storageGroup.get('max_records_per_file').addValidators(
           [Validators.min(1), Validators.pattern(/^-?[0-9]+$/), Validators.required]);
+        storageGroup.get('data_folder_path').updateValueAndValidity({emitEvent: false});
+        storageGroup.get('max_file_count').updateValueAndValidity({emitEvent: false});
+        storageGroup.get('max_read_records_count').updateValueAndValidity({emitEvent: false});
+        storageGroup.get('max_records_per_file').updateValueAndValidity({emitEvent: false});
       } else if (type === StorageTypes.SQLITE) {
         storageGroup.get('data_file_path').addValidators([Validators.required]);
         storageGroup.get('messages_ttl_check_in_hours').addValidators(
           [Validators.min(1), Validators.pattern(/^-?[0-9]+$/), Validators.required]);
         storageGroup.get('messages_ttl_in_days').addValidators(
           [Validators.min(1), Validators.pattern(/^-?[0-9]+$/), Validators.required]);
+        storageGroup.get('data_file_path').updateValueAndValidity({emitEvent: false});
+        storageGroup.get('messages_ttl_check_in_hours').updateValueAndValidity({emitEvent: false});
+        storageGroup.get('messages_ttl_in_days').updateValueAndValidity({emitEvent: false});
       }
     });
 
     this.fetchConfigAttribute(this.device);
   }
 
-  atLeastOneRequired(validator: ValidatorFn, controls: string[] = null) {
-    return (group: UntypedFormGroup): ValidationErrors | null => {
+  private atLeastOneRequired(validator: ValidatorFn, controls: string[] = null) {
+    return (group: FormGroup): ValidationErrors | null => {
       if (!controls) {
         controls = Object.keys(group.controls);
       }
@@ -337,22 +276,10 @@ export class GatewayConfigurationComponent implements OnInit {
     };
   }
 
-  updateSecurityValidators(value: SecurityTypes) {
-    this.gatewayConfigGroup.get('thingsboard.security.type').setValue(value, {emitEvent: true});
-    this.gatewayConfigGroup.get('thingsboard.security.type').markAsDirty();
-  }
-
-  updateLogType(value: LocalLogsConfigs) {
-    this.logSelector.setValue(value);
-  }
-
-  updateStorageType(value: StorageTypes) {
-    this.gatewayConfigGroup.get('storage.type').setValue(value, {emitEvent: true});
-    this.gatewayConfigGroup.get('storage.type').markAsDirty();
-  }
-
-  fetchConfigAttribute(entityId: EntityId) {
-    if (entityId.id === NULL_UUID) return;
+  private fetchConfigAttribute(entityId: EntityId) {
+    if (entityId.id === NULL_UUID) {
+      return;
+    }
     this.attributeService.getEntityAttributes(entityId, AttributeScope.CLIENT_SCOPE,
       ['general_configuration', 'grpc_configuration', 'logs_configuration', 'storage_configuration', 'RemoteLoggingLevel']).pipe(
       mergeMap(attributes => attributes.length ? of(attributes) : this.attributeService.getEntityAttributes(
@@ -397,24 +324,26 @@ export class GatewayConfigurationComponent implements OnInit {
         if (remoteLoggingLevel) {
           const remoteLogsFormGroup = this.gatewayConfigGroup.get('logs.remote');
           remoteLogsFormGroup.patchValue({
-            enabled: remoteLoggingLevel !== GatewayLogLevel.none,
+            enabled: remoteLoggingLevel !== GatewayLogLevel.NONE,
             logLevel: remoteLoggingLevel
           }, {emitEvent: false});
           remoteLogsFormGroup.markAsPristine();
         }
         this.cd.detectChanges();
       } else {
-        this.checkAndFetchCredentials({});
+        this.checkAndFetchCredentials();
       }
     });
   }
 
-  checkAndFetchCredentials(security): void {
+  private checkAndFetchCredentials(security: any = {}): void {
     if (security.type !== SecurityTypes.TLS_PRIVATE_KEY) {
       this.deviceService.getDeviceCredentials(this.device.id).subscribe(credentials => {
         this.initialCredentials = credentials;
         if (credentials.credentialsType === DeviceCredentialsType.ACCESS_TOKEN || security.type === SecurityTypes.TLS_ACCESS_TOKEN) {
-          this.gatewayConfigGroup.get('thingsboard.security.type').setValue(security.type === SecurityTypes.TLS_ACCESS_TOKEN? SecurityTypes.TLS_ACCESS_TOKEN : SecurityTypes.ACCESS_TOKEN);
+          this.gatewayConfigGroup.get('thingsboard.security.type').setValue(security.type === SecurityTypes.TLS_ACCESS_TOKEN
+                                                                              ? SecurityTypes.TLS_ACCESS_TOKEN
+                                                                              : SecurityTypes.ACCESS_TOKEN);
           this.gatewayConfigGroup.get('thingsboard.security.accessToken').setValue(credentials.credentialsId);
           if(security.type === SecurityTypes.TLS_ACCESS_TOKEN) {
             this.gatewayConfigGroup.get('thingsboard.security.caCert').setValue(security.caCert);
@@ -432,7 +361,7 @@ export class GatewayConfigurationComponent implements OnInit {
     }
   }
 
-  logsToObj(logsConfig) {
+  private logsToObj(logsConfig: any) {
     const logsObject = {
       local: {}
     };
@@ -453,43 +382,42 @@ export class GatewayConfigurationComponent implements OnInit {
     return {local: logsObject, logFormat, dateFormat};
   }
 
-  toggleRpcFields(enable: boolean) {
+  private toggleRpcFields(enable: boolean) {
     const grpcGroup = this.gatewayConfigGroup.get('grpc') as FormGroup;
     if (enable) {
-      grpcGroup.get('serverPort').enable();
-      grpcGroup.get('keepAliveTimeMs').enable();
-      grpcGroup.get('keepAliveTimeoutMs').enable();
-      grpcGroup.get('keepalivePermitWithoutCalls').enable();
-      grpcGroup.get('maxPingsWithoutData').enable();
-      grpcGroup.get('minTimeBetweenPingsMs').enable();
-      grpcGroup.get('minPingIntervalWithoutDataMs').enable();
+      grpcGroup.get('serverPort').enable({emitEvent: false});
+      grpcGroup.get('keepAliveTimeMs').enable({emitEvent: false});
+      grpcGroup.get('keepAliveTimeoutMs').enable({emitEvent: false});
+      grpcGroup.get('keepalivePermitWithoutCalls').enable({emitEvent: false});
+      grpcGroup.get('maxPingsWithoutData').enable({emitEvent: false});
+      grpcGroup.get('minTimeBetweenPingsMs').enable({emitEvent: false});
+      grpcGroup.get('minPingIntervalWithoutDataMs').enable({emitEvent: false});
     } else {
-      grpcGroup.get('serverPort').disable();
-      grpcGroup.get('keepAliveTimeMs').disable();
-      grpcGroup.get('keepAliveTimeoutMs').disable();
-      grpcGroup.get('keepalivePermitWithoutCalls').disable();
-      grpcGroup.get('maxPingsWithoutData').disable();
-      grpcGroup.get('minTimeBetweenPingsMs').disable();
-      grpcGroup.get('minPingIntervalWithoutDataMs').disable();
+      grpcGroup.get('serverPort').disable({emitEvent: false});
+      grpcGroup.get('keepAliveTimeMs').disable({emitEvent: false});
+      grpcGroup.get('keepAliveTimeoutMs').disable({emitEvent: false});
+      grpcGroup.get('keepalivePermitWithoutCalls').disable({emitEvent: false});
+      grpcGroup.get('maxPingsWithoutData').disable({emitEvent: false});
+      grpcGroup.get('minTimeBetweenPingsMs').disable({emitEvent: false});
+      grpcGroup.get('minPingIntervalWithoutDataMs').disable({emitEvent: false});
     }
   }
 
 
-  addCommand(command?): void {
-    const data = command || {};
+  addCommand(command: any = {}): void {
     const commandsFormArray = this.commandFormArray();
     const commandFormGroup = this.fb.group({
-      attributeOnGateway: [data.attributeOnGateway || null, [Validators.required]],
-      command: [data.command || null, [Validators.required]],
-      timeout: [data.timeout || null, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
+      attributeOnGateway: [command.attributeOnGateway || null, [Validators.required]],
+      command: [command.command || null, [Validators.required]],
+      timeout: [command.timeout || null, [Validators.required, Validators.min(1), Validators.pattern(/^-?[0-9]+$/)]],
     });
     commandsFormArray.push(commandFormGroup);
   }
 
-  addLocalLogConfig(name, config): void {
+  private addLocalLogConfig(name: string, config: any): void {
     const localLogsFormGroup = this.gatewayConfigGroup.get('logs.local') as FormGroup;
     const configGroup = this.fb.group({
-      logLevel: [config.logLevel || GatewayLogLevel.info, [Validators.required]],
+      logLevel: [config.logLevel || GatewayLogLevel.INFO, [Validators.required]],
       filePath: [config.filePath || './logs', [Validators.required]],
       backupCount: [config.backupCount || 7, [Validators.required, Validators.min(0)]],
       savingTime: [config.savingTime || 3, [Validators.required, Validators.min(0)]],
@@ -507,12 +435,14 @@ export class GatewayConfigurationComponent implements OnInit {
   }
 
   removeCommandControl(index: number, event: any): void {
-    if (event.pointerType === '') return;
+    if (event.pointerType === '') {
+      return;
+    }
     this.commandFormArray().removeAt(index);
     this.gatewayConfigGroup.markAsDirty();
   }
 
-  removeAllSecurityValidators(): void {
+  private removeAllSecurityValidators(): void {
     const securityGroup = this.gatewayConfigGroup.get('thingsboard.security') as FormGroup;
     securityGroup.clearValidators();
     for (const controlsKey in securityGroup.controls) {
@@ -524,7 +454,7 @@ export class GatewayConfigurationComponent implements OnInit {
     }
   }
 
-  removeAllStorageValidators(): void {
+  private removeAllStorageValidators(): void {
     const storageGroup = this.gatewayConfigGroup.get('storage') as FormGroup;
     for (const storageKey in storageGroup.controls) {
       if (storageKey !== 'type') {
@@ -535,7 +465,7 @@ export class GatewayConfigurationComponent implements OnInit {
     }
   }
 
-  removeEmpty(obj) {
+  private removeEmpty(obj: any) {
     return Object.fromEntries(
       Object.entries(obj)
         .filter(([_, v]) => v != null)
@@ -543,7 +473,7 @@ export class GatewayConfigurationComponent implements OnInit {
     );
   }
 
-  generateLogsFile(logsObj) {
+  private generateLogsFile(logsObj: any) {
     const logAttrObj = {
       version: 1,
       disable_existing_loggers: false,
@@ -591,7 +521,7 @@ export class GatewayConfigurationComponent implements OnInit {
     return logAttrObj;
   }
 
-  createHandlerObj(logObj, key) {
+  private createHandlerObj(logObj: any, key: string) {
     return {
       class: 'thingsboard_gateway.tb_utility.tb_handler.TimedRotatingFileHandler',
       formatter: 'LogFormatter',
@@ -603,7 +533,7 @@ export class GatewayConfigurationComponent implements OnInit {
     };
   }
 
-  createLoggerObj(logObj, key) {
+  private createLoggerObj(logObj: any, key: string) {
     return {
       handlers: [`${key}Handler`, 'consoleHandler'],
       level: logObj.logLevel,
@@ -617,7 +547,7 @@ export class GatewayConfigurationComponent implements OnInit {
     const attributes = [];
     attributes.push({
       key: 'RemoteLoggingLevel',
-      value: value.logs.remote.enabled ? value.logs.remote.logLevel : GatewayLogLevel.none
+      value: value.logs.remote.enabled ? value.logs.remote.logLevel : GatewayLogLevel.NONE
     });
     delete value.connectors;
     attributes.push({
@@ -642,18 +572,18 @@ export class GatewayConfigurationComponent implements OnInit {
 
 
     this.attributeService.saveEntityAttributes(this.device, AttributeScope.SHARED_SCOPE, attributes).subscribe(_ => {
-      this.updateCredentials(value.thingsboard.security).subscribe(_ => {
+      this.updateCredentials(value.thingsboard.security).subscribe(() => {
         if (this.dialogRef) {
           this.dialogRef.close();
         } else {
           this.gatewayConfigGroup.markAsPristine();
           this.cd.detectChanges();
         }
-      })
+      });
     });
   }
 
-  updateCredentials(securityConfig): Observable<any> {
+  private updateCredentials(securityConfig: any): Observable<any> {
     let updateCredentials = false;
     let newCredentials = {};
     if (securityConfig.type === SecurityTypes.USERNAME_PASSWORD) {
@@ -661,14 +591,23 @@ export class GatewayConfigurationComponent implements OnInit {
         updateCredentials = true;
       } else {
         const parsedCredentials = JSON.parse(this.initialCredentials.credentialsValue);
-        updateCredentials = !(parsedCredentials.clientId === securityConfig.clientId && parsedCredentials.userName === securityConfig.username && parsedCredentials.password === securityConfig.password);
+        updateCredentials = !(
+          parsedCredentials.clientId === securityConfig.clientId &&
+          parsedCredentials.userName === securityConfig.username &&
+          parsedCredentials.password === securityConfig.password);
       }
       if (updateCredentials) {
-        let credentialsValue: { clientId?, userName?, password? } = {};
+        const credentialsValue: { clientId?: string; userName?: string; password?: string } = {};
         const credentialsType = DeviceCredentialsType.MQTT_BASIC;
-        if (securityConfig.clientId) credentialsValue.clientId = securityConfig.clientId;
-        if (securityConfig.username) credentialsValue.userName = securityConfig.username;
-        if (securityConfig.password) credentialsValue.password = securityConfig.password;
+        if (securityConfig.clientId) {
+          credentialsValue.clientId = securityConfig.clientId;
+        }
+        if (securityConfig.username) {
+          credentialsValue.userName = securityConfig.username;
+        }
+        if (securityConfig.password) {
+          credentialsValue.password = securityConfig.password;
+        }
         newCredentials = {
             credentialsType,
             credentialsValue: JSON.stringify(credentialsValue)
@@ -684,12 +623,12 @@ export class GatewayConfigurationComponent implements OnInit {
         newCredentials = {
           credentialsType: DeviceCredentialsType.ACCESS_TOKEN,
           credentialsId: securityConfig.accessToken
-        }
+        };
       }
     }
 
     if (updateCredentials) {
-      return this.deviceService.saveDeviceCredentials({...this.initialCredentials,...newCredentials})
+      return this.deviceService.saveDeviceCredentials({...this.initialCredentials,...newCredentials});
     }
     return of(null);
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
index 6e4178fccd..9e852c0fcb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
@@ -15,82 +15,102 @@
     limitations under the License.
 
 -->
-<form style="height: calc(100% - 7px)" fxLayout="column">
-  <div fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="15px" fxFlex class="connector-container">
-    <mat-card fxLayout="column" fxFlex.lt-lg style="overflow: auto; min-height: 35vh">
-      <mat-toolbar class="mat-mdc-table-toolbar">
-        <h2>{{ 'gateway.connectors' | translate }}</h2>
-        <span fxFlex></span>
-        <button mat-icon-button
-                [disabled]="isLoading$ | async"
-                (click)="addAttribute()"
-                matTooltip="{{ 'action.add' | translate }}"
-                matTooltipPosition="above">
-          <mat-icon>add</mat-icon>
-        </button>
-      </mat-toolbar>
-      <table mat-table [dataSource]="dataSource"
-             matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
-             matSortDisableClear>
-        <ng-container matColumnDef="enabled" sticky>
-          <mat-header-cell *matHeaderCellDef style="width: 30px;">
-            {{ 'gateway.connectors-table-enabled' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let attribute">
-            <mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)"
-                              (click)="$event.stopPropagation(); enableConnector(attribute)"></mat-slide-toggle>
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="key">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%">
-            {{ 'gateway.connectors-table-name' | translate }}</mat-header-cell>
-          <mat-cell *matCellDef="let attribute">
-            {{ attribute.key }}
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="type">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
-            {{ 'gateway.connectors-table-type' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
-            {{ returnType(attribute) }}
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="syncStatus">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
-            {{ 'gateway.configuration' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
-              <div
-              [ngClass]="{
-              'status-block': true,
-              'status-sync':isConnectorSynced(attribute),
-              'status-unsync':!isConnectorSynced(attribute)
-              }">{{isConnectorSynced(attribute)?'sync' : 'out of sync'}}</div>
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="errors">
-          <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
-            {{ 'gateway.connectors-table-status' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
-            <span class="dot"
-                  matTooltip="{{ 'Errors: '+ getErrorsCount(attribute)}}"
-                  matTooltipPosition="above"
-                  [ngClass]="{
-            'hasErrors': +getErrorsCount(attribute) > 0,
-            'noErrors': +getErrorsCount(attribute) == 0 || getErrorsCount(attribute) == ''
-            }"></span>
-          </mat-cell>
-        </ng-container>
-        <ng-container matColumnDef="actions" stickyEnd>
-          <mat-header-cell *matHeaderCellDef
-                           [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
-            {{ 'gateway.connectors-table-actions' | translate }}
-          </mat-header-cell>
-          <mat-cell *matCellDef="let attribute"
-                    [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
-            <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+<div class="connector-container tb-form-panel no-border">
+  <section class="table-container tb-form-panel stroked no-padding flex">
+    <mat-toolbar class="mat-mdc-table-toolbar">
+      <h2>{{ 'gateway.connectors' | translate }}</h2>
+      <span fxFlex></span>
+      <button mat-icon-button
+              [disabled]="isLoading$ | async"
+              (click)="addAttribute()"
+              matTooltip="{{ 'action.add' | translate }}"
+              matTooltipPosition="above">
+        <mat-icon>add</mat-icon>
+      </button>
+    </mat-toolbar>
+    <table mat-table [dataSource]="dataSource"
+           matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
+           matSortDisableClear>
+      <ng-container matColumnDef="enabled" sticky>
+        <mat-header-cell *matHeaderCellDef style="width: 60px;min-width: 60px;">
+          {{ 'gateway.connectors-table-enabled' | translate }}
+        </mat-header-cell>
+        <mat-cell *matCellDef="let attribute">
+          <mat-slide-toggle [checked]="activeConnectors.includes(attribute.key)"
+                            (click)="$event.stopPropagation(); enableConnector(attribute)"></mat-slide-toggle>
+        </mat-cell>
+      </ng-container>
+      <ng-container matColumnDef="key">
+        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 40%">
+          {{ 'gateway.connectors-table-name' | translate }}</mat-header-cell>
+        <mat-cell *matCellDef="let attribute">
+          {{ attribute.key }}
+        </mat-cell>
+      </ng-container>
+      <ng-container matColumnDef="type">
+        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
+          {{ 'gateway.connectors-table-type' | translate }}
+        </mat-header-cell>
+        <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
+          {{ returnType(attribute) }}
+        </mat-cell>
+      </ng-container>
+      <ng-container matColumnDef="syncStatus">
+        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
+          {{ 'gateway.configuration' | translate }}
+        </mat-header-cell>
+        <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
+            <div class="status" [class]="isConnectorSynced(attribute) ? 'status-sync' : 'status-unsync'">
+              {{ isConnectorSynced(attribute) ? 'sync' : 'out of sync' }}
+            </div>
+        </mat-cell>
+      </ng-container>
+      <ng-container matColumnDef="errors">
+        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 30%">
+          {{ 'gateway.connectors-table-status' | translate }}
+        </mat-header-cell>
+        <mat-cell *matCellDef="let attribute" style="text-transform: uppercase">
+          <span class="dot"
+                matTooltip="{{ 'Errors: '+ getErrorsCount(attribute)}}"
+                matTooltipPosition="above"
+                [class]="{'hasErrors': +getErrorsCount(attribute) > 0,
+                          'noErrors': +getErrorsCount(attribute) === 0 || getErrorsCount(attribute) === ''}"></span>
+        </mat-cell>
+      </ng-container>
+      <ng-container matColumnDef="actions" stickyEnd>
+        <mat-header-cell *matHeaderCellDef
+                         [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
+          {{ 'gateway.connectors-table-actions' | translate }}
+        </mat-header-cell>
+        <mat-cell *matCellDef="let attribute"
+                  [ngStyle.gt-md]="{ minWidth: '144px', maxWidth: '144px', width: '144px'}">
+          <div fxHide fxShow.gt-md fxFlex fxLayout="row" fxLayoutAlign="end">
+            <button mat-icon-button
+                    matTooltip="RPC"
+                    matTooltipPosition="above"
+                    (click)="connectorRpc(attribute, $event)">
+              <mat-icon>private_connectivity</mat-icon>
+            </button>
+            <button mat-icon-button
+                    matTooltip="Logs"
+                    matTooltipPosition="above"
+                    (click)="connectorLogs(attribute, $event)">
+              <mat-icon>list</mat-icon>
+            </button>
+            <button mat-icon-button
+                    matTooltip="Delete connector"
+                    matTooltipPosition="above"
+                    (click)="deleteConnector(attribute, $event)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+          <div fxHide fxShow.lt-lg>
+            <button mat-icon-button
+                    (click)="$event.stopPropagation()"
+                    [matMenuTriggerFor]="cellActionsMenu">
+              <mat-icon class="material-icons">more_vert</mat-icon>
+            </button>
+            <mat-menu #cellActionsMenu="matMenu" xPosition="before">
               <button mat-icon-button
                       matTooltip="RPC"
                       matTooltipPosition="above"
@@ -98,7 +118,7 @@
                 <mat-icon>private_connectivity</mat-icon>
               </button>
               <button mat-icon-button
-                      matTooltip="Logs"
+                      matTooltip="Delete connector"
                       matTooltipPosition="above"
                       (click)="connectorLogs(attribute, $event)">
                 <mat-icon>list</mat-icon>
@@ -109,90 +129,61 @@
                       (click)="deleteConnector(attribute, $event)">
                 <mat-icon>delete</mat-icon>
               </button>
-            </div>
-            <div fxHide fxShow.lt-lg>
-              <button mat-icon-button
-                      (click)="$event.stopPropagation()"
-                      [matMenuTriggerFor]="cellActionsMenu">
-                <mat-icon class="material-icons">more_vert</mat-icon>
-              </button>
-              <mat-menu #cellActionsMenu="matMenu" xPosition="before">
-                <button mat-icon-button
-                        matTooltip="RPC"
-                        matTooltipPosition="above"
-                        (click)="connectorRpc(attribute, $event)">
-                  <mat-icon>private_connectivity</mat-icon>
-                </button>
-                <button mat-icon-button
-                        matTooltip="Delete connector"
-                        matTooltipPosition="above"
-                        (click)="connectorLogs(attribute, $event)">
-                  <mat-icon>list</mat-icon>
-                </button>
-                <button mat-icon-button
-                        matTooltip="Delete connector"
-                        matTooltipPosition="above"
-                        (click)="deleteConnector(attribute, $event)">
-                  <mat-icon>delete</mat-icon>
-                </button>
-              </mat-menu>
-            </div>
-          </mat-cell>
-        </ng-container>
-        <mat-header-row [ngClass]="{'mat-row-select': true}"
-                        *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-        <mat-row [ngClass]="{'mat-row-select': true,
-                'tb-current-entity': isSameConnector(attribute)}"
-                 *matRowDef="let attribute; columns: displayedColumns;" (click)="selectConnector(attribute)"></mat-row>
-      </table>
-      <mat-divider></mat-divider>
-    </mat-card>
-    <div [formGroup]="connectorForm" fxLayout="column">
-      <mat-card fxLayout="row" fxLayout.lt-lg="column" fxLayoutGap="15px" fxLayoutGap.lt-lg="5px">
-        <mat-form-field class="mat-block tb-value-type">
-          <mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label>
-          <input matInput formControlName="name" #nameInput/>
-        </mat-form-field>
-        <mat-form-field class="mat-block tb-value-type">
-          <mat-label>{{ 'gateway.connectors-table-type' | translate }}</mat-label>
-          <mat-select formControlName="type">
-            <mat-option style="text-transform: uppercase"
-                        *ngFor="let type of gatewayConnectorDefaultTypes | keyvalue" [value]="type.key">{{type.value}}</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field class="mat-block tb-value-type" *ngIf="connectorForm.get('type').value === 'grpc'">
-          <mat-label>{{ 'gateway.connectors-table-key' | translate }}</mat-label>
-          <input matInput formControlName="key"/>
-        </mat-form-field>
-        <mat-form-field class="mat-block tb-value-type" *ngIf="connectorForm.get('type').value === 'custom'">
-          <mat-label>{{ 'gateway.connectors-table-class' | translate }}</mat-label>
-          <input matInput formControlName="class"/>
-        </mat-form-field>
-        <mat-form-field class="mat-block tb-value-type">
-          <mat-label translate>gateway.remote-logging-level</mat-label>
-          <mat-select formControlName="logLevel">
-            <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{logLevel}}</mat-option>
-          </mat-select>
-        </mat-form-field>
-      </mat-card>
-      <mat-card fxLayout="column" fxFlex>
-        <tb-json-object-edit
-          fxFlex
-          fxLayout="column"
-          required
-          label="{{ 'gateway.configuration' | translate }}"
-          formControlName="configurationJson">
-        </tb-json-object-edit>
-        <div fxLayoutAlign="start center">
-          <button mat-raised-button color="primary"
-                  class="action-btns"
-                  type="button"
-                  [disabled]="!connectorForm.dirty || connectorForm.invalid"
-                  (click)="saveConnector()">
-            {{ 'action.save' | translate }}
-          </button>
-        </div>
-      </mat-card>
-    </div>
-  </div>
-</form>
+            </mat-menu>
+          </div>
+        </mat-cell>
+      </ng-container>
+      <mat-header-row class="mat-row-select"
+                      *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+      <mat-row class="mat-row-select" [class]="{'tb-current-entity': isSameConnector(attribute)}"
+               *matRowDef="let attribute; columns: displayedColumns;" (click)="selectConnector(attribute)"></mat-row>
+    </table>
+  </section>
+  <section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding flex">
+    <section class="tb-form-row tb-not-inline-field same-padding input-container">
+      <mat-form-field class="flex" subscriptSizing="dynamic">
+        <mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label>
+        <input matInput formControlName="name" #nameInput/>
+      </mat-form-field>
+      <mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker>
+        <mat-label>{{ 'gateway.connectors-table-type' | translate }}</mat-label>
+        <mat-select formControlName="type">
+          <mat-option style="text-transform: uppercase"
+                      *ngFor="let type of gatewayConnectorDefaultTypes | keyvalue" [value]="type.key">{{ type.value }}</mat-option>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'grpc'" subscriptSizing="dynamic">
+        <mat-label>{{ 'gateway.connectors-table-key' | translate }}</mat-label>
+        <input matInput formControlName="key"/>
+      </mat-form-field>
+      <mat-form-field class="flex" *ngIf="connectorForm.get('type').value === 'custom'" subscriptSizing="dynamic">
+        <mat-label>{{ 'gateway.connectors-table-class' | translate }}</mat-label>
+        <input matInput formControlName="class"/>
+      </mat-form-field>
+      <mat-form-field class="flex" subscriptSizing="dynamic" hideRequiredMarker>
+        <mat-label translate>gateway.remote-logging-level</mat-label>
+        <mat-select formControlName="logLevel">
+          <mat-option *ngFor="let logLevel of gatewayLogLevel" [value]="logLevel">{{ logLevel }}</mat-option>
+        </mat-select>
+      </mat-form-field>
+    </section>
+    <section class="tb-form-panel stroked flex">
+      <tb-json-object-edit
+        class="flex"
+        fxLayout="column"
+        required
+        label="{{ 'gateway.configuration' | translate }}"
+        formControlName="configurationJson">
+      </tb-json-object-edit>
+      <div fxLayoutAlign="start center">
+        <button mat-raised-button color="primary"
+                class="action-button"
+                type="button"
+                [disabled]="!connectorForm.dirty || connectorForm.invalid"
+                (click)="saveConnector()">
+          {{ 'action.save' | translate }}
+        </button>
+      </div>
+    </section>
+  </section>
+</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.scss
index 1edb40967c..f4326f6abc 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.scss
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@import '../../../../../../../scss/constants';
+
 :host {
   width: 100%;
   height: 100%;
@@ -21,25 +23,24 @@
   padding: 0;
 
   .connector-container {
+    height: 100%;
     width: 100%;
+    flex-direction: row;
+    @media #{$mat-lt-lg} {
+      flex-direction: column;
+    }
 
-    & > mat-card, & > div {
-      min-width: calc(50% - 15px);
+    .table-container {
+      overflow: auto;
+      min-height: 35vh;
     }
 
-    mat-card {
-      margin: 10px;
-      padding: 10px;
-      max-width: 100%;
+    .flex {
+      flex: 1;
     }
-  }
 
-  .tb-entity-table {
-    .tb-entity-table-content {
-      width: 100%;
-      height: 100%;
-      background: #fff;
-      overflow: hidden;
+    .input-container {
+      height: auto;
     }
   }
 
@@ -48,43 +49,28 @@
     color: rgba(0, 0, 0, .87) !important;
   }
 
-  .mat-mdc-form-field {
-    flex-grow: 1;
-  }
-
-  mat-card {
-    padding-left: 10px;
-    background: transparent;
-  }
-
-  .mat-card-selected {
-    background-color: rgba(48, 86, 128, 0.1);
-  }
-
   .mat-mdc-slide-toggle {
-    margin: 15px;
+    margin: 0 8px;
   }
 
-  .status-block {
+  .status {
     text-align: center;
     border-radius: 16px;
     font-weight: 500;
     width: fit-content;
     padding: 5px 15px;
+    &-sync {
+      background: rgba(25, 128, 56, .06);
+      color: rgb(25, 128, 56);
+    }
+    &-unsync {
+      background: rgba(203, 37, 48, .06);
+      color: rgb(203, 37, 48);
+    }
   }
 
-  .status-sync {
-    background: rgba(25, 128, 56, .06);
-    color: rgb(25, 128, 56);
-  }
-
-  .status-unsync {
-    background: rgba(203, 37, 48, .06);
-    color: rgb(203, 37, 48);
-  }
-
-  .action-btns {
-    margin: 10px 10px 0;
+  .action-button {
+    margin: 0 15px;
   }
 
   mat-row {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts
index 14410c3b64..e1688357f5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.ts
@@ -17,14 +17,11 @@
 import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, NgZone, ViewChild } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { Router } from '@angular/router';
 import { FormBuilder, FormGroup, UntypedFormControl, ValidatorFn, Validators } from '@angular/forms';
 import { EntityId } from '@shared/models/id/entity-id';
-import { MatDialog } from '@angular/material/dialog';
 import { AttributeService } from '@core/http/attribute.service';
-import { DeviceService } from '@core/http/device.service';
 import { TranslateService } from '@ngx-translate/core';
-import { forkJoin } from 'rxjs';
+import { forkJoin, Observable } from 'rxjs';
 import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models';
 import { PageComponent } from '@shared/components/page.component';
 import { PageLink } from '@shared/models/page/page-link';
@@ -33,47 +30,20 @@ import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { MatSort } from '@angular/material/sort';
 import { TelemetryWebsocketService } from '@core/ws/telemetry-websocket.service';
 import { MatTableDataSource } from '@angular/material/table';
-import { GatewayLogLevel } from '@home/components/widget/lib/gateway/gateway-configuration.component';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
 import { DialogService } from '@core/services/dialog.service';
 import { WidgetContext } from '@home/models/widget-component.models';
-import { deepClone } from '@core/utils';
+import { camelCase, deepClone, isString } from '@core/utils';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 import { IWidgetSubscription, WidgetSubscriptionOptions } from '@core/api/widget-api.models';
 import { DatasourceType, widgetType } from '@shared/models/widget.models';
 import { UtilsService } from '@core/services/utils.service';
 import { EntityType } from '@shared/models/entity-type.models';
-
-
-export interface gatewayConnector {
-  name: string;
-  type: string;
-  configuration?: string;
-  configurationJson: string;
-  logLevel: string;
-  key?: string;
-}
-
-
-export const GatewayConnectorDefaultTypesTranslates = new Map<string, string>([
-  ['mqtt', 'MQTT'],
-  ['modbus', 'MODBUS'],
-  ['grpc', 'GRPC'],
-  ['opcua', 'OPCUA'],
-  ['opcua_asyncio', 'OPCUA ASYNCIO'],
-  ['ble', 'BLE'],
-  ['request', 'REQUEST'],
-  ['can', 'CAN'],
-  ['bacnet', 'BACNET'],
-  ['odbc', 'ODBC'],
-  ['rest', 'REST'],
-  ['snmp', 'SNMP'],
-  ['ftp', 'FTP'],
-  ['socket', 'SOCKET'],
-  ['xmpp', 'XMPP'],
-  ['ocpp', 'OCCP'],
-  ['custom', 'CUSTOM']
-]);
+import {
+  GatewayConnector,
+  GatewayConnectorDefaultTypesTranslates,
+  GatewayLogLevel
+} from './gateway-widget.models';
 
 @Component({
   selector: 'tb-gateway-connector',
@@ -84,12 +54,6 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
 
   pageLink: PageLink;
 
-  attributeDataSource: AttributeDatasource;
-
-  inactiveConnectorsDataSource: AttributeDatasource;
-
-  serverDataSource: AttributeDatasource;
-
   dataSource: MatTableDataSource<AttributeData>;
 
   displayedColumns = ['enabled', 'key', 'type', 'syncStatus', 'errors', 'actions'];
@@ -107,27 +71,29 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
 
   connectorForm: FormGroup;
 
-  viewsInited = false;
-
   textSearchMode: boolean;
 
   activeConnectors: Array<string>;
 
-  inactiveConnectors: Array<string>;
+  gatewayLogLevel = Object.values(GatewayLogLevel);
 
-  InitialActiveConnectors: Array<string>;
+  private inactiveConnectors: Array<string>;
 
-  gatewayLogLevel = Object.values(GatewayLogLevel);
+  private attributeDataSource: AttributeDatasource;
+
+  private inactiveConnectorsDataSource: AttributeDatasource;
 
-  activeData: Array<any> = [];
+  private serverDataSource: AttributeDatasource;
 
-  inactiveData: Array<any> = [];
+  private activeData: Array<any> = [];
 
-  sharedAttributeData: Array<AttributeData> = [];
+  private inactiveData: Array<any> = [];
 
-  initialConnector: gatewayConnector;
+  private sharedAttributeData: Array<AttributeData> = [];
 
-  subscriptionOptions: WidgetSubscriptionOptions = {
+  private initialConnector: GatewayConnector;
+
+  private subscriptionOptions: WidgetSubscriptionOptions = {
     callbacks: {
       onDataUpdated: () => this.ctx.ngZone.run(() => {
         this.onDataUpdated();
@@ -138,20 +104,17 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     }
   };
 
-  subscription: IWidgetSubscription;
+  private subscription: IWidgetSubscription;
 
-  constructor(protected router: Router,
-              protected store: Store<AppState>,
-              protected fb: FormBuilder,
-              protected translate: TranslateService,
-              protected attributeService: AttributeService,
-              protected deviceService: DeviceService,
-              protected dialogService: DialogService,
+  constructor(protected store: Store<AppState>,
+              private fb: FormBuilder,
+              private translate: TranslateService,
+              private attributeService: AttributeService,
+              private dialogService: DialogService,
               private telemetryWsService: TelemetryWebsocketService,
               private zone: NgZone,
               private utils: UtilsService,
-              private cd: ChangeDetectorRef,
-              public dialog: MatDialog) {
+              private cd: ChangeDetectorRef) {
     super(store);
     const sortOrder: SortOrder = {property: 'key', direction: Direction.ASC};
     this.pageLink = new PageLink(1000, 0, null, sortOrder);
@@ -186,16 +149,21 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
       return data[sortHeaderId] || data.value[sortHeaderId];
     };
 
-    this.viewsInited = true;
     if (this.device) {
-      if (this.device.id === NULL_UUID) return;
-      forkJoin(this.attributeService.getEntityAttributes(this.device, AttributeScope.SHARED_SCOPE, ['active_connectors']),
-        this.attributeService.getEntityAttributes(this.device, AttributeScope.SERVER_SCOPE, ['inactive_connectors'])).subscribe(attributes => {
+      if (this.device.id === NULL_UUID) {
+        return;
+      }
+      forkJoin([
+        this.attributeService.getEntityAttributes(this.device, AttributeScope.SHARED_SCOPE, ['active_connectors']),
+        this.attributeService.getEntityAttributes(this.device, AttributeScope.SERVER_SCOPE, ['inactive_connectors'])
+      ]).subscribe(attributes => {
         if (attributes.length) {
           this.activeConnectors = attributes[0].length ? attributes[0][0].value : [];
-          this.activeConnectors = typeof this.activeConnectors === 'string' ? JSON.parse(this.activeConnectors) : this.activeConnectors;
+          this.activeConnectors = isString(this.activeConnectors) ? JSON.parse(this.activeConnectors as any) : this.activeConnectors;
           this.inactiveConnectors = attributes[1].length ? attributes[1][0].value : [];
-          this.inactiveConnectors = typeof this.inactiveConnectors === 'string' ? JSON.parse(this.inactiveConnectors) : this.inactiveConnectors;
+          this.inactiveConnectors = isString(this.inactiveConnectors)
+                                      ? JSON.parse(this.inactiveConnectors as any)
+                                      : this.inactiveConnectors;
           this.updateData(true);
         } else {
           this.activeConnectors = [];
@@ -206,7 +174,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     }
   }
 
-  uniqNameRequired(): ValidatorFn {
+  private uniqNameRequired(): ValidatorFn {
     return (c: UntypedFormControl) => {
       const newName = c.value.trim().toLowerCase();
       const found = this.dataSource.data.find((connectorAttr) => {
@@ -229,7 +197,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
 
   saveConnector(): void {
     const value = this.connectorForm.value;
-    value.configuration = this.camelize(value.name) + '.json';
+    value.configuration = camelCase(value.name) + '.json';
     if (value.type !== 'grpc') {
       delete value.key;
     }
@@ -242,7 +210,9 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
       value
     }];
     const attributesToDelete = [];
-    const scope = (this.initialConnector && this.activeConnectors.includes(this.initialConnector.name)) ? AttributeScope.SHARED_SCOPE : AttributeScope.SERVER_SCOPE;
+    const scope = (this.initialConnector && this.activeConnectors.includes(this.initialConnector.name))
+                  ? AttributeScope.SHARED_SCOPE
+                  : AttributeScope.SERVER_SCOPE;
     let updateActiveConnectors = false;
     if (this.initialConnector && this.initialConnector.name !== value.name) {
       attributesToDelete.push({key: this.initialConnector.name});
@@ -256,19 +226,19 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
         this.inactiveConnectors.splice(inactiveIndex, 1);
       }
     }
-    if (!this.activeConnectors.includes(value.name) && scope == AttributeScope.SHARED_SCOPE) {
+    if (!this.activeConnectors.includes(value.name) && scope === AttributeScope.SHARED_SCOPE) {
       this.activeConnectors.push(value.name);
       updateActiveConnectors = true;
     }
-    if (!this.inactiveConnectors.includes(value.name) && scope == AttributeScope.SERVER_SCOPE) {
+    if (!this.inactiveConnectors.includes(value.name) && scope === AttributeScope.SERVER_SCOPE) {
       this.inactiveConnectors.push(value.name);
       updateActiveConnectors = true;
     }
     const tasks = [this.attributeService.saveEntityAttributes(this.device, scope, attributesToSave)];
     if (updateActiveConnectors) {
       tasks.push(this.attributeService.saveEntityAttributes(this.device, scope, [{
-        key: scope == AttributeScope.SHARED_SCOPE ? 'active_connectors' : 'inactive_connectors',
-        value: scope == AttributeScope.SHARED_SCOPE ? this.activeConnectors : this.inactiveConnectors
+        key: scope === AttributeScope.SHARED_SCOPE ? 'active_connectors' : 'inactive_connectors',
+        value: scope === AttributeScope.SHARED_SCOPE ? this.activeConnectors : this.inactiveConnectors
       }]));
     }
 
@@ -282,7 +252,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     });
   }
 
-  updateData(reload: boolean = false) {
+  private updateData(reload: boolean = false) {
     this.pageLink.sortOrder.property = this.sort.active;
     this.pageLink.sortOrder.direction = Direction[this.sort.direction.toUpperCase()];
     this.attributeDataSource.loadAttributes(this.device, AttributeScope.CLIENT_SCOPE, this.pageLink, reload).subscribe(data => {
@@ -301,26 +271,30 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
   }
 
   isConnectorSynced(attribute: AttributeData) {
-    const connectorData =  attribute.value;
-    if (!connectorData.ts) return false;
+    const connectorData = attribute.value;
+    if (!connectorData.ts) {
+      return false;
+    }
     const clientIndex = this.activeData.findIndex(data => {
-      const sharedData =  data.value;
+      const sharedData = data.value;
       return sharedData.name === connectorData.name;
-    })
-    if (clientIndex == -1) return false;
+    });
+    if (clientIndex === -1) {
+      return false;
+    }
     const sharedIndex = this.sharedAttributeData.findIndex(data => {
-      const sharedData =  data.value;
+      const sharedData = data.value;
       return sharedData.name === connectorData.name && sharedData.ts && sharedData.ts <= connectorData.ts;
-    })
+    });
     return sharedIndex !== -1;
   }
 
-  combineData() {
+  private combineData() {
     this.dataSource.data = [...this.activeData, ...this.inactiveData, ...this.sharedAttributeData].filter((item, index, self) =>
       index === self.findIndex((t) => t.key === item.key)
-    ).map(attribute=>{
+    ).map(attribute => {
       attribute.value = typeof attribute.value === 'string' ? JSON.parse(attribute.value) : attribute.value;
-      return attribute
+      return attribute;
     });
   }
 
@@ -330,14 +304,13 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     }
     this.nameInput.nativeElement.focus();
     this.clearOutConnectorForm();
-
   }
 
-  clearOutConnectorForm(): void {
+  private clearOutConnectorForm(): void {
     this.connectorForm.setValue({
       name: '',
       type: 'mqtt',
-      logLevel: GatewayLogLevel.info,
+      logLevel: GatewayLogLevel.INFO,
       key: 'auto',
       class: '',
       configuration: '',
@@ -347,7 +320,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     this.connectorForm.markAsPristine();
   }
 
-  selectConnector(attribute): void {
+  selectConnector(attribute: AttributeData): void {
     if (this.connectorForm.disabled) {
       this.connectorForm.enable();
     }
@@ -363,8 +336,10 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     this.connectorForm.markAsPristine();
   }
 
-  isSameConnector(attribute): boolean {
-    if (!this.initialConnector) return false;
+  isSameConnector(attribute: AttributeData): boolean {
+    if (!this.initialConnector) {
+      return false;
+    }
     const connector = attribute.value;
     return this.initialConnector.name === connector.name;
   }
@@ -378,12 +353,11 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
         verticalPosition: 'top',
         horizontalPosition: 'right',
         target: 'dashboardRoot',
-        // panelClass: this.widgetNamespace,
         forceDismiss: true
       }));
   }
 
-  returnType(attribute) {
+  returnType(attribute: AttributeData): string {
     const value = attribute.value;
     return this.gatewayConnectorDefaultTypes.get(value.type);
   }
@@ -396,8 +370,10 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     const content = `All connector data will be deleted.`;
     this.dialogService.confirm(title, content, 'Cancel', 'Delete').subscribe(result => {
       if (result) {
-        const tasks = [];
-        const scope = (this.initialConnector && this.activeConnectors.includes(this.initialConnector.name)) ? AttributeScope.SHARED_SCOPE : AttributeScope.SERVER_SCOPE;
+        const tasks: Array<Observable<any>> = [];
+        const scope = (this.initialConnector && this.activeConnectors.includes(this.initialConnector.name))
+                      ? AttributeScope.SHARED_SCOPE
+                      : AttributeScope.SERVER_SCOPE;
         tasks.push(this.attributeService.deleteEntityAttributes(this.device, scope, [attribute]));
         const activeIndex = this.activeConnectors.indexOf(attribute.key);
         const inactiveIndex = this.inactiveConnectors.indexOf(attribute.key);
@@ -408,10 +384,10 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
           this.inactiveConnectors.splice(inactiveIndex, 1);
         }
         tasks.push(this.attributeService.saveEntityAttributes(this.device, scope, [{
-          key: scope == AttributeScope.SHARED_SCOPE ? 'active_connectors' : 'inactive_connectors',
-          value: scope == AttributeScope.SHARED_SCOPE ? this.activeConnectors : this.inactiveConnectors
+          key: scope === AttributeScope.SHARED_SCOPE ? 'active_connectors' : 'inactive_connectors',
+          value: scope === AttributeScope.SHARED_SCOPE ? this.activeConnectors : this.inactiveConnectors
         }]));
-        forkJoin(tasks).subscribe(_ => {
+        forkJoin(tasks).subscribe(() => {
           if (this.initialConnector ? this.initialConnector.name === attribute.key : true) {
             this.clearOutConnectorForm();
             this.cd.detectChanges();
@@ -423,10 +399,6 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     });
   }
 
-  camelize(str): string {
-    return str.toLowerCase().replace(/\s+/g, '_');
-  }
-
   connectorLogs(attribute: AttributeData, $event: Event): void {
     if ($event) {
       $event.stopPropagation();
@@ -448,7 +420,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
   }
 
 
-  enableConnector(attribute): void {
+  enableConnector(attribute: AttributeData): void {
     const wasEnabled = this.activeConnectors.includes(attribute.key);
     const scopeOld = wasEnabled ? AttributeScope.SHARED_SCOPE : AttributeScope.SERVER_SCOPE;
     const scopeNew = !wasEnabled ? AttributeScope.SHARED_SCOPE : AttributeScope.SERVER_SCOPE;
@@ -475,7 +447,7 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     });
   }
 
-  onDataUpdateError(e: any) {
+  private onDataUpdateError(e: any) {
     const exceptionData = this.utils.parseException(e);
     let errorText = exceptionData.name;
     if (exceptionData.message) {
@@ -484,11 +456,11 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
     console.error(errorText);
   }
 
-  onDataUpdated() {
+  private onDataUpdated() {
     this.cd.detectChanges();
   }
 
-  generateSubscription() {
+  private generateSubscription() {
     if (this.subscription) {
       this.subscription.unsubscribe();
     }
@@ -497,21 +469,23 @@ export class GatewayConnectorComponent extends PageComponent implements AfterVie
         type: DatasourceType.entity,
         entityType: EntityType.DEVICE,
         entityId: this.device.id,
-        entityName: "Gateway",
+        entityName: 'Gateway',
         timeseries: []
       }];
       this.dataSource.data.forEach(value => {
-        subscriptionInfo[0].timeseries.push({name: `${value.key}_ERRORS_COUNT`, label: `${value.key}_ERRORS_COUNT`})
-      })
-      this.ctx.subscriptionApi.createSubscriptionFromInfo(widgetType.latest, subscriptionInfo,this.subscriptionOptions, false, true).subscribe(subscription => {
+        subscriptionInfo[0].timeseries.push({name: `${value.key}_ERRORS_COUNT`, label: `${value.key}_ERRORS_COUNT`});
+      });
+      this.ctx.subscriptionApi.createSubscriptionFromInfo(widgetType.latest, subscriptionInfo, this.subscriptionOptions,
+        false, true).subscribe(subscription => {
         this.subscription = subscription;
       });
     }
   }
 
-  getErrorsCount(attribute) {
+  getErrorsCount(attribute: AttributeData): string {
     const connectorName = attribute.key;
-    const connector = this.subscription && this.subscription.data.find(data=>data && data.dataKey.name === `${connectorName}_ERRORS_COUNT`);
-    return (connector && this.activeConnectors.includes(connectorName))? connector.data[0][1]: 'Inactive';
+    const connector = this.subscription && this.subscription.data
+      .find(data => data && data.dataKey.name === `${connectorName}_ERRORS_COUNT`);
+    return (connector && this.activeConnectors.includes(connectorName)) ? connector.data[0][1] : 'Inactive';
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html
index bdf7d0d16e..973b3e02b7 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.html
@@ -18,43 +18,39 @@
 <nav mat-tab-nav-bar [tabPanel]="tabPanel">
   <a mat-tab-link *ngFor="let link of logLinks"
      (click)="onTabChanged(link)"
-     [active]="activeLink.name == link.name"> {{link.name}} </a>
+     [active]="activeLink.name === link.name"> {{ link.name }} </a>
 </nav>
 <mat-tab-nav-panel #tabPanel></mat-tab-nav-panel>
 <table mat-table [dataSource]="dataSource"
        matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
        matSortDisableClear>
   <ng-container matColumnDef="ts">
-    <mat-header-cell *matHeaderCellDef mat-sort-header> Created time</mat-header-cell>
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'widgets.gateway.created-time' | translate }}</mat-header-cell>
     <mat-cell *matCellDef="let attribute">
-      {{ attribute.ts | date:'yyyy-MM-dd HH:mm:ss'}}
+      {{ attribute.ts | date:'yyyy-MM-dd HH:mm:ss' }}
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="status">
-    <mat-header-cell *matHeaderCellDef mat-sort-header> Status</mat-header-cell>
+    <mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'widgets.gateway.status' | translate }}</mat-header-cell>
     <mat-cell *matCellDef="let attribute">
-      <span [ngClass]="statusClass(attribute.status )">{{ attribute.status }}</span>
+      <span [class]="statusClass(attribute.status)">{{ attribute.status }}</span>
     </mat-cell>
   </ng-container>
   <ng-container matColumnDef="message">
-    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 70%">Message</mat-header-cell>
-    <mat-cell *matCellDef="let attribute" [ngClass]="statusClassMsg(attribute.status )">
+    <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 70%">{{ 'widgets.gateway.message' | translate }}</mat-header-cell>
+    <mat-cell *matCellDef="let attribute" [class]="statusClassMsg(attribute.status)">
       {{ attribute.message }}
     </mat-cell>
   </ng-container>
-  <mat-header-row [ngClass]="{'mat-row-select': true}"
-                  *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-  <mat-row [ngClass]="{'mat-row-select': true}"
-           *matRowDef="let attribute; columns: displayedColumns;"></mat-row>
+  <mat-header-row class="mat-row-select" *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
+  <mat-row class="mat-row-select" *matRowDef="let attribute; columns: displayedColumns;"></mat-row>
 </table>
 <span [fxShow]="dataSource.data.length === 0"
-      fxFlex
-      fxLayoutAlign="center center"
-      class="no-data-found">{{'attribute.no-telemetry-text' | translate}}</span>
+      fxFlex fxLayoutAlign="center center"
+      class="no-data-found">{{ 'attribute.no-telemetry-text' | translate }}</span>
 <span fxFlex [fxShow]="dataSource.data.length !== 0"></span>
 <mat-divider></mat-divider>
-<mat-paginator #paginator
-               [length]="dataSource.data.length"
+<mat-paginator [length]="dataSource.data.length"
                [pageIndex]="pageLink.page"
                [pageSize]="pageLink.pageSize"
                [pageSizeOptions]="[10, 20, 30]"></mat-paginator>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.ts
index f724e9dff9..6e0f20bdc3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-logs.component.ts
@@ -14,55 +14,27 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit,  Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { Router } from '@angular/router';
-import { FormBuilder, FormGroup } from '@angular/forms';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { AttributeService } from '@core/http/attribute.service';
-import { DeviceService } from '@core/http/device.service';
-import { TranslateService } from '@ngx-translate/core';
-import { AttributeData, DataKeyType } from '@shared/models/telemetry/telemetry.models';
-import { PageComponent } from '@shared/components/page.component';
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { PageLink } from '@shared/models/page/page-link';
-import { AttributeDatasource } from "@home/models/datasource/attribute-datasource";
-import { Direction, SortOrder } from "@shared/models/page/sort-order";
+import { Direction, SortOrder } from '@shared/models/page/sort-order';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
-import { GatewayLogLevel } from '@home/components/widget/lib/gateway/gateway-configuration.component';
-import { DialogService } from '@core/services/dialog.service';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { MatPaginator } from '@angular/material/paginator';
-
-
-export interface GatewayConnector {
-  name: string;
-  type: string;
-  configuration?: string;
-  configurationJson: string;
-  logLevel: string;
-  key?: string;
-}
-
-export interface LogLink {
-  name: string;
-  key: string;
-  filterFn?: Function;
-}
+import { GatewayLogData, GatewayStatus, LogLink } from './gateway-widget.models';
 
 @Component({
   selector: 'tb-gateway-logs',
   templateUrl: './gateway-logs.component.html',
   styleUrls: ['./gateway-logs.component.scss']
 })
-export class GatewayLogsComponent extends PageComponent implements AfterViewInit {
+export class GatewayLogsComponent implements AfterViewInit {
 
   pageLink: PageLink;
 
-  attributeDataSource: AttributeDatasource;
-
-  dataSource: MatTableDataSource<any>
+  dataSource: MatTableDataSource<GatewayLogData>;
 
   displayedColumns = ['ts', 'status', 'message'];
 
@@ -76,63 +48,39 @@ export class GatewayLogsComponent extends PageComponent implements AfterViewInit
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild(MatPaginator) paginator: MatPaginator;
 
-  connectorForm: FormGroup;
-
-  viewsInited = false;
-
   textSearchMode: boolean;
 
-  activeConnectors: Array<string>;
-
-  inactiveConnectors: Array<string>;
-
-  InitialActiveConnectors: Array<string>;
-
-  gatewayLogLevel = Object.values(GatewayLogLevel);
-
   logLinks: Array<LogLink>;
 
-  initialConnector: GatewayConnector;
-
   activeLink: LogLink;
 
   gatewayLogLinks: Array<LogLink> = [
     {
-      name: "General",
-      key: "LOGS"
+      name: 'General',
+      key: 'LOGS'
     }, {
-      name: "Service",
-      key: "SERVICE_LOGS"
+      name: 'Service',
+      key: 'SERVICE_LOGS'
     },
     {
-      name: "Connection",
-      key: "CONNECTION_LOGS"
+      name: 'Connection',
+      key: 'CONNECTION_LOGS'
     }, {
-      name: "Storage",
-      key: "STORAGE_LOGS"
+      name: 'Storage',
+      key: 'STORAGE_LOGS'
     },
     {
       key: 'EXTENSIONS_LOGS',
-      name: "Extension"
-    }]
-
-
-  constructor(protected router: Router,
-              protected store: Store<AppState>,
-              protected fb: FormBuilder,
-              protected translate: TranslateService,
-              protected attributeService: AttributeService,
-              protected deviceService: DeviceService,
-              protected dialogService: DialogService,
-              public dialog: MatDialog) {
-    super(store);
+      name: 'Extension'
+    }];
+
+
+  constructor() {
     const sortOrder: SortOrder = {property: 'ts', direction: Direction.DESC};
     this.pageLink = new PageLink(10, 0, null, sortOrder);
-    this.dataSource = new MatTableDataSource<AttributeData>([]);
-
+    this.dataSource = new MatTableDataSource<GatewayLogData>([]);
   }
 
-
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
     this.dataSource.paginator = this.paginator;
@@ -140,22 +88,18 @@ export class GatewayLogsComponent extends PageComponent implements AfterViewInit
       this.ctx.defaultSubscription.options.timeWindowConfig = timewindow;
       this.ctx.defaultSubscription.updateDataSubscriptions();
       return timewindow;
-    }
+    };
     if (this.ctx.settings.isConnectorLog && this.ctx.settings.connectorLogState) {
       const connector = this.ctx.stateController.getStateParams()[this.ctx.settings.connectorLogState];
       this.logLinks = [{
         key: `${connector.key}_LOGS`,
-        name: "Connector",
-        filterFn: (attrData)=>{
-          return !attrData.message.includes(`_converter.py`)
-        }
-      },{
+        name: 'Connector',
+        filterFn: (attrData) => !attrData.message.includes(`_converter.py`)
+      }, {
         key: `${connector.key}_LOGS`,
-        name: "Converter",
-        filterFn: (attrData)=>{
-          return attrData.message.includes(`_converter.py`)
-        }
-      }]
+        name: 'Converter',
+        filterFn: (attrData) => attrData.message.includes(`_converter.py`)
+      }];
     } else {
       this.logLinks = this.gatewayLogLinks;
     }
@@ -164,20 +108,20 @@ export class GatewayLogsComponent extends PageComponent implements AfterViewInit
   }
 
 
-  updateData(sort?) {
+  private updateData() {
     if (this.ctx.defaultSubscription.data.length && this.ctx.defaultSubscription.data[0]) {
       let attrData = this.ctx.defaultSubscription.data[0].data.map(data => {
-        let result =  {
+        const result = {
           ts: data[0],
           key: this.activeLink.key,
           message: /\[(.*)/.exec(data[1])[0],
-          status: 'INVALID LOG FORMAT'
+          status: 'INVALID LOG FORMAT' as GatewayStatus
         };
 
         try {
-          result.status= data[1].match(/\|(\w+)\|/)[1];
+          result.status = data[1].match(/\|(\w+)\|/)[1];
         } catch (e) {
-          result.status = 'INVALID LOG FORMAT'
+          result.status = 'INVALID LOG FORMAT' as GatewayStatus;
         }
 
         return result;
@@ -186,39 +130,35 @@ export class GatewayLogsComponent extends PageComponent implements AfterViewInit
         attrData = attrData.filter(data => this.activeLink.filterFn(data));
       }
       this.dataSource.data = attrData;
-      if (sort) {
-        this.dataSource.sortData(this.dataSource.data, this.sort);
-      }
     }
   }
 
-  onTabChanged(link) {
+  onTabChanged(link: LogLink) {
     this.activeLink = link;
     this.changeSubscription();
   }
 
-  statusClass(status) {
+  statusClass(status: GatewayStatus): string {
     switch (status) {
-      case GatewayLogLevel.debug:
-        return "status status-debug";
-      case GatewayLogLevel.warning:
-        return "status status-warning";
-      case GatewayLogLevel.error:
-      case "EXCEPTION":
-        return "status status-error";
-      case GatewayLogLevel.info:
+      case GatewayStatus.DEBUG:
+        return 'status status-debug';
+      case GatewayStatus.WARNING:
+        return 'status status-warning';
+      case GatewayStatus.ERROR:
+      case GatewayStatus.EXCEPTION:
+        return 'status status-error';
       default:
-        return "status status-info";
+        return 'status status-info';
     }
   }
 
-  statusClassMsg(status) {
-    if (status === "EXCEPTION") {
+  statusClassMsg(status?: GatewayStatus): string {
+    if (status === GatewayStatus.EXCEPTION) {
       return 'msg-status-exception';
     }
   }
 
-  changeSubscription() {
+  private changeSubscription() {
     if (this.ctx.datasources && this.ctx.datasources[0].entity && this.ctx.defaultSubscription.options.datasources) {
       this.ctx.defaultSubscription.options.datasources[0].dataKeys = [{
         name: this.activeLink.key,
@@ -229,8 +169,7 @@ export class GatewayLogsComponent extends PageComponent implements AfterViewInit
       this.ctx.defaultSubscription.updateDataSubscriptions();
       this.ctx.defaultSubscription.callbacks.onDataUpdated = () => {
         this.updateData();
-      }
-
+      };
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.html
index 7a66cfd4fb..adb7d0b197 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.html
@@ -15,43 +15,38 @@
     limitations under the License.
 
 -->
-<form style="width: 600px; position: relative;">
-  <mat-toolbar color="warn">
-    <mat-icon>warning</mat-icon>
-    <h2 translate>gateway.configuration-delete-dialog-header</h2>
-    <span fxFlex></span>
-    <button mat-icon-button
-            (click)="close()"
-            type="button">
-      <mat-icon class="material-icons">close</mat-icon>
-    </button>
-  </mat-toolbar>
-  <div mat-dialog-content tb-toast toastTarget="activationLinkDialogContent">
-    <div class="mat-content" fxLayout="column">
-      <span innerHTML="{{'gateway.configuration-delete-dialog-body' | translate}} <b>{{gatewayName}}</b>" > </span>
-      <mat-form-field  class="mat-block tb-value-type" style="flex-grow: 0">
-        <mat-label translate>gateway.configuration-delete-dialog-input</mat-label>
-        <input matInput [formControl]="gatewayControl" required/>
-        <mat-error
-          *ngIf="gatewayControl.hasError('required')">
-          {{'gateway.configuration-delete-dialog-input-required' | translate }}
-        </mat-error>
-      </mat-form-field>
-    </div>
-  </div>
-  <div mat-dialog-actions fxLayoutAlign="end center">
-    <button mat-button color="warn"
-            type="button"
-            cdkFocusInitial
-            (click)="close()">
-      {{ 'action.cancel' | translate }}
-    </button>
-    <button mat-button color="warn"
-            type="button"
-            cdkFocusInitial
-            [disabled]="gatewayControl.value !== gatewayName"
-            (click)="turnOff()">
-      {{ 'gateway.configuration-delete-dialog-confirm' | translate }}
-    </button>
-  </div>
-</form>
+<mat-toolbar color="warn">
+  <mat-icon>warning</mat-icon>
+  <h2 translate>gateway.configuration-delete-dialog-header</h2>
+  <span fxFlex></span>
+  <button mat-icon-button
+          (click)="close()"
+          type="button">
+    <mat-icon class="material-icons">close</mat-icon>
+  </button>
+</mat-toolbar>
+<div mat-dialog-content style="max-width: 600px" class="mat-content" fxLayout="column">
+  <span innerHTML="{{ 'gateway.configuration-delete-dialog-body' | translate }} <b>{{ gatewayName }}</b>" ></span>
+  <mat-form-field class="mat-block tb-value-type" style="flex-grow: 0">
+    <mat-label translate>gateway.configuration-delete-dialog-input</mat-label>
+    <input matInput [formControl]="gatewayControl" required/>
+    <mat-error
+      *ngIf="gatewayControl.hasError('required')">
+      {{ 'gateway.configuration-delete-dialog-input-required' | translate }}
+    </mat-error>
+  </mat-form-field>
+</div>
+<div mat-dialog-actions fxLayoutAlign="end center">
+  <button mat-button color="warn"
+          type="button"
+          cdkFocusInitial
+          (click)="close()">
+    {{ 'action.cancel' | translate }}
+  </button>
+  <button mat-button color="warn"
+          type="button"
+          [disabled]="gatewayControl.value !== gatewayName"
+          (click)="turnOff()">
+    {{ 'gateway.configuration-delete-dialog-confirm' | translate }}
+  </button>
+</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.ts
index d5274eef97..68c19d83a5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-remote-configuration-dialog.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
@@ -31,11 +31,10 @@ export interface GatewayRemoteConfigurationDialogData {
   templateUrl: './gateway-remote-configuration-dialog.html'
 })
 
-export class GatewayRemoteConfigurationDialogComponent extends DialogComponent<GatewayRemoteConfigurationDialogComponent,
-  boolean> implements OnInit {
+export class GatewayRemoteConfigurationDialogComponent extends
+  DialogComponent<GatewayRemoteConfigurationDialogComponent, boolean>{
 
   gatewayName: string;
-
   gatewayControl: FormControl;
 
   constructor(protected store: Store<AppState>,
@@ -45,10 +44,7 @@ export class GatewayRemoteConfigurationDialogComponent extends DialogComponent<G
               private fb: FormBuilder) {
     super(store, router, dialogRef);
     this.gatewayName = this.data.gatewayName;
-    this.gatewayControl = this.fb.control(null);
-  }
-
-  ngOnInit(): void {
+    this.gatewayControl = this.fb.control('');
   }
 
   close(): void {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
index 267204bd54..4aec0fd467 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.html
@@ -16,38 +16,48 @@
 
 -->
 <div fxLayout="row" fxLayout.lt-sm="column" class="command-form" fxLayoutGap="10px" [formGroup]="commandForm">
-  <mat-form-field class="mat-block tb-value-type">
-    <mat-label>{{'gateway.statistics.command' | translate}}</mat-label>
-    <mat-select formControlName="command" *ngIf="!isConnector">
-      <mat-option *ngFor="let command of RPCCommands" [value]="command">
-        {{command}}
-      </mat-option>
-    </mat-select>
-    <input matInput formControlName="command" *ngIf="isConnector"/>
-  </mat-form-field>
-  <mat-form-field class="mat-block tb-value-type" fxFlex *ngIf="!isConnector">
-    <mat-label>{{'gateway.statistics.timeout-ms' | translate}}</mat-label>
-    <input matInput formControlName="time" type="number" min="1"/>
-    <mat-error
-      *ngIf="commandForm.get('time').hasError('min')">
-      {{'gateway.statistics.timeout-min' | translate }}
-    </mat-error>
-  </mat-form-field>
-  <mat-form-field class="mat-block tb-value-type" fxFlex *ngIf="isConnector">
-    <mat-label>{{'widget-config.datasource-parameters' | translate}}</mat-label>
-    <input matInput formControlName="params" type="JSON"/>
-    <mat-icon class="material-icons-outlined" aria-hidden="false" aria-label="help-icon"
-              matSuffix style="cursor:pointer;"
-              (click)="openEditJSONDialog($event)"
-              matTooltip="{{'gateway.rpc-command-edit-params' | translate}}">edit
-    </mat-icon>
-  </mat-form-field>
-  <button mat-raised-button color="primary" (click)="sendCommand()"
-  [disabled]="commandForm.invalid">{{'gateway.rpc-command-send' | translate}}</button>
+  <ng-container *ngIf="!isConnector; else connectorForm">
+    <mat-form-field>
+      <mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label>
+      <mat-select formControlName="command">
+        <mat-option *ngFor="let command of RPCCommands" [value]="command">
+          {{ command }}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+    <mat-form-field fxFlex>
+      <mat-label>{{ 'gateway.statistics.timeout-ms' | translate }}</mat-label>
+      <input matInput formControlName="time" type="number" min="1"/>
+      <mat-error *ngIf="commandForm.get('time').hasError('min')">
+        {{ 'gateway.statistics.timeout-min' | translate }}
+      </mat-error>
+    </mat-form-field>
+  </ng-container>
+  <ng-template #connectorForm>
+    <mat-form-field>
+      <mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label>
+      <input matInput formControlName="command" />
+    </mat-form-field>
+    <mat-form-field fxFlex>
+      <mat-label>{{ 'widget-config.datasource-parameters' | translate }}</mat-label>
+      <input matInput formControlName="params" type="JSON"/>
+      <mat-icon class="material-icons-outlined" aria-hidden="false" aria-label="help-icon"
+                matIconSuffix style="cursor:pointer;"
+                (click)="openEditJSONDialog($event)"
+                matTooltip="{{ 'gateway.rpc-command-edit-params' | translate }}">edit
+      </mat-icon>
+    </mat-form-field>
+  </ng-template>
+  <button mat-raised-button
+          color="primary"
+          (click)="sendCommand()"
+          [disabled]="commandForm.invalid">
+    {{ 'gateway.rpc-command-send' | translate }}
+  </button>
 </div>
-<mat-card class="result-block" [formGroup]="commandForm" fxFlex>
-  <span>{{'gateway.rpc-command-result' | translate}}</span>
+<section class="result-block" [formGroup]="commandForm">
+  <span>{{ 'gateway.rpc-command-result' | translate }}</span>
   <mat-divider></mat-divider>
-  <tb-json-content [contentType]="contentTypes.JSON" readonly="true" formControlName="result" fxFlex></tb-json-content>
-</mat-card>
+  <tb-json-content [contentType]="contentTypes.JSON" readonly="true" formControlName="result"></tb-json-content>
+</section>
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss
index afdcf9b1f0..345688d451 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.scss
@@ -22,24 +22,24 @@
   padding: 0;
 
   .command-form {
-    width: 100%;
     flex-wrap: nowrap;
-    padding: 0 15px 5px;
-    margin-bottom: 5px;
-
+    padding: 0 5px 5px;
     & > button {
       margin-top: 10px;
     }
   }
 
   .result-block {
-    padding: 0 15px;
+    padding: 0 5px;
     display: flex;
     flex-direction: column;
-
+    flex: 1;
     & > span {
       font-weight: 600;
     }
+    tb-json-content {
+      flex: 1;
+    }
   }
 }
 
@@ -47,9 +47,5 @@
   .tb-json-content {
     height: 100%;
   }
-
-  .mat-mdc-form-field-icon-suffix {
-    z-index: 100;
-  }
 }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.ts
index dbda5f4db2..0c2e8f8c55 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-service-rpc.component.ts
@@ -14,17 +14,9 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, Component,  Input } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { Router } from '@angular/router';
+import { AfterViewInit, Component, Input } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { AttributeService } from '@core/http/attribute.service';
-import { DeviceService } from '@core/http/device.service';
-import { TranslateService } from '@ngx-translate/core';
-import { PageComponent } from "@shared/components/page.component";
-import { DialogService } from '@core/services/dialog.service';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { ContentType } from '@shared/models/constants';
 import {
@@ -32,13 +24,12 @@ import {
   JsonObjectEditDialogData
 } from '@shared/components/dialog/json-object-edit-dialog.component';
 
-
 @Component({
   selector: 'tb-gateway-service-rpc',
   templateUrl: './gateway-service-rpc.component.html',
   styleUrls: ['./gateway-service-rpc.component.scss']
 })
-export class GatewayServiceRPCComponent extends PageComponent implements AfterViewInit {
+export class GatewayServiceRPCComponent implements AfterViewInit {
 
   @Input()
   ctx: WidgetContext;
@@ -52,39 +43,28 @@ export class GatewayServiceRPCComponent extends PageComponent implements AfterVi
 
   isConnector: boolean;
 
-  connectorType: string;
-
   RPCCommands: Array<string> = [
-    "Ping",
-    "Stats",
-    "Devices",
-    "Update",
-    "Version",
-    "Restart",
-    "Reboot"
-  ]
-
-
-  constructor(protected router: Router,
-              protected store: Store<AppState>,
-              protected fb: FormBuilder,
-              protected translate: TranslateService,
-              protected attributeService: AttributeService,
-              protected deviceService: DeviceService,
-              protected dialogService: DialogService,
-              public dialog: MatDialog) {
-    super(store);
+    'Ping',
+    'Stats',
+    'Devices',
+    'Update',
+    'Version',
+    'Restart',
+    'Reboot'
+  ];
+
+  private connectorType: string;
+
+  constructor(private fb: FormBuilder,
+              private dialog: MatDialog) {
     this.commandForm = this.fb.group({
       command: [null,[Validators.required]],
       time: [60, [Validators.required, Validators.min(1)]],
-      params: ["{}", [Validators.required]],
+      params: ['{}', [Validators.required]],
       result: [null]
-    })
-
-
+    });
   }
 
-
   ngAfterViewInit() {
     this.isConnector = this.ctx.settings.isConnector;
     if (!this.isConnector) {
@@ -94,16 +74,16 @@ export class GatewayServiceRPCComponent extends PageComponent implements AfterVi
     }
   }
 
-
   sendCommand() {
     const formValues = this.commandForm.value;
     const commandPrefix = this.isConnector ? `${this.connectorType}_` : 'gateway_';
-    this.ctx.controlApi.sendTwoWayCommand(commandPrefix+formValues.command.toLowerCase(), {},formValues.time).subscribe(resp=>{
-      this.commandForm.get('result').setValue(JSON.stringify(resp));
-    },error => {
-      console.log(error);
-      this.commandForm.get('result').setValue(JSON.stringify(error.error));
-    })
+    this.ctx.controlApi.sendTwoWayCommand(commandPrefix+formValues.command.toLowerCase(), {},formValues.time).subscribe({
+      next: resp => this.commandForm.get('result').setValue(JSON.stringify(resp)),
+      error: error => {
+        console.log(error);
+        this.commandForm.get('result').setValue(JSON.stringify(error.error));
+      }
+    });
   }
 
   openEditJSONDialog($event: Event) {
@@ -124,5 +104,4 @@ export class GatewayServiceRPCComponent extends PageComponent implements AfterVi
       }
     );
   }
-
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html
index 8da9b2bce8..8671b58f46 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.html
@@ -19,13 +19,13 @@
 <div class="statistics-container" fxLayout="row" fxLayout.lt-md="column">
   <mat-card [formGroup]="statisticForm" *ngIf="!general">
     <mat-form-field class="mat-block">
-      <mat-label>{{'gateway.statistics.statistic' | translate}}</mat-label>
+      <mat-label>{{ 'gateway.statistics.statistic' | translate }}</mat-label>
       <mat-select formControlName="statisticKey">
         <mat-option *ngFor="let key of statisticsKeys" [value]="key">
-          {{key}}
+          {{ key }}
         </mat-option>
         <mat-option *ngFor="let command of commands" [value]="command.attributeOnGateway">
-          {{command.attributeOnGateway}}
+          {{ command.attributeOnGateway }}
         </mat-option>
       </mat-select>
     </mat-form-field>
@@ -34,44 +34,42 @@
       {{'gateway.statistics.statistic-commands-empty' | translate }}
     </mat-error>
     <mat-form-field class="mat-block" *ngIf="commandObj">
-      <mat-label>{{'gateway.statistics.command' | translate}}</mat-label>
+      <mat-label>{{ 'gateway.statistics.command' | translate }}</mat-label>
       <input matInput [value]="commandObj.command" disabled>
     </mat-form-field>
   </mat-card>
   <div class="chart-box" fxLayout="column">
-        <div class="chart-container" #statisticChart [fxShow]="isNumericData">
-
-        </div>
+    <div class="chart-container" #statisticChart [fxShow]="isNumericData"></div>
     <table [fxShow]="!isNumericData" mat-table [dataSource]="dataSource"
            matSort [matSortActive]="pageLink.sortOrder.property" [matSortDirection]="pageLink.sortDirection()"
            matSortDisableClear>
       <ng-container matColumnDef="0">
-        <mat-header-cell *matHeaderCellDef mat-sort-header>{{'audit-log.timestamp' | translate}}</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header>{{ 'widgets.gateway.created-time' | translate }}</mat-header-cell>
         <mat-cell *matCellDef="let row; let rowIndex = index">
           {{row[0]| date:'yyyy-MM-dd HH:mm:ss' }}
         </mat-cell>
       </ng-container>
       <ng-container matColumnDef="1">
-        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 70%">{{"event.message" | translate}}</mat-header-cell>
+        <mat-header-cell *matHeaderCellDef mat-sort-header style="width: 70%">{{ 'widgets.gateway.message' | translate }}</mat-header-cell>
         <mat-cell *matCellDef="let row">
           {{ row[1] }}
         </mat-cell>
       </ng-container>
-      <mat-header-row [ngClass]="{'mat-row-select': true}"
+      <mat-header-row class="mat-row-select"
                       *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
-      <mat-row [ngClass]="{'mat-row-select': true}"
+      <mat-row class="mat-row-select"
                *matRowDef="let row; columns: displayedColumns;"></mat-row>
     </table>
     <span [fxShow]="dataSource.data.length === 0 && !isNumericData"
           fxLayoutAlign="center center"
-          class="no-data-found">{{'attribute.no-telemetry-text' | translate}}</span>
+          class="no-data-found">{{ 'attribute.no-telemetry-text' | translate }}</span>
     <div fxFlex class="legend" fxLayout="row" fxLayoutAlign="center center" [fxShow]="isNumericData">
       <div class="legend-keys" *ngFor="let legendKey of legendData?.keys" fxLayout="row"
            fxLayoutAlign="center center">
-        <span class="legend-line" [ngStyle]="{backgroundColor: legendKey.dataKey.color}"></span>
+        <span class="legend-line" [style.background-color]="legendKey.dataKey.color"></span>
         <div class="legend-label"
              (click)="onLegendKeyHiddenChange(legendKey.dataIndex)"
-             [ngClass]="{ 'hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden }"
+             [class]="{ 'hidden-label': legendData.keys[legendKey.dataIndex].dataKey.hidden }"
              [innerHTML]="legendKey.dataKey.label">
         </div>
       </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.ts
index 90e5541217..2e1deb900a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-statistics.component.ts
@@ -14,18 +14,10 @@
 /// limitations under the License.
 ///
 
-import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, Input, ViewChild } from '@angular/core';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { Router } from '@angular/router';
+import { AfterViewInit, Component, ElementRef, Input, ViewChild } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { MatDialog } from '@angular/material/dialog';
 import { AttributeService } from '@core/http/attribute.service';
-import { DeviceService } from '@core/http/device.service';
-import { TranslateService } from '@ngx-translate/core';
 import { AttributeData, AttributeScope } from '@shared/models/telemetry/telemetry.models';
-import { PageComponent } from '@shared/components/page.component';
-import { DialogService } from '@core/services/dialog.service';
 import { WidgetContext } from '@home/models/widget-component.models';
 import { TbFlot } from '@home/components/widget/lib/flot-widget';
 import { ResizeObserver } from '@juggle/resize-observer';
@@ -41,13 +33,12 @@ import { MatTableDataSource } from '@angular/material/table';
 import { MatSort } from '@angular/material/sort';
 import { NULL_UUID } from '@shared/models/id/has-uuid';
 
-
 @Component({
   selector: 'tb-gateway-statistics',
   templateUrl: './gateway-statistics.component.html',
   styleUrls: ['./gateway-statistics.component.scss']
 })
-export class GatewayStatisticsComponent extends PageComponent implements AfterViewInit {
+export class GatewayStatisticsComponent implements AfterViewInit {
 
   @ViewChild(MatSort) sort: MatSort;
   @ViewChild('statisticChart') statisticChart: ElementRef;
@@ -58,10 +49,10 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
   @Input()
   public general: boolean;
 
-  public isNumericData: boolean = false;
+  public isNumericData = false;
   public chartInited: boolean;
   private flot: TbFlot;
-  private flotCtx;
+  private flotCtx: WidgetContext;
   public statisticForm: FormGroup;
   public statisticsKeys = [];
   public commands = [];
@@ -89,70 +80,61 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
   };
 
 
-  constructor(protected router: Router,
-              protected store: Store<AppState>,
-              protected fb: FormBuilder,
-              protected translate: TranslateService,
-              protected attributeService: AttributeService,
-              protected deviceService: DeviceService,
-              protected dialogService: DialogService,
-              private cd: ChangeDetectorRef,
-              private utils: UtilsService,
-              public dialog: MatDialog) {
-    super(store);
+  constructor(private fb: FormBuilder,
+              private attributeService: AttributeService,
+              private utils: UtilsService) {
     const sortOrder: SortOrder = {property: '0', direction: Direction.DESC};
     this.pageLink = new PageLink(Number.POSITIVE_INFINITY, 0, null, sortOrder);
     this.displayedColumns = ['0', '1'];
     this.dataSource = new MatTableDataSource<any>([]);
     this.statisticForm = this.fb.group({
       statisticKey: [null, []]
-    })
+    });
 
     this.statisticForm.get('statisticKey').valueChanges.subscribe(value => {
       this.commandObj = null;
       if (this.commands.length) {
         this.commandObj = this.commands.find(command => command.attributeOnGateway === value);
       }
-      if (this.subscriptionInfo) this.createChartsSubscription(this.ctx.defaultSubscription.datasources[0].entity, value);
-    })
+      if (this.subscriptionInfo) {
+        this.createChartsSubscription(this.ctx.defaultSubscription.datasources[0].entity, value);
+      }
+    });
   }
 
 
   ngAfterViewInit() {
     this.dataSource.sort = this.sort;
-    this.sort.sortChange.subscribe(_=>{
-      this.sortData();
-    })
+    this.sort.sortChange.subscribe(() => this.sortData());
     this.init();
     if (this.ctx.defaultSubscription.datasources.length) {
       const gateway = this.ctx.defaultSubscription.datasources[0].entity;
-      if (gateway.id.id === NULL_UUID) return;
+      if (gateway.id.id === NULL_UUID) {
+        return;
+      }
       if (!this.general) {
-        this.attributeService.getEntityAttributes(gateway.id, AttributeScope.SHARED_SCOPE, ["general_configuration"]).subscribe((resp: AttributeData[]) => {
-          if (resp && resp.length) {
-            this.commands = resp[0].value.statistics.commands;
-            if (!this.statisticForm.get('statisticKey').value && this.commands && this.commands.length) {
-              this.statisticForm.get('statisticKey').setValue(this.commands[0].attributeOnGateway);
-              this.createChartsSubscription(gateway, this.commands[0].attributeOnGateway);
+        this.attributeService.getEntityAttributes(gateway.id, AttributeScope.SHARED_SCOPE, ['general_configuration'])
+          .subscribe((resp: AttributeData[]) => {
+            if (resp && resp.length) {
+              this.commands = resp[0].value.statistics.commands;
+              if (!this.statisticForm.get('statisticKey').value && this.commands && this.commands.length) {
+                this.statisticForm.get('statisticKey').setValue(this.commands[0].attributeOnGateway);
+                this.createChartsSubscription(gateway, this.commands[0].attributeOnGateway);
+              }
             }
-          }
-        })
+          });
       } else {
-        let connectorsTs;
         this.attributeService.getEntityTimeseriesLatest(gateway.id).subscribe(
           data => {
-            connectorsTs = Object.keys(data)
-              .filter(el => el.includes(
-                'ConnectorEventsProduced'
-              ) || el.includes(
-                'ConnectorEventsSent'))
+            const connectorsTs = Object.keys(data)
+              .filter(el => el.includes('ConnectorEventsProduced') || el.includes('ConnectorEventsSent'));
             this.createGeneralChartsSubscription(gateway, connectorsTs);
-          })
+          });
       }
     }
   }
 
-  public sortData () {
+  public sortData() {
     this.dataSource.sortData(this.dataSource.data, this.sort);
   }
 
@@ -162,7 +144,7 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
   }
 
   private createChartsSubscription(gateway: BaseData<EntityId>, attr: string) {
-    let subscriptionInfo = [{
+    const subscriptionInfo = [{
       type: DatasourceType.entity,
       entityType: EntityType.DEVICE,
       entityId: gateway.id.id,
@@ -175,8 +157,8 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
     this.changeSubscription(subscriptionInfo);
   }
 
-  private createGeneralChartsSubscription(gateway: BaseData<EntityId>, attrData: [string]) {
-    let subscriptionInfo = [{
+  private createGeneralChartsSubscription(gateway: BaseData<EntityId>, attrData: string[]) {
+    const subscriptionInfo = [{
       type: DatasourceType.entity,
       entityType: EntityType.DEVICE,
       entityId: gateway.id.id,
@@ -184,20 +166,20 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
       timeseries: []
     }];
     subscriptionInfo[0].timeseries = [];
-    if (attrData && attrData.length) {
+    if (attrData?.length) {
       attrData.forEach(attr => {
-        subscriptionInfo[0].timeseries.push({name: attr, label: attr})
-      })
+        subscriptionInfo[0].timeseries.push({name: attr, label: attr});
+      });
     }
     this.ctx.defaultSubscription.datasources[0].dataKeys.forEach(dataKey => {
-      subscriptionInfo[0].timeseries.push({name: dataKey.name, label: dataKey.label})
-    })
+      subscriptionInfo[0].timeseries.push({name: dataKey.name, label: dataKey.label});
+    });
 
     this.subscriptionInfo = subscriptionInfo;
     this.changeSubscription(subscriptionInfo);
   }
 
-  init = () => {
+  private init = () => {
     this.flotCtx = {
       $scope: this.ctx.$scope,
       $injector: this.ctx.$injector,
@@ -207,20 +189,20 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
       subscriptionApi: this.ctx.subscriptionApi,
       detectChanges: this.ctx.detectChanges,
       settings: this.ctx.settings
-    };
-  }
+    } as WidgetContext;
+  };
 
-  updateChart = () => {
+  private updateChart = () => {
     if (this.flot && this.ctx.defaultSubscription.data.length) {
       this.flot.update();
     }
-  }
+  };
 
-  resize = () => {
+  private resize = () => {
     if (this.flot) {
       this.flot.resize();
     }
-  }
+  };
 
   private reset() {
     if (this.resize$) {
@@ -260,7 +242,7 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
     this.chartInited = true;
     this.flotCtx.$container = $(this.statisticChart.nativeElement);
     this.resize$.observe(this.statisticChart.nativeElement);
-    this.flot = new TbFlot(this.flotCtx as WidgetContext, "line");
+    this.flot = new TbFlot(this.flotCtx as WidgetContext, 'line');
     this.flot.update();
   }
 
@@ -270,16 +252,17 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
       return;
     }
     this.dataSource.data = this.subscription.data.length ? this.subscription.data[0].data : [];
-    this.isNumericData = this.dataSource.data.every(data => !isNaN(+data[1]) );
+    this.isNumericData = this.dataSource.data.every(data => !isNaN(+data[1]));
   }
 
 
-  changeSubscription(subscriptionInfo: SubscriptionInfo[]) {
+  private changeSubscription(subscriptionInfo: SubscriptionInfo[]) {
     if (this.subscription) {
       this.reset();
     }
     if (this.ctx.datasources[0].entity) {
-      this.ctx.subscriptionApi.createSubscriptionFromInfo(widgetType.timeseries, subscriptionInfo, this.subscriptionOptions, false, true).subscribe(subscription => {
+      this.ctx.subscriptionApi.createSubscriptionFromInfo(widgetType.timeseries, subscriptionInfo, this.subscriptionOptions,
+        false, true).subscribe(subscription => {
         this.subscription = subscription;
         this.isDataOnlyNumbers();
         this.legendData = this.subscription.legendData;
@@ -291,9 +274,7 @@ export class GatewayStatisticsComponent extends PageComponent implements AfterVi
         if (this.isNumericData) {
           this.initChart();
         }
-      })
-
+      });
     }
   }
-
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
new file mode 100644
index 0000000000..c08ee7dc89
--- /dev/null
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
@@ -0,0 +1,142 @@
+///
+/// Copyright © 2016-2023 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+export enum StorageTypes {
+  MEMORY = 'memory',
+  FILE = 'file',
+  SQLITE = 'sqlite'
+}
+
+export enum DeviceGatewayStatus {
+  EXCEPTION = 'EXCEPTION'
+}
+
+export enum GatewayLogLevel {
+  NONE = 'NONE',
+  CRITICAL = 'CRITICAL',
+  ERROR = 'ERROR',
+  WARNING = 'WARNING',
+  INFO = 'INFO',
+  DEBUG = 'DEBUG'
+}
+
+export const GatewayStatus = {
+  ...GatewayLogLevel,
+  ...DeviceGatewayStatus
+};
+
+export type GatewayStatus = DeviceGatewayStatus | GatewayLogLevel;
+
+export enum LogSavingPeriod {
+  days = 'D',
+  hours = 'H',
+  minutes = 'M',
+  seconds = 'S'
+}
+
+export enum LocalLogsConfigs {
+  service = 'service',
+  connector = 'connector',
+  converter = 'converter',
+  tb_connection = 'tb_connection',
+  storage = 'storage',
+  extension = 'extension'
+}
+
+export const LocalLogsConfigTranslateMap = new Map<LocalLogsConfigs, string>([
+  [LocalLogsConfigs.service, 'Service'],
+  [LocalLogsConfigs.connector, 'Connector'],
+  [LocalLogsConfigs.converter, 'Converter'],
+  [LocalLogsConfigs.tb_connection, 'TB Connection'],
+  [LocalLogsConfigs.storage, 'Storage'],
+  [LocalLogsConfigs.extension, 'Extension']
+]);
+
+export const LogSavingPeriodTranslations = new Map<LogSavingPeriod, string>(
+  [
+    [LogSavingPeriod.days, 'gateway.logs.days'],
+    [LogSavingPeriod.hours, 'gateway.logs.hours'],
+    [LogSavingPeriod.minutes, 'gateway.logs.minutes'],
+    [LogSavingPeriod.seconds, 'gateway.logs.seconds']
+  ]
+);
+
+export const StorageTypesTranslationMap = new Map<StorageTypes, string>(
+  [
+    [StorageTypes.MEMORY, 'gateway.storage-types.memory-storage'],
+    [StorageTypes.FILE, 'gateway.storage-types.file-storage'],
+    [StorageTypes.SQLITE, 'gateway.storage-types.sqlite']
+  ]
+);
+
+export enum SecurityTypes {
+  ACCESS_TOKEN = 'accessToken',
+  USERNAME_PASSWORD = 'usernamePassword',
+  TLS_ACCESS_TOKEN = 'tlsAccessToken',
+  TLS_PRIVATE_KEY = 'tlsPrivateKey'
+}
+
+export const GecurityTypesTranslationsMap = new Map<SecurityTypes, string>(
+  [
+    [SecurityTypes.ACCESS_TOKEN, 'gateway.security-types.access-token'],
+    [SecurityTypes.USERNAME_PASSWORD, 'gateway.security-types.username-password'],
+    [SecurityTypes.TLS_ACCESS_TOKEN, 'gateway.security-types.tls-access-token'],
+    // [SecurityTypes.TLS_PRIVATE_KEY, 'gateway.security-types.tls-private-key'],
+  ]
+);
+
+export interface GatewayConnector {
+  name: string;
+  type: string;
+  configuration?: string;
+  configurationJson: string;
+  logLevel: string;
+  key?: string;
+}
+
+
+export const GatewayConnectorDefaultTypesTranslates = new Map<string, string>([
+  ['mqtt', 'MQTT'],
+  ['modbus', 'MODBUS'],
+  ['grpc', 'GRPC'],
+  ['opcua', 'OPCUA'],
+  ['opcua_asyncio', 'OPCUA ASYNCIO'],
+  ['ble', 'BLE'],
+  ['request', 'REQUEST'],
+  ['can', 'CAN'],
+  ['bacnet', 'BACNET'],
+  ['odbc', 'ODBC'],
+  ['rest', 'REST'],
+  ['snmp', 'SNMP'],
+  ['ftp', 'FTP'],
+  ['socket', 'SOCKET'],
+  ['xmpp', 'XMPP'],
+  ['ocpp', 'OCCP'],
+  ['custom', 'CUSTOM']
+]);
+
+export interface LogLink {
+  name: string;
+  key: string;
+  filterFn?: (arg: any) => boolean;
+}
+
+export interface GatewayLogData {
+  ts: number;
+  key: string;
+  message: string;
+  status: GatewayStatus;
+}
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html
index 25d77badc7..a9e350eb95 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.html
@@ -15,12 +15,13 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="GatewayLogSettingForm" fxLayout="column">
-  <mat-slide-toggle class="mat-slide" formControlName="isConnectorLog">
-    {{"widgets.gateway.is-connector" | translate}}
-  </mat-slide-toggle>
-  <mat-form-field fxFlex class="mat-block" *ngIf="GatewayLogSettingForm.get('isConnectorLog').value">
-    <mat-label>{{"widgets.gateway.state-param-name" | translate}}</mat-label>
-    <input matInput formControlName="connectorLogState">
-  </mat-form-field>
-</section>
+<div class="tb-form-panel" [formGroup]="gatewayLogSettingForm">
+  <div class="tb-form-row column-xs">
+    <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="isConnectorLog">
+      {{"widgets.gateway.is-connector" | translate}}
+    </mat-slide-toggle>
+    <mat-form-field fxFlex appearance="outline" subscriptSizing="dynamic">
+      <input matInput formControlName="connectorLogState" placeholder="{{ 'widgets.gateway.state-param-name' | translate }}">
+    </mat-form-field>
+  </div>
+</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.ts
index 74e214a3d9..5d3ea09447 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-logs-settings.component.ts
@@ -16,7 +16,7 @@
 
 import { Component } from '@angular/core';
 import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 
@@ -27,15 +27,15 @@ import { AppState } from '@core/core.state';
 })
 export class GatewayLogsSettingsComponent extends WidgetSettingsComponent {
 
-  GatewayLogSettingForm: UntypedFormGroup;
+  gatewayLogSettingForm: FormGroup;
 
   constructor(protected store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: FormBuilder) {
     super(store);
   }
 
-  protected settingsForm(): UntypedFormGroup {
-    return this.GatewayLogSettingForm;
+  protected settingsForm(): FormGroup {
+    return this.gatewayLogSettingForm;
   }
 
   protected defaultSettings(): WidgetSettings {
@@ -46,9 +46,22 @@ export class GatewayLogsSettingsComponent extends WidgetSettingsComponent {
   }
 
   protected onSettingsSet(settings: WidgetSettings) {
-    this.GatewayLogSettingForm = this.fb.group({
+    this.gatewayLogSettingForm = this.fb.group({
       isConnectorLog: [false, []],
-      connectorLogState: ['default', []]
+      connectorLogState: ['default', Validators.required]
     });
   }
+
+  protected validatorTriggers(): string[] {
+    return ['isConnectorLog'];
+  }
+
+  protected updateValidators(emitEvent: boolean) {
+    const isConnectorLog: boolean = this.gatewayLogSettingForm.get('isConnectorLog').value;
+    if (isConnectorLog) {
+      this.gatewayLogSettingForm.get('connectorLogState').enable({emitEvent});
+    } else {
+      this.gatewayLogSettingForm.get('connectorLogState').disable({emitEvent});
+    }
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-service-rpc-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-service-rpc-settings.component.html
index beeba7c2a7..391d7a9bc2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-service-rpc-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-service-rpc-settings.component.html
@@ -15,8 +15,10 @@
     limitations under the License.
 
 -->
-<section class="tb-widget-settings" [formGroup]="GatewayLogSettingForm" fxLayout="column">
-  <mat-slide-toggle class="mat-slide" formControlName="isConnector">
-    {{"widgets.gateway.is-connector" | translate}}
-  </mat-slide-toggle>
-</section>
+<div class="tb-form-panel" [formGroup]="gatewayServiceRPCSettingForm">
+  <div class="tb-form-row column-xs">
+    <mat-slide-toggle class="mat-slide margin" formControlName="isConnector">
+      {{"widgets.gateway.is-connector" | translate}}
+    </mat-slide-toggle>
+  </div>
+</div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-service-rpc-settings.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-service-rpc-settings.component.ts
index edafed90b8..5b0402236b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-service-rpc-settings.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-service-rpc-settings.component.ts
@@ -16,7 +16,7 @@
 
 import { Component } from '@angular/core';
 import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models';
-import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
+import { FormBuilder, FormGroup } from '@angular/forms';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 
@@ -27,15 +27,15 @@ import { AppState } from '@core/core.state';
 })
 export class GatewayServiceRPCSettingsComponent extends WidgetSettingsComponent {
 
-  GatewayLogSettingForm: UntypedFormGroup;
+  gatewayServiceRPCSettingForm: FormGroup;
 
   constructor(protected store: Store<AppState>,
-              private fb: UntypedFormBuilder) {
+              private fb: FormBuilder) {
     super(store);
   }
 
-  protected settingsForm(): UntypedFormGroup {
-    return this.GatewayLogSettingForm;
+  protected settingsForm(): FormGroup {
+    return this.gatewayServiceRPCSettingForm;
   }
 
   protected defaultSettings(): WidgetSettings {
@@ -45,7 +45,7 @@ export class GatewayServiceRPCSettingsComponent extends WidgetSettingsComponent
   }
 
   protected onSettingsSet(settings: WidgetSettings) {
-    this.GatewayLogSettingForm = this.fb.group({
+    this.gatewayServiceRPCSettingForm = this.fb.group({
       isConnector: [false, []]
     });
   }
diff --git a/ui-ngx/src/app/shared/components/file-input.component.html b/ui-ngx/src/app/shared/components/file-input.component.html
index 308e9e59f7..c0c004d02c 100644
--- a/ui-ngx/src/app/shared/components/file-input.component.html
+++ b/ui-ngx/src/app/shared/components/file-input.component.html
@@ -16,12 +16,14 @@
 
 -->
 <div class="tb-container">
-  <label class="tb-title" [ngClass]="{'tb-required': !disabled && required}">{{ label }}
-    <mat-icon *ngIf="hint" class="material-icons-outlined pointer-event"
-              style="cursor:pointer;"
-              matTooltip="{{hint}}">info_outlined
-    </mat-icon>
-  </label>
+  <ng-container *ngIf="hint; else title">
+    <label class="tb-title pointer-event" [class.tb-required]="!disabled && required"
+           tb-hint-tooltip-icon="{{ hint }}">{{ label }}
+    </label>
+  </ng-container>
+  <ng-template #title>
+    <label class="tb-title" [class.tb-required]="!disabled && required">{{ label }}</label>
+  </ng-template>
   <ng-container #flow="flow"
                 [flowConfig]="{allowDuplicateUploads: true}">
     <div class="tb-file-select-container">
diff --git a/ui-ngx/src/app/shared/components/file-input.component.scss b/ui-ngx/src/app/shared/components/file-input.component.scss
index a229a01bfb..45ed704336 100644
--- a/ui-ngx/src/app/shared/components/file-input.component.scss
+++ b/ui-ngx/src/app/shared/components/file-input.component.scss
@@ -22,8 +22,10 @@ $previewSize: 100px !default;
   .tb-container {
     margin-top: 0;
     label.tb-title {
-      display: block;
       padding-bottom: 8px;
+      &:not(.pointer-event) {
+        display: block;
+      }
     }
   }
 
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 560402c622..7397f82993 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2635,7 +2635,7 @@
     "gateway": {
         "add-entry": "Add configuration",
         "advanced": "Advanced",
-        "checking-device-activity": "Checking Device Activity:",
+        "checking-device-activity": "Checking device activity",
         "command": "Docker commands",
         "command-copied-message": "Docker command has been copied to clipboard",
         "configuration": "Configuration",
@@ -2888,7 +2888,7 @@
             "log-format": "Log message format",
             "remote-log": "Enables remote logging and logs reading from the gateway",
             "backup-count": "If backup count is > 0, when a rollover is done, no more than backup count files are kept - the oldest ones are deleted",
-            "storage": "Provides configuration for saving incoming data before it is sent to the ThingsBoard platform",
+            "storage": "Provides configuration for saving incoming data before it is sent to the platform",
             "file": "Received data saving to the hard drive",
             "memory": "Received data saving to the RAM memory",
             "sqlite": "Received data saving to the .db file",
@@ -5330,7 +5330,10 @@
             "events-filter": "Events filter",
             "event-key-contains": "Event key contains...",
             "is-connector": "Is Connector",
-            "state-param-name": "State parameter connector name"
+            "state-param-name": "State parameter connector name",
+            "status": "Status",
+            "message": "Message",
+            "created-time": "Created time"
         },
         "gauge": {
             "default-color": "Default color",
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index 141a8db6ea..63f126f405 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -65,6 +65,9 @@
       box-shadow: none;
       border-radius: 0;
     }
+    &.no-gap {
+      gap: 0;
+    }
     &.tb-slide-toggle {
       padding: 0;
       gap: 0;
@@ -218,7 +221,7 @@
     }
   }
 
-  .tb-form-row .mat-mdc-form-field, .mat-mdc-form-field.tb-inline-field {
+  .tb-form-row:not(.tb-not-inline-field) .mat-mdc-form-field, .mat-mdc-form-field.tb-inline-field {
     &.mat-form-field-appearance-fill {
       .mdc-text-field--filled:not(.mdc-text-field--disabled) {
         &:before {