diff --git a/web/components/modules/module-card-item.tsx b/web/components/modules/module-card-item.tsx
index ffe9d6cbe..054b0f9e8 100644
--- a/web/components/modules/module-card-item.tsx
+++ b/web/components/modules/module-card-item.tsx
@@ -148,7 +148,11 @@ export const ModuleCardItem: React.FC<Props> = observer((props) => {
               <div className="flex items-center gap-2">
                 {moduleStatus && (
                   <span
-                    className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
+                    className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
+                    style={{
+                      color: moduleStatus.color,
+                      backgroundColor: `${moduleStatus.color}20`,
+                    }}
                   >
                     {moduleStatus.label}
                   </span>
diff --git a/web/components/modules/module-list-item.tsx b/web/components/modules/module-list-item.tsx
index 3489311b9..e8be9841b 100644
--- a/web/components/modules/module-list-item.tsx
+++ b/web/components/modules/module-list-item.tsx
@@ -157,7 +157,11 @@ export const ModuleListItem: React.FC<Props> = observer((props) => {
             <div className="flex items-center justify-center">
               {moduleStatus && (
                 <span
-                  className={`flex items-center justify-center text-xs h-6 w-20 rounded-sm ${moduleStatus.textColor} ${moduleStatus.bgColor}`}
+                  className="flex items-center justify-center text-xs text-center h-6 w-20 rounded-sm"
+                  style={{
+                    color: moduleStatus.color,
+                    backgroundColor: `${moduleStatus.color}20`,
+                  }}
                 >
                   {moduleStatus.label}
                 </span>