diff --git a/packages/nc-gui/components/smartsheet/grid/Table.vue b/packages/nc-gui/components/smartsheet/grid/Table.vue
index 9bdbd8e333..8331f76c7a 100644
--- a/packages/nc-gui/components/smartsheet/grid/Table.vue
+++ b/packages/nc-gui/components/smartsheet/grid/Table.vue
@@ -25,8 +25,8 @@ import {
   NavigateDir,
   ReadonlyInj,
   computed,
-  enumColor,
   extractPkFromRow,
+  getEnumColorByIndex,
   iconMap,
   inject,
   isColumnRequiredAndNull,
@@ -1566,7 +1566,7 @@ onKeyStroke('ArrowDown', onDown)
                             v-e="['c:expanded-form:open']"
                             class="py-1 px-3 rounded-full text-xs cursor-pointer select-none transform hover:(scale-110)"
                             :style="{
-                              backgroundColor: enumColor.light[row.rowMeta.commentCount % enumColor.light.length],
+                              backgroundColor: getEnumColorByIndex(row.rowMeta.commentCount || 0),
                             }"
                             @click="expandAndLooseFocus(row, state)"
                           >
diff --git a/packages/nc-gui/utils/colorsUtils.ts b/packages/nc-gui/utils/colorsUtils.ts
index 00c0d2e112..dbb67f5612 100644
--- a/packages/nc-gui/utils/colorsUtils.ts
+++ b/packages/nc-gui/utils/colorsUtils.ts
@@ -235,3 +235,7 @@ export function isColorDark(hexColor: string) {
   // Choose a luminance threshold (e.g., 0.5) to determine darkness/lightness
   return luminance < 128
 }
+
+export function getEnumColorByIndex(i: number, mode: 'light' | 'dark' = 'light') {
+  return enumColor[mode][i % enumColor[mode].length]
+}