diff --git a/src/core/components/DataTable/head/TableHead.js b/src/core/components/DataTable/head/TableHead.js
index 055a4ed..5e5dd99 100644
--- a/src/core/components/DataTable/head/TableHead.js
+++ b/src/core/components/DataTable/head/TableHead.js
@@ -1,12 +1,12 @@
-import { parseFromValuesOrFunc } from "@/core/utils/utils";
-import { TableHead } from "@mui/material";
+import {parseFromValuesOrFunc} from "@/core/utils/utils";
+import {TableHead} from "@mui/material";
 import DataTable_TableHeadRow from "./TableHeadRow";
 
 const DataTable_TableHead = ({
-    columnVirtualizer,
-    table,
-    ...rest
-}) => {
+                                 columnVirtualizer,
+                                 table,
+                                 ...rest
+                             }) => {
     const {
         getState,
         options: {
@@ -15,12 +15,12 @@ const DataTable_TableHead = ({
             muiTableHeadProps,
             positionToolbarAlertBanner,
         },
-        refs: { tableHeadRef },
+        refs: {tableHeadRef},
     } = table;
-    const { isFullScreen, showAlertBanner } = getState();
+    const {isFullScreen, showAlertBanner} = getState();
 
     const tableHeadProps = {
-        ...parseFromValuesOrFunc(muiTableHeadProps, { table }),
+        ...parseFromValuesOrFunc(muiTableHeadProps, {table}),
         ...rest,
     };
 
@@ -47,12 +47,13 @@ const DataTable_TableHead = ({
         >
             {table
                 .getHeaderGroups()
-                .map((headerGroup) => (
+                .map((headerGroup, index) => (
                     <DataTable_TableHeadRow
                         columnVirtualizer={columnVirtualizer}
                         headerGroup={headerGroup}
                         key={headerGroup.id}
                         table={table}
+                        index={index}
                     />
                 ))
             }
diff --git a/src/core/components/DataTable/head/TableHeadCell.js b/src/core/components/DataTable/head/TableHeadCell.js
index 78a9933..6248d63 100644
--- a/src/core/components/DataTable/head/TableHeadCell.js
+++ b/src/core/components/DataTable/head/TableHeadCell.js
@@ -1,16 +1,16 @@
-import { getCommonMRTCellStyles, parseFromValuesOrFunc } from "@/core/utils/utils";
-import { useTheme } from "@emotion/react";
-import { Box, TableCell } from "@mui/material";
-import { MRT_TableHeadCellSortLabel } from "material-react-table";
-import { useMemo } from "react";
+import {getCommonMRTCellStyles, parseFromValuesOrFunc} from "@/core/utils/utils";
+import {useTheme} from "@emotion/react";
+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
-}) => {
+                                     columnVirtualizer,
+                                     header,
+                                     staticColumnIndex,
+                                     table,
+                                     ...rest
+                                 }) => {
     const theme = useTheme();
     const {
         getState,
@@ -24,10 +24,10 @@ const DataTable_TableHeadCell = ({
             enableGrouping,
             enableMultiSort,
             layoutMode,
-            mrtTheme: { draggingBorderColor },
+            mrtTheme: {draggingBorderColor},
             muiTableHeadCellProps,
         },
-        refs: { tableHeadCellRefs },
+        refs: {tableHeadCellRefs},
         setHoveredColumn,
     } = table;
     const {
@@ -38,12 +38,12 @@ const DataTable_TableHeadCell = ({
         hoveredColumn,
         showColumnFilters,
     } = getState();
-    const { column } = header;
-    const { columnDef } = column;
-    const { columnDefType } = columnDef;
+    const {column} = header;
+    const {columnDef} = column;
+    const {columnDefType} = columnDef;
 
     const tableCellProps = {
-        ...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
+        ...parseFromValuesOrFunc(muiTableHeadCellProps, {column, table}),
         ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
             column,
             table,
@@ -93,8 +93,8 @@ const DataTable_TableHeadCell = ({
 
         if (showResizeBorder) {
             return columnResizeDirection === 'ltr'
-                ? { borderRight: borderStyle }
-                : { borderLeft: borderStyle };
+                ? {borderRight: borderStyle}
+                : {borderLeft: borderStyle};
         }
         const draggingBorders = borderStyle
             ? {
@@ -172,47 +172,47 @@ const DataTable_TableHeadCell = ({
             }}
             {...tableCellProps}
             sx={(theme) => ({
-                '& :hover': {
-                    '.MuiButtonBase-root': {
-                        opacity: 1,
+                    '& :hover': {
+                        '.MuiButtonBase-root': {
+                            opacity: 1,
+                        },
                     },
-                },
-                flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
-                fontWeight: 'bold',
-                overflow: 'visible',
-                p:
-                    density === 'compact'
-                        ? '0.5rem'
-                        : density === 'comfortable'
-                            ? 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',
-                userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
-                verticalAlign: 'middle',
-                ...getCommonMRTCellStyles({
-                    column,
-                    header,
-                    table,
-                    tableCellProps,
-                    theme,
-                }),
-                ...draggingBorders,
-            }
+                    flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
+                    fontWeight: 'bold',
+                    overflow: 'visible',
+                    p:
+                        density === 'compact'
+                            ? '0.5rem'
+                            : density === 'comfortable'
+                                ? 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',
+                    userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
+                    verticalAlign: 'middle',
+                    ...getCommonMRTCellStyles({
+                        column,
+                        header,
+                        table,
+                        tableCellProps,
+                        theme,
+                    }),
+                    ...draggingBorders,
+                }
             )}
         >
             {tableCellProps.children ?? (
@@ -225,7 +225,7 @@ const DataTable_TableHeadCell = ({
                             tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
                         justifyContent:
                             columnDefType === 'group' ||
-                                tableCellProps?.align === 'center'
+                            tableCellProps?.align === 'center'
                                 ? 'center'
                                 : column.getCanResize()
                                     ? 'space-between'
@@ -262,6 +262,9 @@ const DataTable_TableHeadCell = ({
                                 minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
                                 overflow: columnDefType === 'data' ? 'hidden' : undefined,
                                 textOverflow: 'ellipsis',
+                                color: "#fff",
+                                fontSize: "14px",
+                                fontWeight: "500",
                                 whiteSpace:
                                     (columnDef.header?.length ?? 0) < 20
                                         ? 'nowrap'
@@ -271,7 +274,8 @@ const DataTable_TableHeadCell = ({
                             {HeaderElement}
                         </Box>
                         {(column.getCanSort() && columnDefType !== 'group') && (
-                            <MRT_TableHeadCellSortLabel sx={{ width: 20 }} header={header} table={table} />
+                            <MRT_TableHeadCellSortLabel sx={{width: 20, color: "#fff"}} header={header}
+                                                        table={table}/>
                         )}
                     </Box>
                 </Box>
diff --git a/src/core/components/DataTable/head/TableHeadRow.js b/src/core/components/DataTable/head/TableHeadRow.js
index f876cf1..8c2202a 100644
--- a/src/core/components/DataTable/head/TableHeadRow.js
+++ b/src/core/components/DataTable/head/TableHeadRow.js
@@ -1,24 +1,25 @@
-import { parseFromValuesOrFunc } from "@/core/utils/utils";
-import { TableRow } from "@mui/material";
+import {parseFromValuesOrFunc} from "@/core/utils/utils";
+import {TableRow} from "@mui/material";
 import DataTable_TableHeadCell from "./TableHeadCell";
 
 const DataTable_TableHeadRow = ({
-    columnVirtualizer,
-    headerGroup,
-    table,
-    ...rest
-}) => {
+                                    columnVirtualizer,
+                                    headerGroup,
+                                    table,
+                                    index, // Add index prop
+                                    ...rest
+                                }) => {
     const {
         options: {
             enableStickyHeader,
             layoutMode,
-            mrtTheme: { baseBackgroundColor },
             muiTableHeadRowProps,
         },
     } = table;
+    const {virtualColumns, virtualPaddingLeft, virtualPaddingRight} =
+    columnVirtualizer ?? {};
 
-    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
-        columnVirtualizer ?? {};
+    const backgroundColor = index % 2 === 0 ? '#2070af' : '#ff5c0f';
 
     const tableRowProps = {
         ...parseFromValuesOrFunc(muiTableHeadRowProps, {
@@ -26,51 +27,34 @@ const DataTable_TableHeadRow = ({
             table,
         }),
         ...rest,
+        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,
+        }),
     };
 
     return (
-        <TableRow
-            {...tableRowProps}
-            sx={(theme) => ({
-                backgroundColor: baseBackgroundColor,
-                display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-                position:
-                    enableStickyHeader && layoutMode === 'semantic'
-                        ? 'sticky'
-                        : 'relative',
-                top: 0,
-                ...(parseFromValuesOrFunc(tableRowProps?.sx, theme)),
+        <TableRow {...tableRowProps}>
+            {virtualPaddingLeft && <th style={{display: 'flex', width: virtualPaddingLeft}}/>}
+            {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
+                const header = columnVirtualizer ? headerGroup.headers[headerOrVirtualHeader.index] : headerOrVirtualHeader;
+
+                return header ? (
+                    <DataTable_TableHeadCell
+                        columnVirtualizer={columnVirtualizer}
+                        header={header}
+                        key={header.id}
+                        staticColumnIndex={staticColumnIndex}
+                        table={table}
+                    />
+                ) : null;
             })}
-        >
-            {virtualPaddingLeft ? (
-                <th style={{ display: 'flex', width: virtualPaddingLeft }} />
-            ) : null}
-            {(virtualColumns ?? headerGroup.headers).map(
-                (headerOrVirtualHeader, staticColumnIndex) => {
-                    let header = headerOrVirtualHeader;
-
-                    if (columnVirtualizer) {
-                        staticColumnIndex = (headerOrVirtualHeader)
-                            .index;
-                        header = headerGroup.headers[staticColumnIndex];
-                    }
-
-                    return header ? (
-                        <DataTable_TableHeadCell
-                            columnVirtualizer={columnVirtualizer}
-                            header={header}
-                            key={header.id}
-                            staticColumnIndex={staticColumnIndex}
-                            table={table}
-                        />
-                    ) : null;
-                },
-            )}
-            {virtualPaddingRight ? (
-                <th style={{ display: 'flex', width: virtualPaddingRight }} />
-            ) : null}
+            {virtualPaddingRight && <th style={{display: 'flex', width: virtualPaddingRight}}/>}
         </TableRow>
     );
+};
 
-}
-export default DataTable_TableHeadRow
\ No newline at end of file
+export default DataTable_TableHeadRow;
\ No newline at end of file