Index: pages/auth/login/+Page.tsx
===================================================================
--- pages/auth/login/+Page.tsx	(revision 2c6d75af1061fd6318206c20e61f1428a27a0577)
+++ pages/auth/login/+Page.tsx	(revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -26,5 +26,5 @@
             setError("Invalid username or password");
         } else {
-            window.location.href = "/dashboard/user";
+            window.location.href = "/";
         }
     };
Index: pages/completed-builds/+Page.tsx
===================================================================
--- pages/completed-builds/+Page.tsx	(revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
+++ pages/completed-builds/+Page.tsx	(revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from 'react';
+import {
+    Container, Grid, Box, Typography, TextField, MenuItem, Select,
+    Slider, Button, Paper, InputAdornment
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import FilterListIcon from '@mui/icons-material/FilterList';
+
+import BuildCard from '../../components/BuildCard';
+import BuildDetailsDialog from '../../components/BuildDetailsDialog';
+
+import { onGetApprovedBuilds, onCloneBuild, onGetAuthState } from '../+Layout.telefunc';
+
+export default function CompletedBuildsPage() {
+    const [builds, setBuilds] = useState<any[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [userId, setUserId] = useState<number | null>(null);
+    const [selectedBuildId, setSelectedBuildId] = useState<number | null>(null);
+
+    const [sortBy, setSortBy] = useState('price_asc');
+    const [priceRange, setPriceRange] = useState<number[]>([0, 5000]);
+    const [searchQuery, setSearchQuery] = useState("");
+
+    const loadBuilds = async () => {
+        setLoading(true);
+        try {
+            const [userData, data] = await Promise.all([
+                onGetAuthState(),
+                onGetApprovedBuilds({ q: searchQuery })
+            ]);
+            setUserId(userData.userId);
+
+            let sortedData = [...data];
+
+            switch (sortBy) {
+                case 'price_asc':
+                    sortedData.sort((a, b) => Number(a.total_price) - Number(b.total_price));
+                    break;
+                case 'price_desc':
+                    sortedData.sort((a, b) => Number(b.total_price) - Number(a.total_price));
+                    break;
+                case 'rating_desc':
+                    sortedData.sort((a, b) => (Number(b.avgRating) || 0) - (Number(a.avgRating) || 0));
+                    break;
+                case 'oldest':
+                    sortedData.sort((a, b) => new Date(a.created_at).getTime() - new Date(b.created_at).getTime());
+                    break;
+                case 'newest':
+                default:
+                    sortedData.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime());
+                    break;
+            }
+
+            sortedData = sortedData.filter(b => {
+                const price = Number(b.total_price);
+                return price >= priceRange[0] && price <= priceRange[1];
+            });
+
+            setBuilds(sortedData);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    useEffect(() => {
+        loadBuilds();
+    }, [sortBy, priceRange, searchQuery]);
+
+    useEffect(() => {
+        loadBuilds();
+    }, [sortBy, searchQuery]);
+
+    const handleClone = async (buildId: number) => {
+        if (!userId) return alert("Please login to clone builds!");
+        if (confirm(`Clone this build?`)) {
+            await onCloneBuild({ buildId });
+            alert("Build cloned!");
+            setSelectedBuildId(null);
+        }
+    };
+
+    return (
+        <Container maxWidth="xl" sx={{ mt: 4, mb: 10 }}>
+            <Typography variant="h4" fontWeight="bold" gutterBottom>Completed Builds</Typography>
+            <Typography color="text.secondary" sx={{ mb: 4 }}>
+                Browse community configurations. Filter by price, components, or popularity.
+            </Typography>
+
+            <Grid container spacing={4}>
+                <Grid item xs={12} md={3}>
+                    <Paper variant="outlined" sx={{ p: 3, position: 'sticky', top: 20 }}>
+                        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+                            <FilterListIcon sx={{ mr: 1 }} />
+                            <Typography variant="h6" fontWeight="bold">Filters</Typography>
+                        </Box>
+
+                        <TextField
+                            fullWidth
+                            size="small"
+                            placeholder="Search builds..."
+                            value={searchQuery}
+                            onChange={(e) => setSearchQuery(e.target.value)}
+                            InputProps={{
+                                startAdornment: <InputAdornment position="start"><SearchIcon /></InputAdornment>,
+                            }}
+                            sx={{ mb: 3 }}
+                        />
+
+                        <Typography gutterBottom fontWeight="bold">Price Range</Typography>
+                        <Box sx={{ px: 1, mb: 3 }}>
+                            <Slider
+                                value={priceRange}
+                                onChange={(_, newValue) => setPriceRange(newValue as number[])}
+                                valueLabelDisplay="auto"
+                                min={0}
+                                max={5000}
+                                step={100}
+                            />
+                            <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 1 }}>
+                                <Typography variant="caption">${priceRange[0]}</Typography>
+                                <Typography variant="caption">${priceRange[1]}+</Typography>
+                            </Box>
+                        </Box>
+
+                        <Button variant="contained" fullWidth onClick={loadBuilds}>
+                            Apply Filters
+                        </Button>
+                    </Paper>
+                </Grid>
+
+                <Grid item xs={12} md={9}>
+                    {/* Toolbar */}
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
+                        <Typography fontWeight="bold">{builds.length} Builds Found</Typography>
+
+                        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                            <Typography variant="body2" color="text.secondary">Sort by:</Typography>
+                            <Select
+                                size="small"
+                                value={sortBy}
+                                onChange={(e) => setSortBy(e.target.value)}
+                                sx={{ minWidth: 150, bgcolor: 'background.paper' }}
+                            >
+                                <MenuItem value="newest">Newest First</MenuItem>
+                                <MenuItem value="oldest">Oldest First</MenuItem>
+                                <MenuItem value="price_desc">Price: High to Low</MenuItem>
+                                <MenuItem value="price_asc">Price: Low to High</MenuItem>
+                                <MenuItem value="rating_desc">Highest Rated</MenuItem>
+                            </Select>
+                        </Box>
+                    </Box>
+
+                    {loading ? (
+                        <Box sx={{ p: 5, textAlign: 'center' }}>Loading...</Box>
+                    ) : (
+                        <Grid container spacing={3}>
+                            {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>
+                            ))}
+                            {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>
+                            )}
+                        </Grid>
+                    )}
+                </Grid>
+            </Grid>
+
+            <BuildDetailsDialog
+                open={!!selectedBuildId}
+                buildId={selectedBuildId}
+                currentUser={userId}
+                onClose={() => setSelectedBuildId(null)}
+                onClone={handleClone}
+            />
+        </Container>
+    );
+}
+
Index: pages/forge/+Page.tsx
===================================================================
--- pages/forge/+Page.tsx	(revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
+++ pages/forge/+Page.tsx	(revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -0,0 +1,5 @@
+export default function ForgePage(){
+    return (
+        <h1>Test Forge Page</h1>
+    )
+}
Index: pages/index/+Page.tsx
===================================================================
--- pages/index/+Page.tsx	(revision 2c6d75af1061fd6318206c20e61f1428a27a0577)
+++ pages/index/+Page.tsx	(revision 1bf6e1f519ad45c39ba56ccdc473328a666f1335)
@@ -1,38 +1,30 @@
 import React, { useEffect, useState } from 'react';
 import {
-    Container, Box, Typography, Button, Grid, Card, CardMedia, CardContent,
-    CardActions, Chip, Rating, Dialog, DialogTitle, DialogContent, DialogActions,
-    IconButton, Divider
+    Container, Box, Typography, Button, Grid, IconButton, Dialog, DialogTitle, DialogContent
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import AutoFixHighIcon from '@mui/icons-material/AutoFixHigh';
-import CommentIcon from '@mui/icons-material/Comment';
-import StarIcon from '@mui/icons-material/Star';
-import HardwareIcon from '@mui/icons-material/Memory';
-import ListIcon from '@mui/icons-material/List'; // Icon for "Show All"
+import ListIcon from '@mui/icons-material/List';
 
-// --- PLACEHOLDER ASSETS ---
-const PLACEHOLDER_IMG = "https://placehold.co/600x400?text=Gaming+PC";
+import BuildDetailsDialog from '../../components/BuildDetailsDialog';
+import BuildCard from '../../components/BuildCard';
 
-import { onGetHighestRankedBuilds, onCloneBuild } from './buildCards.telefunc';
-import {onGetApprovedBuilds, onGetAuthState} from '../+Layout.telefunc';
-import {getAuthState} from "../../server/telefunc/ctx"; //
+import { onGetApprovedBuilds, onGetAuthState, onCloneBuild } from '../+Layout.telefunc';
 
 export default function HomePage() {
     const [data, setData] = useState<any>(null);
-    const [selectedBuild, setSelectedBuild] = useState<any>(null); // For Detail Popup
-    const [openDetailPopup, setOpenDetailPopup] = useState(false);
 
-    // NEW: Popup for "All Top Ranked Builds"
+    const [selectedBuildId, setSelectedBuildId] = useState<number | null>(null);
+
     const [openRankedPopup, setOpenRankedPopup] = useState(false);
 
     useEffect(() => {
-        async function loadSite(){
-            try{
+        async function loadSite() {
+            try {
                 const [
-                    authData, highestRankedBuilds, commnityBuilds
+                    authData, highestRankedBuilds, communityBuilds
                 ] = await Promise.all([
                     onGetAuthState(),
-                    onGetHighestRankedBuilds({ limit: 3 }),
+                    onGetApprovedBuilds({ limit: 3 , sort: 'rating_desc' }),
                     onGetApprovedBuilds({ limit: 12 })
                 ]);
@@ -42,26 +34,19 @@
                     userId: authData.userId,
                     prebuilts: highestRankedBuilds,
-                    communityBuilds: commnityBuilds
+                    communityBuilds: communityBuilds
                 });
             } catch (error) {
                 console.error("Error loading homepage data:", error);
             }
-    }
+        }
+        loadSite();
+    }, []);
 
-    loadSite();
-}, []);
-
-    // Open Build Details
-    const handleCardClick = (build: any) => {
-        setSelectedBuild(build);
-        setOpenDetailPopup(true);
-    };
-
-    const handleClone = async () => {
+    const handleCloneWrapper = async (buildId: number) => {
         if (!data?.isLoggedIn) return alert("Please login to clone builds!");
-        if (confirm(`Clone "${selectedBuild.name}" to your dashboard?`)) {
-            await onCloneBuild({ buildId: selectedBuild.id });
+        if (confirm(`Clone this build to your dashboard?`)) {
+            await onCloneBuild({ buildId });
             alert("Build cloned! Check your dashboard.");
-            setOpenDetailPopup(false);
+            setSelectedBuildId(null);
         }
     };
@@ -74,16 +59,16 @@
                 position: 'relative', height: '500px',
                 display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'white',
-                '&::before': { content: '""', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: 'rgba(0,0,0,0.6)' }
+                '&::before': {
+                    content: '""', position: 'absolute', top: 0, left: 0, width: '100%', height: '100%',
+                    backgroundColor: 'rgba(0,0,0,0.6)'
+                }
             }}>
                 <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' }}>
+                    <Typography variant="h5" sx={{ maxWidth: '800px', mx: 'auto', mb: 1 }}>
                         Build, share, discuss, and discover custom PC configurations.
                     </Typography>
-                    <Typography variant="h5" sx={{ mb: 1, maxWidth: '800px', mx: 'auto' }}>
-                        Join the community today.
-                    </Typography>
-
-                    <Button variant="contained" size="large" href="/forger" startIcon={<AutoFixHighIcon />} sx={{ fontSize: '1.2rem', px: 4, py: 1.5 }}>
+                    <Button variant="contained" size="large" href="/forger" startIcon={<AutoFixHighIcon />}
+                            sx={{ fontSize: '1.2rem', px: 4, py: 1.5, mt: 2 }}>
                         Start Forging
                     </Button>
@@ -92,37 +77,42 @@
 
             <Container maxWidth="xl" sx={{ mt: 6, mb: 10 }}>
-                <Box sx={{ mb: 4, borderLeft: '5px solid #ff8201', pl: 2, display: 'flex', justifyContent: 'space-between', alignItems: 'end' }}>
+                <Box sx={{
+                    mb: 4, borderLeft: '5px solid #ff8201', pl: 2,
+                    display: 'flex', justifyContent: 'space-between', alignItems: 'end'
+                }}>
                     <Box>
                         <Typography variant="h4" fontWeight="bold">Hall of Fame</Typography>
-                        <Typography variant="subtitle1" color="text.secondary">The highest rated configurations from across the community.</Typography>
+                        <Typography variant="subtitle1" color="text.secondary">
+                            The highest rated configurations from across the community.
+                        </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 }}>
-                    <Grid item xs={12} md={3}>
-                        <Box sx={{
-                            height: '100%', p: 3, bgcolor: '#ff8201', color: 'black', borderRadius: 2,
-                            display: 'flex', flexDirection: 'column', justifyContent: 'center'
-                        }}>
-                            <Typography color={'black'} variant="h4" fontWeight="bold" gutterBottom>The Elite</Typography>
-                            <Typography fontWeight={'bold'}>
-                                These 3 builds represent the pinnacle of performance and looks as voted by the PC Forge community.
-                            </Typography>
-                        </Box>
-                    </Grid>
+                <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>*/}
 
-                    {data.prebuilts.map((build: any) => (
-                        <Grid item xs={12} sm={6} md={3} key={build.id}>
-                            <BuildCard build={build} onClick={() => handleCardClick(build)} />
+                    {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>
                     ))}
                 </Grid>
+
 
                 <SectionHeader title="Community Forge" subtitle="Fresh builds from users around the world."/>
@@ -130,5 +120,8 @@
                     {data.communityBuilds.map((build: any) => (
                         <Grid item xs={12} sm={6} md={3} key={build.id}>
-                            <BuildCard build={build} onClick={() => handleCardClick(build)} />
+                            <BuildCard
+                                build={build}
+                                onClick={() => setSelectedBuildId(build.id)}
+                            />
                         </Grid>
                     ))}
@@ -138,56 +131,14 @@
                     <Button variant="outlined" size="large" href="/completed-builds">View All Community Builds</Button>
                 </Box>
-
             </Container>
 
-            <Dialog open={openDetailPopup} onClose={() => setOpenDetailPopup(false)} maxWidth="md" fullWidth>
-                {selectedBuild && (
-                    <>
-                        <DialogTitle sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                            <Box>
-                                <Typography variant="h5" fontWeight="bold">{selectedBuild.name}</Typography>
-                                <Typography variant="subtitle2" color="text.secondary">By {selectedBuild.username || "Unknown"}</Typography>
-                            </Box>
-                            <IconButton onClick={() => setOpenDetailPopup(false)}><CloseIcon /></IconButton>
-                        </DialogTitle>
 
-                        <DialogContent dividers>
-                            <Grid container spacing={4}>
-                                <Grid item xs={12} md={6}>
-                                    <Box component="img" src={selectedBuild.imageUrl || PLACEHOLDER_IMG} sx={{ width: '100%', borderRadius: 2, mb: 2 }} />
-                                    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-                                        <Rating value={Number(selectedBuild.avgRating) || 0} readOnly precision={0.5} />
-                                        <Typography>({selectedBuild.ratingCount || 0} reviews)</Typography>
-                                    </Box>
-                                </Grid>
-                                <Grid item xs={12} md={6}>
-                                    <Typography variant="h6" gutterBottom>Build Specs</Typography>
-                                    <ComponentRow name="CPU" value="Intel Core i9-13900K" /> {/* Placeholder */}
-                                    <ComponentRow name="GPU" value="NVIDIA RTX 4090" />    {/* Placeholder */}
-
-                                    <Box sx={{ mt: 4, bgcolor: '#f5f5f5', p: 2, borderRadius: 1 }}>
-                                        <Typography variant="subtitle2" fontWeight="bold">Actions</Typography>
-                                        <Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
-                                            <Button size="small" variant="outlined" startIcon={<StarIcon />}>Rate</Button>
-                                            <Button size="small" variant="outlined" startIcon={<CommentIcon />}>Review</Button>
-                                        </Box>
-                                    </Box>
-                                </Grid>
-                            </Grid>
-                        </DialogContent>
-
-                        <DialogActions sx={{ p: 2 }}>
-                            {data.userId === selectedBuild.userId ? (
-                                <Button variant="contained" href={`/forger?edit=${selectedBuild.id}`}>Edit</Button>
-                            ) : (
-                                <Button variant="contained" color="secondary" startIcon={<AutoFixHighIcon />} onClick={null}>
-                                    Clone & Edit
-                                </Button>
-                            )}
-                            <Button href={`/build/${selectedBuild.id}`}>View Full Details</Button>
-                        </DialogActions>
-                    </>
-                )}
-            </Dialog>
+            <BuildDetailsDialog
+                open={!!selectedBuildId}
+                buildId={selectedBuildId}
+                currentUser={data.userId}
+                onClose={() => setSelectedBuildId(null)}
+                onClone={handleCloneWrapper}
+            />
 
 
@@ -199,11 +150,13 @@
                 <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);
-                                    handleCardClick(build);
-                                }} />
+                                <BuildCard
+                                    build={build}
+                                    onClick={() => {
+                                        setOpenRankedPopup(false);
+                                        setSelectedBuildId(build.id); // Open details from popup
+                                    }}
+                                />
                             </Grid>
                         ))}
@@ -224,32 +177,2 @@
     );
 }
-
-function BuildCard({ build, onClick }: { build: any, onClick: () => void }) {
-    return (
-        <Card sx={{ height: '100%', display: 'flex', flexDirection: 'column', cursor: 'pointer', transition: 'all 0.2s', '&:hover': { transform: 'translateY(-4px)', boxShadow: 6 } }} onClick={onClick}>
-            <CardMedia component="img" height="160" image={build.imageUrl || PLACEHOLDER_IMG} alt={build.name} />
-            <CardContent sx={{ flexGrow: 1, pb: 1 }}>
-                <Typography gutterBottom variant="h6" noWrap>{build.name}</Typography>
-
-                <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 1 }}>
-                    <Box sx={{ display: 'flex', alignItems: 'center', px: 1, borderRadius: 1 }}>
-                        <StarIcon fontSize="small" sx={{ color: '#faaf00', mr: 0.5 }} />
-                        <Typography variant="body2" fontWeight="bold">{Number(build.avgRating || 0).toFixed(1)}</Typography>
-                    </Box>
-                    <Typography variant="caption" color="text.secondary">
-                        {build.commentCount || 0} reviews
-                    </Typography>
-                </Box>
-            </CardContent>
-        </Card>
-    );
-}
-
-function ComponentRow({ name, value }: { name: string, value: string }) {
-    return (
-        <Box sx={{ display: 'flex', justifyContent: 'space-between', py: 1, borderBottom: '1px solid #eee' }}>
-            <Typography variant="body2" color="text.secondary">{name}</Typography>
-            <Typography variant="body2" fontWeight="bold">{value}</Typography>
-        </Box>
-    );
-}