Index: components/ComponentDialog.tsx
===================================================================
--- components/ComponentDialog.tsx	(revision a932c9ee67f19f8edeb101f6ee34cb81e6572601)
+++ components/ComponentDialog.tsx	(revision 107303c3b80ea0a7e73f7eda921769dcd0f8ff56)
@@ -1,3 +1,3 @@
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';
 import {
     Dialog, DialogContent, IconButton, Grid, Box, Typography,
@@ -9,10 +9,10 @@
 import SortIcon from '@mui/icons-material/Sort';
 
-import { onGetAllComponents } from '../pages/+Layout.telefunc';
+import {onGetAllComponents} from '../pages/+Layout.telefunc';
 import ComponentDetailsDialog from "./ComponentDetailsDialog";
 
 const formatMoney = (amount: number) => `$${amount}`;
 
-export default function ComponentBrowserDialog({ open, category, onClose }: any) {
+export default function ComponentBrowserDialog({open, category, onClose}: any) {
     const [components, setComponents] = useState<any[]>([]);
     const [loading, setLoading] = useState(false);
@@ -30,5 +30,5 @@
             setSortOrder('price_desc');
 
-            onGetAllComponents({ componentType: category })
+            onGetAllComponents({componentType: category})
                 .then((data) => {
                     setComponents(data);
@@ -70,24 +70,30 @@
             maxWidth="xl"
             fullWidth
-            PaperProps={{ sx: { height: '90vh' } }}
+            sx={{height: '90vh'}}
         >
-            <AppBar position="relative" sx={{ bgcolor: '#ff8201' }}>
+            <AppBar position="relative" sx={{bgcolor: '#ff8201'}}>
                 <Toolbar>
-                    <Typography sx={{ ml: 2, flex: 1, textTransform: 'capitalize' }} variant="h6" component="div">
+                    <Typography sx={{ml: 2, flex: 1, textTransform: 'capitalize'}} variant="h6" component="div">
                         Browsing: <b>{category === 'gpu' ? 'Graphics Cards' : category?.toUpperCase()}</b>
                     </Typography>
                     <IconButton edge="start" color="inherit" onClick={onClose}>
-                        <CloseIcon />
+                        <CloseIcon/>
                     </IconButton>
                 </Toolbar>
             </AppBar>
 
-            <DialogContent sx={{ p: 0, display: 'flex', height: '100%' }}>
-                <Box sx={{ width: 300, borderRight: '1px solid #ddd', p: 3, bgcolor: '#1e1e1e', display: { xs: 'none', md: 'block' } }}>
-                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-                        <SortIcon sx={{ mr: 1 }} />
+            <DialogContent sx={{p: 0, display: 'flex', height: '100%'}}>
+                <Box sx={{
+                    width: 300,
+                    borderRight: '1px solid #ddd',
+                    p: 3,
+                    bgcolor: '#1e1e1e',
+                    display: {xs: 'none', md: 'block'}
+                }}>
+                    <Box sx={{display: 'flex', alignItems: 'center', mb: 2}}>
+                        <SortIcon sx={{mr: 1}}/>
                         <Typography variant="h6">Sort By</Typography>
                     </Box>
-                    <FormControl fullWidth size="small" sx={{ mb: 4 }}>
+                    <FormControl fullWidth size="small" sx={{mb: 4}}>
                         <InputLabel>Price</InputLabel>
                         <Select
@@ -101,8 +107,8 @@
                     </FormControl>
 
-                    <Divider sx={{ mb: 3 }} />
-
-                    <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
-                        <FilterListIcon sx={{ mr: 1 }} />
+                    <Divider sx={{mb: 3}}/>
+
+                    <Box sx={{display: 'flex', alignItems: 'center', mb: 2}}>
+                        <FilterListIcon sx={{mr: 1}}/>
                         <Typography variant="h6">Filters</Typography>
                     </Box>
@@ -115,7 +121,7 @@
                         min={0}
                         max={components.length > 0 ? Math.max(...components.map(c => Number(c.price))) : 2000}
-                        sx={{ color: '#ff8201', mb: 2}}
+                        sx={{color: '#ff8201', mb: 2}}
                     />
-                    <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 2 }}>
+                    <Box sx={{display: 'flex', justifyContent: 'space-between', mb: 2}}>
                         <Typography variant="caption">{formatMoney(priceRange[0])}</Typography>
                         <Typography variant="caption">{formatMoney(priceRange[1])}</Typography>
@@ -133,6 +139,6 @@
                             {availableBrands.map((brand) => (
                                 <MenuItem key={brand} value={brand}>
-                                    <Checkbox checked={selectedBrands.indexOf(brand) > -1} />
-                                    <ListItemText primary={brand} />
+                                    <Checkbox checked={selectedBrands.indexOf(brand) > -1}/>
+                                    <ListItemText primary={brand}/>
                                 </MenuItem>
                             ))}
@@ -141,31 +147,49 @@
                 </Box>
 
-                <Box sx={{ flex: 1, p: 3, overflowY: 'auto' }}>
+                <Box sx={{flex: 1, p: 3, overflowY: 'auto'}}>
                     {loading ? (
-                        <Box sx={{ display: 'flex', justifyContent: 'center', mt: 10 }}>
-                            <CircularProgress sx={{ color: '#ff8201' }} />
+                        <Box sx={{display: 'flex', justifyContent: 'center', mt: 10}}>
+                            <CircularProgress sx={{color: '#ff8201'}}/>
                         </Box>
                     ) : (
-                        <Grid container spacing={3}>
+                        <Grid container spacing={1}>
                             {processedComponents.map((comp) => (
                                 <Grid item xs={12} sm={6} md={4} lg={3} key={comp.id}>
-                                    <Card elevation={3} sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
+                                    <Card elevation={1} sx={{
+                                        height: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        maxWidth: 220,
+                                        width: 220,
+                                        overflow: 'hidden',
+                                        whiteSpace: 'nowrap',
+                                        textOverflow: 'ellipsis'
+                                    }}>
                                         <CardMedia
                                             component="img"
                                             height="140"
-
-                                            image={`https://placehold.co/400x400?text=${encodeURIComponent(comp.name)}`}
+                                            // image={`https://placehold.co/400x400?text=${encodeURIComponent(comp.name)}`}
+                                            image={comp.imgUrl}
                                             alt={comp.name}
-                                            sx={{ p: 2, objectFit: 'contain' }}
+                                            sx={{p: 2, objectFit: 'contain'}}
                                         />
-                                        <CardContent sx={{ flexGrow: 1 }}>
-                                            <Typography variant="caption" color="text.secondary" sx={{ textTransform: 'uppercase' }}>
+                                        <CardContent sx={{flexGrow: 1}}>
+                                            <Typography variant="caption" color="text.secondary"
+                                                        sx={{textTransform: 'uppercase'}}>
                                                 {comp.brand}
                                             </Typography>
-                                            <Typography variant="subtitle1" fontWeight="bold" sx={{ lineHeight: 1.2, mb: 1 }}>
+                                            <Typography variant="subtitle1" fontWeight="bold" sx={{
+                                                lineHeight: 1.2,
+                                                mb: 1,
+                                            }}>
                                                 {comp.name}
                                             </Typography>
 
-                                            <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 2 }}>
+                                            <Box sx={{
+                                                display: 'flex',
+                                                justifyContent: 'space-between',
+                                                alignItems: 'center',
+                                                mt: 2
+                                            }}>
                                                 <Typography variant="h6" color="primary.main">
                                                     {formatMoney(comp.price)}
@@ -173,10 +197,15 @@
                                             </Box>
                                         </CardContent>
-                                        <Box sx={{ p: 2, pt: 0}}>
+                                        <Box sx={{p: 2, pt: 0}}>
                                             <Button
                                                 fullWidth
                                                 variant="outlined"
-                                                onClick={()=> setSelectedComponent(comp)}
-                                                sx={{backgroundColor:'#ff8201', color: 'white', borderColor: '#ff8201', onHover: { backgroundColor: '#e67300', borderColor: '#e67300' } }}
+                                                onClick={() => setSelectedComponent(comp)}
+                                                sx={{
+                                                    backgroundColor: '#ff8201',
+                                                    color: 'white',
+                                                    borderColor: '#ff8201',
+                                                    onHover: {backgroundColor: '#e67300', borderColor: '#e67300'}
+                                                }}
                                             >
                                                 Details
@@ -187,5 +216,5 @@
                             ))}
                             {processedComponents.length === 0 && (
-                                <Box sx={{ width: '100%', textAlign: 'center', mt: 5 }}>
+                                <Box sx={{width: '100%', textAlign: 'center', mt: 5}}>
                                     <Typography variant="h6" color="text.secondary">No components match.</Typography>
                                 </Box>