diff --git a/__tests__/src/components/AppProviders.test.js b/__tests__/src/components/AppProviders.test.js
index 020a66b960d7ef2b3f1112dbda24ebf49783a156..e4b530fd072c94cac36052b80904b7da0e6ebd67 100644
--- a/__tests__/src/components/AppProviders.test.js
+++ b/__tests__/src/components/AppProviders.test.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { ThemeProvider, StylesProvider } from '@material-ui/core/styles';
+import { ThemeProvider, StyledEngineProvider } from '@mui/material/styles';
+import StylesProvider from '@mui/styles/StylesProvider';
 import Fullscreen from 'react-full-screen';
 import { DndContext, DndProvider } from 'react-dnd';
 import { AppProviders } from '../../../src/components/AppProviders';
@@ -34,7 +35,7 @@ describe('AppProviders', () => {
   it('sets up a theme based on the config passed in merged w/ MaterialUI', () => {
     const wrapper = createWrapper();
     const { theme } = wrapper.find(ThemeProvider).props();
-    expect(theme.palette.type).toEqual('light');
+    expect(theme.palette.mode).toEqual('light');
     expect(theme.typography.useNextVariants).toBe(true);
     expect(Object.keys(theme).length).toBeGreaterThan(10);
   });
diff --git a/__tests__/src/components/AttributionPanel.test.js b/__tests__/src/components/AttributionPanel.test.js
index b8ed56bf2748547b393873ac0561c6c0cb8580b0..dc3d8ad1c2e648333f6535ff8c37c5537cec8f85 100644
--- a/__tests__/src/components/AttributionPanel.test.js
+++ b/__tests__/src/components/AttributionPanel.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
 import { Img } from 'react-image';
 import { AttributionPanel } from '../../../src/components/AttributionPanel';
 import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';
diff --git a/__tests__/src/components/Branding.test.js b/__tests__/src/components/Branding.test.js
index 661145873afbd9e8ea63e3e4ed0d0884df8f0121..86caea1e36d45f029dacda46e27fb5d1f632d9d7 100644
--- a/__tests__/src/components/Branding.test.js
+++ b/__tests__/src/components/Branding.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
 import MiradorIcon from '../../../src/components/icons/MiradorIcon';
 import { Branding } from '../../../src/components/Branding';
 
@@ -15,7 +15,7 @@ describe('Branding', () => {
       wrapper.matchesElement(
         <div>
           <Typography>
-            <IconButton>
+            <IconButton size="large">
               <MiradorIcon />
             </IconButton>
           </Typography>
@@ -34,7 +34,7 @@ describe('Branding', () => {
             <Typography>mirador</Typography>
           </div>
           <Typography>
-            <IconButton>
+            <IconButton size="large">
               <MiradorIcon />
             </IconButton>
           </Typography>
diff --git a/__tests__/src/components/CanvasAnnotations.test.js b/__tests__/src/components/CanvasAnnotations.test.js
index 63f0674ddb3bcd05b49eb131005d812fd99ecb75..eb542d1834607144769110b847b1d2977a512d8f 100644
--- a/__tests__/src/components/CanvasAnnotations.test.js
+++ b/__tests__/src/components/CanvasAnnotations.test.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
-import Chip from '@material-ui/core/Chip';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
 import { CanvasAnnotations } from '../../../src/components/CanvasAnnotations';
 import { ScrollTo } from '../../../src/components/ScrollTo';
 
diff --git a/__tests__/src/components/CanvasInfo.test.js b/__tests__/src/components/CanvasInfo.test.js
index 0b816741fb08c904f109a4f5f1397aa3ba717cdd..583362d28fde46598a4facc908d0a2642f1a630d 100644
--- a/__tests__/src/components/CanvasInfo.test.js
+++ b/__tests__/src/components/CanvasInfo.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { CanvasInfo } from '../../../src/components/CanvasInfo';
 import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';
 import CollapsibleSection from '../../../src/containers/CollapsibleSection';
diff --git a/__tests__/src/components/CanvasLayers.test.js b/__tests__/src/components/CanvasLayers.test.js
index e831f31a994d879be0cc51a1f000a0d8a989384b..a53c2076fc5686155af7cf721a33c8677a742f88 100644
--- a/__tests__/src/components/CanvasLayers.test.js
+++ b/__tests__/src/components/CanvasLayers.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Input from '@material-ui/core/Input';
-import Slider from '@material-ui/core/Slider';
-import Typography from '@material-ui/core/Typography';
+import Input from '@mui/material/Input';
+import Slider from '@mui/material/Slider';
+import Typography from '@mui/material/Typography';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import { CanvasLayers } from '../../../src/components/CanvasLayers';
 import IIIFThumbnail from '../../../src/containers/IIIFThumbnail';
diff --git a/__tests__/src/components/ChangeThemeDialog.test.js b/__tests__/src/components/ChangeThemeDialog.test.js
index 3585e08f2a987a6c89dafa6962b92d8411b673de..cf519847620699559baabcd3a44dd563b5538da8 100644
--- a/__tests__/src/components/ChangeThemeDialog.test.js
+++ b/__tests__/src/components/ChangeThemeDialog.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Dialog from '@material-ui/core/Dialog';
-import ListItemText from '@material-ui/core/ListItemText';
-import MenuItem from '@material-ui/core/MenuItem';
+import Dialog from '@mui/material/Dialog';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
 import { ChangeThemeDialog } from '../../../src/components/ChangeThemeDialog';
 
 /**
diff --git a/__tests__/src/components/CollapsibleSection.test.js b/__tests__/src/components/CollapsibleSection.test.js
index c1d62d69ffcc82cb4ee32f92fa210b3f797e6d89..f4171ef5585e1da8e3d9c289ce8723ecb506a5fa 100644
--- a/__tests__/src/components/CollapsibleSection.test.js
+++ b/__tests__/src/components/CollapsibleSection.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import { CollapsibleSection } from '../../../src/components/CollapsibleSection';
 
diff --git a/__tests__/src/components/CollectionDialog.test.js b/__tests__/src/components/CollectionDialog.test.js
index 2b057a7d100d217269cc45e1107198a0bfe828ad..4ca24897758c39781bd75f5d54a0e91d51e84ab5 100644
--- a/__tests__/src/components/CollectionDialog.test.js
+++ b/__tests__/src/components/CollectionDialog.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
-import MenuItem from '@material-ui/core/MenuItem';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import MenuItem from '@mui/material/MenuItem';
+import Skeleton from '@mui/material/Skeleton';
 import { Utils } from 'manifesto.js';
 import { CollectionDialog } from '../../../src/components/CollectionDialog';
 import collection from '../../fixtures/version-2/collection.json';
diff --git a/__tests__/src/components/CollectionInfo.test.js b/__tests__/src/components/CollectionInfo.test.js
index b990a49f7213b10ba4f5f65d302081c81e2d9329..4ff33dad4b600e01047ddfbeeaf44c4cd133280b 100644
--- a/__tests__/src/components/CollectionInfo.test.js
+++ b/__tests__/src/components/CollectionInfo.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import { CollectionInfo } from '../../../src/components/CollectionInfo';
 import CollapsibleSection from '../../../src/containers/CollapsibleSection';
 
diff --git a/__tests__/src/components/CompanionArea.test.js b/__tests__/src/components/CompanionArea.test.js
index 6e390ad13632ff646f0ee7c8c7996cc170aaaba3..9a43bc331f4e6c69c1c124f49a0c8404eedbb9d2 100644
--- a/__tests__/src/components/CompanionArea.test.js
+++ b/__tests__/src/components/CompanionArea.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Slide from '@material-ui/core/Slide';
-import ArrowLeftIcon from '@material-ui/icons/ArrowLeftSharp';
-import ArrowRightIcon from '@material-ui/icons/ArrowRightSharp';
+import Slide from '@mui/material/Slide';
+import ArrowLeftIcon from '@mui/icons-material/ArrowLeftSharp';
+import ArrowRightIcon from '@mui/icons-material/ArrowRightSharp';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import { CompanionArea } from '../../../src/components/CompanionArea';
 import CompanionWindowFactory from '../../../src/containers/CompanionWindowFactory';
diff --git a/__tests__/src/components/ErrorDialog.test.js b/__tests__/src/components/ErrorDialog.test.js
index 73eb88bb02d4d314c174858cf1af39e2019c7424..4ca71723ab22611044e51519eaee60e3b65d19f4 100644
--- a/__tests__/src/components/ErrorDialog.test.js
+++ b/__tests__/src/components/ErrorDialog.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContentText from '@material-ui/core/DialogContentText';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogContentText from '@mui/material/DialogContentText';
 import { ErrorDialog } from '../../../src/components/ErrorDialog';
 
 /**
diff --git a/__tests__/src/components/FullScreenButton.test.js b/__tests__/src/components/FullScreenButton.test.js
index 48701a823ad8859c11f73a1b14ee6bcfcc6c8d28..dde227e8e88091588e64115e18432dfbf3d3a702 100644
--- a/__tests__/src/components/FullScreenButton.test.js
+++ b/__tests__/src/components/FullScreenButton.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import FullscreenIcon from '@material-ui/icons/FullscreenSharp';
-import FullscreenExitIcon from '@material-ui/icons/FullscreenExitSharp';
+import FullscreenIcon from '@mui/icons-material/FullscreenSharp';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExitSharp';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import { FullScreenButton } from '../../../src/components/FullScreenButton';
 
diff --git a/__tests__/src/components/GalleryView.test.js b/__tests__/src/components/GalleryView.test.js
index 4a15795c472795bbc44dc813aebd928954cdea30..8fdbe907de3159eae205e14831b2afe8f51ead61 100644
--- a/__tests__/src/components/GalleryView.test.js
+++ b/__tests__/src/components/GalleryView.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import manifestJson from '../../fixtures/version-2/019.json';
 import { GalleryView } from '../../../src/components/GalleryView';
 import GalleryViewThumbnail from '../../../src/containers/GalleryViewThumbnail';
diff --git a/__tests__/src/components/GalleryViewThumbnail.test.js b/__tests__/src/components/GalleryViewThumbnail.test.js
index 70ab6d78c3a58627245c642fc64b7bc16fce4589..78406285a5dac85ac12f371d474c4b71c16f89f6 100644
--- a/__tests__/src/components/GalleryViewThumbnail.test.js
+++ b/__tests__/src/components/GalleryViewThumbnail.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
-import Chip from '@material-ui/core/Chip';
+import Chip from '@mui/material/Chip';
 import IntersectionObserver from '@researchgate/react-intersection-observer';
 import manifestJson from '../../fixtures/version-2/019.json';
 import { GalleryViewThumbnail } from '../../../src/components/GalleryViewThumbnail';
diff --git a/__tests__/src/components/IIIFThumbnail.test.js b/__tests__/src/components/IIIFThumbnail.test.js
index 5b60b112a9f825f34ae7f5d55713f0728d5bda00..28649910450a0a09350a1e0e0fd1a76e013bafac 100644
--- a/__tests__/src/components/IIIFThumbnail.test.js
+++ b/__tests__/src/components/IIIFThumbnail.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import IntersectionObserver from '@researchgate/react-intersection-observer';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { IIIFThumbnail } from '../../../src/components/IIIFThumbnail';
 
 /**
diff --git a/__tests__/src/components/LabelValueMetadata.test.js b/__tests__/src/components/LabelValueMetadata.test.js
index 2e3178bab9a6b4d222861dc2a0cc3004b40f32c1..6131de12c308b7fb550d2cfb0fe983cb44ae6846 100644
--- a/__tests__/src/components/LabelValueMetadata.test.js
+++ b/__tests__/src/components/LabelValueMetadata.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';
 import SanitizedHtml from '../../../src/containers/SanitizedHtml';
 
diff --git a/__tests__/src/components/LanguageSettings.test.js b/__tests__/src/components/LanguageSettings.test.js
index ff1731013b2dbeb8deebaabcdfd88f22081b016b..fc6c74a1cabc0c0c5ad2a9f3bd4c770db84b3548 100644
--- a/__tests__/src/components/LanguageSettings.test.js
+++ b/__tests__/src/components/LanguageSettings.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ListItemText from '@material-ui/core/ListItemText';
-import MenuItem from '@material-ui/core/MenuItem';
-import CheckIcon from '@material-ui/icons/CheckSharp';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import CheckIcon from '@mui/icons-material/CheckSharp';
 import { LanguageSettings } from '../../../src/components/LanguageSettings';
 
 /**
diff --git a/__tests__/src/components/LocalePicker.test.js b/__tests__/src/components/LocalePicker.test.js
index e12431caf73355b3fab0000beed1ab54e9f6a7ce..be35d36ae5a82b093334607ae71ae710b559e371 100644
--- a/__tests__/src/components/LocalePicker.test.js
+++ b/__tests__/src/components/LocalePicker.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
 import { LocalePicker } from '../../../src/components/LocalePicker';
 
 /**
diff --git a/__tests__/src/components/ManifestInfo.test.js b/__tests__/src/components/ManifestInfo.test.js
index 543a2da4c01d5995fbb067d3a987346812a9f231..0e334f412da4c32359a86317864146eb0998864e 100644
--- a/__tests__/src/components/ManifestInfo.test.js
+++ b/__tests__/src/components/ManifestInfo.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { ManifestInfo } from '../../../src/components/ManifestInfo';
 import { LabelValueMetadata } from '../../../src/components/LabelValueMetadata';
 import CollapsibleSection from '../../../src/containers/CollapsibleSection';
diff --git a/__tests__/src/components/ManifestListItem.test.js b/__tests__/src/components/ManifestListItem.test.js
index bd75e02b3d4fe3b48169f61e54e84b0de41e1ea5..21d5f3e8f332804c08bf731d1dfcf130757b9d73 100644
--- a/__tests__/src/components/ManifestListItem.test.js
+++ b/__tests__/src/components/ManifestListItem.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ButtonBase from '@material-ui/core/ButtonBase';
-import ListItem from '@material-ui/core/ListItem';
-import Typography from '@material-ui/core/Typography';
+import ButtonBase from '@mui/material/ButtonBase';
+import ListItem from '@mui/material/ListItem';
+import Typography from '@mui/material/Typography';
 import { ManifestListItem } from '../../../src/components/ManifestListItem';
 import ManifestListItemError from '../../../src/containers/ManifestListItemError';
 
diff --git a/__tests__/src/components/ManifestListItemError.test.js b/__tests__/src/components/ManifestListItemError.test.js
index 4bd6c599bae7393f036a0e21dd6aa3d4466b412c..1658032a822e6314f7301c0bd00b26d2fb64603d 100644
--- a/__tests__/src/components/ManifestListItemError.test.js
+++ b/__tests__/src/components/ManifestListItemError.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import { ManifestListItemError } from '../../../src/components/ManifestListItemError';
 
 /**
diff --git a/__tests__/src/components/ManifestRelatedLinks.test.js b/__tests__/src/components/ManifestRelatedLinks.test.js
index 4bf7994f71580435d722be7eac01ab860077b0b8..9653d2d02b7dd2c4c4b2c22dc24c4be68c4c4e3f 100644
--- a/__tests__/src/components/ManifestRelatedLinks.test.js
+++ b/__tests__/src/components/ManifestRelatedLinks.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
 import CollapsibleSection from '../../../src/containers/CollapsibleSection';
 import { ManifestRelatedLinks } from '../../../src/components/ManifestRelatedLinks';
 
diff --git a/__tests__/src/components/MiradorMenuButton.test.js b/__tests__/src/components/MiradorMenuButton.test.js
index ad865d63dab0cd05901265415cc6d263618c5ea0..c067637ba978541bb769c5e29f1cd611ec65db66 100644
--- a/__tests__/src/components/MiradorMenuButton.test.js
+++ b/__tests__/src/components/MiradorMenuButton.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Badge from '@material-ui/core/Badge';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
+import Badge from '@mui/material/Badge';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { MiradorMenuButton } from '../../../src/components/MiradorMenuButton';
 
 /**
diff --git a/__tests__/src/components/NestedMenu.test.js b/__tests__/src/components/NestedMenu.test.js
index 6db2b464cfb440374d01469df7be36e53c43ddbb..2a45f36e75257c2e21a554baac5d4b7da6f0cfac 100644
--- a/__tests__/src/components/NestedMenu.test.js
+++ b/__tests__/src/components/NestedMenu.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import ExpandLessIcon from '@material-ui/icons/ExpandLessSharp';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMoreSharp';
-import MenuItem from '@material-ui/core/MenuItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import ExpandLessIcon from '@mui/icons-material/ExpandLessSharp';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMoreSharp';
+import MenuItem from '@mui/material/MenuItem';
 import { NestedMenu } from '../../../src/components/NestedMenu';
 
 /**
diff --git a/__tests__/src/components/ScrollIndicatedDialogContent.test.js b/__tests__/src/components/ScrollIndicatedDialogContent.test.js
index 5cc43d5472303c65ffad635254c62d3f34c5e5bb..caeef34d13d2bf7c7a1c99910f6f227c02638823 100644
--- a/__tests__/src/components/ScrollIndicatedDialogContent.test.js
+++ b/__tests__/src/components/ScrollIndicatedDialogContent.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import DialogContent from '@material-ui/core/DialogContent';
+import DialogContent from '@mui/material/DialogContent';
 import { ScrollIndicatedDialogContent } from '../../../src/components/ScrollIndicatedDialogContent';
 
 /** Utility function to wrap  */
diff --git a/__tests__/src/components/SearchPanel.test.js b/__tests__/src/components/SearchPanel.test.js
index ce33f8e8816d7a0fabe7a8f42d2ebf564005c9da..9527d2d71a9a624ecc70e9dda70d0e64ab5b1d27 100644
--- a/__tests__/src/components/SearchPanel.test.js
+++ b/__tests__/src/components/SearchPanel.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import CompanionWindow from '../../../src/containers/CompanionWindow';
 import SearchResults from '../../../src/containers/SearchResults';
 import { SearchPanel } from '../../../src/components/SearchPanel';
diff --git a/__tests__/src/components/SearchPanelControls.test.js b/__tests__/src/components/SearchPanelControls.test.js
index 64c57780ca19c57ccfa76ff0b03ff1aa340eca34..19050b6d9fd98fa79fe0a89a6962018dd230e5ac 100644
--- a/__tests__/src/components/SearchPanelControls.test.js
+++ b/__tests__/src/components/SearchPanelControls.test.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import Input from '@material-ui/core/Input';
-import TextField from '@material-ui/core/TextField';
-import SearchIcon from '@material-ui/icons/SearchSharp';
+import Autocomplete from '@mui/material/Autocomplete';
+import CircularProgress from '@mui/material/CircularProgress';
+import Input from '@mui/material/Input';
+import TextField from '@mui/material/TextField';
+import SearchIcon from '@mui/icons-material/SearchSharp';
 import { SearchPanelControls } from '../../../src/components/SearchPanelControls';
 
 /**
diff --git a/__tests__/src/components/SearchResults.test.js b/__tests__/src/components/SearchResults.test.js
index 2ceaaba79604609a468c4c24c22b201fdf4bd970..3e48dcadff6852d2e60e4fa45a491dcefb4696fc 100644
--- a/__tests__/src/components/SearchResults.test.js
+++ b/__tests__/src/components/SearchResults.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Button from '@material-ui/core/Button';
+import Button from '@mui/material/Button';
 import { SearchResults } from '../../../src/components/SearchResults';
 import { ScrollTo } from '../../../src/components/ScrollTo';
 
diff --git a/__tests__/src/components/SidebarIndexItem.test.js b/__tests__/src/components/SidebarIndexItem.test.js
index fb4295ffed531ae77b04bc7022d0e0fa90f4403a..9c0c88b10a42d1a8aa35a4089a02e5593206f72a 100644
--- a/__tests__/src/components/SidebarIndexItem.test.js
+++ b/__tests__/src/components/SidebarIndexItem.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { SidebarIndexItem } from '../../../src/components/SidebarIndexItem';
 
 /** */
diff --git a/__tests__/src/components/SidebarIndexList.test.js b/__tests__/src/components/SidebarIndexList.test.js
index 364a7646ad812bb8ecfcdc30d41b0604cfa526c1..c92e036c6171846a0800257c8675fd5f5be18926 100644
--- a/__tests__/src/components/SidebarIndexList.test.js
+++ b/__tests__/src/components/SidebarIndexList.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
 import { Utils } from 'manifesto.js';
 import { SidebarIndexList } from '../../../src/components/SidebarIndexList';
 import SidebarIndexItem from '../../../src/containers/SidebarIndexItem';
diff --git a/__tests__/src/components/SidebarIndexTableOfContents.test.js b/__tests__/src/components/SidebarIndexTableOfContents.test.js
index c30044db7e6b9a0028151acafd6bdba79d3f524b..fe64442a622e3584d482460f5b57eaaa0d00942c 100644
--- a/__tests__/src/components/SidebarIndexTableOfContents.test.js
+++ b/__tests__/src/components/SidebarIndexTableOfContents.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import { Utils } from 'manifesto.js';
-import TreeItem from '@material-ui/lab/TreeItem';
-import TreeView from '@material-ui/lab/TreeView';
+import TreeItem from '@mui/lab/TreeItem';
+import TreeView from '@mui/lab/TreeView';
 import { SidebarIndexTableOfContents } from '../../../src/components/SidebarIndexTableOfContents';
 import manifestVersion2 from '../../fixtures/version-2/structures.json';
 import manifestVersion3 from '../../fixtures/version-3/structures.json';
diff --git a/__tests__/src/components/SidebarIndexThumbnail.test.js b/__tests__/src/components/SidebarIndexThumbnail.test.js
index 316bc8565d2d9a3ad396b6aaa431a929070ce85d..5a526e734d4561de1c55052a72c9323d285ad79c 100644
--- a/__tests__/src/components/SidebarIndexThumbnail.test.js
+++ b/__tests__/src/components/SidebarIndexThumbnail.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import { Utils } from 'manifesto.js';
 import fixture from '../../fixtures/version-2/019.json';
 import { SidebarIndexThumbnail } from '../../../src/components/SidebarIndexThumbnail';
diff --git a/__tests__/src/components/ViewerInfo.test.js b/__tests__/src/components/ViewerInfo.test.js
index d1abda25898eaa039371a096c4e248ba8848654e..effcb672321685bad6b93eac50e7064ef8e72f61 100644
--- a/__tests__/src/components/ViewerInfo.test.js
+++ b/__tests__/src/components/ViewerInfo.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { ViewerInfo } from '../../../src/components/ViewerInfo';
 
 /** create wrapper */
diff --git a/__tests__/src/components/ViewerNavigation.test.js b/__tests__/src/components/ViewerNavigation.test.js
index 36ffe068bdeae5cc577e68b58754d195717de906..190c11a60b1c45fa896712c2519da8e5517d27ff 100644
--- a/__tests__/src/components/ViewerNavigation.test.js
+++ b/__tests__/src/components/ViewerNavigation.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import NavigationIcon from '@material-ui/icons/PlayCircleOutlineSharp';
+import NavigationIcon from '@mui/icons-material/PlayCircleOutlineSharp';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import { ViewerNavigation } from '../../../src/components/ViewerNavigation';
 
diff --git a/__tests__/src/components/WindowAuthenticationBar.test.js b/__tests__/src/components/WindowAuthenticationBar.test.js
index bab84214dbeb67d2c55b716ef560f4e5993dfb9d..dfb99415ba06c54643ba943ad7af58020454df28 100644
--- a/__tests__/src/components/WindowAuthenticationBar.test.js
+++ b/__tests__/src/components/WindowAuthenticationBar.test.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Button from '@material-ui/core/Button';
-import Collapse from '@material-ui/core/Collapse';
-import DialogActions from '@material-ui/core/DialogActions';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Collapse from '@mui/material/Collapse';
+import DialogActions from '@mui/material/DialogActions';
+import Typography from '@mui/material/Typography';
 import SanitizedHtml from '../../../src/containers/SanitizedHtml';
 import { WindowAuthenticationBar } from '../../../src/components/WindowAuthenticationBar';
 
diff --git a/__tests__/src/components/WindowCanvasNavigationControls.test.js b/__tests__/src/components/WindowCanvasNavigationControls.test.js
index 3ef2240bef394ecb93eee7e3a365752e4387d702..4def31feec5e369dbb19af5532d44a57ec8b2f47 100644
--- a/__tests__/src/components/WindowCanvasNavigationControls.test.js
+++ b/__tests__/src/components/WindowCanvasNavigationControls.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-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 { WindowCanvasNavigationControls } from '../../../src/components/WindowCanvasNavigationControls';
 import ViewerInfo from '../../../src/containers/ViewerInfo';
 import ViewerNavigation from '../../../src/containers/ViewerNavigation';
diff --git a/__tests__/src/components/WindowList.test.js b/__tests__/src/components/WindowList.test.js
index 1162170938df764e8ab1b476ea2bbcd0c8dd1e48..afb94572b97d8460d894a7f13563524fe049bac4 100644
--- a/__tests__/src/components/WindowList.test.js
+++ b/__tests__/src/components/WindowList.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import ListItemText from '@material-ui/core/ListItemText';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
 import { WindowList } from '../../../src/components/WindowList';
 
 describe('WindowList', () => {
diff --git a/__tests__/src/components/WindowSideBar.test.js b/__tests__/src/components/WindowSideBar.test.js
index 167de0ec030195c746cfced5cf8a711c0e56cd24..80ad2b7e2f63d5f92a74d167889ed30036f0cd3f 100644
--- a/__tests__/src/components/WindowSideBar.test.js
+++ b/__tests__/src/components/WindowSideBar.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Drawer from '@material-ui/core/Drawer';
+import Drawer from '@mui/material/Drawer';
 import { WindowSideBar } from '../../../src/components/WindowSideBar';
 
 /** create wrapper */
diff --git a/__tests__/src/components/WindowSideBarAnnotationsPanel.test.js b/__tests__/src/components/WindowSideBarAnnotationsPanel.test.js
index 0ed16619527ba0b1cda0bb35ee209ccd60fefaf1..51b551ddfdb2054cbea33233d081048183af0247 100644
--- a/__tests__/src/components/WindowSideBarAnnotationsPanel.test.js
+++ b/__tests__/src/components/WindowSideBarAnnotationsPanel.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import CanvasAnnotations from '../../../src/containers/CanvasAnnotations';
 import { WindowSideBarAnnotationsPanel } from '../../../src/components/WindowSideBarAnnotationsPanel';
 
diff --git a/__tests__/src/components/WindowSideBarButtons.test.js b/__tests__/src/components/WindowSideBarButtons.test.js
index abcb15d04cb79ece827cc6d1902f13e57995a69a..da6f863b6074bf25b8b9d766976a1f42d0c910aa 100644
--- a/__tests__/src/components/WindowSideBarButtons.test.js
+++ b/__tests__/src/components/WindowSideBarButtons.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import Badge from '@material-ui/core/Badge';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
+import Badge from '@mui/material/Badge';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
 import { WindowSideBarButtons } from '../../../src/components/WindowSideBarButtons';
 
 /** create wrapper */
diff --git a/__tests__/src/components/WindowThumbnailSettings.test.js b/__tests__/src/components/WindowThumbnailSettings.test.js
index 5a6c5282dfc2c4dc56c0dac3299626e03ba667f1..1fc92bcf861b0a628cd44b1fde011522fa54dcfc 100644
--- a/__tests__/src/components/WindowThumbnailSettings.test.js
+++ b/__tests__/src/components/WindowThumbnailSettings.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import MenuItem from '@material-ui/core/MenuItem';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import ListSubheader from '@mui/material/ListSubheader';
+import MenuItem from '@mui/material/MenuItem';
 import { WindowThumbnailSettings } from '../../../src/components/WindowThumbnailSettings';
 
 /** create wrapper */
diff --git a/__tests__/src/components/WindowTopBar.test.js b/__tests__/src/components/WindowTopBar.test.js
index 92c832beb115b1e2d9d0ee7c22157b2ee555cfa6..802d980784661422b89bbc9dbffd14bf651ecc38 100644
--- a/__tests__/src/components/WindowTopBar.test.js
+++ b/__tests__/src/components/WindowTopBar.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import Toolbar from '@material-ui/core/Toolbar';
-import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import AppBar from '@mui/material/AppBar';
 
 import WindowTopMenuButton from '../../../src/containers/WindowTopMenuButton';
 import WindowTopBarPluginArea from '../../../src/containers/WindowTopBarPluginArea';
diff --git a/__tests__/src/components/WindowTopBarPluginMenu.test.js b/__tests__/src/components/WindowTopBarPluginMenu.test.js
index c27ef214d9867e68ce60e042f83bc09e827cfe19..9c0807a93b350f1f5063b390ec5e7b7c7953a11f 100644
--- a/__tests__/src/components/WindowTopBarPluginMenu.test.js
+++ b/__tests__/src/components/WindowTopBarPluginMenu.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Menu from '@material-ui/core/Menu';
+import Menu from '@mui/material/Menu';
 import MiradorMenuButton from '../../../src/containers/MiradorMenuButton';
 import { PluginHook } from '../../../src/components/PluginHook';
 import { WindowTopBarPluginMenu } from '../../../src/components/WindowTopBarPluginMenu';
diff --git a/__tests__/src/components/WindowTopBarTitle.test.js b/__tests__/src/components/WindowTopBarTitle.test.js
index f3b01c10e2b080db1f03ce955ee04ebf250e02f8..ff292ffccc777f591c69ec0c04ccba13f5209f69 100644
--- a/__tests__/src/components/WindowTopBarTitle.test.js
+++ b/__tests__/src/components/WindowTopBarTitle.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@mui/material/Skeleton';
 
 import { WindowTopBarTitle } from '../../../src/components/WindowTopBarTitle';
 
diff --git a/__tests__/src/components/WindowTopMenu.test.js b/__tests__/src/components/WindowTopMenu.test.js
index 3eacc72fb4360e0e3e0667da11272f4f5dc5f35f..7558d39f1263f71128ef5c566f91ebcc1df8cbc6 100644
--- a/__tests__/src/components/WindowTopMenu.test.js
+++ b/__tests__/src/components/WindowTopMenu.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Menu from '@material-ui/core/Menu';
+import Menu from '@mui/material/Menu';
 import WindowThumbnailSettings from '../../../src/containers/WindowThumbnailSettings';
 import WindowViewSettings from '../../../src/containers/WindowViewSettings';
 import { WindowTopMenu } from '../../../src/components/WindowTopMenu';
diff --git a/__tests__/src/components/WindowViewSettings.test.js b/__tests__/src/components/WindowViewSettings.test.js
index 51886769e237f6b4c4035a82e9c88fbc129faf7e..1e6836a2e2911df621257e1a0f68e9ada9743afc 100644
--- a/__tests__/src/components/WindowViewSettings.test.js
+++ b/__tests__/src/components/WindowViewSettings.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import MenuItem from '@material-ui/core/MenuItem';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import ListSubheader from '@mui/material/ListSubheader';
+import MenuItem from '@mui/material/MenuItem';
 import { WindowViewSettings } from '../../../src/components/WindowViewSettings';
 
 /** create wrapper */
diff --git a/__tests__/src/components/Workspace.test.js b/__tests__/src/components/Workspace.test.js
index 8852772d759a7f9c53b7b36c7a9adab387a12357..18103f6dd0dc7c5dc04f556d45ce3f59ca2aaea6 100644
--- a/__tests__/src/components/Workspace.test.js
+++ b/__tests__/src/components/Workspace.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import WorkspaceMosaic from '../../../src/containers/WorkspaceMosaic';
 import WorkspaceElastic from '../../../src/containers/WorkspaceElastic';
 import Window from '../../../src/containers/Window';
diff --git a/__tests__/src/components/WorkspaceAdd.test.js b/__tests__/src/components/WorkspaceAdd.test.js
index 9398f7e13ba20dadff809a6f03ce645d1d0b0b85..1c4bfca2b008d0b08366d0039ed5a5c745f9e981 100644
--- a/__tests__/src/components/WorkspaceAdd.test.js
+++ b/__tests__/src/components/WorkspaceAdd.test.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import AppBar from '@material-ui/core/AppBar';
-import Drawer from '@material-ui/core/Drawer';
-import Fab from '@material-ui/core/Fab';
-import Typography from '@material-ui/core/Typography';
+import AppBar from '@mui/material/AppBar';
+import Drawer from '@mui/material/Drawer';
+import Fab from '@mui/material/Fab';
+import Typography from '@mui/material/Typography';
 import { WorkspaceAdd } from '../../../src/components/WorkspaceAdd';
 import ManifestListItem from '../../../src/containers/ManifestListItem';
 import ManifestForm from '../../../src/containers/ManifestForm';
diff --git a/__tests__/src/components/WorkspaceAddButton.test.js b/__tests__/src/components/WorkspaceAddButton.test.js
index cd1a65c0dcf1ea4d416dc8e3e7e314ee3fb70159..6ef43e98b8cba563a7a32b32757d069f9f401ba4 100644
--- a/__tests__/src/components/WorkspaceAddButton.test.js
+++ b/__tests__/src/components/WorkspaceAddButton.test.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Fab from '@material-ui/core/Fab';
-import Typography from '@material-ui/core/Typography';
-import AddIcon from '@material-ui/icons/AddSharp';
-import CloseIcon from '@material-ui/icons/CloseSharp';
+import Fab from '@mui/material/Fab';
+import Typography from '@mui/material/Typography';
+import AddIcon from '@mui/icons-material/AddSharp';
+import CloseIcon from '@mui/icons-material/CloseSharp';
 import { WorkspaceAddButton } from '../../../src/components/WorkspaceAddButton';
 
 /** create wrapper */
diff --git a/__tests__/src/components/WorkspaceControlPanel.test.js b/__tests__/src/components/WorkspaceControlPanel.test.js
index 591ca3650db719d36c6c5757e730b1329afe6a9c..36778a2d4bacc099d6fcccb7d6ac890cea9a4502 100644
--- a/__tests__/src/components/WorkspaceControlPanel.test.js
+++ b/__tests__/src/components/WorkspaceControlPanel.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import AppBar from '@material-ui/core/AppBar';
+import AppBar from '@mui/material/AppBar';
 import createStore from '../../../src/state/createStore';
 import * as actions from '../../../src/state/actions';
 import WorkspaceAddButton from '../../../src/containers/WorkspaceAddButton';
diff --git a/__tests__/src/components/WorkspaceExport.test.js b/__tests__/src/components/WorkspaceExport.test.js
index 94450b51664138f1d27869b0958a0644ab711980..5d1dcafcd26aca717061f2a91397d5b2cac13575 100644
--- a/__tests__/src/components/WorkspaceExport.test.js
+++ b/__tests__/src/components/WorkspaceExport.test.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Dialog from '@material-ui/core/Dialog';
-import Button from '@material-ui/core/Button';
-import Snackbar from '@material-ui/core/Snackbar';
+import Dialog from '@mui/material/Dialog';
+import Button from '@mui/material/Button';
+import Snackbar from '@mui/material/Snackbar';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { WorkspaceExport } from '../../../src/components/WorkspaceExport';
 
diff --git a/__tests__/src/components/WorkspaceImport.test.js b/__tests__/src/components/WorkspaceImport.test.js
index e750a2bd41d45857eb250fd7509023b098d0b43a..614c04a7ecc4e01085ba4955b8de30cc4b72037c 100644
--- a/__tests__/src/components/WorkspaceImport.test.js
+++ b/__tests__/src/components/WorkspaceImport.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Dialog from '@material-ui/core/Dialog';
-import TextField from '@material-ui/core/TextField';
+import Dialog from '@mui/material/Dialog';
+import TextField from '@mui/material/TextField';
 import { WorkspaceImport } from '../../../src/components/WorkspaceImport';
 
 describe('WorkspaceImport', () => {
diff --git a/__tests__/src/components/WorkspaceMenu.test.js b/__tests__/src/components/WorkspaceMenu.test.js
index ab0087528614d6737655489c7536193c93a9b60e..32e783b9b448ea149571386d23844b2f5df85e20 100644
--- a/__tests__/src/components/WorkspaceMenu.test.js
+++ b/__tests__/src/components/WorkspaceMenu.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
 import { WorkspaceMenu } from '../../../src/components/WorkspaceMenu';
 
 /** */
diff --git a/__tests__/src/components/WorkspaceOptionsMenu.test.js b/__tests__/src/components/WorkspaceOptionsMenu.test.js
index ec1401c9011c0d50269ea1addda228a676b177c3..9c90f014370c88ddc767a26c853c3118161bc55d 100644
--- a/__tests__/src/components/WorkspaceOptionsMenu.test.js
+++ b/__tests__/src/components/WorkspaceOptionsMenu.test.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import MenuItem from '@material-ui/core/MenuItem';
+import MenuItem from '@mui/material/MenuItem';
 import WorkspaceExport from '../../../src/containers/WorkspaceExport';
 import WorkspaceImport from '../../../src/containers/WorkspaceImport';
 import { WorkspaceOptionsMenu } from '../../../src/components/WorkspaceOptionsMenu';
diff --git a/__tests__/src/components/WorkspaceSelectionDialog.test.js b/__tests__/src/components/WorkspaceSelectionDialog.test.js
index bd40f59ea8721fa6c258d6365af5f37e21fbccd2..c60bd79205845b6e93007590e3b5362967602101 100644
--- a/__tests__/src/components/WorkspaceSelectionDialog.test.js
+++ b/__tests__/src/components/WorkspaceSelectionDialog.test.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import Dialog from '@material-ui/core/Dialog';
-import MenuItem from '@material-ui/core/MenuItem';
+import Dialog from '@mui/material/Dialog';
+import MenuItem from '@mui/material/MenuItem';
 import { WorkspaceSelectionDialog } from '../../../src/components/WorkspaceSelectionDialog';
 
 describe('WorkspaceSettings', () => {
diff --git a/src/components/AnnotationSettings.js b/src/components/AnnotationSettings.js
index 9e764a4cecb31945bee5b9f7486529588ef1b00e..5f8c7978f9e071f4c2c669934ed87b7a8c4be851 100644
--- a/src/components/AnnotationSettings.js
+++ b/src/components/AnnotationSettings.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import SyncIcon from '@material-ui/icons/Sync';
-import SyncDisabledIcon from '@material-ui/icons/SyncDisabled';
-import VisibilityIcon from '@material-ui/icons/VisibilitySharp';
-import VisibilityOffIcon from '@material-ui/icons/VisibilityOffSharp';
+import SyncIcon from '@mui/icons-material/Sync';
+import SyncDisabledIcon from '@mui/icons-material/SyncDisabled';
+import VisibilityIcon from '@mui/icons-material/VisibilitySharp';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOffSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 
 /**
diff --git a/src/components/AnnotationsOverlayVideo.js b/src/components/AnnotationsOverlayVideo.js
index 7e1a5f436a7bb739f2454c372593380c7204b030..aca671733a5590578246582181638650f5874cbd 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/AppProviders.js b/src/components/AppProviders.js
index aeeedc34b928f6622373be9005b843b6f3755451..f229bd1d3592862248631a2b879a16d076651e3e 100644
--- a/src/components/AppProviders.js
+++ b/src/components/AppProviders.js
@@ -3,9 +3,10 @@ import PropTypes from 'prop-types';
 import Fullscreen from 'react-full-screen';
 import { I18nextProvider } from 'react-i18next';
 import { LiveAnnouncer } from 'react-aria-live';
-import {
-  ThemeProvider, StylesProvider, createTheme, jssPreset, createGenerateClassName,
-} from '@material-ui/core/styles';
+import { ThemeProvider, StyledEngineProvider, createTheme, adaptV4Theme } from '@mui/material/styles';
+import StylesProvider from '@mui/styles/StylesProvider';
+import jssPreset from '@mui/styles/jssPreset';
+import createGenerateClassName from '@mui/styles/createGenerateClassName';
 import { DndContext, DndProvider } from 'react-dnd';
 import MultiBackend from 'react-dnd-multi-backend';
 import HTML5toTouch from 'react-dnd-multi-backend/dist/cjs/HTML5toTouch';
@@ -99,18 +100,20 @@ export class AppProviders extends Component {
       >
         <I18nextProvider i18n={this.i18n}>
           <LiveAnnouncer>
-            <ThemeProvider
-              theme={createTheme(theme)}
-            >
-              <StylesProvider
-                jss={create({ plugins: [...jssPreset().plugins, rtl()] })}
-                generateClassName={generateClassName}
+            <StyledEngineProvider injectFirst>
+              <ThemeProvider
+                theme={createTheme(adaptV4Theme(theme))}
               >
-                <MaybeDndProvider dndManager={dndManager}>
-                  {children}
-                </MaybeDndProvider>
-              </StylesProvider>
-            </ThemeProvider>
+                <StylesProvider
+                  jss={create({ plugins: [...jssPreset().plugins, rtl()] })}
+                  generateClassName={generateClassName}
+                >
+                  <MaybeDndProvider dndManager={dndManager}>
+                    {children}
+                  </MaybeDndProvider>
+                </StylesProvider>
+              </ThemeProvider>
+            </StyledEngineProvider>
           </LiveAnnouncer>
         </I18nextProvider>
       </Fullscreen>
diff --git a/src/components/AttributionPanel.js b/src/components/AttributionPanel.js
index dc6e2462eeedb79adba97f10e03313230da35e52..a984d1d6681fb864bbbf2d4e2c000fcbb6de5a4e 100644
--- a/src/components/AttributionPanel.js
+++ b/src/components/AttributionPanel.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
-import Skeleton from '@material-ui/lab/Skeleton';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
+import Skeleton from '@mui/material/Skeleton';
 import { Img } from 'react-image';
 import CompanionWindow from '../containers/CompanionWindow';
 import { LabelValueMetadata } from './LabelValueMetadata';
@@ -63,7 +63,7 @@ export class AttributionPanel extends Component {
               role="presentation"
               className={classes.logo}
               unloader={
-                <Skeleton className={classes.placeholder} variant="rect" height={60} width={60} />
+                <Skeleton className={classes.placeholder} variant="rectangular" height={60} width={60} />
               }
             />
           </div>
diff --git a/src/components/Branding.js b/src/components/Branding.js
index 6c9b2b15fb296441f5466cc81bef500f91af2c11..ffb1d27fbec00013347845fcd16ed2acf46d6a1c 100644
--- a/src/components/Branding.js
+++ b/src/components/Branding.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import IconButton from '@material-ui/core/IconButton';
-import Typography from '@material-ui/core/Typography';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
 import MiradorIcon from './icons/MiradorIcon';
 
 /**
@@ -25,7 +25,7 @@ export class Branding extends Component {
             href="https://projectmirador.org"
             target="_blank"
             rel="noopener"
-          >
+            size="large">
             <MiradorIcon aria-label={t('aboutMirador')} titleAccess={t('aboutMirador')} fontSize="large" />
           </IconButton>
         </Typography>
diff --git a/src/components/CanvasAnnotations.js b/src/components/CanvasAnnotations.js
index 6b8e4e87b9cf3ba60c00a237aa53a43a4a35db9d..9046f281c6210e98fcb53276f738923a814a5521 100644
--- a/src/components/CanvasAnnotations.js
+++ b/src/components/CanvasAnnotations.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import Chip from '@material-ui/core/Chip';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import Typography from '@material-ui/core/Typography';
+import Chip from '@mui/material/Chip';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
 import SanitizedHtml from '../containers/SanitizedHtml';
 import { ScrollTo } from './ScrollTo';
 
diff --git a/src/components/CanvasInfo.js b/src/components/CanvasInfo.js
index fb735316ea8474220c138f8ddfca0c6bfdf50183..d12ddbe91b60e44ac8add12142bf8be79663d6ae 100644
--- a/src/components/CanvasInfo.js
+++ b/src/components/CanvasInfo.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import CollapsibleSection from '../containers/CollapsibleSection';
 import SanitizedHtml from '../containers/SanitizedHtml';
 import { LabelValueMetadata } from './LabelValueMetadata';
diff --git a/src/components/CanvasLayers.js b/src/components/CanvasLayers.js
index 3058725144710ac1240ba79139e02abec5aadff9..d5d245fca7a79656a22c1d9b7d1b4fd605aeebd3 100644
--- a/src/components/CanvasLayers.js
+++ b/src/components/CanvasLayers.js
@@ -2,18 +2,18 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { v4 as uuid } from 'uuid';
-import Input from '@material-ui/core/Input';
-import InputAdornment from '@material-ui/core/InputAdornment';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import Slider from '@material-ui/core/Slider';
-import Tooltip from '@material-ui/core/Tooltip';
-import DragHandleIcon from '@material-ui/icons/DragHandleSharp';
-import MoveToTopIcon from '@material-ui/icons/VerticalAlignTopSharp';
-import VisibilityIcon from '@material-ui/icons/VisibilitySharp';
-import VisibilityOffIcon from '@material-ui/icons/VisibilityOffSharp';
-import OpacityIcon from '@material-ui/icons/OpacitySharp';
-import Typography from '@material-ui/core/Typography';
+import Input from '@mui/material/Input';
+import InputAdornment from '@mui/material/InputAdornment';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Slider from '@mui/material/Slider';
+import Tooltip from '@mui/material/Tooltip';
+import DragHandleIcon from '@mui/icons-material/DragHandleSharp';
+import MoveToTopIcon from '@mui/icons-material/VerticalAlignTopSharp';
+import VisibilityIcon from '@mui/icons-material/VisibilitySharp';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOffSharp';
+import OpacityIcon from '@mui/icons-material/OpacitySharp';
+import Typography from '@mui/material/Typography';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import IIIFThumbnail from '../containers/IIIFThumbnail';
diff --git a/src/components/ChangeThemeDialog.js b/src/components/ChangeThemeDialog.js
index e5bb6102de498e007c2feb6130c8f645d3efbe8e..7d4f760309dcb81daca2271522f620029845941e 100644
--- a/src/components/ChangeThemeDialog.js
+++ b/src/components/ChangeThemeDialog.js
@@ -8,8 +8,8 @@ import {
   MenuItem,
   Typography,
   DialogContent,
-} from '@material-ui/core';
-import PaletteIcon from '@material-ui/icons/PaletteSharp';
+} from '@mui/material';
+import PaletteIcon from '@mui/icons-material/PaletteSharp';
 import PropTypes from 'prop-types';
 
 /**
@@ -58,10 +58,11 @@ export class ChangeThemeDialog extends Component {
     return (
       <Dialog
         onClose={handleClose}
-        onEntered={dialog => ChangeThemeDialog.setInitialFocus(dialog, selectedTheme)}
         open={open}
-      >
-        <DialogTitle id="change-the-dialog-title" disableTypography>
+        TransitionProps={{
+          onEntered: dialog => ChangeThemeDialog.setInitialFocus(dialog, selectedTheme)
+        }}>
+        <DialogTitle id="change-the-dialog-title">
           <Typography variant="h2">
             {t('changeTheme')}
           </Typography>
diff --git a/src/components/CollapsibleSection.js b/src/components/CollapsibleSection.js
index eca0a2ff33d747c7e6782acebd50774c9de49b3b..d5c3ef80c1338507715e0b677739c45fc9652d2f 100644
--- a/src/components/CollapsibleSection.js
+++ b/src/components/CollapsibleSection.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import KeyboardArrowDown from '@material-ui/icons/KeyboardArrowDownSharp';
-import KeyboardArrowUp from '@material-ui/icons/KeyboardArrowUpSharp';
+import Typography from '@mui/material/Typography';
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDownSharp';
+import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUpSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 
 /**
diff --git a/src/components/CollectionDialog.js b/src/components/CollectionDialog.js
index df4d9012427cfeb2757ff7b6bd375731d2b6986f..d344440b9705ad105b78d849ebbc6254b73f515d 100644
--- a/src/components/CollectionDialog.js
+++ b/src/components/CollectionDialog.js
@@ -10,9 +10,9 @@ import {
   MenuList,
   MenuItem,
   Typography,
-} from '@material-ui/core';
-import ArrowBackIcon from '@material-ui/icons/ArrowBackSharp';
-import Skeleton from '@material-ui/lab/Skeleton';
+} from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBackSharp';
+import Skeleton from '@mui/material/Skeleton';
 import asArray from '../lib/asArray';
 import { LabelValueMetadata } from './LabelValueMetadata';
 import CollapsibleSection from '../containers/CollapsibleSection';
@@ -118,7 +118,7 @@ export class CollectionDialog extends Component {
         container={this.dialogContainer()}
         BackdropProps={this.backdropProps()}
       >
-        <DialogTitle id="select-collection" disableTypography>
+        <DialogTitle id="select-collection">
           <Skeleton className={classes.placeholder} variant="text" />
         </DialogTitle>
         <ScrollIndicatedDialogContent>
@@ -179,7 +179,7 @@ export class CollectionDialog extends Component {
         BackdropProps={this.backdropProps()}
         open
       >
-        <DialogTitle id="select-collection" disableTypography>
+        <DialogTitle id="select-collection">
           <Typography component="div" variant="overline">
             { t(isMultipart ? 'multipartCollection' : 'collection') }
           </Typography>
diff --git a/src/components/CollectionInfo.js b/src/components/CollectionInfo.js
index 15670b1c98db518dddeac26431b457bf1e1596a5..6012c78b765292a8daad8429bb72afd614802edd 100644
--- a/src/components/CollectionInfo.js
+++ b/src/components/CollectionInfo.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
-import ViewListIcon from '@material-ui/icons/ViewListSharp';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
+import ViewListIcon from '@mui/icons-material/ViewListSharp';
 import CollapsibleSection from '../containers/CollapsibleSection';
 
 /**
diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js
index fbdaf0c734dc9b77f8a858a719c2d0b1df695d88..bf978cef3f7b1e4d058008f824ae974423d912e6 100644
--- a/src/components/CompanionArea.js
+++ b/src/components/CompanionArea.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Slide from '@material-ui/core/Slide';
-import ArrowLeftIcon from '@material-ui/icons/ArrowLeftSharp';
-import ArrowRightIcon from '@material-ui/icons/ArrowRightSharp';
+import Slide from '@mui/material/Slide';
+import ArrowLeftIcon from '@mui/icons-material/ArrowLeftSharp';
+import ArrowRightIcon from '@mui/icons-material/ArrowRightSharp';
 import CompanionWindowFactory from '../containers/CompanionWindowFactory';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import ns from '../config/css-ns';
diff --git a/src/components/CompanionWindow.js b/src/components/CompanionWindow.js
index 7026555820a04939249d23f0dc047dfe92873529..093f85916338fec609c74dd399ee02c1338b9433 100644
--- a/src/components/CompanionWindow.js
+++ b/src/components/CompanionWindow.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import CloseIcon from '@material-ui/icons/CloseSharp';
-import OpenInNewIcon from '@material-ui/icons/OpenInNewSharp';
-import MoveIcon from '@material-ui/icons/DragIndicatorSharp';
-import Paper from '@material-ui/core/Paper';
-import Typography from '@material-ui/core/Typography';
-import Toolbar from '@material-ui/core/Toolbar';
+import CloseIcon from '@mui/icons-material/CloseSharp';
+import OpenInNewIcon from '@mui/icons-material/OpenInNewSharp';
+import MoveIcon from '@mui/icons-material/DragIndicatorSharp';
+import Paper from '@mui/material/Paper';
+import Typography from '@mui/material/Typography';
+import Toolbar from '@mui/material/Toolbar';
 import { Rnd } from 'react-rnd';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import ns from '../config/css-ns';
diff --git a/src/components/ErrorContent.js b/src/components/ErrorContent.js
index f122e0c228d9b5e0f72d153ff230a893aa06c807..5e83a3675e741ba00c0a6abe3ecf418f33721dc5 100644
--- a/src/components/ErrorContent.js
+++ b/src/components/ErrorContent.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
-import Typography from '@material-ui/core/Typography';
-import Alert from '@material-ui/lab/Alert';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
+import Typography from '@mui/material/Typography';
+import Alert from '@mui/material/Alert';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { PluginHook } from './PluginHook';
 
 /** */
diff --git a/src/components/ErrorDialog.js b/src/components/ErrorDialog.js
index fcd83eaa3ac57b400d2fa160af2cc9638b97b4bd..7552287f68c061806107ee9665b634e2f5d0e391 100644
--- a/src/components/ErrorDialog.js
+++ b/src/components/ErrorDialog.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
 import PropTypes from 'prop-types';
-import { DialogActions, DialogContentText, Typography } from '@material-ui/core';
-import Button from '@material-ui/core/Button';
+import { DialogActions, DialogContentText, Typography } from '@mui/material';
+import Button from '@mui/material/Button';
 import { isUndefined } from 'lodash';
 
 /**
@@ -28,7 +28,7 @@ export class ErrorDialog extends Component {
         onClose={() => removeError(error.id)}
         open={hasError}
       >
-        <DialogTitle id="error-dialog-title" disableTypography>
+        <DialogTitle id="error-dialog-title">
           <Typography variant="h2">{t('errorDialogTitle')}</Typography>
         </DialogTitle>
         <DialogContent disableTypography>
diff --git a/src/components/FullScreenButton.js b/src/components/FullScreenButton.js
index d51a4509c0be27d07e8916b9f1498f28a2b6c24c..7b01d118e74ca86f05ba8873049dea815b82f68f 100644
--- a/src/components/FullScreenButton.js
+++ b/src/components/FullScreenButton.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import FullscreenIcon from '@material-ui/icons/FullscreenSharp';
-import FullscreenExitIcon from '@material-ui/icons/FullscreenExitSharp';
+import FullscreenIcon from '@mui/icons-material/FullscreenSharp';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExitSharp';
 import PropTypes from 'prop-types';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 /**
diff --git a/src/components/GalleryView.js b/src/components/GalleryView.js
index 3cd865608fbaf4983939e720b51b6704fa0620a7..39ad41644604371e9bb66837adff49e1c2e8582f 100644
--- a/src/components/GalleryView.js
+++ b/src/components/GalleryView.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import GalleryViewThumbnail from '../containers/GalleryViewThumbnail';
 
 /**
diff --git a/src/components/GalleryViewThumbnail.js b/src/components/GalleryViewThumbnail.js
index acfe18aae196a5a4e489918c88a556042274800f..8ea2ccf205fb18c8b7f8a6129d9751eb2cd695e0 100644
--- a/src/components/GalleryViewThumbnail.js
+++ b/src/components/GalleryViewThumbnail.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Avatar from '@material-ui/core/Avatar';
-import Chip from '@material-ui/core/Chip';
-import AnnotationIcon from '@material-ui/icons/CommentSharp';
-import SearchIcon from '@material-ui/icons/SearchSharp';
+import Avatar from '@mui/material/Avatar';
+import Chip from '@mui/material/Chip';
+import AnnotationIcon from '@mui/icons-material/CommentSharp';
+import SearchIcon from '@mui/icons-material/SearchSharp';
 import classNames from 'classnames';
 import 'intersection-observer'; // polyfill needed for Safari
 import IntersectionObserver from '@researchgate/react-intersection-observer';
@@ -140,7 +140,7 @@ export class GalleryViewThumbnail extends Component {
               { searchAnnotationsCount > 0 && (
                 <Chip
                   avatar={(
-                    <Avatar className={classes.avatar} classes={{ circle: classes.avatarIcon }}>
+                    <Avatar className={classes.avatar} classes={{ circular: classes.avatarIcon }}>
                       <SearchIcon fontSize="small" />
                     </Avatar>
                   )}
@@ -152,7 +152,7 @@ export class GalleryViewThumbnail extends Component {
               { (annotationsCount || 0) > 0 && (
                 <Chip
                   avatar={(
-                    <Avatar className={classes.avatar} classes={{ circle: classes.avatarIcon }}>
+                    <Avatar className={classes.avatar} classes={{ circular: classes.avatarIcon }}>
                       <AnnotationIcon className={classes.annotationIcon} />
                     </Avatar>
                   )}
diff --git a/src/components/IIIFDropTarget.js b/src/components/IIIFDropTarget.js
index 8bbbc77fff96925d1372499784c3ab773fe72f11..7b8580952b4fb7577923b31ce47db58acf901b76 100644
--- a/src/components/IIIFDropTarget.js
+++ b/src/components/IIIFDropTarget.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Backdrop from '@material-ui/core/Backdrop';
-import InsertDriveFileSharpIcon from '@material-ui/icons/InsertDriveFileSharp';
-import { grey } from '@material-ui/core/colors';
+import Backdrop from '@mui/material/Backdrop';
+import InsertDriveFileSharpIcon from '@mui/icons-material/InsertDriveFileSharp';
+import { grey } from '@mui/material/colors';
 import { v4 as uuid } from 'uuid';
 import { NativeTypes } from 'react-dnd-html5-backend';
 import { useDrop } from 'react-dnd';
diff --git a/src/components/IIIFThumbnail.js b/src/components/IIIFThumbnail.js
index c942f4824231739d722ab08c9682abdc3165148f..1d51b3d2d4756ce62260b0c6f204694294ea7082 100644
--- a/src/components/IIIFThumbnail.js
+++ b/src/components/IIIFThumbnail.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import 'intersection-observer'; // polyfill needed for Safari
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import IntersectionObserver from '@researchgate/react-intersection-observer';
 import classNames from 'classnames';
 import getThumbnail from '../lib/ThumbnailFactory';
diff --git a/src/components/LabelValueMetadata.js b/src/components/LabelValueMetadata.js
index 91fd0b40d3305341d53c50f0bbc58ab67913db2d..67acb3d78a6e178bfc844d701214a3c32d30136a 100644
--- a/src/components/LabelValueMetadata.js
+++ b/src/components/LabelValueMetadata.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import SanitizedHtml from '../containers/SanitizedHtml';
 import ns from '../config/css-ns';
 
diff --git a/src/components/LanguageSettings.js b/src/components/LanguageSettings.js
index 5296dee060e49427e9829f586159a44abe96f7b8..75e31b1205da94d19fded67ef168ca342aa58664 100644
--- a/src/components/LanguageSettings.js
+++ b/src/components/LanguageSettings.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import MenuItem from '@material-ui/core/MenuItem';
-import CheckIcon from '@material-ui/icons/CheckSharp';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import CheckIcon from '@mui/icons-material/CheckSharp';
 import PropTypes from 'prop-types';
 
 /**
diff --git a/src/components/LocalePicker.js b/src/components/LocalePicker.js
index 24cf3bd7b8d864036f46323de5d2ff34eda7ccc2..e9a0842c299e02a8609f9f60ebea6f5745d4b8a2 100644
--- a/src/components/LocalePicker.js
+++ b/src/components/LocalePicker.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import MenuItem from '@material-ui/core/MenuItem';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import Typography from '@material-ui/core/Typography';
+import MenuItem from '@mui/material/MenuItem';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import Typography from '@mui/material/Typography';
 
 /**
  * Provide a locale picker
diff --git a/src/components/ManifestForm.js b/src/components/ManifestForm.js
index 19702f071430b2d07f6f29889e811a012ae056d6..2a5cd2f49f41fd741a1434b7c21a3f4430151bac 100644
--- a/src/components/ManifestForm.js
+++ b/src/components/ManifestForm.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
 
 /**
  * Provides a form for user input of a manifest url
diff --git a/src/components/ManifestInfo.js b/src/components/ManifestInfo.js
index d597983c14d7761f51b677196d5a1a3aa8e69156..83db62ed3e81dd975b2fbf695eaad9fb5f931fe4 100644
--- a/src/components/ManifestInfo.js
+++ b/src/components/ManifestInfo.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import CollapsibleSection from '../containers/CollapsibleSection';
 import SanitizedHtml from '../containers/SanitizedHtml';
 import { LabelValueMetadata } from './LabelValueMetadata';
diff --git a/src/components/ManifestListItem.js b/src/components/ManifestListItem.js
index edf14971b5ccc6f7115e67a7b92daebb2768ca50..99c1cf5e9b6e4b1ce26e64a2797e2c6f0c2e23cb 100644
--- a/src/components/ManifestListItem.js
+++ b/src/components/ManifestListItem.js
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ListItem from '@material-ui/core/ListItem';
-import ButtonBase from '@material-ui/core/ButtonBase';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import Skeleton from '@material-ui/lab/Skeleton';
+import ListItem from '@mui/material/ListItem';
+import ButtonBase from '@mui/material/ButtonBase';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import Skeleton from '@mui/material/Skeleton';
 import { Img } from 'react-image';
 import ManifestListItemError from '../containers/ManifestListItemError';
 import ns from '../config/css-ns';
@@ -68,7 +68,7 @@ export class ManifestListItem extends React.Component {
     const placeholder = (
       <Grid container className={ns('manifest-list-item')} spacing={2}>
         <Grid item xs={3} sm={2}>
-          <Skeleton className={classes.placeholder} variant="rect" height={80} width={120} />
+          <Skeleton className={classes.placeholder} variant="rectangular" height={80} width={120} />
         </Grid>
         <Grid item xs={9} sm={6}>
           <Skeleton className={classes.placeholder} variant="text" />
@@ -78,7 +78,7 @@ export class ManifestListItem extends React.Component {
           <Skeleton className={classes.placeholder} variant="text" />
         </Grid>
         <Grid item xs={4} sm={2}>
-          <Skeleton className={classes.placeholder} variant="rect" height={60} width={60} />
+          <Skeleton className={classes.placeholder} variant="rectangular" height={60} width={60} />
         </Grid>
       </Grid>
     );
@@ -113,7 +113,7 @@ export class ManifestListItem extends React.Component {
                           height="80"
                           unloader={(
                             <Skeleton
-                              variant="rect"
+                              variant="rectangular"
                               animation={false}
                               className={classes.placeholder}
                               height={80}
@@ -122,7 +122,7 @@ export class ManifestListItem extends React.Component {
                           )}
                         />
                       )
-                      : <Skeleton className={classes.placeholder} variant="rect" height={80} width={120} />}
+                      : <Skeleton className={classes.placeholder} variant="rectangular" height={80} width={120} />}
                   </Grid>
                   <Grid item xs={8} sm={9} component="span">
                     { isCollection && (
@@ -152,7 +152,7 @@ export class ManifestListItem extends React.Component {
                   className={classes.logo}
                   unloader={(
                     <Skeleton
-                      variant="rect"
+                      variant="rectangular"
                       animation={false}
                       className={classes.placeholder}
                       height={60}
diff --git a/src/components/ManifestListItemError.js b/src/components/ManifestListItemError.js
index a6a3fb43ac4eabb161bbd324049c177474071a1e..264bdd4bd7094b658e200afed8424ba01eeef2d9 100644
--- a/src/components/ManifestListItemError.js
+++ b/src/components/ManifestListItemError.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import ErrorIcon from '@material-ui/icons/ErrorOutlineSharp';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import ErrorIcon from '@mui/icons-material/ErrorOutlineSharp';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 
 /**
  * ManifestListItemError renders a component displaying a
diff --git a/src/components/ManifestRelatedLinks.js b/src/components/ManifestRelatedLinks.js
index 943d287ff3be7df3682ce5224777412ca4e2062f..231a8cc27f6b65b11f3e780df2cf99423c793030 100644
--- a/src/components/ManifestRelatedLinks.js
+++ b/src/components/ManifestRelatedLinks.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import Link from '@material-ui/core/Link';
+import Typography from '@mui/material/Typography';
+import Link from '@mui/material/Link';
 import classNames from 'classnames';
 import CollapsibleSection from '../containers/CollapsibleSection';
 import ns from '../config/css-ns';
diff --git a/src/components/MinimalWindow.js b/src/components/MinimalWindow.js
index 79ecf36ea5d85253f9cbefba734957d33b7806c8..0e3a24634638298d9d01c03c1846526d5f46f354 100644
--- a/src/components/MinimalWindow.js
+++ b/src/components/MinimalWindow.js
@@ -1,12 +1,12 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import MenuIcon from '@material-ui/icons/MenuSharp';
+import MenuIcon from '@mui/icons-material/MenuSharp';
 import cn from 'classnames';
-import Paper from '@material-ui/core/Paper';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import CloseIcon from '@material-ui/icons/CloseSharp';
+import Paper from '@mui/material/Paper';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import CloseIcon from '@mui/icons-material/CloseSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import ns from '../config/css-ns';
 
diff --git a/src/components/MiradorMenuButton.js b/src/components/MiradorMenuButton.js
index 83c13b26168a35cc3ca97b2092b973e306b27153..2b81c67f81c2277b2d9194494ff0e3c85f345a50 100644
--- a/src/components/MiradorMenuButton.js
+++ b/src/components/MiradorMenuButton.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Badge from '@material-ui/core/Badge';
-import IconButton from '@material-ui/core/IconButton';
-import Tooltip from '@material-ui/core/Tooltip';
+import Badge from '@mui/material/Badge';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import ns from '../config/css-ns';
 
 /**
@@ -23,7 +23,7 @@ export function MiradorMenuButton(props) {
   } = props;
 
   const button = (
-    <IconButton {...iconButtonProps}>
+    <IconButton {...iconButtonProps} size="large">
       {badge
         ? <Badge {...BadgeProps}>{children}</Badge>
         : children}
diff --git a/src/components/NestedMenu.js b/src/components/NestedMenu.js
index 6831c4de37921b00824a9876ff9f9c05ca5652af..d631565908d21efe5ac660d26e1e49bfe9576d06 100644
--- a/src/components/NestedMenu.js
+++ b/src/components/NestedMenu.js
@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import MenuItem from '@material-ui/core/MenuItem';
-import ExpandLess from '@material-ui/icons/ExpandLessSharp';
-import ExpandMore from '@material-ui/icons/ExpandMoreSharp';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import ExpandLess from '@mui/icons-material/ExpandLessSharp';
+import ExpandMore from '@mui/icons-material/ExpandMoreSharp';
 
 /**
  * NestedMenu ~ A presentation component to render a menu item and have
diff --git a/src/components/ScrollIndicatedDialogContent.js b/src/components/ScrollIndicatedDialogContent.js
index 4fd3cb5f5c9f9769b20b16542ffac4493f454eb7..1e0b372603556481f95e19a490e1202f193c2aad 100644
--- a/src/components/ScrollIndicatedDialogContent.js
+++ b/src/components/ScrollIndicatedDialogContent.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DialogContent from '@material-ui/core/DialogContent';
+import DialogContent from '@mui/material/DialogContent';
 
 /**
  * ScrollIndicatedDialogContent ~ Inject a style into the DialogContent component
diff --git a/src/components/SearchHit.js b/src/components/SearchHit.js
index f27228fe15fbc9fe02ad9cbaf0fcdb2ffab817f6..cdc2367920a4eae9b4eec6052382614289cded7d 100644
--- a/src/components/SearchHit.js
+++ b/src/components/SearchHit.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import Button from '@material-ui/core/Button';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import Typography from '@material-ui/core/Typography';
-import Chip from '@material-ui/core/Chip';
+import Button from '@mui/material/Button';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
 import SanitizedHtml from '../containers/SanitizedHtml';
 import TruncatedHit from '../lib/TruncatedHit';
 import { ScrollTo } from './ScrollTo';
diff --git a/src/components/SearchPanel.js b/src/components/SearchPanel.js
index c3430660be80a4fd296e849eee72a4352a4721b4..5171306f4eaf23696db26438110f98befb21c6a2 100644
--- a/src/components/SearchPanel.js
+++ b/src/components/SearchPanel.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import Chip from '@material-ui/core/Chip';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Typography from '@mui/material/Typography';
 import CompanionWindow from '../containers/CompanionWindow';
 import SearchPanelControls from '../containers/SearchPanelControls';
 import SearchResults from '../containers/SearchResults';
diff --git a/src/components/SearchPanelControls.js b/src/components/SearchPanelControls.js
index 391f57bca6865eb56d2fc68022fa98a7fb7e68da..cf031cd523b893569cb93756676398f562ef226e 100644
--- a/src/components/SearchPanelControls.js
+++ b/src/components/SearchPanelControls.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import deburr from 'lodash/deburr';
 import debounce from 'lodash/debounce';
 import isObject from 'lodash/isObject';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import TextField from '@material-ui/core/TextField';
-import SearchIcon from '@material-ui/icons/SearchSharp';
+import Autocomplete from '@mui/material/Autocomplete';
+import CircularProgress from '@mui/material/CircularProgress';
+import TextField from '@mui/material/TextField';
+import SearchIcon from '@mui/icons-material/SearchSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import SearchPanelNavigation from '../containers/SearchPanelNavigation';
 
@@ -115,46 +115,44 @@ export class SearchPanelControls extends Component {
 
     const { search, suggestions } = this.state;
     const id = `search-${companionWindowId}`;
-    return (
-      <>
-        <form onSubmit={this.submitSearch} className={classes.form}>
-          <Autocomplete
-            id={id}
-            inputValue={search}
-            options={suggestions}
-            getOptionLabel={getMatch}
-            getOptionSelected={(option, value) => (
-              deburr(getMatch(option).trim()).toLowerCase()
-                === deburr(getMatch(value).trim()).toLowerCase()
-            )}
-            noOptionsText=""
-            onChange={this.selectItem}
-            onInputChange={this.handleChange}
-            freeSolo
-            renderInput={params => (
-              <TextField
-                {...params}
-                label={t('searchInputLabel')}
-                InputProps={{
-                  ...params.InputProps,
-                  endAdornment: (
-                    <div className={classes.endAdornment}>
-                      <MiradorMenuButton aria-label={t('searchSubmitAria')} type="submit">
-                        <SearchIcon />
-                      </MiradorMenuButton>
-                      {Boolean(searchIsFetching) && (
-                        <CircularProgress className={classes.searchProgress} size={50} />
-                      )}
-                    </div>
-                  ),
-                }}
-              />
-            )}
-          />
-        </form>
-        <SearchPanelNavigation windowId={windowId} companionWindowId={companionWindowId} />
-      </>
-    );
+    return <>
+      <form onSubmit={this.submitSearch} className={classes.form}>
+        <Autocomplete
+          id={id}
+          inputValue={search}
+          options={suggestions}
+          getOptionLabel={getMatch}
+          isOptionEqualToValue={(option, value) => (
+            deburr(getMatch(option).trim()).toLowerCase()
+              === deburr(getMatch(value).trim()).toLowerCase()
+          )}
+          noOptionsText=""
+          onChange={this.selectItem}
+          onInputChange={this.handleChange}
+          freeSolo
+          renderInput={params => (
+            <TextField
+              {...params}
+              label={t('searchInputLabel')}
+              InputProps={{
+                ...params.InputProps,
+                endAdornment: (
+                  <div className={classes.endAdornment}>
+                    <MiradorMenuButton aria-label={t('searchSubmitAria')} type="submit">
+                      <SearchIcon />
+                    </MiradorMenuButton>
+                    {Boolean(searchIsFetching) && (
+                      <CircularProgress className={classes.searchProgress} size={50} />
+                    )}
+                  </div>
+                ),
+              }}
+            />
+          )}
+        />
+      </form>
+      <SearchPanelNavigation windowId={windowId} companionWindowId={companionWindowId} />
+    </>;
   }
 }
 
diff --git a/src/components/SearchPanelNavigation.js b/src/components/SearchPanelNavigation.js
index 21c76dda1e794a2db646fa8f58a6ef23a57b28ee..9b47bbb91fdeb174928b3ebf632072a6e234aa6a 100644
--- a/src/components/SearchPanelNavigation.js
+++ b/src/components/SearchPanelNavigation.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ChevronLeftIcon from '@material-ui/icons/ChevronLeftSharp';
-import ChevronRightIcon from '@material-ui/icons/ChevronRightSharp';
-import Typography from '@material-ui/core/Typography';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeftSharp';
+import ChevronRightIcon from '@mui/icons-material/ChevronRightSharp';
+import Typography from '@mui/material/Typography';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 
 /**
diff --git a/src/components/SearchResults.js b/src/components/SearchResults.js
index bb75972a80306f2dc0470dfbe0ba7cca10a5405e..a7ee1cc24072d25a47b57b13071915c3c0270c96 100644
--- a/src/components/SearchResults.js
+++ b/src/components/SearchResults.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import List from '@material-ui/core/List';
-import Typography from '@material-ui/core/Typography';
-import BackIcon from '@material-ui/icons/ArrowBackSharp';
+import Button from '@mui/material/Button';
+import List from '@mui/material/List';
+import Typography from '@mui/material/Typography';
+import BackIcon from '@mui/icons-material/ArrowBackSharp';
 import { LiveMessenger } from 'react-aria-live';
 import SearchHit from '../containers/SearchHit';
 import { ScrollTo } from './ScrollTo';
diff --git a/src/components/SelectCollection.js b/src/components/SelectCollection.js
index aeb98e71291df1e5834cce2c6929067138a87ccf..68db33da8d6a2d30df87e371137af26f923e4895 100644
--- a/src/components/SelectCollection.js
+++ b/src/components/SelectCollection.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
-import ListSharpIcon from '@material-ui/icons/ListSharp';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
+import ListSharpIcon from '@mui/icons-material/ListSharp';
 
 /**
  *
diff --git a/src/components/SidebarIndexItem.js b/src/components/SidebarIndexItem.js
index b880e180a3b41a7f7ae9013c2f8731ce2a2264af..d5ceb1056a56c885a5e9c998e56e15faf83492cc 100644
--- a/src/components/SidebarIndexItem.js
+++ b/src/components/SidebarIndexItem.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import classNames from 'classnames';
 
 /** */
diff --git a/src/components/SidebarIndexList.js b/src/components/SidebarIndexList.js
index ba88ee4aeeacb6866b34581f56275a28c0167d16..f8c0633fbf666d6d96f5614df4616fd6cdbd07d1 100644
--- a/src/components/SidebarIndexList.js
+++ b/src/components/SidebarIndexList.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
 import { ScrollTo } from './ScrollTo';
 import MiradorCanvas from '../lib/MiradorCanvas';
 import SidebarIndexItem from '../containers/SidebarIndexItem';
diff --git a/src/components/SidebarIndexTableOfContents.js b/src/components/SidebarIndexTableOfContents.js
index badc3e77fb57c5cdb6da04aed9726e9baf182ede..96a4f8c53d142d69069a1fcb99318f5ff48eb1cf 100644
--- a/src/components/SidebarIndexTableOfContents.js
+++ b/src/components/SidebarIndexTableOfContents.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import TreeView from '@material-ui/lab/TreeView';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import ChevronRightIcon from '@material-ui/icons/ChevronRight';
-import TreeItem from '@material-ui/lab/TreeItem';
+import TreeView from '@mui/lab/TreeView';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import TreeItem from '@mui/lab/TreeItem';
 import clsx from 'clsx';
 import { ScrollTo } from './ScrollTo';
 
diff --git a/src/components/SidebarIndexThumbnail.js b/src/components/SidebarIndexThumbnail.js
index 5ac21782e7c5403d3259abf863246def01c510a7..c2845e9765b64678b073738cf730c9f74eb5ebac 100644
--- a/src/components/SidebarIndexThumbnail.js
+++ b/src/components/SidebarIndexThumbnail.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import classNames from 'classnames';
 import IIIFThumbnail from '../containers/IIIFThumbnail';
 
diff --git a/src/components/ThumbnailNavigation.js b/src/components/ThumbnailNavigation.js
index e7c6db2945535d7a293694054acb970da4307316..9802f44edbab62eb944ba588934bfd4c8d3ad692 100644
--- a/src/components/ThumbnailNavigation.js
+++ b/src/components/ThumbnailNavigation.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { VariableSizeList as List } from 'react-window';
 import classNames from 'classnames';
diff --git a/src/components/ViewerInfo.js b/src/components/ViewerInfo.js
index e9ec8a8175ca03ee8925ab0d86f3670636dc2cc9..6282c16106c1ca7b3755c035a730adff676df5a2 100644
--- a/src/components/ViewerInfo.js
+++ b/src/components/ViewerInfo.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import ns from '../config/css-ns';
diff --git a/src/components/ViewerNavigation.js b/src/components/ViewerNavigation.js
index a372295f3ab044d37da161a5905bf9dcf1f82941..8749313de209dcc96163dcce9e2793e844f7a3fb 100644
--- a/src/components/ViewerNavigation.js
+++ b/src/components/ViewerNavigation.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import NavigationIcon from '@material-ui/icons/PlayCircleOutlineSharp';
+import NavigationIcon from '@mui/icons-material/PlayCircleOutlineSharp';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
diff --git a/src/components/ViewerNavigationVideo.js b/src/components/ViewerNavigationVideo.js
index 0542fe7f61f93d3e123ecf01bcfc6dfa97853c62..07ea15af2bdd81a4b95960ec049309d26dbeeb19 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 React, { 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/Window.js b/src/components/Window.js
index 30462d2e7ed84326a6f4687e16cb9043c0e9abf2..f6a41965ff1e9ff29c6102f39d4369e7bc7a5021 100644
--- a/src/components/Window.js
+++ b/src/components/Window.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
-import Paper from '@material-ui/core/Paper';
+import Paper from '@mui/material/Paper';
 import { MosaicWindowContext } from 'react-mosaic-component/lib/contextTypes';
 import ns from '../config/css-ns';
 import WindowTopBar from '../containers/WindowTopBar';
diff --git a/src/components/WindowAuthenticationBar.js b/src/components/WindowAuthenticationBar.js
index 97a54f87d5cc697d02671cecc15db57ac471ea2b..f2b7e67a3e952de2f8f9bf64e7ffb6c02bd23d2a 100644
--- a/src/components/WindowAuthenticationBar.js
+++ b/src/components/WindowAuthenticationBar.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
-import Collapse from '@material-ui/core/Collapse';
-import DialogActions from '@material-ui/core/DialogActions';
-import Typography from '@material-ui/core/Typography';
-import LockIcon from '@material-ui/icons/LockSharp';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
+import Collapse from '@mui/material/Collapse';
+import DialogActions from '@mui/material/DialogActions';
+import Typography from '@mui/material/Typography';
+import LockIcon from '@mui/icons-material/LockSharp';
 import SanitizedHtml from '../containers/SanitizedHtml';
 import { PluginHook } from './PluginHook';
 
diff --git a/src/components/WindowCanvasNavigationControls.js b/src/components/WindowCanvasNavigationControls.js
index 39e662db8bdb6631310e56a53c29f72b641db976..9d6746d9bcd15836c0c5a4ed63883b1997c9b367 100644
--- a/src/components/WindowCanvasNavigationControls.js
+++ b/src/components/WindowCanvasNavigationControls.js
@@ -1,8 +1,8 @@
 import React, { 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 ZoomControls from '../containers/ZoomControls';
 import ViewerInfo from '../containers/ViewerInfo';
 import ViewerNavigation from '../containers/ViewerNavigation';
diff --git a/src/components/WindowCanvasNavigationControlsVideo.js b/src/components/WindowCanvasNavigationControlsVideo.js
index d29879a1071386b927abf3a88f5fd00feac5d87c..311855e8b32ab8479940dcdd641513bfe5154989 100755
--- a/src/components/WindowCanvasNavigationControlsVideo.js
+++ b/src/components/WindowCanvasNavigationControlsVideo.js
@@ -1,8 +1,8 @@
 import React, { 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/components/WindowList.js b/src/components/WindowList.js
index 5e45ad0378c2ab27ed55d004a1cbe9cd551100fd..690bc91a0873aad8cd9032f3f10cd222a9fb22fc 100644
--- a/src/components/WindowList.js
+++ b/src/components/WindowList.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListSubheader from '@material-ui/core/ListSubheader';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListSubheader from '@mui/material/ListSubheader';
 import PropTypes from 'prop-types';
 import ns from '../config/css-ns';
 
diff --git a/src/components/WindowListButton.js b/src/components/WindowListButton.js
index 7baa53f1b8fef69ff012508a4fcac59efee5ba78..8164e244c58df53e64d331912a0794797cb7a5e0 100644
--- a/src/components/WindowListButton.js
+++ b/src/components/WindowListButton.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import BookmarksIcon from '@material-ui/icons/BookmarksSharp';
+import BookmarksIcon from '@mui/icons-material/BookmarksSharp';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import WindowList from '../containers/WindowList';
diff --git a/src/components/WindowSideBar.js b/src/components/WindowSideBar.js
index eaeceaae43ea026917d68940037e207b4070d639..166844f60f1f5eb538dd43b8b65ecef7d82ac713 100644
--- a/src/components/WindowSideBar.js
+++ b/src/components/WindowSideBar.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Drawer from '@material-ui/core/Drawer';
+import Drawer from '@mui/material/Drawer';
 import WindowSideBarButtons from '../containers/WindowSideBarButtons';
 
 /**
diff --git a/src/components/WindowSideBarAnnotationsPanel.js b/src/components/WindowSideBarAnnotationsPanel.js
index f5a13189296267a8fb9aa9acb0b6b43cf41ed87f..1cb63d317e6e8674207e48c80b458ac20c18cb4f 100644
--- a/src/components/WindowSideBarAnnotationsPanel.js
+++ b/src/components/WindowSideBarAnnotationsPanel.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import AnnotationSettings from '../containers/AnnotationSettings';
 import CanvasAnnotations from '../containers/CanvasAnnotations';
 import CompanionWindow from '../containers/CompanionWindow';
diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
index fd4c717f3f8c1762c2312d14137ef48969e6d07f..4a70e3c280ae550c70cab87220c8f18cf3cc00d9 100644
--- a/src/components/WindowSideBarButtons.js
+++ b/src/components/WindowSideBarButtons.js
@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Badge from '@material-ui/core/Badge';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import Tooltip from '@material-ui/core/Tooltip';
-import InfoIcon from '@material-ui/icons/InfoSharp';
-import AnnotationIcon from '@material-ui/icons/CommentSharp';
-import AttributionIcon from '@material-ui/icons/CopyrightSharp';
-import LayersIcon from '@material-ui/icons/LayersSharp';
-import SearchIcon from '@material-ui/icons/SearchSharp';
+import Badge from '@mui/material/Badge';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Tooltip from '@mui/material/Tooltip';
+import InfoIcon from '@mui/icons-material/InfoSharp';
+import AnnotationIcon from '@mui/icons-material/CommentSharp';
+import AttributionIcon from '@mui/icons-material/CopyrightSharp';
+import LayersIcon from '@mui/icons-material/LayersSharp';
+import SearchIcon from '@mui/icons-material/SearchSharp';
 import CanvasIndexIcon from './icons/CanvasIndexIcon';
 
 /** */
diff --git a/src/components/WindowSideBarCanvasPanel.js b/src/components/WindowSideBarCanvasPanel.js
index 9d4e988f7958801e75972ce91316c9807a328986..ba5d8c9d97b766986d356ec2afc0a34d62866cc9 100644
--- a/src/components/WindowSideBarCanvasPanel.js
+++ b/src/components/WindowSideBarCanvasPanel.js
@@ -1,17 +1,17 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import Tooltip from '@material-ui/core/Tooltip';
-import Button from '@material-ui/core/Button';
-import ItemListIcon from '@material-ui/icons/ReorderSharp';
-import TocIcon from '@material-ui/icons/SortSharp';
-import ThumbnailListIcon from '@material-ui/icons/ViewListSharp';
-import Typography from '@material-ui/core/Typography';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForwardSharp';
-import FormControl from '@material-ui/core/FormControl';
-import Select from '@material-ui/core/Select';
-import MenuItem from '@material-ui/core/MenuItem';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import Tooltip from '@mui/material/Tooltip';
+import Button from '@mui/material/Button';
+import ItemListIcon from '@mui/icons-material/ReorderSharp';
+import TocIcon from '@mui/icons-material/SortSharp';
+import ThumbnailListIcon from '@mui/icons-material/ViewListSharp';
+import Typography from '@mui/material/Typography';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForwardSharp';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+import MenuItem from '@mui/material/MenuItem';
 import CompanionWindow from '../containers/CompanionWindow';
 import SidebarIndexList from '../containers/SidebarIndexList';
 import SidebarIndexTableOfContents from '../containers/SidebarIndexTableOfContents';
diff --git a/src/components/WindowSideBarCollectionPanel.js b/src/components/WindowSideBarCollectionPanel.js
index cf58cccfff8665ac17d55ffeb400e1e84e9d2c45..873587b1c9c230d9d3b81c1ecab2be405fe5d104 100644
--- a/src/components/WindowSideBarCollectionPanel.js
+++ b/src/components/WindowSideBarCollectionPanel.js
@@ -1,14 +1,14 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import MenuList from '@material-ui/core/MenuList';
-import MenuItem from '@material-ui/core/MenuItem';
-import Typography from '@material-ui/core/Typography';
-import Skeleton from '@material-ui/lab/Skeleton';
-import ArrowUpwardIcon from '@material-ui/icons/ArrowUpwardSharp';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import MenuList from '@mui/material/MenuList';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import Skeleton from '@mui/material/Skeleton';
+import ArrowUpwardIcon from '@mui/icons-material/ArrowUpwardSharp';
 import CompanionWindow from '../containers/CompanionWindow';
 import IIIFThumbnail from '../containers/IIIFThumbnail';
 
diff --git a/src/components/WindowThumbnailSettings.js b/src/components/WindowThumbnailSettings.js
index 9db790fc928175d67d8e54c8e3cbc717c973b7da..00c5a610d94af5ad8a7ea9d0b66d0fcd0de819d4 100644
--- a/src/components/WindowThumbnailSettings.js
+++ b/src/components/WindowThumbnailSettings.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import MenuItem from '@material-ui/core/MenuItem';
-import ThumbnailsOffIcon from '@material-ui/icons/CropDinSharp';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import ListSubheader from '@mui/material/ListSubheader';
+import MenuItem from '@mui/material/MenuItem';
+import ThumbnailsOffIcon from '@mui/icons-material/CropDinSharp';
 import PropTypes from 'prop-types';
 import ThumbnailNavigationBottomIcon from './icons/ThumbnailNavigationBottomIcon';
 import ThumbnailNavigationRightIcon from './icons/ThumbnailNavigationRightIcon';
diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
index 6bb4cbd62a000c07d36111f73187635390854de3..d868e91b497ca4b48f9d6c1e49d6cc70a51d5307 100644
--- a/src/components/WindowTopBar.js
+++ b/src/components/WindowTopBar.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import MenuIcon from '@material-ui/icons/MenuSharp';
-import CloseIcon from '@material-ui/icons/CloseSharp';
-import Toolbar from '@material-ui/core/Toolbar';
-import AppBar from '@material-ui/core/AppBar';
+import MenuIcon from '@mui/icons-material/MenuSharp';
+import CloseIcon from '@mui/icons-material/CloseSharp';
+import Toolbar from '@mui/material/Toolbar';
+import AppBar from '@mui/material/AppBar';
 import classNames from 'classnames';
 import WindowTopMenuButton from '../containers/WindowTopMenuButton';
 import WindowTopBarPluginArea from '../containers/WindowTopBarPluginArea';
diff --git a/src/components/WindowTopBarPluginMenu.js b/src/components/WindowTopBarPluginMenu.js
index f19331c035f682de00e35ff64a8b22c83bd959f8..99a6071a4558df2e70f3cf1290524cf19fc661f5 100644
--- a/src/components/WindowTopBarPluginMenu.js
+++ b/src/components/WindowTopBarPluginMenu.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import MoreVertIcon from '@material-ui/icons/MoreVertSharp';
-import Menu from '@material-ui/core/Menu';
+import MoreVertIcon from '@mui/icons-material/MoreVertSharp';
+import Menu from '@mui/material/Menu';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import { PluginHook } from './PluginHook';
 import ns from '../config/css-ns';
diff --git a/src/components/WindowTopBarTitle.js b/src/components/WindowTopBarTitle.js
index bc2c466825e0ac0fd1d2d46258f6285fe20eb815..89473eb63d31cac6efb29205f6e3da0e9177b06f 100644
--- a/src/components/WindowTopBarTitle.js
+++ b/src/components/WindowTopBarTitle.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Typography from '@material-ui/core/Typography';
-import Skeleton from '@material-ui/lab/Skeleton';
-import ErrorIcon from '@material-ui/icons/ErrorOutlineSharp';
+import Typography from '@mui/material/Typography';
+import Skeleton from '@mui/material/Skeleton';
+import ErrorIcon from '@mui/icons-material/ErrorOutlineSharp';
 
 /** */
 function TitleTypography({ children, ...props }) {
diff --git a/src/components/WindowTopMenu.js b/src/components/WindowTopMenu.js
index 6148f94d24085780611b2ddf1e8373740104cf24..753a611b1b061828c9dcbe131f162d4d3ae1a0cd 100644
--- a/src/components/WindowTopMenu.js
+++ b/src/components/WindowTopMenu.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import Menu from '@material-ui/core//Menu';
-import ListSubheader from '@material-ui/core/ListSubheader';
+import Menu from '@mui/material//Menu';
+import ListSubheader from '@mui/material/ListSubheader';
 import PropTypes from 'prop-types';
 import WindowThumbnailSettings from '../containers/WindowThumbnailSettings';
 import WindowViewSettings from '../containers/WindowViewSettings';
diff --git a/src/components/WindowViewSettings.js b/src/components/WindowViewSettings.js
index 547656f0610058bea917d1af551108aa614dc25d..65b3af17d77c8c7c94f1b5829d049d4f502b8d24 100644
--- a/src/components/WindowViewSettings.js
+++ b/src/components/WindowViewSettings.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import MenuItem from '@material-ui/core/MenuItem';
-import ListSubheader from '@material-ui/core/ListSubheader';
-import SingleIcon from '@material-ui/icons/CropOriginalSharp';
-import ScrollViewIcon from '@material-ui/icons/ViewColumn';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import MenuItem from '@mui/material/MenuItem';
+import ListSubheader from '@mui/material/ListSubheader';
+import SingleIcon from '@mui/icons-material/CropOriginalSharp';
+import ScrollViewIcon from '@mui/icons-material/ViewColumn';
 import PropTypes from 'prop-types';
 import BookViewIcon from './icons/BookViewIcon';
 import GalleryViewIcon from './icons/GalleryViewIcon';
diff --git a/src/components/Workspace.js b/src/components/Workspace.js
index 951b23539a3369c7508b812d961bf1348cee3963..23b0df83f4d5187a7f972f4287f1e4a1ea01e2ad 100644
--- a/src/components/Workspace.js
+++ b/src/components/Workspace.js
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Grid from '@material-ui/core/Grid';
-import Typography from '@material-ui/core/Typography';
+import Grid from '@mui/material/Grid';
+import Typography from '@mui/material/Typography';
 import Window from '../containers/Window';
 import WorkspaceMosaic from '../containers/WorkspaceMosaic';
 import WorkspaceElastic from '../containers/WorkspaceElastic';
diff --git a/src/components/WorkspaceAdd.js b/src/components/WorkspaceAdd.js
index f1676e47a9ebe1116ae7dbf23cce29538ba3b7d2..1d72620778908b9530173ee347f513517f8829d2 100644
--- a/src/components/WorkspaceAdd.js
+++ b/src/components/WorkspaceAdd.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import AddIcon from '@material-ui/icons/AddSharp';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMoreSharp';
-import AppBar from '@material-ui/core/AppBar';
-import Drawer from '@material-ui/core/Drawer';
-import Grid from '@material-ui/core/Grid';
-import Fab from '@material-ui/core/Fab';
-import List from '@material-ui/core/List';
-import Paper from '@material-ui/core/Paper';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
+import AddIcon from '@mui/icons-material/AddSharp';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMoreSharp';
+import AppBar from '@mui/material/AppBar';
+import Drawer from '@mui/material/Drawer';
+import Grid from '@mui/material/Grid';
+import Fab from '@mui/material/Fab';
+import List from '@mui/material/List';
+import Paper from '@mui/material/Paper';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
 import ns from '../config/css-ns';
 import ManifestForm from '../containers/ManifestForm';
 import ManifestListItem from '../containers/ManifestListItem';
diff --git a/src/components/WorkspaceAddButton.js b/src/components/WorkspaceAddButton.js
index e3fdeb2f7ac8e088ae5cf53f9592f5f012fa7bb6..3def278955f09237d0c820b13b51dff4cc3358cb 100644
--- a/src/components/WorkspaceAddButton.js
+++ b/src/components/WorkspaceAddButton.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import Fab from '@material-ui/core/Fab';
-import Tooltip from '@material-ui/core/Tooltip';
-import AddIcon from '@material-ui/icons/AddSharp';
-import CloseIcon from '@material-ui/icons/CloseSharp';
+import Fab from '@mui/material/Fab';
+import Tooltip from '@mui/material/Tooltip';
+import AddIcon from '@mui/icons-material/AddSharp';
+import CloseIcon from '@mui/icons-material/CloseSharp';
 
 /**
  */
diff --git a/src/components/WorkspaceControlPanel.js b/src/components/WorkspaceControlPanel.js
index de849c8fb72e11fbc5c7fe0ec8e51996e684c35e..344dd46bf4d11c3b6a5b29ce5f59aa775fc7287e 100644
--- a/src/components/WorkspaceControlPanel.js
+++ b/src/components/WorkspaceControlPanel.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
 import WorkspaceAddButton from '../containers/WorkspaceAddButton';
 import WorkspaceControlPanelButtons from '../containers/WorkspaceControlPanelButtons';
 import Branding from '../containers/Branding';
diff --git a/src/components/WorkspaceExport.js b/src/components/WorkspaceExport.js
index 2a7ff7e0ce6a882742e5ee6ecb10ac30466d52ae..78adc352d6112ce6de0c120c7fd2453728332ca2 100644
--- a/src/components/WorkspaceExport.js
+++ b/src/components/WorkspaceExport.js
@@ -1,17 +1,17 @@
 import React, { Component } from 'react';
-import Button from '@material-ui/core/Button';
-import Dialog from '@material-ui/core/Dialog';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import Typography from '@material-ui/core/Typography';
-import Snackbar from '@material-ui/core/Snackbar';
-import IconButton from '@material-ui/core/IconButton';
-import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
-import CloseIcon from '@material-ui/icons/Close';
-import Accordion from '@material-ui/core/Accordion';
-import AccordionSummary from '@material-ui/core/AccordionSummary';
-import AccordionDetails from '@material-ui/core/AccordionDetails';
+import Button from '@mui/material/Button';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import Typography from '@mui/material/Typography';
+import Snackbar from '@mui/material/Snackbar';
+import IconButton from '@mui/material/IconButton';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import CloseIcon from '@mui/icons-material/Close';
+import Accordion from '@mui/material/Accordion';
+import AccordionSummary from '@mui/material/AccordionSummary';
+import AccordionDetails from '@mui/material/AccordionDetails';
 import PropTypes from 'prop-types';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
 
@@ -88,7 +88,7 @@ export class WorkspaceExport extends Component {
         fullWidth
         maxWidth="sm"
       >
-        <DialogTitle id="form-dialog-title" disableTypography>
+        <DialogTitle id="form-dialog-title">
           <Typography variant="h2">{t('downloadExport')}</Typography>
         </DialogTitle>
 
diff --git a/src/components/WorkspaceImport.js b/src/components/WorkspaceImport.js
index 4a19c42f448cce4f71e4e8680096f2e5499d750b..33f719d89aad5cbb3cc71f541ca66aaa86134a89 100644
--- a/src/components/WorkspaceImport.js
+++ b/src/components/WorkspaceImport.js
@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
 import PropTypes from 'prop-types';
 import {
   DialogActions,
   TextField,
   Typography,
-} from '@material-ui/core';
-import Button from '@material-ui/core/Button';
+} from '@mui/material';
+import Button from '@mui/material/Button';
 import ScrollIndicatedDialogContent from '../containers/ScrollIndicatedDialogContent';
 
 /**
@@ -74,7 +74,7 @@ export class WorkspaceImport extends Component {
         fullWidth
         maxWidth="sm"
       >
-        <DialogTitle id="workspace-import-title" disableTypography>
+        <DialogTitle id="workspace-import-title">
           <Typography variant="h2">{t('importWorkspace')}</Typography>
         </DialogTitle>
         <ScrollIndicatedDialogContent>
diff --git a/src/components/WorkspaceMenu.js b/src/components/WorkspaceMenu.js
index 0d526491c3394279702547b5db79fd2fba0914e7..7532f3347d4ae6a4928783085235f8baf1a8aa66 100644
--- a/src/components/WorkspaceMenu.js
+++ b/src/components/WorkspaceMenu.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import Typography from '@material-ui/core/Typography';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
 import PropTypes from 'prop-types';
 import LanguageSettings from '../containers/LanguageSettings';
 import { NestedMenu } from './NestedMenu';
diff --git a/src/components/WorkspaceMenuButton.js b/src/components/WorkspaceMenuButton.js
index 327a50ffdda63606fc1f1184a1790a56f2dd5cb4..e996fe946bef507a4857360568d728b58d8fe398 100644
--- a/src/components/WorkspaceMenuButton.js
+++ b/src/components/WorkspaceMenuButton.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import SettingsIcon from '@material-ui/icons/SettingsSharp';
+import SettingsIcon from '@mui/icons-material/SettingsSharp';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import WorkspaceMenu from '../containers/WorkspaceMenu';
diff --git a/src/components/WorkspaceOptionsButton.js b/src/components/WorkspaceOptionsButton.js
index 302de5f3884844cfeac911498c2426bce451b060..fce82c7e85f7b1f6225497b7903fa1c48d5d4634 100644
--- a/src/components/WorkspaceOptionsButton.js
+++ b/src/components/WorkspaceOptionsButton.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import MoreHorizontalIcon from '@material-ui/icons/MoreHorizSharp';
+import MoreHorizontalIcon from '@mui/icons-material/MoreHorizSharp';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
 import WorkspaceOptionsMenu from '../containers/WorkspaceOptionsMenu';
 
diff --git a/src/components/WorkspaceOptionsMenu.js b/src/components/WorkspaceOptionsMenu.js
index cba05a3fca3ae8a3e6244e1a3abc9f78b02f4e6a..8712c08d1ca99ca0266d15771cf3c8d7e4343599 100644
--- a/src/components/WorkspaceOptionsMenu.js
+++ b/src/components/WorkspaceOptionsMenu.js
@@ -1,11 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import ImportIcon from '@material-ui/icons/Input';
-import SaveAltIcon from '@material-ui/icons/SaveAltSharp';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import Typography from '@material-ui/core/Typography';
+import ImportIcon from '@mui/icons-material/Input';
+import SaveAltIcon from '@mui/icons-material/SaveAltSharp';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
 import WorkspaceExport from '../containers/WorkspaceExport';
 import WorkspaceImport from '../containers/WorkspaceImport';
 import { PluginHook } from './PluginHook';
diff --git a/src/components/WorkspaceSelectionDialog.js b/src/components/WorkspaceSelectionDialog.js
index e0cb679109a0d0dd73069510deaea38e0b3ad871..dc286bceb251aa7e4e9ed19ac076896c2aead8e0 100644
--- a/src/components/WorkspaceSelectionDialog.js
+++ b/src/components/WorkspaceSelectionDialog.js
@@ -1,13 +1,13 @@
 import React, { Component } from 'react';
-import Dialog from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
 import {
   Card,
   CardContent,
   MenuList,
   MenuItem,
   Typography,
-} from '@material-ui/core';
+} from '@mui/material';
 import PropTypes from 'prop-types';
 import WorkspaceTypeElasticIcon from './icons/WorkspaceTypeElasticIcon';
 import WorkspaceTypeMosaicIcon from './icons/WorkspaceTypeMosaicIcon';
@@ -62,11 +62,12 @@ export class WorkspaceSelectionDialog extends Component {
         container={container}
         id="workspace-selection-dialog"
         onClose={handleClose}
-        onEntered={dialog => WorkspaceSelectionDialog.setInitialFocus(dialog, workspaceType)}
         onEscapeKeyDown={handleClose}
         open={open}
-      >
-        <DialogTitle id="workspace-selection-dialog-title" disableTypography>
+        TransitionProps={{
+          onEntered: dialog => WorkspaceSelectionDialog.setInitialFocus(dialog, workspaceType)
+        }}>
+        <DialogTitle id="workspace-selection-dialog-title">
           <Typography variant="h2">{t('workspaceSelectionTitle')}</Typography>
         </DialogTitle>
         <ScrollIndicatedDialogContent>
diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js
index 566cc19394b5410589e2944e3fa0b89adb76d4a4..602733eedbae86a847c9eed79c8b0fce28378d02 100644
--- a/src/components/ZoomControls.js
+++ b/src/components/ZoomControls.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
-import AddCircleIcon from '@material-ui/icons/AddCircleOutlineSharp';
-import RemoveCircleIcon from '@material-ui/icons/RemoveCircleOutlineSharp';
+import AddCircleIcon from '@mui/icons-material/AddCircleOutlineSharp';
+import RemoveCircleIcon from '@mui/icons-material/RemoveCircleOutlineSharp';
 import PropTypes from 'prop-types';
 import RestoreZoomIcon from './icons/RestoreZoomIcon';
 import MiradorMenuButton from '../containers/MiradorMenuButton';
diff --git a/src/components/icons/BookViewIcon.js b/src/components/icons/BookViewIcon.js
index 3d38ba9340d189c14143d14f33282f29cbb7f8af..9d8b08efbde8d3b46edf69e65795e9eea0239484 100644
--- a/src/components/icons/BookViewIcon.js
+++ b/src/components/icons/BookViewIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * BookViewIcon ~
diff --git a/src/components/icons/CanvasIndexIcon.js b/src/components/icons/CanvasIndexIcon.js
index c977716bdf8b851df486c75d57d4ab66c1678054..e4f0997c58c3d94b0754e5cb262158267bfaee31 100644
--- a/src/components/icons/CanvasIndexIcon.js
+++ b/src/components/icons/CanvasIndexIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * Render the canvas index svg
diff --git a/src/components/icons/GalleryViewIcon.js b/src/components/icons/GalleryViewIcon.js
index 5caa1d5d2f574d072b31ba309d503bb2ab078a7a..d2cab9d8478704de85dfaeed49abc60f396e0909 100644
--- a/src/components/icons/GalleryViewIcon.js
+++ b/src/components/icons/GalleryViewIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * GalleryViewIcon ~
diff --git a/src/components/icons/MiradorIcon.js b/src/components/icons/MiradorIcon.js
index 1c70c3475db81d1c9484375f015afca6cbc819ea..a5b3aba805b7e4ac3abc87b54424c545d3378521 100644
--- a/src/components/icons/MiradorIcon.js
+++ b/src/components/icons/MiradorIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * ThumbnailNavigationRightIcon ~
diff --git a/src/components/icons/RestoreZoomIcon.js b/src/components/icons/RestoreZoomIcon.js
index a9c6ba4a37335b396b06674701c426e4494a98c1..86860fe163317372e638cc25dfb042c2cb9fa4e8 100644
--- a/src/components/icons/RestoreZoomIcon.js
+++ b/src/components/icons/RestoreZoomIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * RestoreZoomIcon ~
diff --git a/src/components/icons/ThumbnailNavigationBottomIcon.js b/src/components/icons/ThumbnailNavigationBottomIcon.js
index 012b801ec9dd239ac632d8ef78ba03b78a290481..99a4dccfda8e7768ef4614cb063a10d889386105 100644
--- a/src/components/icons/ThumbnailNavigationBottomIcon.js
+++ b/src/components/icons/ThumbnailNavigationBottomIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * ThumbnailNavigationBottomIcon ~
diff --git a/src/components/icons/ThumbnailNavigationRightIcon.js b/src/components/icons/ThumbnailNavigationRightIcon.js
index 707ea32364d4835681553144ac87193809a9f9c0..0509733fd81bc89c36132de0859e2be226137cc5 100644
--- a/src/components/icons/ThumbnailNavigationRightIcon.js
+++ b/src/components/icons/ThumbnailNavigationRightIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * ThumbnailNavigationRightIcon ~
diff --git a/src/components/icons/WindowMaxIcon.js b/src/components/icons/WindowMaxIcon.js
index 4e7239cf554cb980f5c1a75590bbcdfd401c46f4..4758579faca888be827eb28428459f037bff5435 100644
--- a/src/components/icons/WindowMaxIcon.js
+++ b/src/components/icons/WindowMaxIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * WindowMaxIcon ~
diff --git a/src/components/icons/WindowMinIcon.js b/src/components/icons/WindowMinIcon.js
index f441b602e6869d85c731054fafe3b4e0b2dbc46d..56c147637dcc178794f0fafb5ce4df900fa74eb7 100644
--- a/src/components/icons/WindowMinIcon.js
+++ b/src/components/icons/WindowMinIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * WindowMinIcon ~
diff --git a/src/components/icons/WindowOptionsIcon.js b/src/components/icons/WindowOptionsIcon.js
index 7b55ad378a1fc1f12c4edff24ab5d72f82d2fd00..793f41a50b3aec96308db6da9e7c65e0b7ce764a 100644
--- a/src/components/icons/WindowOptionsIcon.js
+++ b/src/components/icons/WindowOptionsIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * WindowMinIcon ~
diff --git a/src/components/icons/WorkspaceTypeElasticIcon.js b/src/components/icons/WorkspaceTypeElasticIcon.js
index 64428c37c0e0c60cf4f86cee9148d8230408a2c2..a83137535765f76ebf751413e4a7907c693bc5b8 100644
--- a/src/components/icons/WorkspaceTypeElasticIcon.js
+++ b/src/components/icons/WorkspaceTypeElasticIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * ElasticWorkspaceIcon ~
diff --git a/src/components/icons/WorkspaceTypeMosaicIcon.js b/src/components/icons/WorkspaceTypeMosaicIcon.js
index 529426e4c0dca302c3677480099bca4759beaa7a..57024e8e03d7f721780efe4f16bc60865cb439d9 100644
--- a/src/components/icons/WorkspaceTypeMosaicIcon.js
+++ b/src/components/icons/WorkspaceTypeMosaicIcon.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import SvgIcon from '@material-ui/core/SvgIcon';
+import SvgIcon from '@mui/material/SvgIcon';
 
 /**
  * WorkspaceTypeMosaicIcon ~
diff --git a/src/config/settings.js b/src/config/settings.js
index e2b1025f094c76488a83d3334d294ad1e205be00..390fd3fa51020f8575d97a6e385e86b73998ffd0 100644
--- a/src/config/settings.js
+++ b/src/config/settings.js
@@ -12,7 +12,7 @@ export default {
   themes: {
     dark: {
       palette: {
-        type: 'dark',
+        mode: 'dark',
         primary: {
           main: '#4db6ac',
         },
@@ -28,13 +28,13 @@ export default {
     },
     light: {
       palette: {
-        type: 'light',
+        mode: 'light',
       }
     }
   },
   theme: { // Sets up a MaterialUI theme. See https://material-ui.com/customization/default-theme/
     palette: {
-      type: 'light',
+      mode: 'light',
       primary: {
         main: '#1967d2', // Controls the color of the Add button and current window indicator
       },
diff --git a/src/containers/AttributionPanel.js b/src/containers/AttributionPanel.js
index 8e0801444dd60e1786f4924b52bc0c3b3316fe7d..a2315c2c6c7722631d34668dbbc529ee6e1c2aac 100644
--- a/src/containers/AttributionPanel.js
+++ b/src/containers/AttributionPanel.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import {
   getManifestLogo,
diff --git a/src/containers/AudioViewer.js b/src/containers/AudioViewer.js
index e422c6d6b6e00458773de3c365080307590b9fd9..c39d9737260b8bed154c1eec4ac9f8bbf365dc79 100644
--- a/src/containers/AudioViewer.js
+++ b/src/containers/AudioViewer.js
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { AudioViewer } from '../components/AudioViewer';
 import { getConfig, getVisibleCanvasAudioResources, getVisibleCanvasCaptions } from '../state/selectors';
diff --git a/src/containers/CanvasAnnotations.js b/src/containers/CanvasAnnotations.js
index 15c7479f49e30f7919010509f8613b795076298c..74f434e3771092ab5e5ecb77e3b3ff48a63df234 100644
--- a/src/containers/CanvasAnnotations.js
+++ b/src/containers/CanvasAnnotations.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import {
diff --git a/src/containers/CanvasLayers.js b/src/containers/CanvasLayers.js
index aba5f5c7c7703a0f989801e99022498742ca27cf..d68806289325f172b2eeca3e98165338d24f03f0 100644
--- a/src/containers/CanvasLayers.js
+++ b/src/containers/CanvasLayers.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import * as actions from '../state/actions';
 import {
   getCanvasLabel,
diff --git a/src/containers/ChangeThemeDialog.js b/src/containers/ChangeThemeDialog.js
index ade8c4eeebe49ebeb76b720f099b1ec4be4863c6..a86bb231f95998848ffef192d64047baa27dec0f 100644
--- a/src/containers/ChangeThemeDialog.js
+++ b/src/containers/ChangeThemeDialog.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
diff --git a/src/containers/CollapsibleSection.js b/src/containers/CollapsibleSection.js
index 3daa9258b1ae29be903287fca527ea8ba41a459d..8954db73187d5b51bf6f158397eb42945b5d9bcd 100644
--- a/src/containers/CollapsibleSection.js
+++ b/src/containers/CollapsibleSection.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { CollapsibleSection } from '../components/CollapsibleSection';
 
 const styles = {
diff --git a/src/containers/CollectionDialog.js b/src/containers/CollectionDialog.js
index 22210c1658156664525855c1142616563c5ce79b..88b09e199a4c69785855c5a988262e6c9451f822 100644
--- a/src/containers/CollectionDialog.js
+++ b/src/containers/CollectionDialog.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
diff --git a/src/containers/CompanionArea.js b/src/containers/CompanionArea.js
index f5bb041f7fcdf82e656a414e86cdc22ecc49de6c..d83db3d7b7947ca489dcbcbf4400a95fb570ed26 100644
--- a/src/containers/CompanionArea.js
+++ b/src/containers/CompanionArea.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import {
diff --git a/src/containers/CompanionWindow.js b/src/containers/CompanionWindow.js
index 29792f95824fe7a767551eff1f08187b6981d972..1875bc95d0b9bf4ed39b7473cb68746185f595ac 100644
--- a/src/containers/CompanionWindow.js
+++ b/src/containers/CompanionWindow.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withSize } from 'react-sizeme';
 import { withPlugins } from '../extend/withPlugins';
 import { withRef } from '../extend/withRef';
diff --git a/src/containers/CustomPanel.js b/src/containers/CustomPanel.js
index 493ad146335bc1e55955512e721ad1bd83244ed4..fbd0ece03bea1276666414181638bdff3151be7e 100644
--- a/src/containers/CustomPanel.js
+++ b/src/containers/CustomPanel.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { CustomPanel } from '../components/CustomPanel';
 
diff --git a/src/containers/ErrorContent.js b/src/containers/ErrorContent.js
index 951d3e20158177d5b3a148e163da9e513b448839..2634e7bab672f24a117e39df44a61cd422c5705b 100644
--- a/src/containers/ErrorContent.js
+++ b/src/containers/ErrorContent.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { ErrorContent } from '../components/ErrorContent';
 import {
diff --git a/src/containers/GalleryView.js b/src/containers/GalleryView.js
index 6b916d755abb443155a84da0efcac4ccd453b082..cbc04e253dd01d0a0a022dce14d9be05554099e9 100644
--- a/src/containers/GalleryView.js
+++ b/src/containers/GalleryView.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { GalleryView } from '../components/GalleryView';
 import { getCanvases, getSequenceViewingDirection } from '../state/selectors';
diff --git a/src/containers/GalleryViewThumbnail.js b/src/containers/GalleryViewThumbnail.js
index 0eded38382f59cb6aec6a769eb080929b0683de7..288dc0ea9ca6c669caa9418104cedb52d95b4de5 100644
--- a/src/containers/GalleryViewThumbnail.js
+++ b/src/containers/GalleryViewThumbnail.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import flatten from 'lodash/flatten';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import * as actions from '../state/actions';
 import { GalleryViewThumbnail } from '../components/GalleryViewThumbnail';
 import {
@@ -49,7 +49,7 @@ const styles = theme => ({
     border: '2px solid transparent',
     cursor: 'pointer',
     display: 'inline-block',
-    margin: `${theme.spacing(1)}px ${theme.spacing(0.5)}px`,
+    margin: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
     maxHeight: props => props.config.height + 45,
     minWidth: '60px',
     overflow: 'hidden',
diff --git a/src/containers/IIIFThumbnail.js b/src/containers/IIIFThumbnail.js
index c596b508cd92fee25b69b5e09e198011182363e7..1f75c3a680703ce47a1be17cfbfee4062d489496 100644
--- a/src/containers/IIIFThumbnail.js
+++ b/src/containers/IIIFThumbnail.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import {
   getConfig,
diff --git a/src/containers/LayersPanel.js b/src/containers/LayersPanel.js
index 16a1a9b01b5cec0d1005c357debb1fd72dcf801d..850bb04804351f4dbeb99f00018412d985c583ce 100644
--- a/src/containers/LayersPanel.js
+++ b/src/containers/LayersPanel.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { LayersPanel } from '../components/LayersPanel';
 import {
diff --git a/src/containers/LocalePicker.js b/src/containers/LocalePicker.js
index 509fef4e3648f8a7b4e4baaf5b0052e12dc76607..94c09037402218037caae37f4c5ee1e467f1be91 100644
--- a/src/containers/LocalePicker.js
+++ b/src/containers/LocalePicker.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { LocalePicker } from '../components/LocalePicker';
 
 /**
diff --git a/src/containers/ManifestForm.js b/src/containers/ManifestForm.js
index e64b68d68c74d31e07ae6c7c3627b761b83a22a7..f65e869d00c87815c260bd494db65a9148b9cfe8 100644
--- a/src/containers/ManifestForm.js
+++ b/src/containers/ManifestForm.js
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { ManifestForm } from '../components/ManifestForm';
diff --git a/src/containers/ManifestListItem.js b/src/containers/ManifestListItem.js
index 14ca6d70e32a8be40c7101789d594d22f9d59635..02da9db780e564c16cfee5976636ae52c250bd3b 100644
--- a/src/containers/ManifestListItem.js
+++ b/src/containers/ManifestListItem.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import {
   getManifest,
diff --git a/src/containers/ManifestListItemError.js b/src/containers/ManifestListItemError.js
index 001d98750b73b2916dded1f97fb205e82df2f433..276d48ca8854c54bbf77e68b01e75dfab68563f0 100644
--- a/src/containers/ManifestListItemError.js
+++ b/src/containers/ManifestListItemError.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { fetchManifest, removeResource } from '../state/actions';
 import { ManifestListItemError } from '../components/ManifestListItemError';
diff --git a/src/containers/ManifestRelatedLinks.js b/src/containers/ManifestRelatedLinks.js
index 6bcc356778bf8d8f6388d25c2e2698462ea1a119..5d7157b20a51ab89e240416935c8460fd5dd9194 100644
--- a/src/containers/ManifestRelatedLinks.js
+++ b/src/containers/ManifestRelatedLinks.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import {
   getManifestHomepage,
diff --git a/src/containers/MinimalWindow.js b/src/containers/MinimalWindow.js
index b0e4974bcbd8e50c8758b70a83c568291cac5f3a..7c4cb050eb38fdb137ce08721e3a2d174746cebd 100644
--- a/src/containers/MinimalWindow.js
+++ b/src/containers/MinimalWindow.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { MinimalWindow } from '../components/MinimalWindow';
diff --git a/src/containers/MosaicRenderPreview.js b/src/containers/MosaicRenderPreview.js
index 0103bab9c5beeba6658c2573ade4196ef5f2243b..92bb9ea8808ede730d5df99233ac8d610ca6c20f 100644
--- a/src/containers/MosaicRenderPreview.js
+++ b/src/containers/MosaicRenderPreview.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import { getManifestTitle } from '../state/selectors';
diff --git a/src/containers/OpenSeadragonViewer.js b/src/containers/OpenSeadragonViewer.js
index bf5d3fef6b091af9709e994c6e6a49d2d206b1f3..6c5ce052b4e6a25a54742e29a4414bd9f4cc0ff0 100644
--- a/src/containers/OpenSeadragonViewer.js
+++ b/src/containers/OpenSeadragonViewer.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import flatten from 'lodash/flatten';
 import { withPlugins } from '../extend/withPlugins';
 import { OpenSeadragonViewer } from '../components/OpenSeadragonViewer';
diff --git a/src/containers/PrimaryWindow.js b/src/containers/PrimaryWindow.js
index 336894235f31a71867a2e77da22347d9099c7909..637b4cc4f600e6389f28ffe9a6de92cd5cf77a6b 100644
--- a/src/containers/PrimaryWindow.js
+++ b/src/containers/PrimaryWindow.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import {
   getManifestoInstance, getVisibleCanvasAudioResources, getVisibleCanvasVideoResources, getWindow,
diff --git a/src/containers/SanitizedHtml.js b/src/containers/SanitizedHtml.js
index 932bfa0c0a650823e8c4d473d230fd749581b251..66e7fdef0a4786c2021dd4ae15f0d24ed13ab4ca 100644
--- a/src/containers/SanitizedHtml.js
+++ b/src/containers/SanitizedHtml.js
@@ -1,4 +1,4 @@
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { SanitizedHtml } from '../components/SanitizedHtml';
 
 /**
diff --git a/src/containers/ScrollIndicatedDialogContent.js b/src/containers/ScrollIndicatedDialogContent.js
index 66ec29e1abc18cec67c6603ae5dbc848bec301fe..facfeb6a738a1025de78902af76a2d55e9bf3960 100644
--- a/src/containers/ScrollIndicatedDialogContent.js
+++ b/src/containers/ScrollIndicatedDialogContent.js
@@ -1,4 +1,4 @@
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { ScrollIndicatedDialogContent } from '../components/ScrollIndicatedDialogContent';
 
 /**
diff --git a/src/containers/SearchHit.js b/src/containers/SearchHit.js
index 60abacf26dfe4560dcbdd509abc4d37ea33a4a1c..613cef2dceccb8097b6f7fde281e83ef1c2f30b6 100644
--- a/src/containers/SearchHit.js
+++ b/src/containers/SearchHit.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { SearchHit } from '../components/SearchHit';
 import * as actions from '../state/actions';
diff --git a/src/containers/SearchPanel.js b/src/containers/SearchPanel.js
index 64461b48c8f2ae69f343890eeaeae1d9ce34e208..29bccbedea9abd1cb4c97aa79365ef8b35cd121f 100644
--- a/src/containers/SearchPanel.js
+++ b/src/containers/SearchPanel.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import * as actions from '../state/actions';
 import { withPlugins } from '../extend/withPlugins';
 import { SearchPanel } from '../components/SearchPanel';
diff --git a/src/containers/SearchPanelControls.js b/src/containers/SearchPanelControls.js
index e81d46a4f3b48dedb66f93f4e2bc3034aeb77f12..da793f939bd638c041976a9762521c2ec5a5b937 100644
--- a/src/containers/SearchPanelControls.js
+++ b/src/containers/SearchPanelControls.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { SearchPanelControls } from '../components/SearchPanelControls';
 import * as actions from '../state/actions';
diff --git a/src/containers/SearchPanelNavigation.js b/src/containers/SearchPanelNavigation.js
index 614b2419209114973c256fc4029944724185b715..382235a9223ccd9008b999cfb67c54ee6544ad7d 100644
--- a/src/containers/SearchPanelNavigation.js
+++ b/src/containers/SearchPanelNavigation.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { SearchPanelNavigation } from '../components/SearchPanelNavigation';
 import * as actions from '../state/actions';
diff --git a/src/containers/SearchResults.js b/src/containers/SearchResults.js
index 15e660d99a297bfdb9a13a57d4f19e48697c8097..7bc6cbe75056cd3f6ee2d6393a97bac0aabc8636 100644
--- a/src/containers/SearchResults.js
+++ b/src/containers/SearchResults.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { SearchResults } from '../components/SearchResults';
 import * as actions from '../state/actions';
diff --git a/src/containers/SelectCollection.js b/src/containers/SelectCollection.js
index 446c32711f233e68c9ca4fe904e643c4e71d0ab2..623f4759a2c0d03ecfc68052e270fde2b17a5596 100644
--- a/src/containers/SelectCollection.js
+++ b/src/containers/SelectCollection.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import * as actions from '../state/actions';
 import { withPlugins } from '../extend/withPlugins';
 import {
diff --git a/src/containers/SidebarIndexItem.js b/src/containers/SidebarIndexItem.js
index e58afff81c4fdd32cd41d211f51aff84590fed28..a05595ee2579cb5b4dced384328db0740dba875c 100644
--- a/src/containers/SidebarIndexItem.js
+++ b/src/containers/SidebarIndexItem.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { SidebarIndexItem } from '../components/SidebarIndexItem';
 
diff --git a/src/containers/SidebarIndexList.js b/src/containers/SidebarIndexList.js
index 866e7d61d7229e239182378c8cd3e075a5a85cfa..fca60c02234afd0bbb5f580288f71102ed4f4b55 100644
--- a/src/containers/SidebarIndexList.js
+++ b/src/containers/SidebarIndexList.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import {
diff --git a/src/containers/SidebarIndexTableOfContents.js b/src/containers/SidebarIndexTableOfContents.js
index 98caa554c90d31bf077dc7169a1b209a0bd28fbe..c60a45a58ba415d09d8a8620dfb73f73685948d6 100644
--- a/src/containers/SidebarIndexTableOfContents.js
+++ b/src/containers/SidebarIndexTableOfContents.js
@@ -1,8 +1,8 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
-import { alpha } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@mui/material/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { SidebarIndexTableOfContents } from '../components/SidebarIndexTableOfContents';
 import {
diff --git a/src/containers/SidebarIndexThumbnail.js b/src/containers/SidebarIndexThumbnail.js
index 9f582dc4647693cfb9d78d574648bd4169f066d1..ab951050a3737ab3ed1f38a4a9feec76fa5fab34 100644
--- a/src/containers/SidebarIndexThumbnail.js
+++ b/src/containers/SidebarIndexThumbnail.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { SidebarIndexThumbnail } from '../components/SidebarIndexThumbnail';
 import { getConfig } from '../state/selectors';
diff --git a/src/containers/ThumbnailCanvasGrouping.js b/src/containers/ThumbnailCanvasGrouping.js
index 0804cee2d51e20fbf78c28f64f4d73cef0b9aa93..ed9c5addc0a58215666b6f1d9b29b43d1dc7ffbc 100644
--- a/src/containers/ThumbnailCanvasGrouping.js
+++ b/src/containers/ThumbnailCanvasGrouping.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { getCurrentCanvas } from '../state/selectors';
diff --git a/src/containers/ThumbnailNavigation.js b/src/containers/ThumbnailNavigation.js
index e3be9a8f3363f1068771976c0d71929445d9e771..69c38fb9b5236939dce13723661edaa99df0f781 100644
--- a/src/containers/ThumbnailNavigation.js
+++ b/src/containers/ThumbnailNavigation.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { ThumbnailNavigation } from '../components/ThumbnailNavigation';
diff --git a/src/containers/VideoViewer.js b/src/containers/VideoViewer.js
index 07919ecc188d0f7173863d4b867b0fb508d3fea6..77c375195b24a8ef853be54224ca2770f117e725 100644
--- a/src/containers/VideoViewer.js
+++ b/src/containers/VideoViewer.js
@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { VideoViewer } from '../components/VideoViewer';
diff --git a/src/containers/ViewerInfo.js b/src/containers/ViewerInfo.js
index 7e2714d9b7880b574dea33859bb272bd98445394..0d642ae10a541cf52106f0a8aaa4fc782075d6ca 100644
--- a/src/containers/ViewerInfo.js
+++ b/src/containers/ViewerInfo.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { ViewerInfo } from '../components/ViewerInfo';
 import {
diff --git a/src/containers/ViewerNavigation.js b/src/containers/ViewerNavigation.js
index 38fb8d4602b0e24e8095486f1c13aa6edaac7a33..1e973cc0004d015e6c4b47dec6d6e8d586536e00 100644
--- a/src/containers/ViewerNavigation.js
+++ b/src/containers/ViewerNavigation.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import {
diff --git a/src/containers/ViewerNavigationVideo.js b/src/containers/ViewerNavigationVideo.js
index 5d894b0d921a2b052c8b4156c0bc0e7466a5b6e2..d301278c91cbf03feef4c0b2725e35d059b35d4d 100755
--- a/src/containers/ViewerNavigationVideo.js
+++ b/src/containers/ViewerNavigationVideo.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { ViewerNavigationVideo } from '../components/ViewerNavigationVideo';
diff --git a/src/containers/Window.js b/src/containers/Window.js
index 6e4eb5d3ea453fa54b443a224f9736b5c6b39c84..75e634f91ff9bf0eeb0b497299223db260d5ceef 100644
--- a/src/containers/Window.js
+++ b/src/containers/Window.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
diff --git a/src/containers/WindowAuthenticationBar.js b/src/containers/WindowAuthenticationBar.js
index f3b7f8733367a8b7f2adf4c1e35f74d49b3353f1..74541246dc9c2fd61c9028a941ff8e380ac1ae30 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 { alpha } from '@material-ui/core/styles/colorManipulator';
+import { alpha } from '@mui/material/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WindowAuthenticationBar } from '../components/WindowAuthenticationBar';
 
diff --git a/src/containers/WindowCanvasNavigationControls.js b/src/containers/WindowCanvasNavigationControls.js
index 8028c13df02bf98720c722060c945e7cd2042281..4b463ed8e4a7de28d681ee51e2db59bbab3c6f19 100644
--- a/src/containers/WindowCanvasNavigationControls.js
+++ b/src/containers/WindowCanvasNavigationControls.js
@@ -1,8 +1,8 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withSize } from 'react-sizeme';
-import { withStyles } from '@material-ui/core';
-import { alpha } from '@material-ui/core/styles/colorManipulator';
+import withStyles from '@mui/styles/withStyles';
+import { alpha } from '@mui/material/styles';
 import { withPlugins } from '../extend/withPlugins';
 import { getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControls } from '../components/WindowCanvasNavigationControls';
diff --git a/src/containers/WindowCanvasNavigationControlsVideo.js b/src/containers/WindowCanvasNavigationControlsVideo.js
index 6c0ed55e85f0ea4579d478be5ac436252afc93ec..5c909431d0958603079bb5db307af7f8a0a3f2ae 100755
--- a/src/containers/WindowCanvasNavigationControlsVideo.js
+++ b/src/containers/WindowCanvasNavigationControlsVideo.js
@@ -1,8 +1,8 @@
 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 withStyles from '@mui/styles/withStyles';
+import { alpha } from '@mui/material/styles';
 import { withPlugins } from '../extend/withPlugins';
 import { getWorkspace } from '../state/selectors';
 import { WindowCanvasNavigationControlsVideo } from '../components/WindowCanvasNavigationControlsVideo';
@@ -34,7 +34,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%',
diff --git a/src/containers/WindowListButton.js b/src/containers/WindowListButton.js
index 74506d9dbaec7e421ae6288d6eb93e64210aeaec..d9923f970cc368ba24392f4aeb15ab1454cc032d 100644
--- a/src/containers/WindowListButton.js
+++ b/src/containers/WindowListButton.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { getWindowIds, getWorkspace } from '../state/selectors';
 import { WindowListButton } from '../components/WindowListButton';
diff --git a/src/containers/WindowSideBar.js b/src/containers/WindowSideBar.js
index 012b2fd5d5cf273865948294150c6bb72c6d8043..4b51046540316d9e3140842cab5a3cd2087e6908 100644
--- a/src/containers/WindowSideBar.js
+++ b/src/containers/WindowSideBar.js
@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import { WindowSideBar } from '../components/WindowSideBar';
diff --git a/src/containers/WindowSideBarAnnotationsPanel.js b/src/containers/WindowSideBarAnnotationsPanel.js
index 904cea2f93053bcbca8d2c0903931f934ccc6e9d..8a1cb84f748cc146f37c1ae3e46956239b08ca5f 100644
--- a/src/containers/WindowSideBarAnnotationsPanel.js
+++ b/src/containers/WindowSideBarAnnotationsPanel.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import {
   getVisibleCanvasIds,
diff --git a/src/containers/WindowSideBarButtons.js b/src/containers/WindowSideBarButtons.js
index 4327eec2687fdfacd6b91721de5c7af22eb8eb0c..9bd20d983898c6b81629e904e90b8de37a2bd2ab 100644
--- a/src/containers/WindowSideBarButtons.js
+++ b/src/containers/WindowSideBarButtons.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
diff --git a/src/containers/WindowSideBarCanvasPanel.js b/src/containers/WindowSideBarCanvasPanel.js
index 24324d253865b996f88b608e36c67245c11a0f36..1f86dabe62e96b788990ee87a8604829262fe1f8 100644
--- a/src/containers/WindowSideBarCanvasPanel.js
+++ b/src/containers/WindowSideBarCanvasPanel.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { WindowSideBarCanvasPanel } from '../components/WindowSideBarCanvasPanel';
diff --git a/src/containers/WindowSideBarCollectionPanel.js b/src/containers/WindowSideBarCollectionPanel.js
index 32b31a77b283f90756a568cffe44be7282f31d5b..10afe3cffc7ad6538b88f601cc1c4acf87937c2b 100644
--- a/src/containers/WindowSideBarCollectionPanel.js
+++ b/src/containers/WindowSideBarCollectionPanel.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import {
diff --git a/src/containers/WindowSideBarInfoPanel.js b/src/containers/WindowSideBarInfoPanel.js
index 9fc498ce117521c64e176a2559bebd8c8b40692d..caadfa004ec65ed954128efa11b867c15c4b4912 100644
--- a/src/containers/WindowSideBarInfoPanel.js
+++ b/src/containers/WindowSideBarInfoPanel.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import {
diff --git a/src/containers/WindowThumbnailSettings.js b/src/containers/WindowThumbnailSettings.js
index 24878457a780b19e3e280e0e289179636d0fb28b..6b7a663474db5a6f6119698677fdd63341689401 100644
--- a/src/containers/WindowThumbnailSettings.js
+++ b/src/containers/WindowThumbnailSettings.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { getThumbnailNavigationPosition, getThemeDirection } from '../state/selectors';
diff --git a/src/containers/WindowTopBar.js b/src/containers/WindowTopBar.js
index 82148be2f4cbe397f2c5d3edd1cfb0e928b10734..2650d82570d2dc4f94d8016b3478fb6561b05423 100644
--- a/src/containers/WindowTopBar.js
+++ b/src/containers/WindowTopBar.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { getWindowConfig, isFocused } from '../state/selectors';
diff --git a/src/containers/WindowTopBarPluginArea.js b/src/containers/WindowTopBarPluginArea.js
index 4bcdc88f5ae95da56b721b52d856012ded348c0a..d5738eb23f4221229a6d97bfe1c724c2b4bf18d4 100644
--- a/src/containers/WindowTopBarPluginArea.js
+++ b/src/containers/WindowTopBarPluginArea.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WindowTopBarPluginArea } from '../components/WindowTopBarPluginArea';
 
diff --git a/src/containers/WindowTopBarPluginMenu.js b/src/containers/WindowTopBarPluginMenu.js
index 946d9d0b5db92798d0ab882cdda9736bca96154c..50c74c6d6850fbcf0bff1b4d2234306135cbd20b 100644
--- a/src/containers/WindowTopBarPluginMenu.js
+++ b/src/containers/WindowTopBarPluginMenu.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WindowTopBarPluginMenu } from '../components/WindowTopBarPluginMenu';
 import { getContainerId } from '../state/selectors';
diff --git a/src/containers/WindowTopBarTitle.js b/src/containers/WindowTopBarTitle.js
index 5cb51b8274b7ffc7b1bca026c5b5fe5cfea0207f..9e10dbdbde757f905ef5cad34a4bfdfc620ae3c6 100644
--- a/src/containers/WindowTopBarTitle.js
+++ b/src/containers/WindowTopBarTitle.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { getManifestStatus, getManifestTitle, getWindowConfig } from '../state/selectors';
 import { WindowTopBarTitle } from '../components/WindowTopBarTitle';
diff --git a/src/containers/WindowTopMenuButton.js b/src/containers/WindowTopMenuButton.js
index 54d863e2b688ca032ac5ed7af9e093e176b7fc18..105a582944704c3358900c96315e504d69567f51 100644
--- a/src/containers/WindowTopMenuButton.js
+++ b/src/containers/WindowTopMenuButton.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WindowTopMenuButton } from '../components/WindowTopMenuButton';
 
diff --git a/src/containers/WindowViewSettings.js b/src/containers/WindowViewSettings.js
index 6fc417f284b1f5b585c85ec369ddbd31946ece8a..26966e5c36b9e59d78138279521d383c1dc9a66e 100644
--- a/src/containers/WindowViewSettings.js
+++ b/src/containers/WindowViewSettings.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { getAllowedWindowViewTypes, getWindowViewType } from '../state/selectors';
diff --git a/src/containers/Workspace.js b/src/containers/Workspace.js
index 6eac59013b39931e67ce89e965cb58bfa3678c7b..1e18b463c843fdfe2a84b3621fb9b335a3c09667 100644
--- a/src/containers/Workspace.js
+++ b/src/containers/Workspace.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { Workspace } from '../components/Workspace';
 import {
diff --git a/src/containers/WorkspaceAdd.js b/src/containers/WorkspaceAdd.js
index fe7b6c68232c39a5a2e9a4f7e815cf198335f288..5f926789d13ce29b75e1d408d94fecca6d32f2ea 100644
--- a/src/containers/WorkspaceAdd.js
+++ b/src/containers/WorkspaceAdd.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { WorkspaceAdd } from '../components/WorkspaceAdd';
diff --git a/src/containers/WorkspaceAddButton.js b/src/containers/WorkspaceAddButton.js
index 642e83fc482c9fbcf3404c6d35fb4701e4d48c10..64a5656070ce2bc783984346729708fd2e48839b 100644
--- a/src/containers/WorkspaceAddButton.js
+++ b/src/containers/WorkspaceAddButton.js
@@ -1,13 +1,15 @@
 import { connect } from 'react-redux';
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
-import withWidth from '@material-ui/core/withWidth';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { getWindowIds, getWorkspace } from '../state/selectors';
 import { WorkspaceAddButton } from '../components/WorkspaceAddButton';
 
+// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
+const withWidth = () => (WrappedComponent) => (props) => <WrappedComponent {...props} width="xs" />;
+
 /**
  * mapStateToProps - to hook up connect
  * @memberof WorkspaceControlPanel
diff --git a/src/containers/WorkspaceArea.js b/src/containers/WorkspaceArea.js
index c2655978c98e9a934c485eccbf5984192b2aa31a..7b61552beed2e9cc9b5545d584481b9e263261a9 100644
--- a/src/containers/WorkspaceArea.js
+++ b/src/containers/WorkspaceArea.js
@@ -1,7 +1,8 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles, lighten, darken } from '@material-ui/core/styles';
+import { lighten, darken } from '@mui/material/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WorkspaceArea } from '../components/WorkspaceArea';
 import { getConfig, getWindowIds, getWorkspace } from '../state/selectors';
@@ -26,7 +27,7 @@ const mapStateToProps = state => (
  * @returns {{background: {background: string}}}
  */
 const styles = (theme) => {
-  const getBackgroundColor = theme.palette.type === 'light' ? darken : lighten;
+  const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten;
 
   return {
     viewer: {
diff --git a/src/containers/WorkspaceControlPanel.js b/src/containers/WorkspaceControlPanel.js
index 88f482e91d3a8cb92d78770c855eae6e7bda8907..8b2ce3e96a462e5bb71c6388d85795131edfb765 100644
--- a/src/containers/WorkspaceControlPanel.js
+++ b/src/containers/WorkspaceControlPanel.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WorkspaceControlPanel } from '../components/WorkspaceControlPanel';
 
diff --git a/src/containers/WorkspaceControlPanelButtons.js b/src/containers/WorkspaceControlPanelButtons.js
index eaef08bd775196782632a0bb6022759aa41b3d57..82a70f0fc42c7856bcccc2d56a957720564a1e41 100644
--- a/src/containers/WorkspaceControlPanelButtons.js
+++ b/src/containers/WorkspaceControlPanelButtons.js
@@ -1,5 +1,5 @@
 import { compose } from 'redux';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WorkspaceControlPanelButtons } from '../components/WorkspaceControlPanelButtons';
 
diff --git a/src/containers/WorkspaceElastic.js b/src/containers/WorkspaceElastic.js
index 9badc4614bbc259c42c3f64d6ca1654b37343fcc..8454e0458f3b4009819a26451e458375705d8fb4 100644
--- a/src/containers/WorkspaceElastic.js
+++ b/src/containers/WorkspaceElastic.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import WorkspaceElastic from '../components/WorkspaceElastic';
diff --git a/src/containers/WorkspaceElasticWindow.js b/src/containers/WorkspaceElasticWindow.js
index e619b40e388e61baa51c2565978aa8326739a08c..e59e81e25ccf4f30049e81b8b2e5dc1545010e6e 100644
--- a/src/containers/WorkspaceElasticWindow.js
+++ b/src/containers/WorkspaceElasticWindow.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import * as actions from '../state/actions';
 import WorkspaceElasticWindow from '../components/WorkspaceElasticWindow';
 import {
diff --git a/src/containers/WorkspaceExport.js b/src/containers/WorkspaceExport.js
index e1ac982c10aa03c0cff9451dd1c3fbb63bac98ab..d0f6508bc27e931dc6ab81bda40c305b90869a92 100644
--- a/src/containers/WorkspaceExport.js
+++ b/src/containers/WorkspaceExport.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withTranslation } from 'react-i18next';
 import { withPlugins } from '../extend/withPlugins';
 import { WorkspaceExport } from '../components/WorkspaceExport';
diff --git a/src/containers/WorkspaceImport.js b/src/containers/WorkspaceImport.js
index 01c22d154776e0dff666ef3a28af1df9f5daaf1a..668e2cf8aef353972f6f2d80a67008354517cd19 100644
--- a/src/containers/WorkspaceImport.js
+++ b/src/containers/WorkspaceImport.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WorkspaceImport } from '../components/WorkspaceImport';
 import * as actions from '../state/actions';
diff --git a/src/containers/WorkspaceMenuButton.js b/src/containers/WorkspaceMenuButton.js
index 16e10d569baeeb4c63666db50e14fddf26cbeca5..bc8545d2e2b9251024ac0590710a8050dde21016 100644
--- a/src/containers/WorkspaceMenuButton.js
+++ b/src/containers/WorkspaceMenuButton.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WorkspaceMenuButton } from '../components/WorkspaceMenuButton';
 
diff --git a/src/containers/WorkspaceMosaic.js b/src/containers/WorkspaceMosaic.js
index b66e2f4aa67fd4741712f7d9e131b052e693b9f6..d05ef74f9ba34c6d724c87563bbecbb4eb3d4982 100644
--- a/src/containers/WorkspaceMosaic.js
+++ b/src/containers/WorkspaceMosaic.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { getWorkspace } from '../state/selectors';
 import * as actions from '../state/actions';
diff --git a/src/containers/WorkspaceOptionsButton.js b/src/containers/WorkspaceOptionsButton.js
index f17b51310f56018393b23b6593ff87da902f2857..618fe339f9faf2e4de13ca7e6afd29c51504bf2c 100644
--- a/src/containers/WorkspaceOptionsButton.js
+++ b/src/containers/WorkspaceOptionsButton.js
@@ -1,6 +1,6 @@
 import { compose } from 'redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core/styles';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WorkspaceOptionsButton } from '../components/WorkspaceOptionsButton';
 
diff --git a/src/containers/WorkspaceSelectionDialog.js b/src/containers/WorkspaceSelectionDialog.js
index d14881af77bf8f0a0a894d50cf82b821910c037f..a5974e6501d32c20fea7ecf667e1432df127c48e 100644
--- a/src/containers/WorkspaceSelectionDialog.js
+++ b/src/containers/WorkspaceSelectionDialog.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import { WorkspaceSelectionDialog } from '../components/WorkspaceSelectionDialog';
 import * as actions from '../state/actions';
diff --git a/src/containers/ZoomControls.js b/src/containers/ZoomControls.js
index 512ce860cbef74cb3534084c3d8ba9d0e06db0bc..273a0dd5f0e0a7ffa4848484ae4fdcfe4484d4e7 100644
--- a/src/containers/ZoomControls.js
+++ b/src/containers/ZoomControls.js
@@ -1,7 +1,7 @@
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import { withTranslation } from 'react-i18next';
-import { withStyles } from '@material-ui/core';
+import withStyles from '@mui/styles/withStyles';
 import { withPlugins } from '../extend/withPlugins';
 import * as actions from '../state/actions';
 import { getShowZoomControlsConfig, getViewer } from '../state/selectors';
diff --git a/src/extend/pluginMapping.js b/src/extend/pluginMapping.js
index efc449252abff501d89a04062516592fe7c2dd9b..7ddeefd6bb9c6e88f9cb1134abb0f66dffef05c6 100644
--- a/src/extend/pluginMapping.js
+++ b/src/extend/pluginMapping.js
@@ -18,7 +18,7 @@ import CompanionWindowRegistry from '../lib/CompanionWindowRegistry';
  */
 export function createTargetToPluginMapping(plugins) {
   return plugins.reduce((map, plugin) => (
-    update(map, [plugin.target, plugin.mode], x => [...x || [], plugin])
+    update(map, [plugin.target, plugin.mode], x => [...(x || []), plugin])
   ), {});
 }