From 1cedb66138e344c2d39aad16cd20803809f50016 Mon Sep 17 00:00:00 2001
From: Maksym Tsymbarov <mtsymbarov@thingsboard.io>
Date: Thu, 2 Apr 2026 13:17:05 +0200
Subject: [PATCH] Additional inputs reworks

---
 .../dashboard-state-dialog.component.html     |  4 +-
 ...snmp-device-profile-mapping.component.html |  9 ++--
 .../common/kv-map-config-old.component.html   |  4 +-
 ...command-button-basic-config.component.html |  2 +-
 .../power-button-basic-config.component.html  |  2 +-
 .../toggle-button-basic-config.component.html |  2 +-
 .../status-widget-basic-config.component.html |  2 +-
 .../single-switch-basic-config.component.html |  2 +-
 .../rpc/slider-basic-config.component.html    |  2 +-
 .../value-stepper-basic-config.component.html |  2 +-
 .../scada-symbol-basic-config.component.html  |  2 +-
 .../config/target-device.component.html       |  2 +
 .../widget/config/target-device.component.ts  |  4 ++
 .../date-range-navigator-panel.component.html |  2 +-
 .../date-range-navigator.component.html       |  6 +--
 .../lib/home-page/doc-link.component.html     |  6 +--
 .../lib/home-page/quick-link.component.html   |  2 +-
 .../rpc/persistent-add-dialog.component.html  |  6 +--
 .../persistent-details-dialog.component.html  | 13 +++---
 .../persistent-filter-panel.component.html    |  2 +-
 ...board-state-widget-settings.component.html |  5 ++-
 .../cards/label-widget-label.component.html   |  9 ++--
 .../qrcode-widget-settings.component.html     |  2 +-
 .../common/widget-font.component.html         | 12 +++---
 .../device-key-autocomplete.component.html    |  2 +-
 .../device-key-autocomplete.component.ts      |  4 ++
 ...d-indicator-widget-settings.component.html | 12 +++---
 ...stent-table-widget-settings.component.html |  4 +-
 ...ound-switch-widget-settings.component.html |  2 +-
 .../control/rpc-button-style.component.html   |  2 +
 .../rpc-shell-widget-settings.component.html  |  2 +-
 ...pc-terminal-widget-settings.component.html |  4 +-
 .../send-rpc-widget-settings.component.html   | 10 ++---
 ...lide-toggle-widget-settings.component.html |  4 +-
 ...tch-control-widget-settings.component.html |  2 +-
 .../switch-rpc-settings.component.html        | 11 ++---
 ...e-attribute-widget-settings.component.html |  9 ++--
 ...e-navigator-widget-settings.component.html |  6 +--
 ...eway-config-widget-settings.component.html | 13 +++---
 ...eway-events-widget-settings.component.html |  3 +-
 ...pio-control-widget-settings.component.html |  7 ++--
 .../settings/gpio/gpio-item.component.html    |  9 ++--
 ...quick-links-widget-settings.component.html |  2 +-
 .../datakey-select-option.component.html      |  4 +-
 ...ce-claiming-widget-settings.component.html | 18 ++++----
 ...e-attribute-widget-settings.component.html |  5 ++-
 ...n-attribute-widget-settings.component.html | 17 ++++----
 ...ple-attributes-key-settings.component.html | 41 ++++++++++---------
 ...-attributes-widget-settings.component.html | 19 +++++----
 ...gation-card-widget-settings.component.html |  5 ++-
 ...ation-cards-widget-settings.component.html |  2 +-
 .../widget/widget-config.component.html       |  2 +-
 .../admin/send-test-sms-dialog.component.html |  3 +-
 .../device-profile-tabs.component.html        |  2 +-
 ...ice-transport-configuration.component.html | 24 +++++------
 ...ate-nested-rulechain-dialog.component.html |  4 +-
 .../rulechain/link-labels.component.html      |  2 +-
 .../email-auth-dialog.component.html          |  4 +-
 .../sms-auth-dialog.component.html            |  3 +-
 .../totp-auth-dialog.component.html           |  2 +-
 .../save-widget-type-as-dialog.component.html |  3 +-
 .../widget/widgets-bundle.component.html      | 14 +++----
 ...force-two-factor-auth-login.component.html |  1 +
 .../components/color-input.component.html     |  2 +-
 .../components/color-input.component.ts       |  6 ++-
 .../image/upload-image-dialog.component.html  |  2 +-
 .../widgets-bundle-select.component.html      |  2 +-
 .../widgets-bundle-select.component.ts        |  4 ++
 68 files changed, 222 insertions(+), 181 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
index ad0aeb097c..58cb21253d 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/states/dashboard-state-dialog.component.html
@@ -31,7 +31,7 @@
   }
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async" class="flex flex-col">
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>dashboard.state-name</mat-label>
         <input required matInput formControlName="name">
         @if (stateFormGroup.get('name').hasError('required')) {
@@ -40,7 +40,7 @@
           </mat-error>
         }
       </mat-form-field>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>dashboard.state-id</mat-label>
         <input required matInput formControlName="id">
         @if (stateFormGroup.get('id').hasError('required')) {
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
index acd00e3707..2f0ef4d0af 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/snmp/snmp-device-profile-mapping.component.html
@@ -26,10 +26,9 @@
   </div>
   <mat-divider></mat-divider>
   @for (mappingConfig of mappingsConfigFormArray.controls; track mappingConfig; let isLast = $last) {
-    <div
-      [formGroup]="mappingConfig" class="mapping-list flex flex-row items-center justify-start gap-2">
+    <div [formGroup]="mappingConfig" class="mapping-list flex flex-row items-center justify-start gap-2">
       <div class="tb-layout-fill flex flex-1 flex-row items-stretch justify-start gap-2">
-        <mat-form-field class="max-w-26% flex-full">
+        <mat-form-field class="max-w-26% flex-full" appearance="outline">
           <mat-select formControlName="dataType" required>
             @for (dataType of dataTypes; track dataType) {
               <mat-option [value]="dataType">
@@ -43,7 +42,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="max-w-37% flex-full">
+        <mat-form-field class="max-w-37% flex-full" appearance="outline">
           <input matInput formControlName="key" required/>
           @if (mappingConfig.get('key').hasError('required')) {
             <mat-error>
@@ -51,7 +50,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="max-w-37% flex-full">
+        <mat-form-field class="max-w-37% flex-full" appearance="outline">
           <input matInput formControlName="oid" required/>
           @if (mappingConfig.get('oid').hasError('required')) {
             <mat-error>
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.html b/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.html
index 3e75dc69ec..831630074a 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config-old.component.html
@@ -31,7 +31,7 @@
       <div class="row flex flex-row items-center justify-start gap-2"
            formArrayName="keyVals"
            >
-        <mat-form-field class="cell mat-block flex-1">
+        <mat-form-field class="cell mat-block flex-1" appearance="outline">
           <input [formControl]="keyValControl.get('key')" matInput required
                  placeholder="{{ keyText | translate }}"/>
           @if (keyValControl.get('key').hasError('required')) {
@@ -40,7 +40,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="cell mat-block flex-1">
+        <mat-form-field class="cell mat-block flex-1" appearance="outline">
           <input [formControl]="keyValControl.get('value')" matInput required
                  placeholder="{{ valText | translate }}"/>
           @if (keyValControl.get('value').hasError('required')) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
index 34ce199e65..e39d57b64e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/command-button-basic-config.component.html
@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="commandButtonWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.command-button.behavior</div>
     <div class="tb-form-row space-between">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
index 71edff2c83..8d05bad66d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/power-button-basic-config.component.html
@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="powerButtonWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.power-button.behavior</div>
     <div class="tb-form-row">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
index d506fe4e8b..905e9e3bac 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/button/toggle-button-basic-config.component.html
@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="toggleButtonWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.toggle-button.behavior</div>
     <div class="tb-form-row">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
index 450f8227fa..c64a4e23d9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/indicator/status-widget-basic-config.component.html
@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="statusWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.status-widget.behavior</div>
     <div class="tb-form-row">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
index 8b34ffa0c8..1ed4ec86a9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/single-switch-basic-config.component.html
@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="singleSwitchWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.single-switch.behavior</div>
     <div class="tb-form-row">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
index d9bd4b82f2..ff5397ea16 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/slider-basic-config.component.html
@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="sliderWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.slider.behavior</div>
     <div class="tb-form-row">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html
index d2d1e65491..986af5d80e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/rpc/value-stepper-basic-config.component.html
@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="valueStepperWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>widgets.value-stepper.behavior</div>
     <div class="tb-form-row">
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
index 03cdee6b95..fa9780cd06 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/basic/scada/scada-symbol-basic-config.component.html
@@ -16,7 +16,7 @@
 
 -->
 <ng-container [formGroup]="scadaSymbolWidgetConfigForm">
-  <tb-target-device formControlName="targetDevice"></tb-target-device>
+  <tb-target-device formControlName="targetDevice" appearance="outline"></tb-target-device>
   <div class="tb-form-panel">
     <div class="tb-form-panel-title" translate>scada.symbol.symbol</div>
     <tb-scada-symbol-input required
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
index 7c8a8b4a8b..1d47c35261 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.html
@@ -25,6 +25,7 @@
   </div>
   @if (targetDeviceFormGroup.get('type').value === targetDeviceType.device) {
     <tb-entity-autocomplete
+      [appearance]="appearance"
       [required]="(!widgetEditMode && !targetDeviceOptional)"
       [entityType]="entityType.DEVICE"
       formControlName="deviceId">
@@ -32,6 +33,7 @@
   }
   @if (targetDeviceFormGroup.get('type').value === targetDeviceType.entity) {
     <tb-entity-alias-select
+      [appearance]="appearance"
       [tbRequired]="(!widgetEditMode && !targetDeviceOptional)"
       [aliasController]="aliasController"
       [callbacks]="entityAliasSelectCallbacks"
diff --git a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.ts b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.ts
index bcabcf9099..8336cf338a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/config/target-device.component.ts
@@ -33,6 +33,7 @@ import { EntityType } from '@shared/models/entity-type.models';
 import { IAliasController } from '@core/api/widget-api.models';
 import { EntityAliasSelectCallbacks } from '@home/components/widget/lib/settings/common/alias/entity-alias-select.component.models';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 
 @Component({
     selector: 'tb-target-device',
@@ -73,6 +74,9 @@ export class TargetDeviceComponent implements ControlValueAccessor, OnInit, Vali
   @Input()
   disabled: boolean;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   widgetEditMode = this.utils.widgetEditMode;
 
   targetDeviceFormGroup: UntypedFormGroup;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
index 6683fa8c4b..ec0071243b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator-panel.component.html
@@ -17,7 +17,7 @@
 -->
 <div class="mat-content mat-padding flex flex-col">
   @if (settings.showTemplate) {
-    <mat-form-field class="mat-block">
+    <mat-form-field class="mat-block" appearance="outline">
       <input readonly [ngModel]="model.chosenLabel" matInput type="text">
     </mat-form-field>
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
index 3b5990a268..5cdc878b57 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.html
@@ -19,7 +19,7 @@
      [class.short-mode]="ctx.width < 400"
      [class.labels-hidden]="settings.hideLabels"
      [class.long-mode]="ctx.width >= 400">
-  <mat-form-field class="mat-block" [class.!hidden]="settings.hidePicker" (click)="openNavigatorPanel($event)">
+  <mat-form-field class="mat-block" [class.!hidden]="settings.hidePicker" (click)="openNavigatorPanel($event)" appearance="outline">
     @if (!settings.hideLabels) {
       <mat-label translate>widgets.date-range-navigator.localizationMap.Date picker</mat-label>
     }
@@ -29,7 +29,7 @@
       </mat-option>
     </mat-select>
   </mat-form-field>
-  <mat-form-field class="mat-block" [class.!hidden]="settings.hideInterval">
+  <mat-form-field class="mat-block" [class.!hidden]="settings.hideInterval" appearance="outline">
     @if (!settings.hideLabels) {
       <mat-label translate>widgets.date-range-navigator.localizationMap.Interval</mat-label>
     }
@@ -51,7 +51,7 @@
     <button mat-icon-button (click)="goBack()">
       <mat-icon>keyboard_arrow_left</mat-icon>
     </button>
-    <mat-form-field class="mat-block gt-sm:flex-1">
+    <mat-form-field class="mat-block gt-sm:flex-1" appearance="outline">
       @if (!settings.hideLabels) {
         <mat-label translate>widgets.date-range-navigator.localizationMap.Step size</mat-label>
       }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
index 5c153621fc..de4bc3c1a5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/doc-link.component.html
@@ -18,8 +18,8 @@
 @if (addMode || editMode) {
   <div class="flex flex-row">
     <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editDocLinkFormGroup">
-      <tb-material-icon-select required formControlName="icon"></tb-material-icon-select>
-      <mat-form-field class="mat-block flex-1">
+      <tb-material-icon-select required formControlName="icon" appearance="outline"></tb-material-icon-select>
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.documentation.name</mat-label>
         <input required matInput formControlName="name">
         @if (editDocLinkFormGroup.get('name').hasError('required')) {
@@ -28,7 +28,7 @@
           </mat-error>
         }
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.documentation.link</mat-label>
         <input required matInput formControlName="link">
         @if (editDocLinkFormGroup.get('link').hasError('required')) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
index 6692c97e46..beb03851a3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/home-page/quick-link.component.html
@@ -18,7 +18,7 @@
 @if (addMode || editMode) {
   <div class="flex flex-row">
     <div class="tb-edit-link flex flex-1 flex-col" [class.edit-mode]="editMode" [formGroup]="editQuickLinkFormGroup">
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.quick-links.quick-link</mat-label>
         <input matInput type="text"
                #linkInput
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
index 5f7d83fbad..f98ef7e8c8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-add-dialog.component.html
@@ -38,8 +38,8 @@
           {{ rpcMessageTypeText }}
         </mat-slide-toggle>
       </div>
-      <div class="flex flex-row flex-wrap gap-1.5 xs:flex-col">
-        <mat-form-field class="mat-block flex-1">
+      <div class="flex flex-row flex-wrap gap-1.5 xs:flex-col mt-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" required>
           @if (persistentFormGroup.get('method').hasError('required')) {
@@ -53,7 +53,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.persistent-table.retries</mat-label>
           <input matInput type="number" formControlName="retries">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
index bffb4e21cc..491cada8cd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-details-dialog.component.html
@@ -34,33 +34,32 @@
   <div mat-dialog-content>
     <fieldset [disabled]="isLoading$ | async">
       <div class="flex flex-row gap-1.5 xs:flex-col">
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.persistent-table.created-time</mat-label>
           <input matInput formControlName="createdTime" readonly>
         </mat-form-field>
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.persistent-table.expiration-time</mat-label>
           <input matInput formControlName="expirationTime" readonly>
         </mat-form-field>
       </div>
       <div class="flex flex-row flex-wrap gap-1.5 xs:flex-col">
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.persistent-table.message-type</mat-label>
           <input matInput formControlName="messageType" readonly>
         </mat-form-field>
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.persistent-table.status</mat-label>
           <input matInput formControlName="status" readonly
                  style="font-weight: bold;"
                  [style.color]="rpcStatusColorsMap.get(data.persistentRequest.status)">
         </mat-form-field>
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.persistent-table.method</mat-label>
           <input matInput formControlName="method" readonly>
         </mat-form-field>
         @if (persistentFormGroup.get('retries').value) {
-          <mat-form-field class="mat-block flex-1"
-                          >
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.persistent-table.retries</mat-label>
             <input matInput formControlName="retries" readonly>
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
index 5d405f73bc..02caa6866c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/rpc/persistent-filter-panel.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form class="mat-content mat-padding flex flex-col" [formGroup]="persistentFilterFormGroup" (ngSubmit)="update()">
-  <mat-form-field class="mat-block flex-1" floatLabel="always">
+  <mat-form-field class="mat-block flex-1" floatLabel="always" appearance="outline">
     <mat-label translate>widgets.persistent-table.rpc-status-list</mat-label>
     <mat-select formControlName="rpcStatus"
                 placeholder="{{ rpcSearchPlaceholder }}">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
index f8dab56b02..93db3741f4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/dashboard-state-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="dashboardStateWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.dashboard-state.dashboard-state-settings</legend>
-    <mat-form-field class="mat-block">
+    <mat-form-field class="mat-block" appearance="outline">
       <input matInput type="text" placeholder="{{ 'widgets.dashboard-state.dashboard-state' | translate }}"
              #dashboardStateInput
              formControlName="stateId"
@@ -51,12 +51,13 @@
         <mat-slide-toggle class="mat-slide" formControlName="defaultAutofillLayout">
           {{ 'widgets.dashboard-state.autofill-state-layout' | translate }}
         </mat-slide-toggle>
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.dashboard-state.default-margin</mat-label>
           <input matInput type="number" min="0" step="1" formControlName="defaultMargin">
         </mat-form-field>
         <tb-color-input
           formControlName="defaultBackgroundColor"
+          appearance="outline"
           icon="format_color_fill"
           label="{{ 'widgets.dashboard-state.default-background-color' | translate }}" openOnInput colorClearButton>
         </tb-color-input>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
index 767be11007..dc5bd4eab3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/label-widget-label.component.html
@@ -39,7 +39,7 @@
     <div class="flex flex-col gap-2">
       <mat-divider></mat-divider>
       <section class="tb-widget-settings flex flex-col">
-        <mat-form-field style="padding-bottom: 16px;">
+        <mat-form-field style="padding-bottom: 16px;" appearance="outline">
           <mat-label translate>widgets.label-widget.label-pattern</mat-label>
           <input required matInput formControlName="pattern">
           @if (labelWidgetLabelFormGroup.get('pattern').hasError('required')) {
@@ -51,12 +51,12 @@
         </mat-form-field>
         <fieldset class="fields-group">
           <legend class="group-title" translate>widgets.label-widget.label-position</legend>
-          <section class="flex flex-row xs:flex-col gt-xs:gap-2">
-            <mat-form-field class="flex-1">
+          <section class="flex flex-row xs:flex-col gt-xs:gap-2 mt-2">
+            <mat-form-field class="flex-1" appearance="outline">
               <mat-label translate>widgets.label-widget.x-pos</mat-label>
               <input matInput type="number" min="0" max="100" formControlName="x">
             </mat-form-field>
-            <mat-form-field class="flex-1">
+            <mat-form-field class="flex-1" appearance="outline">
               <mat-label translate>widgets.label-widget.y-pos</mat-label>
               <input matInput type="number" min="0" max="100" formControlName="y">
             </mat-form-field>
@@ -64,6 +64,7 @@
         </fieldset>
         <tb-color-input
           formControlName="backgroundColor"
+          appearance="outline"
           icon="format_color_fill"
           label="{{ 'widgets.label-widget.background-color' | translate }}" openOnInput colorClearButton>
         </tb-color-input>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
index 6372c2519e..e336aa8084 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/qrcode-widget-settings.component.html
@@ -19,7 +19,7 @@
   <mat-slide-toggle class="mat-slide" formControlName="useQrCodeTextFunction">
     {{ 'widgets.qr-code.use-qr-code-text-function' | translate }}
   </mat-slide-toggle>
-  <mat-form-field [class.!hidden]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value">
+  <mat-form-field [class.!hidden]="qrCodeWidgetSettingsForm.get('useQrCodeTextFunction').value" appearance="outline">
     <mat-label translate>widgets.qr-code.qr-code-text-pattern</mat-label>
     <input required matInput formControlName="qrCodeTextPattern">
     <mat-hint>{{ 'widgets.qr-code.qr-code-text-pattern-hint' | translate }}</mat-hint>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
index 4768ed4920..4e1e5e460c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/widget-font.component.html
@@ -15,19 +15,19 @@
     limitations under the License.
 
 -->
-<section [formGroup]="widgetFontFormGroup" class="flex flex-col">
+<section [formGroup]="widgetFontFormGroup" class="flex flex-col mt-2">
   <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.widget-font.font-family</mat-label>
       <input matInput formControlName="family">
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>{{ sizeTitle }}</mat-label>
       <input matInput type="number" min="1" step="1" formControlName="size">
     </mat-form-field>
   </section>
   <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.widget-font.font-style</mat-label>
       <mat-select formControlName="style">
         <mat-option [value]="'normal'">
@@ -41,7 +41,7 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.widget-font.font-weight</mat-label>
       <mat-select formControlName="weight">
         <mat-option [value]="'normal'">
@@ -71,6 +71,7 @@
   <section class="flex flex-row xs:flex-col gt-xs:gap-2">
     <tb-color-input
       class="flex-1"
+      appearance="outline"
       formControlName="color"
       icon="format_color_fill"
       label="{{ 'widgets.widget-font.color' | translate }}" openOnInput colorClearButton>
@@ -78,6 +79,7 @@
     @if (hasShadowColor) {
       <tb-color-input
         class="flex-1"
+        appearance="outline"
         formControlName="shadowColor"
         icon="format_color_fill"
         label="{{ 'widgets.widget-font.shadow-color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
index 41931d50cf..764651379d 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field class="mat-block flex-1" [appearance]="inlineField ? 'outline': 'fill'"
+<mat-form-field class="mat-block flex-1" [appearance]="!appearance ? inlineField ? 'outline': 'fill' : appearance"
                 [subscriptSizing]="inlineField ? 'dynamic' : 'fixed'"
                 [class]="{'tb-inline-field': inlineField, 'flex': inlineField,
                           'tb-suffix-absolute': (inlineField && !deviceKeyFormGroup.get('key').value)}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.ts
index f02de5fa8d..d1c215a668 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/device-key-autocomplete.component.ts
@@ -47,6 +47,7 @@ import { EntityFilter, singleEntityFilterFromDeviceId } from '@shared/models/que
 import { AliasFilterType } from '@shared/models/alias.models';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 
 @Component({
     selector: 'tb-device-key-autocomplete',
@@ -97,6 +98,9 @@ export class DeviceKeyAutocompleteComponent extends PageComponent implements OnI
   @coerceBoolean()
   inlineField: boolean;
 
+  @Input()
+  appearance: MatFormFieldAppearance;
+
   dataKeyType = DataKeyType;
 
   private modelValue: string;
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
index b4f79384ce..aa5b32162c 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/led-indicator-widget-settings.component.html
@@ -18,12 +18,13 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="ledIndicatorWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.led-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
     <tb-color-input class="flex-1"
                     formControlName="ledColor"
+                    appearance="outline"
                     icon="format_color_fill"
                     label="{{ 'widgets.rpc.led-color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
@@ -38,7 +39,7 @@
       <mat-slide-toggle formControlName="performCheckStatus" class="slide-block">
         {{ 'widgets.rpc.perform-rpc-status-check' | translate }}
       </mat-slide-toggle>
-      <mat-form-field [class.!hidden]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="mat-block flex-1">
+      <mat-form-field [class.!hidden]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.rpc.retrieve-led-status-value-method</mat-label>
         <mat-select formControlName="retrieveValueMethod">
           <mat-option [value]="'attribute'">
@@ -53,13 +54,14 @@
                                   [class.!hidden]="ledIndicatorWidgetSettingsForm.get('performCheckStatus').value"
                                   [aliasController]="aliasController"
                                   [targetDevice]="targetDevice"
+                                  appearance="outline"
                                   [keyType]="ledIndicatorWidgetSettingsForm.get('retrieveValueMethod').value === 'attribute' ? dataKeyType.attribute : dataKeyType.timeseries"
                                   attributeLabel="widgets.rpc.led-status-value-attribute"
                                   timeseriesLabel="widgets.rpc.led-status-value-timeseries"
                                   required
                                   formControlName="valueAttribute">
       </tb-device-key-autocomplete>
-      <mat-form-field [class.!hidden]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="flex-1 mat-block">
+      <mat-form-field [class.!hidden]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="flex-1 mat-block" appearance="outline">
         <mat-label translate>widgets.rpc.check-status-method</mat-label>
         <input required matInput formControlName="checkStatusMethod">
       </mat-form-field>
@@ -73,7 +75,7 @@
   </fieldset>
   <fieldset [class.!hidden]="!ledIndicatorWidgetSettingsForm.get('performCheckStatus').value" class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
@@ -92,7 +94,7 @@
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
index 4dda766e04..4765dabde3 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/persistent-table-widget-settings.component.html
@@ -101,7 +101,7 @@
           </mat-form-field>
         </div>
       </div>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.table.default-sort-order</mat-label>
         <input matInput formControlName="defaultSortOrder">
       </mat-form-field>
@@ -109,7 +109,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.persistent-table.columns-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.persistent-table.display-columns</mat-label>
       <mat-chip-grid #columnsChipList class="tb-drop-list"
                      required
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
index 15dd118737..9e6b354ab0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/round-switch-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="roundSwitchWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.switch-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
index c6a9618641..9a988b763f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-button-style.component.html
@@ -26,12 +26,14 @@
     </mat-slide-toggle>
     <section class="flex flex-row xs:flex-col gt-xs:gap-2">
       <tb-color-input class="flex-1"
+                      appearance="outline"
                       formControlName="textColor"
                       icon="format_color_fill"
                       label="{{ 'widgets.rpc.button-text-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
       <tb-color-input class="flex-1"
                       formControlName="bgColor"
+                      appearance="outline"
                       icon="format_color_fill"
                       label="{{ 'widgets.rpc.button-background-color' | translate }}" openOnInput colorClearButton>
       </tb-color-input>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
index 608dd81aed..00eef97a77 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-shell-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="rpcShellWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
index 15fcefcf9a..9fd436701a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/rpc-terminal-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="rpcTerminalWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
@@ -37,7 +37,7 @@
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
index 72bc8d8219..2a22fdd74b 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/send-rpc-widget-settings.component.html
@@ -18,11 +18,11 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="sendRpcWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.widget-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">
     </mat-form-field>
@@ -32,7 +32,7 @@
     <mat-checkbox formControlName="oneWayElseTwoWay">
       {{ 'widgets.rpc.is-one-way-command' | translate }}
     </mat-checkbox>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.rpc-method</mat-label>
       <input matInput formControlName="methodName">
     </mat-form-field>
@@ -42,7 +42,7 @@
       validateOnChange
       formControlName="methodParams">
     </tb-json-content>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
@@ -64,7 +64,7 @@
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
index 51af51985d..4527111874 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/slide-toggle-widget-settings.component.html
@@ -18,8 +18,8 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="slideToggleWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <tb-string-pattern-autocomplete class="mat-block flex-1" 
-                                    brackets="curly" 
+    <tb-string-pattern-autocomplete class="mat-block flex-1"
+                                    brackets="curly"
                                     predefinedValuesButton="true"
                                     label="{{'widgets.rpc.slide-toggle-label' | translate }}"
                                     [predefinedValues]="predefinedValues"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
index 145459382d..19ab4f24f8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-control-widget-settings.component.html
@@ -18,7 +18,7 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="switchControlWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.switch-title</mat-label>
       <input matInput formControlName="title">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
index 3536341211..7ab592ef24 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/switch-rpc-settings.component.html
@@ -23,7 +23,7 @@
     </mat-checkbox>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.rpc.retrieve-value-settings</legend>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.rpc.retrieve-value-method</mat-label>
         <mat-select formControlName="retrieveValueMethod">
           <mat-option [value]="'none'">
@@ -45,11 +45,12 @@
                          switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'timeseries'"
         [aliasController]="aliasController"
         [targetDevice]="targetDevice"
+        appearance="outline"
         [keyType]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value === 'attribute' ? dataKeyType.attribute : dataKeyType.timeseries"
         required
         formControlName="valueKey">
       </tb-device-key-autocomplete>
-      <mat-form-field [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'rpc'" class="mat-block flex-1">
+      <mat-form-field [class.!hidden]="switchRpcSettingsFormGroup.get('retrieveValueMethod').value !== 'rpc'" class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.rpc.get-value-method</mat-label>
         <input required matInput formControlName="getValueMethod">
       </mat-form-field>
@@ -63,7 +64,7 @@
     </fieldset>
     <fieldset class="fields-group">
       <legend class="group-title" translate>widgets.rpc.update-value-settings</legend>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.rpc.set-value-method</mat-label>
         <input required matInput formControlName="setValueMethod">
       </mat-form-field>
@@ -78,7 +79,7 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
@@ -97,7 +98,7 @@
           </mat-panel-description>
         </mat-expansion-panel-header>
         <ng-template matExpansionPanelContent>
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.rpc.persistent-polling-interval</mat-label>
             <input matInput type="number" min="1000" formControlName="persistentPollingInterval">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
index 192e5a7be7..e881157fa9 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/control/update-device-attribute-widget-settings.component.html
@@ -18,19 +18,20 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="updateDeviceAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.common-settings</legend>
-    <tb-string-pattern-autocomplete class="mat-block flex-1" 
-                                    brackets="curly" 
+    <tb-string-pattern-autocomplete class="mat-block flex-1"
+                                    brackets="curly"
+                                    appearance="outline"
                                     predefinedValuesButton="true"
                                     label="{{'widgets.rpc.widget-title' | translate }}"
                                     [predefinedValues]="predefinedValues"
                                     placeholderText="{{ 'widget-config.set' | translate }}"
                                     formControlName="title"
     ></tb-string-pattern-autocomplete>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.button-label</mat-label>
       <input matInput formControlName="buttonText">
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.device-attribute-scope</mat-label>
       <mat-select formControlName="entityAttributeType">
         <mat-option [value]="'SERVER_SCOPE'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
index 3921e3655b..417ca8d436 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/date/date-range-navigator-widget-settings.component.html
@@ -41,7 +41,7 @@
           <mat-checkbox formControlName="showTemplate">
             {{ 'widgets.date-range-navigator.picker-show-template' | translate }}
           </mat-checkbox>
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.date-range-navigator.first-day-of-week</mat-label>
             <input matInput type="number" min="1" max="7" step="1" formControlName="firstDayOfWeek">
           </mat-form-field>
@@ -64,7 +64,7 @@
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.date-range-navigator.initial-interval</mat-label>
           <mat-select formControlName="initialInterval">
             <mat-option [value]="'hour'">
@@ -108,7 +108,7 @@
         </mat-panel-description>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>widgets.date-range-navigator.initial-step-size</mat-label>
           <mat-select formControlName="stepSize">
             <mat-option [value]="'hour'">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
index c525c67b56..3b35789e65 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html
@@ -18,31 +18,32 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="gatewayConfigWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gateway.general-settings</legend>
-    <tb-string-pattern-autocomplete class="mat-block flex-1" 
-                                    brackets="curly" 
+    <tb-string-pattern-autocomplete class="mat-block flex-1"
+                                    brackets="curly"
                                     subscriptSizing="fixed"
+                                    appearance="outline"
                                     predefinedValuesButton="true"
                                     label="{{ 'widgets.gateway.widget-title' | translate }}"
                                     [predefinedValues]="predefinedValues"
                                     placeholderText="{{ 'widget-config.set' | translate }}"
                                     formControlName="widgetTitle"
     ></tb-string-pattern-autocomplete>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.gateway.default-archive-file-name</mat-label>
       <input matInput formControlName="archiveFileName">
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.gateway.device-type-for-new-gateway</mat-label>
       <input matInput formControlName="gatewayType">
     </mat-form-field>
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.gateway.messages-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.gateway.save-config-success-message</mat-label>
       <input matInput formControlName="successfulSave">
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.gateway.device-name-exists-message</mat-label>
       <input matInput formControlName="gatewayNameExists">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
index 5df07f2820..41e6a93d65 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html
@@ -20,12 +20,13 @@
                                   brackets="curly"
                                   subscriptSizing="fixed"
                                   predefinedValuesButton="true"
+                                  appearance="outline"
                                   label="{{ 'widgets.gateway.events-title' | translate }}"
                                   [predefinedValues]="predefinedValues"
                                   placeholderText="{{ 'widget-config.set' | translate }}"
                                   formControlName="eventsTitle"
   ></tb-string-pattern-autocomplete>
-  <mat-form-field class="mat-block flex-1" floatLabel="always">
+  <mat-form-field class="mat-block flex-1" floatLabel="always" appearance="outline">
     <mat-label translate>widgets.gateway.events-filter</mat-label>
     <mat-chip-grid #chipList formControlName="eventsReg">
       @for (eventFilter of gatewayEventsWidgetSettingsForm.get('eventsReg').value; track eventFilter) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
index 8863b76249..c995a68414 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-control-widget-settings.component.html
@@ -21,6 +21,7 @@
     <tb-color-input
       required
       formControlName="switchPanelBackgroundColor"
+      appearance="outline"
       icon="format_color_fill"
       label="{{ 'widgets.gpio.background-color' | translate }}" openOnInput colorClearButton>
     </tb-color-input>
@@ -56,13 +57,13 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.rpc.rpc-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.rpc.request-timeout</mat-label>
       <input required matInput type="number" min="0" formControlName="requestTimeout">
     </mat-form-field>
     <fieldset class="fields-group" formGroupName="gpioStatusRequest">
       <legend class="group-title" translate>widgets.gpio.gpio-status-request</legend>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.gpio.method-name</mat-label>
         <input required matInput formControlName="method">
       </mat-form-field>
@@ -76,7 +77,7 @@
     </fieldset>
     <fieldset class="fields-group" formGroupName="gpioStatusChangeRequest">
       <legend class="group-title" translate>widgets.gpio.gpio-status-change-request</legend>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.gpio.method-name</mat-label>
         <input required matInput formControlName="method">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
index 9147393187..f9fbfb1629 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/gpio/gpio-item.component.html
@@ -50,21 +50,21 @@
       <mat-divider></mat-divider>
       <section class="tb-widget-settings flex flex-col">
         <section class="flex flex-row xs:flex-col gt-xs:gap-2 gt-xs:items-center gt-xs:justify-start">
-          <mat-form-field class="mat-block flex=1">
+          <mat-form-field class="mat-block flex=1" appearance="outline">
             <mat-label translate>widgets.gpio.pin</mat-label>
             <input required matInput type="number" min="1" step="1" formControlName="pin">
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.gpio.label</mat-label>
             <input required matInput formControlName="label">
           </mat-form-field>
         </section>
         <section class="flex flex-row xs:flex-col gt-xs:gap-2 gt-xs:items-center gt-xs:justify-start">
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.gpio.row</mat-label>
             <input required matInput type="number" min="0" step="1" formControlName="row">
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.gpio.column</mat-label>
             <input required matInput type="number" min="0" max="1" step="1" formControlName="col">
           </mat-form-field>
@@ -72,6 +72,7 @@
         @if (hasColor) {
           <tb-color-input
             required
+            appearance="outline"
             formControlName="color"
             icon="format_color_fill"
             label="{{ 'widgets.gpio.color' | translate }}" openOnInput colorClearButton>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
index 7e00ea6435..d2cb8913db 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/home-page/quick-links-widget-settings.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section class="tb-widget-settings flex flex-col" [formGroup]="quickLinksWidgetSettingsForm">
-  <mat-form-field class="mat-block flex-1">
+  <mat-form-field class="mat-block flex-1" appearance="outline">
     <mat-label translate>widgets.quick-links.columns</mat-label>
     <input required matInput type="number" step="1" min="1" max="20" formControlName="columns">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
index dd9a5e09fd..47a9b7f7c8 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/datakey-select-option.component.html
@@ -45,11 +45,11 @@
       <mat-divider></mat-divider>
       <section class="tb-widget-settings flex flex-col">
         <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.input-widgets.option-value</mat-label>
             <input required matInput formControlName="value">
           </mat-form-field>
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.input-widgets.option-label</mat-label>
             <input matInput formControlName="label">
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
index f11b16200f..53a508a038 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/device-claiming-widget-settings.component.html
@@ -18,11 +18,11 @@
 <section class="tb-widget-settings flex flex-col" [formGroup]="deviceClaimingWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.widget-title</mat-label>
       <input matInput formControlName="widgetTitle">
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.claim-button-label</mat-label>
       <input matInput formControlName="labelClaimButon">
     </mat-form-field>
@@ -46,11 +46,11 @@
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
         <section class="flex flex-col">
-          <mat-form-field class="mat-block flex-1">
+          <mat-form-field class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.input-widgets.device-name-label</mat-label>
             <input matInput formControlName="deviceLabel">
           </mat-form-field>
-          <mat-form-field [class.!hidden]="!deviceClaimingWidgetSettingsForm.get('deviceSecret').value" class="mat-block flex-1">
+          <mat-form-field [class.!hidden]="!deviceClaimingWidgetSettingsForm.get('deviceSecret').value" class="mat-block flex-1" appearance="outline">
             <mat-label translate>widgets.input-widgets.secret-key-label</mat-label>
             <input matInput formControlName="secretKeyLabel">
           </mat-form-field>
@@ -60,23 +60,23 @@
   </fieldset>
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.messages-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.claim-device-success-message</mat-label>
       <input matInput formControlName="successfulClaimDevice">
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.claim-device-not-found-message</mat-label>
       <input matInput formControlName="deviceNotFound">
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.claim-device-failed-message</mat-label>
       <input matInput formControlName="failedClaimDevice">
     </mat-form-field>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.claim-device-name-required-message</mat-label>
       <input matInput formControlName="requiredErrorDevice">
     </mat-form-field>
-    <mat-form-field [class.!hidden]="!deviceClaimingWidgetSettingsForm.get('deviceSecret').value" class="mat-block flex-1">
+    <mat-form-field [class.!hidden]="!deviceClaimingWidgetSettingsForm.get('deviceSecret').value" class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.claim-device-secret-key-required-message</mat-label>
       <input matInput formControlName="requiredErrorSecretKey">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
index 2c811a6ce1..195e95bb97 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-image-attribute-widget-settings.component.html
@@ -18,9 +18,10 @@
 <section class="tb-widget-settings" [formGroup]="updateImageAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <tb-string-pattern-autocomplete class="mat-block flex-1" 
-                                              brackets="curly" 
+    <tb-string-pattern-autocomplete class="mat-block flex-1"
+                                              brackets="curly"
                                               subscriptSizing="fixed"
+                                              appearance="outline"
                                               predefinedValuesButton="true"
                                               label="{{ 'widgets.input-widgets.widget-title' | translate }}"
                                               [predefinedValues]="predefinedValues"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
index 83cd0fd5ba..0c50acd514 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-location-attribute-widget-settings.component.html
@@ -18,9 +18,10 @@
 <section class="tb-widget-settings" [formGroup]="updateLocationAttributeWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <tb-string-pattern-autocomplete class="mat-block flex-1" 
-                                              brackets="curly" 
+    <tb-string-pattern-autocomplete class="mat-block flex-1"
+                                              brackets="curly"
                                               subscriptSizing="fixed"
+                                              appearance="outline"
                                               predefinedValuesButton="true"
                                               label="{{ 'widgets.input-widgets.widget-title' | translate }}"
                                               [predefinedValues]="predefinedValues"
@@ -31,11 +32,11 @@
       {{ 'widgets.input-widgets.show-result-message' | translate }}
     </mat-slide-toggle>
     <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.input-widgets.latitude-key-name</mat-label>
         <input matInput formControlName="latKeyName">
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.input-widgets.longitude-key-name</mat-label>
         <input matInput formControlName="lngKeyName">
       </mat-form-field>
@@ -53,16 +54,16 @@
       {{ 'widgets.input-widgets.show-label' | translate }}
     </mat-slide-toggle>
     <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.input-widgets.latitude-label</mat-label>
         <input matInput formControlName="latLabel">
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.input-widgets.longitude-label</mat-label>
         <input matInput formControlName="lngLabel">
       </mat-form-field>
     </section>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.input-fields-alignment</mat-label>
       <mat-select formControlName="inputFieldsAlignment">
         <mat-option [value]="'column'">
@@ -81,7 +82,7 @@
         {{ 'widgets.input-widgets.longitude-field-required' | translate }}
       </mat-slide-toggle>
     </section>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
       <input matInput formControlName="requiredErrorMessage">
     </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
index 4d3b384386..faadbd6581 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-key-settings.component.html
@@ -23,7 +23,7 @@
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
     <div class="flex flex-col">
       <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-        <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+        <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%" appearance="outline">
           <mat-label translate>widgets.input-widgets.datakey-type</mat-label>
           <mat-select formControlName="dataKeyType">
             <mat-option [value]="'server'">
@@ -37,7 +37,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+        <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%" appearance="outline">
           <mat-label translate>widgets.input-widgets.datakey-value-type</mat-label>
           <mat-select formControlName="dataKeyValueType">
             <mat-option [value]="'string'">
@@ -83,7 +83,7 @@
         {{ 'widgets.input-widgets.value-is-required' | translate }}
       </mat-checkbox>
       <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-        <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+        <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%" appearance="outline">
           <mat-label translate>widgets.input-widgets.ability-to-edit-attribute</mat-label>
           <mat-select formControlName="isEditable">
             <mat-option [value]="'editable'">
@@ -97,7 +97,7 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('isEditable').value !== 'editable'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+        <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('isEditable').value !== 'editable'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%" appearance="outline">
           <mat-label translate>widgets.input-widgets.disable-on-datakey-name</mat-label>
           <input matInput formControlName="disabledOnDataKey">
         </mat-form-field>
@@ -105,7 +105,7 @@
       @if (!['booleanSwitch', 'booleanCheckbox', 'radio'].includes(updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value)) {
         <section
           class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-          <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+          <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%" appearance="outline">
             <mat-label translate>widgets.input-widgets.field-appearance</mat-label>
             <mat-select formControlName="appearance">
               <mat-option [value]="'fill'">
@@ -116,7 +116,7 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+          <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%" appearance="outline">
             <mat-label translate>widgets.input-widgets.subscript-sizing</mat-label>
             <mat-select formControlName="subscriptSizing">
               <mat-option [value]="'fixed'">
@@ -134,7 +134,7 @@
   <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'booleanSwitch'" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.slide-toggle-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.slide-toggle-label-position</mat-label>
       <mat-select formControlName="slideToggleLabelPosition">
         <mat-option [value]="'after'">
@@ -188,6 +188,7 @@
     <div class="tb-form-row space-between">
       <div>{{ 'widgets.input-widgets.color' | translate }}</div>
       <tb-color-input asBoxInput
+                      appearance="outline"
                       formControlName="radioColor">
       </tb-color-input>
     </div>
@@ -216,15 +217,15 @@
                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'double')" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.numeric-field-settings</legend>
     <section class="flex flex-col gt-xs:flex-row gt-xs:gap-2">
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.input-widgets.step-interval</mat-label>
         <input matInput type="number" min="0" formControlName="step">
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.input-widgets.min-value</mat-label>
         <input matInput type="number" formControlName="minValue">
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.input-widgets.max-value</mat-label>
         <input matInput type="number" formControlName="maxValue">
       </mat-form-field>
@@ -232,29 +233,30 @@
   </fieldset>
   <fieldset [class.!hidden]="!displayErrorMessagesSection()" class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.error-messages</legend>
-    <mat-form-field [class.!hidden]="!updateMultipleAttributesKeySettingsForm.get('required').value" class="mat-block flex-1">
+    <mat-form-field [class.!hidden]="!updateMultipleAttributesKeySettingsForm.get('required').value" class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.required-error-message</mat-label>
       <input matInput formControlName="requiredErrorMessage">
     </mat-form-field>
     <section [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'integer' &&
                               updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'double'"
       class="flex flex-row gap-2">
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.input-widgets.min-value-error-message</mat-label>
         <input matInput formControlName="minValueErrorMessage">
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.input-widgets.max-value-error-message</mat-label>
         <input matInput formControlName="maxValueErrorMessage">
       </mat-form-field>
     </section>
     <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'dateTime' &&
                                      updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'date' &&
-                                     updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'time'" class="mat-block flex-1">
+                                     updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'time'" class="mat-block flex-1"
+                    appearance="outline">
       <mat-label translate>widgets.input-widgets.invalid-date-error-message</mat-label>
       <input matInput formControlName="invalidDateErrorMessage">
     </mat-form-field>
-    <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'JSON'" class="mat-block flex-1">
+    <mat-form-field [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'JSON'" class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.invalid-JSON-error-message</mat-label>
       <input matInput formControlName="invalidJsonErrorMessage">
     </mat-form-field>
@@ -262,16 +264,16 @@
   <fieldset [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('dataKeyHidden').value ||
                              updateMultipleAttributesKeySettingsForm.get('dataKeyValueType').value !== 'JSON'"class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.dialog-editor-settings</legend>
-    <mat-form-field class="mat-block flex-1">
+    <mat-form-field class="mat-block flex-1" appearance="outline">
       <mat-label translate>widgets.input-widgets.title</mat-label>
       <input matInput formControlName="dialogTitle">
     </mat-form-field>
     <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
         <input matInput formControlName="saveButtonLabel">
       </mat-form-field>
-      <mat-form-field class="mat-block flex-1">
+      <mat-form-field class="mat-block flex-1" appearance="outline">
         <mat-label translate>widgets.input-widgets.cancel-button-label</mat-label>
         <input matInput formControlName="cancelButtonLabel">
       </mat-form-field>
@@ -287,7 +289,8 @@
     <tb-material-icon-select [class.!hidden]="updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
                              label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
                              iconClearButton
-                             formControlName="icon">
+                             formControlName="icon"
+                             appearance="outline">
     </tb-material-icon-select>
     <tb-gallery-image-input [class.!hidden]="!updateMultipleAttributesKeySettingsForm.get('useCustomIcon').value"
                             label="{{ 'widgets.input-widgets.input-cell-icon' | translate }}"
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
index b9def80dfd..4c0d9bf4f2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/input/update-multiple-attributes-widget-settings.component.html
@@ -18,10 +18,11 @@
 <section class="tb-widget-settings" [formGroup]="updateMultipleAttributesWidgetSettingsForm">
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.general-settings</legend>
-    <tb-string-pattern-autocomplete class="mat-block flex-1" 
-                                              brackets="curly" 
+    <tb-string-pattern-autocomplete class="mat-block flex-1"
+                                              brackets="curly"
                                               subscriptSizing="fixed"
                                               predefinedValuesButton="true"
+                                              appearance="outline"
                                               label="{{ 'widgets.input-widgets.widget-title' | translate }}"
                                               [predefinedValues]="predefinedValues"
                                               placeholderText="{{ 'widget-config.set' | translate }}"
@@ -51,11 +52,11 @@
             {{ 'widgets.input-widgets.update-all-values' | translate }}
           </mat-checkbox>
           <section class="flex flex-row xs:flex-col gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-            <mat-form-field class="mat-block flex-1">
+            <mat-form-field class="mat-block flex-1" appearance="outline">
               <mat-label translate>widgets.input-widgets.save-button-label</mat-label>
               <input matInput formControlName="saveButtonLabel">
             </mat-form-field>
-            <mat-form-field class="mat-block flex-1">
+            <mat-form-field class="mat-block flex-1" appearance="outline">
               <mat-label translate>widgets.input-widgets.reset-button-label</mat-label>
               <input matInput formControlName="resetButtonLabel">
             </mat-form-field>
@@ -70,7 +71,7 @@
       <mat-slide-toggle formControlName="showGroupTitle" class="slide-block flex-full xs:max-h-30% gt-xs:max-w-30%">
         {{ 'widgets.input-widgets.show-group-title' | translate }}
       </mat-slide-toggle>
-      <mat-form-field class="mat-block flex-full xs:max-h-70% gt-xs:max-w-70%">
+      <mat-form-field class="mat-block flex-full xs:max-h-70% gt-xs:max-w-70%" appearance="outline">
         <mat-label translate>widgets.input-widgets.group-title</mat-label>
         <input matInput formControlName="groupTitle">
       </mat-form-field>
@@ -79,7 +80,7 @@
   <fieldset class="fields-group">
     <legend class="group-title" translate>widgets.input-widgets.layout</legend>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%" appearance="outline">
         <mat-label translate>widgets.input-widgets.fields-alignment</mat-label>
         <mat-select formControlName="fieldsAlignment">
           <mat-option [value]="'row'">
@@ -90,17 +91,17 @@
           </mat-option>
         </mat-select>
       </mat-form-field>
-      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%" appearance="outline">
         <mat-label translate>widgets.input-widgets.fields-in-row</mat-label>
         <input matInput type="number" min="1" step="1" formControlName="fieldsInRow">
       </mat-form-field>
     </section>
     <section class="flex flex-col gt-xs:flex-row gt-xs:items-center gt-xs:justify-start gt-xs:gap-2">
-      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+      <mat-form-field class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%" appearance="outline">
         <mat-label translate>widgets.input-widgets.row-gap</mat-label>
         <input matInput type="number" min="0" step="1" formControlName="rowGap">
       </mat-form-field>
-      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%">
+      <mat-form-field [class.!hidden]="updateMultipleAttributesWidgetSettingsForm.get('fieldsAlignment').value !== 'row'" class="mat-block flex-full xs:max-h-50% gt-xs:max-w-50%" appearance="outline">
         <mat-label translate>widgets.input-widgets.column-gap</mat-label>
         <input matInput type="number" min="0" step="1" formControlName="columnGap">
       </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
index e5176cd05b..e7dab2597f 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-card-widget-settings.component.html
@@ -16,16 +16,17 @@
 
 -->
 <section class="tb-widget-settings flex flex-col" [formGroup]="navigationCardWidgetSettingsForm">
-  <mat-form-field class="mat-block flex-1">
+  <mat-form-field class="mat-block flex-1" appearance="outline">
     <mat-label translate>widgets.navigation.title</mat-label>
     <input required matInput formControlName="name">
   </mat-form-field>
   <tb-material-icon-select class="flex-1"
                            iconClearButton
                            required
+                           appearance="outline"
                            formControlName="icon">
   </tb-material-icon-select>
-  <mat-form-field class="mat-block flex-1">
+  <mat-form-field class="mat-block flex-1" appearance="outline">
     <mat-label translate>widgets.navigation.navigation-path</mat-label>
     <input required matInput formControlName="path">
   </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
index d240db2726..18284f79b5 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/navigation/navigation-cards-widget-settings.component.html
@@ -24,7 +24,7 @@
       <mat-radio-button [value]="'exclude'">{{ 'widgets.navigation.filter-type-exclude' | translate }}</mat-radio-button>
     </mat-radio-group>
   </section>
-  <mat-form-field [class.!hidden]="navigationCardsWidgetSettingsForm.get('filterType').value === 'all'" class="mat-block flex-1" floatLabel="always">
+  <mat-form-field [class.!hidden]="navigationCardsWidgetSettingsForm.get('filterType').value === 'all'" class="mat-block flex-1" floatLabel="always" appearance="outline">
     <mat-label translate>widgets.navigation.items</mat-label>
     <mat-chip-grid #filterItemsChipList>
       @for (filterItem of navigationCardsWidgetSettingsForm.get('filter').value; track filterItem) {
diff --git a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
index 3b248f086e..b7faecb1e4 100644
--- a/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/widget-config.component.html
@@ -298,7 +298,7 @@
     @if (widgetType === widgetTypes.rpc &&
       modelValue?.isDataEnabled) {
       <ng-container [formGroup]="targetDeviceSettings">
-        <tb-target-device formControlName="targetDevice">
+        <tb-target-device formControlName="targetDevice" appearance="outline">
         </tb-target-device>
       </ng-container>
     }
diff --git a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
index 3245013330..96975f3f70 100644
--- a/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/admin/send-test-sms-dialog.component.html
@@ -35,10 +35,11 @@
     <fieldset [disabled]="(isLoading$ | async)">
       <tb-phone-input required
                       formControlName="numberTo"
+                      appearance="outline"
                       [enableFlagsSelect]="false"
                       label="{{ 'admin.number-to' | translate }}">
       </tb-phone-input>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>admin.sms-message</mat-label>
         <textarea required matInput rows="3" [maxLength]="1600" formControlName="message"></textarea>
         @if (sendTestSmsFormGroup.get('message').hasError('required')) {
diff --git a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html
index db5287fd68..76349148fd 100644
--- a/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device-profile/device-profile-tabs.component.html
@@ -19,7 +19,7 @@
   <mat-tab #transportType="matTab" label="{{ 'device-profile.transport-configuration' | translate }}">
     @if (transportType.isActive) {
       <div class="mat-padding" [formGroup]="detailsForm">
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>device-profile.transport-type</mat-label>
           <mat-select formControlName="transportType" required>
             @for (type of deviceTransportTypes; track type) {
diff --git a/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html b/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
index 992a88ab16..ec05b5ae77 100644
--- a/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/pages/device/data/snmp-device-transport-configuration.component.html
@@ -17,7 +17,7 @@
 -->
 <form [formGroup]="snmpDeviceTransportConfigurationFormGroup" class="flex flex-col gap-2 pb-4">
   <div class="flex flex-row gap-2 xs:flex-col">
-    <mat-form-field class="flex-1">
+    <mat-form-field class="flex-1" appearance="outline">
       <mat-label translate>device-profile.snmp.host</mat-label>
       <input matInput formControlName="host" required>
       @if (snmpDeviceTransportConfigurationFormGroup.get('host').hasError('required') ||
@@ -27,7 +27,7 @@
         </mat-error>
       }
     </mat-form-field>
-    <mat-form-field class="flex-1">
+    <mat-form-field class="flex-1" appearance="outline">
       <mat-label translate>device-profile.snmp.port</mat-label>
       <input matInput formControlName="port" type="number" min="0" required>
       @if (snmpDeviceTransportConfigurationFormGroup.get('port').hasError('required')) {
@@ -43,7 +43,7 @@
       }
     </mat-form-field>
   </div>
-  <mat-form-field class="mat-block" floatLabel="always" hideRequiredMarker>
+  <mat-form-field class="mat-block" floatLabel="always" hideRequiredMarker appearance="outline">
     <mat-label translate>device-profile.snmp.protocol-version</mat-label>
     <mat-select formControlName="protocolVersion" required>
       @for (snmpDeviceProtocolVersion of snmpDeviceProtocolVersions; track snmpDeviceProtocolVersion) {
@@ -60,7 +60,7 @@
   </mat-form-field>
   @if (!isV3protocolVersion()) {
     <section>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>device-profile.snmp.community</mat-label>
         <input matInput formControlName="community" required>
         @if (snmpDeviceTransportConfigurationFormGroup.get('community').hasError('required') ||
@@ -75,7 +75,7 @@
   @if (isV3protocolVersion()) {
     <section>
       <div class="flex flex-row gap-2 xs:flex-col">
-        <mat-form-field class="flex-1">
+        <mat-form-field class="flex-1" appearance="outline">
           <mat-label translate>device-profile.snmp.user-name</mat-label>
           <input matInput formControlName="username" required>
           @if (snmpDeviceTransportConfigurationFormGroup.get('username').hasError('required') ||
@@ -85,7 +85,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="flex-1">
+        <mat-form-field class="flex-1" appearance="outline">
           <mat-label translate>device-profile.snmp.security-name</mat-label>
           <input matInput formControlName="securityName" required>
           @if (snmpDeviceTransportConfigurationFormGroup.get('securityName').hasError('required') ||
@@ -97,7 +97,7 @@
         </mat-form-field>
       </div>
       <div class="flex flex-row gap-2 xs:flex-col">
-        <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
+        <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker appearance="outline">
           <mat-label translate>device-profile.snmp.authentication-protocol</mat-label>
           <mat-select formControlName="authenticationProtocol" required>
             @for (snmpAuthenticationProtocol of snmpAuthenticationProtocols; track snmpAuthenticationProtocol) {
@@ -112,7 +112,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="flex-1">
+        <mat-form-field class="flex-1" appearance="outline">
           <mat-label translate>device-profile.snmp.authentication-passphrase</mat-label>
           <input matInput formControlName="authenticationPassphrase" required>
           @if (snmpDeviceTransportConfigurationFormGroup.get('authenticationPassphrase').hasError('required') ||
@@ -124,7 +124,7 @@
         </mat-form-field>
       </div>
       <div class="flex flex-row gap-2 xs:flex-col">
-        <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker>
+        <mat-form-field class="flex-1" floatLabel="always" hideRequiredMarker appearance="outline">
           <mat-label translate>device-profile.snmp.privacy-protocol</mat-label>
           <mat-select formControlName="privacyProtocol" required>
             @for (snmpPrivacyProtocol of snmpPrivacyProtocols; track snmpPrivacyProtocol) {
@@ -139,7 +139,7 @@
             </mat-error>
           }
         </mat-form-field>
-        <mat-form-field class="flex-1">
+        <mat-form-field class="flex-1" appearance="outline">
           <mat-label translate>device-profile.snmp.privacy-passphrase</mat-label>
           <input matInput formControlName="privacyPassphrase" required>
           @if (snmpDeviceTransportConfigurationFormGroup.get('privacyPassphrase').hasError('required') ||
@@ -151,11 +151,11 @@
         </mat-form-field>
       </div>
       <div class="flex flex-row gap-2 xs:flex-col">
-        <mat-form-field class="flex-1">
+        <mat-form-field class="flex-1" appearance="outline">
           <mat-label translate>device-profile.snmp.context-name</mat-label>
           <input matInput formControlName="contextName">
         </mat-form-field>
-        <mat-form-field class="flex-1">
+        <mat-form-field class="flex-1" appearance="outline">
           <mat-label translate>device-profile.snmp.engine-id</mat-label>
           <input matInput formControlName="engineId">
         </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
index 2d8eef6454..d0b9c32b2b 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/create-nested-rulechain-dialog.component.html
@@ -32,7 +32,7 @@
   <div mat-dialog-content>
     <form [formGroup]="createNestedRuleChainFormGroup" class="mat-padding">
       <fieldset [disabled]="isLoading$ | async">
-        <mat-form-field class="mat-block flex-1">
+        <mat-form-field class="mat-block flex-1" appearance="outline">
           <mat-label translate>rulechain.name</mat-label>
           <input matInput formControlName="name" required>
           @if (createNestedRuleChainFormGroup.get('name').hasError('required')) {
@@ -47,7 +47,7 @@
           }
         </mat-form-field>
         <div formGroupName="additionalInfo">
-          <mat-form-field class="mat-block">
+          <mat-form-field class="mat-block" appearance="outline">
             <mat-label translate>rulechain.description</mat-label>
             <textarea matInput formControlName="description" rows="2"></textarea>
           </mat-form-field>
diff --git a/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html b/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html
index d243baaa29..f6e244a81b 100644
--- a/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html
+++ b/ui-ngx/src/app/modules/home/pages/rulechain/link-labels.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="linksFormGroup" style="width: 100%;">
+<mat-form-field [formGroup]="linksFormGroup" style="width: 100%;" appearance="outline">
   <mat-label translate>rulenode.link-labels</mat-label>
   <mat-chip-grid #chipList>
     @for (label of labels; track label) {
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
index 669fe49250..ccf853359c 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/email-auth-dialog.component.html
@@ -40,7 +40,7 @@
       <form [formGroup]="emailConfigForm" (ngSubmit)="nextStep()">
         <p class="mat-body step-description input" translate>security.2fa.dialog.email-step-description</p>
         <div class="flex flex-row items-center justify-between gap-2">
-          <mat-form-field class="mat-block input-container flex-1">
+          <mat-form-field class="mat-block input-container flex-1" appearance="outline">
             <input matInput formControlName="email"
                    type="email"
                    placeholder="{{ 'security.2fa.dialog.email-step-label' | translate }}" />
@@ -71,7 +71,7 @@
           {{ 'security.2fa.dialog.verification-step-description' | translate : {address: emailConfigForm.get('email').value} }}
         </p>
         <div class="flex flex-row items-center justify-between xs:flex-col xs:items-end xs:justify-start">
-          <mat-form-field class="mat-block code-container full-width-xs flex-1">
+          <mat-form-field class="mat-block code-container full-width-xs flex-1" appearance="outline">
             <input matInput formControlName="verificationCode"
                    maxlength="6" type="text" required
                    inputmode="numeric" pattern="[0-9]*"
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
index fa4b78de70..a568402d99 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/sms-auth-dialog.component.html
@@ -42,6 +42,7 @@
         <div class="flex flex-row items-center justify-between gap-3.75">
           <tb-phone-input class="flex-1"
                           formControlName="phone"
+                          appearance="outline"
                           [floatLabel]="'never'"
                           placeholder="{{ 'security.2fa.dialog.sms-step-label' | translate }}">
           </tb-phone-input>
@@ -61,7 +62,7 @@
           {{ 'security.2fa.dialog.verification-step-description' | translate : {address: smsConfigForm.get('phone').value} }}
         </p>
         <div class="flex flex-row items-center justify-between xs:flex-col xs:items-end xs:justify-start">
-          <mat-form-field class="mat-block code-container full-width-xs flex-1">
+          <mat-form-field class="mat-block code-container full-width-xs flex-1" appearance="outline">
             <input matInput formControlName="verificationCode"
                    maxlength="6" type="text" required
                    inputmode="numeric" pattern="[0-9]*"
diff --git a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
index 39b4bf3762..03dfc8a112 100644
--- a/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/security/authentication-dialog/totp-auth-dialog.component.html
@@ -69,7 +69,7 @@
           </tb-copy-button>
         </div>
         <p class="mat-body qr-code-description" style="margin-top: 30px;" translate>security.2fa.dialog.enter-verification-code</p>
-        <mat-form-field class="mat-block code-container flex-1">
+        <mat-form-field class="mat-block code-container flex-1" appearance="outline">
           <input matInput formControlName="verificationCode"
                  maxlength="6" type="text" required
                  inputmode="numeric" pattern="[0-9]*"
diff --git a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
index b76b922008..1b316cdc81 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/save-widget-type-as-dialog.component.html
@@ -33,7 +33,7 @@
   }
   <div mat-dialog-content>
     <span translate>{{ dialogTitle }}</span>
-    <mat-form-field class="mat-block">
+    <mat-form-field class="mat-block mt-2" appearance="outline">
       <mat-label translate>widget.title</mat-label>
       <input matInput formControlName="title" required>
       @if (saveWidgetTypeAsFormGroup.get('title').hasError('required')) {
@@ -44,6 +44,7 @@
     </mat-form-field>
     <tb-widgets-bundle-select
       formControlName="widgetsBundle"
+      appearance="outline"
       createNew
       bundlesScope="{{bundlesScope}}">
     </tb-widgets-bundle-select>
diff --git a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
index 89f2547118..9bf27b06e3 100644
--- a/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
+++ b/ui-ngx/src/app/modules/home/pages/widget/widgets-bundle.component.html
@@ -46,7 +46,7 @@
 <div class="mat-padding flex flex-col">
   <form [formGroup]="entityForm">
     <fieldset [disabled]="(isLoading$ | async) || !isEdit">
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>widgets-bundle.title</mat-label>
         <input matInput formControlName="title" required>
         @if (entityForm.get('title').hasError('required')) {
@@ -64,18 +64,18 @@
                               label="{{'widgets-bundle.image-preview' | translate}}"
                               formControlName="image">
       </tb-gallery-image-input>
-      <mat-form-field class="mat-block">
-        <mat-label translate>widgets-bundle.description</mat-label>
-        <textarea matInput formControlName="description" rows="2" maxlength="1024" #descriptionInput></textarea>
-        <mat-hint align="end">{{descriptionInput.value?.length || 0}}/1024</mat-hint>
-      </mat-form-field>
       <mat-slide-toggle formControlName="scada" style="padding-bottom: 16px;">
         {{ 'widgets-bundle.scada' | translate }}
       </mat-slide-toggle>
-      <mat-form-field class="mat-block">
+      <mat-form-field class="mat-block" appearance="outline">
         <mat-label translate>widgets-bundle.order</mat-label>
         <input matInput type="number" step="1" formControlName="order">
       </mat-form-field>
+      <mat-form-field class="mat-block" appearance="outline">
+        <mat-label translate>widgets-bundle.description</mat-label>
+        <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="1" rows="1" #descriptionInput></textarea>
+        <mat-hint align="end">{{descriptionInput.value?.length || 0}}/1024</mat-hint>
+      </mat-form-field>
     </fieldset>
   </form>
 </div>
diff --git a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html
index 12e027ee73..7126e6b3a2 100644
--- a/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html
+++ b/ui-ngx/src/app/modules/login/pages/login/force-two-factor-auth-login.component.html
@@ -120,6 +120,7 @@
                                     label="{{ 'login.phone-input.phone-input-label' | translate }}"
                                     hint="login.phone-input.phone-input-hint"
                                     requiredErrorText="{{ 'login.phone-input.phone-input-required' | translate }}"
+                                    appearance="outline"
                                     validationErrorText="{{ 'login.phone-input.phone-input-validation' | translate }}"
                                     formControlName="phone"
                                     [floatLabel]="'auto'">
diff --git a/ui-ngx/src/app/shared/components/color-input.component.html b/ui-ngx/src/app/shared/components/color-input.component.html
index d2f21661bc..95c16c2662 100644
--- a/ui-ngx/src/app/shared/components/color-input.component.html
+++ b/ui-ngx/src/app/shared/components/color-input.component.html
@@ -16,7 +16,7 @@
 
 -->
 @if (!asBoxInput) {
-  <mat-form-field [formGroup]="colorFormGroup">
+  <mat-form-field [formGroup]="colorFormGroup" [appearance]="appearance">
     @if (icon || label) {
       <mat-label>
         @if (icon) {
diff --git a/ui-ngx/src/app/shared/components/color-input.component.ts b/ui-ngx/src/app/shared/components/color-input.component.ts
index dd5dd847a3..1d5e68bd92 100644
--- a/ui-ngx/src/app/shared/components/color-input.component.ts
+++ b/ui-ngx/src/app/shared/components/color-input.component.ts
@@ -19,7 +19,7 @@ import {
   Component,
   DestroyRef,
   ElementRef,
-  forwardRef,
+  forwardRef, input,
   Input,
   OnInit,
   Renderer2,
@@ -42,6 +42,7 @@ import { coerceBoolean } from '@shared/decorators/coercion';
 import { TbPopoverService } from '@shared/components/popover.service';
 import { ColorPickerPanelComponent } from '@shared/components/color-picker/color-picker-panel.component';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 
 @Component({
     selector: 'tb-color-input',
@@ -83,6 +84,9 @@ export class ColorInputComponent extends PageComponent implements OnInit, Contro
   @coerceBoolean()
   noBorder = false;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   private requiredValue: boolean;
   get required(): boolean {
     return this.requiredValue;
diff --git a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
index edde51a8a7..3e7b85268a 100644
--- a/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
+++ b/ui-ngx/src/app/shared/components/image/upload-image-dialog.component.html
@@ -45,7 +45,7 @@
                       (fileNameChanged)="imageFileNameChanged($event)">
       </tb-image-input>
       @if (uploadImage && uploadImageFormGroup.get('file').value) {
-        <mat-form-field class="mat-block">
+        <mat-form-field class="mat-block" appearance="outline">
           <mat-label translate>image.name</mat-label>
           <input matInput formControlName="title" required>
           @if (uploadImageFormGroup.get('title').hasError('required')) {
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.html b/ui-ngx/src/app/shared/components/widgets-bundle-select.component.html
index 5a69f8ddc3..d383c7ba71 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.html
+++ b/ui-ngx/src/app/shared/components/widgets-bundle-select.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-form-field class="mat-block">
+<mat-form-field class="mat-block" [appearance]="appearance">
   <mat-select [required]="required"
               [disabled]="disabled"
               [(ngModel)]="widgetsBundle"
diff --git a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.ts b/ui-ngx/src/app/shared/components/widgets-bundle-select.component.ts
index aa4d8328ba..e8bd78262b 100644
--- a/ui-ngx/src/app/shared/components/widgets-bundle-select.component.ts
+++ b/ui-ngx/src/app/shared/components/widgets-bundle-select.component.ts
@@ -40,6 +40,7 @@ import {
   WidgetsBundleDialogComponent,
   WidgetsBundleDialogData
 } from '@home/pages/widget/widgets-bundle-dialog.component';
+import { MatFormFieldAppearance } from '@angular/material/form-field';
 
 @Component({
     selector: 'tb-widgets-bundle-select',
@@ -79,6 +80,9 @@ export class WidgetsBundleSelectComponent implements ControlValueAccessor, OnIni
   @coerceBoolean()
   createNew: boolean;
 
+  @Input()
+  appearance: MatFormFieldAppearance = 'fill';
+
   widgetsBundles$: Observable<Array<WidgetsBundle>>;
 
   widgetsBundles: Array<WidgetsBundle>;