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/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/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