diff --git a/maternal-web/app/page.tsx b/maternal-web/app/page.tsx
index 32bb9c1..36f1a70 100644
--- a/maternal-web/app/page.tsx
+++ b/maternal-web/app/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Box, Typography, Button, Paper, Grid, CircularProgress } from '@mui/material';
+import { Box, Typography, Button, Paper, Grid2 as Grid, CircularProgress } from '@mui/material';
 import { AppShell } from '@/components/layouts/AppShell/AppShell';
 import { ProtectedRoute } from '@/components/common/ProtectedRoute';
 import { EmailVerificationBanner } from '@/components/common/EmailVerificationBanner';
@@ -126,7 +126,7 @@ export default function HomePage() {
           </Typography>
           <Grid container spacing={2} sx={{ mb: 4 }}>
             {quickActions.map((action, index) => (
-              <Grid item xs={6} sm={4} md={2} key={action.label}>
+              <Grid size={{ xs: 6, sm: 4, md: 2 }} key={action.label}>
                 <motion.div
                   initial={{ opacity: 0, scale: 0.9 }}
                   animate={{ opacity: 1, scale: 1 }}
@@ -184,7 +184,7 @@ export default function HomePage() {
                 </Box>
               ) : (
                 <Grid container spacing={3}>
-                  <Grid item xs={6} sm={3}>
+                  <Grid size={{ xs: 6, sm: 3 }}>
                     <Box
                       textAlign="center"
                       sx={{
@@ -204,7 +204,7 @@ export default function HomePage() {
                       </Typography>
                     </Box>
                   </Grid>
-                  <Grid item xs={6} sm={3}>
+                  <Grid size={{ xs: 6, sm: 3 }}>
                     <Box
                       textAlign="center"
                       sx={{
@@ -226,7 +226,7 @@ export default function HomePage() {
                       </Typography>
                     </Box>
                   </Grid>
-                  <Grid item xs={6} sm={3}>
+                  <Grid size={{ xs: 6, sm: 3 }}>
                     <Box
                       textAlign="center"
                       sx={{
@@ -246,7 +246,7 @@ export default function HomePage() {
                       </Typography>
                     </Box>
                   </Grid>
-                  <Grid item xs={6} sm={3}>
+                  <Grid size={{ xs: 6, sm: 3 }}>
                     <Box
                       textAlign="center"
                       sx={{