diff --git a/app/[locale]/prayers/page.tsx b/app/[locale]/prayers/page.tsx
index 4fa9840..5f41718 100644
--- a/app/[locale]/prayers/page.tsx
+++ b/app/[locale]/prayers/page.tsx
@@ -1,7 +1,6 @@
 'use client'
 import {
   Container,
-  Grid,
   Card,
   CardContent,
   Typography,
@@ -285,9 +284,9 @@ export default function PrayersPage() {
           </Typography>
         </Box>
 
-        <Grid container spacing={4}>
+        <Box sx={{ display: 'flex', gap: 4, flexDirection: { xs: 'column', md: 'row' } }}>
           {/* Categories Filter */}
-          <Grid item xs={12} md={3}>
+          <Box sx={{ width: { xs: '100%', md: '25%' }, flexShrink: 0 }}>
             <Card>
               <CardContent>
                 {/* Add Prayer Button */}
@@ -353,10 +352,10 @@ export default function PrayersPage() {
                 </Typography>
               </CardContent>
             </Card>
-          </Grid>
+          </Box>
 
           {/* Prayer Requests */}
-          <Grid item xs={12} md={9}>
+          <Box sx={{ flex: 1, width: { xs: '100%', md: '75%' } }}>
             {loading ? (
               <Box>
                 {Array.from({ length: 3 }).map((_, index) => (
@@ -467,8 +466,8 @@ export default function PrayersPage() {
                 })}
               </Box>
             )}
-          </Grid>
-        </Grid>
+          </Box>
+        </Box>
 
         {/* Add Prayer Dialog */}
         <Dialog