diff --git a/frontend/src/components/common/DataLabel.js b/frontend/src/components/common/DataLabel.js
index 7c58946..815f7cb 100644
--- a/frontend/src/components/common/DataLabel.js
+++ b/frontend/src/components/common/DataLabel.js
@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
-import Typography from "@material-ui/core/Typography";
-import { makeStyles } from "@material-ui/core/styles";
+import Typography from "@mui/material/Typography";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles(theme => ({
   panel: {
@@ -17,10 +17,7 @@ const useStyles = makeStyles(theme => ({
 
 const DataLabel = ({ label, data }) => {
   const classes = useStyles();
-  const lbl = useMemo(
-    () => (label.endsWith(":") ? label : `${label}:`),
-    [label]
-  );
+  const lbl = useMemo(() => (label.endsWith(":") ? label : `${label}:`), [label]);
 
   return (
     <div className={classes.panel}>
diff --git a/frontend/src/components/common/NavigationButtons.js b/frontend/src/components/common/NavigationButtons.js
index c8d10eb..7b01845 100644
--- a/frontend/src/components/common/NavigationButtons.js
+++ b/frontend/src/components/common/NavigationButtons.js
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import PropTypes from "prop-types";
 import ToggleButton from "@material-ui/lab/ToggleButton";
 import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 
 const NavigationButtons = ({ tabs, onTabChange }) => {
   const [selected, setSelected] = useState(tabs[0].code);
@@ -13,19 +13,9 @@ const NavigationButtons = ({ tabs, onTabChange }) => {
   };
 
   return (
-    <ToggleButtonGroup
-      size="small"
-      value={selected}
-      exclusive
-      onChange={handleTabSelection}
-    >
+    <ToggleButtonGroup size="small" value={selected} exclusive onChange={handleTabSelection}>
       {tabs.map(tab => (
-        <ToggleButton
-          key={tab.code}
-          value={tab.code}
-          aria-label="navigation buttons"
-          disabled={selected === tab.code}
-        >
+        <ToggleButton key={tab.code} value={tab.code} aria-label="navigation buttons" disabled={selected === tab.code}>
           <Tooltip title={tab.tooltip}>
             <tab.icon color="primary" />
           </Tooltip>
@@ -36,9 +26,7 @@ const NavigationButtons = ({ tabs, onTabChange }) => {
 };
 
 NavigationButtons.propTypes = {
-  tabs: PropTypes.arrayOf(
-    PropTypes.shape({ code: PropTypes.string.isRequired })
-  ).isRequired,
+  tabs: PropTypes.arrayOf(PropTypes.shape({ code: PropTypes.string.isRequired })).isRequired,
   onTabChange: PropTypes.func
 };
 
diff --git a/frontend/src/components/common/NotAllowed.js b/frontend/src/components/common/NotAllowed.js
index 363c420..c799fea 100644
--- a/frontend/src/components/common/NotAllowed.js
+++ b/frontend/src/components/common/NotAllowed.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import { useTranslation } from "react-i18next";
 
diff --git a/frontend/src/components/common/PageTitle.js b/frontend/src/components/common/PageTitle.js
index 9a5646c..9859396 100644
--- a/frontend/src/components/common/PageTitle.js
+++ b/frontend/src/components/common/PageTitle.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
-import { Typography } from "@material-ui/core";
+import { makeStyles } from "@mui/material/styles";
+import { Typography } from "@mui/material";
 
 const useStyles = makeStyles(theme => ({
   box: {
diff --git a/frontend/src/components/common/PaperTitle.js b/frontend/src/components/common/PaperTitle.js
index 8f0313d..dbe4d4f 100644
--- a/frontend/src/components/common/PaperTitle.js
+++ b/frontend/src/components/common/PaperTitle.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Typography } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+import { Typography } from "@mui/material";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles(theme => ({
   paper: {
diff --git a/frontend/src/components/layout/AppLayout.js b/frontend/src/components/layout/AppLayout.js
index 70092b3..eb36e66 100644
--- a/frontend/src/components/layout/AppLayout.js
+++ b/frontend/src/components/layout/AppLayout.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import AppRoutes from "./AppRoutes";
 import TopBar from "./TopBar";
 import Sidebar from "./Sidebar";
diff --git a/frontend/src/components/layout/LightDarkToggle.js b/frontend/src/components/layout/LightDarkToggle.js
index b68f307..e31febd 100644
--- a/frontend/src/components/layout/LightDarkToggle.js
+++ b/frontend/src/components/layout/LightDarkToggle.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { IconButton } from "@material-ui/core";
+import { IconButton } from "@mui/material";
 import { Brightness2 as MoonIcon, WbSunny as SunIcon } from "@mui/icons-material";
 import { useApplicationTheme } from "../../providers/ThemeProvider";
 
diff --git a/frontend/src/components/layout/ProfileButton.js b/frontend/src/components/layout/ProfileButton.js
index 17b39f8..63173c2 100644
--- a/frontend/src/components/layout/ProfileButton.js
+++ b/frontend/src/components/layout/ProfileButton.js
@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { IconButton, Menu, MenuItem, Typography, ListItemIcon } from "@material-ui/core";
+import { IconButton, Menu, MenuItem, Typography, ListItemIcon } from "@mui/material";
 import AccountCircle from "@mui/icons-material/AccountCircle";
 import ExitToAppIcon from "@mui/icons-material/ExitToApp";
 import AccountBoxIcon from "@mui/icons-material/AccountBox";
@@ -8,7 +8,7 @@ import { useNavigate } from "react-router-dom";
 import { useTuitioClient } from "@flare/tuitio-client-react";
 import { useToast } from "../../hooks";
 import styles from "./styles";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);
diff --git a/frontend/src/components/layout/SensitiveInfoToggle.js b/frontend/src/components/layout/SensitiveInfoToggle.js
index 0cefd72..177f911 100644
--- a/frontend/src/components/layout/SensitiveInfoToggle.js
+++ b/frontend/src/components/layout/SensitiveInfoToggle.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { IconButton } from "@material-ui/core";
+import { IconButton } from "@mui/material";
 import { Visibility as VisibilityIcon, VisibilityOff as VisibilityOffIcon } from "@mui/icons-material";
 import { useSensitiveInfo } from "../../hooks";
 
diff --git a/frontend/src/components/layout/Sidebar.js b/frontend/src/components/layout/Sidebar.js
index 78ba6a4..40c8659 100644
--- a/frontend/src/components/layout/Sidebar.js
+++ b/frontend/src/components/layout/Sidebar.js
@@ -1,11 +1,11 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { makeStyles, useTheme } from "@material-ui/core/styles";
-import { Drawer, List, Divider, IconButton, ListItemIcon, ListItemText } from "@material-ui/core";
+import { makeStyles, useTheme } from "@mui/material/styles";
+import { Drawer, List, Divider, IconButton, ListItemIcon, ListItemText } from "@mui/material";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import ListItem from "@material-ui/core/ListItem";
+import ListItem from "@mui/material/ListItem";
 import BuildIcon from "@mui/icons-material/Build";
 import DnsIcon from "@mui/icons-material/Dns";
 import DeviceHubIcon from "@mui/icons-material/DeviceHub";
diff --git a/frontend/src/components/layout/TopBar.js b/frontend/src/components/layout/TopBar.js
index 6247989..b3bdced 100644
--- a/frontend/src/components/layout/TopBar.js
+++ b/frontend/src/components/layout/TopBar.js
@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
 import clsx from "clsx";
-import { makeStyles } from "@material-ui/core/styles";
-import { AppBar, Toolbar, Typography, IconButton } from "@material-ui/core";
+import { makeStyles } from "@mui/material/styles";
+import { AppBar, Toolbar, Typography, IconButton } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
 import ProfileButton from "./ProfileButton";
 import LightDarkToggle from "./LightDarkToggle";
diff --git a/frontend/src/features/about/releaseNotes/ReleaseNote.js b/frontend/src/features/about/releaseNotes/ReleaseNote.js
index 83bc923..32770c3 100644
--- a/frontend/src/features/about/releaseNotes/ReleaseNote.js
+++ b/frontend/src/features/about/releaseNotes/ReleaseNote.js
@@ -1,17 +1,13 @@
 import React from "react";
 import PropTypes from "prop-types";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 
 const ReleaseNote = ({ releaseNote }) => {
   return (
     <div>
       {releaseNote.notes.map(note => {
         return (
-          <Typography
-            key={releaseNote.notes.indexOf(note)}
-            variant="body2"
-            gutterBottom
-          >
+          <Typography key={releaseNote.notes.indexOf(note)} variant="body2" gutterBottom>
             {note}
           </Typography>
         );
diff --git a/frontend/src/features/about/releaseNotes/ReleaseNoteSummary.js b/frontend/src/features/about/releaseNotes/ReleaseNoteSummary.js
index 0bff6b4..718d156 100644
--- a/frontend/src/features/about/releaseNotes/ReleaseNoteSummary.js
+++ b/frontend/src/features/about/releaseNotes/ReleaseNoteSummary.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Grid, Typography } from "@material-ui/core";
+import { Grid, Typography } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
 const ReleaseNoteSummary = ({ releaseNote, collapsed }) => {
diff --git a/frontend/src/features/about/releaseNotes/ReleaseNotesList.js b/frontend/src/features/about/releaseNotes/ReleaseNotesList.js
index b46c03d..82896a4 100644
--- a/frontend/src/features/about/releaseNotes/ReleaseNotesList.js
+++ b/frontend/src/features/about/releaseNotes/ReleaseNotesList.js
@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
-import { Accordion, AccordionSummary, AccordionDetails } from "@material-ui/core";
+import { Accordion, AccordionSummary, AccordionDetails } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import ReleaseNoteSummary from "./ReleaseNoteSummary";
 import ReleaseNote from "./ReleaseNote";
diff --git a/frontend/src/features/about/system/AboutSystemComponent.js b/frontend/src/features/about/system/AboutSystemComponent.js
index 4c0ad72..c22168a 100644
--- a/frontend/src/features/about/system/AboutSystemComponent.js
+++ b/frontend/src/features/about/system/AboutSystemComponent.js
@@ -1,11 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
-import Card from "@material-ui/core/Card";
-import CardActions from "@material-ui/core/CardActions";
-import CardContent from "@material-ui/core/CardContent";
-import Button from "@material-ui/core/Button";
-import Typography from "@material-ui/core/Typography";
+import { makeStyles } from "@mui/material/styles";
+import Card from "@mui/material/Card";
+import CardActions from "@mui/material/CardActions";
+import CardContent from "@mui/material/CardContent";
+import Button from "@mui/material/Button";
+import Typography from "@mui/material/Typography";
 import { useTranslation } from "react-i18next";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
diff --git a/frontend/src/features/about/system/AboutSystemContainer.js b/frontend/src/features/about/system/AboutSystemContainer.js
index 8850a72..8ef7188 100644
--- a/frontend/src/features/about/system/AboutSystemContainer.js
+++ b/frontend/src/features/about/system/AboutSystemContainer.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import AboutSystemComponent from "./AboutSystemComponent";
 import SystemVersionContainer from "./SystemVersionContainer";
 
diff --git a/frontend/src/features/about/system/SystemVersionComponent.js b/frontend/src/features/about/system/SystemVersionComponent.js
index 0e8a261..ba7a9a8 100644
--- a/frontend/src/features/about/system/SystemVersionComponent.js
+++ b/frontend/src/features/about/system/SystemVersionComponent.js
@@ -1,14 +1,14 @@
 import React, { useMemo, useEffect, useState } from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
-import { List, ListItem, ListItemText, ListItemAvatar } from "@material-ui/core";
-import Avatar from "@material-ui/core/Avatar";
+import { makeStyles } from "@mui/material/styles";
+import { List, ListItem, ListItemText, ListItemAvatar } from "@mui/material";
+import Avatar from "@mui/material/Avatar";
 import WebAssetIcon from "@mui/icons-material/WebAsset";
 import DeveloperBoardIcon from "@mui/icons-material/DeveloperBoard";
 import SettingsInputSvideoIcon from "@mui/icons-material/SettingsInputSvideo";
 import { useTranslation } from "react-i18next";
 import packageData from "../../../../package.json";
-import Paper from "@material-ui/core/Paper";
+import Paper from "@mui/material/Paper";
 
 const useStyles = makeStyles(theme => {
   return {
diff --git a/frontend/src/features/about/timeline/TimelineComponent.js b/frontend/src/features/about/timeline/TimelineComponent.js
index 418ddf3..34235d7 100644
--- a/frontend/src/features/about/timeline/TimelineComponent.js
+++ b/frontend/src/features/about/timeline/TimelineComponent.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import Timeline from "@material-ui/lab/Timeline";
 import TimelineItem from "@material-ui/lab/TimelineItem";
 import TimelineSeparator from "@material-ui/lab/TimelineSeparator";
@@ -8,8 +8,8 @@ import TimelineConnector from "@material-ui/lab/TimelineConnector";
 import TimelineContent from "@material-ui/lab/TimelineContent";
 import TimelineOppositeContent from "@material-ui/lab/TimelineOppositeContent";
 import TimelineDot from "@material-ui/lab/TimelineDot";
-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 { useTranslation } from "react-i18next";
 import { getRandomElement } from "../../../utils";
 import {
diff --git a/frontend/src/features/dashboard/announcements/GuestAnnouncement.js b/frontend/src/features/dashboard/announcements/GuestAnnouncement.js
index a7ba9e4..597bbae 100644
--- a/frontend/src/features/dashboard/announcements/GuestAnnouncement.js
+++ b/frontend/src/features/dashboard/announcements/GuestAnnouncement.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import styles from "../styles";
 import { useTranslation } from "react-i18next";
diff --git a/frontend/src/features/dashboard/announcements/UserAnnouncement.js b/frontend/src/features/dashboard/announcements/UserAnnouncement.js
index 1b6c0ac..40e8ac8 100644
--- a/frontend/src/features/dashboard/announcements/UserAnnouncement.js
+++ b/frontend/src/features/dashboard/announcements/UserAnnouncement.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { Alert, AlertTitle } from "@material-ui/lab";
 import styles from "../styles";
 import { useTranslation } from "react-i18next";
diff --git a/frontend/src/features/login/components/LoginCard.js b/frontend/src/features/login/components/LoginCard.js
index ae45726..60a2df6 100644
--- a/frontend/src/features/login/components/LoginCard.js
+++ b/frontend/src/features/login/components/LoginCard.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Card } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+import { Card } from "@mui/material";
+import { makeStyles } from "@mui/material/styles";
 import styles from "../styles";
 import LoginComponent from "./LoginComponent";
 
@@ -13,11 +13,7 @@ const LoginCard = ({ credentials, onChange, onLogin }) => {
   return (
     <div className={classes.appLogin}>
       <Card variant="outlined">
-        <LoginComponent
-          credentials={credentials}
-          onChange={onChange}
-          onLogin={onLogin}
-        />
+        <LoginComponent credentials={credentials} onChange={onChange} onLogin={onLogin} />
       </Card>
     </div>
   );
diff --git a/frontend/src/features/login/components/LoginComponent.js b/frontend/src/features/login/components/LoginComponent.js
index e5f16a6..b432dc9 100644
--- a/frontend/src/features/login/components/LoginComponent.js
+++ b/frontend/src/features/login/components/LoginComponent.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
-import { TextField, InputAdornment, Button, CardActions, CardContent } from "@material-ui/core";
+import { makeStyles } from "@mui/material/styles";
+import { TextField, InputAdornment, Button, CardActions, CardContent } from "@mui/material";
 import { AccountCircleOutlined } from "@mui/icons-material";
 import PasswordField from "../../../components/common/inputs/PasswordField";
 import { useTranslation } from "react-i18next";
diff --git a/frontend/src/features/machines/components/MachineAccordion.js b/frontend/src/features/machines/components/MachineAccordion.js
index 81284fc..2fb29e0 100644
--- a/frontend/src/features/machines/components/MachineAccordion.js
+++ b/frontend/src/features/machines/components/MachineAccordion.js
@@ -1,14 +1,14 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Accordion, AccordionSummary, AccordionDetails, Grid } from "@material-ui/core";
+import { Accordion, AccordionSummary, AccordionDetails, Grid } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
-import withStyles from "@material-ui/core/styles/withStyles";
+import withStyles from "@mui/material/styles/withStyles";
 import MachineCollapsedContent from "./common/MachineCollapsedContent";
 import { DataLabel } from "../../../components/common";
 import { useTranslation } from "react-i18next";
 import { useSensitiveInfo } from "../../../hooks";
 import ActionsGroup from "./common/ActionsGroup";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles(() => ({
   panel: {
diff --git a/frontend/src/features/machines/components/MachineTableRow.js b/frontend/src/features/machines/components/MachineTableRow.js
index c1e24b3..189e3af 100644
--- a/frontend/src/features/machines/components/MachineTableRow.js
+++ b/frontend/src/features/machines/components/MachineTableRow.js
@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { TableCell, TableRow, IconButton, Collapse } from "@material-ui/core";
+import { TableCell, TableRow, IconButton, Collapse } from "@mui/material";
 import { KeyboardArrowDown, KeyboardArrowUp } from "@mui/icons-material";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import MachineCollapsedContent from "./common/MachineCollapsedContent";
 import { useSensitiveInfo } from "../../../hooks";
 import ActionsGroup from "./common/ActionsGroup";
diff --git a/frontend/src/features/machines/components/MachinesListComponent.js b/frontend/src/features/machines/components/MachinesListComponent.js
index 53d2522..326951e 100644
--- a/frontend/src/features/machines/components/MachinesListComponent.js
+++ b/frontend/src/features/machines/components/MachinesListComponent.js
@@ -1,14 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableContainer,
-  TableHead,
-  TableRow
-} from "@material-ui/core";
-import Paper from "@material-ui/core/Paper";
+import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from "@mui/material";
+import Paper from "@mui/material/Paper";
 import MachineContainer from "./MachineContainer";
 import { useTranslation } from "react-i18next";
 import { ViewModes } from "./ViewModeSelection";
@@ -17,11 +10,7 @@ const MachinesList = ({ machines, viewMode }) => {
   return (
     <>
       {machines.map(machine => (
-        <MachineContainer
-          key={`machine-${machine.machineId}`}
-          machine={machine}
-          viewMode={viewMode}
-        />
+        <MachineContainer key={`machine-${machine.machineId}`} machine={machine} viewMode={viewMode} />
       ))}
     </>
   );
diff --git a/frontend/src/features/machines/components/ViewModeSelection.js b/frontend/src/features/machines/components/ViewModeSelection.js
index f2bfa93..c656170 100644
--- a/frontend/src/features/machines/components/ViewModeSelection.js
+++ b/frontend/src/features/machines/components/ViewModeSelection.js
@@ -4,7 +4,7 @@ import TableChartIcon from "@mui/icons-material/TableChart";
 import ViewListIcon from "@mui/icons-material/ViewList";
 import ToggleButton from "@material-ui/lab/ToggleButton";
 import ToggleButtonGroup from "@material-ui/lab/ToggleButtonGroup";
-import { Tooltip } from "@material-ui/core";
+import { Tooltip } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
 export const ViewModes = {
diff --git a/frontend/src/features/machines/components/common/ActionButton.js b/frontend/src/features/machines/components/common/ActionButton.js
index 3e65812..f4a7374 100644
--- a/frontend/src/features/machines/components/common/ActionButton.js
+++ b/frontend/src/features/machines/components/common/ActionButton.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { IconButton, Tooltip } from "@material-ui/core";
+import { IconButton, Tooltip } from "@mui/material";
 
 const ActionButton = React.forwardRef((props, _ref) => {
   const { action, machine, callback, disabled } = props;
@@ -12,10 +12,7 @@ const ActionButton = React.forwardRef((props, _ref) => {
   };
 
   return (
-    <Tooltip
-      id={`machine-item-${machine.machineId}-${action.code}-tooltip`}
-      title={action.tooltip}
-    >
+    <Tooltip id={`machine-item-${machine.machineId}-${action.code}-tooltip`} title={action.tooltip}>
       <span>
         <IconButton
           id={id}
diff --git a/frontend/src/features/machines/components/common/ActionsGroup.js b/frontend/src/features/machines/components/common/ActionsGroup.js
index 52529f2..3351ecb 100644
--- a/frontend/src/features/machines/components/common/ActionsGroup.js
+++ b/frontend/src/features/machines/components/common/ActionsGroup.js
@@ -2,7 +2,7 @@ import React, { useMemo, useState } from "react";
 import PropTypes from "prop-types";
 import WakeComponent from "./WakeComponent";
 import ActionButton from "./ActionButton";
-import { Menu } from "@material-ui/core";
+import { Menu } from "@mui/material";
 import { MoreHoriz } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import { usePermissions } from "../../../../hooks";
diff --git a/frontend/src/features/machines/components/common/MachineCollapsedContent.js b/frontend/src/features/machines/components/common/MachineCollapsedContent.js
index 7fc4d1c..d545fd6 100644
--- a/frontend/src/features/machines/components/common/MachineCollapsedContent.js
+++ b/frontend/src/features/machines/components/common/MachineCollapsedContent.js
@@ -1,9 +1,9 @@
 import React from "react";
 import PropTypes from "prop-types";
 import MachineLog from "./MachineLog";
-import Typography from "@material-ui/core/Typography";
+import Typography from "@mui/material/Typography";
 import { useSensitiveInfo } from "../../../../hooks";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles(_theme => ({
   panel: {
@@ -19,11 +19,7 @@ const MachineDescription = ({ description }) => {
 
   return (
     <div className={classes.panel}>
-      <Typography
-        variant="body2"
-        className={classes.label}
-        color="textSecondary"
-      >
+      <Typography variant="body2" className={classes.label} color="textSecondary">
         {"Description:"}
       </Typography>
       <Typography variant="body2" color="textSecondary">
diff --git a/frontend/src/features/machines/components/common/MachineLog.js b/frontend/src/features/machines/components/common/MachineLog.js
index 53ad613..adba441 100644
--- a/frontend/src/features/machines/components/common/MachineLog.js
+++ b/frontend/src/features/machines/components/common/MachineLog.js
@@ -1,16 +1,13 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
-import { Box } from "@material-ui/core";
+import { Box } from "@mui/material";
 import { useSensitiveInfo } from "../../../../hooks";
 import { LazyLog, ScrollFollow } from "react-lazylog";
 
 const MachineLog = ({ logs }) => {
   const { maskElements } = useSensitiveInfo();
 
-  const displayLogs = useMemo(
-    () => (logs.length > 0 ? maskElements(logs).join("\n") : "..."),
-    [logs, maskElements]
-  );
+  const displayLogs = useMemo(() => (logs.length > 0 ? maskElements(logs).join("\n") : "..."), [logs, maskElements]);
 
   return (
     <Box>
diff --git a/frontend/src/features/machines/components/common/WakeComponent.js b/frontend/src/features/machines/components/common/WakeComponent.js
index 49909f7..530a426 100644
--- a/frontend/src/features/machines/components/common/WakeComponent.js
+++ b/frontend/src/features/machines/components/common/WakeComponent.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useCallback } from "react";
 import PropTypes from "prop-types";
-import { IconButton, Tooltip } from "@material-ui/core";
+import { IconButton, Tooltip } from "@mui/material";
 import { PowerSettingsNew } from "@mui/icons-material";
 import { useTranslation } from "react-i18next";
 import { useToast } from "../../../../hooks";
diff --git a/frontend/src/features/settings/appearance/AppearanceComponent.js b/frontend/src/features/settings/appearance/AppearanceComponent.js
index 274b37e..565f9f6 100644
--- a/frontend/src/features/settings/appearance/AppearanceComponent.js
+++ b/frontend/src/features/settings/appearance/AppearanceComponent.js
@@ -1,9 +1,9 @@
 import React from "react";
 import { useApplicationTheme } from "../../../providers/ThemeProvider";
-import { Grid, Paper, FormControlLabel, Switch } from "@material-ui/core";
+import { Grid, Paper, FormControlLabel, Switch } from "@mui/material";
 import LanguageContainer from "./language/LanguageContainer";
 import { PaperTitle } from "components/common";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(theme => ({
@@ -29,14 +29,7 @@ const AppearanceComponent = () => {
         <Grid item xs={12} sm={6} md={4} lg={3}>
           <FormControlLabel
             value="start"
-            control={
-              <Switch
-                checked={isDark}
-                onChange={handleChange}
-                color="secondary"
-                name="dark-mode-switch"
-              />
-            }
+            control={<Switch checked={isDark} onChange={handleChange} color="secondary" name="dark-mode-switch" />}
             label="Dark mode:"
             labelPlacement="start"
           />
diff --git a/frontend/src/features/settings/appearance/language/LanguageComponent.js b/frontend/src/features/settings/appearance/language/LanguageComponent.js
index 9376875..c22b3f3 100644
--- a/frontend/src/features/settings/appearance/language/LanguageComponent.js
+++ b/frontend/src/features/settings/appearance/language/LanguageComponent.js
@@ -1,39 +1,18 @@
 import React from "react";
 import PropTypes from "prop-types";
 import Flag from "react-flags";
-import { IconButton, Menu, MenuItem } from "@material-ui/core";
+import { IconButton, Menu, MenuItem } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
-const LanguageComponent = ({
-  languageIsSet,
-  anchorEl,
-  onMenuOpen,
-  onLanguageChange,
-  onClose,
-  flag,
-  flagsPath
-}) => {
+const LanguageComponent = ({ languageIsSet, anchorEl, onMenuOpen, onLanguageChange, onClose, flag, flagsPath }) => {
   const { t } = useTranslation();
   const open = Boolean(anchorEl);
 
   return (
     <>
-      <IconButton
-        aria-controls="language-menu"
-        aria-haspopup="true"
-        onClick={onMenuOpen}
-        color="inherit"
-        size="small"
-      >
+      <IconButton aria-controls="language-menu" aria-haspopup="true" onClick={onMenuOpen} color="inherit" size="small">
         {languageIsSet && (
-          <Flag
-            name={flag.name}
-            format="png"
-            pngSize={32}
-            shiny={true}
-            basePath={flagsPath}
-            alt={flag.alt}
-          />
+          <Flag name={flag.name} format="png" pngSize={32} shiny={true} basePath={flagsPath} alt={flag.alt} />
         )}
       </IconButton>
       <Menu
@@ -51,12 +30,8 @@ const LanguageComponent = ({
         open={open}
         onClose={onClose}
       >
-        <MenuItem onClick={onLanguageChange("ro")}>
-          {t("Language.Romanian")}
-        </MenuItem>
-        <MenuItem onClick={onLanguageChange("en")}>
-          {t("Language.English")}
-        </MenuItem>
+        <MenuItem onClick={onLanguageChange("ro")}>{t("Language.Romanian")}</MenuItem>
+        <MenuItem onClick={onLanguageChange("en")}>{t("Language.English")}</MenuItem>
       </Menu>
     </>
   );
diff --git a/frontend/src/features/settings/system/CacheSettingsComponent.js b/frontend/src/features/settings/system/CacheSettingsComponent.js
index 1396a2f..366725b 100644
--- a/frontend/src/features/settings/system/CacheSettingsComponent.js
+++ b/frontend/src/features/settings/system/CacheSettingsComponent.js
@@ -1,7 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Paper, Button } from "@material-ui/core";
-import { makeStyles } from "@material-ui/core/styles";
+import { Paper, Button } from "@mui/material";
+import { makeStyles } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 import { PaperTitle } from "components/common";
 import { usePermissions } from "hooks";
@@ -23,12 +23,7 @@ const CacheSettingsComponent = ({ onResetCache }) => {
     <Paper variant="outlined">
       <PaperTitle text={t("Settings.Cache.Title")} />
       <div className={classes.content}>
-        <Button
-          variant="outlined"
-          color="secondary"
-          disabled={!sysAdmin}
-          onClick={onResetCache}
-        >
+        <Button variant="outlined" color="secondary" disabled={!sysAdmin} onClick={onResetCache}>
           {t("Settings.Cache.Reset")}
         </Button>
       </div>
diff --git a/frontend/src/features/user/profile/card/UserProfileCardContent.js b/frontend/src/features/user/profile/card/UserProfileCardContent.js
index ec501a2..3d1a6d3 100644
--- a/frontend/src/features/user/profile/card/UserProfileCardContent.js
+++ b/frontend/src/features/user/profile/card/UserProfileCardContent.js
@@ -2,7 +2,7 @@ import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import UserProfilePicture from "./UserProfilePicture";
 import ContactOptions from "../contact/ContactOptions";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import styles from "../styles";
 
 const useStyles = makeStyles(styles);
@@ -11,10 +11,7 @@ const UserProfileCardContent = ({ userData }) => {
   const { profilePictureUrl } = userData;
   const classes = useStyles();
 
-  const userName = useMemo(
-    () => `${userData.firstName} ${userData.lastName}`,
-    [userData.firstName, userData.lastName]
-  );
+  const userName = useMemo(() => `${userData.firstName} ${userData.lastName}`, [userData.firstName, userData.lastName]);
   const _contactOptions = useMemo(
     () =>
       profilePictureUrl
diff --git a/frontend/src/features/user/profile/card/UserProfileComponent.js b/frontend/src/features/user/profile/card/UserProfileComponent.js
index d9b4682..8d2d5b7 100644
--- a/frontend/src/features/user/profile/card/UserProfileComponent.js
+++ b/frontend/src/features/user/profile/card/UserProfileComponent.js
@@ -1,12 +1,12 @@
 import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import { Card, CardHeader, CardContent } from "@material-ui/core";
+import { Card, CardHeader, CardContent } from "@mui/material";
 import PageTitle from "../../../../components/common/PageTitle";
 import UserProfileCardContent from "./UserProfileCardContent";
 import SecurityComponent from "../security/SecurityComponent";
 import styles from "../styles";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 
 const useStyles = makeStyles(styles);
 
@@ -29,9 +29,7 @@ const UserProfileComponent = ({ userData }) => {
 
   return (
     <>
-      <PageTitle
-        text={t("User.Profile.Hello", { userName: userData.firstName })}
-      />
+      <PageTitle text={t("User.Profile.Hello", { userName: userData.firstName })} />
       <Card>
         <CardHeader title={userData.userName} subheader={userDescription} />
         <CardContent>
@@ -40,10 +38,7 @@ const UserProfileComponent = ({ userData }) => {
       </Card>
 
       <div className={classes.section}>
-        <SecurityComponent
-          userGroups={userData.userGroups}
-          userRoles={userData.userRoles}
-        />
+        <SecurityComponent userGroups={userData.userGroups} userRoles={userData.userRoles} />
       </div>
     </>
   );
diff --git a/frontend/src/features/user/profile/card/UserProfilePicture.js b/frontend/src/features/user/profile/card/UserProfilePicture.js
index 1c0f45c..469d40a 100644
--- a/frontend/src/features/user/profile/card/UserProfilePicture.js
+++ b/frontend/src/features/user/profile/card/UserProfilePicture.js
@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import style from "../styles";
-import Avatar from "@material-ui/core/Avatar";
+import Avatar from "@mui/material/Avatar";
 import DefaultUserProfilePicture from "../../../../assets/images/DefaultUserProfilePicture.png";
 
 const useStyles = makeStyles(style);
diff --git a/frontend/src/features/user/profile/contact/ContactOption.js b/frontend/src/features/user/profile/contact/ContactOption.js
index 6f5b031..b69c71f 100644
--- a/frontend/src/features/user/profile/contact/ContactOption.js
+++ b/frontend/src/features/user/profile/contact/ContactOption.js
@@ -1,13 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import {
-  ListItem,
-  ListItemText,
-  ListItemIcon,
-  Link,
-  Tooltip,
-  IconButton
-} from "@material-ui/core";
+import { ListItem, ListItemText, ListItemIcon, Link, Tooltip, IconButton } from "@mui/material";
 
 const ContactIcon = ({ onIconClick, iconTooltip, ...props }) => {
   if (!onIconClick) return <props.icon />;
diff --git a/frontend/src/features/user/profile/contact/ContactOptionList.js b/frontend/src/features/user/profile/contact/ContactOptionList.js
index 17fb8b1..479991b 100644
--- a/frontend/src/features/user/profile/contact/ContactOptionList.js
+++ b/frontend/src/features/user/profile/contact/ContactOptionList.js
@@ -1,6 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { List } from "@material-ui/core";
+import { List } from "@mui/material";
 import ContactOption from "./ContactOption";
 
 const ContactOptionList = ({ options }) => {
diff --git a/frontend/src/features/user/profile/contact/ContactOptions.js b/frontend/src/features/user/profile/contact/ContactOptions.js
index d1849fa..ed1eb4f 100644
--- a/frontend/src/features/user/profile/contact/ContactOptions.js
+++ b/frontend/src/features/user/profile/contact/ContactOptions.js
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 import { useTranslation } from "react-i18next";
-import { Grid } from "@material-ui/core";
+import { Grid } from "@mui/material";
 import ContactOptionList from "./ContactOptionList";
 import BusinessCenterIcon from "@mui/icons-material/BusinessCenter";
 import EmailIcon from "@mui/icons-material/Email";
diff --git a/frontend/src/features/user/profile/security/SecurityComponent.js b/frontend/src/features/user/profile/security/SecurityComponent.js
index 7755f30..7ef4414 100644
--- a/frontend/src/features/user/profile/security/SecurityComponent.js
+++ b/frontend/src/features/user/profile/security/SecurityComponent.js
@@ -1,8 +1,8 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Paper, Grid, Chip, Typography } from "@material-ui/core";
+import { Paper, Grid, Chip, Typography } from "@mui/material";
 import styles from "../styles";
-import { makeStyles } from "@material-ui/core/styles";
+import { makeStyles } from "@mui/material/styles";
 import { useTranslation } from "react-i18next";
 
 const useStyles = makeStyles(styles);
@@ -32,12 +32,7 @@ const SecurityComponent = ({ userGroups, userRoles }) => {
             </Typography>
             <div>
               {userRoles.map(r => (
-                <Chip
-                  key={r.code}
-                  className={classes.chip}
-                  color="primary"
-                  label={r.name}
-                />
+                <Chip key={r.code} className={classes.chip} color="primary" label={r.name} />
               ))}
             </div>
           </div>
diff --git a/frontend/src/providers/UserPermissionsProvider.js b/frontend/src/providers/UserPermissionsProvider.js
index 9d26a09..fbc29af 100644
--- a/frontend/src/providers/UserPermissionsProvider.js
+++ b/frontend/src/providers/UserPermissionsProvider.js
@@ -19,22 +19,14 @@ const initialState = {
 };
 
 const getPermissionFlags = permissions => {
-  const viewDashboard =
-    permissions.includes(permissionCodes.VIEW_DASHBOARD) ?? false;
-  const manageUsers =
-    permissions.includes(permissionCodes.MANAGE_USERS) ?? false;
-  const manageSettings =
-    permissions.includes(permissionCodes.MANAGE_SETTINGS) ?? false;
-  const viewMachines =
-    permissions.includes(permissionCodes.VIEW_MACHINES) ?? false;
-  const manageMachines =
-    permissions.includes(permissionCodes.MANAGE_MACHINES) ?? false;
-  const operateMachines =
-    permissions.includes(permissionCodes.OPERATE_MACHINES) ?? false;
-  const guestAccess =
-    permissions.includes(permissionCodes.GUEST_ACCESS) ?? false;
-  const sysAdmin =
-    permissions.includes(permissionCodes.SYSTEM_ADMINISTRATION) ?? false;
+  const viewDashboard = permissions.includes(permissionCodes.VIEW_DASHBOARD) ?? false;
+  const manageUsers = permissions.includes(permissionCodes.MANAGE_USERS) ?? false;
+  const manageSettings = permissions.includes(permissionCodes.MANAGE_SETTINGS) ?? false;
+  const viewMachines = permissions.includes(permissionCodes.VIEW_MACHINES) ?? false;
+  const manageMachines = permissions.includes(permissionCodes.MANAGE_MACHINES) ?? false;
+  const operateMachines = permissions.includes(permissionCodes.OPERATE_MACHINES) ?? false;
+  const guestAccess = permissions.includes(permissionCodes.GUEST_ACCESS) ?? false;
+  const sysAdmin = permissions.includes(permissionCodes.SYSTEM_ADMINISTRATION) ?? false;
 
   const flags = {
     viewDashboard,
@@ -74,11 +66,7 @@ const UserPermissionsProvider = ({ children }) => {
     });
   }, []);
 
-  return (
-    <UserPermissionsContext.Provider value={permissions}>
-      {children}
-    </UserPermissionsContext.Provider>
-  );
+  return <UserPermissionsContext.Provider value={permissions}>{children}</UserPermissionsContext.Provider>;
 };
 
 UserPermissionsProvider.propTypes = {
diff --git a/frontend/src/themes/index.js b/frontend/src/themes/index.js
index 07216c2..4b45ee1 100644
--- a/frontend/src/themes/index.js
+++ b/frontend/src/themes/index.js
@@ -1,5 +1,5 @@
 import defaultTheme from "./default";
-import { createTheme } from "@material-ui/core/styles";
+import { createTheme } from "@mui/material/styles";
 
 const overrides = {
   typography: {