Index: components/AddComponentDialog.tsx
===================================================================
--- components/AddComponentDialog.tsx	(revision 958bc89ea8bee009837593ad11242676e8d031f1)
+++ components/AddComponentDialog.tsx	(revision 958bc89ea8bee009837593ad11242676e8d031f1)
@@ -0,0 +1,350 @@
+import React, { useState, useEffect } from 'react';
+import {
+    Dialog, DialogTitle, DialogContent, DialogActions, Button, TextField,
+    Grid, Box, Typography, MenuItem, IconButton, Avatar, Alert
+} 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 { onCreateNewComponent, onGetDetailsForNewComponent } from '../pages/dashboard/admin/adminDashboard.telefunc';
+
+const COMPONENT_TYPES = [
+    { value: 'cpu', label: 'CPU' },
+    { value: 'gpu', label: 'Graphics Card' },
+    { value: 'motherboard', label: 'Motherboard' },
+    { value: 'memory', label: 'Memory' },
+    { value: 'storage', label: 'Storage' },
+    { value: 'power_supply', label: 'Power Supply' },
+    { value: 'case', label: 'Case' },
+    { value: 'cooler', label: 'CPU Cooler' },
+];
+
+export default function AddComponentDialog({ open, onClose, onSuccess }: {
+    open: boolean;
+    onClose: () => void;
+    onSuccess: () => void;
+}) {
+    const [name, setName] = useState('');
+    const [brand, setBrand] = useState('');
+    const [price, setPrice] = useState('');
+    const [imgUrl, setImgUrl] = useState('');
+    const [type, setType] = useState('');
+
+    const [requiredFields, setRequiredFields] = useState<any[]>([]);
+    const [multiTables, setMultiTables] = useState<any>({});
+    const [specificData, setSpecificData] = useState<any>({});
+
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+
+    useEffect(() => {
+        if (type) {
+            setLoading(true);
+            onGetDetailsForNewComponent({ type })
+                .then((details) => {
+                    console.log('Component details:', details);
+
+                    setRequiredFields(details.requiredFields || []);
+                    setMultiTables(details.multiTables || {});
+
+                    const initialData: any = {};
+
+                    (details.requiredFields || []).forEach((field: any) => {
+                        const fieldName = typeof field === 'string' ? field : field.name;
+                        initialData[fieldName] = '';
+                    });
+
+                    Object.keys(details.multiTables || {}).forEach((tableName) => {
+                        initialData[tableName] = [];
+                    });
+
+                    setSpecificData(initialData);
+                })
+                .catch((err) => {
+                    console.error('Field load error:', err);
+                    setError('Failed to load component fields');
+                })
+                .finally(() => setLoading(false));
+        }
+    }, [type]);
+
+    const handleFieldChange = (fieldName: string, value: any) => {
+        setSpecificData((prev: any) => ({
+            ...prev,
+            [fieldName]: value
+        }));
+    };
+
+    const handleAddMultiTableRow = (tableName: string) => {
+        const tableConfig = multiTables[tableName];
+        const newRow: any = {};
+
+        tableConfig.forEach((field: string) => {
+            newRow[field] = '';
+        });
+
+        setSpecificData((prev: any) => ({
+            ...prev,
+            [tableName]: [...(prev[tableName] || []), newRow]
+        }));
+    };
+
+    const handleRemoveMultiTableRow = (tableName: string, index: number) => {
+        setSpecificData((prev: any) => ({
+            ...prev,
+            [tableName]: prev[tableName].filter((_: any, i: number) => i !== index)
+        }));
+    };
+
+    const handleMultiTableFieldChange = (tableName: string, index: number, fieldName: string, value: any) => {
+        setSpecificData((prev: any) => {
+            const updated = [...prev[tableName]];
+            updated[index] = { ...updated[index], [fieldName]: value };
+            return { ...prev, [tableName]: updated };
+        });
+    };
+
+    const handleSubmit = async () => {
+        setError('');
+
+        if (!name.trim()) return setError('Name is required');
+        if (!brand.trim()) return setError('Brand is required');
+        if (!price || isNaN(Number(price)) || Number(price) <= 0) return setError('Valid price is required');
+        if (!imgUrl.trim()) return setError('Image URL is required');
+        if (!type) return setError('Component type is required');
+
+        setLoading(true);
+        try {
+            await onCreateNewComponent({
+                name: name.trim(),
+                brand: brand.trim(),
+                price: Number(price),
+                imgUrl: imgUrl.trim(),
+                type,
+                specificData
+            });
+
+            onSuccess();
+            handleClose();
+        } catch (err) {
+            setError('Failed to create component. Please check all fields.');
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const handleClose = () => {
+        setName('');
+        setBrand('');
+        setPrice('');
+        setImgUrl('');
+        setType('');
+        setSpecificData({});
+        setRequiredFields([]);
+        setMultiTables({});
+        setError('');
+        onClose();
+    };
+
+    const formatFieldLabel = (fieldName: string): string => {
+        return fieldName
+            .replace(/([A-Z])/g, ' $1')
+            .replace(/^./, (str: string) => str.toUpperCase());
+    };
+
+    const renderAllFields = () => {
+        const allFields = [...(requiredFields || []), ...(Object.values(multiTables).flat() || [])];
+
+        return (
+            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                {allFields.map((field: any, index: number) => {
+                    const fieldName = typeof field === 'string' ? field : field.name;
+
+                    const isNumber = fieldName.includes('height') || fieldName.includes('length') ||
+                        fieldName.includes('wattage') || fieldName.includes('capacity') ||
+                        fieldName.includes('speed') || fieldName.includes('cores') ||
+                        fieldName.includes('threads') || fieldName.includes('vram') ||
+                        fieldName.includes('slots') || fieldName.includes('numSlots');
+
+                    return (
+                        <TextField
+                            key={`${fieldName}-${index}`}
+                            fullWidth
+                            label={formatFieldLabel(fieldName)}
+                            value={specificData[fieldName] || ''}
+                            onChange={(e) => handleFieldChange(fieldName, isNumber ? Number(e.target.value) : e.target.value)}
+                            type={isNumber ? 'number' : 'text'}
+                            required
+                            sx={{ mb: 2 }}
+                        />
+                    );
+                })}
+            </Box>
+        );
+    };
+
+    return (
+        <Dialog open={open} onClose={handleClose} maxWidth="md" fullWidth scroll="paper">
+            <DialogTitle sx={{ bgcolor: '#ff8201', color: 'white', display: 'flex', justifyContent: 'space-between', alignItems: 'column' }}>
+                <Typography variant="h6" fontWeight="bold">Add New Component</Typography>
+                <IconButton onClick={handleClose} sx={{ color: 'white' }}>
+                    <CloseIcon />
+                </IconButton>
+            </DialogTitle>
+
+            <DialogContent sx={{ p: 3 }}>
+                {error && <Alert severity="error" sx={{ mb: 2 }}>{error}</Alert>}
+
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+                    <Box>
+                        <Typography variant="subtitle1" fontWeight="bold" gutterBottom sx={{ mb: 2 }}>
+                            Basic Information
+                        </Typography>
+
+                        <TextField
+                            fullWidth
+                            select
+                            label="Component Type"
+                            value={type}
+                            onChange={(e) => setType(e.target.value)}
+                            required
+                            sx={{ mb: 2 }}
+                        >
+                            {COMPONENT_TYPES.map((option) => (
+                                <MenuItem key={option.value} value={option.value}>
+                                    {option.label}
+                                </MenuItem>
+                            ))}
+                        </TextField>
+
+                        <Grid container spacing={2} sx={{ mb: 2 }}>
+                            <Grid item xs={12} md={6}>
+                                <TextField
+                                    fullWidth
+                                    label="Brand"
+                                    value={brand}
+                                    onChange={(e) => setBrand(e.target.value)}
+                                    required
+                                />
+                            </Grid>
+                            <Grid item xs={12} md={6}>
+                                <TextField
+                                    fullWidth
+                                    label="Name"
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
+                                    required
+                                />
+                            </Grid>
+                        </Grid>
+
+                        <Grid container spacing={2}>
+                            <Grid item xs={12} md={6}>
+                                <TextField
+                                    fullWidth
+                                    label="Price (EUR)"
+                                    type="number"
+                                    value={price}
+                                    onChange={(e) => setPrice(e.target.value)}
+                                    required
+                                    inputProps={{ step: '0.01', min: '0' }}
+                                />
+                            </Grid>
+                            <Grid item xs={12} md={6}>
+                                <TextField
+                                    fullWidth
+                                    label="Image URL"
+                                    value={imgUrl}
+                                    onChange={(e) => setImgUrl(e.target.value)}
+                                    required
+                                />
+                            </Grid>
+                        </Grid>
+                    </Box>
+
+                    {imgUrl && (
+                        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 1 }}>
+                            <Avatar
+                                src={imgUrl}
+                                variant="rounded"
+                                sx={{ width: 120, height: 120, bgcolor: '#f5f5f5' }}
+                            />
+                        </Box>
+                    )}
+
+                    {type && (requiredFields.length > 0 || Object.keys(multiTables).length > 0) && (
+                        <Box>
+                            <Typography variant="subtitle1" fontWeight="bold" gutterBottom sx={{ mb: 2 }}>
+                                {COMPONENT_TYPES.find(ct => ct.value === type)?.label} Specifications
+                            </Typography>
+                            {renderAllFields()}
+                        </Box>
+                    )}
+
+                    {Object.keys(multiTables).map((tableName) => (
+                        <Box key={tableName}>
+                            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+                                <Typography variant="subtitle1" fontWeight="bold">
+                                    {tableName.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
+                                </Typography>
+                                <Button
+                                    size="small"
+                                    startIcon={<AddIcon />}
+                                    onClick={() => handleAddMultiTableRow(tableName)}
+                                    variant="outlined"
+                                >
+                                    Add Row
+                                </Button>
+                            </Box>
+
+                            {(specificData[tableName] || []).map((row: any, index: number) => (
+                                <Box key={index} sx={{ p: 3, mb: 2, border: '1px solid #e0e0e0', borderRadius: 2, bgcolor: '#fafafa' }}>
+                                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 2 }}>
+                                        <Typography variant="subtitle2" fontWeight="medium">
+                                            Row {index + 1}
+                                        </Typography>
+                                        <IconButton
+                                            size="small"
+                                            color="error"
+                                            onClick={() => handleRemoveMultiTableRow(tableName, index)}
+                                        >
+                                            <DeleteIcon />
+                                        </IconButton>
+                                    </Box>
+
+                                    <Grid container spacing={2}>
+                                        {multiTables[tableName].map((fieldName: string) => (
+                                            <Grid item xs={12} sm={6} md={4} key={fieldName}>
+                                                <TextField
+                                                    fullWidth
+                                                    size="small"
+                                                    label={fieldName.replace(/([A-Z])/g, ' $1').replace(/^./, str => str.toUpperCase())}
+                                                    value={row[fieldName] || ''}
+                                                    onChange={(e) => handleMultiTableFieldChange(tableName, index, fieldName, e.target.value)}
+                                                />
+                                            </Grid>
+                                        ))}
+                                    </Grid>
+                                </Box>
+                            ))}
+                        </Box>
+                    ))}
+                </Box>
+            </DialogContent>
+
+            <DialogActions sx={{ p: 3 }}>
+                <Button onClick={handleClose} disabled={loading}>
+                    Cancel
+                </Button>
+                <Button
+                    variant="contained"
+                    color="primary"
+                    onClick={handleSubmit}
+                    disabled={loading || !type}
+                >
+                    {loading ? 'Creating...' : 'Create Component'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
Index: components/BuildCard.tsx
===================================================================
--- components/BuildCard.tsx	(revision f46bf5c322f1f32f3981533296aae0f885e8361e)
+++ components/BuildCard.tsx	(revision 958bc89ea8bee009837593ad11242676e8d031f1)
@@ -1,4 +1,4 @@
 import React, {useEffect, useState} from 'react';
-import {Card, CardContent, CardMedia, Typography, Box, Chip} from '@mui/material';
+import {Card, CardContent, CardMedia, Typography, Box, Chip, CircularProgress} from '@mui/material';
 import StarIcon from '@mui/icons-material/Star';
 import {onGetBuildDetails} from "../pages/+Layout.telefunc";
@@ -7,4 +7,5 @@
     const [caseImage, setCaseImage] = useState<string>("https://placehold.co/600x400?text=PC+Build");
     const [imageLoading, setImageLoading] = useState(true);
+    const [details, setDetails] = useState<any>(null);
 
     const formattedPrice = new Intl.NumberFormat('en-US', {
@@ -14,13 +15,31 @@
 
     useEffect(() => {
+        setImageLoading(true);
         onGetBuildDetails({buildId: build.id})
-            .then(details => {
-                const caseComponent = details.components.find((c: any) => c.type === 'case');
-                setCaseImage(caseComponent?.imgUrl || caseComponent?.imgUrl || "https://placehold.co/600x400?text=PC+Build");
+            .then(fullDetails => {
+                setDetails(fullDetails);
+
+                const caseComponent = fullDetails.components?.find((c: any) => c.type === 'case');
+                setCaseImage(
+                    caseComponent?.imgUrl ||
+                    "https://placehold.co/600x400?text=PC+Build"
+                );
             })
-            .catch(() => {
+            .catch((error) => {
+                console.error("Failed to load build details:", error);
+                setDetails(null);
             })
-            .finally(() => setImageLoading(false));
+            .finally(() => {
+                setImageLoading(false);
+            });
     }, [build.id]);
+
+    if (imageLoading) {
+        return (
+            <Card sx={{width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+                <CircularProgress />
+            </Card>
+        );
+    }
 
     return (
@@ -44,5 +63,5 @@
                 <CardMedia
                     component="img"
-                    image={caseImage || '/placeholder-pc.png'}
+                    image={caseImage}
                     alt={build.name}
                     sx={{
@@ -60,7 +79,17 @@
 
             <CardContent sx={{flexGrow: 1, display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
+                <Box sx={{mb: 1}}>
+                    <Typography variant="h6" component="div" fontWeight="bold">
+                        {build.name}
+                    </Typography>
+                </Box>
+
                 <Box sx={{mb: 2}}>
-                    <Typography variant="h6" component="div" fontWeight="bold" wrap title={build.name}>
-                        {build.name}
+                    <Typography
+                        variant="body2"
+                        color="text.secondary"
+                        sx={{fontStyle: 'italic', fontSize: '0.875rem'}}
+                    >
+                        {details?.description || "No description provided."}
                     </Typography>
                 </Box>
@@ -75,7 +104,7 @@
                     />
                     <Box sx={{display: 'flex', alignItems: 'center'}}>
-                        <StarIcon sx={{color: '#faaf00', fontSize: 20, mr: 0.5}}/>
+                        <StarIcon sx={{color: '#faaf00', fontSize: 20, ml: 1}}/>
                         <Typography variant="body2" fontWeight="bold">
-                            {Number(build.avgRating || 5).toFixed(1)}
+                            {Number(build.avgRating || 0).toFixed(1)}
                         </Typography>
                     </Box>
Index: components/BuildDetailsDialog.tsx
===================================================================
--- components/BuildDetailsDialog.tsx	(revision f46bf5c322f1f32f3981533296aae0f885e8361e)
+++ components/BuildDetailsDialog.tsx	(revision 958bc89ea8bee009837593ad11242676e8d031f1)
@@ -1,3 +1,3 @@
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';
 import {
     Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid, Box, Typography,
@@ -51,8 +51,7 @@
     }, [open, buildId]);
 
-    // Ownership check for edit button
     useEffect(() => {
         if (open && buildId !== null && typeof buildId === 'number') {
-            onGetBuildState({ buildId })  // ← Only buildId, no userId!
+            onGetBuildState({buildId})
                 .then(state => {
                     setIsOwner(!!state);
@@ -91,5 +90,5 @@
 
         try {
-            const newBuildId = await onCloneBuild({ buildId: cloningBuildId });
+            const newBuildId = await onCloneBuild({buildId: cloningBuildId});
             window.location.href = `/forge?buildId=${newBuildId}`;
             setCloneDialogOpen(false);
Index: database/drizzle/util/componentFieldConfig.ts
===================================================================
--- database/drizzle/util/componentFieldConfig.ts	(revision f46bf5c322f1f32f3981533296aae0f885e8361e)
+++ database/drizzle/util/componentFieldConfig.ts	(revision 958bc89ea8bee009837593ad11242676e8d031f1)
@@ -66,6 +66,6 @@
 
 export const requiredFields: Record<ComponentType, string[]> = {
-    cpu: ['socket', 'cores', 'threads', 'baseClock', 'tdp'],
-    gpu: ['vram', 'tdp', 'chipset', 'length'],
+    cpu: ['socket', 'cores', 'threads', 'baseClock', 'boostClock', 'tdp'],
+    gpu: ['vram', 'baseClock', 'boostClock', 'tdp', 'chipset', 'length'],
     memory: ['type', 'speed', 'capacity', 'modules'],
     storage: ['type', 'capacity', 'formFactor'],
Index: pages/dashboard/admin/+Page.tsx
===================================================================
--- pages/dashboard/admin/+Page.tsx	(revision f46bf5c322f1f32f3981533296aae0f885e8361e)
+++ pages/dashboard/admin/+Page.tsx	(revision 958bc89ea8bee009837593ad11242676e8d031f1)
@@ -10,4 +10,6 @@
 import BuildIcon from '@mui/icons-material/Build';
 import MemoryIcon from '@mui/icons-material/Memory';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 import {
@@ -19,6 +21,6 @@
 import BuildCard from '../../../components/BuildCard';
 import BuildDetailsDialog from '../../../components/BuildDetailsDialog';
-import DeleteIcon from "@mui/icons-material/Delete";
 import {onDeleteBuild} from "../user/userDashboard.telefunc";
+import AddComponentDialog from "../../../components/AddComponentDialog";
 
 export default function AdminDashboard() {
@@ -26,6 +28,11 @@
     const [loading, setLoading] = useState(true);
     const [selectedBuildId, setSelectedBuildId] = useState<number | null>(null);
-    const [deleteDialog, setDeleteDialog] = useState<{ open: boolean, buildId: number | null, buildName: string }>({ open: false, buildId: null, buildName: '' });
+    const [deleteDialog, setDeleteDialog] = useState<{
+        open: boolean,
+        buildId: number | null,
+        buildName: string
+    }>({open: false, buildId: null, buildName: ''});
     const [deleteLoading, setDeleteLoading] = useState(false);
+    const [addDialogOpen, setAddDialogOpen] = useState(false);
 
     const [buildApprovalDialog, setBuildApprovalDialog] = useState<{
@@ -45,4 +52,5 @@
 
     const loadData = () => {
+        setLoading(true);
         getAdminInfoAndData()
             .then(res => {
@@ -53,4 +61,5 @@
                 console.error(err);
                 alert("Failed to load admin data. Are you an admin?");
+                setLoading(false);
             });
     };
@@ -114,5 +123,5 @@
 
     const openDeleteDialog = (buildId: number, buildName: string) => {
-        setDeleteDialog({ open: true, buildId, buildName });
+        setDeleteDialog({open: true, buildId, buildName});
     };
 
@@ -122,6 +131,6 @@
         try {
             await onDeleteBuild({buildId: deleteDialog.buildId});
-            setDeleteDialog({ open: false, buildId: null, buildName: '' });
-            loadData(); // refresh na user i favorite builds
+            setDeleteDialog({open: false, buildId: null, buildName: ''});
+            loadData();
             setSelectedBuildId(null);
         } catch (e) {
@@ -132,6 +141,21 @@
     };
 
-    if (loading) return <Box sx={{p: 5, textAlign: 'center'}}><CircularProgress/></Box>;
-    if (!data) return <Box sx={{p: 5, textAlign: 'center'}}>Access Denied</Box>;
+    if (loading) {
+        return (
+            <Container maxWidth="xl" sx={{mt: 4, mb: 10, display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh'}}>
+                <CircularProgress />
+            </Container>
+        );
+    }
+
+    if (!data) {
+        return (
+            <Container maxWidth="xl" sx={{mt: 4, mb: 10, textAlign: 'center', p: 5}}>
+                <Typography variant="h6" color="error">
+                    Access Denied - Admin privileges required
+                </Typography>
+            </Container>
+        );
+    }
 
     return (
@@ -151,6 +175,8 @@
                             <AdminPanelSettingsIcon sx={{fontSize: 70}}/>
                         </Avatar>
-                        <Typography variant="h5" fontWeight="bold">{data.admin.username}</Typography>
-                        <Typography variant="body2" sx={{opacity: 0.7, mb: 3}}>{data.admin.email}</Typography>
+                        <Typography variant="h5" fontWeight="bold">{data.admin?.username || 'Admin'}</Typography>
+                        <Typography variant="body2" sx={{opacity: 0.7, mb: 3}}>
+                            {data.admin?.email || 'admin@example.com'}
+                        </Typography>
 
                         <Chip label="ADMINISTRATOR" color="error" variant="outlined" sx={{fontWeight: 'bold'}}/>
@@ -162,4 +188,18 @@
                             </Typography>
                             <Typography variant="caption">Pending Builds</Typography>
+                        </Box>
+
+                        <Box sx={{width: '100%', textAlign: 'center', mt: 3}}>
+                            <Button
+                                variant="contained"
+                                color="warning"
+                                size="large"
+                                fullWidth
+                                startIcon={<BuildIcon />}
+                                onClick={() => setAddDialogOpen(true)}
+                                sx={{ mb: 2 }}
+                            >
+                                Add Component
+                            </Button>
                         </Box>
                     </Paper>
@@ -190,21 +230,32 @@
                                         </TableHead>
                                         <TableBody>
-                                            {data.componentSuggestions.map((sug: any) => (
+                                            {data.componentSuggestions?.map((sug: any) => (
                                                 <TableRow key={sug.id}>
                                                     <TableCell sx={{maxWidth: 300}}>
-                                                        <a href={sug.link} title={sug.link}
-                                                           style={{textDecoration: 'none', color: 'inherit'}}>
+                                                        <a
+                                                            href={sug.link}
+                                                            target="_blank"
+                                                            rel="noopener noreferrer"
+                                                            title={sug.link}
+                                                            style={{textDecoration: 'none', color: 'inherit'}}
+                                                        >
                                                             {sug.description || sug.link}
                                                         </a>
                                                     </TableCell>
-                                                    <TableCell>{sug.componentType.toUpperCase()}</TableCell>
+                                                    <TableCell>{sug.componentType?.toUpperCase()}</TableCell>
                                                     <TableCell>{sug.userId}</TableCell>
                                                     <TableCell align="right">
-                                                        <IconButton size="small" color="success"
-                                                                    onClick={() => openSuggestionReview(sug.id, 'approved')}>
+                                                        <IconButton
+                                                            size="small"
+                                                            color="success"
+                                                            onClick={() => openSuggestionReview(sug.id, 'approved')}
+                                                        >
                                                             <CheckCircleIcon/>
                                                         </IconButton>
-                                                        <IconButton size="small" color="error"
-                                                                    onClick={() => openSuggestionReview(sug.id, 'rejected')}>
+                                                        <IconButton
+                                                            size="small"
+                                                            color="error"
+                                                            onClick={() => openSuggestionReview(sug.id, 'rejected')}
+                                                        >
                                                             <CancelIcon/>
                                                         </IconButton>
@@ -232,5 +283,5 @@
                                     <Grid container spacing={2}>
                                         {data.pendingBuilds.map((build: any) => (
-                                            <Grid item xs={12} md={4} key={build.id}>
+                                            <Grid item xs={12} sm={6} md={4} lg={3} key={build.id}>
                                                 <Box sx={{position: 'relative'}}>
                                                     <BuildCard
@@ -242,8 +293,5 @@
                                                         display: 'flex',
                                                         gap: 1,
-                                                        justifyContent: 'center',
-                                                        bgcolor: '#292929',
-                                                        p: 1,
-                                                        borderRadius: 1
+                                                        justifyContent: 'center'
                                                     }}>
                                                         <Button
@@ -251,6 +299,9 @@
                                                             color="warning"
                                                             size="small"
-                                                            startIcon={<BuildIcon/>}
-                                                            onClick={() => openBuildApproval(build.id, build.name)}
+                                                            startIcon={<BuildIcon />}
+                                                            onClick={(e) => {
+                                                                e.stopPropagation();
+                                                                openBuildApproval(build.id, build.name);
+                                                            }}
                                                         >
                                                             Review
@@ -275,11 +326,11 @@
                                     <Grid container spacing={2}>
                                         {data.userBuilds.slice(0, 4).map((build: any) => (
-                                            <Grid item xs={12} sm={6} md={4} key={build.id}>
-                                                <Box sx={{ position: 'relative' }}>
+                                            <Grid item xs={12} sm={6} md={4} lg={3} key={build.id}>
+                                                <Box sx={{position: 'relative'}}>
                                                     <BuildCard
                                                         build={build}
                                                         onClick={() => setSelectedBuildId(build.id)}
                                                     />
-                                                    <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+                                                    <Box sx={{mt: 1, display: 'flex', justifyContent: 'center'}}>
                                                         <Button
                                                             variant="outlined"
@@ -291,5 +342,5 @@
                                                                 openDeleteDialog(build.id, build.name);
                                                             }}
-                                                            sx={{ width: '100%' }}
+                                                            fullWidth
                                                         >
                                                             Delete
@@ -307,12 +358,16 @@
             </Grid>
 
-            <Dialog open={suggestionDialog.open}
-                    onClose={() => setSuggestionDialog({...suggestionDialog, open: false})}>
+            <Dialog open={suggestionDialog.open} onClose={() => setSuggestionDialog({...suggestionDialog, open: false})}>
                 <DialogTitle>Review Component Suggestion</DialogTitle>
                 <DialogContent>
                     <Typography gutterBottom>Status: <b>{suggestionDialog.action.toUpperCase()}</b></Typography>
                     <TextField
-                        fullWidth label="Admin Comment" multiline rows={3}
-                        value={adminComment} onChange={(e) => setAdminComment(e.target.value)}
+                        fullWidth
+                        label="Admin Comment"
+                        multiline
+                        rows={3}
+                        value={adminComment}
+                        onChange={(e) => setAdminComment(e.target.value)}
+                        sx={{ mt: 2 }}
                     />
                 </DialogContent>
@@ -323,6 +378,8 @@
             </Dialog>
 
-            <Dialog open={buildApprovalDialog.open}
-                    onClose={() => setBuildApprovalDialog({open: false, buildId: null, buildName: ''})}>
+            <Dialog
+                open={buildApprovalDialog.open}
+                onClose={() => setBuildApprovalDialog({open: false, buildId: null, buildName: ''})}
+            >
                 <DialogTitle>Review Build</DialogTitle>
                 <DialogContent>
@@ -368,5 +425,8 @@
             </Dialog>
 
-            <Dialog open={deleteDialog.open} onClose={() => setDeleteDialog({ open: false, buildId: null, buildName: '' })}>
+            <Dialog
+                open={deleteDialog.open}
+                onClose={() => setDeleteDialog({open: false, buildId: null, buildName: ''})}
+            >
                 <DialogTitle>Delete Build</DialogTitle>
                 <DialogContent>
@@ -378,5 +438,5 @@
                 <DialogActions>
                     <Button
-                        onClick={() => setDeleteDialog({ open: false, buildId: null, buildName: '' })}
+                        onClick={() => setDeleteDialog({open: false, buildId: null, buildName: ''})}
                         disabled={deleteLoading}
                     >
@@ -388,5 +448,5 @@
                         color="error"
                         disabled={deleteLoading}
-                        startIcon={deleteLoading ? <CircularProgress size={20} /> : <DeleteIcon />}
+                        startIcon={deleteLoading ? <CircularProgress size={20}/> : <DeleteIcon />}
                     >
                         {deleteLoading ? 'Deleting...' : 'Delete Build'}
@@ -397,9 +457,17 @@
             <BuildDetailsDialog
                 open={!!selectedBuildId}
-                buildId={selectedBuildId}
-                currentUser={data.admin?.id}
+                buildId={selectedBuildId!}
+                currentUser={data.admin}
                 onClose={() => setSelectedBuildId(null)}
-                onClone={() => alert("Clone disabled in admin view")}
                 isDashboardView={true}
+            />
+
+            <AddComponentDialog
+                open={addDialogOpen}
+                onClose={() => setAddDialogOpen(false)}
+                onSuccess={() => {
+                    loadData();
+                    setAddDialogOpen(false);
+                }}
             />
         </Container>
Index: pages/dashboard/admin/adminDashboard.telefunc.ts
===================================================================
--- pages/dashboard/admin/adminDashboard.telefunc.ts	(revision f46bf5c322f1f32f3981533296aae0f885e8361e)
+++ pages/dashboard/admin/adminDashboard.telefunc.ts	(revision 958bc89ea8bee009837593ad11242676e8d031f1)
@@ -1,4 +1,4 @@
 import * as drizzleQueries from "../../../database/drizzle/queries";
-import { requireAdmin } from "../../../server/telefunc/ctx";
+import {requireAdmin} from "../../../server/telefunc/ctx";
 import {Abort} from "telefunc";
 import { validateComponentSpecificData } from "../../../database/drizzle/util/componentFieldConfig";
Index: pages/forge/+Page.tsx
===================================================================
--- pages/forge/+Page.tsx	(revision f46bf5c322f1f32f3981533296aae0f885e8361e)
+++ pages/forge/+Page.tsx	(revision 958bc89ea8bee009837593ad11242676e8d031f1)
@@ -3,5 +3,5 @@
     Container, Paper, Typography, Box, Table, TableBody, TableCell, TableContainer, TableHead, TableRow,
     Button, IconButton, Avatar, TextField, Grid, Chip, CircularProgress,
-    Menu, MenuItem, ListItemIcon
+    Menu, MenuItem, ListItemIcon, Dialog, DialogTitle, DialogContent, DialogActions
 } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
@@ -18,5 +18,6 @@
     onRemoveComponentFromBuild,
     onDeleteBuild,
-    onGetBuildState, onGetBuildComponents
+    onGetBuildState,
+    onGetBuildComponents
 } from './forge.telefunc';
 
@@ -57,4 +58,6 @@
     const [detailsOpen, setDetailsOpen] = useState<any>(null);
     const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+    const [submitDialogOpen, setSubmitDialogOpen] = useState(false);  // NEW
+    const [tempDescription, setTempDescription] = useState("");      // NEW
     const isSubmittedRef = React.useRef(false);
 
@@ -63,4 +66,14 @@
         setTotalPrice(price);
     }, [slots]);
+
+    useEffect(() => {
+        if (buildId && buildName.trim()) {
+            const timeoutId = setTimeout(() => {
+                saveBuildState({ buildId, name: buildName.trim(), description });
+            }, 1000);
+
+            return () => clearTimeout(timeoutId);
+        }
+    }, [buildId, buildName, description]);
 
     useEffect(() => {
@@ -91,30 +104,38 @@
         if (urlBuildId && Number.isInteger(Number(urlBuildId)) && Number(urlBuildId) > 0) {
             const loadBuildId = Number(urlBuildId);
-            onGetBuildComponents({ buildId: loadBuildId })
-                .then(async (components) => {
-                    if (components && components.length > 0) {
+
+            onGetBuildState({ buildId: loadBuildId })
+                .then((buildState) => {
+                    if (buildState) {
                         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");
+                        setBuildName(buildState.build.name);
+                        setDescription(buildState.build.description || "");
                     }
                 })
-                .catch(() => {});
+                .catch(() => {})
+                .finally(() => {
+                    onGetBuildComponents({ buildId: loadBuildId })
+                        .then(async (components) => {
+                            if (components && components.length > 0) {
+                                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(() => {});
+                });
         }
     }, []);
@@ -159,5 +180,4 @@
     };
 
-
     const handleRemovePart = async (slotId: string) => {
         const slot = slots.find(s => s.id === slotId);
@@ -199,12 +219,21 @@
     };
 
-    const handleSubmit = async () => {
+    const handleSubmit = () => {
         if (!buildName.trim()) return alert("Please name your build!");
         if (!buildId) return alert("You must add at least one component before submitting.");
 
+        setTempDescription(description || "");
+        setSubmitDialogOpen(true);
+    };
+
+    const handleSubmitConfirm = async () => {
+        if(!buildId) return;
+
         setIsSubmitting(true);
+        setSubmitDialogOpen(false);
+
         try {
+            await saveBuildState({ buildId, name: buildName.trim(), description: tempDescription });
             const result = await onEditBuild({buildId});
-
             if (!result) throw new Error("Failed to save build");
 
@@ -218,5 +247,4 @@
         }
     };
-
 
     const activeSlotType = useMemo(() => {
@@ -410,4 +438,44 @@
                 onClose={() => setDetailsOpen(null)}
             />
+
+            <Dialog open={submitDialogOpen} onClose={() => setSubmitDialogOpen(false)} maxWidth="sm" fullWidth>
+                <DialogTitle sx={{ bgcolor: '#ff8201', color: 'white', fontWeight: 'bold' }}>
+                    Build Description
+                </DialogTitle>
+                <DialogContent sx={{ p: 3 }}>
+                    <Typography variant="body1" sx={{ mb: 2, color: 'text.secondary' }}>
+                        Add some notes about your build (optional):
+                    </Typography>
+                    <TextField
+                        fullWidth
+                        multiline
+                        rows={4}
+                        placeholder="e.g. Gaming build for 1440p, quiet operation, future-proof..."
+                        value={tempDescription}
+                        onChange={(e) => setTempDescription(e.target.value)}
+                        variant="outlined"
+                    />
+                </DialogContent>
+                <DialogActions sx={{ p: 3, pt: 0 }}>
+                    <Button onClick={() => setSubmitDialogOpen(false)}>
+                        Cancel
+                    </Button>
+                    <Button
+                        variant="contained"
+                        color="primary"
+                        onClick={handleSubmitConfirm}
+                        disabled={isSubmitting}
+                    >
+                        {isSubmitting ? (
+                            <>
+                                <CircularProgress size={20} sx={{ mr: 1 }} />
+                                Submitting...
+                            </>
+                        ) : (
+                            'Submit Build'
+                        )}
+                    </Button>
+                </DialogActions>
+            </Dialog>
         </Container>
     );