diff --git a/packages/dx-react-scheduler-demos/src/demo-data/tasks.js b/packages/dx-react-scheduler-demos/src/demo-data/tasks.js
index 6f7dec4a34..57db75e52d 100644
--- a/packages/dx-react-scheduler-demos/src/demo-data/tasks.js
+++ b/packages/dx-react-scheduler-demos/src/demo-data/tasks.js
@@ -213,18 +213,21 @@ export const priorities = [
     title: 'Low',
     color: '#81c784',
     activeColor: '#43a047',
+    shortTitle: 'L',
   },
   {
     id: 2,
     title: 'Medium',
     color: '#4fc3f7',
     activeColor: '#039be5',
+    shortTitle: 'M',
   },
   {
     id: 3,
     title: 'High',
     color: '#ff8a65',
     activeColor: '#f4511e',
+    shortTitle: 'H',
   },
 ];
 
diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx
index 86c900462e..59984d3d55 100644
--- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx
+++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-appearance-customization/material-ui/demo.jsx
@@ -37,6 +37,8 @@ const filterTasks = (items, priorityId) => items.filter(task => (
   !priorityId || task.priorityId === priorityId
 ));
 const getPriorityById = priorityId => priorities.find(({ id }) => id === priorityId).title;
+const getShortPriorityById = priorityId => priorities
+  .find(({ id }) => id === priorityId).shortTitle;
 
 const createClassesByPriorityId = (
   priorityId, classes,
@@ -71,6 +73,11 @@ const styles = theme => ({
   prioritySelector: {
     marginLeft: theme.spacing(2),
     minWidth: 140,
+    '@media (max-width: 500px)': {
+      minWidth: 0,
+      fontSize: '0.75rem',
+      marginLeft: theme.spacing(0.5),
+    },
   },
   prioritySelectorItem: {
     display: 'flex',
@@ -83,6 +90,16 @@ const styles = theme => ({
     marginRight: theme.spacing(2),
     display: 'inline-block',
   },
+  priorityText: {
+    '@media (max-width: 500px)': {
+      display: 'none',
+    },
+  },
+  priorityShortText: {
+    '@media (min-width: 500px)': {
+      display: 'none',
+    },
+  },
   defaultBullet: {
     background: theme.palette.divider,
   },
@@ -138,14 +155,17 @@ const styles = theme => ({
 const PrioritySelectorItem = ({ id, classes }) => {
   let bulletClass = classes.defaultBullet;
   let text = 'All Tasks';
+  let shortText = 'All';
   if (id) {
     bulletClass = createClassesByPriorityId(id, classes, { background: true });
     text = getPriorityById(id);
+    shortText = getShortPriorityById(id);
   }
   return (
     <div className={classes.prioritySelectorItem}>
       <span className={`${classes.priorityBullet} ${bulletClass}`} />
-      {text}
+      <span className={classes.priorityText}>{text}</span>
+      <span className={classes.priorityShortText}>{shortText}</span>
     </div>
   );
 };
diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx
index fef922c44f..207c72d1ef 100644
--- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx
+++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-featured-redux-integration/material-ui/demo.jsx
@@ -29,7 +29,7 @@ const styles = ({ spacing, palette }) => ({
     alignItems: 'center',
   },
   textField: {
-    width: '100px',
+    width: '75px',
     marginLeft: spacing(1),
     marginTop: 0,
     marginBottom: 0,
@@ -43,11 +43,12 @@ const styles = ({ spacing, palette }) => ({
     paddingLeft: spacing(1),
     paddingRight: spacing(1),
     width: spacing(10),
+    '@media (max-width: 800px)': {
+      width: spacing(2),
+      fontSize: '0.75rem',
+    },
   },
   selectedButton: {
-    paddingLeft: spacing(1),
-    paddingRight: spacing(1),
-    width: spacing(10),
     background: palette.primary[400],
     color: palette.primary[50],
     '&:hover': {
@@ -59,6 +60,16 @@ const styles = ({ spacing, palette }) => ({
       borderLeft: `1px solid ${palette.primary[50]}!important`,
     },
   },
+  longButtonText: {
+    '@media (max-width: 800px)': {
+      display: 'none',
+    },
+  },
+  shortButtonText: {
+    '@media (min-width: 800px)': {
+      display: 'none',
+    },
+  },
   title: {
     fontWeight: 'bold',
     overflow: 'hidden',
@@ -118,6 +129,7 @@ const styles = ({ spacing, palette }) => ({
 });
 
 const LOCATIONS = ['Room 1', 'Room 2', 'Room 3'];
+const LOCATIONS_SHORT = [1, 2, 3];
 
 const Appointment = withStyles(styles, { name: 'Appointment' })(({ classes, data, ...restProps }) => (
   <Appointments.Appointment
@@ -179,18 +191,21 @@ const handleButtonClick = (locationName, locations) => {
 };
 
 const getButtonClass = (locations, classes, location) => (
-  locations.indexOf(location) > -1 ? classes.selectedButton : classes.button
+  locations.indexOf(location) > -1 && classes.selectedButton
 );
 
 const LocationSelector = withStyles(styles, { name: 'LocationSelector' })(({ onLocationsChange, locations, classes }) => (
   <ButtonGroup className={classes.locationSelector}>
-    {LOCATIONS.map(location => (
+    {LOCATIONS.map((location, index) => (
       <Button
-        className={getButtonClass(locations, classes, location)}
+        className={classNames(classes.button, getButtonClass(locations, classes, location))}
         onClick={() => onLocationsChange(handleButtonClick(location, locations))}
         key={location}
       >
-        {location}
+        <>
+          <span className={classes.shortButtonText}>{LOCATIONS_SHORT[index]}</span>
+          <span className={classes.longButtonText}>{location}</span>
+        </>
       </Button>
     ))}
   </ButtonGroup>
diff --git a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx
index d98ca7206f..ca6e3a26f1 100644
--- a/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx
+++ b/packages/dx-react-scheduler-demos/src/demo-sources/scheduler-localization/material-ui/custom-formatting.jsx
@@ -7,6 +7,8 @@ import {
   WeekView,
   Appointments,
 } from '@devexpress/dx-react-scheduler-material-ui';
+import { withStyles } from '@material-ui/core/styles';
+
 import { appointments } from '../../../demo-data/appointments';
 
 const formatDayScaleDate = (date, options) => {
@@ -16,9 +18,22 @@ const formatDayScaleDate = (date, options) => {
 };
 const formatTimeScaleDate = date => moment(date).format('hh:mm:ss');
 
-const DayScaleCell = (
-  { formatDate, ...restProps },
-) => <WeekView.DayScaleCell {...restProps} formatDate={formatDayScaleDate} />;
+const styles = {
+  dayScaleCell: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+  },
+};
+
+const DayScaleCell = withStyles(styles, 'DayScaleCell')((
+  { formatDate, classes, ...restProps },
+) => (
+  <WeekView.DayScaleCell
+    {...restProps}
+    formatDate={formatDayScaleDate}
+    className={classes.dayScaleCell}
+  />
+));
 const TimeScaleCell = (
   { formatDate, ...restProps },
 ) => <WeekView.TimeScaleCell {...restProps} formatDate={formatTimeScaleDate} />;
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx
index e3ef998007..523f3ad287 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-form/recurrence/layout.jsx
@@ -58,7 +58,10 @@ const styles = ({ spacing }) => ({
     },
   },
   invisible: {
-    maxHeight: '500px',
+    maxHeight: 0,
+    '@media (min-width: 700px)': {
+      maxHeight: '500px',
+    },
   },
   label: {
     width: '8em',
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/content.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/content.jsx
index 5b9bb9e864..b867bdb076 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/content.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/content.jsx
@@ -14,7 +14,6 @@ const styles = ({ spacing, palette, typography }) => ({
     paddingTop: spacing(1),
     backgroundColor: palette.background.paper,
     boxSizing: 'border-box',
-    width: '400px',
     ...typography.body2,
   },
   text: {
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/header.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/header.jsx
index 9f777df25b..c7877d38e7 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/header.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/header.jsx
@@ -5,7 +5,6 @@ import { withStyles } from '@material-ui/core/styles';
 
 const styles = ({ spacing, palette }) => ({
   head: {
-    width: '400px',
     position: 'relative',
     paddingLeft: spacing(1),
     paddingRight: spacing(0.5),
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/layout.jsx
index 6776db00cb..bd101ed70b 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/layout.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment-tooltip/layout.jsx
@@ -8,6 +8,10 @@ const verticalTopHorizontalCenterOptions = { vertical: 'top', horizontal: 'cente
 const styles = {
   popover: {
     borderRadius: '8px',
+    width: '400px',
+    '@media (max-width: 500px)': {
+      width: '300px',
+    },
   },
 };
 
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/appointment/vertical-appointment.jsx b/packages/dx-react-scheduler-material-ui/src/templates/appointment/vertical-appointment.jsx
index 729f578962..fcd12e6296 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/appointment/vertical-appointment.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/appointment/vertical-appointment.jsx
@@ -32,9 +32,17 @@ const styles = ({ palette, spacing }) => ({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     display: 'flex',
+    '@media (max-width: 500px)': {
+      paddingLeft: spacing(0.5),
+      paddingRight: spacing(0.5),
+    },
   },
   shortContent: {
     padding: spacing(0.25, 1),
+    '@media (max-width: 500px)': {
+      paddingLeft: spacing(0.5),
+      paddingRight: spacing(0.5),
+    },
   },
   shortContainer: {
     display: 'flex',
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.jsx
index 4abb2bb9f2..c442715ac8 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.jsx
@@ -2,20 +2,35 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import DialogActions from '@material-ui/core/DialogActions';
 import DialogTitle from '@material-ui/core/DialogTitle';
+import { withStyles } from '@material-ui/core/styles';
 
-export const Layout = React.memo(({
+const styles = ({ typography }) => ({
+  title: {
+    ...typography.h6,
+  },
+  '@media (max-width: 500px)': {
+    title: {
+      fontSize: '1.1rem',
+    },
+  },
+});
+
+const LayoutBase = React.memo(({
   buttonComponent: Button,
   handleCancel,
   handleConfirm,
   getMessage,
   isDeleting,
   appointmentData,
+  classes,
   ...restProps
 }) => (
   <div
     {...restProps}
   >
-    <DialogTitle>{getMessage(isDeleting ? 'confirmDeleteMessage' : 'confirmCancelMessage')}</DialogTitle>
+    <DialogTitle className={classes.title} disableTypography>
+      {getMessage(isDeleting ? 'confirmDeleteMessage' : 'confirmCancelMessage')}
+    </DialogTitle>
     <DialogActions>
       <Button onClick={handleCancel} title={getMessage('cancelButton')} />
       <Button
@@ -27,7 +42,7 @@ export const Layout = React.memo(({
   </div>
 ));
 
-Layout.propTypes = {
+LayoutBase.propTypes = {
   buttonComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
   handleCancel: PropTypes.func,
   handleConfirm: PropTypes.func,
@@ -42,12 +57,15 @@ Layout.propTypes = {
     additionalInformation: PropTypes.string,
     allDay: PropTypes.bool,
   }),
+  classes: PropTypes.object.isRequired,
 };
 
-Layout.defaultProps = {
+LayoutBase.defaultProps = {
   handleCancel: () => undefined,
   handleConfirm: () => undefined,
   getMessage: () => undefined,
   isDeleting: false,
   appointmentData: { startDate: new Date(), endDate: new Date() },
 };
+
+export const Layout = withStyles(styles, { name: 'Layout' })(LayoutBase);
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.test.jsx
index b5d379a38e..627d6dc1ab 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.test.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/confirmation-dialog/layout.test.jsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
-import { createShallow } from '@material-ui/core/test-utils';
+import { createShallow, getClasses } from '@material-ui/core/test-utils';
 import { Layout } from './layout';
 
 describe('ConfirmationDialog', () => {
   let shallow;
+  let classes;
   const defaultProps = {
     handleCancel: jest.fn(),
     handleConfirm: jest.fn(),
@@ -12,7 +13,8 @@ describe('ConfirmationDialog', () => {
     buttonComponent: ({ children }) => <div>{children}</div>,
   };
   beforeAll(() => {
-    shallow = createShallow();
+    shallow = createShallow({ dive: true });
+    classes = getClasses(<Layout {...defaultProps} />);
   });
   beforeEach(() => {
     jest.resetAllMocks();
@@ -27,6 +29,14 @@ describe('ConfirmationDialog', () => {
       expect(tree.props().data)
         .toMatchObject({ testData: 'testData' });
     });
+    it('should render its elements properly', () => {
+      const tree = shallow((
+        <Layout {...defaultProps} />
+      ));
+
+      expect(tree.find(`.${classes.title}`).exists())
+        .toBeTruthy();
+    });
     it('should handle click on close button', () => {
       const tree = shallow((
         <Layout {...defaultProps} />
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx
index d09efe1dc3..d523f90261 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.jsx
@@ -3,25 +3,45 @@ import * as PropTypes from 'prop-types';
 import IconButton from '@material-ui/core/IconButton';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'clsx';
 
-export const NavigationButton = React.memo(({
+const styles = ({ spacing }) => ({
+  button: {
+    '@media (max-width: 500px)': {
+      width: spacing(4),
+      height: spacing(4),
+      padding: 0,
+    },
+  },
+});
+
+const NavigationButtonBase = React.memo(({
   type,
   onClick,
+  classes,
+  className,
   ...restProps
 }) => (
   <IconButton
     onClick={onClick}
+    className={classNames(classes.button, className)}
     {...restProps}
   >
     {type === 'back' ? <ChevronLeft /> : <ChevronRight />}
   </IconButton>
 ));
 
-NavigationButton.propTypes = {
+NavigationButtonBase.propTypes = {
   type: PropTypes.oneOf(['forward', 'back']).isRequired,
   onClick: PropTypes.func,
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
 };
 
-NavigationButton.defaultProps = {
+NavigationButtonBase.defaultProps = {
   onClick: () => {},
+  className: undefined,
 };
+
+export const NavigationButton = withStyles(styles, { name: 'NavigationButton' })(NavigationButtonBase);
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.test.jsx
index 9b11bd26f1..83a958b7b9 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.test.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/navigation-button.test.jsx
@@ -1,13 +1,15 @@
 import * as React from 'react';
-import { createShallow } from '@material-ui/core/test-utils';
+import { createShallow, getClasses } from '@material-ui/core/test-utils';
 import ChevronLeft from '@material-ui/icons/ChevronLeft';
 import ChevronRight from '@material-ui/icons/ChevronRight';
 import { NavigationButton } from './navigation-button';
 
 describe('DateNavigator', () => {
   let shallow;
+  let classes;
   beforeAll(() => {
     shallow = createShallow({ dive: true });
+    classes = getClasses(<NavigationButton />);
   });
   describe('NavigationButton', () => {
     it('should pass rest props to the root element', () => {
@@ -44,5 +46,15 @@ describe('DateNavigator', () => {
       expect(onClick)
         .toBeCalled();
     });
+    it('should pass className to the root element', () => {
+      const tree = shallow((
+        <NavigationButton className="custom-class" />
+      ));
+
+      expect(tree.is('.custom-class'))
+        .toBeTruthy();
+      expect(tree.is(`.${classes.button}`))
+        .toBeTruthy();
+    });
   });
 });
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx
index 78acea605e..5df5a7514f 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.jsx
@@ -1,25 +1,60 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import Button from '@material-ui/core/Button';
+import CalendarToday from '@material-ui/icons/CalendarToday';
+import IconButton from '@material-ui/core/IconButton';
+import { withStyles } from '@material-ui/core/styles';
+import classNames from 'clsx';
 
-export const OpenButton = React.memo(({
-  text, onVisibilityToggle, ...restProps
+const styles = ({ spacing }) => ({
+  textButton: {
+    '@media (max-width: 700px)': {
+      display: 'none',
+    },
+  },
+  iconButton: {
+    '@media (min-width: 700px)': {
+      display: 'none',
+    },
+    '@media (max-width: 500px)': {
+      width: spacing(4),
+      height: spacing(4),
+      padding: 0,
+    },
+  },
+});
+
+const OpenButtonBase = React.memo(({
+  text, onVisibilityToggle, classes, className, ...restProps
 }) => (
-  <Button
-    onClick={onVisibilityToggle}
-    {...restProps}
-  >
-    {text}
-  </Button>
+  <>
+    <Button
+      onClick={onVisibilityToggle}
+      className={classNames(classes.textButton, className)}
+      {...restProps}
+    >
+      {text}
+    </Button>
+    <IconButton
+      onClick={onVisibilityToggle}
+      className={classNames(classes.iconButton, className)}
+      {...restProps}
+    >
+      <CalendarToday />
+    </IconButton>
+  </>
 ));
 
-OpenButton.propTypes = {
+OpenButtonBase.propTypes = {
   onVisibilityToggle: PropTypes.func.isRequired,
   text: PropTypes.string,
   className: PropTypes.string,
+  classes: PropTypes.object.isRequired,
 };
 
-OpenButton.defaultProps = {
+OpenButtonBase.defaultProps = {
   text: '',
   className: undefined,
 };
+
+export const OpenButton = withStyles(styles, { name: 'OpenButton' })(OpenButtonBase);
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.test.jsx
index 6f01934f7c..ab071378e3 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.test.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/date-navigator/open-button.test.jsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { createShallow } from '@material-ui/core/test-utils';
+import { createShallow, getClasses } from '@material-ui/core/test-utils';
+import Button from '@material-ui/core/Button';
+import IconButton from '@material-ui/core/IconButton';
 import { OpenButton } from './open-button';
 
 describe('DateNavigator', () => {
@@ -7,26 +9,51 @@ describe('DateNavigator', () => {
     onVisibilityToggle: jest.fn(),
   };
   let shallow;
+  let classes;
   beforeAll(() => {
     shallow = createShallow({ dive: true });
+    classes = getClasses(<OpenButton />);
   });
   describe('OpenButton', () => {
-    it('should pass rest props to the root element', () => {
+    it('should pass rest props to buttons', () => {
       const tree = shallow((
         <OpenButton {...defaultProps} data={{ a: 1 }} />
       ));
 
-      expect(tree.props().data)
+      expect(tree.find(Button).at(0).props().data)
+        .toMatchObject({ a: 1 });
+      expect(tree.find(IconButton).at(0).props().data)
         .toMatchObject({ a: 1 });
     });
+    it('should pass className to buttons', () => {
+      const tree = shallow((
+        <OpenButton {...defaultProps} className="custom-class" />
+      ));
+
+      const button = tree.find(Button).at(0);
+      expect(button.is('.custom-class'))
+        .toBeTruthy();
+      expect(button.is(`.${classes.textButton}`))
+        .toBeTruthy();
+
+      const iconButton = tree.find(IconButton).at(0);
+      expect(iconButton.is('.custom-class'))
+        .toBeTruthy();
+      expect(iconButton.is(`.${classes.iconButton}`))
+        .toBeTruthy();
+    });
     it('should handle onClink event', () => {
-      const button = shallow((
+      const tree = shallow((
         <OpenButton {...defaultProps} />
       ));
-      button.simulate('click');
 
+      tree.find(Button).at(0).simulate('click');
+      expect(defaultProps.onVisibilityToggle)
+        .toBeCalledTimes(1);
+
+      tree.find(IconButton).at(0).simulate('click');
       expect(defaultProps.onVisibilityToggle)
-        .toBeCalled();
+        .toBeCalledTimes(2);
     });
   });
 });
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.jsx
index 5e9f25c780..4e5c3bf237 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.jsx
@@ -6,14 +6,31 @@ import DialogTitle from '@material-ui/core/DialogTitle';
 import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
+import { withStyles } from '@material-ui/core/styles';
 
-export const Layout = React.memo(({
+const styles = ({ typography }) => ({
+  title: typography.h6,
+  content: {
+    fontSize: '1rem',
+  },
+  '@media (max-width: 500px)': {
+    title: {
+      fontSize: '1.1rem',
+    },
+    content: {
+      fontSize: '0.9rem',
+    },
+  },
+});
+
+const LayoutBase = React.memo(({
   buttonComponent: Button,
   handleClose,
   commit,
   availableOperations,
   getMessage,
   isDeleting,
+  classes,
   ...restProps
 }) => {
   const [currentValue, setCurrentValue] = React.useState(availableOperations[0].value);
@@ -31,7 +48,9 @@ export const Layout = React.memo(({
     <div
       {...restProps}
     >
-      <DialogTitle>{getMessage(isDeleting ? 'menuDeleteTitle' : 'menuEditTitle')}</DialogTitle>
+      <DialogTitle className={classes.title} disableTypography>
+        {getMessage(isDeleting ? 'menuDeleteTitle' : 'menuEditTitle')}
+      </DialogTitle>
       <DialogContent>
         <RadioGroup
           value={currentValue}
@@ -43,6 +62,7 @@ export const Layout = React.memo(({
               control={<Radio />}
               label={operation.title}
               key={operation.value}
+              classes={{ label: classes.content }}
             />
           ))}
         </RadioGroup>
@@ -55,18 +75,21 @@ export const Layout = React.memo(({
   );
 });
 
-Layout.propTypes = {
+LayoutBase.propTypes = {
   buttonComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
   availableOperations: PropTypes.array.isRequired,
   handleClose: PropTypes.func,
   commit: PropTypes.func,
   getMessage: PropTypes.func,
   isDeleting: PropTypes.bool,
+  classes: PropTypes.object.isRequired,
 };
 
-Layout.defaultProps = {
+LayoutBase.defaultProps = {
   handleClose: () => undefined,
   commit: () => undefined,
   getMessage: () => undefined,
   isDeleting: false,
 };
+
+export const Layout = withStyles(styles, { name: 'Layout' })(LayoutBase);
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.test.jsx
index f43a55f347..0af12572b9 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.test.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/edit-recurrence-menu/layout.test.jsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { createShallow } from '@material-ui/core/test-utils';
+import { createShallow, getClasses, createMount } from '@material-ui/core/test-utils';
 import { Layout } from './layout';
 
 describe('EditRecurrenceMenu', () => {
   let shallow;
+  let classes;
+  let mount;
   const defaultProps = {
     availableOperations: [{ value: '1', title: 'operation1' }],
     handleClose: jest.fn(),
@@ -13,7 +15,9 @@ describe('EditRecurrenceMenu', () => {
     buttonComponent: ({ children }) => <div>{children}</div>,
   };
   beforeAll(() => {
-    shallow = createShallow();
+    shallow = createShallow({ dive: true });
+    mount = createMount();
+    classes = getClasses(<Layout {...defaultProps} />);
   });
   beforeEach(() => {
     jest.resetAllMocks();
@@ -28,6 +32,16 @@ describe('EditRecurrenceMenu', () => {
       expect(tree.props().data)
         .toMatchObject({ testData: 'testData' });
     });
+    it('should render its elements properly', () => {
+      const tree = mount((
+        <Layout {...defaultProps} />
+      ));
+
+      expect(tree.find(`.${classes.title}`).exists())
+        .toBeTruthy();
+      expect(tree.find(`.${classes.content}`))
+        .toHaveLength(3);
+    });
     it('should handle click on close button', () => {
       const tree = shallow((
         <Layout {...defaultProps} />
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx
index 627a7a0ae4..f4d99e9259 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.jsx
@@ -21,6 +21,12 @@ const styles = theme => ({
   timeTable: {
     position: 'relative',
   },
+  fixedWidth: {
+    width: theme.spacing(9),
+  },
+  mainTable: {
+    width: `calc(100% - ${theme.spacing(9)}px)`,
+  },
 });
 
 class VerticalViewLayoutBase extends React.PureComponent {
@@ -74,25 +80,24 @@ class VerticalViewLayoutBase extends React.PureComponent {
               container
               direction="row"
             >
-              <Grid item xs={1} className={classes.emptySpace}>
+              <div className={classes.fixedWidth}>
                 <DayScaleEmptyCell />
-              </Grid>
+              </div>
 
-              <Grid item xs={11}>
+              <div className={classes.mainTable}>
                 <DayScale />
-              </Grid>
+              </div>
             </Grid>
           </Grid>
 
           <Grid item xs="auto">
             <Grid container direction="row">
-              <Grid item xs={1}>
+              <div className={classes.fixedWidth}>
                 <TimeScale />
-              </Grid>
-
-              <Grid item xs={11} className={classes.timeTable}>
+              </div>
+              <div className={classNames(classes.timeTable, classes.mainTable)}>
                 <TimeTable />
-              </Grid>
+              </div>
             </Grid>
           </Grid>
         </div>
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.test.jsx b/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.test.jsx
index 35abbbccff..345a77dfc5 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.test.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/layouts/vertical-view-layout.test.jsx
@@ -52,4 +52,19 @@ describe('Vertical View Layout', () => {
     expect(scrollingStrategy)
       .toBeCalledTimes(1);
   });
+
+  it('should render its components correctly', () => {
+    const tree = shallow((
+      <VerticalViewLayout {...defaultProps} className="custom-class" />
+    ));
+
+    expect(tree.find(`.${classes.stickyHeader}`).exists())
+      .toBeTruthy();
+    expect(tree.find(`.${classes.mainTable}`))
+      .toHaveLength(2);
+    expect(tree.find(`.${classes.fixedWidth}`))
+      .toHaveLength(2);
+    expect(tree.find(`.${classes.timeTable}`).exists())
+      .toBeTruthy();
+  });
 });
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/today-button/today-button.jsx b/packages/dx-react-scheduler-material-ui/src/templates/today-button/today-button.jsx
index 0b5d330d95..89ee77bc8e 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/today-button/today-button.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/today-button/today-button.jsx
@@ -11,6 +11,9 @@ const styles = ({ spacing }) => ({
     '&:first-child': {
       marginLeft: 0,
     },
+    '@media (max-width: 700px)': {
+      fontSize: '0.75rem',
+    },
   },
 });
 
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.jsx b/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.jsx
index 805d83f801..5e6db74e3d 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/view-switcher/switcher.jsx
@@ -8,6 +8,9 @@ const styles = ({ spacing }) => ({
     padding: spacing(1.25, 1.75),
     paddingRight: spacing(4),
     textTransform: 'uppercase',
+    '@media (max-width: 700px)': {
+      fontSize: '0.75rem',
+    },
   },
   inputRoot: {
     marginLeft: spacing(0.5),
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/views/horizontal/time-table/cell.jsx b/packages/dx-react-scheduler-material-ui/src/templates/views/horizontal/time-table/cell.jsx
index ab0ee36ab5..c4321d0a0f 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/views/horizontal/time-table/cell.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/views/horizontal/time-table/cell.jsx
@@ -33,6 +33,9 @@ const styles = theme => ({
   },
   text: {
     padding: '1em',
+    '@media (max-width: 500px)': {
+      padding: '0.5em',
+    },
   },
   today: {
     margin: '0.85em',
diff --git a/packages/dx-react-scheduler-material-ui/src/templates/views/vertical/day-scale/cell.jsx b/packages/dx-react-scheduler-material-ui/src/templates/views/vertical/day-scale/cell.jsx
index fee8af86de..afc210d74a 100644
--- a/packages/dx-react-scheduler-material-ui/src/templates/views/vertical/day-scale/cell.jsx
+++ b/packages/dx-react-scheduler-material-ui/src/templates/views/vertical/day-scale/cell.jsx
@@ -14,6 +14,10 @@ const styles = theme => ({
     '&:last-child': {
       paddingRight: 0,
     },
+    '@media (max-width: 700px)': {
+      padding: theme.spacing(1),
+      paddingBottom: 0,
+    },
   },
   dayOfWeek: {
     ...theme.typography.caption,
@@ -21,6 +25,9 @@ const styles = theme => ({
   },
   dayOfMonth: {
     ...theme.typography.h4,
+    '@media (max-width: 700px)': {
+      ...theme.typography.h6,
+    },
   },
   highlightCell: {
     color: theme.palette.primary.main,