diff --git a/src/App.css b/src/App.css
index b9d355d..e1123f2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -40,3 +40,47 @@
 .read-the-docs {
   color: #888;
 }
+
+.button-gold {
+  background-color: #A68A72 !important;
+  color: #fff !important;
+  border-radius: 16px !important;
+  text-transform: uppercase !important;
+  font-weight: 600 !important;
+  padding-left: 24px !important;
+  padding-right: 24px !important;
+}
+
+.button-gold:hover {
+  background-color: #26201A !important;
+}
+
+
+.button-transparent {
+  background-color: transparent !important;
+  color: black !important;
+  border-radius: 16px !important;
+  text-transform: uppercase !important;
+  font-weight: 600 !important;
+  padding-left: 24px !important;
+  padding-right: 24px !important;
+}
+
+.button-transparent:hover {
+  background-color: #26201A !important;
+  color: #fff !important;
+}
+/* 
+.button-transparent {
+  background-color: transparent !important;
+  color: black !important;
+  text-transform: uppercase !important;
+  font-weight: 600 !important;
+  padding-left: 24px !important;
+  padding-right: 24px !important;
+}
+
+.button-transparent:hover {
+  background-color: #26201A !important;
+  color: #fff !important;
+} */
\ No newline at end of file
diff --git a/src/private/AddOrEditProductForm.jsx b/src/private/AddOrEditProductForm.jsx
index ce3c591..d78393a 100644
--- a/src/private/AddOrEditProductForm.jsx
+++ b/src/private/AddOrEditProductForm.jsx
@@ -119,18 +119,7 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
             />
           </Box>
         )}
-        <Button component="label"
-          sx={{
-            backgroundColor: 'transparent',
-            color: 'black',
-            textTransform: 'uppercase',
-            fontWeight: 600,
-            px: 3,
-            '&:hover': {
-              backgroundColor: '#26201A',
-              color: '#fff',
-            },
-          }}>
+        <Button component="label" className="button-transparent">
           Upload Image
           <input type="file" hidden accept="image/*" onChange={handleImageChange} />
         </Button>
@@ -139,31 +128,9 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
       <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',
-              },
-            }}>
+          <Button onClick={onCancel} className='button-transparent'>
             Cancel</Button>
-          <Button variant="contained" onClick={handleSubmit}
-            sx={{
-              backgroundColor: '#A68A72',
-              color: '#fff',
-              borderRadius: 2,
-              textTransform: 'uppercase',
-              fontWeight: 600,
-              px: 3,
-              '&:hover': {
-                backgroundColor: '#26201A',
-              },
-            }}>
+          <Button variant="contained" onClick={handleSubmit} className="button-gold">
             Save</Button>
         </Box>
       </Box>
diff --git a/src/private/Admin.jsx b/src/private/Admin.jsx
index 2958cb5..b9eb0d4 100644
--- a/src/private/Admin.jsx
+++ b/src/private/Admin.jsx
@@ -7,6 +7,8 @@ import AddOrEditProductForm from './AddOrEditProductForm.jsx';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 
+import '../App.css';
+
 const columnsBase = [
     { field: 'id', headerName: 'ID', width: 70 },
     { field: 'company', headerName: 'Company', flex: 1 },
@@ -121,30 +123,8 @@ 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)}
-                            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>
+                        <Button onClick={() => setConfirmOpen(false)} className='button-transparent'>Cancel</Button>
+                        <Button variant="contained" onClick={confirmDelete} className="button-gold">Delete</Button>
                     </Box>
                 </DialogContent>
             </Dialog>
@@ -158,18 +138,7 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
                 />
 
                 <Box display="flex" justifyContent="flex-end" mt={2}>
-                    <Button variant="contained" color="primary" onClick={() => setOpen(true)}
-                        sx={{
-                            backgroundColor: '#A68A72',
-                            color: '#fff',
-                            borderRadius: 2,
-                            textTransform: 'uppercase',
-                            fontWeight: 600,
-                            px: 3,
-                            '&:hover': {
-                                backgroundColor: '#26201A',
-                            },
-                        }}>
+                    <Button variant="contained" onClick={() => setOpen(true)} className="button-gold">
                         Add Product
                     </Button>
                 </Box>