diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js
index 9e7e43077..3e1e93dab 100644
--- a/src/components/WindowTopBar.js
+++ b/src/components/WindowTopBar.js
@@ -1,5 +1,6 @@
 import { Component } from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@mui/material/styles';
 import MenuIcon from '@mui/icons-material/MenuSharp';
 import CloseIcon from '@mui/icons-material/CloseSharp';
 import Toolbar from '@mui/material/Toolbar';
@@ -15,6 +16,22 @@ import WindowMaxIcon from './icons/WindowMaxIcon';
 import WindowMinIcon from './icons/WindowMinIcon';
 import ns from '../config/css-ns';
 
+const Root = styled(AppBar, { name: 'WindowTopBar', slot: 'root' })(() => ({
+  zIndex: 1100,
+}));
+
+const StyledToolbar = styled(Toolbar, { name: 'WindowTopBar', slot: 'toolbar' })(({ ownerState, theme }) => ({
+  backgroundColor: theme.palette.shades.main,
+  borderTop: '2px solid ',
+  borderTopColor: ownerState.focused ? theme.palette.primary.main : 'transparent',
+  minHeight: 32,
+  paddingLeft: theme.spacing(0.5),
+  paddingRight: theme.spacing(0.5),
+  ...(ownerState.windowDraggable && {
+    cursor: 'move',
+  }),
+}));
+
 /**
  * WindowTopBar
  */
@@ -31,65 +48,53 @@ export class WindowTopBar extends Component {
     } = this.props;
 
     return (
-      <AppBar position="relative" color="default" enableColorOnDark sx={{ zIndex: 1100 }}>
-        <nav aria-label={t('windowNavigation')}>
-          <Toolbar
-            disableGutters
-            onMouseDown={focusWindow}
-            sx={{
-              backgroundColor: 'shades.main',
-              borderTop: '2px solid ',
-              borderTopColor: focused ? 'primary.main' : 'transparent',
-              minHeight: 32,
-              paddingLeft: 0.5,
-              paddingRight: 0.5,
-              ...(windowDraggable && {
-                cursor: 'move',
-              }),
-            }}
-            className={classNames(ns('window-top-bar'))}
-            variant="dense"
-          >
-            {allowWindowSideBar && (
-              <MiradorMenuButton
-                aria-label={t('toggleWindowSideBar')}
-                onClick={toggleWindowSideBar}
-                className={ns('window-menu-btn')}
-              >
-                <MenuIcon />
-              </MiradorMenuButton>
-            )}
-            <WindowTopBarTitle
-              windowId={windowId}
-            />
-            {allowTopMenuButton && (
-              <WindowTopMenuButton windowId={windowId} className={ns('window-menu-btn')} />
-            )}
-            <WindowTopBarPluginArea windowId={windowId} />
-            <WindowTopBarPluginMenu windowId={windowId} />
-            {allowMaximize && (
-              <MiradorMenuButton
-                aria-label={(maximized ? t('minimizeWindow') : t('maximizeWindow'))}
-                className={classNames(ns('window-maximize'), ns('window-menu-btn'))}
-                onClick={(maximized ? minimizeWindow : maximizeWindow)}
-              >
-                {(maximized ? <WindowMinIcon /> : <WindowMaxIcon />)}
-              </MiradorMenuButton>
-            )}
-            {allowFullscreen && (
-              <FullScreenButton className={ns('window-menu-btn')} />
-            )}
-            {allowClose && (
-              <MiradorMenuButton
-                aria-label={t('closeWindow')}
-                className={classNames(ns('window-close'), ns('window-menu-btn'))}
-                onClick={removeWindow}
-              >
-                <CloseIcon />
-              </MiradorMenuButton>
-            )}
-          </Toolbar>
-        </nav>
+      <AppBar component="nav" aria-label={t('windowNavigation')}  position="relative" color="default" enableColorOnDark>
+        <StyledToolbar
+          disableGutters
+          onMouseDown={focusWindow}
+          ownerState={this.props}
+          className={classNames(ns('window-top-bar'))}
+          variant="dense"
+        >
+          {allowWindowSideBar && (
+            <MiradorMenuButton
+              aria-label={t('toggleWindowSideBar')}
+              onClick={toggleWindowSideBar}
+              className={ns('window-menu-btn')}
+            >
+              <MenuIcon />
+            </MiradorMenuButton>
+          )}
+          <WindowTopBarTitle
+            windowId={windowId}
+          />
+          {allowTopMenuButton && (
+            <WindowTopMenuButton windowId={windowId} className={ns('window-menu-btn')} />
+          )}
+          <WindowTopBarPluginArea windowId={windowId} />
+          <WindowTopBarPluginMenu windowId={windowId} />
+          {allowMaximize && (
+            <MiradorMenuButton
+              aria-label={(maximized ? t('minimizeWindow') : t('maximizeWindow'))}
+              className={classNames(ns('window-maximize'), ns('window-menu-btn'))}
+              onClick={(maximized ? minimizeWindow : maximizeWindow)}
+            >
+              {(maximized ? <WindowMinIcon /> : <WindowMaxIcon />)}
+            </MiradorMenuButton>
+          )}
+          {allowFullscreen && (
+            <FullScreenButton className={ns('window-menu-btn')} />
+          )}
+          {allowClose && (
+            <MiradorMenuButton
+              aria-label={t('closeWindow')}
+              className={classNames(ns('window-close'), ns('window-menu-btn'))}
+              onClick={removeWindow}
+            >
+              <CloseIcon />
+            </MiradorMenuButton>
+          )}
+        </StyledToolbar>
       </AppBar>
     );
   }
@@ -101,7 +106,7 @@ WindowTopBar.propTypes = {
   allowMaximize: PropTypes.bool,
   allowTopMenuButton: PropTypes.bool,
   allowWindowSideBar: PropTypes.bool,
-  focused: PropTypes.bool,
+  focused: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
   focusWindow: PropTypes.func,
   maximized: PropTypes.bool,
   maximizeWindow: PropTypes.func,
@@ -109,7 +114,7 @@ WindowTopBar.propTypes = {
   removeWindow: PropTypes.func.isRequired,
   t: PropTypes.func,
   toggleWindowSideBar: PropTypes.func.isRequired,
-  windowDraggable: PropTypes.bool,
+  windowDraggable: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
   windowId: PropTypes.string.isRequired,
 };