diff --git a/src/apps/dashboard/features/logs/components/LogItemList.tsx b/src/apps/dashboard/features/logs/components/LogItemList.tsx
index eed1509726..df09745463 100644
--- a/src/apps/dashboard/features/logs/components/LogItemList.tsx
+++ b/src/apps/dashboard/features/logs/components/LogItemList.tsx
@@ -24,9 +24,15 @@ const LogItemList: FunctionComponent<LogItemProps> = ({ logs }: LogItemProps) =>
                         <ListItemLink to={`/dashboard/logs/${log.Name}`}>
                             <ListItemText
                                 primary={log.Name}
-                                primaryTypographyProps={{ variant: 'h3' }}
                                 secondary={getDate(log)}
-                                secondaryTypographyProps={{ variant: 'body1' }}
+                                slotProps={{
+                                    primary: {
+                                        variant: 'h3'
+                                    },
+                                    secondary: {
+                                        variant: 'body1'
+                                    }
+                                }}
                             />
                         </ListItemLink>
                     </ListItem>
diff --git a/src/apps/dashboard/features/tasks/components/NewTriggerForm.tsx b/src/apps/dashboard/features/tasks/components/NewTriggerForm.tsx
index 35f645fbd4..efd4558081 100644
--- a/src/apps/dashboard/features/tasks/components/NewTriggerForm.tsx
+++ b/src/apps/dashboard/features/tasks/components/NewTriggerForm.tsx
@@ -68,9 +68,11 @@ const NewTriggerForm: FunctionComponent<IProps> = ({ open, title, onClose, onAdd
             maxWidth={'xs'}
             fullWidth
             onClose={onClose}
-            PaperProps={{
-                component: 'form',
-                onSubmit: onSubmit
+            slotProps={{
+                paper: {
+                    component: 'form',
+                    onSubmit
+                }
             }}
         >
             <DialogTitle>{title}</DialogTitle>
diff --git a/src/apps/dashboard/routes/libraries/nfo.tsx b/src/apps/dashboard/routes/libraries/nfo.tsx
index 7c463270ae..8d42be829a 100644
--- a/src/apps/dashboard/routes/libraries/nfo.tsx
+++ b/src/apps/dashboard/routes/libraries/nfo.tsx
@@ -119,13 +119,16 @@ export const Component = () => {
                                 label={globalize.translate('LabelKodiMetadataUser')}
                                 defaultValue={nfoConfig.UserId || ''}
                                 select
-                                SelectProps={{
-                                    displayEmpty: true
-                                }}
-                                InputLabelProps={{
-                                    shrink: true
-                                }}
                                 helperText={globalize.translate('LabelKodiMetadataUserHelp')}
+                                slotProps={{
+                                    select: {
+                                        displayEmpty: true
+                                    },
+
+                                    inputLabel: {
+                                        shrink: true
+                                    }
+                                }}
                             >
                                 <MenuItem value=''>{globalize.translate('None')}</MenuItem>
                                 {users.map(user =>
diff --git a/src/apps/dashboard/routes/plugins/plugin.tsx b/src/apps/dashboard/routes/plugins/plugin.tsx
index 84b6fc69a5..9da0a8a9cb 100644
--- a/src/apps/dashboard/routes/plugins/plugin.tsx
+++ b/src/apps/dashboard/routes/plugins/plugin.tsx
@@ -5,7 +5,7 @@ import Button from '@mui/material/Button/Button';
 import Container from '@mui/material/Container/Container';
 import FormControlLabel from '@mui/material/FormControlLabel/FormControlLabel';
 import FormGroup from '@mui/material/FormGroup/FormGroup';
-import Grid from '@mui/material/Grid/Grid';
+import Grid from '@mui/material/Grid2/Grid2';
 import Skeleton from '@mui/material/Skeleton/Skeleton';
 import Stack from '@mui/material/Stack/Stack';
 import Switch from '@mui/material/Switch/Switch';
@@ -316,7 +316,7 @@ const PluginPage: FC = () => {
                 ))}
 
                 <Grid container spacing={2} sx={{ marginTop: 0 }}>
-                    <Grid item xs={12} lg={8}>
+                    <Grid size={{ xs: 12, lg: 8 }}>
                         <Stack spacing={2}>
                             <Typography variant='h1'>
                                 {pluginDetails?.name || pluginName}
@@ -332,7 +332,7 @@ const PluginPage: FC = () => {
                         </Stack>
                     </Grid>
 
-                    <Grid item lg={4} sx={{ display: { xs: 'none', lg: 'initial' } }}>
+                    <Grid size={{ lg: 4 }} sx={{ display: { xs: 'none', lg: 'initial' } }}>
                         <Image
                             isLoading={isLoading}
                             alt={pluginDetails?.name}
@@ -341,7 +341,7 @@ const PluginPage: FC = () => {
                         />
                     </Grid>
 
-                    <Grid item xs={12} lg={8} sx={{ order: { xs: 1, lg: 'initial' } }}>
+                    <Grid size={{ xs: 12, lg: 8 }} sx={{ order: { xs: 1, lg: 'initial' } }}>
                         {!!pluginDetails?.versions.length && (
                             <>
                                 <Typography variant='h3' sx={{ marginBottom: 2 }}>
@@ -355,7 +355,7 @@ const PluginPage: FC = () => {
                         )}
                     </Grid>
 
-                    <Grid item xs={12} lg={4}>
+                    <Grid size={{ xs: 12, lg: 4 }}>
                         <Stack spacing={2} direction={{ xs: 'column', sm: 'row-reverse', lg: 'column' }}>
                             <Stack spacing={1} sx={{ flexBasis: '50%' }}>
                                 {!isLoading && !pluginDetails?.status && (
diff --git a/src/apps/experimental/components/AppToolbar/menus/RemotePlayActiveMenu.tsx b/src/apps/experimental/components/AppToolbar/menus/RemotePlayActiveMenu.tsx
index 9c5c7f8476..b8e5abf303 100644
--- a/src/apps/experimental/components/AppToolbar/menus/RemotePlayActiveMenu.tsx
+++ b/src/apps/experimental/components/AppToolbar/menus/RemotePlayActiveMenu.tsx
@@ -94,13 +94,15 @@ const RemotePlayActiveMenu: FC<RemotePlayActiveMenuProps> = ({
             keepMounted
             open={open}
             onClose={onMenuClose}
-            MenuListProps={{
-                'aria-labelledby': 'remote-play-active-subheader',
-                subheader: (
-                    <ListSubheader component='div' id='remote-play-active-subheader'>
-                        {remotePlayerName}
-                    </ListSubheader>
-                )
+            slotProps={{
+                list: {
+                    'aria-labelledby': 'remote-play-active-subheader',
+                    subheader: (
+                        <ListSubheader component='div' id='remote-play-active-subheader'>
+                            {remotePlayerName}
+                        </ListSubheader>
+                    )
+                }
             }}
         >
             {isDisplayMirrorSupported && (
diff --git a/src/apps/experimental/components/AppToolbar/menus/SyncPlayMenu.tsx b/src/apps/experimental/components/AppToolbar/menus/SyncPlayMenu.tsx
index 478777eea9..5081fcb020 100644
--- a/src/apps/experimental/components/AppToolbar/menus/SyncPlayMenu.tsx
+++ b/src/apps/experimental/components/AppToolbar/menus/SyncPlayMenu.tsx
@@ -287,7 +287,9 @@ const SyncPlayMenu: FC<SyncPlayMenuProps> = ({
             keepMounted
             open={open}
             onClose={onMenuClose}
-            MenuListProps={MenuListProps}
+            slotProps={{
+                list: MenuListProps
+            }}
         >
             {menuItems}
         </Menu>
diff --git a/src/apps/experimental/components/drawers/DrawerHeaderLink.tsx b/src/apps/experimental/components/drawers/DrawerHeaderLink.tsx
index a60dd2a6c7..7f9b142068 100644
--- a/src/apps/experimental/components/drawers/DrawerHeaderLink.tsx
+++ b/src/apps/experimental/components/drawers/DrawerHeaderLink.tsx
@@ -22,8 +22,10 @@ const DrawerHeaderLink = () => {
             </ListItemIcon>
             <ListItemText
                 primary={systemInfo?.ServerName || 'Jellyfin'}
-                primaryTypographyProps={{ variant: 'h6' }}
                 secondary={systemInfo?.Version}
+                slotProps={{
+                    primary: { variant: 'h6' }
+                }}
             />
         </ListItemLink>);
 };
diff --git a/src/apps/experimental/components/library/filter/FilterButton.tsx b/src/apps/experimental/components/library/filter/FilterButton.tsx
index 1e3109ed45..9f207ba9e6 100644
--- a/src/apps/experimental/components/library/filter/FilterButton.tsx
+++ b/src/apps/experimental/components/library/filter/FilterButton.tsx
@@ -35,9 +35,11 @@ const Accordion = styled((props: AccordionProps) => (
     <MuiAccordion
         disableGutters
         elevation={0}
-        TransitionProps={{ unmountOnExit: true }}
         square
         {...props}
+        slotProps={{
+            transition: { unmountOnExit: true }
+        }}
     />
 ))(({ theme }) => ({
     border: `1px solid ${theme.palette.divider}`,
@@ -181,10 +183,12 @@ const FilterButton: FC<FilterButtonProps> = ({
                     vertical: 'top',
                     horizontal: 'center'
                 }}
-                PaperProps={{
-                    style: {
-                        maxHeight: '50%',
-                        width: 250
+                slotProps={{
+                    paper: {
+                        style: {
+                            maxHeight: '50%',
+                            width: 250
+                        }
                     }
                 }}
             >
diff --git a/src/components/common/NoItemsMessage.tsx b/src/components/common/NoItemsMessage.tsx
index 9f02703b96..e5fddb4d9e 100644
--- a/src/components/common/NoItemsMessage.tsx
+++ b/src/components/common/NoItemsMessage.tsx
@@ -15,7 +15,7 @@ const NoItemsMessage: FC<NoItemsMessageProps> = ({
             <Typography variant='h1'>
                 {globalize.translate('MessageNothingHere')}
             </Typography>
-            <Typography paragraph>
+            <Typography sx={{ marginBottom: '16px' }}>
                 {globalize.translate(message)}
             </Typography>
         </Box>