Index: components/BuildCard.tsx
===================================================================
--- components/BuildCard.tsx	(revision f7c0b0d6142c806dd5f52642c60c0ca81c22460d)
+++ components/BuildCard.tsx	(revision e59934102328e450fe4616d5fb36f9d29e5b0ab2)
@@ -2,8 +2,8 @@
 import { Card, CardMedia, CardContent, Typography, Box, Chip } from '@mui/material';
 import StarIcon from '@mui/icons-material/Star';
-import PersonIcon from '@mui/icons-material/Person';
+// import PersonIcon from '@mui/icons-material/Person';
 
 export default function BuildCard({ build, onClick }: { build: any, onClick: () => void }) {
-    const formattedPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(build.total_price || 0);
+    const formattedPrice = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'EUR' }).format(build.total_price || 0);
 
     return (
@@ -25,8 +25,6 @@
                 {/*Ne se renderira user-ot*/}
                 <Box sx={{ display: 'flex', alignItems: 'center', mb: 1, color: 'text.secondary' }}>
-                {/*    <PersonIcon sx={{ fontSize: 16, mr: 0.5 }} />*/}
-                {/*    <Typography variant="caption">{build.user || 'Unknown'}</Typography>*/}
-                    <Typography variant="h6" gutterBottom noWrap title={build.cpu}>{build.cpu}</Typography>
-                    <Typography variant="h6" gutterBottom noWrap title={build.gpu}>{build.gpu}</Typography>
+                    {/*    <PersonIcon sx={{ fontSize: 16, mr: 0.5 }} />*/}
+                    {/*    <Typography variant="caption">{build.user || 'Unknown'}</Typography>*/}
                 </Box>
 
@@ -36,5 +34,5 @@
                         <StarIcon fontSize="small" sx={{ color: '#faaf00', mr: 0.5 }} />
                         <Typography variant="body2" fontWeight="bold">
-                            {Number(build.avg_rating || 5).toFixed(1)}
+                            {Number(build.avgRating || 5).toFixed(1)}
                         </Typography>
                     </Box>
Index: components/BuildDetailsDialog.tsx
===================================================================
--- components/BuildDetailsDialog.tsx	(revision f7c0b0d6142c806dd5f52642c60c0ca81c22460d)
+++ components/BuildDetailsDialog.tsx	(revision e59934102328e450fe4616d5fb36f9d29e5b0ab2)
@@ -2,5 +2,5 @@
 import {
     Dialog, DialogTitle, DialogContent, Button, Grid, Box, Typography,
-    IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Divider, Chip, CardMedia
+    IconButton, Tab, Tabs, Table, TableBody, TableCell, TableRow, Rating, TextField, Avatar, Chip
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
@@ -8,6 +8,6 @@
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
+import PersonIcon from "@mui/icons-material/Person";
 import { onGetBuildDetails, onSetReview, onToggleFavorite } from '../pages/+Layout.telefunc';
-import PersonIcon from "@mui/icons-material/Person";
 
 const formatPrice = (price: any) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(Number(price) || 0);
@@ -24,4 +24,7 @@
         if (open && buildId) {
             setLoading(true);
+            setReviewText("");
+            setRatingVal(5);
+
             onGetBuildDetails({ buildId })
                 .then(data => {
@@ -43,4 +46,6 @@
         if (!currentUser) return alert("Please login to review.");
         await onSetReview({ buildId, content: reviewText });
+
+        setReviewText("");
 
         const refreshed = await onGetBuildDetails({ buildId });
@@ -81,5 +86,5 @@
                         <Box sx={{ p: 3 }}>
                             {tabIndex === 0 && (
-                                <Grid container spacing={4}>
+                                <Grid container spacing={2}>
                                     <Grid item xs={12} md={8}>
                                         <Table size="small">
@@ -88,19 +93,11 @@
                                                     <TableRow key={comp.id}>
                                                         <TableCell sx={{ width: 50 }}>
-                                                            {/*<Avatar*/}
-                                                            {/*    src={comp.img_url || undefined}*/}
-                                                            {/*    variant="rounded"*/}
-                                                            {/*    sx={{ width: 40, height: 40, bgcolor: '#ff8201' }}*/}
-                                                            {/*>*/}
-                                                            {/*    {comp.type?.[0]?.toUpperCase()}*/}
-                                                            {/*</Avatar>*/}
-                                                            {/*<PersonIcon sx={{ fontSize: 16 }} />*/}
-                                                            <CardMedia
-                                                                component="img"
-                                                                height="50"
-                                                                width="50"
-                                                                image={"https://placehold.co/400x400?text=CPU"}
-
-                                                            />
+                                                            <Avatar
+                                                                src={comp.img_url || undefined}
+                                                                variant="rounded"
+                                                                sx={{ width: 45, height: 45, bgcolor: '#ff8201'}}
+                                                            >
+                                                                {comp.type?.substring(0, 3)?.toUpperCase()}
+                                                            </Avatar>
                                                         </TableCell>
                                                         <TableCell>
Index: components/Navbar.tsx
===================================================================
--- components/Navbar.tsx	(revision f7c0b0d6142c806dd5f52642c60c0ca81c22460d)
+++ components/Navbar.tsx	(revision e59934102328e450fe4616d5fb36f9d29e5b0ab2)
@@ -4,21 +4,90 @@
 import Typography from "@mui/material/Typography";
 import Button from "@mui/material/Button";
-import InputBase from "@mui/material/InputBase";
 import Box from "@mui/material/Box";
-import { styled } from "@mui/material/styles";
+import Menu from "@mui/material/Menu";
+import MenuItem from "@mui/material/MenuItem";
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import {
+    Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, ListItemText
+} from "@mui/material";
+
+import MemoryIcon from '@mui/icons-material/Memory';
+import DeveloperBoardIcon from '@mui/icons-material/DeveloperBoard';
+import StorageIcon from '@mui/icons-material/Storage';
+import SdStorageIcon from '@mui/icons-material/SdStorage';
+import RouterIcon from '@mui/icons-material/Router';
+import LanIcon from '@mui/icons-material/Lan';
+import SpeakerIcon from '@mui/icons-material/Speaker';
+import AlbumIcon from '@mui/icons-material/Album';
+import SdCardIcon from '@mui/icons-material/SdCard';
+import CableIcon from '@mui/icons-material/Cable';
+
 import LogoUrl from '../assets/projectlogo.png';
-import {onGetAuthState} from "../pages/+Layout.telefunc";
+import { onGetAuthState } from "../pages/+Layout.telefunc";
 
+import ComponentDialog from "./ComponentDialog";
 
-type AuthState = { isLoggedIn: boolean; username: string | null };
+type AuthState = { isLoggedIn: boolean; username: string | null; isAdmin?: boolean };
+
+const COMPONENT_CATEGORIES = [
+    { id: 'cpu', label: 'Processors', icon: <MemoryIcon fontSize="small" /> },
+    { id: 'gpu', label: 'Graphics Cards', icon: <DeveloperBoardIcon fontSize="small" /> },
+    { id: 'motherboard', label: 'Motherboards', icon: <DeveloperBoardIcon fontSize="small" /> },
+    { id: 'memory', label: 'Memory (RAM)', icon: <SdStorageIcon fontSize="small" /> },
+    { id: 'storage', label: 'Storage', icon: <StorageIcon fontSize="small" /> },
+    { id: 'case', label: 'Cases', icon: <StorageIcon fontSize="small" /> },
+    { id: 'power_supply', label: 'Power Supplies', icon: <StorageIcon fontSize="small" /> },
+    { id: 'cooler', label: 'Cooling', icon: <StorageIcon fontSize="small" /> },
+
+    // Peripherals / Accessories (Missing ones)
+    { id: 'network_adapter', label: 'Network Adapters (WiFi)', icon: <RouterIcon fontSize="small" /> },
+    { id: 'network_card', label: 'Network Cards (Ethernet)', icon: <LanIcon fontSize="small" /> },
+    { id: 'sound_card', label: 'Sound Cards', icon: <SpeakerIcon fontSize="small" /> },
+    { id: 'optical_drive', label: 'Optical Drives', icon: <AlbumIcon fontSize="small" /> },
+    { id: 'memory_card', label: 'Memory Cards', icon: <SdCardIcon fontSize="small" /> },
+    { id: 'cables', label: 'Cables', icon: <CableIcon fontSize="small" /> },
+];
+
 
 export default function Navbar() {
     const [auth, setAuth] = useState<AuthState | null>(null);
+    const [openLogoutDialog, setOpenLogoutDialog] = useState(false);
 
-    const handleLogout = async (e: React.MouseEvent) => { // funkcija za logout da go resetira auth state, za da ne go pise username-ot u navbar, plus te vrakja na login nazad
+    const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const openMenu = Boolean(anchorEl);
+
+    const [browserOpen, setBrowserOpen] = useState(false);
+    const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
+
+    const handleComponentsClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        setAnchorEl(event.currentTarget);
+    };
+
+    const handleMenuClose = () => {
+        setAnchorEl(null);
+    };
+
+    const handleCategorySelect = (categoryId: string) => {
+        setSelectedCategory(categoryId);
+        setBrowserOpen(true);
+        handleMenuClose();
+    };
+
+    const handleLogoutClick = (e: React.MouseEvent) => {
         e.preventDefault();
+        setOpenLogoutDialog(true);
+    };
 
-        setAuth({ isLoggedIn: false, username: null });
-        window.location.href = "/api/auth/signout?callbackUrl=/auth/login";
+    const confirmLogout = async () => {
+        setAuth({ isLoggedIn: false, username: null, isAdmin: false });
+        setOpenLogoutDialog(false);
+        const csrfRes = await fetch("/api/auth/csrf");
+        const { csrfToken } = await csrfRes.json();
+        await fetch("/api/auth/signout", {
+            method: "POST",
+            headers: { "Content-Type": "application/x-www-form-urlencoded" },
+            body: new URLSearchParams({ csrfToken: csrfToken, callbackUrl: "/" }),
+        });
+        window.location.href = "/";
     };
 
@@ -26,61 +95,93 @@
         let active = true;
         onGetAuthState()
-            .then((data) => active && setAuth({ isLoggedIn: data.isLoggedIn, username: data.username }))
-            .catch(() => active && setAuth({ isLoggedIn: false, username: null }));
+            .then((data) => active && setAuth({
+                isLoggedIn: data.isLoggedIn,
+                username: data.username,
+                isAdmin: data.isAdmin
+            }))
+            .catch(() => active && setAuth({ isLoggedIn: false, username: null, isAdmin: false }));
         return () => { active = false; };
     }, []);
 
+    const checkDashboardUrl = auth?.isAdmin ? '/dashboard/admin' : '/dashboard/user';
     const onHoverNav = {
         color: 'inherit',
-        '&:hover': {
-            backgroundColor: '#ff8201',
-            color: 'white',
-            fontWeight: 'bold',
-        }
+        '&:hover': { backgroundColor: '#ff8201', color: 'white', fontWeight: 'bold' }
     };
 
     return (
-        <AppBar position="static" color="default" enableColorOnDark>
-            <Toolbar>
-                <Box sx={{ display: 'flex', alignItems: 'center', mr: 4 }}>
-                    <Box
-                        component="img"
-                        src={LogoUrl}
-                        alt="PC Forge Logo"
-                        sx={{ height: 40, mr: 2, cursor: 'pointer' }}
-                    />
-                    <Typography
-                        variant="h6"
-                        component="a"
-                        href="/"
-                        sx={{ textDecoration: "none", color: "inherit", fontWeight: "bold" }}
-                    >
-                        PC Forge
-                    </Typography>
-                </Box>
+        <>
+            <AppBar position="static" color="default" enableColorOnDark>
+                <Toolbar>
+                    <Box sx={{ display: 'flex', alignItems: 'center', mr: 4 }}>
+                        <Box component="img" src={LogoUrl} alt="PC Forge Logo" sx={{ height: 40, mr: 2, cursor: 'pointer' }} onClick={() => window.location.href='/'} />
+                        <Typography variant="h6" component="a" href="/" sx={{ textDecoration: "none", color: "inherit", fontWeight: "bold" }}>
+                            PC Forge
+                        </Typography>
+                    </Box>
 
-                <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2}}>
-                    <Button color="inherit" href="/forge" sx={onHoverNav}>Forge</Button>
-                    <Button color="inherit" href="/components" sx={onHoverNav}>Components</Button>
-                    <Button color="inherit" href="/completed-builds" sx={onHoverNav}>Completed Builds</Button>
-                </Box>
+                    <Box sx={{ display: { xs: "none", md: "flex" }, gap: 2 }}>
+                        <Button color="inherit" href="/forge" sx={onHoverNav}>Forge</Button>
 
-                <Box sx={{ flexGrow: 1 }} />
+                        <Button
+                            color="inherit"
+                            onClick={handleComponentsClick}
+                            endIcon={<KeyboardArrowDownIcon />}
+                            sx={onHoverNav}
+                        >
+                            Components
+                        </Button>
+                        <Menu
+                            anchorEl={anchorEl}
+                            open={openMenu}
+                            onClose={handleMenuClose}
+                            MenuListProps={{ 'aria-labelledby': 'basic-button' }}
+                        >
+                            {COMPONENT_CATEGORIES.map((cat) => (
+                                <MenuItem key={cat.id} onClick={() => handleCategorySelect(cat.id)}>
+                                    {/*<ListItemIcon>{cat.icon}</ListItemIcon>*/}
+                                    <ListItemText>{cat.label}</ListItemText>
+                                </MenuItem>
+                            ))}
+                        </Menu>
 
-                <Box sx={{ display: 'flex', gap: 1 }}>
-                    {auth?.isLoggedIn ? (
-                        <>
-                            <Button sx={onHoverNav} color="inherit" href="/dashboard/user">{auth.username}</Button>
-                            <Button sx={onHoverNav} color="inherit" onClick={handleLogout}>Logout</Button>
-                        </>
-                    ) : (
-                        <>
-                            <Button color="inherit" href="/auth/login">Login</Button>
-                            <Button color="inherit" href="/auth/register">Register</Button>
-                        </>
-                    )}
-                </Box>
-            </Toolbar>
-        </AppBar>
+                        <Button color="inherit" href="/completed-builds" sx={onHoverNav}>Completed Builds</Button>
+                    </Box>
+
+                    <Box sx={{ flexGrow: 1 }} />
+
+                    <Box sx={{ display: 'flex', gap: 1 }}>
+                        {auth?.isLoggedIn ? (
+                            <>
+                                <Button sx={onHoverNav} color="inherit" href={checkDashboardUrl}>{auth.username}</Button>
+                                <Button sx={onHoverNav} color="inherit" onClick={handleLogoutClick}>Logout</Button>
+                            </>
+                        ) : (
+                            <>
+                                <Button color="inherit" href="/auth/login">Login</Button>
+                                <Button color="inherit" href="/auth/register">Register</Button>
+                            </>
+                        )}
+                    </Box>
+                </Toolbar>
+            </AppBar>
+
+            <Dialog open={openLogoutDialog} onClose={() => setOpenLogoutDialog(false)}>
+                <DialogTitle>Confirm Logout</DialogTitle>
+                <DialogContent>
+                    <DialogContentText>Are you sure you want to leave the Forge?</DialogContentText>
+                </DialogContent>
+                <DialogActions>
+                    <Button onClick={() => setOpenLogoutDialog(false)}>Cancel</Button>
+                    <Button onClick={confirmLogout} color="error" variant="contained" autoFocus>Logout</Button>
+                </DialogActions>
+            </Dialog>
+
+            <ComponentDialog
+                open={browserOpen}
+                category={selectedCategory}
+                onClose={() => setBrowserOpen(false)}
+            />
+        </>
     );
 }
Index: pages/completed-builds/+Page.tsx
===================================================================
--- pages/completed-builds/+Page.tsx	(revision f7c0b0d6142c806dd5f52642c60c0ca81c22460d)
+++ 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 f7c0b0d6142c806dd5f52642c60c0ca81c22460d)
+++ 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 f7c0b0d6142c806dd5f52642c60c0ca81c22460d)
+++ 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>