Index: pages/completed-builds/+Page.tsx
===================================================================
--- pages/completed-builds/+Page.tsx	(revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
+++ pages/completed-builds/+Page.tsx	(revision c586cbdaba421799f528cc117955c0b3ad697da2)
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import {
-    Container, Grid, Box, Typography, TextField, MenuItem, Select,
-    Slider, Button, Paper, InputAdornment
+    Container, Box, Typography, TextField, MenuItem, Select,
+    Slider, Button, Paper, InputAdornment, CircularProgress
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
@@ -9,5 +9,4 @@
 import BuildCard from '../../components/BuildCard';
 import BuildDetailsDialog from '../../components/BuildDetailsDialog';
-
 import { onGetApprovedBuilds, onCloneBuild, onGetAuthState } from '../+Layout.telefunc';
 
@@ -27,5 +26,5 @@
             const [userData, data] = await Promise.all([
                 onGetAuthState(),
-                onGetApprovedBuilds({ q: searchQuery })
+                onGetApprovedBuilds({q: searchQuery})
             ]);
             setUserId(userData.userId);
@@ -58,4 +57,6 @@
 
             setBuilds(sortedData);
+        } catch (e) {
+            console.error("Failed to load builds", e);
         } finally {
             setLoading(false);
@@ -65,8 +66,4 @@
     useEffect(() => {
         loadBuilds();
-    }, [sortBy, priceRange, searchQuery]);
-
-    useEffect(() => {
-        loadBuilds();
     }, [sortBy, searchQuery]);
 
@@ -74,5 +71,5 @@
         if (!userId) return alert("Please login to clone builds!");
         if (confirm(`Clone this build?`)) {
-            await onCloneBuild({ buildId });
+            await onCloneBuild({buildId});
             alert("Build cloned!");
             setSelectedBuildId(null);
@@ -81,5 +78,5 @@
 
     return (
-        <Container maxWidth="xl" sx={{ mt: 4, mb: 10 }}>
+        <Container maxWidth={false} sx={{ mt: 4, mb: 10, px: { xs: 2, md: 4 } }}>
             <Typography variant="h4" fontWeight="bold" gutterBottom>Completed Builds</Typography>
             <Typography color="text.secondary" sx={{ mb: 4 }}>
@@ -87,6 +84,10 @@
             </Typography>
 
-            <Grid container spacing={4}>
-                <Grid item xs={12} md={3}>
+            <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 4 }}>
+
+                <Box sx={{
+                    width: { xs: '100%', md: '280px' },
+                    flexShrink: 0
+                }}>
                     <Paper variant="outlined" sx={{ p: 3, position: 'sticky', top: 20 }}>
                         <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
@@ -127,8 +128,7 @@
                         </Button>
                     </Paper>
-                </Grid>
-
-                <Grid item xs={12} md={9}>
-                    {/* Toolbar */}
+                </Box>
+
+                <Box sx={{ flexGrow: 1 }}>
                     <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
                         <Typography fontWeight="bold">{builds.length} Builds Found</Typography>
@@ -152,29 +152,40 @@
 
                     {loading ? (
-                        <Box sx={{ p: 5, textAlign: 'center' }}>Loading...</Box>
+                        <Box sx={{ p: 5, textAlign: 'center' }}>
+                            <CircularProgress />
+                        </Box>
                     ) : (
-                        <Grid container spacing={3}>
+                        <Box
+                            sx={{
+                                display: 'grid',
+                                gridTemplateColumns: {
+                                    xs: '1fr',
+                                    sm: 'repeat(2, 1fr)',
+                                    md: 'repeat(3, 1fr)',
+                                    lg: 'repeat(4, 1fr)',
+                                    xl: 'repeat(5, 1fr)'
+                                },
+                                gap: 3,
+                                width: '100%'
+                            }}
+                        >
                             {builds.map((build) => (
-                                <Grid item xs={12} sm={6} lg={4} key={build.id} sx={{ display: 'flex' }}>
-                                    <Box sx={{ width: '100%' }}>
-                                        <BuildCard
-                                            build={build}
-                                            onClick={() => setSelectedBuildId(build.id)}
-                                        />
-                                    </Box>
-                                </Grid>
+                                <BuildCard
+                                    key={build.id}
+                                    build={build}
+                                    onClick={() => setSelectedBuildId(build.id)}
+                                />
                             ))}
                             {builds.length === 0 && (
-                                <Grid item xs={12}>
-                                    <Box sx={{ p: 5, textAlign: 'center', bgcolor: '#f5f5f5', borderRadius: 2 }}>
-                                        <Typography>No builds found matching your filters.</Typography>
-                                    </Box>
-                                </Grid>
+                                <Box sx={{ gridColumn: '1 / -1', p: 5, textAlign: 'center', bgcolor: '#f5f5f5', borderRadius: 2 }}>
+                                    <Typography>No builds found matching your filters.</Typography>
+                                </Box>
                             )}
-                        </Grid>
+                        </Box>
                     )}
-                </Grid>
-            </Grid>
-
+                </Box>
+            </Box>
+
+            {/* @ts-ignore */}
             <BuildDetailsDialog
                 open={!!selectedBuildId}
@@ -186,4 +197,4 @@
         </Container>
     );
+
 }
-