diff --git a/components/common/IconStatus/IconStatus.helper.ts b/components/common/IconStatus/IconStatus.helper.ts
index 9f89d9d..85915af 100644
--- a/components/common/IconStatus/IconStatus.helper.ts
+++ b/components/common/IconStatus/IconStatus.helper.ts
@@ -15,3 +15,10 @@ export const BackgroundStatus = {
   success: 'bg-backgroundSuccess',
   unknown: 'bg-backgroundRunning',
 };
+
+export const TextColorStatus = {
+  running: 'text-running',
+  failed: 'text-failed',
+  success: 'text-success',
+  unknown: 'text-running',
+};
diff --git a/components/common/IconStatus/index.tsx b/components/common/IconStatus/index.tsx
index 39b45f1..4333077 100644
--- a/components/common/IconStatus/index.tsx
+++ b/components/common/IconStatus/index.tsx
@@ -1,11 +1,16 @@
 import Image from 'next/image';
 import { PropsType } from './IconStatus.type';
-import { BackgroundStatus, SwapStatusIcon } from './IconStatus.helper';
+import {
+  BackgroundStatus,
+  SwapStatusIcon,
+  TextColorStatus,
+} from './IconStatus.helper';
 
 function IconStatus(props: PropsType) {
   const { status, hasTitle } = props;
   const statusIcon = SwapStatusIcon[status];
   const backgroundColor = BackgroundStatus[status];
+  const textColor = TextColorStatus[status];
 
   return (
     <>
@@ -15,9 +20,7 @@ function IconStatus(props: PropsType) {
         } w-[24px] h-[24px] rounded-full flex items-center justify-center ${backgroundColor}`}>
         <Image src={statusIcon} width={24} alt="status" />
       </div>
-      {hasTitle && (
-        <div className={`text-16 text-${status.toLowerCase()}`}>{status}</div>
-      )}
+      {hasTitle && <div className={`text-16 ${textColor}`}>{status}</div>}
     </>
   );
 }