diff --git a/__tests__/src/components/WindowTopMenu.test.js b/__tests__/src/components/WindowTopMenu.test.js
index 713cc148ef9ab3616004acdfbae2b60b8b65a5e2..3eacc72fb4360e0e3e0667da11272f4f5dc5f35f 100644
--- a/__tests__/src/components/WindowTopMenu.test.js
+++ b/__tests__/src/components/WindowTopMenu.test.js
@@ -42,8 +42,10 @@ describe('WindowTopMenu', () => {
     expect(wrapper.find(Menu).first().props().anchorEl).toBe(null);
     expect(wrapper.find(Menu).first().props().open).toBe(false);
     expect(wrapper.find(Menu).first().props().onClose).toBe(handleClose);
-    expect(wrapper.find(Menu).first().props().onEntering).toBe(toggleDraggingEnabled);
-    expect(wrapper.find(Menu).first().props().onExit).toBe(toggleDraggingEnabled);
+    expect(wrapper.find(Menu).first().props().TransitionProps.onEntering)
+      .toBe(toggleDraggingEnabled);
+    expect(wrapper.find(Menu).first().props().TransitionProps.onExit)
+      .toBe(toggleDraggingEnabled);
   });
 
   it('passses correct props to <Menu/> when achor element given', () => {
@@ -54,7 +56,9 @@ describe('WindowTopMenu', () => {
     expect(wrapper.find(Menu).first().props().anchorEl).toBe(anchorEl);
     expect(wrapper.find(Menu).first().props().open).toBe(true);
     expect(wrapper.find(Menu).first().props().onClose).toBe(handleClose);
-    expect(wrapper.find(Menu).first().props().onEntering).toBe(toggleDraggingEnabled);
-    expect(wrapper.find(Menu).first().props().onExit).toBe(toggleDraggingEnabled);
+    expect(wrapper.find(Menu).first().props().TransitionProps.onEntering)
+      .toBe(toggleDraggingEnabled);
+    expect(wrapper.find(Menu).first().props().TransitionProps.onExit)
+      .toBe(toggleDraggingEnabled);
   });
 });
diff --git a/__tests__/src/components/WorkspaceAddButton.test.js b/__tests__/src/components/WorkspaceAddButton.test.js
index bac03e0c38b0982d05d9b01030207209c4b755ac..cd1a65c0dcf1ea4d416dc8e3e7e314ee3fb70159 100644
--- a/__tests__/src/components/WorkspaceAddButton.test.js
+++ b/__tests__/src/components/WorkspaceAddButton.test.js
@@ -65,7 +65,7 @@ describe('WorkspaceAddButton', () => {
       const wrapper = createWrapper({ useExtendedFab: false });
 
       expect(extendedWrapper.find(Fab).props().variant).toBe('extended');
-      expect(wrapper.find(Fab).props().variant).toEqual('round');
+      expect(wrapper.find(Fab).props().variant).toEqual('circular');
     });
   });
 });
diff --git a/package.json b/package.json
index ebb453fd4179d03b0f6aa9d9b49d706417d6c293..cb2499fafc99afba02a93cd78169d89de5bccdee 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,7 @@
   ],
   "repository": "https://github.com/ProjectMirador/mirador",
   "dependencies": {
-    "@material-ui/core": "^4.11.0",
+    "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.53",
     "@researchgate/react-intersection-observer": "^1.0.0",
diff --git a/src/components/AppProviders.js b/src/components/AppProviders.js
index 3c2d7bff3a3b7552fc0e66121312a15a99e617f4..aeeedc34b928f6622373be9005b843b6f3755451 100644
--- a/src/components/AppProviders.js
+++ b/src/components/AppProviders.js
@@ -4,7 +4,7 @@ import Fullscreen from 'react-full-screen';
 import { I18nextProvider } from 'react-i18next';
 import { LiveAnnouncer } from 'react-aria-live';
 import {
-  ThemeProvider, StylesProvider, createMuiTheme, jssPreset, createGenerateClassName,
+  ThemeProvider, StylesProvider, createTheme, jssPreset, createGenerateClassName,
 } from '@material-ui/core/styles';
 import { DndContext, DndProvider } from 'react-dnd';
 import MultiBackend from 'react-dnd-multi-backend';
@@ -100,7 +100,7 @@ export class AppProviders extends Component {
         <I18nextProvider i18n={this.i18n}>
           <LiveAnnouncer>
             <ThemeProvider
-              theme={createMuiTheme(theme)}
+              theme={createTheme(theme)}
             >
               <StylesProvider
                 jss={create({ plugins: [...jssPreset().plugins, rtl()] })}
diff --git a/src/components/ManifestListItemError.js b/src/components/ManifestListItemError.js
index fd37247bc07e1e9e6ca80fcfd5d79134db2bd4b4..a6a3fb43ac4eabb161bbd324049c177474071a1e 100644
--- a/src/components/ManifestListItemError.js
+++ b/src/components/ManifestListItemError.js
@@ -23,7 +23,7 @@ export class ManifestListItemError extends Component {
         <Grid container>
           <Grid container item xs={12} sm={6}>
             <Grid item xs={4} sm={3}>
-              <Grid container justify="center">
+              <Grid container justifyContent="center">
                 <ErrorIcon className={classes.errorIcon} />
               </Grid>
             </Grid>
@@ -35,7 +35,7 @@ export class ManifestListItemError extends Component {
         </Grid>
 
         <Grid container>
-          <Grid container item xs={12} sm={6} justify="flex-end">
+          <Grid container item xs={12} sm={6} justifyContent="flex-end">
             <Grid item>
               <Button onClick={() => { onDismissClick(manifestId); }}>
                 {t('dismiss')}
diff --git a/src/components/SelectCollection.js b/src/components/SelectCollection.js
index decfdf6deabd97cf10e3238e22d0e31294434458..aeb98e71291df1e5834cce2c6929067138a87ccf 100644
--- a/src/components/SelectCollection.js
+++ b/src/components/SelectCollection.js
@@ -30,7 +30,7 @@ export class SelectCollection extends Component {
       t,
     } = this.props;
     return (
-      <Grid container justify="center" alignItems="center">
+      <Grid container justifyContent="center" alignItems="center">
         <Grid container direction="column" alignItems="center">
           <Typography variant="h4" paragraph>
             <em>
diff --git a/src/components/WindowList.js b/src/components/WindowList.js
index 338b93ae6162b8b22c28546db977c60691c177e6..5e45ad0378c2ab27ed55d004a1cbe9cd551100fd 100644
--- a/src/components/WindowList.js
+++ b/src/components/WindowList.js
@@ -54,7 +54,9 @@ export class WindowList extends Component {
         anchorEl={anchorEl}
         open={Boolean(anchorEl)}
         onClose={handleClose}
-        onEntering={WindowList.focus2ndListIitem}
+        TransitionProps={{
+          onEntering: WindowList.focus2ndListIitem,
+        }}
       >
         <ListSubheader role="presentation" selected={false} disabled tabIndex="-1">
           {t('openWindows')}
diff --git a/src/components/WindowTopMenu.js b/src/components/WindowTopMenu.js
index 7998753826b5a94a65e7468e6ecc946581e7ec66..6148f94d24085780611b2ddf1e8373740104cf24 100644
--- a/src/components/WindowTopMenu.js
+++ b/src/components/WindowTopMenu.js
@@ -47,8 +47,10 @@ export class WindowTopMenu extends Component {
         getContentAnchorEl={null}
         open={Boolean(anchorEl)}
         onClose={handleClose}
-        onEntering={toggleDraggingEnabled}
-        onExit={toggleDraggingEnabled}
+        TransitionProps={{
+          onEntering: toggleDraggingEnabled,
+          onExit: toggleDraggingEnabled,
+        }}
         orientation="horizontal"
       >
         <WindowViewSettings windowId={windowId} handleClose={handleClose} />
diff --git a/src/components/WorkspaceAddButton.js b/src/components/WorkspaceAddButton.js
index 297d72089b6f6337dd83cc17cf4296922d392ae6..e3fdeb2f7ac8e088ae5cf53f9592f5f012fa7bb6 100644
--- a/src/components/WorkspaceAddButton.js
+++ b/src/components/WorkspaceAddButton.js
@@ -30,7 +30,7 @@ export class WorkspaceAddButton extends Component {
           }
           className={classes.fab}
           classes={{ primary: classes.fabPrimary, secondary: classes.fabSecondary }}
-          variant={useExtendedFab ? 'extended' : 'round'}
+          variant={useExtendedFab ? 'extended' : 'circular'}
           onClick={() => { setWorkspaceAddVisibility(!isWorkspaceAddVisible); }}
         >
           {
diff --git a/src/containers/SidebarIndexTableOfContents.js b/src/containers/SidebarIndexTableOfContents.js
index 6d0d7d771eaedfa1f278fd613bfd598741d82320..98caa554c90d31bf077dc7169a1b209a0bd28fbe 100644
--- a/src/containers/SidebarIndexTableOfContents.js
+++ b/src/containers/SidebarIndexTableOfContents.js
@@ -2,7 +2,7 @@ import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import { withPlugins } from '../extend/withPlugins';
 import { SidebarIndexTableOfContents } from '../components/SidebarIndexTableOfContents';
 import {
@@ -65,7 +65,7 @@ const styles = theme => ({
     },
   },
   visibleNode: {
-    backgroundColor: fade(theme.palette.highlights.primary, 0.35),
+    backgroundColor: alpha(theme.palette.highlights.primary, 0.35),
     display: 'inline',
   },
 });
diff --git a/src/containers/WindowAuthenticationBar.js b/src/containers/WindowAuthenticationBar.js
index 881bf419a1423289b504995b616cb96270366050..3b42a93aa7f44067e0cdc09958a20a90c4059b66 100644
--- a/src/containers/WindowAuthenticationBar.js
+++ b/src/containers/WindowAuthenticationBar.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
 import { withStyles } from '@material-ui/core/styles';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import { withPlugins } from '../extend/withPlugins';
 import { WindowAuthenticationBar } from '../components/WindowAuthenticationBar';
 
@@ -13,7 +13,7 @@ import { WindowAuthenticationBar } from '../components/WindowAuthenticationBar';
 const styles = theme => ({
   buttonInvert: {
     '&:hover': {
-      backgroundColor: fade(
+      backgroundColor: alpha(
         theme.palette.secondary.contrastText, 1 - theme.palette.action.hoverOpacity,
       ),
     },
diff --git a/src/containers/WindowCanvasNavigationControls.js b/src/containers/WindowCanvasNavigationControls.js
index c823351483e99ae53e6747e443f9436898067066..8028c13df02bf98720c722060c945e7cd2042281 100644
--- a/src/containers/WindowCanvasNavigationControls.js
+++ b/src/containers/WindowCanvasNavigationControls.js
@@ -2,7 +2,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withSize } from 'react-sizeme';
 import { withStyles } from '@material-ui/core';
-import { fade } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 import { withPlugins } from '../extend/withPlugins';
 import { getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls';
@@ -28,7 +28,7 @@ const styles = theme => ({
     flexDirection: 'column',
   },
   controls: {
-    backgroundColor: fade(theme.palette.background.paper, 0.5),
+    backgroundColor: alpha(theme.palette.background.paper, 0.5),
     bottom: 0,
     position: 'absolute',
     width: '100%',