diff --git a/src_generic/components/EnhancedTable.tsx b/src_generic/components/EnhancedTable.tsx
index 754a1d8..ee1e158 100644
--- a/src_generic/components/EnhancedTable.tsx
+++ b/src_generic/components/EnhancedTable.tsx
@@ -131,9 +131,9 @@ export default function EnhancedTable({
             Add
           </Button>
         </Box>
-        <Grid container spacing={2}>
+        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
           {data.map((row) => (
-            <Grid item xs={12} key={row[config.primaryKey] || Math.random()}>
+            <Box key={row[config.primaryKey] || Math.random()}>
               <MobileCardRow 
                 row={row} 
                 config={config} 
@@ -142,9 +142,9 @@ export default function EnhancedTable({
                 onNavigate={onNavigateToResource}
                 navigate={navigate}
               />
-            </Grid>
+            </Box>
           ))}
-        </Grid>
+        </Box>
       </Box>
     );
   }
@@ -228,18 +228,18 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
                     </Menu>
                 </Box>
                 <Divider sx={{ mb: 2 }} />
-                <Grid container spacing={1}>
+                <Box sx={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 2 }}>
                     {Object.entries(config.fields).slice(0, 5).map(([key, field]: [string, any]) => (
-                        <Grid item xs={6} key={key}>
+                        <Box key={key}>
                             <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
                                 {field.label}
                             </Typography>
                             <Typography variant="body2" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
                                 <FieldRenderer params={{ value: row[key], row }} field={field} fieldKey={key} config={config} onNavigate={onNavigate} navigate={navigate} isMobile />
                             </Typography>
-                        </Grid>
+                        </Box>
                     ))}
-                </Grid>
+                </Box>
             </CardContent>
             <CardActions sx={{ justifyContent: 'flex-end', px: 2, pb: 2 }}>
                  <Button size="small" onClick={() => navigate(`/${config.name}/${id}`)}>View Details</Button>