diff --git a/src/components/page/theming/ColorAccordion/index.tsx b/src/components/page/theming/ColorAccordion/index.tsx
index bdd98a43e0c..d56967bf3ba 100755
--- a/src/components/page/theming/ColorAccordion/index.tsx
+++ b/src/components/page/theming/ColorAccordion/index.tsx
@@ -38,6 +38,7 @@ export default function ColorAccordion({ ...props }) {
 
         return (
           <li
+            key={color}
             className={clsx({
               [styles.colorMenuItem]: true,
               [styles.colorMenuItemActive]: color === activeColor,
diff --git a/src/components/page/theming/LayeredColorsSelect/index.tsx b/src/components/page/theming/LayeredColorsSelect/index.tsx
index acbe66f5278..eb1ac56058c 100755
--- a/src/components/page/theming/LayeredColorsSelect/index.tsx
+++ b/src/components/page/theming/LayeredColorsSelect/index.tsx
@@ -93,7 +93,7 @@ export default function LayeredColorsSelect({ ...props }) {
           const codeColor = variation.rgb ? `rgb(${variation.value})` : `${variation.value}`;
 
           return (
-            <tr>
+            <tr key={variation.name}>
               <td className={styles.colorName}>{variation.name}</td>
               <td className={styles.colorProperty}>
                 <code>{variation.property}</code>