diff --git a/ui-ngx/src/app/core/services/dashboard-utils.service.ts b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
index f667fb5788..0dc143e6cb 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -231,7 +231,6 @@ export class DashboardUtilsService {
   private createDefaultGridSettings(): GridSettings {
     return {
       backgroundColor: '#eeeeee',
-      color: 'rgba(0,0,0,0.870588)',
       columns: 24,
       margin: 10,
       backgroundSizeMode: '100%'
diff --git a/ui-ngx/src/app/core/services/mobile.service.ts b/ui-ngx/src/app/core/services/mobile.service.ts
index 800651356a..cc940d6f85 100644
--- a/ui-ngx/src/app/core/services/mobile.service.ts
+++ b/ui-ngx/src/app/core/services/mobile.service.ts
@@ -27,6 +27,7 @@ import { AuthService } from '@core/auth/auth.service';
 
 const dashboardStateNameHandler = 'tbMobileDashboardStateNameHandler';
 const dashboardLoadedHandler = 'tbMobileDashboardLoadedHandler';
+const dashboardLayoutHandler = 'tbMobileDashboardLayoutHandler';
 const navigationHandler = 'tbMobileNavigationHandler';
 const mobileHandler = 'tbMobileHandler';
 
@@ -43,6 +44,7 @@ export class MobileService {
 
   private reloadUserObservable: Observable<boolean>;
   private lastDashboardId: string;
+  private toggleLayoutFunction: () => void;
 
   constructor(@Inject(WINDOW) private window: Window,
               private router: Router,
@@ -65,12 +67,26 @@ export class MobileService {
     }
   }
 
-  public onDashboardLoaded() {
+  public onDashboardLoaded(hasRightLayout: boolean, rightLayoutOpened: boolean) {
     if (this.mobileApp) {
-      this.mobileChannel.callHandler(dashboardLoadedHandler);
+      this.mobileChannel.callHandler(dashboardLoadedHandler, hasRightLayout, rightLayoutOpened);
     }
   }
 
+  public onDashboardRightLayoutChanged(opened: boolean) {
+    if (this.mobileApp) {
+      this.mobileChannel.callHandler(dashboardLayoutHandler, opened);
+    }
+  }
+
+  public registerToggleLayoutFunction(toggleLayoutFunction: () => void) {
+    this.toggleLayoutFunction = toggleLayoutFunction;
+  }
+
+  public unregisterToggleLayoutFunction() {
+    this.toggleLayoutFunction = null;
+  }
+
   public handleWidgetMobileAction<T extends MobileActionResult>(type: WidgetMobileActionType, ...args: any[]):
     Observable<WidgetMobileActionResult<T>> {
     if (this.mobileApp) {
@@ -110,6 +126,11 @@ export class MobileService {
             const reloadUserMessage: ReloadUserMessage = message.data;
             this.reloadUser(reloadUserMessage);
             break;
+          case 'toggleDashboardLayout':
+            if (this.toggleLayoutFunction) {
+              this.toggleLayoutFunction();
+            }
+            break;
         }
       }
     }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
index 89629bfe49..cc19e98a99 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@@ -149,8 +149,16 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   @Input()
   currentState: string;
 
+  private hideToolbarValue = false;
+
   @Input()
-  hideToolbar: boolean;
+  set hideToolbar(hideToolbar: boolean) {
+    this.hideToolbarValue = hideToolbar;
+  }
+
+  get hideToolbar(): boolean {
+    return (this.hideToolbarValue || this.hideToolbarSetting()) && !this.isEdit;
+  }
 
   @Input()
   syncStateWithQueryParam = true;
@@ -269,6 +277,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     return !this.widgetEditMode && !this.hideToolbar &&
       (this.toolbarAlwaysOpen() || this.isToolbarOpened || this.isEdit || this.showRightLayoutSwitch());
   }
+
   set toolbarOpened(toolbarOpened: boolean) {
   }
 
@@ -329,7 +338,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
           this.dashboardCtx.aliasController.updateAliases();
           setTimeout(() => {
             this.mobileService.handleDashboardStateName(this.dashboardCtx.stateController.getCurrentStateName());
-            this.mobileService.onDashboardLoaded();
+            this.mobileService.onDashboardLoaded(this.layouts.right.show, this.isRightLayoutOpened);
           });
         }
       }
@@ -340,6 +349,14 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
           this.isMobile = !state.matches;
         }
     ));
+    if (this.isMobileApp) {
+      this.mobileService.registerToggleLayoutFunction(() => {
+        setTimeout(() => {
+          this.toggleLayouts();
+          this.cd.detectChanges();
+        });
+      });
+    }
   }
 
   private init(data: any) {
@@ -430,6 +447,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   }
 
   ngOnDestroy(): void {
+    if (this.isMobileApp) {
+      this.mobileService.unregisterToggleLayoutFunction();
+    }
     this.rxSubscriptions.forEach((subscription) => {
       subscription.unsubscribe();
     });
@@ -469,6 +489,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
   }
 
+  private hideToolbarSetting(): boolean {
+    if (this.dashboard.configuration.settings &&
+      isDefined(this.dashboard.configuration.settings.hideToolbar)) {
+      return this.dashboard.configuration.settings.hideToolbar;
+    } else {
+      return false;
+    }
+  }
+
   public displayTitle(): boolean {
     if (this.dashboard.configuration.settings &&
       isDefined(this.dashboard.configuration.settings.showTitle)) {
@@ -546,15 +575,17 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   }
 
   public showRightLayoutSwitch(): boolean {
-    return this.isMobile && this.layouts.right.show;
+    return this.isMobile && !this.isMobileApp && this.layouts.right.show;
   }
 
   public toggleLayouts() {
     this.isRightLayoutOpened = !this.isRightLayoutOpened;
+    this.mobileService.onDashboardRightLayoutChanged(this.isRightLayoutOpened);
   }
 
   public openRightLayout() {
     this.isRightLayoutOpened = true;
+    this.mobileService.onDashboardRightLayoutChanged(this.isRightLayoutOpened);
   }
 
   public mainLayoutWidth(): string {
@@ -782,7 +813,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
       this.updateLayouts(layoutsData);
     }
     setTimeout(() => {
-      this.mobileService.onDashboardLoaded();
+      this.mobileService.onDashboardLoaded(this.layouts.right.show, this.isRightLayoutOpened);
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
index f84405faed..14c2df301b 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<form (ngSubmit)="save()">
+<form (ngSubmit)="save()" style="width: 750px;">
   <mat-toolbar color="primary">
     <h2 translate>{{settings ? 'dashboard.settings' : 'layout.settings'}}</h2>
     <span fxFlex></span>
@@ -28,8 +28,8 @@
   <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
   </mat-progress-bar>
   <div mat-dialog-content>
-    <fieldset [disabled]="isLoading$ | async" fxLayout="column" fxLayoutGap="16px">
-      <div *ngIf="settings" [formGroup]="settingsFormGroup">
+    <fieldset [disabled]="isLoading$ | async">
+      <div *ngIf="settings" [formGroup]="settingsFormGroup" fxLayout="column">
         <mat-form-field class="mat-block">
           <mat-label translate>dashboard.state-controller</mat-label>
           <mat-select required formControlName="stateControllerId">
@@ -38,112 +38,116 @@
             </mat-option>
           </mat-select>
         </mat-form-field>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.lt-md="column" fxLayoutAlign.lt-md fxLayoutGap="8px">
-          <mat-checkbox fxFlex formControlName="toolbarAlwaysOpen">
-            {{ 'dashboard.toolbar-always-open' | translate }}
-          </mat-checkbox>
-          <mat-checkbox fxFlex formControlName="showTitle">
+        <fieldset class="fields-group" fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" fxLayoutGap="8px">
+          <legend class="group-title" translate>dashboard.title-settings</legend>
+          <mat-slide-toggle fxFlex formControlName="showTitle">
             {{ 'dashboard.display-title' | translate }}
-          </mat-checkbox>
+          </mat-slide-toggle>
           <tb-color-input fxFlex
                           label="{{'dashboard.title-color' | translate}}"
                           icon="format_color_fill"
                           openOnInput
                           formControlName="titleColor">
           </tb-color-input>
-        </div>
-        <div fxLayout="row" fxLayoutAlign="start center" style="margin-bottom: 8px;"
-             fxLayout.lt-md="column" fxLayoutAlign.lt-md  fxLayoutGap="8px">
-          <mat-checkbox fxFlex formControlName="showDashboardsSelect">
+        </fieldset>
+        <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
+          <legend class="group-title" translate>dashboard.dashboard-logo-settings</legend>
+          <mat-slide-toggle formControlName="showDashboardLogo">
+            {{ 'dashboard.display-dashboard-logo' | translate }}
+          </mat-slide-toggle>
+          <tb-image-input fxFlex
+                          label="{{'dashboard.dashboard-logo-image' | translate}}"
+                          formControlName="dashboardLogoUrl">
+          </tb-image-input>
+        </fieldset>
+        <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
+          <legend class="group-title" translate>dashboard.toolbar-settings</legend>
+          <mat-slide-toggle formControlName="hideToolbar">
+            {{ 'dashboard.hide-toolbar' | translate }}
+          </mat-slide-toggle>
+          <mat-slide-toggle formControlName="toolbarAlwaysOpen">
+            {{ 'dashboard.toolbar-always-open' | translate }}
+          </mat-slide-toggle>
+          <mat-slide-toggle formControlName="showDashboardsSelect">
             {{ 'dashboard.display-dashboards-selection' | translate }}
-          </mat-checkbox>
-          <mat-checkbox fxFlex formControlName="showEntitiesSelect">
+          </mat-slide-toggle>
+          <mat-slide-toggle formControlName="showEntitiesSelect">
             {{ 'dashboard.display-entities-selection' | translate }}
-          </mat-checkbox>
-          <mat-checkbox fxFlex formControlName="showFilters">
+          </mat-slide-toggle>
+          <mat-slide-toggle formControlName="showFilters">
             {{ 'dashboard.display-filters' | translate }}
-          </mat-checkbox>
-          <mat-checkbox fxFlex formControlName="showDashboardTimewindow">
+          </mat-slide-toggle>
+          <mat-slide-toggle formControlName="showDashboardTimewindow">
             {{ 'dashboard.display-dashboard-timewindow' | translate }}
-          </mat-checkbox>
-          <mat-checkbox fxFlex formControlName="showDashboardExport">
+          </mat-slide-toggle>
+          <mat-slide-toggle formControlName="showDashboardExport">
             {{ 'dashboard.display-dashboard-export' | translate }}
-          </mat-checkbox>
-          <mat-checkbox fxFlex formControlName="showUpdateDashboardImage">
+          </mat-slide-toggle>
+          <mat-slide-toggle formControlName="showUpdateDashboardImage">
             {{ 'dashboard.display-update-dashboard-image' | translate }}
-          </mat-checkbox>
-        </div>
-        <mat-checkbox formControlName="showDashboardLogo">
-          {{ 'dashboard.display-dashboard-logo' | translate }}
-        </mat-checkbox>
-        <tb-image-input fxFlex *ngIf="settingsFormGroup.get('showDashboardLogo').value"
-                        label="{{'dashboard.dashboard-logo-image' | translate}}"
-                        formControlName="dashboardLogoUrl">
-        </tb-image-input>
+          </mat-slide-toggle>
+        </fieldset>
       </div>
-      <div *ngIf="gridSettings" [formGroup]="gridSettingsFormGroup">
-        <tb-color-input fxFlex
-                        label="{{'layout.color' | translate}}"
-                        icon="format_color_fill"
-                        openOnInput
-                        formControlName="color">
-        </tb-color-input>
-        <mat-form-field class="mat-block">
-          <mat-label translate>dashboard.columns-count</mat-label>
-          <input matInput formControlName="columns" type="number" step="any" min="10"
-                 max="1000" required>
-          <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('required')">
-            {{ 'dashboard.columns-count-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('min')">
-            {{ 'dashboard.min-columns-count-message' | translate }}
-          </mat-error>
-          <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('max')">
-            {{ 'dashboard.max-columns-count-message' | translate }}
-          </mat-error>
-        </mat-form-field>
-        <mat-form-field fxFlex class="mat-block">
-          <mat-label translate>dashboard.widgets-margins</mat-label>
-          <input matInput formControlName="margin" type="number" step="any" min="0"
-                 max="50" required>
-          <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('required')">
-            {{ 'dashboard.margin-required' | translate }}
-          </mat-error>
-          <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('min')">
-            {{ 'dashboard.min-margin-message' | translate }}
-          </mat-error>
-          <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('max')">
-            {{ 'dashboard.max-margin-message' | translate }}
-          </mat-error>
-        </mat-form-field>
-        <mat-checkbox fxFlex formControlName="autoFillHeight" style="display: block; padding-bottom: 12px;">
-          {{ 'dashboard.autofill-height' | translate }}
-        </mat-checkbox>
-        <tb-color-input fxFlex
-                        label="{{'dashboard.background-color' | translate}}"
-                        icon="format_color_fill"
-                        openOnInput
-                        formControlName="backgroundColor">
-        </tb-color-input>
-        <tb-image-input fxFlex
-                        label="{{'dashboard.background-image' | translate}}"
-                        formControlName="backgroundImageUrl">
-        </tb-image-input>
-        <mat-form-field class="mat-block">
-          <mat-label translate>dashboard.background-size-mode</mat-label>
-          <mat-select formControlName="backgroundSizeMode">
-            <mat-option value="100%">Fit width</mat-option>
-            <mat-option value="auto 100%">Fit height</mat-option>
-            <mat-option value="cover">Cover</mat-option>
-            <mat-option value="contain">Contain</mat-option>
-            <mat-option value="auto">Original size</mat-option>
-          </mat-select>
-        </mat-form-field>
-        <small translate>dashboard.mobile-layout</small>
-        <div fxLayout="row" fxLayoutAlign="start center" fxLayout.xs="column" fxLayoutAlign.xs fxLayoutGap="8px"  style="margin-top: 8px">
-          <mat-checkbox fxFlex formControlName="mobileAutoFillHeight">
+      <div *ngIf="gridSettings" [formGroup]="gridSettingsFormGroup" fxLayout="column">
+        <fieldset class="fields-group" fxLayout="column" fxLayoutGap="8px">
+          <legend class="group-title" translate>dashboard.layout-settings</legend>
+          <mat-form-field class="mat-block">
+            <mat-label translate>dashboard.columns-count</mat-label>
+            <input matInput formControlName="columns" type="number" step="any" min="10"
+                   max="1000" required>
+            <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('required')">
+              {{ 'dashboard.columns-count-required' | translate }}
+            </mat-error>
+            <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('min')">
+              {{ 'dashboard.min-columns-count-message' | translate }}
+            </mat-error>
+            <mat-error *ngIf="gridSettingsFormGroup.get('columns').hasError('max')">
+              {{ 'dashboard.max-columns-count-message' | translate }}
+            </mat-error>
+          </mat-form-field>
+          <mat-form-field fxFlex class="mat-block">
+            <mat-label translate>dashboard.widgets-margins</mat-label>
+            <input matInput formControlName="margin" type="number" step="any" min="0"
+                   max="50" required>
+            <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('required')">
+              {{ 'dashboard.margin-required' | translate }}
+            </mat-error>
+            <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('min')">
+              {{ 'dashboard.min-margin-message' | translate }}
+            </mat-error>
+            <mat-error *ngIf="gridSettingsFormGroup.get('margin').hasError('max')">
+              {{ 'dashboard.max-margin-message' | translate }}
+            </mat-error>
+          </mat-form-field>
+          <mat-slide-toggle fxFlex formControlName="autoFillHeight" style="display: block; padding-bottom: 12px;">
+            {{ 'dashboard.autofill-height' | translate }}
+          </mat-slide-toggle>
+          <tb-color-input fxFlex
+                          label="{{'dashboard.background-color' | translate}}"
+                          icon="format_color_fill"
+                          openOnInput
+                          formControlName="backgroundColor">
+          </tb-color-input>
+          <tb-image-input fxFlex
+                          label="{{'dashboard.background-image' | translate}}"
+                          formControlName="backgroundImageUrl">
+          </tb-image-input>
+          <mat-form-field class="mat-block">
+            <mat-label translate>dashboard.background-size-mode</mat-label>
+            <mat-select formControlName="backgroundSizeMode">
+              <mat-option value="100%">Fit width</mat-option>
+              <mat-option value="auto 100%">Fit height</mat-option>
+              <mat-option value="cover">Cover</mat-option>
+              <mat-option value="contain">Contain</mat-option>
+              <mat-option value="auto">Original size</mat-option>
+            </mat-select>
+          </mat-form-field>
+        </fieldset>
+        <fieldset class="fields-group" fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign.gt-sm="start center" fxLayoutGap="8px">
+          <legend class="group-title" translate>dashboard.mobile-layout</legend>
+          <mat-slide-toggle fxFlex formControlName="mobileAutoFillHeight">
             {{ 'dashboard.autofill-height' | translate }}
-          </mat-checkbox>
+          </mat-slide-toggle>
           <mat-form-field fxFlex class="mat-block">
             <mat-label translate>dashboard.mobile-row-height</mat-label>
             <input matInput formControlName="mobileRowHeight" type="number" step="any" min="5"
@@ -158,7 +162,7 @@
               {{ 'dashboard.max-mobile-row-height-message' | translate }}
             </mat-error>
           </mat-form-field>
-        </div>
+        </fieldset>
       </div>
     </fieldset>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.scss
index f588cb8894..423c55ceea 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.scss
@@ -14,13 +14,19 @@
  * limitations under the License.
  */
 :host {
-  small {
-    white-space: normal;
+  .fields-group {
+    padding: 0 8px 8px;
+    margin: 10px 0;
+    border: 1px groove rgba(0, 0, 0, .25);
+    border-radius: 4px;
+    legend {
+      color: rgba(0, 0, 0, .7);
+    }
   }
 }
 
 :host ::ng-deep {
-  .mat-checkbox-label {
+  .mat-slide-toggle-content {
     white-space: normal;
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts
index 26ab9a3e3b..5d17d33eaa 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-settings-dialog.component.ts
@@ -71,19 +71,33 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
     this.gridSettings = this.data.gridSettings;
 
     if (this.settings) {
+      const showTitle = isUndefined(this.settings.showTitle) ? true : this.settings.showTitle;
+      const showDashboardLogo = isUndefined(this.settings.showDashboardLogo) ? false : this.settings.showDashboardLogo;
+      const hideToolbar = isUndefined(this.settings.hideToolbar) ? false : this.settings.hideToolbar;
       this.settingsFormGroup = this.fb.group({
         stateControllerId: [isUndefined(this.settings.stateControllerId) ? 'entity' : this.settings.stateControllerId, []],
-        toolbarAlwaysOpen: [isUndefined(this.settings.toolbarAlwaysOpen) ? true : this.settings.toolbarAlwaysOpen, []],
-        showTitle: [isUndefined(this.settings.showTitle) ? true : this.settings.showTitle, []],
-        titleColor: [isUndefined(this.settings.titleColor) ? 'rgba(0,0,0,0.870588)' : this.settings.titleColor, []],
-        showDashboardsSelect: [isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect, []],
-        showEntitiesSelect: [isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect, []],
-        showFilters: [isUndefined(this.settings.showFilters) ? true : this.settings.showFilters, []],
-        showDashboardLogo: [isUndefined(this.settings.showDashboardLogo) ? false : this.settings.showDashboardLogo, []],
-        dashboardLogoUrl: [isUndefined(this.settings.dashboardLogoUrl) ? null : this.settings.dashboardLogoUrl, []],
-        showDashboardTimewindow: [isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow, []],
-        showDashboardExport: [isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport, []],
-        showUpdateDashboardImage: [isUndefined(this.settings.showUpdateDashboardImage) ? true : this.settings.showUpdateDashboardImage, []]
+        showTitle: [showTitle, []],
+        titleColor: [{value: isUndefined(this.settings.titleColor) ? 'rgba(0,0,0,0.870588)' : this.settings.titleColor,
+                      disabled: !showTitle}, []],
+        showDashboardLogo: [showDashboardLogo, []],
+        dashboardLogoUrl: [{value: isUndefined(this.settings.dashboardLogoUrl) ? null : this.settings.dashboardLogoUrl,
+                            disabled: !showDashboardLogo}, []],
+        hideToolbar: [hideToolbar, []],
+        toolbarAlwaysOpen: [{value: isUndefined(this.settings.toolbarAlwaysOpen) ? true : this.settings.toolbarAlwaysOpen,
+          disabled: hideToolbar}, []],
+        showDashboardsSelect: [{value: isUndefined(this.settings.showDashboardsSelect) ? true : this.settings.showDashboardsSelect,
+          disabled: hideToolbar}, []],
+        showEntitiesSelect: [{value: isUndefined(this.settings.showEntitiesSelect) ? true : this.settings.showEntitiesSelect,
+          disabled: hideToolbar}, []],
+        showFilters: [{value: isUndefined(this.settings.showFilters) ? true : this.settings.showFilters,
+          disabled: hideToolbar}, []],
+        showDashboardTimewindow: [{value: isUndefined(this.settings.showDashboardTimewindow) ? true : this.settings.showDashboardTimewindow,
+          disabled: hideToolbar}, []],
+        showDashboardExport: [{value: isUndefined(this.settings.showDashboardExport) ? true : this.settings.showDashboardExport,
+          disabled: hideToolbar}, []],
+        showUpdateDashboardImage: [
+          {value: isUndefined(this.settings.showUpdateDashboardImage) ? true : this.settings.showUpdateDashboardImage,
+          disabled: hideToolbar}, []]
       });
       this.settingsFormGroup.get('stateControllerId').valueChanges.subscribe(
         (stateControllerId: StateControllerId) => {
@@ -92,13 +106,52 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
           }
         }
       );
+      this.settingsFormGroup.get('showTitle').valueChanges.subscribe(
+        (showTitleValue: boolean) => {
+          if (showTitleValue) {
+            this.settingsFormGroup.get('titleColor').enable();
+          } else {
+            this.settingsFormGroup.get('titleColor').disable();
+          }
+        }
+      );
+      this.settingsFormGroup.get('showDashboardLogo').valueChanges.subscribe(
+        (showDashboardLogoValue: boolean) => {
+          if (showDashboardLogoValue) {
+            this.settingsFormGroup.get('dashboardLogoUrl').enable();
+          } else {
+            this.settingsFormGroup.get('dashboardLogoUrl').disable();
+          }
+        }
+      );
+      this.settingsFormGroup.get('hideToolbar').valueChanges.subscribe(
+        (hideToolbarValue: boolean) => {
+          if (hideToolbarValue) {
+            this.settingsFormGroup.get('toolbarAlwaysOpen').disable();
+            this.settingsFormGroup.get('showDashboardsSelect').disable();
+            this.settingsFormGroup.get('showEntitiesSelect').disable();
+            this.settingsFormGroup.get('showFilters').disable();
+            this.settingsFormGroup.get('showDashboardTimewindow').disable();
+            this.settingsFormGroup.get('showDashboardExport').disable();
+            this.settingsFormGroup.get('showUpdateDashboardImage').disable();
+          } else {
+            this.settingsFormGroup.get('toolbarAlwaysOpen').enable();
+            this.settingsFormGroup.get('showDashboardsSelect').enable();
+            this.settingsFormGroup.get('showEntitiesSelect').enable();
+            this.settingsFormGroup.get('showFilters').enable();
+            this.settingsFormGroup.get('showDashboardTimewindow').enable();
+            this.settingsFormGroup.get('showDashboardExport').enable();
+            this.settingsFormGroup.get('showUpdateDashboardImage').enable();
+          }
+        }
+      );
     } else {
       this.settingsFormGroup = this.fb.group({});
     }
 
     if (this.gridSettings) {
+      const mobileAutoFillHeight = isUndefined(this.gridSettings.mobileAutoFillHeight) ? false : this.gridSettings.mobileAutoFillHeight;
       this.gridSettingsFormGroup = this.fb.group({
-        color: [this.gridSettings.color || 'rgba(0,0,0,0.870588)', []],
         columns: [this.gridSettings.columns || 24, [Validators.required, Validators.min(10), Validators.max(1000)]],
         margin: [isDefined(this.gridSettings.margin) ? this.gridSettings.margin : 10,
           [Validators.required, Validators.min(0), Validators.max(50)]],
@@ -106,10 +159,19 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
         backgroundColor: [this.gridSettings.backgroundColor || 'rgba(0,0,0,0)', []],
         backgroundImageUrl: [this.gridSettings.backgroundImageUrl, []],
         backgroundSizeMode: [this.gridSettings.backgroundSizeMode || '100%', []],
-        mobileAutoFillHeight: [isUndefined(this.gridSettings.mobileAutoFillHeight) ? false : this.gridSettings.mobileAutoFillHeight, []],
-        mobileRowHeight: [isUndefined(this.gridSettings.mobileRowHeight) ? 70 : this.gridSettings.mobileRowHeight,
-          [Validators.required, Validators.min(5), Validators.max(200)]]
+        mobileAutoFillHeight: [mobileAutoFillHeight, []],
+        mobileRowHeight: [{ value: isUndefined(this.gridSettings.mobileRowHeight) ? 70 : this.gridSettings.mobileRowHeight,
+          disabled: mobileAutoFillHeight}, [Validators.required, Validators.min(5), Validators.max(200)]]
       });
+      this.gridSettingsFormGroup.get('mobileAutoFillHeight').valueChanges.subscribe(
+        (mobileAutoFillHeightValue: boolean) => {
+          if (mobileAutoFillHeightValue) {
+            this.gridSettingsFormGroup.get('mobileRowHeight').disable();
+          } else {
+            this.gridSettingsFormGroup.get('mobileRowHeight').enable();
+          }
+        }
+      );
     } else {
       this.gridSettingsFormGroup = this.fb.group({});
     }
@@ -133,10 +195,10 @@ export class DashboardSettingsDialogComponent extends DialogComponent<DashboardS
     let settings: DashboardSettings = null;
     let gridSettings: GridSettings = null;
     if (this.settings) {
-      settings = {...this.settings, ...this.settingsFormGroup.value};
+      settings = {...this.settings, ...this.settingsFormGroup.getRawValue()};
     }
     if (this.gridSettings) {
-      gridSettings = {...this.gridSettings, ...this.gridSettingsFormGroup.value};
+      gridSettings = {...this.gridSettings, ...this.gridSettingsFormGroup.getRawValue()};
     }
     this.dialogRef.close({settings, gridSettings});
   }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
index 061a4d5227..b0cbe13adb 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/dashboard-layout.component.html
@@ -26,7 +26,6 @@
           [style.backgroundImage]="backgroundImage"
           [ngStyle]="dashboardStyle">
   <section *ngIf="layoutCtx.widgets.isEmpty()" fxLayoutAlign="center center"
-           [ngStyle]="{'color': layoutCtx.gridSettings.color}"
            style="display: flex; z-index: 1; pointer-events: none;"
            class="mat-headline tb-absolute-fill">
     <span *ngIf="!isEdit">
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 fbf8aea853..a0d226f589 100644
--- a/ui-ngx/src/app/shared/components/color-input.component.html
+++ b/ui-ngx/src/app/shared/components/color-input.component.html
@@ -20,7 +20,7 @@
     <mat-icon *ngIf="icon">{{icon}}</mat-icon>
     <span *ngIf="label">{{label}}</span>
   </mat-label>
-  <div matPrefix class="tb-color-preview" (click)="showColorPicker()" style="margin-right: 5px;">
+  <div matPrefix class="tb-color-preview" (click)="!disabled && showColorPicker()" style="margin-right: 5px;">
     <div class="tb-color-result" [ngStyle]="{background: colorFormGroup.get('color').value}"></div>
   </div>
   <input matInput formControlName="color" (mousedown)="openOnInput && showColorPicker()" [required]="required">
diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts
index a782fe8256..684705590e 100644
--- a/ui-ngx/src/app/shared/models/dashboard.models.ts
+++ b/ui-ngx/src/app/shared/models/dashboard.models.ts
@@ -45,7 +45,6 @@ export interface WidgetLayouts {
 
 export interface GridSettings {
   backgroundColor?: string;
-  color?: string;
   columns?: number;
   margin?: number;
   backgroundSizeMode?: string;
@@ -93,6 +92,7 @@ export interface DashboardSettings {
   showDashboardExport?: boolean;
   showUpdateDashboardImage?: boolean;
   toolbarAlwaysOpen?: boolean;
+  hideToolbar?: boolean;
   titleColor?: string;
 }
 
diff --git a/ui-ngx/src/app/shared/models/window-message.model.ts b/ui-ngx/src/app/shared/models/window-message.model.ts
index 078a7aefec..2073197e27 100644
--- a/ui-ngx/src/app/shared/models/window-message.model.ts
+++ b/ui-ngx/src/app/shared/models/window-message.model.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-export type WindowMessageType = 'widgetException' | 'widgetEditModeInited' | 'widgetEditUpdated' | 'openDashboardMessage' | 'reloadUserMessage';
+export type WindowMessageType = 'widgetException' | 'widgetEditModeInited' | 'widgetEditUpdated' | 'openDashboardMessage' | 'reloadUserMessage' | 'toggleDashboardLayout';
 
 export interface WindowMessage {
   type: WindowMessageType;
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 08ddca091d..cea00051ff 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -721,6 +721,7 @@
         "maximum-upload-file-size": "Maximum upload file size: {{ size }}",
         "cannot-upload-file": "Cannot upload file",
         "settings": "Settings",
+        "layout-settings": "Layout settings",
         "columns-count": "Columns count",
         "columns-count-required": "Columns count is required.",
         "min-columns-count-message": "Only 10 minimum column count is allowed.",
@@ -743,15 +744,19 @@
         "mobile-row-height-required": "Mobile row height value is required.",
         "min-mobile-row-height-message": "Only 5 pixels is allowed as minimum mobile row height value.",
         "max-mobile-row-height-message": "Only 200 pixels is allowed as maximum mobile row height value.",
+        "title-settings": "Title settings",
         "display-title": "Display dashboard title",
-        "toolbar-always-open": "Keep toolbar opened",
         "title-color": "Title color",
+        "toolbar-settings": "Toolbar settings",
+        "hide-toolbar": "Hide toolbar",
+        "toolbar-always-open": "Keep toolbar opened",
         "display-dashboards-selection": "Display dashboards selection",
         "display-entities-selection": "Display entities selection",
         "display-filters": "Display filters",
         "display-dashboard-timewindow": "Display timewindow",
         "display-dashboard-export": "Display export",
         "display-update-dashboard-image": "Display update dashboard image",
+        "dashboard-logo-settings": "Dashboard logo settings",
         "display-dashboard-logo": "Display logo in dashboard fullscreen mode",
         "dashboard-logo-image": "Dashboard logo image",
         "import": "Import dashboard",