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 c3cead0bc2..8d599ad925 100644
--- a/ui-ngx/src/app/core/services/dashboard-utils.service.ts
+++ b/ui-ngx/src/app/core/services/dashboard-utils.service.ts
@@ -698,16 +698,9 @@ export class DashboardUtilsService {
                                 targetState: string,
                                 targetLayout: DashboardLayoutId,
                                 widgetId: string,
-                                breakpoint: string) {
-    const dashboardConfiguration = dashboard.configuration;
-    const states = dashboardConfiguration.states;
-    const state = states[targetState];
-    const layout = state.layouts[targetLayout];
-    if (layout.breakpoints[breakpoint]) {
-      delete layout.breakpoints[breakpoint].widgets[widgetId];
-    } else {
-      delete layout.widgets[widgetId];
-    }
+                                breakpoint: BreakpointId) {
+    const layout = this.getDashboardLayoutConfig(dashboard.configuration.states[targetState].layouts[targetLayout], breakpoint);
+    delete layout.widgets[widgetId];
     this.removeUnusedWidgets(dashboard);
   }
 
@@ -948,7 +941,7 @@ export class DashboardUtilsService {
                                  dashboard: Dashboard,
                                  targetState: string,
                                  targetLayout: DashboardLayoutId,
-                                 breakpointId: string,
+                                 breakpointId: BreakpointId,
                                  isRemoveWidget: boolean): Widget {
 
     const newWidget = deepClone(widget);
@@ -972,14 +965,14 @@ export class DashboardUtilsService {
     return newWidget;
   }
 
-  getDashboardLayoutConfig(layout: DashboardLayout, breakpointId: string): DashboardLayout {
-    if (breakpointId !== 'default') {
+  getDashboardLayoutConfig(layout: DashboardLayout, breakpointId: BreakpointId): DashboardLayout {
+    if (breakpointId !== 'default' && layout.breakpoints) {
       return layout.breakpoints[breakpointId];
     }
     return layout;
   }
 
-  getOriginalColumns(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, breakpointId: string): number {
+  getOriginalColumns(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, breakpointId: BreakpointId): number {
     let originalColumns = 24;
     let gridSettings = null;
     const state = dashboard.configuration.states[sourceState];
@@ -998,7 +991,7 @@ export class DashboardUtilsService {
   }
 
   getOriginalSize(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId,
-                  widget: Widget, breakpointId: string): WidgetSize {
+                  widget: Widget, breakpointId: BreakpointId): WidgetSize {
     const layout = this.getDashboardLayoutConfig(dashboard.configuration.states[sourceState].layouts[sourceLayout], breakpointId);
     const widgetLayout = layout.widgets[widget.id];
     return {
diff --git a/ui-ngx/src/app/core/services/item-buffer.service.ts b/ui-ngx/src/app/core/services/item-buffer.service.ts
index 3aa45c8439..c77784c4f5 100644
--- a/ui-ngx/src/app/core/services/item-buffer.service.ts
+++ b/ui-ngx/src/app/core/services/item-buffer.service.ts
@@ -15,7 +15,7 @@
 ///
 
 import { Injectable } from '@angular/core';
-import { Dashboard, DashboardLayoutId } from '@app/shared/models/dashboard.models';
+import { BreakpointId, Dashboard, DashboardLayoutId } from '@app/shared/models/dashboard.models';
 import { AliasesInfo, EntityAlias, EntityAliases, EntityAliasInfo } from '@shared/models/alias.models';
 import {
   Datasource,
@@ -87,7 +87,7 @@ export class ItemBufferService {
               private utils: UtilsService) {}
 
   public prepareWidgetItem(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId,
-                           widget: Widget, breakpoint: string): WidgetItem {
+                           widget: Widget, breakpoint: BreakpointId): WidgetItem {
     const aliasesInfo: AliasesInfo = {
       datasourceAliases: {},
       targetDeviceAlias: null
@@ -148,13 +148,13 @@ export class ItemBufferService {
     };
   }
 
-  public copyWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget, breakpoint: string): void {
+  public copyWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget, breakpoint: BreakpointId) {
     const widgetItem = this.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget, breakpoint);
     this.storeSet(WIDGET_ITEM, widgetItem);
   }
 
   public copyWidgetReference(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId,
-                             widget: Widget, breakpoint: string): void {
+                             widget: Widget, breakpoint: BreakpointId): void {
     const widgetReference = this.prepareWidgetReference(dashboard, sourceState, sourceLayout, widget, breakpoint);
     this.storeSet(WIDGET_REFERENCE, widgetReference);
   }
@@ -412,7 +412,7 @@ export class ItemBufferService {
   }
 
   private prepareWidgetReference(dashboard: Dashboard, sourceState: string,
-                                 sourceLayout: DashboardLayoutId, widget: Widget, breakpoint: string): WidgetReference {
+                                 sourceLayout: DashboardLayoutId, widget: Widget, breakpoint: BreakpointId): WidgetReference {
     const originalColumns = this.dashboardUtils.getOriginalColumns(dashboard, sourceState, sourceLayout, breakpoint);
     const originalSize = this.dashboardUtils.getOriginalSize(dashboard, sourceState, sourceLayout, widget, breakpoint);
     return {
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 9dd81de7ae..b91673ab17 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
@@ -71,7 +71,7 @@ export interface DashboardLayoutSettings {
   name: string;
   descriptionSize?: string;
   layout: DashboardLayout;
-  breakpoint: string;
+  breakpoint: BreakpointId;
 }
 
 @Component({
@@ -103,8 +103,8 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
 
   private submitted = false;
 
-  allowBreakpointIds = [];
-  selectedBreakpointIds = ['default'];
+  allowBreakpointIds: BreakpointId[] = [];
+  selectedBreakpointIds: BreakpointId[] = ['default'];
 
   constructor(protected store: Store<AppState>,
               protected router: Router,
@@ -293,8 +293,10 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     this.layouts.main.gridSettings.layoutType = layoutType;
     if (!this.isDividerLayout) {
       delete this.layouts.right;
-      for (const breakpoint of Object.values(this.layouts.main.breakpoints)) {
-        breakpoint.gridSettings.layoutType = layoutType;
+      if (this.layouts.main.breakpoints) {
+        for (const breakpoint of Object.values(this.layouts.main.breakpoints)) {
+          breakpoint.gridSettings.layoutType = layoutType;
+        }
       }
     } else {
       delete this.layouts.main.breakpoints;
@@ -442,7 +444,7 @@ export class ManageDashboardLayoutsDialogComponent extends DialogComponent<Manag
     });
   }
 
-  deleteBreakpoint($event: Event, breakpointId: string): void {
+  deleteBreakpoint($event: Event, breakpointId: BreakpointId): void {
     if ($event) {
       $event.stopPropagation();
     }
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.ts
index 9caa433b0a..130d0e02b2 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.ts
@@ -32,7 +32,7 @@ export class SelectDashboardBreakpointComponent implements OnInit, OnDestroy {
 
   selectedBreakpoint: BreakpointId = 'default';
 
-  breakpointIds: Array<string> = ['default'];
+  breakpointIds: Array<BreakpointId> = ['default'];
 
   private layoutDataChanged$: Subscription;
 
@@ -42,7 +42,7 @@ export class SelectDashboardBreakpointComponent implements OnInit, OnDestroy {
   ngOnInit() {
     this.layoutDataChanged$ = this.dashboardCtrl.layouts.main.layoutCtx.layoutDataChanged.subscribe(() => {
       if (this.dashboardCtrl.layouts.main.layoutCtx.layoutData) {
-        this.breakpointIds = Object.keys(this.dashboardCtrl.layouts.main.layoutCtx?.layoutData);
+        this.breakpointIds = Object.keys(this.dashboardCtrl.layouts.main.layoutCtx?.layoutData) as BreakpointId[];
         this.breakpointIds.sort((a, b) => {
           const aMaxWidth = this.dashboardUtils.getBreakpointInfoById(a)?.maxWidth || Infinity;
           const bMaxWidth = this.dashboardUtils.getBreakpointInfoById(b)?.maxWidth || Infinity;
diff --git a/ui-ngx/src/app/shared/import-export/import-export.service.ts b/ui-ngx/src/app/shared/import-export/import-export.service.ts
index 9e2d066400..528a8b0fd3 100644
--- a/ui-ngx/src/app/shared/import-export/import-export.service.ts
+++ b/ui-ngx/src/app/shared/import-export/import-export.service.ts
@@ -20,7 +20,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { select, Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
-import { Dashboard, DashboardLayoutId } from '@shared/models/dashboard.models';
+import { BreakpointId, Dashboard, DashboardLayoutId } from '@shared/models/dashboard.models';
 import { deepClone, guid, isDefined, isNotEmptyStr, isObject, isString, isUndefined } from '@core/utils';
 import { WINDOW } from '@core/services/window.service';
 import { DOCUMENT } from '@angular/common';
@@ -199,7 +199,7 @@ export class ImportExportService {
   }
 
   public exportWidget(dashboard: Dashboard, sourceState: string, sourceLayout: DashboardLayoutId, widget: Widget,
-                      widgetTitle: string, breakpoint: string) {
+                      widgetTitle: string, breakpoint: BreakpointId) {
     const widgetItem = this.itembuffer.prepareWidgetItem(dashboard, sourceState, sourceLayout, widget, breakpoint);
     const widgetDefaultName = this.widgetService.getWidgetInfoFromCache(widget.typeFullFqn).widgetName;
     let fileName = widgetDefaultName + (isNotEmptyStr(widgetTitle) ? `_${widgetTitle}` : '');
diff --git a/ui-ngx/src/app/shared/models/dashboard.models.ts b/ui-ngx/src/app/shared/models/dashboard.models.ts
index 04606fb612..2621175030 100644
--- a/ui-ngx/src/app/shared/models/dashboard.models.ts
+++ b/ui-ngx/src/app/shared/models/dashboard.models.ts
@@ -104,7 +104,7 @@ export interface DashboardLayout {
   breakpoints?: {[breakpointId in BreakpointId]?: Omit<DashboardLayout, 'breakpoints'>};
 }
 
-export declare type DashboardLayoutInfo = {[breakpointId: string]: BreakpointLayoutInfo};
+export declare type DashboardLayoutInfo = {[breakpointId in BreakpointId]?: BreakpointLayoutInfo};
 
 export interface BreakpointLayoutInfo {
   widgetIds?: string[];