Index: pages/dashboard/admin/+Page.tsx
===================================================================
--- pages/dashboard/admin/+Page.tsx	(revision d69e08854cf6669b7a3fd01c8332a21a98051ffc)
+++ pages/dashboard/admin/+Page.tsx	(revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2)
@@ -49,5 +49,5 @@
     const openSuggestionReview = (id: number, action: 'approved' | 'rejected') => {
         setSuggestionDialog({ open: true, id, action });
-        setAdminComment(action === 'approved' ? "Approved by admin." : "Rejected: ");
+        setAdminComment(action === 'approved' ? "" : "");
     };
 
@@ -123,5 +123,5 @@
                                                         </a>
                                                     </TableCell>
-                                                    <TableCell>{sug.componentType}</TableCell>
+                                                    <TableCell>{sug.componentType.toUpperCase()}</TableCell>
                                                     <TableCell>{sug.userId}</TableCell>
                                                     <TableCell align="right">
@@ -207,5 +207,5 @@
 
             <Dialog open={suggestionDialog.open} onClose={() => setSuggestionDialog({...suggestionDialog, open: false})}>
-                <DialogTitle>Review Suggestion</DialogTitle>
+                <DialogTitle>Review Component Suggestion</DialogTitle>
                 <DialogContent>
                     <Typography gutterBottom>Status: <b>{suggestionDialog.action.toUpperCase()}</b></Typography>
Index: pages/forge/+Page.tsx
===================================================================
--- pages/forge/+Page.tsx	(revision d69e08854cf6669b7a3fd01c8332a21a98051ffc)
+++ pages/forge/+Page.tsx	(revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2)
@@ -1,5 +1,471 @@
-export default function ForgePage(){
+import React, {useState, useEffect, useMemo} from 'react';
+import {
+    Container, Paper, Typography, Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
+    Button, IconButton, Avatar, TextField, Grid, Chip, CircularProgress,
+    Menu, MenuItem, ListItemIcon
+} from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
+import CloseIcon from "@mui/icons-material/Close";
+import AlbumIcon from "@mui/icons-material/Album";
+import CableIcon from "@mui/icons-material/Cable";
+import RouterIcon from "@mui/icons-material/Router";
+import MemoryIcon from "@mui/icons-material/Memory";
+
+import {
+    saveBuildState,
+    onAddComponentToBuild,
+    onRemoveComponentFromBuild,
+    onDeleteBuild,
+    onGetBuildState, onGetBuildComponents
+} from './forge.telefunc';
+
+import ComponentDialog from '../../components/ComponentDialog';
+import ComponentDetailsDialog from '../../components/ComponentDetailsDialog';
+import {onAddNewBuild, onGetComponentDetails} from "../+Layout.telefunc";
+import {onEditBuild} from "../dashboard/user/userDashboard.telefunc";
+
+type BuildSlot = {
+    id: string;
+    type: string;
+    label: string;
+    component: any | null;
+    required: boolean;
+};
+
+const INITIAL_SLOTS: BuildSlot[] = [
+    {id: 'cpu', type: 'cpu', label: 'CPU', component: null, required: true},
+    {id: 'cooler', type: 'cooler', label: 'CPU Cooler', component: null, required: true},
+    {id: 'motherboard', type: 'motherboard', label: 'Motherboard', component: null, required: true},
+    {id: 'memory_1', type: 'memory', label: 'Memory', component: null, required: true},
+    {id: 'gpu', type: 'gpu', label: 'Video Card', component: null, required: true},
+    {id: 'storage_1', type: 'storage', label: 'Storage', component: null, required: true},
+    {id: 'powersupply', type: 'power_supply', label: 'Power Supply', component: null, required: true},
+    {id: 'case', type: 'case', label: 'Case', component: null, required: true},
+];
+
+export default function ForgePage() {
+    const [slots, setSlots] = useState<BuildSlot[]>(INITIAL_SLOTS);
+    const [buildId, setBuildId] = useState<number | null>(null);
+    const [buildName, setBuildName] = useState("");
+    const [description, setDescription] = useState("");
+    const [totalPrice, setTotalPrice] = useState(0);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const [browserOpen, setBrowserOpen] = useState(false);
+    const [activeSlotId, setActiveSlotId] = useState<string | null>(null);
+    const [detailsOpen, setDetailsOpen] = useState<any>(null);
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const isSubmittedRef = React.useRef(false);
+
+    useEffect(() => {
+        const price = slots.reduce((sum, slot) => sum + (Number(slot.component?.price) || 0), 0);
+        setTotalPrice(price);
+    }, [slots]);
+
+    useEffect(() => {
+        if (!buildId) return;
+
+        const handleBeforeUnload = () => {
+            if (!isSubmittedRef.current) {
+                onDeleteBuild({buildId}).catch(() => {
+                });
+            }
+        };
+
+        window.addEventListener('beforeunload', handleBeforeUnload);
+
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+            if (!isSubmittedRef.current) {
+                onDeleteBuild({buildId}).catch(() => {
+                });
+            }
+        };
+    }, [buildId]);
+
+    useEffect(() => {
+        const urlParams = new URLSearchParams(window.location.search);
+        const urlBuildId = urlParams.get('buildId');
+
+        if (urlBuildId && Number.isInteger(Number(urlBuildId)) && Number(urlBuildId) > 0) {
+            const loadBuildId = Number(urlBuildId);
+            onGetBuildComponents({ buildId: loadBuildId })
+                .then(async (components) => {
+                    if (components && components.length > 0) {
+                        setBuildId(loadBuildId);
+                        setBuildName("Cloned Build");
+                        setDescription("");
+
+                        const detailedComponents = await Promise.all(
+                            components.map(async (c: any) => {
+                                const full = await onGetComponentDetails({ componentId: c.id }).catch(() => null);
+                                return full ? { ...c, ...full, details: full?.details } : c;
+                            })
+                        );
+
+                        const componentMap = new Map();
+                        detailedComponents.forEach((c: any) => componentMap.set(c.type, c));
+
+                        setSlots(prevSlots => prevSlots.map(slot => {
+                            const match = componentMap.get(slot.type);
+                            return match ? { ...slot, component: match } : slot;
+                        }));
+
+                        window.history.replaceState({}, document.title, "/forge");
+                    }
+                })
+                .catch(() => {});
+        }
+    }, []);
+
+    const handlePickPart = (slotId: string) => {
+        setActiveSlotId(slotId);
+        setTimeout(() => setBrowserOpen(true), 0);
+    };
+
+    const handleSelectComponent = async (component: any) => {
+        if (!activeSlotId) return;
+
+        try {
+            let id = buildId;
+            if (!id) {
+                const result = await onAddNewBuild({name: "Draft Build", description: "Work in progress"});
+                id = typeof result === 'number' ? result : (result as any)?.buildId;
+                if (!id || !Number.isInteger(id) || id <= 0) {
+                    alert("Failed to create draft build.");
+                    return;
+                }
+                setBuildId(id);
+            }
+
+            const full = await onGetComponentDetails({componentId: component.id}).catch(() => null);
+            const merged = full ? {...component, ...full, details: full.details} : component;
+
+            setSlots(prev => prev.map(slot =>
+                slot.id === activeSlotId ? {...slot, component: merged} : slot
+            ));
+            setBrowserOpen(false);
+
+            await onAddComponentToBuild({buildId: id, componentId: component.id});
+        } catch (e) {
+            // console.error("Failed to add component to server build", e);
+            alert("Failed to add component. Please try again.");
+        } finally {
+            setActiveSlotId(null);
+        }
+    };
+
+    const handleRemovePart = async (slotId: string) => {
+        const slot = slots.find(s => s.id === slotId);
+        if (!slot?.component || !buildId) return;
+
+        setSlots(prev => prev.map(s =>
+            s.id === slotId ? {...s, component: null} : s
+        ));
+
+        try {
+            await onRemoveComponentFromBuild({
+                buildId,
+                componentId: slot.component.id
+            });
+        } catch (e) {
+            console.error("Failed to remove component from server", e);
+        }
+    };
+
+    const handleAddSlot = (type: string, label: string) => {
+        const count = slots.filter(s => s.type === type).length;
+        const newSlot: BuildSlot = {
+            id: `${type}_${count + 1}`,
+            type,
+            label: `${label} ${count > 0 ? count + 1 : ''}`,
+            component: null,
+            required: false
+        };
+        setSlots(prev => [...prev, newSlot]);
+        setAnchorEl(null);
+    };
+
+    const handleDeleteSlot = (slotId: string) => {
+        const slot = slots.find(s => s.id === slotId);
+        if (slot?.component) {
+            handleRemovePart(slotId);
+        }
+        setSlots(prev => prev.filter(s => s.id !== slotId));
+    };
+
+    const handleSubmit = async () => {
+        if (!buildName.trim()) return alert("Please name your build!");
+        if (!buildId) return alert("You must add at least one component before submitting.");
+
+        setIsSubmitting(true);
+        try {
+            const result = await onEditBuild({buildId});
+
+            if (!result) throw new Error("Failed to save build");
+
+            isSubmittedRef.current = true;
+            window.location.href = "/dashboard/user";
+        } catch (e) {
+            console.error(e);
+            alert("Failed to save build.");
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+
+    const activeSlotType = useMemo(() => {
+        if (!activeSlotId) return null;
+        return slots.find(s => s.id === activeSlotId)?.type || null;
+    }, [slots, activeSlotId]);
+
     return (
-        <h1>Test Forge Page</h1>
-    )
+        <Container maxWidth="xl" sx={{mt: 0, mb: 10}}>
+            <Paper sx={{p: 4, mb: 0, bgcolor: '#ff8201', border: '1px solid #1e1e1e', color: 'white'}}>
+                <Typography variant="h4" align="center" fontWeight="bold">Forge Your Machine</Typography>
+                <Grid container spacing={2} justifyContent="center" sx={{mt: 2}}>
+                    <Grid item xs={12} md={6}>
+                        <TextField
+                            fullWidth
+                            label="Build Name *"
+                            value={buildName}
+                            onChange={e => setBuildName(e.target.value)}
+                            sx={{bgcolor: '#1e1e1e', borderRadius: 1, color: 'white'}}
+                        />
+                    </Grid>
+                </Grid>
+            </Paper>
+
+            <TableContainer component={Paper} elevation={3}>
+                <Table sx={{minWidth: 650}}>
+                    <TableHead sx={{bgcolor: '#1e1e1e'}}>
+                        <TableRow>
+                            <TableCell sx={{color: 'white', fontWeight: 'bold'}}>Component</TableCell>
+                            <TableCell sx={{color: 'white', fontWeight: 'bold'}}>Selection & Specs</TableCell>
+                            <TableCell sx={{color: 'white', fontWeight: 'bold'}}>Price</TableCell>
+                            <TableCell sx={{color: 'white', fontWeight: 'bold'}} align="right">Actions</TableCell>
+                        </TableRow>
+                    </TableHead>
+                    <TableBody>
+                        {slots.map((slot) => (
+                            <TableRow key={slot.id} hover>
+                                <TableCell width="15%" sx={{
+                                    fontWeight: 'bold',
+                                    bgcolor: '#1e1e1e',
+                                    color: 'white',
+                                    verticalAlign: 'top',
+                                    pt: 3,
+                                    borderRight: '1px solid #333'
+                                }}>
+                                    {slot.label}
+                                    {slot.required &&
+                                        <Chip label="Required" size="small" color="error" sx={{ml: 1, height: 20}}/>}
+                                </TableCell>
+
+                                <TableCell>
+                                    {slot.component ? (
+                                        <Box sx={{display: 'flex', gap: 2, alignItems: 'flex-start'}}>
+                                            <Avatar
+                                                variant="rounded"
+                                                src={slot.component.imgUrl || slot.component.img_url}
+                                                sx={{width: 60, height: 60, bgcolor: '#eee'}}
+                                            >
+                                                {slot.component.brand?.[0]}
+                                            </Avatar>
+                                            <Box>
+                                                <Typography
+                                                    variant="subtitle1"
+                                                    fontWeight="bold"
+                                                    sx={{cursor: 'pointer', color: 'primary.main'}}
+                                                    onClick={() => setDetailsOpen(slot.component)}
+                                                >
+                                                    {slot.component.name}
+                                                </Typography>
+                                                <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 1, mt: 0.5}}>
+                                                    {renderSpecs(slot.component, slot.type)}
+                                                </Box>
+                                            </Box>
+                                        </Box>
+                                    ) : (
+                                        <Button
+                                            variant="outlined"
+                                            startIcon={<AddIcon/>}
+                                            onClick={() => handlePickPart(slot.id)}
+                                            sx={{textTransform: 'none', color: '#666', borderColor: '#ccc'}}
+                                        >
+                                            Choose {slot.label}
+                                        </Button>
+                                    )}
+                                </TableCell>
+
+                                <TableCell width="10%" sx={{verticalAlign: 'top', pt: 3}}>
+                                    {slot.component ? `$${Number(slot.component.price).toFixed(2)}` : '-'}
+                                </TableCell>
+
+                                <TableCell align="right" width="10%" sx={{verticalAlign: 'top', pt: 2}}>
+                                    {slot.component && (
+                                        <IconButton color="error" onClick={() => handleRemovePart(slot.id)}>
+                                            <DeleteIcon/>
+                                        </IconButton>
+                                    )}
+                                    {!slot.required && (
+                                        <IconButton color="warning" onClick={() => handleDeleteSlot(slot.id)}>
+                                            <CloseIcon/>
+                                        </IconButton>
+                                    )}
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </TableContainer>
+
+            <Box sx={{mt: 4, display: 'flex', justifyContent: 'center'}}>
+                <Button variant="outlined" startIcon={<AddIcon/>} onClick={(e) => setAnchorEl(e.currentTarget)}
+                        sx={{mr: 2}}>
+                    Add Optional Component
+                </Button>
+                <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={() => setAnchorEl(null)}>
+                    <Typography sx={{px: 2, py: 1, display: 'block', color: 'text.secondary'}}>
+                        Memory & Storage
+                    </Typography>
+                    <MenuItem onClick={() => handleAddSlot('memory', 'Memory')}>
+                        <ListItemIcon><MemoryIcon/></ListItemIcon>
+                        Additional Memory
+                    </MenuItem>
+                    <MenuItem onClick={() => handleAddSlot('storage', 'Storage')}>
+                        <ListItemIcon><AlbumIcon/></ListItemIcon>
+                        Additional Storage
+                    </MenuItem>
+
+                    <Typography sx={{px: 2, py: 1, display: 'block', color: 'text.secondary', mt: 1}}>
+                        Accessories
+                    </Typography>
+                    <MenuItem onClick={() => handleAddSlot('optical_drive', 'Optical Drive')}>
+                        <ListItemIcon><AlbumIcon/></ListItemIcon>
+                        Optical Drive
+                    </MenuItem>
+                    <MenuItem onClick={() => handleAddSlot('cables', 'Cable')}>
+                        <ListItemIcon><CableIcon/></ListItemIcon>
+                        Cables
+                    </MenuItem>
+
+                    <Typography sx={{px: 2, py: 1, display: 'block', color: 'text.secondary', mt: 1}}>
+                        Expansion Cards
+                    </Typography>
+                    <MenuItem onClick={() => handleAddSlot('memory_card', 'Storage Card')}>
+                        <ListItemIcon><MemoryIcon/></ListItemIcon>
+                        Storage Card
+                    </MenuItem>
+                    <MenuItem onClick={() => handleAddSlot('sound_card', 'Sound Card')}>
+                        <ListItemIcon><RouterIcon/></ListItemIcon>
+                        Sound Card
+                    </MenuItem>
+                    <MenuItem onClick={() => handleAddSlot('network_card', 'Network Card')}>
+                        <ListItemIcon><RouterIcon/></ListItemIcon>
+                        Network Card
+                    </MenuItem>
+                    <MenuItem onClick={() => handleAddSlot('network_adapter', 'WiFi Adapter')}>
+                        <ListItemIcon><RouterIcon/></ListItemIcon>
+                        WiFi Adapter
+                    </MenuItem>
+                </Menu>
+            </Box>
+
+            <Box sx={{mt: 4, p: 4, bgcolor: '#1e1e1e', textAlign: 'center', borderRadius: 2}}>
+                <Typography variant="h5" sx={{mb: 2, fontWeight: 'bold', color: 'white'}}>
+                    Total: ${totalPrice.toFixed(2)}
+                </Typography>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    size="large"
+                    onClick={handleSubmit}
+                    disabled={isSubmitting}
+                >
+                    {isSubmitting ? <CircularProgress size={24}/> : 'Submit Build For Review'}
+                </Button>
+            </Box>
+
+            <ComponentDialog
+                open={browserOpen}
+                category={activeSlotType}
+                onClose={() => {
+                    setBrowserOpen(false);
+                    setActiveSlotId(null);
+                }}
+                mode="forge"
+                onSelect={handleSelectComponent}
+                currentBuildId={buildId}
+            />
+
+            <ComponentDetailsDialog
+                open={!!detailsOpen}
+                component={detailsOpen}
+                onClose={() => setDetailsOpen(null)}
+            />
+        </Container>
+    );
 }
+
+function renderSpecs(c: any, type: string) {
+    if (!c) return null;
+    const data = {...c, ...(c.details || {})};
+    const chipStyle = {height: 24, fontSize: '0.75rem', bgcolor: 'rgba(0,0,0,0.05)'};
+    const specs: string[] = [];
+    const val = (k: string) => data[k] || data[k.toLowerCase()] || data[k.replace('_', '')];
+
+    switch (type) {
+        case 'cpu':
+            if (val('socket')) specs.push(val('socket'));
+            if (val('cores')) specs.push(`${val('cores')} Cores / ${val('threads')} Threads`);
+            const base = data.baseclock || data.baseClock || data.base_clock;
+            const boost = data.boostclock || data.boostClock || data.boost_clock;
+            if (base) specs.push(`Base: ${base}GHz`);
+            if (boost) specs.push(`Boost: ${boost}GHz`);
+            break;
+        case 'gpu':
+            if (val('vram')) specs.push(`${val('vram')}GB VRAM`);
+            if (val('chipset')) specs.push(val('chipset'));
+            if (val('length')) specs.push(`L: ${val('length')}mm`);
+            break;
+        case 'motherboard':
+            if (val('socket')) specs.push(val('socket'));
+            if (val('formfactor')) specs.push(val('formfactor'));
+            if (val('ramtype')) specs.push(val('ramtype'));
+            break;
+        case 'memory':
+            if (val('capacity')) specs.push(`${val('capacity')}GB`);
+            if (val('type')) specs.push(val('type'));
+            if (val('speed')) specs.push(`${val('speed')} MHz`);
+            if (val('modules')) specs.push(`${val('modules')}x`);
+            break;
+        case 'storage':
+            if (val('capacity')) specs.push(`${val('capacity')}GB`);
+            if (val('type')) specs.push(val('type'));
+            break;
+        case 'power_supply':
+            if (val('wattage')) specs.push(`Wattage: ${val('wattage')}W`);
+            if (val('type')) specs.push(val('type'));
+            break;
+        case 'case':
+            if (val('gpuMaxLength')) specs.push(`Max GPU Length: ${val('gpuMaxLength')}mm`);
+            if (val('coolerMaxHeight')) specs.push(`Max CPU Cooler Height: ${val('coolerMaxHeight')}mm`);
+            break;
+        case 'cooler':
+            if (val('type')) specs.push(`${val('type')} Cooler`);
+            if (val('height')) specs.push(`${val('height')}mm`);
+            break;
+        default:
+            if (data.brand) specs.push(data.brand);
+    }
+
+    if (specs.length === 0) {
+        if (data.brand) return <Chip label={data.brand} sx={chipStyle}/>;
+        return <Typography variant="caption" color="text.secondary">...</Typography>;
+    }
+
+    return specs.map((label, i) => <Chip key={i} label={label} sx={chipStyle}/>);
+}
Index: pages/index/+Page.tsx
===================================================================
--- pages/index/+Page.tsx	(revision d69e08854cf6669b7a3fd01c8332a21a98051ffc)
+++ pages/index/+Page.tsx	(revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2)
@@ -1,3 +1,3 @@
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';
 import {
     Container, Box, Typography, Button, Grid, IconButton, Dialog, DialogTitle, DialogContent
@@ -10,5 +10,5 @@
 import BuildCard from '../../components/BuildCard';
 
-import { onGetApprovedBuilds, onGetAuthState, onCloneBuild } from '../+Layout.telefunc';
+import {onGetApprovedBuilds, onGetAuthState, onCloneBuild} from '../+Layout.telefunc';
 
 export default function HomePage() {
@@ -29,7 +29,7 @@
                 ] = await Promise.all([
                     onGetAuthState(),
-                    onGetApprovedBuilds({ limit: 5 , sort: 'rating_desc' }),
-                    onGetApprovedBuilds({ limit: 12 }),
-                    onGetApprovedBuilds({ limit: 10, sort: 'rating_desc' })
+                    onGetApprovedBuilds({limit: 5, sort: 'rating_desc'}),
+                    onGetApprovedBuilds({limit: 12}),
+                    onGetApprovedBuilds({limit: 20, sort: 'rating_desc'})
                 ]);
 
@@ -45,4 +45,5 @@
             }
         }
+
         loadSite();
     }, []);
@@ -51,5 +52,5 @@
         if (!data?.isLoggedIn) return alert("Please login to clone builds!");
         if (confirm(`Clone this build to your dashboard?`)) {
-            await onCloneBuild({ buildId });
+            await onCloneBuild({buildId});
             alert("Build cloned! Check your dashboard.");
             setSelectedBuildId(null);
@@ -57,5 +58,5 @@
     };
 
-    if (!data) return <Box sx={{ p: 10, textAlign: 'center' }}>Loading Forge...</Box>;
+    if (!data) return <Box sx={{p: 10, textAlign: 'center'}}>Loading Forge...</Box>;
 
     return (
@@ -69,11 +70,11 @@
                 }
             }}>
-                <Box sx={{ position: 'relative', textAlign: 'center', zIndex: 1, p: 2 }}>
+                <Box sx={{position: 'relative', textAlign: 'center', zIndex: 1, p: 2}}>
                     <Typography variant="h2" fontWeight="bold" gutterBottom>Forge Your Ultimate Machine</Typography>
-                    <Typography variant="h5" sx={{ maxWidth: '800px', mx: 'auto', mb: 1 }}>
+                    <Typography variant="h5" sx={{maxWidth: '800px', mx: 'auto', mb: 1}}>
                         Build, share, discuss, and discover custom PC configurations.
                     </Typography>
-                    <Button variant="contained" size="large" href="/forge" startIcon={<AutoFixHighIcon />}
-                            sx={{ fontSize: '1.2rem', px: 4, py: 1.5, mt: 2 }}>
+                    <Button variant="contained" size="large" href="/forge" startIcon={<AutoFixHighIcon/>}
+                            sx={{fontSize: '1.2rem', px: 4, py: 1.5, mt: 2}}>
                         Start Forging
                     </Button>
@@ -81,7 +82,7 @@
             </Box>
 
-            <Container maxWidth="xl" sx={{ mt: 6, mb: 10 }}>
+            <Container maxWidth="xl" sx={{mt: 6, mb: 10}}>
                 <Box sx={{
-                    mb: 4, borderLeft: '5px solid #ff8201', pl: 2,
+                    mb: 2, borderLeft: '5px solid #ff8201', pl: 1,
                     display: 'flex', justifyContent: 'space-between', alignItems: 'end'
                 }}>
@@ -92,35 +93,62 @@
                         </Typography>
                     </Box>
-                    <Button variant="outlined" startIcon={<ListIcon />} onClick={() => setOpenRankedPopup(true)}>
+                    <Button variant="outlined" startIcon={<ListIcon/>} onClick={() => setOpenRankedPopup(true)}>
                         Show All Top Ranked
                     </Button>
                 </Box>
-
-                <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' }}>
-                            <Box sx={{ width: '100%' }}>
-                                <BuildCard
-                                    build={build}
-                                    onClick={() => setSelectedBuildId(build.id)}
-                                />
-                            </Box>
-                        </Grid>
+                <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: '90%',
+                    }}
+                >
+                    {data.prebuilts.map((build: any) => (
+                        <BuildCard
+                            key={build.id}
+                            build={build}
+                            onClick={() => setSelectedBuildId(build.id)}
+                        />
                     ))}
-                </Grid>
-
-                <SectionHeader title="Community Forge" subtitle="Fresh builds from users around the world."/>
-                <Grid container spacing={3}>
+                </Box>
+
+                <Box sx={{
+                    mb: 2, mt: 2, borderLeft: '5px solid #ff8201', pl: 1,
+                }}>
+                    <Typography variant="h4" fontWeight="bold" color="text.primary">Community Forge</Typography>
+                    <Typography variant="subtitle1" color="text.secondary" sx={{mb: 2}}>Fresh builds from users around
+                        the world.</Typography>
+                </Box>
+                <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: '90%',
+                    }}
+                >
                     {data.communityBuilds.map((build: any) => (
-                        <Grid item xs={12} sm={6} md={3} key={build.id}>
-                            <BuildCard
-                                build={build}
-                                onClick={() => setSelectedBuildId(build.id)}
-                            />
-                        </Grid>
+                        <BuildCard
+                            key={build.id}
+                            build={build}
+                            onClick={() => setSelectedBuildId(build.id)}
+                        />
                     ))}
-                </Grid>
-
-                <Box sx={{ display: 'flex', justifyContent: 'center', mt: 6 }}>
+                </Box>
+
+                <Box sx={{display: 'flex', justifyContent: 'center', mt: 6}}>
                     <Button variant="outlined" size="large" href="/completed-builds">View All Community Builds</Button>
                 </Box>
@@ -135,19 +163,28 @@
             />
 
-            <Dialog open={openRankedPopup} onClose={() => setOpenRankedPopup(false)} maxWidth="lg" fullWidth scroll="paper">
-                <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Dialog open={openRankedPopup} onClose={() => setOpenRankedPopup(false)} maxWidth="xl" fullWidth
+                    scroll="paper">
+                <DialogTitle sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                     Hall of Fame (Top Rated)
-                    <IconButton onClick={() => setOpenRankedPopup(false)}><CloseIcon /></IconButton>
+                    <IconButton onClick={() => setOpenRankedPopup(false)}><CloseIcon/></IconButton>
                 </DialogTitle>
                 <DialogContent dividers>
-                    <Grid container spacing={3}>
+                    <Grid container spacing={3} sx={{p: 1}}>
                         {allRanked.map((build: any, index: number) => (
-                            <Grid item xs={12} sm={6} md={3} key={`ranked-${build.id}`}>
-                                <Box sx={{ position: 'relative' }}>
+                            <Grid
+                                item
+                                xs={12}
+                                sm={6}
+                                md={3}
+                                key={`ranked-${build.id}`}
+                                sx={{display: 'flex'}}
+                            >
+                                <Box sx={{position: 'relative', width: '100%', display: 'flex'}}>
                                     <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'
+                                        width: 35, height: 35, borderRadius: '50%',
+                                        bgcolor: index < 3 ? '#ff8201' : 'grey.800', color: 'white',
+                                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                                        fontWeight: 'bold', border: '2px solid white', boxShadow: 2
                                     }}>
                                         #{index + 1}
@@ -166,15 +203,5 @@
                 </DialogContent>
             </Dialog>
-
         </Box>
     );
 }
-
-function SectionHeader({ title, subtitle }: { title: string, subtitle: string }) {
-    return (
-        <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>
-        </Box>
-    );
-}