diff --git a/src/components/AnnotationManifestsAccordion.js b/src/components/AnnotationManifestsAccordion.js
index 62766ec1cbc49628c984e486bfa2f9ace13b737a..4601362c1037d2b5746caa1f4d56c69c1b100b2c 100644
--- a/src/components/AnnotationManifestsAccordion.js
+++ b/src/components/AnnotationManifestsAccordion.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMoreSharp';
-import Typography from '@material-ui/core/Typography';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Typography from '@mui/material/Typography';
+import AccordionDetails from '@mui/material/AccordionDetails'
 import PropTypes from 'prop-types';
 import AnnotationManifestsItem from '../containers/AnnotationManifestsItem';
 
diff --git a/src/components/AnnotationManifestsItem.js b/src/components/AnnotationManifestsItem.js
index 657a5c84255d26426cdaf67f5360b3c53ca00fc2..79c9758e8dd52925fa8fc24525a05a84b93a7584 100644
--- a/src/components/AnnotationManifestsItem.js
+++ b/src/components/AnnotationManifestsItem.js
@@ -1,11 +1,11 @@
 import { Component } from 'react';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import {
   Card, CardActionArea, CardActions, CardContent, CardMedia, Fab,
-} from '@material-ui/core';
-import Button from '@material-ui/core/Button';
-import Tooltip from '@material-ui/core/Tooltip';
+} from '@mui/material';
+import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 
 /**
  * AnnotationManifestsItem
diff --git a/src/components/AnnotationsOverlayVideo.js b/src/components/AnnotationsOverlayVideo.js
index 57e03df4fd4b97a13a6f6903c46116920376e79d..b3dd3911d14ecb7123e6bac2bc3b22c372fe2fa0 100755
--- a/src/components/AnnotationsOverlayVideo.js
+++ b/src/components/AnnotationsOverlayVideo.js
@@ -6,7 +6,7 @@ import flatten from 'lodash/flatten';
 import sortBy from 'lodash/sortBy';
 import xor from 'lodash/xor';
 import ResizeObserver from 'react-resize-observer';
-import CircularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@mui/material/CircularProgress';
 import CanvasOverlayVideo from '../lib/CanvasOverlayVideo';
 import CanvasWorld from '../lib/CanvasWorld';
 import CanvasAnnotationDisplay from '../lib/CanvasAnnotationDisplay';
diff --git a/src/components/ViewerNavigationVideo.js b/src/components/ViewerNavigationVideo.js
index 86be2d95d0d9849b51bf1ab05938162ece90aba5..48c266fba629a23e3d45b49d31c369dcd191b30f 100755
--- a/src/components/ViewerNavigationVideo.js
+++ b/src/components/ViewerNavigationVideo.js
@@ -1,13 +1,13 @@
-import ClosedCaption from '@material-ui/icons/ClosedCaption';
-import ClosedCaptionOutlined from '@material-ui/icons/ClosedCaptionOutlined';
+import ClosedCaption from '@mui/icons-material/ClosedCaption';
+import ClosedCaptionOutlined from '@mui/icons-material/ClosedCaptionOutlined';
 import { Component } from 'react';
-import PauseRoundedIcon from '@material-ui/icons/PauseRounded';
-import PlayArrowRoundedIcon from '@material-ui/icons/PlayArrowRounded';
+import PauseRoundedIcon from '@mui/icons-material/PauseRounded';
+import PlayArrowRoundedIcon from '@mui/icons-material/PlayArrowRounded';
 import PropTypes from 'prop-types';
-import Slider from '@material-ui/core/Slider';
-import Typography from '@material-ui/core/Typography';
-import VolumeOffIcon from '@material-ui/icons/VolumeOff';
-import VolumeUpIcon from '@material-ui/icons/VolumeUp';
+import Slider from '@mui/material/Slider';
+import Typography from '@mui/material/Typography';
+import VolumeOffIcon from '@mui/icons-material/VolumeOff';
+import VolumeUpIcon from '@mui/icons-material/VolumeUp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import ns from '../config/css-ns';
 
diff --git a/src/components/WindowCanvasNavigationControlsVideo.js b/src/components/WindowCanvasNavigationControlsVideo.js
index b52c9957279a3fd98189971ea88042e0bbbcba4c..c5648fe3fb338443f4619b6f04a83101a9bb576d 100755
--- a/src/components/WindowCanvasNavigationControlsVideo.js
+++ b/src/components/WindowCanvasNavigationControlsVideo.js
@@ -1,8 +1,8 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
 import ViewerInfo from '../containers/ViewerInfo';
 import ViewerNavigation from '../containers/ViewerNavigation';
 import ViewerNavigationVideo from '../containers/ViewerNavigationVideo';
diff --git a/src/containers/AnnotationManifestsAccordion.js b/src/containers/AnnotationManifestsAccordion.js
index e9229f8ddde9d2ab58816528cb33410f679cc709..0bb19f5ba25c01b4eb0429840256234781458032 100644
--- a/src/containers/AnnotationManifestsAccordion.js
+++ b/src/containers/AnnotationManifestsAccordion.js
@@ -1,7 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
 import { withPlugins } from '../extend/withPlugins';
 import { AnnotationManifestsAccordion } from '../components/AnnotationManifestsAccordion';
 import { getConfig } from '../state/selectors';
@@ -32,7 +31,6 @@ const styles = theme => ({
 
 const enhance = compose(
   withTranslation(),
-  withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('AnnotationManifestsAccordion'),
 );
diff --git a/src/containers/AnnotationManifestsItem.js b/src/containers/AnnotationManifestsItem.js
index ad31d07b2e9ddffe7f5f7c40f4d2170f5dad4abc..088c06d308703346a4fd2038311c0a2f27a514d3 100644
--- a/src/containers/AnnotationManifestsItem.js
+++ b/src/containers/AnnotationManifestsItem.js
@@ -1,7 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { AnnotationManifestsItem } from '../components/AnnotationManifestsItem';
@@ -59,7 +58,6 @@ const styles = theme => ({
 
 const enhance = compose(
   withTranslation(),
-  withStyles(styles),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('AnnotationManifestsItem'),
 );
diff --git a/src/containers/ViewerNavigationVideo.js b/src/containers/ViewerNavigationVideo.js
index 5d894b0d921a2b052c8b4156c0bc0e7466a5b6e2..76b4f00abbbc43ca434e7c8aea258ea8e994b098 100755
--- a/src/containers/ViewerNavigationVideo.js
+++ b/src/containers/ViewerNavigationVideo.js
@@ -1,7 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { ViewerNavigationVideo } from '../components/ViewerNavigationVideo';
@@ -69,7 +68,6 @@ const styles = {
 };
 
 const enhance = compose(
-  withStyles(styles),
   withTranslation(),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('ViewerNavigationVideo'),
diff --git a/src/containers/WindowCanvasNavigationControlsVideo.js b/src/containers/WindowCanvasNavigationControlsVideo.js
index 6c0ed55e85f0ea4579d478be5ac436252afc93ec..5424c3d8ec624038b1b8feb42262252602605d0b 100755
--- a/src/containers/WindowCanvasNavigationControlsVideo.js
+++ b/src/containers/WindowCanvasNavigationControlsVideo.js
@@ -1,8 +1,6 @@
 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 { withPlugins } from '../extend/withPlugins';
 import { getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControlsVideo } from '../components/WindowCanvasNavigationControlsVideo';
@@ -44,7 +42,6 @@ const styles = theme => ({
 
 const enhance = compose(
   connect(mapStateToProps),
-  withStyles(styles),
   withSize(),
   connect(mapStateToProps, mapDispatchToProps),
   withPlugins('WindowCanvasNavigationControlsVideo'),