diff --git a/frontend/src/Form/JsonSchemaForm.tsx b/frontend/src/Form/JsonSchemaForm.tsx
index c76aaef8a..23d27e030 100644
--- a/frontend/src/Form/JsonSchemaForm.tsx
+++ b/frontend/src/Form/JsonSchemaForm.tsx
@@ -1,4 +1,4 @@
-import { Grid2, List, ListItem, ListItemButton, Stepper, Typography } from '@mui/material'
+import { Grid, List, ListItem, ListItemButton, Stepper, Typography } from '@mui/material'
 //import { useTheme } from '@mui/material/styles'
 import Form from '@rjsf/mui'
 import { RJSFSchema } from '@rjsf/utils'
@@ -48,8 +48,8 @@ export default function JsonSchemaForm({
   }
 
   return (
-    <Grid2 container spacing={2} sx={{ mt: 1 }}>
-      <Grid2 size={{ xs: 12, md: 2 }} sx={{ borderRight: 1 }}>
+    <Grid container spacing={2} sx={{ mt: 1 }}>
+      <Grid item xs={12} md={2} sx={{ borderRight: 1 }}>
         <Stepper activeStep={activeStep} nonLinear alternativeLabel orientation='vertical' connector={<Nothing />}>
           <List sx={{ width: { xs: '100%' } }}>
             {splitSchema.steps.map((step, index) => (
@@ -70,8 +70,8 @@ export default function JsonSchemaForm({
             ))}
           </List>
         </Stepper>
-      </Grid2>
-      <Grid2 size={{ xs: 12, md: 10 }}>
+      </Grid>
+      <Grid item xs={12} sm={10}>
         <Form
           schema={currentStep.schema}
           formData={currentStep.state}
@@ -105,7 +105,7 @@ export default function JsonSchemaForm({
           {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
           <></>
         </Form>
-      </Grid2>
-    </Grid2>
+      </Grid>
+    </Grid>
   )
 }