diff --git a/src/apps/dashboard/routes/plugins/plugin.tsx b/src/apps/dashboard/routes/plugins/plugin.tsx
index 84b6fc69a..9da0a8a9c 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 && (