diff --git a/package-lock.json b/package-lock.json
index 2dae8d64..40e6134d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
             "dependencies": {
                 "@emotion/react": "^11.14.0",
                 "@emotion/styled": "^11.14.1",
-                "@gridsuite/commons-ui": "0.239.0",
+                "@gridsuite/commons-ui": "0.240.0",
                 "@hookform/resolvers": "^4.1.3",
                 "@mui/icons-material": "^6.5.0",
                 "@mui/lab": "6.0.1-beta.36",
@@ -3200,9 +3200,9 @@
             }
         },
         "node_modules/@gridsuite/commons-ui": {
-            "version": "0.239.0",
-            "resolved": "https://registry.npmjs.org/@gridsuite/commons-ui/-/commons-ui-0.239.0.tgz",
-            "integrity": "sha512-9S6mIdp9ZKDh+aWzo9mETuiadHvBa14wc4Pd+vSGf3Yg6cfN40S1E41OJj8Nov4g+nc0dgJr7k/xdNLElDnRNA==",
+            "version": "0.240.0",
+            "resolved": "https://registry.npmjs.org/@gridsuite/commons-ui/-/commons-ui-0.240.0.tgz",
+            "integrity": "sha512-sGP5jDrxpPje7aCYs4SwLqVxPldqpcLIPTeQL9zArWHocHYdTQGU6Fa6JGQV3YWZa4D6tVNa3iYtJKuUpqKkFg==",
             "license": "MPL-2.0",
             "dependencies": {
                 "@ag-grid-community/locale": "^35.3.1",
diff --git a/package.json b/package.json
index 47a1e34f..067d8668 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,7 @@
     "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
-        "@gridsuite/commons-ui": "0.239.0",
+        "@gridsuite/commons-ui": "0.240.0",
         "@hookform/resolvers": "^4.1.3",
         "@mui/icons-material": "^6.5.0",
         "@mui/lab": "6.0.1-beta.36",
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index 401fae27..151a057b 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -7,7 +7,7 @@
 
 import { useCallback, useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { Grid } from '@mui/material';
+import { Box } from '@mui/material';
 import {
     AnnouncementNotification,
     AuthenticationRouter,
@@ -140,21 +140,10 @@ export default function App() {
     }, [initialMatchSilentRenewCallbackUrl, dispatch, initialMatchSigninCallbackUrl]);
 
     return (
-        <Grid
-            container
-            direction="column"
-            spacing={0}
-            justifyContent="flex-start"
-            alignItems="stretch"
-            sx={{ height: '100vh', width: '100vw' }}
-        >
-            <Grid item xs="auto">
-                <AppTopBar userManagerInstance={userManager.instance} />
-            </Grid>
-            <Grid item xs="auto">
-                <AnnouncementNotification userProfile={userProfile} />
-            </Grid>
-            <Grid item container xs component="main" height={'100%'}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', height: '100vh', width: '100vw' }}>
+            <AppTopBar userManagerInstance={userManager.instance} />
+            <AnnouncementNotification userProfile={userProfile} />
+            <Box component="main" sx={{ display: 'flex', flexGrow: 1, minHeight: 0, width: '100%' }}>
                 <CardErrorBoundary>
                     <div
                         className="singlestretch-parent"
@@ -195,7 +184,7 @@ export default function App() {
                         )}
                     </div>
                 </CardErrorBoundary>
-            </Grid>
-        </Grid>
+            </Box>
+        </Box>
     );
 }
diff --git a/src/components/App/HomePage.tsx b/src/components/App/HomePage.tsx
index aad5279b..66ee3d9d 100644
--- a/src/components/App/HomePage.tsx
+++ b/src/components/App/HomePage.tsx
@@ -5,13 +5,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid, Typography } from '@mui/material';
+import { Grid2 as Grid, Typography } from '@mui/material';
 import { ReactElement } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 export default function HomePage(): ReactElement {
     return (
-        <Grid item id="home-page" xs={12} alignSelf="center" component="section">
+        <Grid id="home-page" size={12} alignSelf="center" component="section">
             <Typography variant="h3" color="textPrimary" align="center">
                 <FormattedMessage id="connected" />
             </Typography>
diff --git a/src/components/Grid/GridTable.tsx b/src/components/Grid/GridTable.tsx
index 78d269c5..8eadb555 100644
--- a/src/components/Grid/GridTable.tsx
+++ b/src/components/Grid/GridTable.tsx
@@ -18,7 +18,7 @@ import {
     useMemo,
     useState,
 } from 'react';
-import { AppBar, Box, Button, ButtonProps, Grid, Toolbar } from '@mui/material';
+import { AppBar, Box, Button, ButtonProps, Stack, Toolbar } from '@mui/material';
 import { Delete } from '@mui/icons-material';
 import { AgGrid, AgGridRef } from './AgGrid';
 import { GridOptions } from 'ag-grid-community';
@@ -73,30 +73,28 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
     );
 
     return (
-        <Grid container direction="column" justifyContent="flex-start" alignItems="stretch" width={'100%'}>
-            <Grid item xs="auto">
-                <AppBar position="static" color="default">
-                    <Toolbar
-                        variant="dense"
-                        disableGutters
-                        sx={(theme) => ({
-                            marginLeft: 1,
-                            '& > *': {
-                                // mui's button set it own margin on itself...
-                                marginRight: `${theme.spacing(1)} !important`,
-                                '&:last-child': {
-                                    marginRight: '0 !important',
-                                },
+        <Stack justifyContent="flex-start" alignItems="stretch" width={'100%'}>
+            <AppBar position="static" color="default">
+                <Toolbar
+                    variant="dense"
+                    disableGutters
+                    sx={(theme) => ({
+                        marginLeft: 1,
+                        '& > *': {
+                            // mui's button set it own margin on itself...
+                            marginRight: `${theme.spacing(1)} !important`,
+                            '&:last-child': {
+                                marginRight: '0 !important',
                             },
-                        })}
-                    >
-                        {toolbarContent}
-                        <Box sx={{ flexGrow: 1 }} />
-                        {alignedRightToolbarContent}
-                    </Toolbar>
-                </AppBar>
-            </Grid>
-            <Grid item xs>
+                        },
+                    })}
+                >
+                    {toolbarContent}
+                    <Box sx={{ flexGrow: 1 }} />
+                    {alignedRightToolbarContent}
+                </Toolbar>
+            </AppBar>
+            <Box sx={{ flexGrow: 1, minHeight: 0 }}>
                 <AgGrid<TData, TContext & GridTableExposed>
                     {...agGridProps}
                     ref={gridRef}
@@ -112,8 +110,8 @@ export const GridTable: GridTableWithRef = forwardRef(function AgGridToolbar<TDa
                         [context, loadDataAndSave]
                     )}
                 />
-            </Grid>
-        </Grid>
+            </Box>
+        </Stack>
     );
 });
 export default GridTable;
diff --git a/src/pages/announcements/add-announcement-form.tsx b/src/pages/announcements/add-announcement-form.tsx
index 4b1091a0..4dd876a5 100644
--- a/src/pages/announcements/add-announcement-form.tsx
+++ b/src/pages/announcements/add-announcement-form.tsx
@@ -6,7 +6,7 @@
  */
 
 import { useCallback, useMemo } from 'react';
-import { Grid } from '@mui/material';
+import { Box, Grid2 as Grid, Stack } from '@mui/material';
 import { type DateOrTimeView } from '@mui/x-date-pickers';
 import { useIntl } from 'react-intl';
 import * as yup from 'yup';
@@ -135,9 +135,9 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
             FormProps={{ style: { height: '100%' } }}
         >
             <FormErrorProvider onError={onErrorIntl}>
-                <Grid container direction="column" spacing={1} height="100%">
-                    <Grid item container xs="auto" spacing={1}>
-                        <Grid item xs={12} lg={6}>
+                <Stack spacing={1} height="100%">
+                    <Grid container spacing={1}>
+                        <Grid size={{ xs: 12, lg: 6 }}>
                             <DateTimePickerElement<FormSchema>
                                 name={START_DATE}
                                 label={intl.formatMessage({ id: 'announcements.table.startDate' })}
@@ -148,7 +148,7 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
                                 disablePast
                             />
                         </Grid>
-                        <Grid item xs={12} lg={6}>
+                        <Grid size={{ xs: 12, lg: 6 }}>
                             <DateTimePickerElement<FormSchema>
                                 name={END_DATE}
                                 label={intl.formatMessage({ id: 'announcements.table.endDate' })}
@@ -161,22 +161,20 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
                             />
                         </Grid>
                     </Grid>
-                    <Grid item xs="auto">
-                        <SelectElement<FormSchema>
-                            name={SEVERITY}
-                            label={intl.formatMessage({ id: 'announcements.severity' })}
-                            options={useMemo(
-                                () =>
-                                    Object.values(UserAdminSrv.AnnouncementSeverity).map((value) => ({
-                                        id: value,
-                                        label: intl.formatMessage({ id: `announcements.severity.${value}` }),
-                                    })),
-                                [intl]
-                            )}
-                            fullWidth
-                        />
-                    </Grid>
-                    <Grid item xs>
+                    <SelectElement<FormSchema>
+                        name={SEVERITY}
+                        label={intl.formatMessage({ id: 'announcements.severity' })}
+                        options={useMemo(
+                            () =>
+                                Object.values(UserAdminSrv.AnnouncementSeverity).map((value) => ({
+                                    id: value,
+                                    label: intl.formatMessage({ id: `announcements.severity.${value}` }),
+                                })),
+                            [intl]
+                        )}
+                        fullWidth
+                    />
+                    <Box sx={{ flexGrow: 1 }}>
                         <TextareaAutosizeElement<FormSchema>
                             name={MESSAGE}
                             label={intl.formatMessage({ id: 'announcements.form.message' })}
@@ -184,11 +182,9 @@ export default function AddAnnouncementForm({ onAnnouncementCreated }: Readonly<
                             fullWidth
                             //inputProps={{ maxLength: MESSAGE_MAX_LENGTH } satisfies Partial<HTMLInputElement>}
                         />
-                    </Grid>
-                    <Grid item xs="auto">
-                        <SubmitButton variant="outlined" type="submit" fullWidth />
-                    </Grid>
-                </Grid>
+                    </Box>
+                    <SubmitButton variant="outlined" type="submit" fullWidth />
+                </Stack>
             </FormErrorProvider>
         </FormContainer>
     );
diff --git a/src/pages/announcements/announcements-page.tsx b/src/pages/announcements/announcements-page.tsx
index b18d89ff..cd2812a9 100644
--- a/src/pages/announcements/announcements-page.tsx
+++ b/src/pages/announcements/announcements-page.tsx
@@ -8,7 +8,7 @@
 import type { UUID } from 'node:crypto';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { Divider, Grid, Typography } from '@mui/material';
+import { Box, Divider, Grid2 as Grid, Stack, Typography } from '@mui/material';
 import { snackWithFallback, useSnackMessage } from '@gridsuite/commons-ui';
 import type { ColDef, GetRowIdParams, ValueFormatterFunc } from 'ag-grid-community';
 import { type GridTableRef } from '../../components/Grid';
@@ -119,41 +119,38 @@ export default function AnnouncementsPage() {
 
     const gridContext = useMemo(() => ({ refresh: loadDataAndSave }), [loadDataAndSave]);
 
-    // Note: using <Stack/> for the columns didn't work
     return (
-        <Grid container spacing={2} p={1} height={'100%'}>
-            <Grid item container direction="column" xs={12} sm={6} md={4}>
-                <Grid item xs="auto">
+        <Grid container spacing={2} sx={{ p: 1, height: '100%', width: '100%' }}>
+            <Grid size={{ xs: 12, sm: 6, md: 4 }} sx={{ display: 'flex' }}>
+                <Stack height="100%" sx={{ flexGrow: 1 }}>
                     <Typography variant="subtitle1">
                         <FormattedMessage id="announcements.programNewMessage" />
                     </Typography>
-                </Grid>
-                <Grid item xs="auto">
                     <Divider sx={{ mt: 0.5, mb: 1.5 }} />
-                </Grid>
-                <Grid item xs>
-                    <AddAnnouncementForm onAnnouncementCreated={refreshGrid} />
-                </Grid>
+                    <Box sx={{ flexGrow: 1, minHeight: 0 }}>
+                        <AddAnnouncementForm onAnnouncementCreated={refreshGrid} />
+                    </Box>
+                </Stack>
             </Grid>
-            <Grid item container direction="column" xs={12} sm={6} md={8}>
-                <Grid item xs="auto">
+            <Grid size={{ xs: 12, sm: 6, md: 8 }}>
+                <Stack height="100%">
                     <Typography variant="subtitle1" mb={0.5}>
                         <FormattedMessage id="announcements.programmedMessage" />
                     </Typography>
-                </Grid>
-                <Grid item xs>
-                    <AgGrid<Announcement>
-                        ref={gridRef}
-                        rowData={data}
-                        alwaysShowVerticalScroll
-                        onGridReady={loadDataAndSave}
-                        columnDefs={columns}
-                        defaultColDef={defaultColDef}
-                        gridId="table-announcements"
-                        getRowId={getRowId}
-                        context={gridContext}
-                    />
-                </Grid>
+                    <Box sx={{ flexGrow: 1 }}>
+                        <AgGrid<Announcement>
+                            ref={gridRef}
+                            rowData={data}
+                            alwaysShowVerticalScroll
+                            onGridReady={loadDataAndSave}
+                            columnDefs={columns}
+                            defaultColDef={defaultColDef}
+                            gridId="table-announcements"
+                            getRowId={getRowId}
+                            context={gridContext}
+                        />
+                    </Box>
+                </Stack>
             </Grid>
         </Grid>
     );
diff --git a/src/pages/common/multi-chip-cell-renderer.tsx b/src/pages/common/multi-chip-cell-renderer.tsx
index 3da66ede..868109e1 100644
--- a/src/pages/common/multi-chip-cell-renderer.tsx
+++ b/src/pages/common/multi-chip-cell-renderer.tsx
@@ -6,7 +6,7 @@
  */
 
 import React, { useRef, useState, useEffect } from 'react';
-import { Chip, Grid, Tooltip } from '@mui/material';
+import { Chip, Grid2 as Grid, Tooltip } from '@mui/material';
 import { mergeSx, type MuiStyles } from '@gridsuite/commons-ui';
 
 const maxChipWidth = 100;
@@ -14,7 +14,7 @@ const counterChipWidth = 25;
 
 const chipStyles = {
     default: {
-        marginTop: 2,
+        marginTop: 1,
         marginLeft: 1,
         maxWidth: maxChipWidth,
     },
@@ -85,7 +85,7 @@ const MultiChipCellRenderer = (props: MultiChipCellRendererProps) => {
     };
 
     return (
-        <Grid container direction="row" spacing={1} wrap="nowrap" ref={containerRef}>
+        <Grid container direction="row" wrap="nowrap" ref={containerRef}>
             {values.map((label: string, index: number) => customChip(label, index, values.length))}
         </Grid>
     );
diff --git a/src/pages/common/table-selection.tsx b/src/pages/common/table-selection.tsx
index ef7bc3f2..2847846a 100644
--- a/src/pages/common/table-selection.tsx
+++ b/src/pages/common/table-selection.tsx
@@ -8,7 +8,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { CustomAGGrid } from '@gridsuite/commons-ui';
-import { Grid, Typography } from '@mui/material';
+import { Box, Stack, Typography } from '@mui/material';
 import { AgGridReact } from 'ag-grid-react';
 import { ColDef, GetRowIdParams, GridReadyEvent } from 'ag-grid-community';
 import { defaultColDef, defaultRowSelection } from './table-config';
@@ -96,14 +96,12 @@ function TableSelection<TData>({
     }, [columnDefs]);
 
     return (
-        <Grid item container direction="column" style={{ height: '100%' }}>
-            <Grid item>
-                <Typography variant="subtitle1">
-                    <FormattedMessage id={titleId} />
-                    {` (${selectedCount} / ${items.length})`}
-                </Typography>
-            </Grid>
-            <Grid item xs>
+        <Stack sx={{ height: '100%', width: '100%' }}>
+            <Typography variant="subtitle1">
+                <FormattedMessage id={titleId} />
+                {` (${selectedCount} / ${items.length})`}
+            </Typography>
+            <Box sx={{ flexGrow: 1, minHeight: 0 }}>
                 <CustomAGGrid
                     gridId="table-selection"
                     ref={gridRef}
@@ -116,8 +114,8 @@ function TableSelection<TData>({
                     onGridReady={handleGridReady}
                     accentedSort
                 />
-            </Grid>
-        </Grid>
+            </Box>
+        </Stack>
     );
 }
 
diff --git a/src/pages/groups/groups-page.tsx b/src/pages/groups/groups-page.tsx
index 99beabca..393d4fb1 100644
--- a/src/pages/groups/groups-page.tsx
+++ b/src/pages/groups/groups-page.tsx
@@ -6,7 +6,7 @@
  */
 
 import { FunctionComponent, useCallback, useRef, useState } from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid, Stack } from '@mui/material';
 import { GridTableRef } from '../../components/Grid';
 import { GroupInfos } from '../../services';
 import { RowClickedEvent } from 'ag-grid-community';
@@ -41,15 +41,15 @@ const GroupsPage: FunctionComponent = () => {
 
     return (
         <>
-            <Grid item container direction="column" spacing={2} component="section" height={'100%'}>
-                <Grid item container xs sx={{ width: 1 }}>
+            <Stack spacing={2} component="section" sx={{ height: '100%', width: '100%' }}>
+                <Grid container sx={{ flexGrow: 1, width: '100%' }}>
                     <GroupsTable
                         gridRef={gridRef}
                         onRowClicked={onRowClicked}
                         setOpenAddGroupDialog={setOpenAddGroupDialog}
                     />
                 </Grid>
-            </Grid>
+            </Stack>
             <AddGroupDialog gridRef={gridRef} open={openAddGroupDialog} setOpen={setOpenAddGroupDialog} />
             <GroupModificationDialog
                 groupInfos={editingGroup}
diff --git a/src/pages/groups/modification/group-modification-form.tsx b/src/pages/groups/modification/group-modification-form.tsx
index 97c02a98..d939731f 100644
--- a/src/pages/groups/modification/group-modification-form.tsx
+++ b/src/pages/groups/modification/group-modification-form.tsx
@@ -6,7 +6,7 @@
  */
 
 import { useMemo, type FunctionComponent } from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import * as yup from 'yup';
 import { TextInput } from '@gridsuite/commons-ui';
 import TableSelection from '../../common/table-selection';
@@ -60,11 +60,11 @@ const GroupModificationForm: FunctionComponent<GroupModificationFormProps> = ({
     );
 
     return (
-        <Grid item container spacing={2} marginTop={0} style={{ height: '100%' }}>
-            <Grid item xs={12}>
+        <Grid container spacing={2} marginTop={2} sx={{ height: '100%', width: '100%' }}>
+            <Grid sx={{ width: '100%' }}>
                 <TextInput name={GROUP_NAME} label={'groups.table.id'} clearable={true} />
             </Grid>
-            <Grid item xs={12} style={{ height: '90%' }}>
+            <Grid sx={{ height: '90%', width: '100%' }}>
                 <TableSelection<UserSelectionItem>
                     titleId="groups.table.users"
                     items={usersOptions}
diff --git a/src/pages/profiles/modification/configuration-selection.tsx b/src/pages/profiles/modification/configuration-selection.tsx
index 9c4d5e9d..5e2d662b 100644
--- a/src/pages/profiles/modification/configuration-selection.tsx
+++ b/src/pages/profiles/modification/configuration-selection.tsx
@@ -8,7 +8,7 @@
 import { FunctionComponent, useEffect, useState } from 'react';
 import HighlightOffIcon from '@mui/icons-material/HighlightOff';
 import FolderIcon from '@mui/icons-material/Folder';
-import { Grid, IconButton, Tooltip } from '@mui/material';
+import { Grid2 as Grid, IconButton, Tooltip } from '@mui/material';
 import { useIntl } from 'react-intl';
 import { DirectoryItemSelector, ElementAttributes, ElementType, TreeViewFinderNodeProps } from '@gridsuite/commons-ui';
 import { useController, useWatch } from 'react-hook-form';
@@ -100,7 +100,7 @@ const ConfigurationSelection: FunctionComponent<ConfigSelectionProps> = (props)
 
     return (
         <Grid container columns={24} alignItems={'center'}>
-            <Grid item xs={1}>
+            <Grid size={1}>
                 <IconButton edge="start" onClick={handleResetConfig} disableRipple={watchConfigId === undefined}>
                     <Tooltip
                         title={intl.formatMessage({
@@ -111,7 +111,7 @@ const ConfigurationSelection: FunctionComponent<ConfigSelectionProps> = (props)
                     </Tooltip>
                 </IconButton>
             </Grid>
-            <Grid item xs={1}>
+            <Grid size={1}>
                 <IconButton edge="start" onClick={handleSelectFolder}>
                     <Tooltip
                         title={intl.formatMessage({
@@ -122,7 +122,7 @@ const ConfigurationSelection: FunctionComponent<ConfigSelectionProps> = (props)
                     </Tooltip>
                 </IconButton>
             </Grid>
-            <Grid item xs={22}>
+            <Grid size={22}>
                 <LinkedPathDisplay
                     nameKey={getConfigTranslationKey()}
                     value={selectedElementName}
diff --git a/src/pages/profiles/modification/profile-modification-form.tsx b/src/pages/profiles/modification/profile-modification-form.tsx
index 3084fc1c..1a42adeb 100644
--- a/src/pages/profiles/modification/profile-modification-form.tsx
+++ b/src/pages/profiles/modification/profile-modification-form.tsx
@@ -6,7 +6,7 @@
  */
 
 import { ElementType, IntegerInput, TextInput } from '@gridsuite/commons-ui';
-import Grid from '@mui/material/Grid';
+import { Grid2 as Grid } from '@mui/material';
 import ConfigurationSelection, { ConfigSelectionProps } from './configuration-selection';
 import { FormattedMessage } from 'react-intl';
 import React, { FunctionComponent } from 'react';
@@ -42,18 +42,18 @@ const configList: ConfigSelectionProps[] = [
 
 const ProfileModificationForm: FunctionComponent = () => {
     return (
-        <Grid container spacing={2} marginTop={'auto'}>
-            <Grid item xs={12}>
+        <Grid container spacing={2} marginTop={2} sx={{ width: '100%' }}>
+            <Grid sx={{ width: '100%' }}>
                 <TextInput name={PROFILE_NAME} label={'profiles.table.id'} clearable={true} />
             </Grid>
-            <Grid item xs={12}>
+            <Grid sx={{ width: '100%' }}>
                 <h3>
                     <FormattedMessage id={'profiles.form.modification.defaultConfigurations'} />
                 </h3>
             </Grid>
             {configList.map((config) => {
                 return (
-                    <Grid item xs={12} key={config.selectionFormId}>
+                    <Grid key={config.selectionFormId} sx={{ width: '100%' }}>
                         <ConfigurationSelection
                             elementType={config.elementType}
                             selectionFormId={config.selectionFormId}
@@ -61,20 +61,20 @@ const ProfileModificationForm: FunctionComponent = () => {
                     </Grid>
                 );
             })}
-            <Grid item xs={12}>
+            <Grid sx={{ width: '100%' }}>
                 <h3>
                     <FormattedMessage id={'profiles.form.modification.userQuotas'} />
                 </h3>
             </Grid>
-            <Grid container spacing={2} direction="row" marginLeft={'auto'}>
-                <Grid item xs={4}>
+            <Grid container spacing={2} direction="row" marginLeft={'auto'} sx={{ width: '100%' }}>
+                <Grid size={4}>
                     <IntegerInput
                         name={USER_QUOTA_CASE_NB}
                         label="profiles.form.modification.numberOfCasesOrStudies"
                         clearable={true}
                     />
                 </Grid>
-                <Grid item xs={4}>
+                <Grid size={4}>
                     <IntegerInput
                         name={USER_QUOTA_BUILD_NB}
                         label="profiles.form.modification.numberOfNodeBuilds"
diff --git a/src/pages/profiles/profiles-page.tsx b/src/pages/profiles/profiles-page.tsx
index 68e393f5..a084c4e4 100644
--- a/src/pages/profiles/profiles-page.tsx
+++ b/src/pages/profiles/profiles-page.tsx
@@ -6,7 +6,7 @@
  */
 
 import { FunctionComponent, useCallback, useRef, useState } from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid, Stack } from '@mui/material';
 import { GridTableRef } from '../../components/Grid';
 import { UserProfile } from '../../services';
 import { RowClickedEvent } from 'ag-grid-community';
@@ -42,15 +42,15 @@ const ProfilesPage: FunctionComponent = () => {
 
     return (
         <>
-            <Grid item container direction="column" spacing={2} component="section" height={'100%'}>
-                <Grid item container xs sx={{ width: 1 }}>
+            <Stack spacing={2} component="section" sx={{ height: '100%', width: '100%' }}>
+                <Grid container sx={{ flexGrow: 1, width: '100%' }}>
                     <ProfilesTable
                         gridRef={gridRef}
                         onRowClicked={onRowClicked}
                         setOpenAddProfileDialog={setOpenAddProfileDialog}
                     />
                 </Grid>
-            </Grid>
+            </Stack>
             <AddProfileDialog gridRef={gridRef} open={openAddProfileDialog} setOpen={setOpenAddProfileDialog} />
             <ProfileModificationDialog
                 profileId={editingProfileId}
diff --git a/src/pages/profiles/validity-cell-renderer.tsx b/src/pages/profiles/validity-cell-renderer.tsx
index da041028..d4d6a93e 100644
--- a/src/pages/profiles/validity-cell-renderer.tsx
+++ b/src/pages/profiles/validity-cell-renderer.tsx
@@ -5,17 +5,31 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import { Grid } from '@mui/material';
 import { Cancel, CheckCircle, RadioButtonUnchecked } from '@mui/icons-material';
 import { ICellRendererParams } from 'ag-grid-community';
+import { Box } from '@mui/material';
 
 export const ValidityCellRenderer = (props: ICellRendererParams) => {
+    let icon;
+
+    if (props.value == null) {
+        icon = <RadioButtonUnchecked fontSize="small" />;
+    } else if (props.value === true) {
+        icon = <CheckCircle fontSize="small" color="success" />;
+    } else {
+        icon = <Cancel fontSize="small" color="error" />;
+    }
+
     return (
-        <Grid container>
-            {props.value == null && <RadioButtonUnchecked fontSize="small" />}
-            {props.value === true && <CheckCircle fontSize="small" color="success" />}
-            {props.value === false && <Cancel fontSize="small" color="error" />}
-        </Grid>
+        <Box
+            sx={{
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+            }}
+        >
+            {icon}
+        </Box>
     );
 };
 
diff --git a/src/pages/users/modification/user-modification-form.tsx b/src/pages/users/modification/user-modification-form.tsx
index 08ab5dbf..67f97fa5 100644
--- a/src/pages/users/modification/user-modification-form.tsx
+++ b/src/pages/users/modification/user-modification-form.tsx
@@ -6,7 +6,7 @@
  */
 
 import { useMemo, type FunctionComponent } from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid } from '@mui/material';
 import * as yup from 'yup';
 import { AutocompleteInput, TextInput } from '@gridsuite/commons-ui';
 import TableSelection from '../../common/table-selection';
@@ -60,8 +60,8 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
     );
 
     return (
-        <Grid item container spacing={2} marginTop={0} style={{ height: '100%' }}>
-            <Grid item xs={12}>
+        <Grid container spacing={2} marginTop={2} sx={{ height: '100%', width: '100%' }}>
+            <Grid sx={{ width: '100%' }}>
                 <TextInput
                     name={USER_NAME}
                     label={'users.table.id'}
@@ -69,7 +69,7 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
                     formProps={{ disabled: true, style: { fontStyle: 'italic' } }}
                 />
             </Grid>
-            <Grid item xs={12}>
+            <Grid sx={{ width: '100%' }}>
                 <TextInput
                     name={USER_FULL_NAME}
                     label={'users.table.fullName'}
@@ -77,7 +77,7 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
                     formProps={{ disabled: true, style: { fontStyle: 'italic' } }}
                 />
             </Grid>
-            <Grid item xs={12}>
+            <Grid sx={{ width: '100%' }}>
                 <AutocompleteInput
                     name={USER_PROFILE_NAME}
                     label={'users.table.profileName'}
@@ -89,7 +89,7 @@ const UserModificationForm: FunctionComponent<UserModificationFormProps> = ({
                     options={profileOptions}
                 />
             </Grid>
-            <Grid item xs={12} style={{ height: '85%' }}>
+            <Grid sx={{ height: '85%', width: '100%' }}>
                 <TableSelection<GroupSelectionItem>
                     titleId="users.table.groups"
                     items={groupOptions}
diff --git a/src/pages/users/users-page.tsx b/src/pages/users/users-page.tsx
index 1fbc9d58..48721c8d 100644
--- a/src/pages/users/users-page.tsx
+++ b/src/pages/users/users-page.tsx
@@ -6,7 +6,7 @@
  */
 
 import { FunctionComponent, useCallback, useRef, useState } from 'react';
-import { Grid } from '@mui/material';
+import { Grid2 as Grid, Stack } from '@mui/material';
 import { GridTableRef } from '../../components/Grid';
 import { UserInfos } from '../../services';
 import { RowClickedEvent } from 'ag-grid-community';
@@ -41,15 +41,15 @@ const UsersPage: FunctionComponent = () => {
 
     return (
         <>
-            <Grid item container direction="column" spacing={2} height={'100%'}>
-                <Grid item container xs sx={{ width: 1 }}>
+            <Stack spacing={2} sx={{ height: '100%', width: '100%' }}>
+                <Grid container sx={{ flexGrow: 1, width: '100%' }}>
                     <UsersTable
                         gridRef={gridRef}
                         onRowClicked={onRowClicked}
                         setOpenAddUserDialog={setOpenAddUserDialog}
                     />
                 </Grid>
-            </Grid>
+            </Stack>
             <AddUserDialog gridRef={gridRef} open={openAddUserDialog} setOpen={setOpenAddUserDialog} />
             <UserModificationDialog
                 userInfos={editingUser}