diff --git a/src/core/components/DataTable/body/TableBodyCell.js b/src/core/components/DataTable/body/TableBodyCell.js
index 4c1804b..902f9c7 100644
--- a/src/core/components/DataTable/body/TableBodyCell.js
+++ b/src/core/components/DataTable/body/TableBodyCell.js
@@ -22,7 +22,7 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
             enableColumnPinning,
             enableGrouping,
             layoutMode,
-            mrtTheme: { draggingBorderColor },
+            mrtTheme: { draggingBorderColor, baseBackgroundColor },
             muiSkeletonProps,
             muiTableBodyCellProps,
         },
@@ -83,10 +83,10 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
         const borderStyle = showResizeBorder
             ? `2px solid ${draggingBorderColor} !important`
             : isDraggingColumn || isDraggingRow
-              ? `1px dashed ${theme.palette.grey[500]} !important`
-              : isHoveredColumn || isHoveredRow || isResizingColumn
-                ? `2px dashed ${draggingBorderColor} !important`
-                : undefined;
+                ? `1px dashed ${theme.palette.grey[500]} !important`
+                : isHoveredColumn || isHoveredRow || isResizingColumn
+                    ? `2px dashed ${draggingBorderColor} !important`
+                    : undefined;
 
         if (showResizeBorder) {
             return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
@@ -94,18 +94,18 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
 
         return borderStyle
             ? {
-                  borderBottom:
-                      isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn) ? borderStyle : undefined,
-                  borderLeft:
-                      isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isFirstColumn)
-                          ? borderStyle
-                          : undefined,
-                  borderRight:
-                      isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isLastColumn)
-                          ? borderStyle
-                          : undefined,
-                  borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
-              }
+                borderBottom:
+                    isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn) ? borderStyle : undefined,
+                borderLeft:
+                    isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isFirstColumn)
+                        ? borderStyle
+                        : undefined,
+                borderRight:
+                    isDraggingColumn || isHoveredColumn || ((isDraggingRow || isHoveredRow) && isLastColumn)
+                        ? borderStyle
+                        : undefined,
+                borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
+            }
             : undefined;
     }, [columnSizingInfo.isResizingColumn, draggingColumn, draggingRow, hoveredColumn, hoveredRow, staticRowIndex]);
 
@@ -179,8 +179,8 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
                 "&:hover": {
                     outline:
                         actionCell?.id === cell.id ||
-                        (editDisplayMode === "cell" && isEditable) ||
-                        (editDisplayMode === "table" && (isCreating || isEditing))
+                            (editDisplayMode === "cell" && isEditable) ||
+                            (editDisplayMode === "table" && (isCreating || isEditing))
                             ? `1px solid ${theme.palette.grey[500]}`
                             : undefined,
                     textOverflow: "clip",
@@ -189,8 +189,8 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
                 cursor: isRightClickable
                     ? "context-menu"
                     : isEditable && editDisplayMode === "cell"
-                      ? "pointer"
-                      : "inherit",
+                        ? "pointer"
+                        : "inherit",
                 outline: actionCell?.id === cell.id ? `1px solid ${theme.palette.grey[500]}` : undefined,
                 outlineOffset: "-1px",
                 overflow: "hidden",
@@ -200,12 +200,12 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
                             ? "0 0.5rem"
                             : "0.5rem"
                         : density === "comfortable"
-                          ? columnDefType === "display"
-                              ? "0.5rem 0.75rem"
-                              : "1rem"
-                          : columnDefType === "display"
-                            ? "1rem 1.25rem"
-                            : "1.5rem",
+                            ? columnDefType === "display"
+                                ? "0.5rem 0.75rem"
+                                : "1rem"
+                            : columnDefType === "display"
+                                ? "1rem 1.25rem"
+                                : "1.5rem",
 
                 textOverflow: columnDefType !== "display" ? "ellipsis" : undefined,
                 whiteSpace: row.getIsPinned() || density === "compact" ? "nowrap" : "normal",
@@ -216,6 +216,7 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
                     theme,
                 }),
                 ...draggingBorders,
+                backgroundColor: baseBackgroundColor
             })}
         >
             {tableCellProps.children ?? (
@@ -225,8 +226,8 @@ const DataTable_TableBodyCell = ({ cell, numRows, rowRef, staticColumnIndex, sta
                     ) : showSkeletons !== false && (isLoading || showSkeletons) ? (
                         <Skeleton animation="wave" height={20} width={skeletonWidth} {...skeletonProps} />
                     ) : columnDefType === "display" &&
-                      (["mrt-row-expand", "mrt-row-numbers", "mrt-row-select"].includes(column.id) ||
-                          !row.getIsGrouped()) ? (
+                        (["mrt-row-expand", "mrt-row-numbers", "mrt-row-select"].includes(column.id) ||
+                            !row.getIsGrouped()) ? (
                         columnDef.Cell?.({
                             cell,
                             column,
diff --git a/src/core/components/DataTable/body/TableBodyRow.js b/src/core/components/DataTable/body/TableBodyRow.js
index a041d66..e35f29a 100644
--- a/src/core/components/DataTable/body/TableBodyRow.js
+++ b/src/core/components/DataTable/body/TableBodyRow.js
@@ -91,16 +91,16 @@ const DataTable_TableBodyRow = ({
     const cellHighlightColor = isRowSelected
         ? selectedRowBackgroundColor
         : isRowPinned
-          ? pinnedRowBackgroundColor
-          : undefined;
+            ? pinnedRowBackgroundColor
+            : undefined;
 
     const cellHighlightColorHover =
         tableRowProps?.hover !== false
             ? isRowSelected
                 ? cellHighlightColor
                 : theme.palette.mode === "dark"
-                  ? `${lighten(baseBackgroundColor, 0.3)}`
-                  : `${darken(baseBackgroundColor, 0.3)}`
+                    ? `${lighten(baseBackgroundColor, 0.2)}`
+                    : `${darken(baseBackgroundColor, 0.2)}`
             : undefined;
 
     return (
@@ -126,11 +126,10 @@ const DataTable_TableBodyRow = ({
                 sx={(theme) => ({
                     "&:hover td:after": cellHighlightColorHover
                         ? {
-                              backgroundColor: alpha(cellHighlightColorHover, 0.3),
-                              ...commonCellBeforeAfterStyles,
-                          }
+                            backgroundColor: alpha(cellHighlightColorHover, 0.3),
+                            ...commonCellBeforeAfterStyles,
+                        }
                         : undefined,
-                    backgroundColor: `${baseBackgroundColor} !important`,
                     bottom:
                         !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
                             ? `${bottomPinnedIndex * rowHeight + (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
@@ -141,25 +140,24 @@ const DataTable_TableBodyRow = ({
                     position: virtualRow
                         ? "absolute"
                         : rowPinningDisplayMode?.includes("sticky") && isRowPinned
-                          ? "sticky"
-                          : "relative",
+                            ? "sticky"
+                            : "relative",
                     td: {
                         ...getCommonPinnedCellStyles({ table, theme }),
                     },
                     "td:after": cellHighlightColor
                         ? {
-                              backgroundColor: cellHighlightColor,
-                              ...commonCellBeforeAfterStyles,
-                          }
+                            backgroundColor: cellHighlightColor,
+                            ...commonCellBeforeAfterStyles,
+                        }
                         : undefined,
                     top: virtualRow
                         ? 0
                         : topPinnedIndex !== undefined && isRowPinned
-                          ? `${
-                                topPinnedIndex * rowHeight +
-                                (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
+                            ? `${topPinnedIndex * rowHeight +
+                            (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
                             }px`
-                          : undefined,
+                            : undefined,
                     transition: virtualRow ? "none" : "all 150ms ease-in-out",
                     width: "100%",
                     zIndex: rowPinningDisplayMode?.includes("sticky") && isRowPinned ? 2 : 0,
@@ -183,11 +181,11 @@ const DataTable_TableBodyRow = ({
                     };
                     return cell ? (
                         memoMode === "cells" &&
-                        cell.column.columnDef.columnDefType === "data" &&
-                        !draggingColumn &&
-                        !draggingRow &&
-                        editingCell?.id !== cell.id &&
-                        editingRow?.id !== row.id ? (
+                            cell.column.columnDef.columnDefType === "data" &&
+                            !draggingColumn &&
+                            !draggingRow &&
+                            editingCell?.id !== cell.id &&
+                            editingRow?.id !== row.id ? (
                             <Memo_DataTable_TableBodyCell key={cell.id} {...props} />
                         ) : (
                             <DataTable_TableBodyCell key={cell.id} {...props} />
diff --git a/src/core/components/DataTable/head/TableHeadCell.js b/src/core/components/DataTable/head/TableHeadCell.js
index 9bc98b5..7a7498b 100644
--- a/src/core/components/DataTable/head/TableHeadCell.js
+++ b/src/core/components/DataTable/head/TableHeadCell.js
@@ -4,7 +4,7 @@ import { Box, TableCell } from "@mui/material";
 import { MRT_TableHeadCellSortLabel } from "material-react-table";
 import { useMemo } from "react";
 
-const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, table, ...rest }) => {
+const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex, backgroundColor, table, ...rest }) => {
     const theme = useTheme();
     const {
         getState,
@@ -67,20 +67,20 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
         const borderStyle = showResizeBorder
             ? `2px solid ${draggingBorderColor} !important`
             : draggingColumn?.id === column.id
-              ? `1px dashed ${theme.palette.grey[500]}`
-              : hoveredColumn?.id === column.id
-                ? `2px dashed ${draggingBorderColor}`
-                : undefined;
+                ? `1px dashed ${theme.palette.grey[500]}`
+                : hoveredColumn?.id === column.id
+                    ? `2px dashed ${draggingBorderColor}`
+                    : undefined;
 
         if (showResizeBorder) {
             return columnResizeDirection === "ltr" ? { borderRight: borderStyle } : { borderLeft: borderStyle };
         }
         const draggingBorders = borderStyle
             ? {
-                  borderLeft: borderStyle,
-                  borderRight: borderStyle,
-                  borderTop: borderStyle,
-              }
+                borderLeft: borderStyle,
+                borderRight: borderStyle,
+                borderTop: borderStyle,
+            }
             : undefined;
 
         return draggingBorders;
@@ -151,19 +151,19 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
                     density === "compact"
                         ? "0.5rem"
                         : density === "comfortable"
-                          ? columnDefType === "display"
-                              ? "0.75rem"
-                              : "1rem"
-                          : columnDefType === "display"
-                            ? "1rem 1.25rem"
-                            : "1.5rem",
+                            ? columnDefType === "display"
+                                ? "0.75rem"
+                                : "1rem"
+                            : columnDefType === "display"
+                                ? "1rem 1.25rem"
+                                : "1.5rem",
                 pb: columnDefType === "display" ? 0 : showColumnFilters || density === "compact" ? "0.4rem" : "0.6rem",
                 pt:
                     columnDefType === "group" || density === "compact"
                         ? "0.25rem"
                         : density === "comfortable"
-                          ? ".75rem"
-                          : "1.25rem",
+                            ? ".75rem"
+                            : "1.25rem",
                 userSelect: enableMultiSort && column.getCanSort() ? "none" : undefined,
                 verticalAlign: "middle",
                 ...getCommonMRTCellStyles({
@@ -174,6 +174,7 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
                     theme,
                 }),
                 ...draggingBorders,
+                backgroundColor: backgroundColor,
             })}
         >
             {tableCellProps.children ?? (
@@ -187,8 +188,8 @@ const DataTable_TableHeadCell = ({ columnVirtualizer, header, staticColumnIndex,
                             columnDefType === "group" || tableCellProps?.align === "center"
                                 ? "center"
                                 : column.getCanResize()
-                                  ? "space-between"
-                                  : "flex-start",
+                                    ? "space-between"
+                                    : "flex-start",
                         position: "relative",
                         width: "100%",
                     }}
diff --git a/src/core/components/DataTable/head/TableHeadRow.js b/src/core/components/DataTable/head/TableHeadRow.js
index 512147a..c639ee8 100644
--- a/src/core/components/DataTable/head/TableHeadRow.js
+++ b/src/core/components/DataTable/head/TableHeadRow.js
@@ -25,7 +25,6 @@ const DataTable_TableHeadRow = ({
         sx: (theme) => ({
             // Access theme from the sx function
             ...(parseFromValuesOrFunc(muiTableHeadRowProps?.sx, theme) || {}),
-            backgroundColor, // Apply background color
             display: layoutMode?.startsWith("grid") ? "flex" : undefined,
             position: enableStickyHeader && layoutMode === "semantic" ? "sticky" : "relative",
             top: 0,
@@ -44,6 +43,7 @@ const DataTable_TableHeadRow = ({
                     <DataTable_TableHeadCell
                         columnVirtualizer={columnVirtualizer}
                         header={header}
+                        backgroundColor={backgroundColor}
                         key={header.id}
                         staticColumnIndex={staticColumnIndex}
                         table={table}