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 7d55904768..8e64822897 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -287,35 +287,27 @@ export class DashboardUtilsService {
     let addedCount = 0;
     let removedCount = 0;
     for (const l of Object.keys(state.layouts)) {
-      if (!newLayouts[l] && l !== 'layoutDimension') {
-        removedCount++;
-      }
+      removedCount++;
     }
     for (const l of Object.keys(newLayouts)) {
-      if (!state.layouts[l] && l !== 'layoutDimension') {
-        addedCount++;
-      }
+      addedCount++;
     }
     state.layouts = newLayouts;
     const layoutsCount = Object.keys(state.layouts).length;
     let newColumns;
     if (addedCount) {
       for (const l of Object.keys(state.layouts)) {
-        if (l !== 'layoutDimension') {
-          newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount;
-          if (newColumns > 0) {
-            state.layouts[l].gridSettings.columns = newColumns;
-          }
+        newColumns = state.layouts[l].gridSettings.columns * (layoutsCount - addedCount) / layoutsCount;
+        if (newColumns > 0) {
+          state.layouts[l].gridSettings.columns = newColumns;
         }
       }
     }
     if (removedCount) {
       for (const l of Object.keys(state.layouts)) {
-        if (l !== 'layoutDimension') {
-          newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount;
-          if (newColumns > 0) {
-            state.layouts[l].gridSettings.columns = newColumns;
-          }
+        newColumns = state.layouts[l].gridSettings.columns * (layoutsCount + removedCount) / layoutsCount;
+        if (newColumns > 0) {
+          state.layouts[l].gridSettings.columns = newColumns;
         }
       }
     }
@@ -339,20 +331,18 @@ export class DashboardUtilsService {
     if (state) {
       const result: DashboardLayoutsInfo = {};
       for (const l of Object.keys(state.layouts)) {
-        if (l !== 'layoutDimension') {
-          const layout: DashboardLayout = state.layouts[l];
-          if (layout) {
-            result[l] = {
-              widgetIds: [],
-              widgetLayouts: {},
-              gridSettings: {}
-            } as DashboardLayoutInfo;
-            for (const id of Object.keys(layout.widgets)) {
-              result[l].widgetIds.push(id);
-            }
-            result[l].widgetLayouts = layout.widgets;
-            result[l].gridSettings = layout.gridSettings;
+        const layout: DashboardLayout = state.layouts[l];
+        if (layout) {
+          result[l] = {
+            widgetIds: [],
+            widgetLayouts: {},
+            gridSettings: {}
+          } as DashboardLayoutInfo;
+          for (const id of Object.keys(layout.widgets)) {
+            result[l].widgetIds.push(id);
           }
+          result[l].widgetLayouts = layout.widgets;
+          result[l].gridSettings = layout.gridSettings;
         }
       }
       return result;
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 116e1acea0..f9ecf6646b 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
@@ -43,7 +43,7 @@ import {
   DashboardLayoutsInfo,
   DashboardState,
   DashboardStateLayouts,
-  GridSettings,
+  GridSettings, LayoutDimension,
   WidgetLayout
 } from '@app/shared/models/dashboard.models';
 import { WINDOW } from '@core/services/window.service';
@@ -135,7 +135,7 @@ import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import cssjs from '@core/css/css';
 import { DOCUMENT } from '@angular/common';
 import { IAliasController } from '@core/api/widget-api.models';
-import { LaouytType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
+import { LayoutType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
 
 // @dynamic
 @Component({
@@ -267,8 +267,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
         ctrl: null,
         dashboardCtrl: this
       }
-    },
-    layoutDimension: null
+    }
   };
 
   addWidgetFabButtons: FooterFabButtons = {
@@ -653,15 +652,15 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   }
 
   public mainLayoutWidth(): string {
-    if (this.isEditingWidget && this.editingLayoutCtx.id === LaouytType.MAIN) {
+    if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.MAIN) {
       return '100%';
     } else {
-      return this.layouts.right.show && !this.isMobile ? this.calculateWidth(LaouytType.MAIN) : '100%';
+      return this.layouts.right.show && !this.isMobile ? this.calculateWidth(LayoutType.MAIN) : '100%';
     }
   }
 
   public mainLayoutHeight(): string {
-    if (!this.isEditingWidget || this.editingLayoutCtx.id === LaouytType.MAIN) {
+    if (!this.isEditingWidget || this.editingLayoutCtx.id === LayoutType.MAIN) {
       return '100%';
     } else {
       return '0px';
@@ -669,18 +668,27 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   }
 
   public rightLayoutWidth(): string {
-    if (this.isEditingWidget && this.editingLayoutCtx.id === LaouytType.RIGHT) {
+    if (this.isEditingWidget && this.editingLayoutCtx.id === LayoutType.RIGHT) {
       return '100%';
     } else {
-      return this.isMobile ? '100%' : this.calculateWidth(LaouytType.RIGHT);
+      return this.isMobile ? '100%' : this.calculateWidth(LayoutType.RIGHT);
     }
   }
 
   private calculateWidth(layout: DashboardLayoutId): string {
-      const layoutDimension = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.layoutDimension;
+      let layoutDimension: LayoutDimension;
+      const mainLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.main;
+      const rightLayout = this.dashboard.configuration.states[this.dashboardCtx.state].layouts.right;
+      if (rightLayout) {
+        if (mainLayout.gridSettings.layoutDimension) {
+          layoutDimension = mainLayout.gridSettings.layoutDimension;
+        } else {
+          layoutDimension = rightLayout.gridSettings.layoutDimension;
+        }
+      }
       if (layoutDimension) {
         if (layoutDimension.type === LayoutWidthType.PERCENTAGE) {
-          if (layout === LaouytType.RIGHT) {
+          if (layout === LayoutType.RIGHT) {
             return (100 - layoutDimension.leftWidthPercentage) + '%';
           } else {
             return layoutDimension.leftWidthPercentage + '%';
@@ -911,7 +919,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     }
     for (const l of Object.keys(this.layouts)) {
       const layout: DashboardPageLayout = this.layouts[l];
-      if(l !== 'layoutDimension') {
         if (layoutsData[l]) {
           layout.show = true;
           const layoutInfo: DashboardLayoutInfo = layoutsData[l];
@@ -920,7 +927,6 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
           layout.show = false;
           this.updateLayout(layout, {widgetIds: [], widgetLayouts: {}, gridSettings: null});
         }
-      }
     }
   }
 
@@ -968,11 +974,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
 
   private resetHighlight() {
     for (const l of Object.keys(this.layouts)) {
-      if(l !== 'layoutDimension' ) {
-        if (this.layouts[l].layoutCtx) {
-          if (this.layouts[l].layoutCtx.ctrl) {
-            this.layouts[l].layoutCtx.ctrl.resetHighlight();
-          }
+      if (this.layouts[l].layoutCtx) {
+        if (this.layouts[l].layoutCtx.ctrl) {
+          this.layouts[l].layoutCtx.ctrl.resetHighlight();
         }
       }
     }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
index de11bf24f2..c7ffd6f49c 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.models.ts
@@ -18,7 +18,6 @@ import {
   Dashboard,
   DashboardLayoutId,
   GridSettings,
-  LayoutDimension,
   WidgetLayouts
 } from '@app/shared/models/dashboard.models';
 import { Widget, WidgetPosition } from '@app/shared/models/widget.models';
@@ -74,7 +73,7 @@ export interface DashboardPageLayout {
   layoutCtx: DashboardPageLayoutContext;
 }
 
-export declare type DashboardPageLayouts = {[key in DashboardLayoutId | 'layoutDimension']: DashboardPageLayout & LayoutDimension};
+export declare type DashboardPageLayouts = {[key in DashboardLayoutId ]: DashboardPageLayout };
 
 export class LayoutWidgetsArray implements Iterable<Widget> {
 
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
index a9ccd0a67f..49ff9052c2 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/layout.models.ts
@@ -28,7 +28,7 @@ export enum LayoutWidthType {
   FIXED = "fixed"
 }
 
-export enum LaouytType {
+export enum LayoutType {
   MAIN = "main",
   RIGHT = "right",
   LEFT = "left"
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 1e9cbf6cff..8ac16e2bb3 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
@@ -39,40 +39,40 @@
       </div>
       <div fxLayout="column" fxLayoutAlign="start center" fxLayoutGap="8px">
         <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
-          <button fxFlex
+          <button fxFlex="{{buttonFlexValue()}}"
                   type="button"
                   mat-raised-button
                   color="primary"
                   class="tb-layout-button"
-                  (click)="openLayoutSettings('main')"
-                  [ngStyle]="buttonStyle('main')">
-            <span >{{ (layoutsFormGroup.value.right ? 'layout.left' :'layout.main')  | translate }}</span>
+                  (click)="openLayoutSettings(LayoutType.MAIN)"
+                  >
+            <span >{{ (layoutsFormGroup.value.right ? 'layout.left' : 'layout.main')  | translate }}</span>
           </button>
-          <button fxFlex [fxShow]="layoutsFormGroup.get('right').value"
+          <button fxFlex
+                  [fxShow]="layoutsFormGroup.get(LayoutType.RIGHT).value"
                   type="button"
                   mat-raised-button
                   color="primary"
                   class="tb-layout-button"
-                  (click)="openLayoutSettings('right')"
-                  [ngStyle]="buttonStyle('right')">
+                  (click)="openLayoutSettings(LayoutType.RIGHT)">
             <span >{{ 'layout.right' | translate }}</span>
           </button>
         </div>
         <div fxLayout="column"
              fxLayoutAlign="start center"
              fxLayoutGap="8px"
-             [fxShow]="layoutsFormGroup.get('right').value">
+             [fxShow]="layoutsFormGroup.get(LayoutType.RIGHT).value">
           <mat-button-toggle-group aria-label="Select width value type"
                                    formControlName="type"
                                    style="width: 100%;">
-            <mat-button-toggle style="width: 50%;" value="percentage">
+            <mat-button-toggle fxFlex value="percentage">
               {{ 'layout.percentage-width' | translate }}
             </mat-button-toggle>
-            <mat-button-toggle style="width: 50%;" value="fixed">
+            <mat-button-toggle fxFlex value="fixed">
               {{ 'layout.fixed-width' | translate }}
             </mat-button-toggle>
           </mat-button-toggle-group>
-          <div [fxShow]="layoutsFormGroup.get('type').value === 'percentage'">
+          <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.PERCENTAGE">
             <div
                  fxLayoutAlign="start center"
                  fxLayoutGap="8px"
@@ -83,9 +83,10 @@
                           max="90"
                           formControlName="leftWidthPercentage"
                           thumbLabel
-                          [value]="layoutsFormGroup.value.leftWidthPercentage"
-                          [displayWith]="formatSliderTooltipLabel"
-              ></mat-slider>
+                          [value]="layoutsFormGroup.get('leftWidthPercentage').value"
+                          [displayWith]="formatSliderTooltipLabel">
+              </mat-slider>
+
             </div>
             <div fxLayout="column">
               <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" style="width: 100%;">
@@ -93,9 +94,9 @@
                   <mat-label>{{ 'layout.left-width' | translate }}</mat-label>
                   <input matInput
                          formControlName="leftWidthPercentage"
-                         [value]="layoutsFormGroup.value.leftWidthPercentage"
+                         [value]="layoutsFormGroup.get('leftWidthPercentage').value"
                          type="number"
-                         step="any"
+                         step="1"
                          min="10"
                          max="90">
                 </mat-form-field>
@@ -104,16 +105,15 @@
                   <input matInput
                          formControlName="rightWidthPercentage"
                          type="number"
-                         step="any"
+                         step="1"
                          min="10"
                          max="90">
                 </mat-form-field>
               </div>
-              <mat-hint class="tb-hint">{{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }}</mat-hint>
+              <label class="tb-hint">{{'layout.layout-min-max' | translate: { min: 10, max: 90, units: "%" } }}</label>
             </div>
           </div>
-          <div [fxShow]="layoutsFormGroup.get('type').value === 'fixed'"
-               style="width: 100%;"
+          <div [fxShow]="layoutsFormGroup.get('type').value === LayoutWidthType.FIXED"
                fxLayout="column"
                fxLayoutAlign="start center">
             <div fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="8px" class="tb-layout-fixed-container">
@@ -137,12 +137,12 @@
                 <input matInput
                        formControlName="fixedWidth"
                        type="number"
-                       step="any"
+                       step="1"
                        min="150"
                        max="1700"
                        required>
               </mat-form-field>
-              <mat-hint class="tb-hint">{{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }}</mat-hint>
+              <label class="tb-hint">{{ 'layout.layout-min-max' | translate: {min: 150, max: 1700, units: "px" } }}</label>
             </div>
           </div>
         </div>
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 928a45fbdf..32cf52a917 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,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Inject, OnInit, SkipSelf } from '@angular/core';
+import { ChangeDetectorRef, Component, Inject, OnInit, 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';
@@ -24,14 +24,14 @@ 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 } from '@app/shared/models/dashboard.models';
+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 { LaouytType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
+import { LayoutType, LayoutWidthType } from "@home/components/dashboard-page/layout/layout.models";
 
 export interface ManageDashboardLayoutsDialogData {
   layouts: DashboardStateLayouts;
@@ -50,6 +50,10 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
 
   layouts: DashboardStateLayouts;
 
+  LayoutWidthType = LayoutWidthType;
+
+  LayoutType = LayoutType;
+
   submitted = false;
 
   constructor(protected store: Store<AppState>,
@@ -61,7 +65,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
               private utils: UtilsService,
               private dashboardUtils: DashboardUtilsService,
               private translate: TranslateService,
-              private dialog: MatDialog) {
+              private dialog: MatDialog,
+              private cd: ChangeDetectorRef) {
     super(store, router, dialogRef);
 
     this.layouts = this.data.layouts;
@@ -72,26 +77,33 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
         rightWidthPercentage: [50, [Validators.min(10), Validators.max(90)]],
         type: [LayoutWidthType.PERCENTAGE, []],
         fixedWidth: [150, [Validators.min(150), Validators.max(1700)]],
-        fixedLayout: [LaouytType.MAIN, []]
+        fixedLayout: [LayoutType.MAIN, []]
       }
     );
 
-    if (this.layouts.layoutDimension) {
-      this.layoutsFormGroup.get('type').setValue(this.layouts.layoutDimension.type);
-      if (this.layouts.layoutDimension.type === LayoutWidthType.FIXED) {
-        this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.layoutDimension.fixedWidth);
-        this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.layoutDimension.fixedLayout);
-      } else {
-        this.layoutsFormGroup.get('leftWidthPercentage').setValue(this.layouts.layoutDimension.leftWidthPercentage);
-        this.layoutsFormGroup.get('rightWidthPercentage').setValue(100 - Number(this.layouts.layoutDimension.leftWidthPercentage));
+    if (this.layouts.right) {
+      if (this.layouts.right.gridSettings.layoutDimension) {
+        this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.right.gridSettings.layoutDimension.fixedLayout);
+        this.layoutsFormGroup.get('type').setValue(LayoutWidthType.FIXED);
+        this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.right.gridSettings.layoutDimension.fixedWidth);
+      } else if (this.layouts.main.gridSettings.layoutDimension) {
+        if (this.layouts.main.gridSettings.layoutDimension.type === LayoutWidthType.FIXED) {
+          this.layoutsFormGroup.get('fixedLayout').setValue(this.layouts.main.gridSettings.layoutDimension.fixedLayout);
+          this.layoutsFormGroup.get('type').setValue(LayoutWidthType.FIXED);
+          this.layoutsFormGroup.get('fixedWidth').setValue(this.layouts.main.gridSettings.layoutDimension.fixedWidth);
+        } else {
+          const leftWidthPercentage: number = Number(this.layouts.main.gridSettings.layoutDimension.leftWidthPercentage);
+          this.layoutsFormGroup.get('leftWidthPercentage').setValue(leftWidthPercentage);
+          this.layoutsFormGroup.get('rightWidthPercentage').setValue(100 - Number(leftWidthPercentage));
+        }
       }
     }
 
-    if (!this.layouts[LaouytType.MAIN]) {
-      this.layouts[LaouytType.MAIN] = this.dashboardUtils.createDefaultLayoutData();
+    if (!this.layouts[LayoutType.MAIN]) {
+      this.layouts[LayoutType.MAIN] = this.dashboardUtils.createDefaultLayoutData();
     }
-    if (!this.layouts[LaouytType.RIGHT]) {
-      this.layouts[LaouytType.RIGHT] = this.dashboardUtils.createDefaultLayoutData();
+    if (!this.layouts[LayoutType.RIGHT]) {
+      this.layouts[LayoutType.RIGHT] = this.dashboardUtils.createDefaultLayoutData();
     }
 
     this.layoutsFormGroup.get('leftWidthPercentage').valueChanges.subscribe((value) => this.layoutControlChange('rightWidthPercentage', value));
@@ -134,36 +146,38 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     for (const l of Object.keys(this.layoutsFormGroup.controls)) {
       const control = this.layoutsFormGroup.controls[l];
       if (!control.value) {
-        delete this.layouts[l];
+        if (this.layouts[l]) {
+          delete this.layouts[l];
+        }
       }
     }
+    delete this.layouts.main.gridSettings.layoutDimension;
+    delete this.layouts.right.gridSettings.layoutDimension;
     if (this.layoutsFormGroup.value.right) {
       const formValues = this.layoutsFormGroup.value;
       const widthType = formValues.type;
-      (this.layouts.layoutDimension as any) = {
+      const layoutDimension: LayoutDimension = {
         type: widthType
-      }
+      };
       if (widthType === LayoutWidthType.PERCENTAGE) {
-        this.layouts.layoutDimension.leftWidthPercentage = formValues.leftWidthPercentage;
+        layoutDimension.leftWidthPercentage = formValues.leftWidthPercentage;
+        this.layouts.main.gridSettings.layoutDimension = layoutDimension;
       } else {
-        this.layouts.layoutDimension.fixedWidth = formValues.fixedWidth;
-        this.layouts.layoutDimension.fixedLayout = formValues.fixedLayout;
+        layoutDimension.fixedWidth = formValues.fixedWidth;
+        layoutDimension.fixedLayout = formValues.fixedLayout;
+        if (formValues.fixedLayout === LayoutType.MAIN) {
+          this.layouts.main.gridSettings.layoutDimension = layoutDimension;
+        } else {
+          this.layouts.right.gridSettings.layoutDimension = layoutDimension;
+        }
       }
     }
     this.dialogRef.close(this.layouts);
   }
 
-  buttonStyle(layout: DashboardLayoutId): { maxWidth: string } {
-    if (this.layoutsFormGroup.value.type && this.layoutsFormGroup.value.right) {
-      if (this.layoutsFormGroup.value.type !== LayoutWidthType.FIXED) {
-        if (layout === LaouytType.MAIN) {
-          return { maxWidth: this.layoutsFormGroup.value.leftWidthPercentage + "%" };
-        } else {
-          return { maxWidth: (100 - this.layoutsFormGroup.value.leftWidthPercentage) + "%" };
-        }
-      } else {
-        return { maxWidth: '100%' };
-      }
+  buttonFlexValue(): number {
+    if (this.layoutsFormGroup.get('right').value && this.layoutsFormGroup.value.type !== LayoutWidthType.FIXED) {
+      return this.layoutsFormGroup.get('leftWidthPercentage').value;
     }
   }
 
diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts
index c6dd45aa22..370faad98b 100644
--- a/ui-ngx/src/app/shared/models/dashboard.models.ts
+++ b/ui-ngx/src/app/shared/models/dashboard.models.ts
@@ -55,6 +55,7 @@ export interface GridSettings {
   autoFillHeight?: boolean;
   mobileAutoFillHeight?: boolean;
   mobileRowHeight?: number;
+  layoutDimension?: LayoutDimension;
   [key: string]: any;
 }
 
@@ -80,7 +81,8 @@ export declare type DashboardLayoutId = 'main' | 'right';
 
 export declare type LayoutType = 'percentage' | 'fixed';
 
-export declare type DashboardStateLayouts = {[key in DashboardLayoutId | 'layoutDimension']?: DashboardLayout & LayoutDimension };
+// export declare type DashboardStateLayouts = {[key in DashboardLayoutId | 'layoutDimension']?: DashboardLayout & LayoutDimension };
+export declare type DashboardStateLayouts = {[key in DashboardLayoutId]?: DashboardLayout };
 
 export declare type DashboardLayoutsInfo = {[key in DashboardLayoutId]?: DashboardLayoutInfo};