diff --git a/frontend/pages/docs/index.mdx b/frontend/pages/docs/index.mdx
index 75cee4cff..211abfe4f 100644
--- a/frontend/pages/docs/index.mdx
+++ b/frontend/pages/docs/index.mdx
@@ -1,7 +1,4 @@
 import DocsWrapper from 'src/docs/DocsWrapper'
-import IntroCard from 'src/docs/IntroCard'
-import Box from '@mui/material/Box'
-import Grid from '@mui/material/Grid'
 
 ## What is Bailo?
 
diff --git a/frontend/pages/help.tsx b/frontend/pages/help.tsx
index f5f202a6c..98f5af0f3 100644
--- a/frontend/pages/help.tsx
+++ b/frontend/pages/help.tsx
@@ -7,7 +7,7 @@ import Button from '@mui/material/Button'
 import Card from '@mui/material/Card'
 import CardActions from '@mui/material/CardActions'
 import CardContent from '@mui/material/CardContent'
-import Grid from '@mui/material/Grid'
+import Grid2 from '@mui/material/Grid2'
 import Typography from '@mui/material/Typography'
 import { useGetUiConfig } from 'actions/uiConfig'
 import Link from 'next/link'
@@ -34,8 +34,8 @@ export default function Help() {
               Contact us
             </Typography>
           </Box>
-          <Grid container spacing={4}>
-            <Grid item xs={12} sm={12} md={12} lg={4}>
+          <Grid2 container spacing={4}>
+            <Grid2 size={{ xs: 12, sm: 12, md: 12, lg: 4 }}>
               <Card sx={{ textAlign: 'center', margin: 'auto', maxWidth: 550 }}>
                 <CardContent sx={{ height: 320 }}>
                   <BugReportIcon sx={{ pt: 2, fontSize: 75 }} color='primary' />
@@ -57,8 +57,8 @@ export default function Help() {
                   </Button>
                 </CardActions>
               </Card>
-            </Grid>
-            <Grid item xs={12} sm={12} md={12} lg={4}>
+            </Grid2>
+            <Grid2 size={{ xs: 12, sm: 12, md: 12, lg: 4 }}>
               <Card sx={{ textAlign: 'center', margin: 'auto', maxWidth: 550 }}>
                 <CardContent sx={{ height: 320 }}>
                   <ArticleIcon sx={{ pt: 2, fontSize: 75 }} color='primary' />
@@ -77,8 +77,8 @@ export default function Help() {
                   </Link>
                 </CardActions>
               </Card>
-            </Grid>
-            <Grid item xs={12} sm={12} md={12} lg={4}>
+            </Grid2>
+            <Grid2 size={{ xs: 12, sm: 12, md: 12, lg: 4 }}>
               <Card sx={{ textAlign: 'center', margin: 'auto', maxWidth: 550 }}>
                 <CardContent sx={{ height: 320 }}>
                   <ContactSupportIcon sx={{ pt: 2, fontSize: 75 }} color='primary' />
@@ -99,8 +99,8 @@ export default function Help() {
                   </Button>
                 </CardActions>
               </Card>
-            </Grid>
-          </Grid>
+            </Grid2>
+          </Grid2>
         </Paper>
       )}
     </Container>
diff --git a/frontend/pages/model/[modelId]/access-request/[accessRequestId]/review.tsx b/frontend/pages/model/[modelId]/access-request/[accessRequestId]/review.tsx
index db1d5bea2..b9a4ab807 100644
--- a/frontend/pages/model/[modelId]/access-request/[accessRequestId]/review.tsx
+++ b/frontend/pages/model/[modelId]/access-request/[accessRequestId]/review.tsx
@@ -1,5 +1,5 @@
 import { ArrowBack } from '@mui/icons-material'
-import { Button, Card, Container, Divider, Grid, Paper, Stack, Typography } from '@mui/material'
+import { Button, Card, Container, Divider, Grid2, Paper, Stack, Typography } from '@mui/material'
 import { useGetAccessRequest, useGetAccessRequestsForModelId } from 'actions/accessRequest'
 import { useGetModel } from 'actions/model'
 import { postReviewResponse, useGetReviewRequestsForModel } from 'actions/review'
@@ -60,9 +60,9 @@ export default function AccessRequestReview() {
   const accessRequestEntities = useMemo(() => {
     if (accessRequest) {
       return accessRequest.metadata.overview.entities.map((entity) => (
-        <Grid item xs={3} key={entity}>
+        <Grid2 size={{ xs: 3 }} key={entity}>
           <UserDisplay dn={entity} />
-        </Grid>
+        </Grid2>
       ))
     }
   }, [accessRequest])
@@ -135,7 +135,7 @@ export default function AccessRequestReview() {
                 <Typography variant='subtitle2' component='h3' mb={1}>
                   Users
                 </Typography>
-                <Grid container>{accessRequestEntities}</Grid>
+                <Grid2 container>{accessRequestEntities}</Grid2>
               </Card>
             </Stack>
           </Stack>
diff --git a/frontend/pages/model/[modelId]/access-request/schema.tsx b/frontend/pages/model/[modelId]/access-request/schema.tsx
index 346f36f8a..c0d47b910 100644
--- a/frontend/pages/model/[modelId]/access-request/schema.tsx
+++ b/frontend/pages/model/[modelId]/access-request/schema.tsx
@@ -8,7 +8,7 @@ import {
   Box,
   Button,
   Container,
-  Grid,
+  Grid2,
   Paper,
   Stack,
   Typography,
@@ -120,9 +120,9 @@ export default function AccessRequestSchema() {
                 </AccordionSummary>
                 <AccordionDetails>
                   <Box sx={{ m: 2 }}>
-                    <Grid container spacing={2} justifyContent='center'>
+                    <Grid2 container spacing={2} justifyContent='center'>
                       {modelId && activeSchemaButtons}
-                    </Grid>
+                    </Grid2>
                   </Box>
                 </AccordionDetails>
               </Accordion>
@@ -133,9 +133,9 @@ export default function AccessRequestSchema() {
                   </Typography>
                 </AccordionSummary>
                 <AccordionDetails>
-                  <Grid container spacing={2} justifyContent='center'>
+                  <Grid2 container spacing={2} justifyContent='center'>
                     {modelId && inactiveSchemaButtons}
-                  </Grid>
+                  </Grid2>
                 </AccordionDetails>
               </Accordion>
             </Stack>
diff --git a/frontend/pages/model/[modelId]/release/[semver]/review.tsx b/frontend/pages/model/[modelId]/release/[semver]/review.tsx
index c74180557..78cef072a 100644
--- a/frontend/pages/model/[modelId]/release/[semver]/review.tsx
+++ b/frontend/pages/model/[modelId]/release/[semver]/review.tsx
@@ -1,5 +1,5 @@
 import { ArrowBack } from '@mui/icons-material'
-import { Box, Button, Container, Divider, Grid, Paper, Stack, Tooltip, Typography } from '@mui/material'
+import { Box, Button, Container, Divider, Grid2, Paper, Stack, Tooltip, Typography } from '@mui/material'
 import { useGetModel } from 'actions/model'
 import { useGetRelease, useGetReleasesForModelId } from 'actions/release'
 import { postReviewResponse, useGetReviewRequestsForModel } from 'actions/review'
@@ -65,8 +65,8 @@ export default function ReleaseReview() {
   const releaseFiles = useMemo(() => {
     if (release && model) {
       return release.files.map((file) => (
-        <Grid container spacing={1} alignItems='center' key={file._id}>
-          <Grid item xs>
+        <Grid2 container spacing={1} alignItems='center' key={file._id}>
+          <Grid2 size='auto'>
             <Tooltip title={file.name}>
               <Link href={`/api/v2/model/${model.id}/file/${file._id}/download`} data-test={`fileLink-${file.name}`}>
                 <Typography noWrap textOverflow='ellipsis' display='inline'>
@@ -74,11 +74,11 @@ export default function ReleaseReview() {
                 </Typography>
               </Link>
             </Tooltip>
-          </Grid>
-          <Grid item xs={1} textAlign='right'>
+          </Grid2>
+          <Grid2 size={{ xs: 1 }} textAlign='right'>
             <Typography variant='caption'>{prettyBytes(file.size)}</Typography>
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
       ))
     }
   }, [model, release])
diff --git a/frontend/src/Announcement.tsx b/frontend/src/Announcement.tsx
index e6d980f55..173f3d00a 100644
--- a/frontend/src/Announcement.tsx
+++ b/frontend/src/Announcement.tsx
@@ -1,6 +1,6 @@
 import { Close } from '@mui/icons-material'
 import CampaignIcon from '@mui/icons-material/Campaign'
-import { Box, Button, Grid, IconButton, Stack, Typography } from '@mui/material'
+import { Box, Button, Grid2, IconButton, Stack, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import { useMemo, useState } from 'react'
 interface AnnoucementProps {
@@ -47,9 +47,9 @@ export default function Announcement({ message, onClose }: AnnoucementProps) {
       }}
     >
       <Stack spacing={1} alignItems='center'>
-        <Grid container justifyContent='space-between' alignItems='center'>
-          <Grid item xs={1} />
-          <Grid item xs={10} sx={{ textAlign: 'center' }}>
+        <Grid2 container justifyContent='space-between' alignItems='center'>
+          <Grid2 size={{ xs: 1 }} />
+          <Grid2 size={{ xs: 10 }} sx={{ textAlign: 'center' }}>
             <Stack
               direction={{ xs: 'column', sm: 'row' }}
               spacing={2}
@@ -63,13 +63,13 @@ export default function Announcement({ message, onClose }: AnnoucementProps) {
               </Typography>
               <CampaignIcon color='primary' />
             </Stack>
-          </Grid>
-          <Grid item xs={1} sx={{ textAlign: 'right' }}>
+          </Grid2>
+          <Grid2 size={{ xs: 1 }} sx={{ textAlign: 'right' }}>
             <IconButton size='small' onClick={onClose}>
               <Close color='primary' />
             </IconButton>
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
         {announcementText}
       </Stack>
     </Box>
diff --git a/frontend/src/Form/FormTemplates.tsx b/frontend/src/Form/FormTemplates.tsx
index 9def2baa5..4657717aa 100644
--- a/frontend/src/Form/FormTemplates.tsx
+++ b/frontend/src/Form/FormTemplates.tsx
@@ -1,6 +1,6 @@
 import AddIcon from '@mui/icons-material/Add'
 import CloseIcon from '@mui/icons-material/Close'
-import { Box, Button, Card, Grid, IconButton, Stack, Tooltip, Typography } from '@mui/material'
+import { Box, Button, Card, Grid2, IconButton, Stack, Tooltip, Typography } from '@mui/material'
 import { ArrayFieldTemplateProps, ObjectFieldTemplateProps } from '@rjsf/utils'
 
 export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
@@ -10,11 +10,11 @@ export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
         {props.title}
       </Typography>
       {props.items.map((element) => (
-        <Grid key={element.key} container spacing={2}>
-          <Grid item xs={11}>
+        <Grid2 key={element.key} container spacing={2}>
+          <Grid2 size={{ xs: 11 }}>
             <Box>{element.children}</Box>
-          </Grid>
-          <Grid item xs={1}>
+          </Grid2>
+          <Grid2 size={{ xs: 1 }}>
             {props.formContext.editMode && (
               <Tooltip title='Remove item'>
                 <IconButton size='small' type='button' onClick={element.onDropIndexClick(element.index)}>
@@ -22,8 +22,8 @@ export function ArrayFieldTemplate(props: ArrayFieldTemplateProps) {
                 </IconButton>
               </Tooltip>
             )}
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
       ))}
       {props.canAdd && props.formContext.editMode && (
         <Button size='small' type='button' onClick={props.onAddClick} startIcon={<AddIcon />}>
diff --git a/frontend/src/Form/JsonSchemaForm.tsx b/frontend/src/Form/JsonSchemaForm.tsx
index 273e97fe6..7e56fa322 100644
--- a/frontend/src/Form/JsonSchemaForm.tsx
+++ b/frontend/src/Form/JsonSchemaForm.tsx
@@ -1,4 +1,4 @@
-import { Grid, List, ListItem, ListItemButton, Stepper, Typography } from '@mui/material'
+import { Grid2, List, ListItem, ListItemButton, Stepper, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import Form from '@rjsf/mui'
 import { RJSFSchema } from '@rjsf/utils'
@@ -52,8 +52,8 @@ export default function JsonSchemaForm({
   }
 
   return (
-    <Grid container spacing={2} sx={{ mt: 1 }}>
-      <Grid item xs={12} md={2} sx={{ borderRight: 1, borderColor: theme.palette.divider }}>
+    <Grid2 container spacing={2} sx={{ mt: 1 }}>
+      <Grid2 size={{ xs: 12, md: 2 }} sx={{ borderRight: 1, borderColor: theme.palette.divider }}>
         <Stepper activeStep={activeStep} nonLinear alternativeLabel orientation='vertical' connector={<Nothing />}>
           <List sx={{ width: { xs: '100%' } }}>
             {splitSchema.steps.map((step, index) => (
@@ -74,8 +74,8 @@ export default function JsonSchemaForm({
             ))}
           </List>
         </Stepper>
-      </Grid>
-      <Grid item xs={12} md={10}>
+      </Grid2>
+      <Grid2 size={{ xs: 12, md: 10 }}>
         <Form
           schema={currentStep.schema}
           formData={currentStep.state}
@@ -109,7 +109,7 @@ export default function JsonSchemaForm({
           {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
           <></>
         </Form>
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   )
 }
diff --git a/frontend/src/common/MultiFileInputFileDisplay.tsx b/frontend/src/common/MultiFileInputFileDisplay.tsx
index e441721d4..2fdc1181e 100644
--- a/frontend/src/common/MultiFileInputFileDisplay.tsx
+++ b/frontend/src/common/MultiFileInputFileDisplay.tsx
@@ -1,4 +1,4 @@
-import { Chip, Grid, TextField, Tooltip, Typography } from '@mui/material'
+import { Chip, Grid2, TextField, Tooltip, Typography } from '@mui/material'
 import prettyBytes from 'pretty-bytes'
 import { ChangeEvent, useState } from 'react'
 import { FileInterface, FileWithMetadata } from 'types/types'
@@ -28,13 +28,13 @@ export default function MultiFileInputFileDisplay({
   }
 
   return (
-    <Grid container spacing={1} alignItems='center'>
-      <Grid item xs>
+    <Grid2 container spacing={1} alignItems='center'>
+      <Grid2 size='auto'>
         <Tooltip title={file.name}>
           <Chip color='primary' label={file.name} onDelete={readOnly ? undefined : handleDelete} />
         </Tooltip>
-      </Grid>
-      <Grid item xs={7}>
+      </Grid2>
+      <Grid2 size={{ xs: 7 }}>
         <TextField
           size='small'
           placeholder='Optional metadata'
@@ -42,10 +42,10 @@ export default function MultiFileInputFileDisplay({
           value={metadata}
           onChange={handleMetadataChange}
         />
-      </Grid>
-      <Grid item xs={1} textAlign='right'>
+      </Grid2>
+      <Grid2 size={{ xs: 1 }} textAlign='right'>
         <Typography variant='caption'>{prettyBytes(file.size)}</Typography>
-      </Grid>
-    </Grid>
+      </Grid2>
+    </Grid2>
   )
 }
diff --git a/frontend/src/entry/model/accessRequests/AccessRequestDisplay.tsx b/frontend/src/entry/model/accessRequests/AccessRequestDisplay.tsx
index 0a09c5295..8e2670a00 100644
--- a/frontend/src/entry/model/accessRequests/AccessRequestDisplay.tsx
+++ b/frontend/src/entry/model/accessRequests/AccessRequestDisplay.tsx
@@ -1,6 +1,6 @@
 import CommentIcon from '@mui/icons-material/ChatBubble'
 import ListAltIcon from '@mui/icons-material/ListAlt'
-import { Card, Grid, IconButton, Stack, Tooltip, Typography } from '@mui/material'
+import { Card, Grid2, IconButton, Stack, Tooltip, Typography } from '@mui/material'
 import { useGetResponses } from 'actions/response'
 import { useGetReviewRequestsForModel } from 'actions/review'
 import { useEffect, useState } from 'react'
@@ -107,13 +107,13 @@ export default function AccessRequestDisplay({ accessRequest, hideReviewBanner =
                 <Typography variant='subtitle2' component='h3' mb={1}>
                   Users
                 </Typography>
-                <Grid container>
+                <Grid2 container>
                   {accessRequest.metadata.overview.entities.map((entity) => (
-                    <Grid item xs={3} key={entity}>
+                    <Grid2 size={{ xs: 3 }} key={entity}>
                       <UserDisplay dn={entity} />
-                    </Grid>
+                    </Grid2>
                   ))}
-                </Grid>
+                </Grid2>
               </Card>
             </Stack>
             <Stack direction='row' alignItems='center' justifyContent='space-between' spacing={2} sx={{ pt: 2 }}>
diff --git a/frontend/src/entry/model/mirroredModels/ReleaseSelector.tsx b/frontend/src/entry/model/mirroredModels/ReleaseSelector.tsx
index f110f6c12..a7597a942 100644
--- a/frontend/src/entry/model/mirroredModels/ReleaseSelector.tsx
+++ b/frontend/src/entry/model/mirroredModels/ReleaseSelector.tsx
@@ -1,5 +1,5 @@
 import ClearIcon from '@mui/icons-material/Clear'
-import { Checkbox, FormControlLabel, Grid, IconButton, Tooltip, Typography } from '@mui/material'
+import { Checkbox, FormControlLabel, Grid2, IconButton, Tooltip, Typography } from '@mui/material'
 import { useGetReleasesForModelId } from 'actions/release'
 import { ChangeEvent, useCallback, useMemo, useState } from 'react'
 import Loading from 'src/common/Loading'
@@ -36,16 +36,16 @@ export default function ReleaseSelector({
   const selectedReleasesDisplay = useMemo(() => {
     return selectedReleases.map((release) => (
       <>
-        <Grid item xs={10}>
+        <Grid2 size={{ xs: 10 }}>
           <ReleaseDisplay key={release.semver} model={model} release={release} hideReviewBanner />
-        </Grid>
-        <Grid item xs={2}>
+        </Grid2>
+        <Grid2 size={{ xs: 2 }}>
           <Tooltip title={'Remove'}>
             <IconButton onClick={() => handleRemoveRelease(release)}>
               <ClearIcon color={'error'} />
             </IconButton>
           </Tooltip>
-        </Grid>
+        </Grid2>
       </>
     ))
   }, [selectedReleases, model, handleRemoveRelease])
@@ -72,9 +72,9 @@ export default function ReleaseSelector({
           label='Select all'
         />
       </Tooltip>
-      <Grid container spacing={2} alignItems='center'>
+      <Grid2 container spacing={2} alignItems='center'>
         {selectedReleasesDisplay}
-      </Grid>
+      </Grid2>
     </>
   )
 }
diff --git a/frontend/src/entry/overview/EntryRoleList.tsx b/frontend/src/entry/overview/EntryRoleList.tsx
index 9489b2c5c..82467ee2d 100644
--- a/frontend/src/entry/overview/EntryRoleList.tsx
+++ b/frontend/src/entry/overview/EntryRoleList.tsx
@@ -1,4 +1,4 @@
-import { Grid, Stack } from '@mui/material'
+import { Grid2, Stack } from '@mui/material'
 import { Fragment, useMemo } from 'react'
 import EntityIcon from 'src/entry/EntityIcon'
 import EntityNameDisplay from 'src/entry/EntityNameDisplay'
@@ -14,29 +14,25 @@ export default function EntryRoleList({ entry }: EntryRoleListProps) {
     () =>
       entry.collaborators.map((collaborator) => (
         <Fragment key={collaborator.entity}>
-          <Grid item xs={6}>
+          <Grid2 size={{ xs: 6 }}>
             <Stack direction='row' alignItems='center' spacing={1}>
               <EntityIcon entryCollaborator={collaborator} />
               <EntityNameDisplay entryCollaborator={collaborator} />
             </Stack>
-          </Grid>
-          <Grid item xs={6}>
+          </Grid2>
+          <Grid2 size={{ xs: 6 }}>
             <EntryRolesChipSet entryCollaborator={collaborator} />
-          </Grid>
+          </Grid2>
         </Fragment>
       )),
     [entry.collaborators],
   )
 
   return (
-    <Grid container spacing={2}>
-      <Grid item xs={6}>
-        Entity
-      </Grid>
-      <Grid item xs={6}>
-        Roles
-      </Grid>
+    <Grid2 container spacing={2}>
+      <Grid2 size={{ xs: 6 }}>Entity</Grid2>
+      <Grid2 size={{ xs: 6 }}>Roles</Grid2>
       {rows}
-    </Grid>
+    </Grid2>
   )
 }
diff --git a/frontend/src/schemas/SchemaButton.tsx b/frontend/src/schemas/SchemaButton.tsx
index 15e5a607e..6f578b0bb 100644
--- a/frontend/src/schemas/SchemaButton.tsx
+++ b/frontend/src/schemas/SchemaButton.tsx
@@ -1,5 +1,5 @@
 import { LoadingButton } from '@mui/lab'
-import { Card, CardActions, CardContent, Divider, Grid, Stack, Typography } from '@mui/material'
+import { Card, CardActions, CardContent, Divider, Grid2, Stack, Typography } from '@mui/material'
 import MarkdownDisplay from 'src/common/MarkdownDisplay'
 import { SchemaInterface } from 'types/types'
 
@@ -11,7 +11,7 @@ interface SchemaButtonProps {
 
 export default function SchemaButton({ schema, onClick, loading = false }: SchemaButtonProps) {
   return (
-    <Grid item md={6} sm={12}>
+    <Grid2 size={{ md: 6, sm: 12 }}>
       <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
         <CardContent>
           <Stack spacing={1}>
@@ -36,6 +36,6 @@ export default function SchemaButton({ schema, onClick, loading = false }: Schem
           </Stack>
         </CardActions>
       </Card>
-    </Grid>
+    </Grid2>
   )
 }
diff --git a/frontend/src/schemas/SchemaSelect.tsx b/frontend/src/schemas/SchemaSelect.tsx
index 6236cfa9d..f931f962a 100644
--- a/frontend/src/schemas/SchemaSelect.tsx
+++ b/frontend/src/schemas/SchemaSelect.tsx
@@ -8,7 +8,7 @@ import {
   Button,
   Card,
   Container,
-  Grid,
+  Grid2,
   Stack,
   Typography,
 } from '@mui/material'
@@ -146,9 +146,9 @@ export default function SchemaSelect({ entry }: SchemaSelectProps) {
                   </Typography>
                 </AccordionSummary>
                 <AccordionDetails>
-                  <Grid container spacing={2} justifyContent='center'>
+                  <Grid2 container spacing={2} justifyContent='center'>
                     {activeSchemaButtons}
-                  </Grid>
+                  </Grid2>
                 </AccordionDetails>
               </Accordion>
               <Accordion sx={accordionStyling} slotProps={{ heading: { component: 'h2' } }}>
@@ -158,9 +158,9 @@ export default function SchemaSelect({ entry }: SchemaSelectProps) {
                   </Typography>
                 </AccordionSummary>
                 <AccordionDetails>
-                  <Grid container spacing={2} justifyContent='center'>
+                  <Grid2 container spacing={2} justifyContent='center'>
                     {inactiveSchemaButtons}
-                  </Grid>
+                  </Grid2>
                 </AccordionDetails>
               </Accordion>
               <MessageAlert message={errorMessage} severity='error' />
diff --git a/frontend/src/settings/authentication/PersonalAccessToken.tsx b/frontend/src/settings/authentication/PersonalAccessToken.tsx
index 2b598a070..f602693c1 100644
--- a/frontend/src/settings/authentication/PersonalAccessToken.tsx
+++ b/frontend/src/settings/authentication/PersonalAccessToken.tsx
@@ -1,5 +1,5 @@
 import { Visibility, VisibilityOff } from '@mui/icons-material'
-import { Box, Grid, IconButton, Tooltip, Typography } from '@mui/material'
+import { Box, Grid2, IconButton, Tooltip, Typography } from '@mui/material'
 import { useTheme } from '@mui/material/styles'
 import { useState } from 'react'
 import CopyToClipboardButton from 'src/common/CopyToClipboardButton'
@@ -25,11 +25,11 @@ export default function PersonalAccessToken({ token }: PersonalAccessTokenProps)
 
   return (
     <>
-      <Grid container spacing={1} alignItems='center'>
-        <Grid item xs={2}>
+      <Grid2 container spacing={1} alignItems='center'>
+        <Grid2 size={{ xs: 2 }}>
           <Typography>Access Key</Typography>
-        </Grid>
-        <Grid item xs={8}>
+        </Grid2>
+        <Grid2 size={{ xs: 8 }}>
           <Box
             sx={{
               backgroundColor: theme.palette.container.main,
@@ -42,8 +42,8 @@ export default function PersonalAccessToken({ token }: PersonalAccessTokenProps)
               {showAccessKey ? token.accessKey || '' : HIDDEN_TOKEN_ACCESS_KEY}
             </Typography>
           </Box>
-        </Grid>
-        <Grid item xs={2}>
+        </Grid2>
+        <Grid2 size={{ xs: 2 }}>
           <CopyToClipboardButton
             textToCopy={token.accessKey}
             notificationText='Copied access key to clipboard'
@@ -59,11 +59,11 @@ export default function PersonalAccessToken({ token }: PersonalAccessTokenProps)
               {showAccessKey ? <VisibilityOff /> : <Visibility />}
             </IconButton>
           </Tooltip>
-        </Grid>
-        <Grid item xs={2}>
+        </Grid2>
+        <Grid2 size={{ xs: 2 }}>
           <Typography>Secret Key</Typography>
-        </Grid>
-        <Grid item xs={8}>
+        </Grid2>
+        <Grid2 size={{ xs: 8 }}>
           <Box
             sx={{
               backgroundColor: theme.palette.container.main,
@@ -76,8 +76,8 @@ export default function PersonalAccessToken({ token }: PersonalAccessTokenProps)
               {showSecretKey ? token.secretKey : HIDDEN_TOKEN_SECRET_KEY}
             </Typography>
           </Box>
-        </Grid>
-        <Grid item xs={2}>
+        </Grid2>
+        <Grid2 size={{ xs: 2 }}>
           <CopyToClipboardButton
             textToCopy={token.secretKey}
             notificationText='Copied secret key to clipboard'
@@ -93,8 +93,8 @@ export default function PersonalAccessToken({ token }: PersonalAccessTokenProps)
               {showSecretKey ? <VisibilityOff /> : <Visibility />}
             </IconButton>
           </Tooltip>
-        </Grid>
-      </Grid>
+        </Grid2>
+      </Grid2>
     </>
   )
 }