Index: pages/dashboard/admin/+Page.tsx
===================================================================
--- pages/dashboard/admin/+Page.tsx	(revision f46bf5c322f1f32f3981533296aae0f885e8361e)
+++ pages/dashboard/admin/+Page.tsx	(revision 41a2f81c85a6b12ebd6aff2f621dce1c8af277da)
@@ -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 41a2f81c85a6b12ebd6aff2f621dce1c8af277da)
@@ -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 41a2f81c85a6b12ebd6aff2f621dce1c8af277da)
@@ -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>
     );