diff --git a/src/components/mui/__tests__/mui-table-editable.test.js b/src/components/mui/__tests__/mui-table-editable.test.js
index 87da923..d76a0ab 100644
--- a/src/components/mui/__tests__/mui-table-editable.test.js
+++ b/src/components/mui/__tests__/mui-table-editable.test.js
@@ -359,22 +359,4 @@ describe("MuiTableEditable", () => {
       expect(sx.color).toBe("text.disabled");
     });
   });
-
-  test("does not apply archived styles to archive/unarchive action cell", () => {
-    setup({
-      options: { sortCol: "name", sortDir: -1, disableProp: "is_archived" },
-      data: [{ id: 1, name: "Alice", role: "Dev", age: 35, is_archived: true }],
-      onArchive: jest.fn()
-    });
-
-    const unarchiveButton = screen.getByRole("button", {
-      name: "general.unarchive"
-    });
-    const actionCell = unarchiveButton.closest("td");
-    const sx = getCellSx(actionCell);
-
-    expect(sx.width).toBe(80);
-    expect(sx.backgroundColor).toBeUndefined();
-    expect(sx.color).toBeUndefined();
-  });
 });
diff --git a/src/components/mui/editable-table/mui-table-editable.js b/src/components/mui/editable-table/mui-table-editable.js
index 9a0cf55..3a9e75c 100644
--- a/src/components/mui/editable-table/mui-table-editable.js
+++ b/src/components/mui/editable-table/mui-table-editable.js
@@ -28,6 +28,7 @@ import { IconButton, TextField } from "@mui/material";
 import EditIcon from "@mui/icons-material/Edit";
 import DeleteIcon from "@mui/icons-material/Delete";
 import { visuallyHidden } from "@mui/utils";
+import styles from "./mui-table-editable.module.less";
 
 import {
   DEFAULT_PER_PAGE,
@@ -123,7 +124,7 @@ const EditableCell = ({ value, isEditing, onBlur, validation }) => {
       onMouseEnter={() => setIsHovering(true)}
       onMouseLeave={() => setIsHovering(false)}
     >
-      <span style={{ flex: 1 }}>{value}</span>
+      <span style={{ flex: 1, fontWeight: "normal" }}>{value}</span>
       {isHovering && (
         <EditIcon
           fontSize="small"
@@ -197,7 +198,7 @@ const MuiTableEditable = ({
         : `${T.translate("general.row_remove_warning")} ${getName(item)}`,
       type: "warning",
       showCancelButton: true,
-      confirmButtonColor: "#DD6B55",
+      confirmButtonColor: "warning",
       confirmButtonText: T.translate("general.yes_delete")
     });
 
@@ -243,7 +244,8 @@ const MuiTableEditable = ({
                     sx={{
                       width: col.width,
                       minWidth: col.width,
-                      maxWidth: col.width
+                      maxWidth: col.width,
+                      fontWeight: "normal"
                     }}
                     align={col.align ?? "left"}
                   >
@@ -256,6 +258,7 @@ const MuiTableEditable = ({
                             : "asc"
                         }
                         onClick={() => onSort(col.columnKey, sortDir * -1)}
+                        sx={{ fontWeight: "normal" }}
                       >
                         {col.header}
                         {sortCol === col.columnKey ? (
@@ -267,13 +270,19 @@ const MuiTableEditable = ({
                         ) : null}
                       </TableSortLabel>
                     ) : (
-                      col.header
+                      <span style={{ fontWeight: "normal" }}>{col.header}</span>
                     )}
                   </TableCell>
                 ))}
-                {onEdit && <TableCell sx={{ width: 40 }} />}
-                {onArchive && <TableCell sx={{ width: 80 }} />}
-                {onDelete && <TableCell sx={{ width: 40 }} />}
+                {onEdit && (
+                  <TableCell sx={{ width: 40, fontWeight: "normal" }} />
+                )}
+                {onArchive && (
+                  <TableCell sx={{ width: 80, fontWeight: "normal" }} />
+                )}
+                {onDelete && (
+                  <TableCell sx={{ width: 40, fontWeight: "normal" }} />
+                )}
               </TableRow>
             </TableHead>
             {/* TABLE BODY */}
@@ -286,7 +295,8 @@ const MuiTableEditable = ({
                       onClick={() => handleCellClick(row, col.columnKey)}
                       sx={getCellSx(row, {
                         cursor: isEditable(col, row) ? "pointer" : "default",
-                        padding: isEditable(col, row) ? "8px 16px" : undefined // Ensure enough space for the edit icon
+                        padding: isEditable(col, row) ? "8px 16px" : undefined,
+                        fontWeight: "normal"
                       })}
                     >
                       {isEditable(col, row) ? (
@@ -310,12 +320,17 @@ const MuiTableEditable = ({
                       ) : col.render ? (
                         col.render(row)
                       ) : (
-                        row[col.columnKey]
+                        <span style={{ fontWeight: "normal" }}>
+                          {row[col.columnKey]}
+                        </span>
                       )}
                     </TableCell>
                   ))}
                   {onEdit && (
-                    <TableCell sx={getCellSx(row)}>
+                    <TableCell
+                      sx={getCellSx(row)}
+                      className={styles.dottedBorderLeft}
+                    >
                       <IconButton
                         onClick={() => onEdit(row)}
                         size="small"
@@ -326,7 +341,13 @@ const MuiTableEditable = ({
                     </TableCell>
                   )}
                   {onArchive && (
-                    <TableCell align="center" sx={{ width: 80 }}>
+                    <TableCell
+                      align="center"
+                      sx={{
+                        ...getCellSx(row, { width: 80, fontWeight: "normal" })
+                      }}
+                      className={styles.dottedBorderLeft}
+                    >
                       <Button
                         variant="text"
                         color="inherit"
@@ -334,9 +355,10 @@ const MuiTableEditable = ({
                         onClick={() => onArchive(row)}
                         sx={{
                           fontSize: "1.3rem",
-                          fontWeight: 500,
+                          fontWeight: "normal",
                           lineHeight: "2.2rem",
-                          padding: "4px 5px"
+                          padding: "4px 5px",
+                          color: "rgba(0,0,0,0.56)"
                         }}
                       >
                         {row.is_archived
@@ -346,7 +368,10 @@ const MuiTableEditable = ({
                     </TableCell>
                   )}
                   {onDelete && (
-                    <TableCell sx={getCellSx(row)}>
+                    <TableCell
+                      sx={getCellSx(row)}
+                      className={styles.dottedBorderLeft}
+                    >
                       <IconButton
                         onClick={() => handleDelete(row)}
                         size="small"
diff --git a/src/components/mui/editable-table/styles.module.less b/src/components/mui/editable-table/mui-table-editable.module.less
similarity index 100%
rename from src/components/mui/editable-table/styles.module.less
rename to src/components/mui/editable-table/mui-table-editable.module.less
diff --git a/src/components/mui/sortable-table/mui-table-sortable.js b/src/components/mui/sortable-table/mui-table-sortable.js
index 7b1dbe1..ade4f26 100644
--- a/src/components/mui/sortable-table/mui-table-sortable.js
+++ b/src/components/mui/sortable-table/mui-table-sortable.js
@@ -216,6 +216,7 @@ const MuiTableSortable = ({
                                 className={`${
                                   col.dottedBorder && styles.dottedBorderLeft
                                 } ${col.className}`}
+                                sx={{ fontWeight: "normal" }}
                               >
                                 {col.render?.(row) || row[col.columnKey]}
                               </TableCell>
@@ -230,6 +231,7 @@ const MuiTableSortable = ({
                                 <IconButton
                                   size="large"
                                   onClick={() => onEdit(row)}
+                                  sx={{ padding: 0 }}
                                 >
                                   <EditIcon fontSize="large" />
                                 </IconButton>
@@ -245,6 +247,7 @@ const MuiTableSortable = ({
                                 <IconButton
                                   size="large"
                                   onClick={() => handleDelete(row)}
+                                  sx={{ padding: 0 }}
                                 >
                                   <DeleteIcon fontSize="large" />
                                 </IconButton>
diff --git a/src/components/mui/table/mui-table.js b/src/components/mui/table/mui-table.js
index 97d253e..899f776 100644
--- a/src/components/mui/table/mui-table.js
+++ b/src/components/mui/table/mui-table.js
@@ -137,7 +137,7 @@ const MuiTable = ({
       );
     }
 
-    return row[col.columnKey];
+    return <span style={{ fontWeight: "normal" }}>{row[col.columnKey]}</span>;
   };
 
   return (
@@ -204,7 +204,7 @@ const MuiTable = ({
                       className={`${
                         col.dottedBorder && styles.dottedBorderLeft
                       } ${col.className}`}
-                      sx={getCellSx(row)}
+                      sx={{ ...getCellSx(row), fontWeight: "normal" }}
                     >
                       {renderCell(row, col)}
                     </TableCell>
@@ -216,8 +216,13 @@ const MuiTable = ({
                       className={styles.dottedBorderLeft}
                       sx={getCellSx(row, {width: 40})}
                     >
-                      <IconButton size="large" onClick={() => onEdit(row)} data-testid="action-edit">
-                        <EditIcon fontSize="large"/>
+                      <IconButton
+                        size="large"
+                        onClick={() => onEdit(row)}
+                        sx={{ padding: 0 }}
+                        data-testid="action-edit"
+                      >
+                        <EditIcon fontSize="large" />
                       </IconButton>
                     </TableCell>
                   )}
@@ -225,7 +230,7 @@ const MuiTable = ({
                   {onArchive && (
                     <TableCell
                       align="center"
-                      sx={{width: 80}}
+                      sx={{ ...getCellSx(row, { width: 80 }) }}
                       className={styles.dottedBorderLeft}
                     >
                       <Button
@@ -236,9 +241,10 @@ const MuiTable = ({
                         data-testid="action-archive"
                         sx={{
                           fontSize: "1.3rem",
-                          fontWeight: 500,
+                          fontWeight: "normal",
                           lineHeight: "2.2rem",
-                          padding: "4px 5px"
+                          padding: 0,
+                          color: "rgba(0,0,0,0.56)"
                         }}
                       >
                         {row.is_archived
@@ -259,6 +265,7 @@ const MuiTable = ({
                           size="large"
                           onClick={() => handleDelete(row)}
                           data-testid="action-delete"
+                          sx={{ padding: 0 }}
                         >
                           <DeleteIcon fontSize="large"/>
                         </IconButton>