2 files changed, 9 insertions, 10 deletions
diff --git a/webui/src/components/Header/Header.tsx b/webui/src/components/Header/Header.tsx
index f9053f76..961696d7 100644
--- a/webui/src/components/Header/Header.tsx
+++ b/webui/src/components/Header/Header.tsx
@@ -1,12 +1,12 @@
+import AppBar from '@mui/material/AppBar';
+import Tab, { TabProps } from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Toolbar from '@mui/material/Toolbar';
+import Tooltip from '@mui/material/Tooltip/Tooltip';
+import { alpha } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { Link, useLocation } from 'react-router-dom';
 
-import AppBar from '@material-ui/core/AppBar';
-import Tab, { TabProps } from '@material-ui/core/Tab';
-import Tabs from '@material-ui/core/Tabs';
-import Toolbar from '@material-ui/core/Toolbar';
-import Tooltip from '@material-ui/core/Tooltip/Tooltip';
-import { fade, makeStyles } from '@material-ui/core/styles';
-
 import CurrentIdentity from '../Identity/CurrentIdentity';
 import { LightSwitch } from '../Themer';
 
@@ -30,7 +30,7 @@ const useStyles = makeStyles((theme) => ({
   },
   lightSwitch: {
     marginRight: '20px',
-    color: fade(theme.palette.primary.contrastText, 0.5),
+    color: alpha(theme.palette.primary.contrastText, 0.5),
   },
   logo: {
     height: '42px',
diff --git a/webui/src/components/Header/index.tsx b/webui/src/components/Header/index.tsx
index e4dc8d19..8375c74a 100644
--- a/webui/src/components/Header/index.tsx
+++ b/webui/src/components/Header/index.tsx
@@ -1,7 +1,6 @@
+import CssBaseline from '@mui/material/CssBaseline';
 import * as React from 'react';
 
-import CssBaseline from '@material-ui/core/CssBaseline';
-
 import Header from './Header';
 
 type Props = { children: React.ReactNode };