diff --git a/.github/workflows/demos_visual_tests_frameworks.yml b/.github/workflows/demos_visual_tests_frameworks.yml
index e909f943d89d..f9b61931d5ef 100644
--- a/.github/workflows/demos_visual_tests_frameworks.yml
+++ b/.github/workflows/demos_visual_tests_frameworks.yml
@@ -451,7 +451,7 @@ jobs:
       working-directory: apps/demos
       env:
         CHANGEDFILEINFOSPATH: changed-files.json
-        BROWSERS: chrome:headless --disable-gpu --window-size=1200,800 --js-flags=--random-seed=2147483647
+        BROWSERS: chrome:headless --window-size=1200,800 --disable-partial-raster --disable-skia-runtime-opts --run-all-compositor-stages-before-draw --disable-new-content-rendering-timeout --disable-threaded-animation --disable-threaded-scrolling --disable-checker-imaging --disable-image-animation-resync --use-gl="swiftshader" --disable-features=PaintHolding --js-flags=--random-seed=2147483647 --font-render-hinting=none --disable-font-subpixel-positioning
         # DEBUG: hammerhead:*,testcafe:*
         CONCURRENCY: 4
         TCQUARANTINE: true
diff --git a/apps/demos/Demos/Chat/Overview/Vue/App.vue b/apps/demos/Demos/Chat/Overview/Vue/App.vue
index e39b85502c55..0141f6fff784 100644
--- a/apps/demos/Demos/Chat/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Chat/Overview/Vue/App.vue
@@ -1,62 +1,67 @@
 <template>
-    <DxChat
-        v-model:items="messages"
-        v-model:user="currentUser"
-        v-model:typing-users="userChatTypingUsers"
-        @message-entered="onMessageEntered($event)"
-        @typing-start="userChatTypingStart()"
-        @typing-end="userChatTypingEnd()"
-    ></DxChat>
-    <DxChat
-        v-model:items="messages"
-        v-model:user="supportAgent"
-        v-model:typing-users="supportChatTypingUsers"
-        @message-entered="onMessageEntered($event)"
-        @typing-start="supportChatTypingStart()"
-        @typing-end="supportChatTypingEnd()"
-    ></DxChat>
+  <DxChat
+    v-model:items="messages"
+    v-model:user="currentUser"
+    v-model:typing-users="userChatTypingUsers"
+    @message-entered="onMessageEntered($event)"
+    @typing-start="userChatTypingStart()"
+    @typing-end="userChatTypingEnd()"
+  />
+  <DxChat
+    v-model:items="messages"
+    v-model:user="supportAgent"
+    v-model:typing-users="supportChatTypingUsers"
+    @message-entered="onMessageEntered($event)"
+    @typing-start="supportChatTypingStart()"
+    @typing-end="supportChatTypingEnd()"
+  />
 </template>
 
-<style scoped>
-    #app {
-        display: flex;
-        gap: 20px;
-    }
-
-    .dx-chat {
-        height: 710px;
-    }
-
-    .dx-avatar {
-        border: 1px solid var(--dx-color-border);
-    }
-</style>
-
 <script setup lang="ts">
-    import { ref } from 'vue';
-    import DxChat from 'devextreme-vue/chat';
-    import { messages, supportAgent, currentUser } from './data.ts';
-
-    const userChatTypingUsers = ref([]);
-    const supportChatTypingUsers = ref([]);
-
-    function onMessageEntered(event) {
-        messages.value = [...messages.value, event.message];
-    }
-
-    function userChatTypingStart() {
-        supportChatTypingUsers.value = [currentUser.value];
-    }
-    
-    function userChatTypingEnd() {
-        supportChatTypingUsers.value = [];
-    }
-    
-    function supportChatTypingStart() {
-        userChatTypingUsers.value = [supportAgent.value];
-    }
-    
-    function supportChatTypingEnd() {
-        userChatTypingUsers.value = [];
-    }
+import { ref } from 'vue';
+import DxChat from 'devextreme-vue/chat';
+import {
+  messages as initialMessages,
+  supportAgent,
+  currentUser,
+} from './data.ts';
+
+const messages = ref(initialMessages);
+const userChatTypingUsers = ref([]);
+const supportChatTypingUsers = ref([]);
+
+function onMessageEntered(event) {
+  messages.value = [...messages.value, event.message];
+}
+
+function userChatTypingStart() {
+  supportChatTypingUsers.value = [currentUser];
+}
+
+function userChatTypingEnd() {
+  supportChatTypingUsers.value = [];
+}
+
+function supportChatTypingStart() {
+  userChatTypingUsers.value = [supportAgent];
+}
+
+function supportChatTypingEnd() {
+  userChatTypingUsers.value = [];
+}
 </script>
+
+<style scoped>
+#app {
+  display: flex;
+  gap: 20px;
+}
+
+.dx-chat {
+  height: 710px;
+}
+
+.dx-avatar {
+  border: 1px solid var(--dx-color-border);
+}
+</style>
diff --git a/apps/demos/Demos/Pagination/Overview/description.md b/apps/demos/Demos/Pagination/Overview/description.md
new file mode 100644
index 000000000000..ada1cc79830e
--- /dev/null
+++ b/apps/demos/Demos/Pagination/Overview/description.md
@@ -0,0 +1,10 @@
+DevExpress Pagination UI component allows users to navigate between pages and adjust page size at runtime. The Pagination component in this demo allows users to browse employee cards.
+
+To set up a Pagination component, specify the following options: 
+
+- [itemCount](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#itemCount): the total number of elements in the target control. 
+- [pageSize](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#pageSize): the number of items per page. 
+- [allowedPageSizes](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#allowedPageSizes) : available page size choices.
+- [pageIndex](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#pageIndex): page displayed first.
+- [showNavigationButtons](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#showNavigationButtons): navigation button visibility.
+- [showInfo](/Documentation/ApiReference/UI_Components/dxPagination/Configuration/#showInfo): information pane visibility.
\ No newline at end of file
diff --git a/apps/demos/Demos/Popup/Overview/Angular/app/app.component.html b/apps/demos/Demos/Popup/Overview/Angular/app/app.component.html
index 354825cb012d..f4a06540c4a3 100644
--- a/apps/demos/Demos/Popup/Overview/Angular/app/app.component.html
+++ b/apps/demos/Demos/Popup/Overview/Angular/app/app.component.html
@@ -30,27 +30,27 @@
     container=".dx-viewport"
     [(visible)]="popupVisible"
   >
-    <dxi-toolbar-item
+    <dxi-popup-toolbar-item
       widget="dxButton"
       toolbar="top"
       locateInMenu="always"
       [options]="moreInfoButtonOptions"
     >
-    </dxi-toolbar-item>
-    <dxi-toolbar-item
+    </dxi-popup-toolbar-item>
+    <dxi-popup-toolbar-item
       widget="dxButton"
       toolbar="bottom"
       location="before"
       [options]="emailButtonOptions"
     >
-    </dxi-toolbar-item>
-    <dxi-toolbar-item
+    </dxi-popup-toolbar-item>
+    <dxi-popup-toolbar-item
       widget="dxButton"
       toolbar="bottom"
       location="after"
       [options]="closeButtonOptions"
     >
-    </dxi-toolbar-item>
+    </dxi-popup-toolbar-item>
     <dxo-position at="bottom" my="center" [of]="positionOf" collision="fit">
     </dxo-position>
     <div *dxTemplate="let data of 'content'">
diff --git a/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html b/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html
index dd66dbaf138c..8d3273ede786 100644
--- a/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html
+++ b/apps/demos/Demos/Popup/Scrolling/Angular/app/app.component.html
@@ -57,13 +57,13 @@
       </div>
     </div>
   </div>
-  <dxi-toolbar-item
+  <dxi-popup-toolbar-item
     widget="dxButton"
     toolbar="bottom"
     location="center"
     [options]="bookButtonOptions"
   >
-  </dxi-toolbar-item>
+  </dxi-popup-toolbar-item>
 </dx-popup>
 
 <dx-popup
@@ -102,11 +102,11 @@
       </div>
     </dx-scroll-view>
   </div>
-  <dxi-toolbar-item
+  <dxi-popup-toolbar-item
     widget="dxButton"
     toolbar="bottom"
     location="center"
     [options]="bookButtonOptions"
   >
-  </dxi-toolbar-item>
+  </dxi-popup-toolbar-item>
 </dx-popup>
diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
index afd43782211e..a4c619487f71 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.css
@@ -1,35 +1,62 @@
+::ng-deep .dx-scheduler-group-header,
+::ng-deep .dx-scheduler-date-table-cell {
+  position: relative;
+}
+
+::ng-deep .dx-color-scheme-light,
+::ng-deep .dx-color-scheme-carmine,
+::ng-deep .dx-color-scheme-softblue,
+::ng-deep .dx-color-scheme-blue-light,
+::ng-deep .dx-color-scheme-saas-light,
+::ng-deep .dx-color-scheme-lime-light,
+::ng-deep .dx-color-scheme-orange-light,
+::ng-deep .dx-color-scheme-purple-light,
+::ng-deep .dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+::ng-deep .dx-color-scheme-dark,
+::ng-deep .dx-color-scheme-darkviolet,
+::ng-deep .dx-color-scheme-darkmoon,
+::ng-deep .dx-color-scheme-blue-dark,
+::ng-deep .dx-color-scheme-saas-dark,
+::ng-deep .dx-color-scheme-lime-dark,
+::ng-deep .dx-color-scheme-orange-dark,
+::ng-deep .dx-color-scheme-purple-dark,
+::ng-deep .dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+::ng-deep .dx-scheduler-header .dx-toolbar .dx-button,
+::ng-deep .dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 ::ng-deep .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
-}
-
-::ng-deep .dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
-}
-
-::ng-deep .dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-::ng-deep .dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+  color: var(--disabled-color) !important;
 }
 
-::ng-deep .dx-scheduler-group-header-content,
-::ng-deep .dx-scheduler-date-table-cell {
-  position: relative;
+::ng-deep .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
+}
+
+::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+::ng-deep .dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 ::ng-deep .dx-scheduler-date-table-cell .dx-template-wrapper {
@@ -39,12 +66,32 @@
   padding-right: 6px;
 }
 
-::ng-deep .avatar {
-  width: 155px;
+::ng-deep  .avatar {
+  width: 124px;
   float: left;
   overflow: hidden;
   position: relative;
-  height: 125px;
+  height: 124px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+::ng-deep .avatar img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+}
+
+::ng-deep .avatar[title="John Heart"] img {
+  top: 5px;
+  left: 3px;
+}
+
+::ng-deep .avatar[title="Greta Sims"] img {
+  top: 5px;
+  left: -7px;
 }
 
 ::ng-deep .name {
@@ -55,52 +102,65 @@
 }
 
 ::ng-deep .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 ::ng-deep .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
+  color: #707070;
+}
+
+::ng-deep .dx-color-scheme-contrast .info {
+  color: #fff;
 }
 
 ::ng-deep .day-cell {
+  width: 100%;
   height: 100%;
   background-position: center center;
   background-repeat: no-repeat;
 }
 
+::ng-deep .dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 ::ng-deep .employee-1 {
-  background-color: rgba(86, 202, 133, 0.1);
+  background-color: rgba(55, 126, 58, 0.08);
 }
 
 ::ng-deep .employee-2 {
-  background-color: rgba(255, 151, 71, 0.1);
+  background-color: rgba(194, 81, 0, 0.08);
 }
 
 ::ng-deep .employee-weekend-1 {
-  background-color: rgba(86, 202, 133, 0.2);
+  background-color: rgba(55, 126, 58, 0.12);
 }
 
 ::ng-deep .employee-weekend-2 {
-  background-color: rgba(255, 151, 71, 0.2);
+  background-color: rgba(194, 81, 0, 0.12);
 }
 
 ::ng-deep .training-background-0 {
-  background-image: url("../../../../images/gym/icon-abs.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-abs.png");
 }
 
 ::ng-deep .training-background-1 {
-  background-image: url("../../../../images/gym/icon-step.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-step.png");
 }
 
 ::ng-deep .training-background-2 {
-  background-image: url("../../../../images/gym/icon-fitball.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-fitball.png");
 }
diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html
index 7e3bb9b44064..2cd0fee88166 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.component.html
@@ -8,7 +8,7 @@
   [startDayHour]="8"
   [endDayHour]="18"
   [showAllDayPanel]="false"
-  [height]="600"
+  [height]="710"
   [groups]="['employeeID']"
   resourceCellTemplate="resourceCellTemplate"
   dataCellTemplate="dataCellTemplate"
@@ -25,7 +25,7 @@
     <div class="name" [style.background]="employee.color">
       <h2>{{ employee.text }}</h2>
     </div>
-    <div class="avatar">
+    <div class="avatar" title="{{ employee.text }}">
       <img [src]="employee.data.avatar" alt="{{ employee.text }} photo" />
     </div>
     <div class="info" [style.color]="employee.color">
diff --git a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
index ccb593f1e824..6a0b62221343 100644
--- a/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
+++ b/apps/demos/Demos/Scheduler/Overview/Angular/app/app.service.ts
@@ -27,15 +27,15 @@ export class Data {
 const employees: Employee[] = [{
   text: 'John Heart',
   id: 1,
-  color: '#56ca85',
-  avatar: '../../../../images/gym/coach-man.png',
+  color: 'var(--background-color-1)',
+  avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
-  text: 'Sandra Johnson',
+  text: 'Greta Sims',
   id: 2,
-  color: '#ff9747',
-  avatar: '../../../../images/gym/coach-woman.png',
+  color: 'var(--background-color-2)',
+  avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
 }];
diff --git a/apps/demos/Demos/Scheduler/Overview/React/App.tsx b/apps/demos/Demos/Scheduler/Overview/React/App.tsx
index efb027610670..87977bb0326e 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/App.tsx
+++ b/apps/demos/Demos/Scheduler/Overview/React/App.tsx
@@ -20,7 +20,7 @@ const App = () => (
     views={views}
     defaultCurrentView="month"
     defaultCurrentDate={currentDate}
-    height={600}
+    height={710}
     showAllDayPanel={true}
     firstDayOfWeek={1}
     startDayHour={8}
diff --git a/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx b/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx
index 2ea79a94aa97..99f4f0595e21 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx
+++ b/apps/demos/Demos/Scheduler/Overview/React/ResourceCell.tsx
@@ -12,7 +12,7 @@ const ResourceCell = (props: ResourceCellProps) => {
       <div className="name" style={{ background: color }}>
         <h2>{text}</h2>
       </div>
-      <div className="avatar">
+      <div className="avatar" title={text}>
         <img
           src={avatar}
           alt={`${text} photo`}
diff --git a/apps/demos/Demos/Scheduler/Overview/React/data.ts b/apps/demos/Demos/Scheduler/Overview/React/data.ts
index 47e3f6bf005f..b02f5c26162d 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/data.ts
+++ b/apps/demos/Demos/Scheduler/Overview/React/data.ts
@@ -82,15 +82,15 @@ export const data: Appointment[] = [
 export const employees: Resource[] = [{
   text: 'John Heart',
   id: 1,
-  color: '#56ca85',
-  avatar: '../../../../images/gym/coach-man.png',
+  color: 'var(--background-color-1)',
+  avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
-  text: 'Sandra Johnson',
+  text: 'Greta Sims',
   id: 2,
-  color: '#ff9747',
-  avatar: '../../../../images/gym/coach-woman.png',
+  color: 'var(--background-color-2)',
+  avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
 }];
diff --git a/apps/demos/Demos/Scheduler/Overview/React/styles.css b/apps/demos/Demos/Scheduler/Overview/React/styles.css
index aad79c347951..1f104cd1c477 100644
--- a/apps/demos/Demos/Scheduler/Overview/React/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/React/styles.css
@@ -1,35 +1,62 @@
+.dx-scheduler-group-header,
+.dx-scheduler-date-table-cell {
+  position: relative;
+}
+
+.dx-color-scheme-light,
+.dx-color-scheme-carmine,
+.dx-color-scheme-softblue,
+.dx-color-scheme-blue-light,
+.dx-color-scheme-saas-light,
+.dx-color-scheme-lime-light,
+.dx-color-scheme-orange-light,
+.dx-color-scheme-purple-light,
+.dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+.dx-color-scheme-dark,
+.dx-color-scheme-darkviolet,
+.dx-color-scheme-darkmoon,
+.dx-color-scheme-blue-dark,
+.dx-color-scheme-saas-dark,
+.dx-color-scheme-lime-dark,
+.dx-color-scheme-orange-dark,
+.dx-color-scheme-purple-dark,
+.dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+.dx-scheduler-header .dx-toolbar .dx-button,
+.dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
-}
-
-.dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
-}
-
-.dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+  color: var(--disabled-color) !important;
 }
 
-.dx-template-wrapper,
-.dx-scheduler-date-table-cell {
-  position: relative;
+.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 .dx-scheduler-date-table-cell .dx-template-wrapper {
@@ -40,11 +67,31 @@
 }
 
 .avatar {
-  width: 155px;
+  width: 124px;
   float: left;
   overflow: hidden;
   position: relative;
-  height: 125px;
+  height: 124px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.avatar img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+}
+
+.avatar[title="John Heart"] img {
+  top: 5px;
+  left: 3px;
+}
+
+.avatar[title="Greta Sims"] img {
+  top: 5px;
+  left: -7px;
 }
 
 .name {
@@ -55,20 +102,23 @@
 }
 
 .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
   color: #707070;
 }
 
@@ -77,35 +127,40 @@
 }
 
 .day-cell {
+  width: 100%;
   height: 100%;
   background-position: center center;
   background-repeat: no-repeat;
 }
 
+.dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 .employee-1 {
-  background-color: rgba(86, 202, 133, 0.1);
+  background-color: rgba(55, 126, 58, 0.08);
 }
 
 .employee-2 {
-  background-color: rgba(255, 151, 71, 0.1);
+  background-color: rgba(194, 81, 0, 0.08);
 }
 
 .employee-weekend-1 {
-  background-color: rgba(86, 202, 133, 0.2);
+  background-color: rgba(55, 126, 58, 0.12);
 }
 
 .employee-weekend-2 {
-  background-color: rgba(255, 151, 71, 0.2);
+  background-color: rgba(194, 81, 0, 0.12);
 }
 
 .training-background-0 {
-  background-image: url("../../../../images/gym/icon-abs.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-abs.png");
 }
 
 .training-background-1 {
-  background-image: url("../../../../images/gym/icon-step.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-step.png");
 }
 
 .training-background-2 {
-  background-image: url("../../../../images/gym/icon-fitball.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-fitball.png");
 }
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js
index cd9dd1b7bdd1..24f97380ef38 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/App.js
@@ -17,7 +17,7 @@ const App = () => (
     views={views}
     defaultCurrentView="month"
     defaultCurrentDate={currentDate}
-    height={600}
+    height={710}
     showAllDayPanel={true}
     firstDayOfWeek={1}
     startDayHour={8}
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js
index 61681cc2fceb..6f080eb30b8a 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/ResourceCell.js
@@ -16,7 +16,10 @@ const ResourceCell = (props) => {
       >
         <h2>{text}</h2>
       </div>
-      <div className="avatar">
+      <div
+        className="avatar"
+        title={text}
+      >
         <img
           src={avatar}
           alt={`${text} photo`}
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
index 1dd54ec77c44..2ae3c1170144 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/data.js
@@ -82,16 +82,16 @@ export const employees = [
   {
     text: 'John Heart',
     id: 1,
-    color: '#56ca85',
-    avatar: '../../../../images/gym/coach-man.png',
+    color: 'var(--background-color-1)',
+    avatar: '../../../../images/employees/19.png',
     age: 27,
     discipline: 'ABS, Fitball, StepFit',
   },
   {
-    text: 'Sandra Johnson',
+    text: 'Greta Sims',
     id: 2,
-    color: '#ff9747',
-    avatar: '../../../../images/gym/coach-woman.png',
+    color: 'var(--background-color-2)',
+    avatar: '../../../../images/employees/31.png',
     age: 25,
     discipline: 'ABS, Fitball, StepFit',
   },
diff --git a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
index aad79c347951..1f104cd1c477 100644
--- a/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/ReactJs/styles.css
@@ -1,35 +1,62 @@
+.dx-scheduler-group-header,
+.dx-scheduler-date-table-cell {
+  position: relative;
+}
+
+.dx-color-scheme-light,
+.dx-color-scheme-carmine,
+.dx-color-scheme-softblue,
+.dx-color-scheme-blue-light,
+.dx-color-scheme-saas-light,
+.dx-color-scheme-lime-light,
+.dx-color-scheme-orange-light,
+.dx-color-scheme-purple-light,
+.dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+.dx-color-scheme-dark,
+.dx-color-scheme-darkviolet,
+.dx-color-scheme-darkmoon,
+.dx-color-scheme-blue-dark,
+.dx-color-scheme-saas-dark,
+.dx-color-scheme-lime-dark,
+.dx-color-scheme-orange-dark,
+.dx-color-scheme-purple-dark,
+.dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+.dx-scheduler-header .dx-toolbar .dx-button,
+.dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
-}
-
-.dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
-}
-
-.dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+  color: var(--disabled-color) !important;
 }
 
-.dx-template-wrapper,
-.dx-scheduler-date-table-cell {
-  position: relative;
+.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 .dx-scheduler-date-table-cell .dx-template-wrapper {
@@ -40,11 +67,31 @@
 }
 
 .avatar {
-  width: 155px;
+  width: 124px;
   float: left;
   overflow: hidden;
   position: relative;
-  height: 125px;
+  height: 124px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.avatar img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+}
+
+.avatar[title="John Heart"] img {
+  top: 5px;
+  left: 3px;
+}
+
+.avatar[title="Greta Sims"] img {
+  top: 5px;
+  left: -7px;
 }
 
 .name {
@@ -55,20 +102,23 @@
 }
 
 .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
   color: #707070;
 }
 
@@ -77,35 +127,40 @@
 }
 
 .day-cell {
+  width: 100%;
   height: 100%;
   background-position: center center;
   background-repeat: no-repeat;
 }
 
+.dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 .employee-1 {
-  background-color: rgba(86, 202, 133, 0.1);
+  background-color: rgba(55, 126, 58, 0.08);
 }
 
 .employee-2 {
-  background-color: rgba(255, 151, 71, 0.1);
+  background-color: rgba(194, 81, 0, 0.08);
 }
 
 .employee-weekend-1 {
-  background-color: rgba(86, 202, 133, 0.2);
+  background-color: rgba(55, 126, 58, 0.12);
 }
 
 .employee-weekend-2 {
-  background-color: rgba(255, 151, 71, 0.2);
+  background-color: rgba(194, 81, 0, 0.12);
 }
 
 .training-background-0 {
-  background-image: url("../../../../images/gym/icon-abs.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-abs.png");
 }
 
 .training-background-1 {
-  background-image: url("../../../../images/gym/icon-step.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-step.png");
 }
 
 .training-background-2 {
-  background-image: url("../../../../images/gym/icon-fitball.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-fitball.png");
 }
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
index 64f32cf302b7..2bcfe477aed7 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/App.vue
@@ -5,7 +5,7 @@
     :current-date="currentDate"
     :views="views"
     :groups="groups"
-    :height="600"
+    :height="710"
     :show-all-day-panel="true"
     :first-day-of-week="1"
     :start-day-hour="8"
@@ -51,40 +51,71 @@ const dataSource = data;
   position: relative;
 }
 
+.dx-color-scheme-light,
+.dx-color-scheme-carmine,
+.dx-color-scheme-softblue,
+.dx-color-scheme-blue-light,
+.dx-color-scheme-saas-light,
+.dx-color-scheme-lime-light,
+.dx-color-scheme-orange-light,
+.dx-color-scheme-purple-light,
+.dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+.dx-color-scheme-dark,
+.dx-color-scheme-darkviolet,
+.dx-color-scheme-darkmoon,
+.dx-color-scheme-blue-dark,
+.dx-color-scheme-saas-dark,
+.dx-color-scheme-lime-dark,
+.dx-color-scheme-orange-dark,
+.dx-color-scheme-purple-dark,
+.dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+.dx-scheduler-header .dx-toolbar .dx-button,
+.dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
+  color: var(--disabled-color) !important;
 }
 
-.dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
+.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
 }
 
-.dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+.dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 .dx-scheduler-date-table-cell .dx-template-wrapper {
   position: absolute;
-  width: 100%;
   height: 100%;
+  width: 100%;
   padding-right: 6px;
 }
 
+.dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 </style>
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
index c1b31e2ec7aa..c3e656a2ff4f 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/DataCell.vue
@@ -43,36 +43,41 @@ function getCurrentTraining(date, employeeID) {
 </script>
 <style>
 .day-cell {
+  width: 100%;
   height: 100%;
   background-position: center center;
   background-repeat: no-repeat;
 }
 
+.dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 .employee-1 {
-  background-color: rgba(86, 202, 133, 0.1);
+  background-color: rgba(55, 126, 58, 0.08);
 }
 
 .employee-2 {
-  background-color: rgba(255, 151, 71, 0.1);
+  background-color: rgba(194, 81, 0, 0.08);
 }
 
 .employee-weekend-1 {
-  background-color: rgba(86, 202, 133, 0.2);
+  background-color: rgba(55, 126, 58, 0.12);
 }
 
 .employee-weekend-2 {
-  background-color: rgba(255, 151, 71, 0.2);
+  background-color: rgba(194, 81, 0, 0.12);
 }
 
 .training-background-0 {
-  background-image: url("../../../../images/gym/icon-abs.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-abs.png");
 }
 
 .training-background-1 {
-  background-image: url("../../../../images/gym/icon-step.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-step.png");
 }
 
 .training-background-2 {
-  background-image: url("../../../../images/gym/icon-fitball.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-fitball.png");
 }
 </style>
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
index 13e00db3a192..e2d3b3ca4ef8 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/ResourceCell.vue
@@ -6,7 +6,7 @@
     >
       <h2>{{ employee.text }}</h2>
     </div>
-    <div class="avatar">
+    <div class="avatar" :title="employee.text">
       <img :src="employee.data.avatar" :alt="`${employee.text} photo`">
     </div>
     <div
@@ -28,11 +28,31 @@ withDefaults(defineProps<{
 </script>
 <style>
 .avatar {
-  width: 155px;
+  width: 124px;
   float: left;
   overflow: hidden;
   position: relative;
-  height: 125px;
+  height: 124px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.avatar img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+}
+
+.avatar[title="John Heart"] img {
+  top: 5px;
+  left: 3px;
+}
+
+.avatar[title="Greta Sims"] img {
+  top: 5px;
+  left: -7px;
 }
 
 .name {
@@ -43,20 +63,23 @@ withDefaults(defineProps<{
 }
 
 .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
   color: #707070;
 }
 
diff --git a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
index 65c01a4bbf73..a4c5b52fa50b 100644
--- a/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
+++ b/apps/demos/Demos/Scheduler/Overview/Vue/data.ts
@@ -1,15 +1,15 @@
 export const employees = [{
   text: 'John Heart',
   id: 1,
-  color: '#56ca85',
-  avatar: '../../../../images/gym/coach-man.png',
+  color: 'var(--background-color-1)',
+  avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
-  text: 'Sandra Johnson',
+  text: 'Greta Sims',
   id: 2,
-  color: '#ff9747',
-  avatar: '../../../../images/gym/coach-woman.png',
+  color: 'var(--background-color-2)',
+  avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
 }];
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
index 2088202dcee2..d753b921c9d5 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/data.js
@@ -1,15 +1,15 @@
 const employees = [{
   text: 'John Heart',
   id: 1,
-  color: '#56ca85',
-  avatar: '../../../../images/gym/coach-man.png',
+  color: 'var(--background-color-1)',
+  avatar: '../../../../images/employees/19.png',
   age: 27,
   discipline: 'ABS, Fitball, StepFit',
 }, {
-  text: 'Sandra Johnson',
+  text: 'Greta Sims',
   id: 2,
-  color: '#ff9747',
-  avatar: '../../../../images/gym/coach-woman.png',
+  color: 'var(--background-color-2)',
+  avatar: '../../../../images/employees/31.png',
   age: 25,
   discipline: 'ABS, Fitball, StepFit',
 }];
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/index.js b/apps/demos/Demos/Scheduler/Overview/jQuery/index.js
index 3e367a6c7f94..bead8561ab16 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/index.js
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/index.js
@@ -9,7 +9,7 @@ $(() => {
     startDayHour: 8,
     endDayHour: 18,
     showAllDayPanel: false,
-    height: 600,
+    height: 710,
     groups: ['employeeID'],
     resources: [
       {
diff --git a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
index 4b73b8a54c2e..1f104cd1c477 100644
--- a/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
+++ b/apps/demos/Demos/Scheduler/Overview/jQuery/styles.css
@@ -3,33 +3,60 @@
   position: relative;
 }
 
+.dx-color-scheme-light,
+.dx-color-scheme-carmine,
+.dx-color-scheme-softblue,
+.dx-color-scheme-blue-light,
+.dx-color-scheme-saas-light,
+.dx-color-scheme-lime-light,
+.dx-color-scheme-orange-light,
+.dx-color-scheme-purple-light,
+.dx-color-scheme-teal-light {
+  --text-color-1: rgba(0, 0, 0, .6);
+  --text-color-2: rgba(255, 255, 255, 1);
+  --disabled-color: rgba(0, 0, 0, 0.38);
+  --background-color-1: rgba(50, 134, 56, 1);
+  --background-color-2: rgba(194, 81, 0, 1);
+}
+
+.dx-color-scheme-dark,
+.dx-color-scheme-darkviolet,
+.dx-color-scheme-darkmoon,
+.dx-color-scheme-blue-dark,
+.dx-color-scheme-saas-dark,
+.dx-color-scheme-lime-dark,
+.dx-color-scheme-orange-dark,
+.dx-color-scheme-purple-dark,
+.dx-color-scheme-teal-dark {
+  --text-color-1: rgba(255, 255, 255, 1);
+  --text-color-2: rgba(54, 54, 64, 1);
+  --disabled-color: rgba(255, 255, 255, 0.38);
+  --background-color-1: rgba(159, 213, 161, 1);
+  --background-color-2: rgba(255, 181, 127, 1);
+
+}
+
+.dx-scheduler-header .dx-toolbar .dx-button,
+.dx-scheduler-header .dx-toolbar .dx-button .dx-icon {
+  color: var(--text-color-1);
+}
+
 .dx-scheduler-date-table-other-month.dx-scheduler-date-table-cell {
   opacity: 1;
-  color: rgba(0, 0, 0, 0.3) !important;
-}
-
-.dx-color-scheme-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-carmine .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-softblue .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-light .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(0, 0, 0, .6);
-}
-
-.dx-color-scheme-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkviolet .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-darkmoon .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-blue-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-saas-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-lime-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-orange-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-purple-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell,
-.dx-color-scheme-teal-dark .dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
-  color: rgba(255, 255, 255, 1);
+  color: var(--disabled-color) !important;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-date-table-cell {
+  color: var(--text-color-1);
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment {
+  color: var(--text-color-2);
+  line-height: 22px;
+}
+
+.dx-scheduler-work-space-month .dx-scheduler-appointment .dx-scheduler-appointment-content {
+  padding-top: 0;
 }
 
 .dx-scheduler-date-table-cell .dx-template-wrapper {
@@ -40,11 +67,31 @@
 }
 
 .avatar {
-  width: 155px;
+  width: 124px;
   float: left;
   overflow: hidden;
   position: relative;
-  height: 125px;
+  height: 124px;
+  border: 1px solid rgba(0, 0, 0, 0.24);
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 1);
+}
+
+.avatar img {
+  position: relative;
+  width: 126px;
+  height: 130px;
+  object-fit: contain;
+}
+
+.avatar[title="John Heart"] img {
+  top: 5px;
+  left: 3px;
+}
+
+.avatar[title="Greta Sims"] img {
+  top: 5px;
+  left: -7px;
 }
 
 .name {
@@ -55,20 +102,23 @@
 }
 
 .name h2 {
-  color: #fff;
+  color: var(--text-color-2);
   font-size: 28px;
   text-align: left;
-  padding: 0 0 5px 175px;
+  padding: 0 0 0 170px;
   margin: 0;
+  height: 40px;
+  line-height: 40px;
 }
 
 .info {
   width: auto;
   text-align: left;
   height: 100%;
-  font-size: 11pt;
+  font-size: 14px;
+  line-height: 20px;
   font-weight: normal;
-  padding: 25px 20px;
+  padding: 25px 20px 25px 40px;
   color: #707070;
 }
 
@@ -83,30 +133,34 @@
   background-repeat: no-repeat;
 }
 
+.dx-scheduler-appointment {
+  color: rgba(255, 255, 255, 1);
+}
+
 .employee-1 {
-  background-color: rgba(86, 202, 133, 0.1);
+  background-color: rgba(55, 126, 58, 0.08);
 }
 
 .employee-2 {
-  background-color: rgba(255, 151, 71, 0.1);
+  background-color: rgba(194, 81, 0, 0.08);
 }
 
 .employee-weekend-1 {
-  background-color: rgba(86, 202, 133, 0.2);
+  background-color: rgba(55, 126, 58, 0.12);
 }
 
 .employee-weekend-2 {
-  background-color: rgba(255, 151, 71, 0.2);
+  background-color: rgba(194, 81, 0, 0.12);
 }
 
 .training-background-0 {
-  background-image: url("../../../../images/gym/icon-abs.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-abs.png");
 }
 
 .training-background-1 {
-  background-image: url("../../../../images/gym/icon-step.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-step.png");
 }
 
 .training-background-2 {
-  background-image: url("../../../../images/gym/icon-fitball.png");
+  background-image: url("../../../../images/Scheduler/Overview/icon-fitball.png");
 }
diff --git a/apps/demos/images/gym/icon-abs.png b/apps/demos/images/Scheduler/Overview/icon-abs.png
similarity index 100%
rename from apps/demos/images/gym/icon-abs.png
rename to apps/demos/images/Scheduler/Overview/icon-abs.png
diff --git a/apps/demos/images/gym/icon-fitball.png b/apps/demos/images/Scheduler/Overview/icon-fitball.png
similarity index 100%
rename from apps/demos/images/gym/icon-fitball.png
rename to apps/demos/images/Scheduler/Overview/icon-fitball.png
diff --git a/apps/demos/images/gym/icon-step.png b/apps/demos/images/Scheduler/Overview/icon-step.png
similarity index 100%
rename from apps/demos/images/gym/icon-step.png
rename to apps/demos/images/Scheduler/Overview/icon-step.png
diff --git a/apps/demos/images/gym/coach-man.png b/apps/demos/images/gym/coach-man.png
deleted file mode 100644
index 927523575b26..000000000000
Binary files a/apps/demos/images/gym/coach-man.png and /dev/null differ
diff --git a/apps/demos/images/gym/coach-woman.png b/apps/demos/images/gym/coach-woman.png
deleted file mode 100644
index 376a54e4afa8..000000000000
Binary files a/apps/demos/images/gym/coach-woman.png and /dev/null differ
diff --git a/apps/demos/testing/common.test.js b/apps/demos/testing/common.test.js
index d7c0b22b13eb..d71bf8f3cc76 100644
--- a/apps/demos/testing/common.test.js
+++ b/apps/demos/testing/common.test.js
@@ -133,6 +133,9 @@ const SKIPPED_TESTS = {
     ],
   },
   React: {
+    Common: [
+      { demo: 'ActionAndListsOverview', themes: [THEME.generic, THEME.material] },
+    ],
     Charts: [
       { demo: 'PiesWithEqualSize', themes: [THEME.material] },
       { demo: 'CustomAnnotations', themes: [THEME.material] },
@@ -179,6 +182,9 @@ const SKIPPED_TESTS = {
     ],
   },
   Vue: {
+    Common: [
+      { demo: 'ActionAndListsOverview', themes: [THEME.generic, THEME.material] },
+    ],
     Charts: [
       { demo: 'TilingAlgorithms', themes: [THEME.material] },
       { demo: 'ExportAndPrintingAPI', themes: [THEME.material] },
diff --git a/apps/demos/testing/etalons/Scheduler-Overview (fluent.blue.light).png b/apps/demos/testing/etalons/Scheduler-Overview (fluent.blue.light).png
index 0b0f23137f33..b77f80b6baf2 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Overview (fluent.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Overview (fluent.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Overview (material.blue.light).png b/apps/demos/testing/etalons/Scheduler-Overview (material.blue.light).png
index addd7df07e17..9e9518481fe4 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Overview (material.blue.light).png and b/apps/demos/testing/etalons/Scheduler-Overview (material.blue.light).png differ
diff --git a/apps/demos/testing/etalons/Scheduler-Overview.png b/apps/demos/testing/etalons/Scheduler-Overview.png
index 2d998fd200e0..e0d9643cd098 100644
Binary files a/apps/demos/testing/etalons/Scheduler-Overview.png and b/apps/demos/testing/etalons/Scheduler-Overview.png differ
diff --git a/apps/demos/testing/widgets/accordion/Accordion.test.js b/apps/demos/testing/widgets/accordion/Accordion.test.js
index 801b7c730154..6ce0213357d5 100644
--- a/apps/demos/testing/widgets/accordion/Accordion.test.js
+++ b/apps/demos/testing/widgets/accordion/Accordion.test.js
@@ -12,7 +12,7 @@ fixture('Accordion.Overview')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Accordion', 'Overview', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Accordion', 'Overview', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Custom Overview Appearance', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/charts/Crosshair.test.js b/apps/demos/testing/widgets/charts/Crosshair.test.js
index 4c331b4a3581..7ceae26e05cf 100644
--- a/apps/demos/testing/widgets/charts/Crosshair.test.js
+++ b/apps/demos/testing/widgets/charts/Crosshair.test.js
@@ -9,7 +9,7 @@ fixture('Charts.Crosshair')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Charts', 'Crosshair', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Charts', 'Crosshair', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Chart.Crosshair', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/charts/CustomAnnotationsDrag.test.js b/apps/demos/testing/widgets/charts/CustomAnnotationsDrag.test.js
index 5047f38cd986..b6e3703dcb41 100644
--- a/apps/demos/testing/widgets/charts/CustomAnnotationsDrag.test.js
+++ b/apps/demos/testing/widgets/charts/CustomAnnotationsDrag.test.js
@@ -9,7 +9,7 @@ fixture('Charts.CustomAnnotations')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Charts', 'CustomAnnotations', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Charts', 'CustomAnnotations', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('CustomAnnotations. Drag', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/charts/CustomLegendMarkers.test.js b/apps/demos/testing/widgets/charts/CustomLegendMarkers.test.js
index c9f53b6835a4..df1ed90f9d3a 100644
--- a/apps/demos/testing/widgets/charts/CustomLegendMarkers.test.js
+++ b/apps/demos/testing/widgets/charts/CustomLegendMarkers.test.js
@@ -9,7 +9,7 @@ fixture('Charts.CustomLegendMarkers')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Charts', 'CustomLegendMarkers', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Charts', 'CustomLegendMarkers', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('CustomLegendMarkers', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/charts/LoadDataOnDemand.test.js b/apps/demos/testing/widgets/charts/LoadDataOnDemand.test.js
index 11c09bde3c54..dbb191fcf4fd 100644
--- a/apps/demos/testing/widgets/charts/LoadDataOnDemand.test.js
+++ b/apps/demos/testing/widgets/charts/LoadDataOnDemand.test.js
@@ -9,7 +9,7 @@ fixture('Charts.LoadDataOnDemand')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Charts', 'LoadDataOnDemand', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Charts', 'LoadDataOnDemand', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('LoadDataOnDemand', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/charts/Overview.test.js b/apps/demos/testing/widgets/charts/Overview.test.js
index b34352ed7d61..ff5c016abd27 100644
--- a/apps/demos/testing/widgets/charts/Overview.test.js
+++ b/apps/demos/testing/widgets/charts/Overview.test.js
@@ -9,7 +9,7 @@ fixture('Charts.Overview')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Charts', 'Overview', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Charts', 'Overview', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Tooltip', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/charts/PieLabelsOverlapping.test.js b/apps/demos/testing/widgets/charts/PieLabelsOverlapping.test.js
index 981b7449547b..6239c31a4664 100644
--- a/apps/demos/testing/widgets/charts/PieLabelsOverlapping.test.js
+++ b/apps/demos/testing/widgets/charts/PieLabelsOverlapping.test.js
@@ -9,7 +9,7 @@ fixture('PieWithResolvedLabelOverlapping')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Charts', 'PieWithResolvedLabelOverlapping', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Charts', 'PieWithResolvedLabelOverlapping', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('PieWithResolvedLabelOverlapping', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
     const showSelectBoxItems = () => t.click($('.options .dx-dropdowneditor-input-wrapper input.dx-texteditor-input'));
diff --git a/apps/demos/testing/widgets/charts/ZoomingAndScrollingAPI.test.js b/apps/demos/testing/widgets/charts/ZoomingAndScrollingAPI.test.js
index 68d1cfd330e6..72ee7bbebfdf 100644
--- a/apps/demos/testing/widgets/charts/ZoomingAndScrollingAPI.test.js
+++ b/apps/demos/testing/widgets/charts/ZoomingAndScrollingAPI.test.js
@@ -9,7 +9,7 @@ fixture('Charts.ZoomingAndScrollingAPI')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Charts', 'ZoomingAndScrollingAPI', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Charts', 'ZoomingAndScrollingAPI', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('ZoomingAndScrollingAPI. RangeSelector drag', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/charts/ZoomingOnAreaSelection.test.js b/apps/demos/testing/widgets/charts/ZoomingOnAreaSelection.test.js
index cb50f5d08aef..bbe37eb89c99 100644
--- a/apps/demos/testing/widgets/charts/ZoomingOnAreaSelection.test.js
+++ b/apps/demos/testing/widgets/charts/ZoomingOnAreaSelection.test.js
@@ -9,7 +9,7 @@ fixture('Charts.ZoomingOnAreaSelection')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Charts', 'ZoomingOnAreaSelection', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Charts', 'ZoomingOnAreaSelection', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('ZoomingOnAreaSelection. Drag', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/common/EditorAppearanceVariants.test.js b/apps/demos/testing/widgets/common/EditorAppearanceVariants.test.js
index 8dd0cdd733ae..9069e4e768e8 100644
--- a/apps/demos/testing/widgets/common/EditorAppearanceVariants.test.js
+++ b/apps/demos/testing/widgets/common/EditorAppearanceVariants.test.js
@@ -10,7 +10,7 @@ fixture('Common.EditorAppearanceVariants')
     ctx.initialWindowSize = [900, 800];
   });
 
-runManualTest('Common', 'EditorAppearanceVariants', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Common', 'EditorAppearanceVariants', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('EditorAppearanceVariants', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/contextmenu/ContextMenu.test.js b/apps/demos/testing/widgets/contextmenu/ContextMenu.test.js
index dc28bc98ca11..61293813d248 100644
--- a/apps/demos/testing/widgets/contextmenu/ContextMenu.test.js
+++ b/apps/demos/testing/widgets/contextmenu/ContextMenu.test.js
@@ -10,7 +10,7 @@ fixture('ContextMenu.Templates')
 
 const IMAGE_ID = 'image';
 
-runManualTest('ContextMenu', 'Templates', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('ContextMenu', 'Templates', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Custom Template Appearance', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/contextmenu/ContextMenuScrolling.test.js b/apps/demos/testing/widgets/contextmenu/ContextMenuScrolling.test.js
index c8ce8407db9d..b6aad9af6543 100644
--- a/apps/demos/testing/widgets/contextmenu/ContextMenuScrolling.test.js
+++ b/apps/demos/testing/widgets/contextmenu/ContextMenuScrolling.test.js
@@ -12,7 +12,7 @@ fixture('ContextMenu.Scrolling')
 const TARGET_AREA = 'target-area';
 const MENU_ITEM_TEXT_CLASS = 'dx-menu-item-text';
 
-runManualTest('ContextMenu', 'Scrolling', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('ContextMenu', 'Scrolling', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Custom Template Appearance', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/contextmenu/ContextMenuShare.test.js b/apps/demos/testing/widgets/contextmenu/ContextMenuShare.test.js
index f59439f4c18b..f3cc19dbff68 100644
--- a/apps/demos/testing/widgets/contextmenu/ContextMenuShare.test.js
+++ b/apps/demos/testing/widgets/contextmenu/ContextMenuShare.test.js
@@ -12,7 +12,7 @@ fixture('ContextMenu.Templates')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('ContextMenu', 'Templates', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('ContextMenu', 'Templates', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Custom Template Share Appearance', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/AdvancedMasterDetailView.test.js b/apps/demos/testing/widgets/datagrid/AdvancedMasterDetailView.test.js
index 9f21543135c9..795faa126e46 100644
--- a/apps/demos/testing/widgets/datagrid/AdvancedMasterDetailView.test.js
+++ b/apps/demos/testing/widgets/datagrid/AdvancedMasterDetailView.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.AdvancedMasterDetailView')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'AdvancedMasterDetailView', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'AdvancedMasterDetailView', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('AdvancedMasterDetailView', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/AjaxRequest.test.js b/apps/demos/testing/widgets/datagrid/AjaxRequest.test.js
index ebbca03a82d0..d1040ff5f315 100644
--- a/apps/demos/testing/widgets/datagrid/AjaxRequest.test.js
+++ b/apps/demos/testing/widgets/datagrid/AjaxRequest.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.AjaxRequest')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'AjaxRequest', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'AjaxRequest', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('AjaxRequest', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/Appearance.test.js b/apps/demos/testing/widgets/datagrid/Appearance.test.js
index 94ef197131dc..f899e9864a5d 100644
--- a/apps/demos/testing/widgets/datagrid/Appearance.test.js
+++ b/apps/demos/testing/widgets/datagrid/Appearance.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.Appearance')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'Appearance', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'Appearance', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Appearance', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/BatchEditing.test.js b/apps/demos/testing/widgets/datagrid/BatchEditing.test.js
index cc7f24c5f792..da33cba6e643 100644
--- a/apps/demos/testing/widgets/datagrid/BatchEditing.test.js
+++ b/apps/demos/testing/widgets/datagrid/BatchEditing.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.BatchEditing')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'BatchEditing', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'BatchEditing', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('BatchEditing', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/BatchUpdateRequest.test.js b/apps/demos/testing/widgets/datagrid/BatchUpdateRequest.test.js
index bafbb5943683..610054faeeda 100644
--- a/apps/demos/testing/widgets/datagrid/BatchUpdateRequest.test.js
+++ b/apps/demos/testing/widgets/datagrid/BatchUpdateRequest.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.BatchUpdateRequest')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'BatchUpdateRequest', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'BatchUpdateRequest', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('BatchUpdateRequest', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/CellEditingAndEditingAPI.test.js b/apps/demos/testing/widgets/datagrid/CellEditingAndEditingAPI.test.js
index 5c5aef7c0001..6545046e81e6 100644
--- a/apps/demos/testing/widgets/datagrid/CellEditingAndEditingAPI.test.js
+++ b/apps/demos/testing/widgets/datagrid/CellEditingAndEditingAPI.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.CellEditingAndEditingAPI')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'CellEditingAndEditingAPI', ['jQuery', 'React', 'Vue'/* , 'Angular' */], (test) => {
+runManualTest('DataGrid', 'CellEditingAndEditingAPI', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('CellEditingAndEditingAPI', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/CustomNewRecordPosition.test.js b/apps/demos/testing/widgets/datagrid/CustomNewRecordPosition.test.js
index e20832fe33d0..a21094127a98 100644
--- a/apps/demos/testing/widgets/datagrid/CustomNewRecordPosition.test.js
+++ b/apps/demos/testing/widgets/datagrid/CustomNewRecordPosition.test.js
@@ -45,7 +45,7 @@ const newRowPositionTestTemplate = ({ newRowPosition, pageNumber }) => async (t)
     .ok(compareResults.errorMessages());
 };
 
-runManualTest('DataGrid', 'CustomNewRecordPosition', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'CustomNewRecordPosition', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   newRowPositionOptions.forEach((newRowPosition) => {
     test(`newRowPosition - ${newRowPosition}`, newRowPositionTestTemplate({
       newRowPosition,
diff --git a/apps/demos/testing/widgets/datagrid/DataValidation.test.js b/apps/demos/testing/widgets/datagrid/DataValidation.test.js
index 4aa965292238..b228312f835b 100644
--- a/apps/demos/testing/widgets/datagrid/DataValidation.test.js
+++ b/apps/demos/testing/widgets/datagrid/DataValidation.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.DataValidation')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'DataValidation', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'DataValidation', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('DataValidation', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/EditStateManagement.test.js b/apps/demos/testing/widgets/datagrid/EditStateManagement.test.js
index 2dface0b6ab9..fdd110c5fa1a 100644
--- a/apps/demos/testing/widgets/datagrid/EditStateManagement.test.js
+++ b/apps/demos/testing/widgets/datagrid/EditStateManagement.test.js
@@ -98,7 +98,7 @@ runManualTest('DataGrid', 'EditStateManagement', ['jQuery', 'React', 'Vue', 'Ang
   });
 });
 
-runManualTest('DataGrid', 'EditStateManagement', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'EditStateManagement', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('EditStateManagement - remove row', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/Filtering.test.js b/apps/demos/testing/widgets/datagrid/Filtering.test.js
index e49a6a3fd31d..f3b0ab28dc3f 100644
--- a/apps/demos/testing/widgets/datagrid/Filtering.test.js
+++ b/apps/demos/testing/widgets/datagrid/Filtering.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.Filtering')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'Filtering', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'Filtering', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Filtering', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/FilteringAPI.test.js b/apps/demos/testing/widgets/datagrid/FilteringAPI.test.js
index 582926584b69..3674ede79a54 100644
--- a/apps/demos/testing/widgets/datagrid/FilteringAPI.test.js
+++ b/apps/demos/testing/widgets/datagrid/FilteringAPI.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.FilteringAPI')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'FilteringAPI', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'FilteringAPI', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('FilteringAPI', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/GroupSummaries.test.js b/apps/demos/testing/widgets/datagrid/GroupSummaries.test.js
index 4c3390b2be20..7421aad16f3e 100644
--- a/apps/demos/testing/widgets/datagrid/GroupSummaries.test.js
+++ b/apps/demos/testing/widgets/datagrid/GroupSummaries.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.GroupSummaries')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'GroupSummaries', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'GroupSummaries', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('GroupSummaries', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/InfiniteScrolling.test.js b/apps/demos/testing/widgets/datagrid/InfiniteScrolling.test.js
index 6c4ef75c8a4e..8691203a72d2 100644
--- a/apps/demos/testing/widgets/datagrid/InfiniteScrolling.test.js
+++ b/apps/demos/testing/widgets/datagrid/InfiniteScrolling.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.InfiniteScrolling')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'InfiniteScrolling', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'InfiniteScrolling', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('InfiniteScrolling', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/MasterDetailAPI.test.js b/apps/demos/testing/widgets/datagrid/MasterDetailAPI.test.js
index 42fbdbf2d919..4363f443c3cd 100644
--- a/apps/demos/testing/widgets/datagrid/MasterDetailAPI.test.js
+++ b/apps/demos/testing/widgets/datagrid/MasterDetailAPI.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.MasterDetailAPI')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'MasterDetailAPI', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'MasterDetailAPI', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('MasterDetailAPI', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/MasterDetailView.test.js b/apps/demos/testing/widgets/datagrid/MasterDetailView.test.js
index ea1b35eca10e..82d2acaf4254 100644
--- a/apps/demos/testing/widgets/datagrid/MasterDetailView.test.js
+++ b/apps/demos/testing/widgets/datagrid/MasterDetailView.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.MasterDetailView')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'MasterDetailView', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'MasterDetailView', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('MasterDetailView', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/MultipleRecordSelectionAPI.test.js b/apps/demos/testing/widgets/datagrid/MultipleRecordSelectionAPI.test.js
index 1ceff131df9a..88097fa1de8b 100644
--- a/apps/demos/testing/widgets/datagrid/MultipleRecordSelectionAPI.test.js
+++ b/apps/demos/testing/widgets/datagrid/MultipleRecordSelectionAPI.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.MultipleRecordSelectionAPI')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'MultipleRecordSelectionAPI', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'MultipleRecordSelectionAPI', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('MultipleRecordSelectionAPI', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/MultipleSorting.test.js b/apps/demos/testing/widgets/datagrid/MultipleSorting.test.js
index 09725ce596a8..837cb867697a 100644
--- a/apps/demos/testing/widgets/datagrid/MultipleSorting.test.js
+++ b/apps/demos/testing/widgets/datagrid/MultipleSorting.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.MultipleSorting')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'MultipleSorting', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'MultipleSorting', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('MultipleSorting', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/OdataService.test.js b/apps/demos/testing/widgets/datagrid/OdataService.test.js
index a235119a903b..cd4f5d132830 100644
--- a/apps/demos/testing/widgets/datagrid/OdataService.test.js
+++ b/apps/demos/testing/widgets/datagrid/OdataService.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.OdataService')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'OdataService', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'OdataService', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('OdataService', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/RecordGrouping.test.js b/apps/demos/testing/widgets/datagrid/RecordGrouping.test.js
index b565d7ed0be7..1b2a090fea88 100644
--- a/apps/demos/testing/widgets/datagrid/RecordGrouping.test.js
+++ b/apps/demos/testing/widgets/datagrid/RecordGrouping.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.RecordGrouping')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'RecordGrouping', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'RecordGrouping', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('RecordGrouping', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/RecordPaging.test.js b/apps/demos/testing/widgets/datagrid/RecordPaging.test.js
index c003e1f17108..763282039bb7 100644
--- a/apps/demos/testing/widgets/datagrid/RecordPaging.test.js
+++ b/apps/demos/testing/widgets/datagrid/RecordPaging.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.RecordPaging')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'RecordPaging', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'RecordPaging', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('RecordPaging', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/RowEditingAndEditingEvents.test.js b/apps/demos/testing/widgets/datagrid/RowEditingAndEditingEvents.test.js
index 78a34f49fe2b..9622017c6ad4 100644
--- a/apps/demos/testing/widgets/datagrid/RowEditingAndEditingEvents.test.js
+++ b/apps/demos/testing/widgets/datagrid/RowEditingAndEditingEvents.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.RowEditingAndEditingEvents')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'RowEditingAndEditingEvents', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'RowEditingAndEditingEvents', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('RowEditingAndEditingEvents', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/RowSelection.test.js b/apps/demos/testing/widgets/datagrid/RowSelection.test.js
index 3b86575edba2..edc6218d7128 100644
--- a/apps/demos/testing/widgets/datagrid/RowSelection.test.js
+++ b/apps/demos/testing/widgets/datagrid/RowSelection.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.RowSelection')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'RowSelection', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'RowSelection', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('RowSelection', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/SimpleArray.test.js b/apps/demos/testing/widgets/datagrid/SimpleArray.test.js
index 63dc37c62323..99c4757343d1 100644
--- a/apps/demos/testing/widgets/datagrid/SimpleArray.test.js
+++ b/apps/demos/testing/widgets/datagrid/SimpleArray.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.SimpleArray')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'SimpleArray', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'SimpleArray', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('SimpleArray', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/datagrid/VirtualScrolling.test.js b/apps/demos/testing/widgets/datagrid/VirtualScrolling.test.js
index a8b5c4ea0c44..3af409d6ada2 100644
--- a/apps/demos/testing/widgets/datagrid/VirtualScrolling.test.js
+++ b/apps/demos/testing/widgets/datagrid/VirtualScrolling.test.js
@@ -9,7 +9,7 @@ fixture('DataGrid.VirtualScrolling')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DataGrid', 'VirtualScrolling', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DataGrid', 'VirtualScrolling', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('VirtualScrolling', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/dropdownbox/MultipleSelection.test.js b/apps/demos/testing/widgets/dropdownbox/MultipleSelection.test.js
index 1e82319e58a6..d04c71eedc0b 100644
--- a/apps/demos/testing/widgets/dropdownbox/MultipleSelection.test.js
+++ b/apps/demos/testing/widgets/dropdownbox/MultipleSelection.test.js
@@ -9,7 +9,7 @@ fixture('DropDownBox.MultipleSelection')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DropDownBox', 'MultipleSelection', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DropDownBox', 'MultipleSelection', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('MultipleSelection', async (t) => {
     const DROP_DOWN_BOX_CLASS = 'dx-dropdownbox';
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
diff --git a/apps/demos/testing/widgets/dropdownbutton/DropDownButton.test.js b/apps/demos/testing/widgets/dropdownbutton/DropDownButton.test.js
index 8901b4a5ab7d..d439a1a3a529 100644
--- a/apps/demos/testing/widgets/dropdownbutton/DropDownButton.test.js
+++ b/apps/demos/testing/widgets/dropdownbutton/DropDownButton.test.js
@@ -12,7 +12,7 @@ fixture('DropDownButton.Overview')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('DropDownButton', 'Overview', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('DropDownButton', 'Overview', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Custom Overview Appearance', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/gauges/GaugeVariableNumberBars.test.js b/apps/demos/testing/widgets/gauges/GaugeVariableNumberBars.test.js
index d9cb8500282e..8c0f5178e5aa 100644
--- a/apps/demos/testing/widgets/gauges/GaugeVariableNumberBars.test.js
+++ b/apps/demos/testing/widgets/gauges/GaugeVariableNumberBars.test.js
@@ -9,7 +9,7 @@ fixture('Gauges.VariableNumberOfBars')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Gauges', 'VariableNumberOfBars', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Gauges', 'VariableNumberOfBars', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Bars visibility changing', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/list/ItemDragging.test.js b/apps/demos/testing/widgets/list/ItemDragging.test.js
index 5253b44d406d..21de9c783565 100644
--- a/apps/demos/testing/widgets/list/ItemDragging.test.js
+++ b/apps/demos/testing/widgets/list/ItemDragging.test.js
@@ -9,7 +9,7 @@ fixture('List.ItemDragging')
     ctx.initialWindowSize = [900, WINDOW_WIDTH];
   });
 
-runManualTest('List', 'ItemDragging', ['jQuery', 'React', 'Vue'/* , 'Angular' */], (test) => {
+runManualTest('List', 'ItemDragging', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('ItemDragging', async (t) => {
     const REORDER_HANDLE_CLASS = 'dx-list-reorder-handle';
     const LIST_CLASS = 'dx-list';
diff --git a/apps/demos/testing/widgets/lookup/Lookup.test.js b/apps/demos/testing/widgets/lookup/Lookup.test.js
index f254486fb1b7..af6a6de9b6da 100644
--- a/apps/demos/testing/widgets/lookup/Lookup.test.js
+++ b/apps/demos/testing/widgets/lookup/Lookup.test.js
@@ -11,7 +11,7 @@ fixture('Lookup.Basics')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Lookup', 'Basics', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Lookup', 'Basics', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Custom Lookup Appearance', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/pivotgrid/IntegratedFieldChooser.test.js b/apps/demos/testing/widgets/pivotgrid/IntegratedFieldChooser.test.js
index b54370a73849..d91c7d5a229e 100644
--- a/apps/demos/testing/widgets/pivotgrid/IntegratedFieldChooser.test.js
+++ b/apps/demos/testing/widgets/pivotgrid/IntegratedFieldChooser.test.js
@@ -14,7 +14,7 @@ fixture('PivotGrid.IntegratedFieldChooser')
     ctx.initialWindowSize = [900, 800];
   });
 
-runManualTest('PivotGrid', 'IntegratedFieldChooser', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('PivotGrid', 'IntegratedFieldChooser', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('IntegratedFieldChooser', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/popup/Scrolling.test.js b/apps/demos/testing/widgets/popup/Scrolling.test.js
index 11e49df7209d..2578f6a61a84 100644
--- a/apps/demos/testing/widgets/popup/Scrolling.test.js
+++ b/apps/demos/testing/widgets/popup/Scrolling.test.js
@@ -14,7 +14,7 @@ fixture('Popup.Scrolling')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Popup', 'Scrolling', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Popup', 'Scrolling', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Scrolling', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/scheduler/cellTemplates.test.js b/apps/demos/testing/widgets/scheduler/cellTemplates.test.js
index 3f40600bb243..3b81161b16ef 100644
--- a/apps/demos/testing/widgets/scheduler/cellTemplates.test.js
+++ b/apps/demos/testing/widgets/scheduler/cellTemplates.test.js
@@ -9,7 +9,7 @@ fixture('Scheduler.CellTemplates')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Scheduler', 'CellTemplates', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Scheduler', 'CellTemplates', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('CellTemplates', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/scheduler/customDragAndDrop.test.js b/apps/demos/testing/widgets/scheduler/customDragAndDrop.test.js
index 76d7852c8aa7..9fe89c81cb7d 100644
--- a/apps/demos/testing/widgets/scheduler/customDragAndDrop.test.js
+++ b/apps/demos/testing/widgets/scheduler/customDragAndDrop.test.js
@@ -28,7 +28,7 @@ fixture('Scheduler.CustomDragAndDrop')
   fromName,
   toName,
 ]) => {
-  runManualTest('Scheduler', 'CustomDragAndDrop', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+  runManualTest('Scheduler', 'CustomDragAndDrop', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
     test(`Should drag-and-drop from ${fromName} to ${toName}`, async (t) => {
       const {
         takeScreenshot,
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (fluent.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (fluent.blue.light).png
index 58681ffb0088..2dc0af17afbc 100644
Binary files a/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (fluent.blue.light).png and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (fluent.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (material.blue.light).png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (material.blue.light).png
index baeb103df86c..29163b12aa46 100644
Binary files a/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (material.blue.light).png and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection (material.blue.light).png differ
diff --git a/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection.png b/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection.png
index da60e3c7c171..a136bce0faa7 100644
Binary files a/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection.png and b/apps/demos/testing/widgets/scheduler/etalons/scheduler_overview_selection.png differ
diff --git a/apps/demos/testing/widgets/scheduler/resources.test.js b/apps/demos/testing/widgets/scheduler/resources.test.js
index a2b15e168b62..2ace99dc7c52 100644
--- a/apps/demos/testing/widgets/scheduler/resources.test.js
+++ b/apps/demos/testing/widgets/scheduler/resources.test.js
@@ -8,7 +8,7 @@ fixture('Scheduler.Resources')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Scheduler', 'Resources', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Scheduler', 'Resources', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Resource fields shouldn\'t empty', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/scheduler/templates.test.js b/apps/demos/testing/widgets/scheduler/templates.test.js
index 503fc47c4bc6..3375c2a2e6be 100644
--- a/apps/demos/testing/widgets/scheduler/templates.test.js
+++ b/apps/demos/testing/widgets/scheduler/templates.test.js
@@ -11,7 +11,7 @@ fixture('Scheduler.Overview')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Scheduler', 'Overview', ['jQuery'/* , 'React' */], (test) => {
+runManualTest('Scheduler', 'Overview', ['jQuery', 'React'], (test) => {
   test('Overview cell selection (T1041269)', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/sortable/kanban.test.js b/apps/demos/testing/widgets/sortable/kanban.test.js
index 3816ed80a15f..d02fdc4600d6 100644
--- a/apps/demos/testing/widgets/sortable/kanban.test.js
+++ b/apps/demos/testing/widgets/sortable/kanban.test.js
@@ -14,7 +14,7 @@ fixture('Sortable.Kanban')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Sortable', 'Kanban', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Sortable', 'Kanban', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Drag-n-drop kanban columns', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
@@ -26,7 +26,7 @@ runManualTest('Sortable', 'Kanban', ['jQuery'/* , 'React', 'Vue', 'Angular' */],
   });
 });
 
-runManualTest('Sortable', 'Kanban', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Sortable', 'Kanban', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Drag-n-drop card inside the same column', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
@@ -38,7 +38,7 @@ runManualTest('Sortable', 'Kanban', ['jQuery'/* , 'React', 'Vue', 'Angular' */],
   });
 });
 
-runManualTest('Sortable', 'Kanban', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Sortable', 'Kanban', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Drag-n-drop card to a different column', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/splitter/Overview.test.js b/apps/demos/testing/widgets/splitter/Overview.test.js
index b94dbbf8f0dc..de1a25c4f404 100644
--- a/apps/demos/testing/widgets/splitter/Overview.test.js
+++ b/apps/demos/testing/widgets/splitter/Overview.test.js
@@ -11,7 +11,7 @@ fixture('Splitter.Overview')
     ctx.initialWindowSize = [900, 800];
   });
 
-runManualTest('Splitter', 'Overview', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Splitter', 'Overview', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Correct Focus styles on every Item Panes', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/tabpanel/Overview.test.js b/apps/demos/testing/widgets/tabpanel/Overview.test.js
index a92c59f0d02f..fefa51d1c7e8 100644
--- a/apps/demos/testing/widgets/tabpanel/Overview.test.js
+++ b/apps/demos/testing/widgets/tabpanel/Overview.test.js
@@ -14,7 +14,7 @@ fixture('TabPanel.Overview')
     ctx.initialWindowSize = [900, 1200];
   });
 
-runManualTest('TabPanel', 'Overview', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('TabPanel', 'Overview', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Overview', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/tabs/Overview.test.js b/apps/demos/testing/widgets/tabs/Overview.test.js
index 01b45da93f16..8bc5928c4b3e 100644
--- a/apps/demos/testing/widgets/tabs/Overview.test.js
+++ b/apps/demos/testing/widgets/tabs/Overview.test.js
@@ -15,7 +15,7 @@ fixture('Tabs.Overview')
     ctx.initialWindowSize = [900, 1200];
   });
 
-runManualTest('Tabs', 'Overview', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Tabs', 'Overview', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Overview', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/toolbar/Adaptability.test.js b/apps/demos/testing/widgets/toolbar/Adaptability.test.js
index 91a627886c22..bd34ecabb6c7 100644
--- a/apps/demos/testing/widgets/toolbar/Adaptability.test.js
+++ b/apps/demos/testing/widgets/toolbar/Adaptability.test.js
@@ -15,7 +15,7 @@ fixture('Toolbar.Adaptability')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('Toolbar', 'Adaptability', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('Toolbar', 'Adaptability', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('Adaptability', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
 
diff --git a/apps/demos/testing/widgets/vectormap/VectorMapZooming.test.js b/apps/demos/testing/widgets/vectormap/VectorMapZooming.test.js
index 278ead9aa8af..b6e4d736ca59 100644
--- a/apps/demos/testing/widgets/vectormap/VectorMapZooming.test.js
+++ b/apps/demos/testing/widgets/vectormap/VectorMapZooming.test.js
@@ -9,7 +9,7 @@ fixture('VectorMap.DynamicViewport')
     ctx.initialWindowSize = [900, 600];
   });
 
-runManualTest('VectorMap', 'DynamicViewport', ['jQuery'/* , 'React', 'Vue', 'Angular' */], (test) => {
+runManualTest('VectorMap', 'DynamicViewport', ['jQuery', 'React', 'Vue', 'Angular'], (test) => {
   test('VectorMap.DynamicViewport', async (t) => {
     const { takeScreenshot, compareResults } = createScreenshotsComparer(t);
     const zoomButton = $($('#vector-map .dxm-control-bar g').nth(1)).find('circle').nth(0);
diff --git a/apps/demos/utils/visual-tests/matrix-test-helper.js b/apps/demos/utils/visual-tests/matrix-test-helper.js
index d1ca6e9a2fc1..2890237c0b4c 100644
--- a/apps/demos/utils/visual-tests/matrix-test-helper.js
+++ b/apps/demos/utils/visual-tests/matrix-test-helper.js
@@ -187,25 +187,65 @@ const SKIPPED_TESTS = {
       { demo: 'TaskTemplate', themes: [THEME.generic, THEME.material, THEME.fluent] },
       { demo: 'Validation', themes: [THEME.generic, THEME.material, THEME.fluent] },
     ],
-    Pagination: ['Overview'],
   },
   Angular: {
+    Accordion: [
+      { demo: 'Overview', themes: [THEME.generic, THEME.material, THEME.fluent] },
+    ],
+    Common: [
+      { demo: 'EditorAppearanceVariants', themes: [THEME.generic, THEME.material, THEME.fluent] },
+    ],
+    DropDownButton: [
+      { demo: 'Overview', themes: [THEME.material] },
+    ],
     Charts: [
       { demo: 'Overview', themes: [THEME.material] },
-      { demo: 'ZoomingAndScrollingAPI', themes: [THEME.material] },
+      { demo: 'Crosshair', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'CustomAnnotations', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'LoadDataOnDemand', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'CustomLegendMarkers', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'PieWithResolvedLabelOverlapping', themes: [THEME.generic, THEME.material] },
+      { demo: 'ZoomingAndScrollingAPI', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'ZoomingOnAreaSelection', themes: [THEME.generic, THEME.material, THEME.fluent] },
       { demo: 'TooltipHTMLSupport', themes: [THEME.material] },
     ],
     VectorMap: [
       { demo: 'TooltipHTMLSupport', themes: [THEME.material] },
     ],
+    DropDownBox: [
+      { demo: 'MultipleSelection', themes: [THEME.generic, THEME.material] },
+    ],
+    List: [
+      { demo: 'ItemDragging', themes: [THEME.generic] },
+    ],
+    Gauges: [
+      { demo: 'VariableNumberOfBars', themes: [THEME.material, THEME.fluent] },
+    ],
     DataGrid: [
-      { demo: 'BatchEditing', themes: [THEME.fluent] },
-      { demo: 'CustomNewRecordPosition', themes: [THEME.fluent] },
-      { demo: 'CellEditingAndEditingAPI', themes: [THEME.fluent, THEME.material] },
-      { demo: 'MultipleRecordSelectionAPI', themes: [THEME.fluent, THEME.material] },
-      { demo: 'RemoteGrouping', themes: [THEME.fluent, THEME.material] },
-      { demo: 'RowEditingAndEditingEvents', themes: [THEME.fluent, THEME.material] },
-      { demo: 'EditStateManagement', themes: [THEME.fluent, THEME.material] },
+      { demo: 'Appearance', themes: [THEME.generic, THEME.material] },
+      { demo: 'AdvancedMasterDetailView', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'BatchEditing', themes: [THEME.material, THEME.fluent] },
+      { demo: 'AjaxRequest', themes: [THEME.generic, THEME.material, THEME.fluent ] },
+      { demo: 'InfiniteScrolling', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'MasterDetailView', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'SimpleArray', themes: [THEME.generic, THEME.material] },
+      { demo: 'MasterDetailAPI', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'DataValidation', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'MultipleSorting', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'OdataService', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'CustomNewRecordPosition', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'Filtering', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'FilteringAPI', themes: [THEME.generic, THEME.material, THEME.fluent] },
+      { demo: 'GroupSummaries', themes: [THEME.material, THEME.fluent ] },
+      { demo: 'RecordPaging', themes: [THEME.material, THEME.fluent] },
+      { demo: 'RowSelection', themes: [THEME.material, THEME.fluent] },
+      { demo: 'MultipleSelection', themes: [THEME.material, THEME.fluent] },
+      { demo: 'CellEditingAndEditingAPI', themes: [THEME.generic, THEME.fluent, THEME.material] },
+      { demo: 'MultipleRecordSelectionAPI', themes: [THEME.generic, THEME.fluent, THEME.material] },
+      { demo: 'RemoteGrouping', themes: [THEME.generic, THEME.fluent, THEME.material] },
+      { demo: 'RowEditingAndEditingEvents', themes: [THEME.generic, THEME.fluent, THEME.material] },
+      { demo: 'EditStateManagement', themes: [THEME.generic, THEME.fluent, THEME.material] },
+      { demo: 'RecordGrouping', themes: [THEME.material, THEME.fluent] },
     ],
     Form: [
       'CustomizeItem',
@@ -213,8 +253,21 @@ const SKIPPED_TESTS = {
     ],
     Scheduler: [
       'CustomDragAndDrop',
+      { demo: 'Resources', themes: [THEME.fluent] },
+      { demo: 'CellTemplates', themes: [THEME.generic] },
+    ],
+    Popup: [
+      { demo: 'Scrolling', themes: [THEME.generic, THEME.material, THEME.fluent] },
+    ],
+    Sortable: [
+      { demo: 'Kanban', themes: [THEME.generic, THEME.material, THEME.fluent] },
     ],
-    Pagination: [{ demo: 'Overview', themes: [THEME.generic, THEME.material, THEME.fluent] }],
+    PivotGrid: [
+      { demo: 'IntegratedFieldChooser', themes: [THEME.generic, THEME.material, THEME.fluent] },
+    ],
+    Toolbar: [
+      { demo: 'Adaptability', themes: [THEME.generic, THEME.material, THEME.fluent] },
+    ]
   },
   Vue: {
     Charts: [
@@ -232,15 +285,17 @@ const SKIPPED_TESTS = {
       { demo: 'CellEditingAndEditingAPI', themes: [THEME.fluent, THEME.material] },
       { demo: 'MultipleRecordSelectionAPI', themes: [THEME.fluent, THEME.material] },
       { demo: 'RemoteGrouping', themes: [THEME.fluent, THEME.material] },
-      { demo: 'RowEditingAndEditingEvents', themes: [THEME.fluent, THEME.material] },
-      { demo: 'EditStateManagement', themes: [THEME.fluent, THEME.material] },
+      { demo: 'RowEditingAndEditingEvents', themes: [THEME.generic, THEME.fluent, THEME.material] },
+      { demo: 'EditStateManagement', themes: [THEME.generic, THEME.fluent, THEME.material] },
       { demo: 'FilteringAPI', themes: [THEME.material] },
       'StatePersistence',
     ],
     Drawer: [
       { demo: 'TopOrBottomPosition', themes: [THEME.material] },
     ],
-    Pagination: ['Overview'],
+    Toolbar: [
+      { demo: 'Adaptability', themes: [THEME.generic, THEME.material, THEME.fluent] },
+    ]
   },
   React: {
     Charts: [
@@ -253,8 +308,8 @@ const SKIPPED_TESTS = {
       { demo: 'CellEditingAndEditingAPI', themes: [THEME.fluent, THEME.material] },
       { demo: 'MultipleRecordSelectionAPI', themes: [THEME.fluent, THEME.material] },
       { demo: 'RemoteGrouping', themes: [THEME.fluent, THEME.material] },
-      { demo: 'RowEditingAndEditingEvents', themes: [THEME.fluent, THEME.material] },
-      { demo: 'EditStateManagement', themes: [THEME.fluent, THEME.material] },
+      { demo: 'RowEditingAndEditingEvents', themes: [THEME.generic, THEME.fluent, THEME.material] },
+      { demo: 'EditStateManagement', themes: [THEME.generic, THEME.fluent, THEME.material] },
       { demo: 'Filtering', themes: [THEME.fluent, THEME.material] },
       { demo: 'RecordGrouping', themes: [THEME.material] },
     ],
@@ -262,7 +317,6 @@ const SKIPPED_TESTS = {
       { demo: 'Overview', themes: [THEME.fluent, THEME.material] },
       { demo: 'Templates', themes: [THEME.fluent, THEME.material] },
     ],
-    Pagination: ['Overview'],
   },
 };
 
diff --git a/packages/devextreme/js/__internal/core/r1/config_provider.tsx b/packages/devextreme/js/__internal/core/r1/config_provider.tsx
index 8ffff42a3d93..9c1607665c9a 100644
--- a/packages/devextreme/js/__internal/core/r1/config_provider.tsx
+++ b/packages/devextreme/js/__internal/core/r1/config_provider.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { BaseInfernoComponent } from '@devextreme/runtime/inferno';
 
@@ -10,20 +11,28 @@ export interface ConfigProviderProps {
 
 export const ConfigProviderDefaultProps = {};
 export class ConfigProvider extends BaseInfernoComponent<ConfigProviderProps> {
-  public state: any = {};
+  private readonly __getterCache: any = {};
 
-  getConfig(): ConfigContextValue {
-    return {
+  get config(): ConfigContextValue {
+    if (this.__getterCache.config !== undefined) {
+      return this.__getterCache.config;
+    }
+    // eslint-disable-next-line no-return-assign
+    return this.__getterCache.config = ((): any => ({
       rtlEnabled: this.props.rtlEnabled,
-    };
+    }))();
+  }
+
+  componentWillUpdate(nextProps: ConfigProviderProps): void {
+    if (this.props.rtlEnabled !== nextProps.rtlEnabled) {
+      this.__getterCache.config = undefined;
+    }
   }
 
   getChildContext(): any {
     return {
       ...this.context,
-      ...{
-        [ConfigContext.id]: this.getConfig() || ConfigContext.defaultValue,
-      },
+      [ConfigContext.id]: this.config || ConfigContext.defaultValue,
     };
   }
 
diff --git a/packages/devextreme/js/__internal/core/r1/template_wrapper.ts b/packages/devextreme/js/__internal/core/r1/template_wrapper.ts
index 6246ab9f5694..7abbb47d241c 100644
--- a/packages/devextreme/js/__internal/core/r1/template_wrapper.ts
+++ b/packages/devextreme/js/__internal/core/r1/template_wrapper.ts
@@ -160,6 +160,10 @@ export class TemplateWrapper extends InfernoComponent<TemplateWrapperProps> {
       return true;
     }
 
+    if (!isDefined(data) || !isDefined(nextData)) {
+      return model !== nextModel;
+    }
+
     return !equalityComparer(data, nextData);
   }
 
diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/button.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/button.tests.js
index 57114da29bf7..812ed5a8a285 100644
--- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/button.tests.js
+++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/button.tests.js
@@ -60,6 +60,17 @@ QUnit.module('Button', function() {
             assert.ok(this.element.hasClass(BUTTON_HAS_TEXT_CLASS, 'button with text has text class'));
         });
 
+        QUnit.test('no error should be raised when hovering if svg icon is used (T1266442)', function(assert) {
+            this.instance.option('icon', '<svg></svg>');
+            try {
+                this.element.trigger('dxhoverstart');
+            } catch(e) {
+                assert.ok(false, `error is handled: ${e}`);
+            }
+
+            assert.ok(this.element.hasClass('dx-state-hover'), 'hovered class is added');
+        });
+
         QUnit.test('onClick', function(assert) {
             const clickHandler = sinon.spy();