diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
index b5074f63b2..fa61d49b66 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.html
@@ -25,131 +25,139 @@
       <mat-icon class="material-icons">close</mat-icon>
     </button>
   </mat-toolbar>
-  <div mat-dialog-content fxLayout="column" fxLayoutGap="8px" style="min-width: 300px;">
-    <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px">
+  <div mat-dialog-content fxLayout="column" fxLayoutGap="20px" style="min-width: 300px; overflow: hidden;">
+    <div fxLayout="row" fxLayoutAlign="start center">
         <mat-slide-toggle formControlName="right">
           {{ 'layout.divider' | translate }}
         </mat-slide-toggle>
     </div>
-    <div fxLayout="column" fxLayoutGap="8px">
-      <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="2%">
-        <button fxFlex="{{buttonFlexValue()}}"
-                type="button"
-                mat-raised-button
-                color="primary"
-                class="tb-layout-button"
-                (click)="openLayoutSettings('main')"
-                >
-          <span >{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}</span>
-        </button>
-        <button fxFlex
-                [fxShow]="layoutsFormGroup.get('right').value"
-                type="button"
-                mat-raised-button
-                color="primary"
-                class="tb-layout-button"
-                (click)="openLayoutSettings('right')">
-          <span >{{ 'layout.right' | translate }}</span>
-        </button>
-      </div>
-      <div fxLayout="column" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value">
-        <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE">
-          <mat-slider min="10"
-                      step="1"
-                      max="90"
-                      style="width: 100%;"
-                      formControlName="sliderPercentage"
-                      thumbLabel
-                      [displayWith]="formatSliderTooltipLabel">
-          </mat-slider>
-          <div fxLayout="row" fxLayoutGap="8px">
-            <mat-form-field fxFlex class="mat-block">
-              <mat-label>{{ 'layout.left-width' | translate }}</mat-label>
-              <input matInput
+    <div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="20px">
+      <mat-button-toggle-group aria-label="Select width value type"
+                               formControlName="type"
+                               [fxShow]="layoutsFormGroup.get('right').value">
+        <mat-button-toggle fxFlex value="percentage">
+          {{ 'layout.percentage-width' | translate }}
+        </mat-button-toggle>
+        <mat-button-toggle fxFlex value="fixed">
+          {{ 'layout.fixed-width' | translate }}
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+      <div fxLayout="row" fxLayoutAlign="center center" class="tb-layout-preview">
+        <div fxLayout="row"
+             fxLayoutAlign="start center"
+             class="tb-layout-preview-container"
+             #tooltip="matTooltip"
+             matTooltip=""
+             matTooltipPosition="below">
+          <div fxLayout="column" fxLayoutAlign="start center" fxFlex="{{ buttonFlexValue() }}" class="tb-layout-preview-container-main">
+            <button mat-icon-button
+                    type="button"
+                    matTooltip="{{ 'dashboard.layout-settings' | translate }}"
+                    matTooltipPosition="above"
+                    (click)="openLayoutSettings('main')"
+                    class="tb-layout-preview-element"
+                    aria-label="Layout settings">
+              <mat-icon>settings</mat-icon>
+            </button>
+            <button fxFlex
+                    type="button"
+                    mat-raised-button
+                    color="primary"
+                    class="tb-layout-button"
+                    [matTooltip]="layoutButtonTooltip('main', true)"
+                    matTooltipPosition="above"
+                    (click)="setFixedLayout('main')"
+                    [ngClass]="layoutButtonTooltip('main', false)"
+                    [ngStyle]="layoutsFormGroup.get('right').value ?
+                              {'border-radius': '5px 0 0 5px;'} :
+                              {'border-radius': '5px 5px 5px 5px;'}">
+              <span >{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}</span>
+            </button>
+            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('main')">
+              <input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
                      formControlName="leftWidthPercentage"
                      type="number"
                      step="1"
                      min="10"
-                     max="90">
-              <mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('required')">
-                {{ 'layout.left-width-percentage-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('max')">
-                {{ 'layout.value-max-error' | translate: { max: 90 } }}
-              </mat-error>
-              <mat-error *ngIf="layoutsFormGroup.get('leftWidthPercentage').hasError('min')">
-                {{ 'layout.value-min-error' | translate: { min: 10 } }}
-              </mat-error>
-            </mat-form-field>
-            <mat-form-field fxFlex class="mat-block">
-              <mat-label>{{ 'layout.right-width' | translate }}</mat-label>
-              <input matInput
+                     max="90"
+                     required>
+              <input [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
+                     *ngIf="layoutsFormGroup.get('fixedLayout').value === 'main'"
+                     formControlName="fixedWidth"
+                     type="number"
+                     step="1"
+                     min="150"
+                     max="1700"
+                     required>
+            </div>
+          </div>
+          <div fxLayout="column" fxLayoutAlign="start center" fxFlex [fxShow]="layoutsFormGroup.get('right').value" matTooltip="">
+            <button mat-icon-button
+                    type="button"
+                    matTooltip="{{ 'dashboard.layout-settings' | translate }}"
+                    matTooltipPosition="above"
+                    (click)="openLayoutSettings('right')"
+                    class="tb-layout-preview-element"
+                    aria-label="Layout settings">
+              <mat-icon>settings</mat-icon>
+            </button>
+            <button fxFlex
+                    type="button"
+                    mat-raised-button
+                    color="primary"
+                    class="tb-layout-button"
+                    [matTooltip]="layoutButtonTooltip('right', true)"
+                    matTooltipPosition="above"
+                    (click)="setFixedLayout('right')"
+                    [ngClass]="layoutButtonTooltip('right', false)"
+                    style="border-radius: 0 5px 5px 0;">
+              <span >{{ 'layout.right' | translate }}</span>
+            </button>
+            <div fxFlex class="tb-layout-preview-element tb-layout-preview-input" [fxShow]="showPreviewInputs('right')">
+              <input [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.FIXED"
                      formControlName="rightWidthPercentage"
                      type="number"
                      step="1"
                      min="10"
-                     max="90">
-              <mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('required')">
-                {{ 'layout.right-width-percentage-required' | translate }}
-              </mat-error>
-              <mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('max')">
-                {{ 'layout.value-max-error' | translate: { max: 90 } }}
-              </mat-error>
-              <mat-error *ngIf="layoutsFormGroup.get('rightWidthPercentage').hasError('min')">
-                {{ 'layout.value-min-error' | translate: { min: 10 } }}
-              </mat-error>
-            </mat-form-field>
+                     max="90"
+                     required>
+              <input [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
+                     *ngIf="layoutsFormGroup.get('fixedLayout').value === 'right'"
+                     formControlName="fixedWidth"
+                     type="number"
+                     step="1"
+                     min="150"
+                     max="1700"
+                     required>
+            </div>
           </div>
-          <label [fxShow]="layoutsFormGroup.get('leftWidthPercentage').valid && layoutsFormGroup.get('rightWidthPercentage').valid" class="tb-hint tb-hint-group">
-            {{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }}
-          </label>
         </div>
-        <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED">
-          <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container">
-            <label>{{ 'layout.pick-fixed-side' | translate }}</label>
-            <mat-radio-group aria-label="Select side"
-                             formControlName="fixedLayout"
-                             fxLayout="row"
-                             fxLayoutGap="8px">
-              <mat-radio-button value="main">
-                {{ 'layout.left' | translate }}
-              </mat-radio-button>
-              <mat-radio-button value="right">
-                {{ 'layout.right' | translate }}
-              </mat-radio-button>
-            </mat-radio-group>
+      </div>
+      <div fxLayout="column" fxLayoutAlign="center center" fxLayoutGap="8px" [fxShow]="layoutsFormGroup.get('right').value" style="width: 100%">
+        <div style="width: 80%">
+          <mat-slider [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE"
+                      min="10"
+                      step="1"
+                      max="90"
+                      style="width: 100%;"
+                      formControlName="sliderPercentage"
+                      thumbLabel
+                      [displayWith]="formatSliderTooltipLabel.bind(this)">
+          </mat-slider>
+          <mat-slider [fxShow]="layoutsFormGroup.get('type').value !== LayoutWidthType.PERCENTAGE"
+                      min="150"
+                      step="1"
+                      max="1700"
+                      style="width: 100%;"
+                      formControlName="sliderFixed"
+                      thumbLabel
+                      [displayWith]="formatSliderTooltipLabel.bind(this)">
+          </mat-slider>
+          <div fxLayout="row" fxLayoutAlign="space-between center" class="tb-hint tb-hint-group">
+            <label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '0 %' : '150px'}}</label>
+            <label>{{layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE ? '100 %' : '1700px'}}</label>
           </div>
-          <mat-form-field fxFlex class="mat-block" style="min-width: 368px;">
-            <mat-label>{{ 'layout.layout-fixed-width' | translate }}</mat-label>
-            <input matInput
-                   formControlName="fixedWidth"
-                   type="number"
-                   step="1"
-                   min="150"
-                   max="1700">
-            <mat-hint>
-              {{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }}
-            </mat-hint>
-            <mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('required')">
-              {{ 'layout.layout-fixed-width-required' | translate }}
-            </mat-error>
-            <mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('max')">
-              {{ 'layout.value-max-error' | translate: { max: 1700 } }}
-            </mat-error>
-            <mat-error *ngIf="layoutsFormGroup.get('fixedWidth').hasError('min')">
-              {{ 'layout.value-min-error' | translate: { min: 150 } }}
-            </mat-error>
-          </mat-form-field>
         </div>
-        <mat-button-toggle-group aria-label="Select width value type"
-                                 formControlName="type">
-          <mat-button-toggle fxFlex value="percentage">
-            {{ 'layout.percentage-width' | translate }}
-          </mat-button-toggle>
-          <mat-button-toggle fxFlex value="fixed">
-            {{ 'layout.fixed-width' | translate }}
-          </mat-button-toggle>
-        </mat-button-toggle-group>
       </div>
     </div>
   </div>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
index 9436529bec..0c4a8da175 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.scss
@@ -26,6 +26,93 @@
     margin-top: -14px;
     display: block;
   }
+
+  .tb-layout-preview {
+    width: 120%;
+    background-color: rgba(243,246,251,255);
+    padding: 35px;
+
+    &-container {
+      width: 75%;
+
+      button.tb-fixed-layout-button {
+        background-color: transparent;
+        color: black;
+        cursor: pointer;
+
+        &:hover {
+          background-color: lightgrey;
+        }
+      }
+
+      div {
+        transition-duration: 0.5s;
+        transition-property: max-width;
+        position: relative;
+
+        .mat-icon-button {
+          align-self: end;
+        }
+      }
+
+      .tb-layout-preview-element {
+        position: absolute;
+        z-index: 99;
+
+        .mat-icon {
+          font-size: 20px;
+          width: 20px;
+          height: 20px;
+          line-height: 20px;
+          color: rgba(0, 0, 0, 0.38);
+
+          &:hover {
+            transform: rotate(180deg);
+            transition: transform 0.5s;
+          }
+        }
+      }
+
+      &-main {
+        min-width: 25%;
+      }
+
+      /* remove arrows from input for Chrome, Safari, Edge, Opera */
+      input::-webkit-outer-spin-button,
+      input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+      }
+
+      /* remove arrows from input for Firefox */
+      input[type=number] {
+        -moz-appearance: textfield;
+      }
+
+      .tb-layout-preview-input {
+        margin: 80px 0 0;
+        color: white;
+
+        input {
+          border: 1px solid lightslategray;
+          background-color: transparent;
+          color: white;
+          border-radius: 4px;
+          text-align: center;
+          outline: none;
+          width: 37px;
+          height: 28px;
+          font-size: 14px;
+
+          &:invalid {
+            outline: 2px solid red;
+            border: 1px solid transparent;
+            background-color: rgba(255, 5, 5, 0.2);
+          }
+        }
+      }
+    }
+  }
 }
 
 :host ::ng-deep {
@@ -37,4 +124,49 @@
       }
     }
   }
+
+  .mat-button-toggle-group {
+    width: 100%;
+    min-width: 354px;
+    border: 2px solid rgba(0, 0, 0, 0.06);
+
+    .mat-button-toggle-checked  {
+      background: rgba(0, 0, 0, 0.06);
+    }
+
+    .mat-button-toggle {
+      border: none !important;
+    }
+  }
+
+  /* Make mat-slider tooltip always visible */
+  .mat-slider-thumb-label {
+    transform: rotate(45deg) !important;
+    border-radius: 50% 50% 0 !important;
+  }
+
+  .mat-slider-thumb {
+    transform: scale(0) !important;
+  }
+
+  .mat-slider-thumb-label-text {
+    opacity: 1 !important;
+  }
+}
+
+::ng-deep {
+  /* Alarm tooltip with side-to-side movement */
+  .tb-layout-error-tooltip-right {
+    background-color: #b71c1c !important;
+    margin: 5px 0 0 105px;
+    width: 160px;
+    text-align: center;
+  }
+
+  .tb-layout-error-tooltip-main {
+    background-color: #b71c1c !important;
+    margin: 5px 105px 0 0;
+    width: 160px;
+    text-align: center;
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts
index 295b01476f..95a91e24c2 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/manage-dashboard-layouts-dialog.component.ts
@@ -14,25 +14,34 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, SkipSelf } from '@angular/core';
-import { ErrorStateMatcher } from '@angular/material/core';
-import { MAT_DIALOG_DATA, MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { Store } from '@ngrx/store';
-import { AppState } from '@core/core.state';
-import { FormBuilder, FormControl, FormGroup, FormGroupDirective, NgForm, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
-import { DialogComponent } from '@app/shared/components/dialog.component';
-import { UtilsService } from '@core/services/utils.service';
-import { TranslateService } from '@ngx-translate/core';
-import { DashboardLayoutId, DashboardStateLayouts, LayoutDimension } from '@app/shared/models/dashboard.models';
-import { deepClone, isDefined } from '@core/utils';
-import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
+import {Component, Inject, SkipSelf, ViewChild} from '@angular/core';
+import {ErrorStateMatcher} from '@angular/material/core';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {Store} from '@ngrx/store';
+import {AppState} from '@core/core.state';
+import {
+  AbstractControl,
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  FormGroupDirective,
+  NgForm,
+  Validators
+} from '@angular/forms';
+import {Router} from '@angular/router';
+import {DialogComponent} from '@app/shared/components/dialog.component';
+import {UtilsService} from '@core/services/utils.service';
+import {TranslateService} from '@ngx-translate/core';
+import {DashboardLayoutId, DashboardStateLayouts, LayoutDimension} from '@app/shared/models/dashboard.models';
+import {deepClone, isDefined} from '@core/utils';
+import {DashboardUtilsService} from '@core/services/dashboard-utils.service';
 import {
   DashboardSettingsDialogComponent,
   DashboardSettingsDialogData
 } from '@home/components/dashboard-page/dashboard-settings-dialog.component';
-import { LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
-import { Subscription } from 'rxjs';
+import {LayoutWidthType} from '@home/components/dashboard-page/layout/layout.models';
+import {Subscription} from 'rxjs';
+import {MatTooltip} from "@angular/material/tooltip";
 
 export interface ManageDashboardLayoutsDialogData {
   layouts: DashboardStateLayouts;
@@ -47,6 +56,8 @@ export interface ManageDashboardLayoutsDialogData {
 export class ManageDashboardLayoutsDialogComponent extends DialogComponent<ManageDashboardLayoutsDialogComponent, DashboardStateLayouts>
   implements ErrorStateMatcher {
 
+  @ViewChild('tooltip') tooltip: MatTooltip;
+
   layoutsFormGroup: FormGroup;
 
   layouts: DashboardStateLayouts;
@@ -70,10 +81,12 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     super(store, router, dialogRef);
 
     this.layouts = this.data.layouts;
+
     this.layoutsFormGroup = this.fb.group({
         main: [{value: isDefined(this.layouts.main), disabled: true}],
         right: [isDefined(this.layouts.right)],
         sliderPercentage: [50],
+        sliderFixed: [150],
         leftWidthPercentage: [50, [Validators.min(10), Validators.max(90), Validators.required]],
         rightWidthPercentage: [50, [Validators.min(10), Validators.max(90), Validators.required]],
         type: [LayoutWidthType.PERCENTAGE],
@@ -105,14 +118,16 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
         this.layoutsFormGroup.patchValue({
           fixedLayout: this.layouts.right.gridSettings.layoutDimension.fixedLayout,
           type: LayoutWidthType.FIXED,
-          fixedWidth: this.layouts.right.gridSettings.layoutDimension.fixedWidth
+          fixedWidth: this.layouts.right.gridSettings.layoutDimension.fixedWidth,
+          sliderFixed: this.layouts.right.gridSettings.layoutDimension.fixedWidth
         }, {emitEvent: false});
       } else if (this.layouts.main.gridSettings.layoutDimension) {
         if (this.layouts.main.gridSettings.layoutDimension.type === LayoutWidthType.FIXED) {
           this.layoutsFormGroup.patchValue({
             fixedLayout: this.layouts.main.gridSettings.layoutDimension.fixedLayout,
             type: LayoutWidthType.FIXED,
-            fixedWidth: this.layouts.main.gridSettings.layoutDimension.fixedWidth
+            fixedWidth: this.layouts.main.gridSettings.layoutDimension.fixedWidth,
+            sliderFixed: this.layouts.right.gridSettings.layoutDimension.fixedWidth
           }, {emitEvent: false});
         } else {
           const leftWidthPercentage: number = Number(this.layouts.main.gridSettings.layoutDimension.leftWidthPercentage);
@@ -137,10 +152,18 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
         .subscribe(
           (value) => this.layoutsFormGroup.get('leftWidthPercentage').patchValue(value)
         ));
+    this.subscriptions.push(
+      this.layoutsFormGroup.get('sliderFixed').valueChanges
+        .subscribe(
+          (value) => {
+            this.layoutsFormGroup.get('fixedWidth').patchValue(value)
+          }
+        ));
     this.subscriptions.push(
       this.layoutsFormGroup.get('leftWidthPercentage').valueChanges
         .subscribe(
           (value) => {
+            this.showTooltip(this.layoutsFormGroup.get('leftWidthPercentage'), LayoutWidthType.PERCENTAGE, 'main');
             this.layoutControlChange('rightWidthPercentage', value);
           }
         ));
@@ -148,9 +171,18 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
       this.layoutsFormGroup.get('rightWidthPercentage').valueChanges
         .subscribe(
           (value) => {
+            this.showTooltip(this.layoutsFormGroup.get('rightWidthPercentage'), LayoutWidthType.PERCENTAGE, 'right');
             this.layoutControlChange('leftWidthPercentage', value);
           }
         ));
+    this.subscriptions.push(
+      this.layoutsFormGroup.get('fixedWidth').valueChanges
+        .subscribe(
+          (value) => {
+            this.showTooltip(this.layoutsFormGroup.get('fixedWidth'), LayoutWidthType.FIXED, this.layoutsFormGroup.get('fixedLayout').value);
+            this.layoutsFormGroup.get('sliderFixed').setValue(value, {emitEvent: false});
+          }
+        ));
   }
 
   ngOnDestroy(): void {
@@ -224,13 +256,21 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
 
   buttonFlexValue(): number {
     const formValues = this.layoutsFormGroup.value;
-    if (formValues.right && formValues.type !== LayoutWidthType.FIXED) {
-      return formValues.leftWidthPercentage - 1;
+    if (formValues.right) {
+      if (formValues.type !== LayoutWidthType.FIXED) {
+        return formValues.leftWidthPercentage;
+      } else {
+        if (formValues.fixedLayout === 'main') {
+          return 10;
+        } else {
+          return 90;
+        }
+      }
     }
   }
 
-  formatSliderTooltipLabel(value: number): string {
-    return `${value}|${100 - value}`;
+  formatSliderTooltipLabel(value: number): string | number {
+    return this.layoutsFormGroup.get('type').value === LayoutWidthType.FIXED ? value : `${value}|${100 - value}`;
   }
 
   private layoutControlChange(key: string, value) {
@@ -239,4 +279,69 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     this.layoutsFormGroup.get('sliderPercentage')
       .setValue(key === 'leftWidthPercentage' ? valueToSet : Number(value), {emitEvent: false});
   }
+
+  setFixedLayout(layout: string): void {
+    if (this.layoutsFormGroup.get('type').value === LayoutWidthType.FIXED) {
+      this.layoutsFormGroup.get('fixedLayout').setValue(layout);
+    }
+  }
+
+  private showTooltip(control: AbstractControl, layoutType: LayoutWidthType, layoutSide: string): void {
+    if (control.errors) {
+      let message: string;
+      const unit = layoutType === LayoutWidthType.FIXED ? 'px' : '%';
+
+      if (control.errors.required) {
+        if (layoutType === LayoutWidthType.FIXED) {
+          message = this.translate.instant('layout.layout-fixed-width-required');
+        } else {
+          if (layoutSide === 'right') {
+            message = this.translate.instant('layout.right-width-percentage-required');
+          } else {
+            message = this.translate.instant('layout.left-width-percentage-required');
+          }
+        }
+      } else if (control.errors.min) {
+        message = this.translate.instant('layout.value-min-error', {min: control.errors.min.min, unit: unit});
+      } else if (control.errors.max) {
+        message = this.translate.instant('layout.value-max-error', {max: control.errors.max.max, unit: unit});
+      }
+
+      if (layoutSide === 'main') {
+        this.tooltip.tooltipClass = 'tb-layout-error-tooltip-main';
+      } else {
+        this.tooltip.tooltipClass = 'tb-layout-error-tooltip-right';
+      }
+
+      this.tooltip.message = message;
+      this.tooltip.show(1300);
+    } else {
+      this.tooltip.message = '';
+      this.tooltip.hide();
+    }
+  }
+
+  layoutButtonTooltip(side: string, isText: boolean): string {
+    const formValues = this.layoutsFormGroup.value;
+    if (!(formValues.fixedLayout === side || !formValues.right || formValues.type === LayoutWidthType.PERCENTAGE)) {
+      if (isText) {
+        if (side === 'main') {
+          return this.translate.instant('layout.right-side');
+        } else {
+          return this.translate.instant('layout.left-side');
+        }
+      } else {
+        return 'tb-fixed-layout-button';
+      }
+    }
+  }
+
+  showPreviewInputs(side: string): boolean {
+    const formValues = this.layoutsFormGroup.value;
+    return formValues.right &&
+      (
+        formValues.type === LayoutWidthType.PERCENTAGE ||
+        (formValues.fixedLayout === side && formValues.type === LayoutWidthType.FIXED)
+      );
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss b/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
index 9b80660c1f..e78c102258 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
+++ b/ui-ngx/src/app/modules/home/components/dashboard/layout-button.scss
@@ -18,8 +18,7 @@
     width: 100%;
     height: 100%;
     padding: 40px 10px;
-    transition-duration: 0.5s;
-    transition-property: max-width;
+    cursor: default;
   }
 
   &::ng-deep {
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 0239631da7..80f6a062fe 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -2499,13 +2499,14 @@
         "right-width": "Right column (%)",
         "pick-fixed-side": "Fixed side: ",
         "layout-fixed-width": "Fixed width (px)",
-        "layout-min-max": "Minimum width: {{min}}{{units}}, maximum width: {{max}}{{units}}",
-        "value-min-error": "Value must be more then {{min}}",
-        "value-max-error": "Value must be less then {{max}}",
+        "value-min-error": "Value must be more then {{min}}{{unit}}",
+        "value-max-error": "Value must be less then {{max}}{{unit}}",
         "layout-fixed-width-required": "Fixed width is required",
         "right-width-percentage-required": "Right percentage is required",
         "left-width-percentage-required": "Left percentage is required",
-        "divider": "Divider"
+        "divider": "Divider",
+        "right-side": "Right side layout",
+        "left-side": "Left side layout"
     },
     "legend": {
         "direction": "Legend direction",