diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
index 8baab0f295..15b7ee173a 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/add-new-breakpoint-dialog.component.html
@@ -30,7 +30,7 @@
       <mat-label translate>layout.breakpoint</mat-label>
       <mat-select formControlName="newBreakpointId" [hideSingleSelectionIndicator]="false">
         <mat-select-trigger>{{ getName(this.addBreakpointFormGroup.get('newBreakpointId').value) }}</mat-select-trigger>
-        <mat-option *ngFor="let breakpoint of allowBreakpointIds" [value]="breakpoint">
+        <mat-option *ngFor="let breakpoint of allowBreakpointIds" [value]="breakpoint" style="min-height:56px;">
           <mat-icon><tb-icon>{{ getIcon(breakpoint) }}</tb-icon></mat-icon>
           <div>{{ getName(breakpoint) }}</div>
           <div style="font-size: 12px;letter-spacing: 0.4px;color: #9e9e9e;">{{ getSizeDescription(breakpoint) }}</div>
@@ -41,7 +41,7 @@
       <mat-label translate>layout.copy-from</mat-label>
       <mat-select formControlName="copyFrom" [hideSingleSelectionIndicator]="false">
         <mat-select-trigger>{{ getName(this.addBreakpointFormGroup.get('copyFrom').value) }}</mat-select-trigger>
-        <mat-option *ngFor="let breakpoint of selectedBreakpointIds" [value]="breakpoint">
+        <mat-option *ngFor="let breakpoint of selectedBreakpointIds" [value]="breakpoint" style="min-height:56px;">
           <mat-icon><tb-icon>{{ getIcon(breakpoint) }}</tb-icon></mat-icon>
           <div>{{ getName(breakpoint) }}</div>
           <div style="font-size: 12px;letter-spacing: 0.4px;color: #9e9e9e;">{{ getSizeDescription(breakpoint) }}</div>
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.html
index 417c8d9e26..790835352d 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/layout/select-dashboard-breakpoint.component.html
@@ -21,7 +21,7 @@
   [(ngModel)]="selectedBreakpoint"
   (ngModelChange)="selectLayoutChanged()">
   <mat-select-trigger>{{ getName(selectedBreakpoint) }}</mat-select-trigger>
-  <mat-option *ngFor="let breakpointId of breakpointIds" [value]="breakpointId">
+  <mat-option *ngFor="let breakpointId of breakpointIds" [value]="breakpointId" style="min-height:56px;">
     <mat-icon><tb-icon>{{ getIcon(breakpointId) }}</tb-icon></mat-icon>
     <div>{{ getName(breakpointId) }}</div>
     <div style="font-size: 12px;letter-spacing: 0.4px;color: #9e9e9e;">{{ getSizeDescription(breakpointId) }}</div>