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 b6e1b3c446e18031dea6a3444f7ec467670f9f2d)
+++ 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 b6e1b3c446e18031dea6a3444f7ec467670f9f2d)
+++ 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);