diff --git a/src/private/AddOrEditProductForm.jsx b/src/private/AddOrEditProductForm.jsx
index 9180980..ce3c591 100644
--- a/src/private/AddOrEditProductForm.jsx
+++ b/src/private/AddOrEditProductForm.jsx
@@ -34,7 +34,7 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
     }));
   };
 
-   const handleImageChange = (e) => {
+  const handleImageChange = (e) => {
     const file = e.target.files[0];
     if (!file) return;
 
@@ -101,37 +101,72 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
         onChange={handleChange}
         margin="normal"
       />
-       <Grid item xs={12} textAlign="center">
-          {product.representation && (
-            <Box mb={1}>
-              <Typography variant="subtitle1" gutterBottom>Representation</Typography>
-              <Avatar
-                variant="rounded"
-                src={product.representation}
-                sx={{ width: 120, height: 120, mx: 'auto' }}
-                 imgProps={{
-          style: {
-            objectFit: 'contain',
-            width: '100%',
-            height: '100%',
-          }
-        }}
-              />
-            </Box>
-          )}
-          <Button variant="outlined" component="label">
-            Upload Image
-            <input type="file" hidden accept="image/*" onChange={handleImageChange} />
-          </Button>
-        </Grid>
-        
-     <Box mt={2}>
-      {/* Fields... */}
-      <Box display="flex" justifyContent="flex-end" gap={1} mt={2}>
-        <Button onClick={onCancel}>Cancel</Button>
-        <Button variant="contained" onClick={handleSubmit}>Save</Button>
+      <Grid item xs={12} textAlign="center">
+        {product.representation && (
+          <Box mb={1}>
+            <Typography variant="subtitle1" gutterBottom>Representation</Typography>
+            <Avatar
+              variant="rounded"
+              src={product.representation}
+              sx={{ width: 120, height: 120, mx: 'auto' }}
+              imgProps={{
+                style: {
+                  objectFit: 'contain',
+                  width: '100%',
+                  height: '100%',
+                }
+              }}
+            />
+          </Box>
+        )}
+        <Button component="label"
+          sx={{
+            backgroundColor: 'transparent',
+            color: 'black',
+            textTransform: 'uppercase',
+            fontWeight: 600,
+            px: 3,
+            '&:hover': {
+              backgroundColor: '#26201A',
+              color: '#fff',
+            },
+          }}>
+          Upload Image
+          <input type="file" hidden accept="image/*" onChange={handleImageChange} />
+        </Button>
+      </Grid>
+
+      <Box mt={2}>
+        {/* Fields... */}
+        <Box display="flex" justifyContent="flex-end" gap={1} mt={2}>
+          <Button onClick={onCancel}
+            sx={{
+              backgroundColor: 'transparent',
+              color: 'black',
+              textTransform: 'uppercase',
+              fontWeight: 600,
+              px: 3,
+              '&:hover': {
+                backgroundColor: '#26201A',
+                color: '#fff',
+              },
+            }}>
+            Cancel</Button>
+          <Button variant="contained" onClick={handleSubmit}
+            sx={{
+              backgroundColor: '#A68A72',
+              color: '#fff',
+              borderRadius: 2,
+              textTransform: 'uppercase',
+              fontWeight: 600,
+              px: 3,
+              '&:hover': {
+                backgroundColor: '#26201A',
+              },
+            }}>
+            Save</Button>
+        </Box>
       </Box>
     </Box>
-    </Box>
   );
 }
\ No newline at end of file
diff --git a/src/private/Admin.jsx b/src/private/Admin.jsx
index 9a7c222..2958cb5 100644
--- a/src/private/Admin.jsx
+++ b/src/private/Admin.jsx
@@ -16,36 +16,36 @@ const columnsBase = [
     { field: 'stock', headerName: 'Stock', width: 100, type: 'number' },
     { field: 'category', headerName: 'Category', flex: 1 },
     {
-    field: 'representation',
-    headerName: 'Representation',
-    width: 120,
-    renderCell: (params) => (
-      <Box display="flex" justifyContent="center" width="100%">
-      <Avatar
-        variant="rounded"
-        src={params.value}
-        sx={{ width: 100, height: 48 }}
-        imgProps={{
-    style: {
-      objectFit: 'contain', // or 'cover' if you want it to fill and crop
-      width: '100%',
-      height: '100%',
+        field: 'representation',
+        headerName: 'Representation',
+        width: 120,
+        renderCell: (params) => (
+            <Box display="flex" justifyContent="center" width="100%">
+                <Avatar
+                    variant="rounded"
+                    src={params.value}
+                    sx={{ width: 100, height: 48 }}
+                    imgProps={{
+                        style: {
+                            objectFit: 'contain', // or 'cover' if you want it to fill and crop
+                            width: '100%',
+                            height: '100%',
+                        }
+                    }}
+                />
+            </Box>
+        )
     }
-  }}
-      />
-    </Box>
-    )
-  }
 ];
 
 export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
     const [rows, setRows] = useState([
-    { id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home', representation: '/favicon.png' },
-    { id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home', representation: '/logo.png' },
-    { id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home', representation: '/background.jpg' },
-    { id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home', representation: '/background.jpg' },
-    { id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home', representation: '/favicon.png' }
-  ]);
+        { id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home', representation: '/favicon.png' },
+        { id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home', representation: '/logo.png' },
+        { id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home', representation: '/background.jpg' },
+        { id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home', representation: '/background.jpg' },
+        { id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home', representation: '/favicon.png' }
+    ]);
 
     const [open, setOpen] = useState(false);
     const [editingProduct, setEditingProduct] = useState(null);
@@ -109,7 +109,7 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
             <Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="sm" fullWidth>
                 <DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
                 <DialogContent>
-                    <AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }}/>
+                    <AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }} />
                 </DialogContent>
             </Dialog>
 
@@ -121,8 +121,30 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
                         <strong>{rowToDelete?.name}</strong>?
                     </Typography>
                     <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
-                        <Button onClick={() => setConfirmOpen(false)}>Cancel</Button>
-                        <Button variant="contained" color="error" onClick={confirmDelete}>Delete</Button>
+                        <Button onClick={() => setConfirmOpen(false)}
+                            sx={{
+                                backgroundColor: 'transparent',
+                                color: 'black',
+                                textTransform: 'uppercase',
+                                fontWeight: 600,
+                                px: 3,
+                                '&:hover': {
+                                    backgroundColor: '#26201A',
+                                    color: '#fff',
+                                },
+                            }}>Cancel</Button>
+                        <Button variant="contained" color="error" onClick={confirmDelete}
+                            sx={{
+                                backgroundColor: '#A68A72',
+                                color: '#fff',
+                                borderRadius: 2,
+                                textTransform: 'uppercase',
+                                fontWeight: 600,
+                                px: 3,
+                                '&:hover': {
+                                    backgroundColor: '#26201A',
+                                },
+                            }}>Delete</Button>
                     </Box>
                 </DialogContent>
             </Dialog>
@@ -136,7 +158,18 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
                 />
 
                 <Box display="flex" justifyContent="flex-end" mt={2}>
-                    <Button variant="contained" color="primary" onClick={() => setOpen(true)}>
+                    <Button variant="contained" color="primary" onClick={() => setOpen(true)}
+                        sx={{
+                            backgroundColor: '#A68A72',
+                            color: '#fff',
+                            borderRadius: 2,
+                            textTransform: 'uppercase',
+                            fontWeight: 600,
+                            px: 3,
+                            '&:hover': {
+                                backgroundColor: '#26201A',
+                            },
+                        }}>
                         Add Product
                     </Button>
                 </Box>