diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/form_recurrence-editor-first-opening_nested-expr (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/form_recurrence-editor-first-opening_nested-expr (fluent.blue.light).png
index 35e6dcc14ceb..465eee3ef0b2 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/form_recurrence-editor-first-opening_nested-expr (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/form_recurrence-editor-first-opening_nested-expr (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/recurrence-editor_after-hide (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/recurrence-editor_after-hide (fluent.blue.light).png
index ca0758f048a3..12a6e004933d 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/recurrence-editor_after-hide (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/recurrence-editor_after-hide (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/recurrence-editor_after-popup-reopen (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/recurrence-editor_after-popup-reopen (fluent.blue.light).png
index aa8440f986ed..4f102a58c4b2 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/recurrence-editor_after-popup-reopen (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/appointmentForm/etalons/recurrence-editor_after-popup-reopen (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/allday-and-reccurence-form (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/allday-and-reccurence-form (fluent.blue.light).png
index 8e52179e474e..f91e91f7fed2 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/allday-and-reccurence-form (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/allday-and-reccurence-form (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/dx-number-boxes-not-integer-chars (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/dx-number-boxes-not-integer-chars (fluent.blue.light).png
index 067d221014f4..6d8a0e6ed2a1 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/dx-number-boxes-not-integer-chars (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/dx-number-boxes-not-integer-chars (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/form-after-change-allday-and-reccurence-options (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/form-after-change-allday-and-reccurence-options (fluent.blue.light).png
index 8e52179e474e..f91e91f7fed2 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/form-after-change-allday-and-reccurence-options (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointmentForm/etalons/form-after-change-allday-and-reccurence-options (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-appointment (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-appointment (fluent.blue.light).png
index a423a6b765e0..dc98eb771c59 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-appointment (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-appointment (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-by-function-appointment (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-by-function-appointment (fluent.blue.light).png
index 2e629f4b44a1..c77b4d8a47c1 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-by-function-appointment (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/disabled-by-function-appointment (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-appointment (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-appointment (fluent.blue.light).png
index 02a10a189eee..476b5c6efa3a 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-appointment (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-appointment (fluent.blue.light).png differ
diff --git a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-by-function-appointment (fluent.blue.light).png b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-by-function-appointment (fluent.blue.light).png
index 5d8bf0de022d..ffc583892db2 100644
Binary files a/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-by-function-appointment (fluent.blue.light).png and b/e2e/testcafe-devextreme/tests/scheduler/common/layout/appointments/etalons/enabled-by-function-appointment (fluent.blue.light).png differ
diff --git a/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss b/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss
index 28f826acb54d..c0bf57592c61 100644
--- a/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss
+++ b/packages/devextreme-scss/scss/widgets/base/_recurrenceEditor.scss
@@ -1,4 +1,4 @@
-$recurrence-interval-number-box-margin-top: 25px;
+$recurrence-interval-number-box-margin-bottom: 6px;
 $recurrence-radio-group-item-padding: 10px;
 $recurrence-button-group-item-padding: 8px;
 
@@ -26,7 +26,11 @@ $recurrence-button-group-item-padding: 8px;
 }
 
 .dx-recurrence-numberbox-interval-label {
-  margin-top: $recurrence-interval-number-box-margin-top;
+  margin-bottom: $recurrence-interval-number-box-margin-bottom;
+}
+
+.dx-recurrence-numberbox-interval-wrapper .dx-box-item:last-child .dx-box-item-content {
+  justify-content: flex-end;
 }
 
 .dx-recurrence-radiogroup-repeat-type {
diff --git a/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss
index 5bb4ce8cc4d9..dd6e663c0131 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_index.scss
@@ -19,7 +19,7 @@ $fluent-recurrence-radio-group-margin: 15px;
 
 .dx-recurrence-numberbox-interval-label {
   font-size: $fluent-base-font-size;
-  margin-top: $fluent-recurrence-interval-number-box-margin-top;
+  margin-bottom: $fluent-recurrence-interval-number-box-margin-bottom;
 }
 
 .dx-recurrence-button-group {
diff --git a/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_sizes.scss
index b422f99e08d4..b592b3122f72 100644
--- a/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/fluent/recurrenceEditor/_sizes.scss
@@ -4,16 +4,16 @@
 
 $fluent-recurrence-until-date-box-top-margin: null !default;
 $fluent-recurrence-count-number-box-top-margin: null !default;
-$fluent-recurrence-interval-number-box-margin-top: null !default;
+$fluent-recurrence-interval-number-box-margin-bottom: null !default;
 
 @if $size == "default" {
   $fluent-recurrence-until-date-box-top-margin: 60px !default;
   $fluent-recurrence-count-number-box-top-margin: 102px !default;
-  $fluent-recurrence-interval-number-box-margin-top: 30px !default;
+  $fluent-recurrence-interval-number-box-margin-bottom: 6px !default;
 }
 
 @else if $size == "compact" {
   $fluent-recurrence-until-date-box-top-margin: 46px !default;
   $fluent-recurrence-count-number-box-top-margin: 78px !default;
-  $fluent-recurrence-interval-number-box-margin-top: 22px !default;
+  $fluent-recurrence-interval-number-box-margin-bottom: 4px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss
index ea7a7fc7c9c6..da0f07c081a2 100644
--- a/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_index.scss
@@ -23,7 +23,7 @@ $generic-recurrence-number-box-margin-right: 11px;
 }
 
 .dx-recurrence-numberbox-interval-label {
-  margin-top: $generic-recurrence-interval-number-box-margin-top;
+  margin-bottom: $generic-recurrence-interval-number-box-margin-bottom;
 }
 
 .dx-recurrence-datebox-until-date {
diff --git a/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_sizes.scss
index de9914f86b3c..8170cba42fdf 100644
--- a/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/generic/recurrenceEditor/_sizes.scss
@@ -4,16 +4,16 @@
 
 $generic-recurrence-until-date-box-top-margin: null !default;
 $generic-recurrence-count-number-box-top-margin: null !default;
-$generic-recurrence-interval-number-box-margin-top: null !default;
+$generic-recurrence-interval-number-box-margin-bottom: null !default;
 
 @if $size == "default" {
   $generic-recurrence-until-date-box-top-margin: 30px !default;
   $generic-recurrence-count-number-box-top-margin: 66px !default;
-  $generic-recurrence-interval-number-box-margin-top: 31px !default;
+  $generic-recurrence-interval-number-box-margin-bottom: 8px !default;
 }
 
 @else if $size == "compact" {
   $generic-recurrence-until-date-box-top-margin: 28px !default;
   $generic-recurrence-count-number-box-top-margin: 56px !default;
-  $generic-recurrence-interval-number-box-margin-top: 23px !default;
+  $generic-recurrence-interval-number-box-margin-bottom: 6px !default;
 }
diff --git a/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss b/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss
index 049b4331da18..1b12f339e78d 100644
--- a/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss
+++ b/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_index.scss
@@ -19,7 +19,7 @@ $material-recurrence-radio-group-margin: 15px;
 
 .dx-recurrence-numberbox-interval-label {
   font-size: $material-base-font-size;
-  margin-top: $material-recurrence-interval-number-box-margin-top;
+  margin-bottom: $material-recurrence-interval-number-box-margin-bottom;
 }
 
 .dx-recurrence-button-group {
diff --git a/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_sizes.scss b/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_sizes.scss
index c8d1900d21e1..c980e3804ce6 100644
--- a/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_sizes.scss
+++ b/packages/devextreme-scss/scss/widgets/material/recurrenceEditor/_sizes.scss
@@ -4,16 +4,16 @@
 
 $material-recurrence-until-date-box-top-margin: null !default;
 $material-recurrence-count-number-box-top-margin: null !default;
-$material-recurrence-interval-number-box-margin-top: null !default;
+$material-recurrence-interval-number-box-margin-bottom: null !default;
 
 @if $size == "default" {
   $material-recurrence-until-date-box-top-margin: 60px !default;
   $material-recurrence-count-number-box-top-margin: 100px !default;
-  $material-recurrence-interval-number-box-margin-top: 55px !default;
+  $material-recurrence-interval-number-box-margin-bottom: 10px !default;
 }
 
 @else if $size == "compact" {
   $material-recurrence-until-date-box-top-margin: 50px !default;
   $material-recurrence-count-number-box-top-margin: 82px !default;
-  $material-recurrence-interval-number-box-margin-top: 33px !default;
+  $material-recurrence-interval-number-box-margin-bottom: 8px !default;
 }
diff --git a/packages/devextreme/js/__internal/scheduler/m_recurrence_editor.ts b/packages/devextreme/js/__internal/scheduler/m_recurrence_editor.ts
index 63ba04cc0d99..2b0f2527d052 100644
--- a/packages/devextreme/js/__internal/scheduler/m_recurrence_editor.ts
+++ b/packages/devextreme/js/__internal/scheduler/m_recurrence_editor.ts
@@ -30,9 +30,9 @@ const REPEAT_ON_EDITOR = 'dx-recurrence-repeat-on';
 const DAY_OF_MONTH = 'dx-recurrence-numberbox-day-of-month';
 const MONTH_OF_YEAR = 'dx-recurrence-selectbox-month-of-year';
 
-const recurrentEditorNumberBoxWidth = 90;
+const recurrentEditorNumberBoxWidth = 150;
 const repeatInputWidth = '100%';
-const recurrentEditorSelectBoxWidth = 120;
+const recurrentEditorSelectBoxWidth = 150;
 const defaultRecurrenceTypeIndex = 1; // default daily recurrence
 
 const frequenciesMessages = [
diff --git a/packages/devextreme/playground/jquery.html b/packages/devextreme/playground/jquery.html
index abaed02d03f2..61ded55d117f 100644
--- a/packages/devextreme/playground/jquery.html
+++ b/packages/devextreme/playground/jquery.html
@@ -49,13 +49,94 @@ <h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Te
         <select id="theme-selector" style="display: block;">
         </select>
         <br />
-        <div id="button"></div>
+        <div id="scheduler"></div>
         <script>
+            const data = [
+              {
+                text: 'Website Re-Design Plan',
+                startDate: new Date('2021-04-26T16:30:00.000Z'),
+                endDate: new Date('2021-04-26T18:30:00.000Z'),
+              }, {
+                text: 'Book Flights to San Fran for Sales Trip',
+                startDate: new Date('2021-04-26T19:00:00.000Z'),
+                endDate: new Date('2021-04-26T20:00:00.000Z'),
+                allDay: true,
+              }, {
+                text: 'Install New Router in Dev Room',
+                startDate: new Date('2021-04-26T21:30:00.000Z'),
+                endDate: new Date('2021-04-26T22:30:00.000Z'),
+              }, {
+                text: 'Approve Personal Computer Upgrade Plan',
+                startDate: new Date('2021-04-27T17:00:00.000Z'),
+                endDate: new Date('2021-04-27T18:00:00.000Z'),
+              }, {
+                text: 'Final Budget Review',
+                startDate: new Date('2021-04-27T19:00:00.000Z'),
+                endDate: new Date('2021-04-27T20:35:00.000Z'),
+              }, {
+                text: 'New Brochures',
+                startDate: new Date('2021-04-27T21:30:00.000Z'),
+                endDate: new Date('2021-04-27T22:45:00.000Z'),
+              }, {
+                text: 'Install New Database',
+                startDate: new Date('2021-04-28T16:45:00.000Z'),
+                endDate: new Date('2021-04-28T18:15:00.000Z'),
+              }, {
+                text: 'Approve New Online Marketing Strategy',
+                startDate: new Date('2021-04-28T19:00:00.000Z'),
+                endDate: new Date('2021-04-28T21:00:00.000Z'),
+              }, {
+                text: 'Upgrade Personal Computers',
+                startDate: new Date('2021-04-28T22:15:00.000Z'),
+                endDate: new Date('2021-04-28T23:30:00.000Z'),
+              }, {
+                text: 'Customer Workshop',
+                startDate: new Date('2021-04-29T18:00:00.000Z'),
+                endDate: new Date('2021-04-29T19:00:00.000Z'),
+                allDay: true,
+              }, {
+                text: 'Prepare 2021 Marketing Plan',
+                startDate: new Date('2021-04-29T18:00:00.000Z'),
+                endDate: new Date('2021-04-29T20:30:00.000Z'),
+              }, {
+                text: 'Brochure Design Review',
+                startDate: new Date('2021-04-29T21:00:00.000Z'),
+                endDate: new Date('2021-04-29T22:30:00.000Z'),
+              }, {
+                text: 'Create Icons for Website',
+                startDate: new Date('2021-04-30T17:00:00.000Z'),
+                endDate: new Date('2021-04-30T18:30:00.000Z'),
+              }, {
+                text: 'Upgrade Server Hardware',
+                startDate: new Date('2021-04-30T21:30:00.000Z'),
+                endDate: new Date('2021-04-30T23:00:00.000Z'),
+              }, {
+                text: 'Submit New Website Design',
+                startDate: new Date('2021-04-30T23:30:00.000Z'),
+                endDate: new Date('2021-05-01T01:00:00.000Z'),
+              }, {
+                text: 'Launch New Website',
+                startDate: new Date('2021-04-30T19:20:00.000Z'),
+                endDate: new Date('2021-04-30T21:00:00.000Z'),
+              },
+            ];
+
             $(() => {
-                $("#button").dxButton({
-                    text: 'Click me!',
-                    onClick: () => { alert("clicked"); }
-                });
+              // DevExpress.ui.dxForm.defaultOptions({
+              //   options: {
+              //     labelMode: 'static'
+              //   }
+              // });
+
+              $('#scheduler').dxScheduler({
+                timeZone: 'America/Los_Angeles',
+                dataSource: data,
+                views: ['day', 'week', 'workWeek', 'month','timelineDay', 'timelineWeek', 'timelineWorkWeek', 'timelineMonth'],
+                currentView: 'day',
+                currentDate: new Date(2021, 3, 29),
+                startDayHour: 9,
+                height: 730,
+              });
             });
         </script>
     </div>
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/recurrenceEditor.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/recurrenceEditor.tests.js
index 58e404bdba8c..8105b2db2e70 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/recurrenceEditor.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/recurrenceEditor.tests.js
@@ -482,7 +482,7 @@ module('Interval editor', () => {
         assert.equal(getIntervalEditor(instance).option('useLargeSpinButtons'), false, 'Interval editor has right useLargeSpinButtons');
         assert.equal(getIntervalEditor(instance).option('min'), 1, 'Interval editor has right min value');
         assert.equal(getIntervalEditor(instance).option('value'), 1, 'Interval editor hase right value');
-        assert.equal(getIntervalEditor(instance).option('width'), 90, 'Interval editor has right width');
+        assert.equal(getIntervalEditor(instance).option('width'), 150, 'Interval editor has right width');
     });
 
     test('Interval editor should have right css class', async function(assert) {