Index: components/ComponentDetailsDialog.tsx
===================================================================
--- components/ComponentDetailsDialog.tsx	(revision 8a7f936ef2c6040183ae33f4b63947eecf8bf3b2)
+++ components/ComponentDetailsDialog.tsx	(revision 92fafb3082c4f8125549aa91ec28c46ea0366d99)
@@ -2,5 +2,5 @@
 import {
     Dialog, DialogTitle, DialogContent, DialogActions, Button,
-    Typography, Box, Grid, Chip, CircularProgress, IconButton,
+    Typography, Box, Chip, CircularProgress, IconButton,
     Table, TableBody, TableCell, TableContainer, TableRow, Paper
 } from '@mui/material';
@@ -92,6 +92,7 @@
             open={open}
             onClose={onClose}
-            maxWidth="lg"
-            // fullWidth
+            maxWidth="md"
+            fullWidth
+            scroll="body"
             sx={{zIndex: 1400}}
         >
@@ -116,5 +117,10 @@
             </DialogTitle>
 
-            <DialogContent dividers>
+            <DialogContent
+                sx={{
+                    p: 1,
+                    overflow: 'visible'
+                }}
+            >
                 {loading ? (
                     <Box sx={{display: 'flex', justifyContent: 'center', p: 5}}>
@@ -122,9 +128,18 @@
                     </Box>
                 ) : (
-                    <Grid container spacing={4}>
-                        <Grid item xs={12} md={4} sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+                    <Box
+                        sx={{
+                            display: 'grid',
+                            gridTemplateColumns: {
+                                xs: '1fr',
+                                md: '1fr 1fr'
+                            },
+                            gap: 4,
+                            width: '100%'
+                        }}
+                    >
+                        <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
                             <Box
                                 component="img"
-                                // src={`https://placehold.co/400x400?text=${encodeURIComponent(displayData.name)}`}
                                 src={displayData.imgUrl}
                                 alt={displayData.name}
@@ -133,8 +148,7 @@
                                     maxHeight: 300,
                                     objectFit: 'contain',
-                                    mb: 2,
-                                    // border: '1px solid #eee',
-                                    // borderRadius: 2,
-                                    p: 2
+                                    mb: 1,
+                                    mt: 7,
+                                    p: 1
                                 }}
                             />
@@ -144,21 +158,58 @@
                                 sx={{fontWeight: 'bold'}}
                             />
-                        </Grid>
-
-                        <Grid item xs={12} md={8}>
-                            <Typography variant="subtitle1" fontWeight="bold" gutterBottom
-                                        sx={{borderBottom: '2px solid #ff8201', display: 'inline-block', mb: 0.5}}>
+                        </Box>
+
+                        <Box sx={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            width: '70%'
+                        }}>
+                            <Typography
+                                variant="subtitle1"
+                                fontWeight="bold"
+                                gutterBottom
+                                sx={{
+                                    borderBottom: '2px solid #ff8201',
+                                    mb: 1,
+                                    mt: 1,
+                                    textAlign: 'center',
+                                    width: '100%'
+                                }}
+                            >
                                 Technical Specifications
                             </Typography>
 
-                            <TableContainer component={Paper} variant="outlined">
-                                <Table size="small">
+                            <TableContainer
+                                component={Paper}
+                                variant="outlined"
+                                sx={{
+                                    maxWidth: '100%',
+                                    width: '100%'
+                                }}
+                            >
+                                <Table size="medium">
                                     <TableBody>
                                         <TableRow>
-                                            <TableCell component="th" scope="row"
-                                                       sx={{fontWeight: 'bold', width: '30%', bgcolor: '#1e1e1e'}}>
+                                            <TableCell
+                                                component="th"
+                                                scope="row"
+                                                sx={{
+                                                    fontWeight: 'bold',
+                                                    width: '50%',
+                                                    bgcolor: '#1e1e1e',
+                                                    textAlign: 'center',
+                                                    px: 2
+                                                }}
+                                            >
                                                 Brand
                                             </TableCell>
-                                            <TableCell>{displayData.brand}</TableCell>
+                                            <TableCell sx={{
+                                                textAlign: 'center',
+                                                px: 2,
+                                                width: '50%'
+                                            }}>
+                                                {displayData.brand}
+                                            </TableCell>
                                         </TableRow>
 
@@ -168,12 +219,24 @@
                                             return (
                                                 <TableRow key={key}>
-                                                    <TableCell component="th" scope="row" sx={{
-                                                        fontWeight: 'bold',
-                                                        width: '30%',
-                                                        bgcolor: '#1e1e1e'
-                                                    }}>
+                                                    <TableCell
+                                                        component="th"
+                                                        scope="row"
+                                                        sx={{
+                                                            fontWeight: 'bold',
+                                                            width: '50%',
+                                                            bgcolor: '#1e1e1e',
+                                                            textAlign: 'center',
+                                                            px: 2
+                                                        }}
+                                                    >
                                                         {formatKey(key)}
                                                     </TableCell>
-                                                    <TableCell>{renderValue(key, val)}</TableCell>
+                                                    <TableCell sx={{
+                                                        textAlign: 'center',
+                                                        px: 2,
+                                                        width: '50%'
+                                                    }}>
+                                                        {renderValue(key, val)}
+                                                    </TableCell>
                                                 </TableRow>
                                             );
@@ -182,11 +245,18 @@
                                 </Table>
                             </TableContainer>
-                            <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', mt: 0.5}}>
+
+                            <Box sx={{
+                                display: 'flex',
+                                justifyContent: 'center',
+                                alignItems: 'center',
+                                mt: 1,
+                                width: '100%'
+                            }}>
                                 <Typography variant="h4" color="primary.main" fontWeight="bold">
                                     {formatMoney(displayData.price)}
                                 </Typography>
                             </Box>
-                        </Grid>
-                    </Grid>
+                        </Box>
+                    </Box>
                 )}
             </DialogContent>
@@ -198,5 +268,5 @@
                             color: 'white',
                             borderColor: '#ff8201',
-                            onHover: {backgroundColor: '#ba5d02', borderColor: '#ba5d02'}
+                            '&:hover': {backgroundColor: '#ba5d02', borderColor: '#ba5d02'}
                         }}
                 >Close</Button>