diff --git a/docs/overview/migration/MigrationV5.stories.mdx b/docs/overview/migration/MigrationV5.stories.mdx
index 150a0d27ba..8c96914d6b 100644
--- a/docs/overview/migration/MigrationV5.stories.mdx
+++ b/docs/overview/migration/MigrationV5.stories.mdx
@@ -743,7 +743,7 @@ const images = ["img1.png", "img2.png", "img3.png"];
 
 ### Table Renderer - hvExpandColumn <a id="table-renderer-expand-column" />
 
-The default icon for this component has changed to the one specified in DS5 specifications, in order to be possible to revert to the previous icon or customize to any other, the following properties where added:
+The default icon for this component has changed to the one specified in DS5 specifications, in order to be possible to revert to the previous icon or customize to any other, the following properties were added:
 
-- `isExpandedIcon`
-- `isCollapsedIcon`
+- `ExpandedIcon`
+- `CollapsedIcon`
diff --git a/packages/core/src/components/Table/TableCell/TableCell.tsx b/packages/core/src/components/Table/TableCell/TableCell.tsx
index 584a675afb..10af0d9efd 100644
--- a/packages/core/src/components/Table/TableCell/TableCell.tsx
+++ b/packages/core/src/components/Table/TableCell/TableCell.tsx
@@ -6,11 +6,14 @@ import {
   forwardRef,
   TdHTMLAttributes,
   useContext,
+  useEffect,
   useMemo,
+  useState,
 } from "react";
 import { theme } from "@hitachivantara/uikit-styles";
 import { transientOptions } from "@core/utils/transientOptions";
 import { getVarValue, hexToRgbA } from "@core/utils";
+import { useTheme } from "@core/hooks";
 import {
   HvTableCellAlign,
   HvTableCellType,
@@ -117,9 +120,17 @@ export const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(
     },
     externalRef
   ) => {
+    const { activeTheme, selectedMode } = useTheme();
     const tableContext = useContext(TableContext);
     const tableSectionContext = useContext(TableSectionContext);
 
+    const [sortedColorValue, setSortedColorValue] = useState<
+      string | undefined
+    >();
+    const [sortedColorAlpha, setSortedColorAlpha] = useState<
+      string | undefined
+    >();
+
     const type = typeProp || tableSectionContext?.type || "body";
 
     const Component =
@@ -127,12 +138,24 @@ export const HvTableCell = forwardRef<HTMLElement, HvTableCellProps>(
 
     const TableCell = useMemo(() => StyledTableCell(Component), [Component]);
 
-    const sortedColorValue = getVarValue(theme.table.rowSortedColor);
-    const sortedColorAlpha = getVarValue(theme.table.rowSortedColorAlpha);
+    let sortedColor =
+      checkValidHexColorValue(sortedColorValue) && sortedColorAlpha
+        ? hexToRgbA(sortedColorValue, parseFloat(sortedColorAlpha))
+        : sortedColorValue;
+
+    useEffect(() => {
+      setSortedColorValue(getVarValue(theme.table.rowSortedColor));
+      setSortedColorAlpha(getVarValue(theme.table.rowSortedColorAlpha));
 
-    const sortedColor = checkValidHexColorValue(sortedColorValue)
-      ? hexToRgbA(sortedColorValue, parseFloat(sortedColorAlpha))
-      : sortedColorValue;
+      sortedColor =
+        checkValidHexColorValue(sortedColorValue) && sortedColorAlpha
+          ? hexToRgbA(sortedColorValue, parseFloat(sortedColorAlpha))
+          : sortedColorValue;
+    }, [
+      activeTheme?.colors?.modes[selectedMode],
+      sortedColorValue,
+      sortedColorAlpha,
+    ]);
 
     return (
       <ClassNames>
diff --git a/packages/core/src/components/Table/TableRow/TableRow.tsx b/packages/core/src/components/Table/TableRow/TableRow.tsx
index 552c1fff13..d5a3e25701 100644
--- a/packages/core/src/components/Table/TableRow/TableRow.tsx
+++ b/packages/core/src/components/Table/TableRow/TableRow.tsx
@@ -84,12 +84,8 @@ export const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(
     const tableContext = useContext(TableContext);
     const tableSectionContext = useContext(TableSectionContext);
 
-    const [even, setEven] = useState(
-      getVarValue(theme.table.rowStripedBackgroundColorEven)
-    );
-    const [odd, setOdd] = useState(
-      getVarValue(theme.table.rowStripedBackgroundColorOdd)
-    );
+    const [even, setEven] = useState<string | undefined>();
+    const [odd, setOdd] = useState<string | undefined>();
 
     const type = tableSectionContext?.type || "body";
 
@@ -100,17 +96,24 @@ export const HvTableRow = forwardRef<HTMLElement, HvTableRowProps>(
 
     const TableRow = useMemo(() => StyledTableRow(Component), [Component]);
 
-    const stripedColorEven = checkValidHexColorValue(even)
+    let stripedColorEven = checkValidHexColorValue(even)
       ? hexToRgbA(even, 0.6)
       : even;
-    const stripedColorOdd = checkValidHexColorValue(odd)
+
+    let stripedColorOdd = checkValidHexColorValue(odd)
       ? hexToRgbA(odd, 0.6)
       : odd;
 
     useEffect(() => {
       setEven(getVarValue(theme.table.rowStripedBackgroundColorEven));
       setOdd(getVarValue(theme.table.rowStripedBackgroundColorOdd));
-    }, [activeTheme?.colors?.modes[selectedMode]]);
+      stripedColorEven = checkValidHexColorValue(even)
+        ? hexToRgbA(even, 0.6)
+        : even;
+      stripedColorOdd = checkValidHexColorValue(odd)
+        ? hexToRgbA(odd, 0.6)
+        : odd;
+    }, [activeTheme?.colors?.modes[selectedMode], even, odd]);
 
     return (
       <ClassNames>
diff --git a/packages/core/src/components/Table/utils/utils.ts b/packages/core/src/components/Table/utils/utils.ts
index 0e86754a4d..88c826f904 100644
--- a/packages/core/src/components/Table/utils/utils.ts
+++ b/packages/core/src/components/Table/utils/utils.ts
@@ -48,7 +48,7 @@ export const getBorderStyles = (
   }
 };
 
-export const checkValidHexColorValue = (value: string): boolean => {
+export const checkValidHexColorValue = (value?: string): boolean => {
   const reg = /^#([0-9a-f]{3}){1,2}$/i;
-  return reg.test(value);
+  return value ? reg.test(value) : false;
 };
diff --git a/packages/styles/src/themes/ds3.ts b/packages/styles/src/themes/ds3.ts
index d6aa95cebb..1e4bd37079 100644
--- a/packages/styles/src/themes/ds3.ts
+++ b/packages/styles/src/themes/ds3.ts
@@ -449,7 +449,7 @@ const ds3 = makeTheme((theme: HvTheme) => ({
     rowListBorderColor: "transparent",
     rowStripedBackgroundColorEven: theme.colors.atmo1,
     rowStripedBackgroundColorOdd: "transparent",
-    rowExpandBackgroundColor: theme.colors.atmo1,
+    rowExpandBackgroundColor: theme.colors.atmo2,
     rowHoverColor: theme.colors.atmo3,
     rowHoverBorderColor: theme.colors.atmo4,
     rowSortedColor: theme.colors.atmo1,