Migrate all pages from Grid to Box components using flexbox layout

- Migrated search page to use Box with flexbox for responsive layout
- Updated bible reader controls to use Box instead of Grid
- Converted home page hero, features, and stats sections to flexbox
- Removed Grid imports and replaced with Box components across all pages
- Maintained responsive behavior using sx breakpoints and flex properties

app/[locale]/bible/reader.tsx

@@ -596,9 +596,9 @@ export default function BibleReaderNew() {
         border: `1px solid ${getThemeStyles().borderColor}`
       }}
     >
-      <Grid container spacing={2} alignItems="center" justifyContent="center">
+      <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center', justifyContent: 'center' }}>
-        {/* Books Selection */}
+        {/* Books Selection */>
-        <Grid item xs={12} sm={4} md={3}>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' }, minWidth: { sm: 200, md: 250 } }}>
           <FormControl fullWidth size="small">
             <InputLabel>{t('book')}</InputLabel>
             <Select
@@ -617,10 +617,10 @@ export default function BibleReaderNew() {
               ))}
             </Select>
           </FormControl>
-        </Grid>
+        </Box>
 
         {/* Chapter Selection */}
-        <Grid item xs={12} sm={3} md={2}>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '0 1 auto' }, minWidth: { sm: 120, md: 150 } }}>
           <FormControl fullWidth size="small">
             <InputLabel>{t('chapter')}</InputLabel>
             <Select
@@ -646,10 +646,10 @@ export default function BibleReaderNew() {
               ))}
             </Select>
           </FormControl>
-        </Grid>
+        </Box>
 
-        {/* Font Size Controls */}
+        {/* Font Size Controls */>
-        <Grid item xs={12} sm={3} md={2}>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '0 1 auto' }, minWidth: { sm: 150 } }}>
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
             <IconButton
               size="small"
@@ -672,10 +672,10 @@ export default function BibleReaderNew() {
               <Typography variant="h6">A⁺</Typography>
             </IconButton>
           </Box>
-        </Grid>
+        </Box>
 
-        {/* Action Buttons */}
+        {/* Action Buttons */>
-        <Grid item xs={12} sm={2} md={5}>
+        <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 auto' } }}>
           <Box sx={{ display: 'flex', gap: 1, justifyContent: 'center' }}>
             <Tooltip title={t('toggleFullscreen')}>
               <IconButton
@@ -712,9 +712,9 @@ export default function BibleReaderNew() {
               </IconButton>
             </Tooltip>
           </Box>
-        </Grid>
+        </Box>
 
-      </Grid>
+      </Box>
     </Paper>
   )
 

app/[locale]/bookmarks/page.tsx

@@ -16,7 +16,6 @@ import {
   Button,
   Chip,
   Divider,
-  Grid,
   IconButton,
   Alert,
   CircularProgress,
@@ -222,8 +221,8 @@ export default function BookmarksPage() {
           </Box>
 
           {/* Stats */}
-          <Grid container spacing={3} sx={{ mb: 4 }}>
+          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap', mb: 4 }}>
-            <Grid item xs={12} sm={4}>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
               <Card variant="outlined">
                 <CardContent sx={{ textAlign: 'center' }}>
                   <Typography variant="h4" color="primary">
@@ -234,8 +233,8 @@ export default function BookmarksPage() {
                   </Typography>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
-            <Grid item xs={12} sm={4}>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
               <Card variant="outlined">
                 <CardContent sx={{ textAlign: 'center' }}>
                   <Typography variant="h4" color="success.main">
@@ -246,8 +245,8 @@ export default function BookmarksPage() {
                   </Typography>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
-            <Grid item xs={12} sm={4}>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 16px)' } }}>
               <Card variant="outlined">
                 <CardContent sx={{ textAlign: 'center' }}>
                   <Typography variant="h4" color="warning.main">
@@ -258,8 +257,8 @@ export default function BookmarksPage() {
                   </Typography>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
-          </Grid>
+          </Box>
 
           <Divider sx={{ mb: 3 }} />
 
@@ -309,9 +308,9 @@ export default function BookmarksPage() {
               </Button>
             </Box>
           ) : (
-            <Grid container spacing={3}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
               {filteredBookmarks().map((bookmark) => (
-                <Grid item xs={12} key={bookmark.id}>
+                <Box key={bookmark.id}>
                   <Card variant="outlined" sx={{ transition: 'all 0.2s', '&:hover': { elevation: 2 } }}>
                     <CardContent>
                       <Box display="flex" justifyContent="space-between" alignItems="flex-start">
@@ -391,9 +390,9 @@ export default function BookmarksPage() {
                       </Box>
                     </CardContent>
                   </Card>
-                </Grid>
+                </Box>
               ))}
-            </Grid>
+            </Box>
           )}
         </Paper>
       </Container>

app/[locale]/page.tsx

@@ -1,7 +1,6 @@
 'use client'
 import {
   Container,
-  Grid,
   Card,
   CardContent,
   Typography,
@@ -70,8 +69,8 @@ export default function Home() {
         }}
       >
         <Container maxWidth="lg">
-          <Grid container spacing={4} alignItems="center">
+          <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', alignItems: 'center' }}>
-            <Grid item xs={12} md={8}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 60%' } }}>
               <Typography variant="h2" component="h1" gutterBottom>
                 {t('hero.title')}
               </Typography>
@@ -113,13 +112,13 @@ export default function Home() {
                   {t('hero.cta.askAI')}
                 </Button>
               </Box>
-            </Grid>
+            </Box>
-            <Grid item xs={12} md={4}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 40%' } }}>
               <Box sx={{ textAlign: 'center' }}>
                 <MenuBook sx={{ fontSize: 120, opacity: 0.8 }} />
               </Box>
-            </Grid>
+            </Box>
-          </Grid>
+          </Box>
         </Container>
       </Box>
 
@@ -137,9 +136,9 @@ export default function Home() {
           {t('features.subtitle')}
         </Typography>
 
-        <Grid container spacing={4} justifyContent="center">
+        <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'center' }}>
           {features.map((feature, index) => (
-            <Grid item xs={12} md={6} key={index} sx={{ display: 'flex', justifyContent: 'center' }}>
+            <Box key={index} sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 16px)' }, display: 'flex', justifyContent: 'center' }}>
               <Card
                 sx={{
                   height: '100%',
@@ -195,34 +194,34 @@ export default function Home() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
           ))}
-        </Grid>
+        </Box>
       </Container>
 
       {/* Stats Section */}
       <Paper sx={{ bgcolor: 'background.paper', py: 6, mb: 8 }}>
         <Container maxWidth="lg">
-          <Grid container spacing={4} textAlign="center" justifyContent="center">
+          <Box sx={{ display: 'flex', gap: 4, flexWrap: 'wrap', textAlign: 'center', justifyContent: 'center' }}>
-            <Grid item xs={12} sm={4}>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
               <Typography variant="h3" color="primary.main" gutterBottom>
                 66
               </Typography>
               <Typography variant="h6">{t('stats.books')}</Typography>
-            </Grid>
+            </Box>
-            <Grid item xs={12} sm={4}>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
               <Typography variant="h3" color="secondary.main" gutterBottom>
                 31,000+
               </Typography>
               <Typography variant="h6">{t('stats.verses')}</Typography>
-            </Grid>
+            </Box>
-            <Grid item xs={12} sm={4}>
+            <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 calc(33.33% - 24px)' } }}>
               <Typography variant="h3" color="success.main" gutterBottom>
                 24/7
               </Typography>
               <Typography variant="h6">{t('stats.aiAvailable')}</Typography>
-            </Grid>
+            </Box>
-          </Grid>
+          </Box>
         </Container>
       </Paper>
 

app/[locale]/profile/page.tsx

@@ -12,7 +12,6 @@ import {
   TextField,
   Button,
   Avatar,
-  Grid,
   Card,
   CardContent,
   Divider,
@@ -117,9 +116,9 @@ export default function ProfilePage() {
           <Divider sx={{ mb: 4 }} />
 
           {/* Profile Information */}
-          <Grid container spacing={3}>
+          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
             {/* Personal Information Card */}
-            <Grid item xs={12} md={8}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(66.67% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" justifyContent="space-between" alignItems="center" mb={3}>
@@ -189,10 +188,10 @@ export default function ProfilePage() {
                   )}
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
 
             {/* Account Details Card */}
-            <Grid item xs={12} md={4}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(33.33% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Typography variant="h6" component="h2" gutterBottom>
@@ -221,8 +220,8 @@ export default function ProfilePage() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
-          </Grid>
+          </Box>
 
           {/* Success/Error Message */}
           {message && (

app/[locale]/search/page.tsx

@@ -13,7 +13,6 @@ import {
   Paper,
   Card,
   CardContent,
-  Grid,
   Chip,
   List,
   ListItem,
@@ -654,8 +653,10 @@ export default function SearchPage() {
         {/* Advanced Filters */}
         <Collapse in={filtersOpen}>
           <Paper elevation={2} sx={{ p: 3, mb: 4, borderRadius: 2 }}>
-            <Grid container spacing={3}>
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
-              <Grid item xs={12} sm={6} md={3}>
+              {/* First row of filters */}
+              <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
+                <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 auto' }, minWidth: { md: 200 } }}>
                   <FormControl fullWidth size="small">
                     <InputLabel>{t('filters.version')}</InputLabel>
                     <Select
@@ -670,9 +671,9 @@ export default function SearchPage() {
                       ))}
                     </Select>
                   </FormControl>
-              </Grid>
+                </Box>
 
-              <Grid item xs={12} sm={6} md={3}>
+                <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 auto' }, minWidth: { md: 200 } }}>
                   <FormControl fullWidth size="small">
                     <InputLabel>Sort by</InputLabel>
                     <Select
@@ -685,9 +686,9 @@ export default function SearchPage() {
                       <MenuItem value="reference">Reference</MenuItem>
                     </Select>
                   </FormControl>
-              </Grid>
+                </Box>
 
-              <Grid item xs={12} sm={6} md={3}>
+                <Box sx={{ flex: { xs: '1 1 100%', sm: '1 1 45%', md: '1 1 auto' }, display: 'flex', alignItems: 'center' }}>
                   <FormControlLabel
                     control={
                       <Checkbox
@@ -697,9 +698,11 @@ export default function SearchPage() {
                     }
                     label="Show context"
                   />
-              </Grid>
+                </Box>
+              </Box>
 
-              <Grid item xs={12}>
+              {/* Popular searches */}
+              <Box>
                 <Typography variant="subtitle2" gutterBottom>
                   {t('popular.title')}
                 </Typography>
@@ -718,9 +721,10 @@ export default function SearchPage() {
                     />
                   ))}
                 </Box>
-              </Grid>
+              </Box>
 
-              <Grid item xs={12}>
+              {/* Book selection */}
+              <Box>
                 <Typography variant="subtitle2" gutterBottom>
                   {t('filters.specificBooks')}
                 </Typography>
@@ -742,14 +746,14 @@ export default function SearchPage() {
                     />
                   ))}
                 </Box>
-              </Grid>
+              </Box>
-            </Grid>
+            </Box>
           </Paper>
         </Collapse>
 
-        <Grid container spacing={4}>
+        <Box sx={{ display: 'flex', gap: 4, flexDirection: { xs: 'column', md: 'row' } }}>
           {/* Sidebar */}
-          <Grid item xs={12} md={3}>
+          <Box sx={{ width: { xs: '100%', md: '25%' }, flexShrink: 0 }}>
             {/* Search History */}
             {searchHistory.length > 0 && (
               <Card sx={{ mb: 3 }}>
@@ -776,10 +780,10 @@ export default function SearchPage() {
               </Card>
             )}
 
-          </Grid>
+          </Box>
 
           {/* Main Results */}
-          <Grid item xs={12} md={9}>
+          <Box sx={{ flex: 1, width: { xs: '100%', md: '75%' } }}>
             <Box ref={resultsRef}>
               {/* Results Header */}
               {(results.length > 0 || loading) && (
@@ -959,8 +963,8 @@ export default function SearchPage() {
                 </Paper>
               )}
             </Box>
-          </Grid>
+          </Box>
-        </Grid>
+        </Box>
 
         {/* Scroll to Top */}
         {results.length > 5 && (

app/[locale]/settings/page.tsx

@@ -15,7 +15,6 @@ import {
   MenuItem,
   FormControl,
   InputLabel,
-  Grid,
   Card,
   CardContent,
   Divider,
@@ -79,9 +78,9 @@ export default function SettingsPage() {
 
           <Divider sx={{ mb: 4 }} />
 
-          <Grid container spacing={3}>
+          <Box sx={{ display: 'flex', gap: 3, flexWrap: 'wrap' }}>
             {/* Appearance Settings */}
-            <Grid item xs={12} md={6}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" alignItems="center" mb={3}>
@@ -123,10 +122,10 @@ export default function SettingsPage() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
 
             {/* Language & Notifications */}
-            <Grid item xs={12} md={6}>
+            <Box sx={{ flex: { xs: '1 1 100%', md: '1 1 calc(50% - 12px)' } }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" alignItems="center" mb={3}>
@@ -175,10 +174,10 @@ export default function SettingsPage() {
                   </Box>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
 
             {/* Security Settings */}
-            <Grid item xs={12}>
+            <Box sx={{ flex: '1 1 100%' }}>
               <Card variant="outlined">
                 <CardContent>
                   <Box display="flex" alignItems="center" mb={3}>
@@ -197,8 +196,8 @@ export default function SettingsPage() {
                   </Button>
                 </CardContent>
               </Card>
-            </Grid>
+            </Box>
-          </Grid>
+          </Box>
 
           {/* Save Button */}
           <Box textAlign="center" mt={4}>