Index: pages/completed-builds/+Page.tsx
===================================================================
--- pages/completed-builds/+Page.tsx	(revision 03722c9fc18542af1af6437a9236b2504b8b8eee)
+++ pages/completed-builds/+Page.tsx	(revision e59934102328e450fe4616d5fb36f9d29e5b0ab2)
@@ -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>
     );
+
 }
-
Index: pages/dashboard/user/+Page.tsx
===================================================================
--- pages/dashboard/user/+Page.tsx	(revision 03722c9fc18542af1af6437a9236b2504b8b8eee)
+++ pages/dashboard/user/+Page.tsx	(revision e59934102328e450fe4616d5fb36f9d29e5b0ab2)
@@ -9,11 +9,11 @@
     Button,
     CircularProgress,
-    Card,
-    CardContent,
-    CardActionArea,
-    IconButton
+    IconButton,
+    Grid,
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions
 } from '@mui/material';
-import Grid from '@mui/material/Grid';
-import {Dialog, DialogTitle, DialogContent, DialogActions} from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 
@@ -21,8 +21,10 @@
 import ComputerIcon from '@mui/icons-material/Computer';
 import FavoriteIcon from '@mui/icons-material/Favorite';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
 
 import {getUserInfoAndData, onDeleteBuild} from "./userDashboard.telefunc";
+import {onCloneBuild} from "../../+Layout.telefunc";
+
+import BuildCard from "../../../components/BuildCard";
+import BuildDetailsDialog from "../../../components/BuildDetailsDialog";
 
 type DashboardData = {
@@ -36,5 +38,9 @@
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
+
     const [openMyBuildsDialog, setOpenMyBuildsDialog] = useState(false);
+    const [openFavoritesDialog, setOpenFavoritesDialog] = useState(false);
+
+    const [selectedBuildId, setSelectedBuildId] = useState<number | null>(null);
 
     const loadData = () => {
@@ -60,4 +66,5 @@
             await onDeleteBuild({buildId});
             loadData();
+            setSelectedBuildId(null);
         } catch (e) {
             alert("Failed to delete build");
@@ -65,14 +72,23 @@
     };
 
+    const handleCloneWrapper = async (buildId: number) => {
+        if (!data?.user) return alert("Please login to clone builds!");
+        if (confirm(`Clone this build to your dashboard?`)) {
+            await onCloneBuild({buildId});
+            alert("Build cloned! Check your dashboard.");
+            setSelectedBuildId(null);
+            loadData();
+        }
+    };
+
     if (loading) return <Box sx={{display: 'flex', justifyContent: 'center', mt: 10}}><CircularProgress/></Box>;
     if (error || !data) return <Container sx={{mt: 5, textAlign: 'center'}}><Typography color="error"
                                                                                         variant="h6">{error}</Typography><Button
         href="/auth/login" variant="contained">Login</Button></Container>;
-
-    // @ts-ignore
+    // console.log("Current User ID passed to dialog:", data?.user?.id);
+
     return (
         <Container maxWidth="xl" sx={{mt: 4, mb: 4, color: 'white'}}>
             <Grid container spacing={3}>
-
                 <Grid item xs={12} md={3}>
                     <Paper elevation={3}
@@ -83,5 +99,4 @@
                         <Typography variant="body2" color="text.secondary" gutterBottom>{data.user.email}</Typography>
                         <Divider sx={{width: '100%', my: 2}}/>
-                        {/*<Button variant="outlined" fullWidth color="primary" sx={{mb: 1}}>Edit Profile</Button>*/}
                     </Paper>
                 </Grid>
@@ -92,7 +107,24 @@
                         <Grid item xs={12}>
                             <Paper elevation={3} sx={{p: 3, minHeight: '300px', bgcolor: '#1e1e1e'}}>
-                                <Box sx={{display: 'flex', alignItems: 'center', mb: 2}}>
-                                    <FavoriteIcon color="error" sx={{mr: 1}}/>
-                                    <Typography variant="h6" fontWeight="bold">Favorited Builds</Typography>
+                                <Box sx={{
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'space-between',
+                                    mb: 2
+                                }}>
+                                    <Box sx={{display: 'flex', alignItems: 'center'}}>
+                                        <FavoriteIcon color="error" sx={{mr: 1}}/>
+                                        <Typography variant="h6" fontWeight="bold">Favorited Builds</Typography>
+                                    </Box>
+
+                                    {data.favoriteBuilds.length > 4 && (
+                                        <Button
+                                            variant="outlined"
+                                            size="small"
+                                            onClick={() => setOpenFavoritesDialog(true)}
+                                        >
+                                            See All ({data.favoriteBuilds.length})
+                                        </Button>
+                                    )}
                                 </Box>
                                 <Divider sx={{mb: 2}}/>
@@ -103,7 +135,10 @@
                                 ) : (
                                     <Grid container spacing={2}>
-                                        {data.favoriteBuilds.map((build: any) => (
+                                        {data.favoriteBuilds.slice(0, 4).map((build: any) => (
                                             <Grid item xs={12} sm={6} md={4} key={build.id}>
-                                                <BuildCard build={build}/>
+                                                <BuildCard
+                                                    build={build}
+                                                    onClick={() => setSelectedBuildId(build.id)}
+                                                />
                                             </Grid>
                                         ))}
@@ -148,10 +183,9 @@
                                 ) : (
                                     <Grid container spacing={2}>
-                                        {data.userBuilds.slice(0, 3).map((build: any) => (
-                                            <Grid item xs={12} sm={6} md={3} key={build.id}>
+                                        {data.userBuilds.slice(0, 4).map((build: any) => (
+                                            <Grid item xs={12} sm={6} md={4} key={build.id}>
                                                 <BuildCard
                                                     build={build}
-                                                    onDelete={() => handleDelete(build.id)}
-                                                    isOwner={true}
+                                                    onClick={() => setSelectedBuildId(build.id)}
                                                 />
                                             </Grid>
@@ -162,8 +196,8 @@
                         </Grid>
 
-                        <Dialog open={openMyBuildsDialog} onClose={() => setOpenMyBuildsDialog(false)} maxWidth="md"
+                        <Dialog open={openMyBuildsDialog} onClose={() => setOpenMyBuildsDialog(false)} maxWidth="lg"
                                 fullWidth>
-                            <DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>All
-                                My Builds
+                            <DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+                                All My Builds
                                 <IconButton onClick={() => setOpenMyBuildsDialog(false)}>
                                     <CloseIcon/>
@@ -176,6 +210,8 @@
                                             <BuildCard
                                                 build={build}
-                                                onDelete={() => handleDelete(build.id)}
-                                                isOwner={true}
+                                                onClick={() => {
+                                                    setOpenMyBuildsDialog(false);
+                                                    setSelectedBuildId(build.id);
+                                                }}
                                             />
                                         </Grid>
@@ -183,5 +219,4 @@
                                 </Grid>
                             </DialogContent>
-
                             <DialogActions>
                                 <Button onClick={() => setOpenMyBuildsDialog(false)}>Close</Button>
@@ -189,36 +224,47 @@
                         </Dialog>
 
+                        <Dialog open={openFavoritesDialog} onClose={() => setOpenFavoritesDialog(false)} maxWidth="lg"
+                                fullWidth>
+                            <DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
+                                All Favorited Builds
+                                <IconButton onClick={() => setOpenFavoritesDialog(false)}>
+                                    <CloseIcon/>
+                                </IconButton>
+                            </DialogTitle>
+                            <DialogContent dividers>
+                                <Grid container spacing={2} sx={{mt: 1}}>
+                                    {data.favoriteBuilds.map((build: any) => (
+                                        <Grid item xs={12} sm={6} md={4} key={build.id}>
+                                            <BuildCard
+                                                build={build}
+                                                onClick={() => {
+                                                    setOpenFavoritesDialog(false);
+                                                    setSelectedBuildId(build.id);
+                                                }}
+                                            />
+                                        </Grid>
+                                    ))}
+                                </Grid>
+                            </DialogContent>
+                            <DialogActions>
+                                <Button onClick={() => setOpenFavoritesDialog(false)}>Close</Button>
+                            </DialogActions>
+                        </Dialog>
+
                     </Grid>
                 </Grid>
             </Grid>
+
+            <BuildDetailsDialog
+                open={!!selectedBuildId}
+                buildId={selectedBuildId}
+                currentUser={data?.user?.id ? Number(data.user.id) : undefined}
+                onClose={() => {
+                    setSelectedBuildId(null);
+                    loadData();
+                }}
+                onClone={handleCloneWrapper}
+            />
         </Container>
     );
 }
-
-function BuildCard({build, onDelete, isOwner}: { build: any, onDelete?: () => void, isOwner?: boolean }) {
-    return (
-        <Card sx={{height: '100%', display: 'flex', flexDirection: 'column'}}>
-            <CardActionArea href={`/build/${build.id}`} sx={{flexGrow: 1}}>
-                <CardContent>
-                    <Typography variant="subtitle1" fontWeight="bold" noWrap>
-                        {build.name || `Build #${build.id}`}
-                    </Typography>
-                    <Typography variant="body2" color="text.secondary">
-                        Created: {build.createdAt ? new Date(build.createdAt).toLocaleDateString() : 'Unknown'}
-                    </Typography>
-                </CardContent>
-            </CardActionArea>
-
-            {isOwner && (
-                <Box sx={{display: 'flex', justifyContent: 'flex-end', p: 1, borderTop: '1px solid #eee'}}>
-                    <IconButton size="small" href={`/build/edit/${build.id}`} color="primary">
-                        <EditIcon fontSize="small"/>
-                    </IconButton>
-                    <IconButton size="small" onClick={onDelete} color="error">
-                        <DeleteIcon fontSize="small"/>
-                    </IconButton>
-                </Box>
-            )}
-        </Card>
-    );
-}
Index: pages/index/+Page.tsx
===================================================================
--- pages/index/+Page.tsx	(revision 03722c9fc18542af1af6437a9236b2504b8b8eee)
+++ pages/index/+Page.tsx	(revision e59934102328e450fe4616d5fb36f9d29e5b0ab2)
@@ -14,7 +14,7 @@
 export default function HomePage() {
     const [data, setData] = useState<any>(null);
+    const [allRanked, setAllRanked] = useState<any[]>([]);
 
     const [selectedBuildId, setSelectedBuildId] = useState<number | null>(null);
-
     const [openRankedPopup, setOpenRankedPopup] = useState(false);
 
@@ -23,9 +23,13 @@
             try {
                 const [
-                    authData, highestRankedBuilds, communityBuilds
+                    authData,
+                    highestRankedBuilds,
+                    communityBuilds,
+                    fullRankedList
                 ] = await Promise.all([
                     onGetAuthState(),
-                    onGetApprovedBuilds({ limit: 3 , sort: 'rating_desc' }),
-                    onGetApprovedBuilds({ limit: 12 })
+                    onGetApprovedBuilds({ limit: 5 , sort: 'rating_desc' }),
+                    onGetApprovedBuilds({ limit: 12 }),
+                    onGetApprovedBuilds({ limit: 10, sort: 'rating_desc' })
                 ]);
 
@@ -36,4 +40,5 @@
                     communityBuilds: communityBuilds
                 });
+                setAllRanked(fullRankedList);
             } catch (error) {
                 console.error("Error loading homepage data:", error);
@@ -69,5 +74,5 @@
                         Build, share, discuss, and discover custom PC configurations.
                     </Typography>
-                    <Button variant="contained" size="large" href="/forger" startIcon={<AutoFixHighIcon />}
+                    <Button variant="contained" size="large" href="/forge" startIcon={<AutoFixHighIcon />}
                             sx={{ fontSize: '1.2rem', px: 4, py: 1.5, mt: 2 }}>
                         Start Forging
@@ -92,15 +97,5 @@
                 </Box>
 
-                <Grid container spacing={2} sx={{ mb: 8, alignItems: 'stretch' }}>
-                    {/*<Grid item xs={12} md={3} sx={{ display: 'flex' }}>*/}
-                    {/*    <Box sx={{*/}
-                    {/*        width: '100%', p: 3, bgcolor: '#ff8201', color: 'black', borderRadius: 2,*/}
-                    {/*        display: 'flex', flexDirection: 'column', justifyContent: 'center'*/}
-                    {/*    }}>*/}
-                    {/*        <Typography color={'black'} variant="h5" fontWeight="bold" gutterBottom>The Elite</Typography>*/}
-                    {/*        <Typography variant="body1" fontWeight="bold">The top 3 community-voted builds.</Typography>*/}
-                    {/*    </Box>*/}
-                    {/*</Grid>*/}
-
+                <Grid container spacing={3} sx={{ mb: 8, alignItems: 'stretch' }}>
                     {data.prebuilts.slice(0, 3).map((build: any) => (
                         <Grid item xs={12} sm={6} md={3} key={build.id} sx={{ display: 'flex' }}>
@@ -114,5 +109,4 @@
                     ))}
                 </Grid>
-
 
                 <SectionHeader title="Community Forge" subtitle="Fresh builds from users around the world."/>
@@ -133,5 +127,4 @@
             </Container>
 
-
             <BuildDetailsDialog
                 open={!!selectedBuildId}
@@ -142,21 +135,30 @@
             />
 
-
-            <Dialog open={openRankedPopup} onClose={() => setOpenRankedPopup(false)} maxWidth="lg" fullWidth>
+            <Dialog open={openRankedPopup} onClose={() => setOpenRankedPopup(false)} maxWidth="lg" fullWidth scroll="paper">
                 <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                    Hall of Fame (All Top Ranked)
+                    Hall of Fame (Top Rated)
                     <IconButton onClick={() => setOpenRankedPopup(false)}><CloseIcon /></IconButton>
                 </DialogTitle>
                 <DialogContent dividers>
                     <Grid container spacing={3}>
-                        {data.prebuilts.concat(data.communityBuilds).map((build: any) => (
-                            <Grid item xs={12} sm={6} md={3} key={`popup-${build.id}`}>
-                                <BuildCard
-                                    build={build}
-                                    onClick={() => {
-                                        setOpenRankedPopup(false);
-                                        setSelectedBuildId(build.id); // Open details from popup
-                                    }}
-                                />
+                        {allRanked.map((build: any, index: number) => (
+                            <Grid item xs={12} sm={6} md={3} key={`ranked-${build.id}`}>
+                                <Box sx={{ position: 'relative' }}>
+                                    <Box sx={{
+                                        position: 'absolute', top: -10, left: -10, zIndex: 1,
+                                        width: 30, height: 30, borderRadius: '50%',
+                                        bgcolor: index < 3 ? '#ff8201' : 'grey.700', color: 'white',
+                                        display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 'bold'
+                                    }}>
+                                        #{index + 1}
+                                    </Box>
+                                    <BuildCard
+                                        build={build}
+                                        onClick={() => {
+                                            setOpenRankedPopup(false);
+                                            setSelectedBuildId(build.id);
+                                        }}
+                                    />
+                                </Box>
                             </Grid>
                         ))}
@@ -171,5 +173,5 @@
 function SectionHeader({ title, subtitle }: { title: string, subtitle: string }) {
     return (
-        <Box sx={{ mb: 4, borderLeft: '5px solid #1976d2', pl: 2 }}>
+        <Box sx={{ mb: 4, borderLeft: '5px solid #ff8201', pl: 2 }}>
             <Typography variant="h4" fontWeight="bold" color="text.primary">{title}</Typography>
             <Typography variant="subtitle1" color="text.secondary">{subtitle}</Typography>