diff --git a/frontend/src/components/Icons/IndicatorIcon.vue b/frontend/src/components/Icons/IndicatorIcon.vue
index dcac6020..d39089b6 100644
--- a/frontend/src/components/Icons/IndicatorIcon.vue
+++ b/frontend/src/components/Icons/IndicatorIcon.vue
@@ -6,7 +6,7 @@
     viewBox="0 0 16 16"
     fill="none"
   >
-    <rect width="16" height="16" rx="4.5" :fill="color" />
+    <rect width="16" height="16" rx="4.5" :class="['fill-current', color]" />
     <circle cx="8" cy="8" r="3" fill="white" />
   </svg>
 </template>
diff --git a/frontend/src/components/ListView.vue b/frontend/src/components/ListView.vue
index 332db99d..fd3da47b 100644
--- a/frontend/src/components/ListView.vue
+++ b/frontend/src/components/ListView.vue
@@ -84,7 +84,7 @@
               />
             </div>
             <div v-else-if="column.type === 'status'">
-              <IndicatorIcon />
+              <IndicatorIcon :color="getValue(row[column.key]).color" />
             </div>
             <div class="text-base text-gray-900 truncate">
               {{ getValue(row[column.key]).label }}
diff --git a/frontend/src/pages/Leads.vue b/frontend/src/pages/Leads.vue
index a3184a26..c48b6f1e 100644
--- a/frontend/src/pages/Leads.vue
+++ b/frontend/src/pages/Leads.vue
@@ -75,11 +75,22 @@ const rows = computed(() => {
     return {
       full_name: lead.first_name + ' ' + lead.last_name,
       organization_name: lead.organization_name,
-      status: lead.status,
+      status: {
+        label: lead.status,
+        color: indicatorColor[lead.status],
+      },
       email: lead.email,
       mobile_no: lead.mobile_no,
       lead_owner: getUser(lead.lead_owner),
     }
   })
 })
+
+const indicatorColor = {
+  New: 'text-gray-600',
+  'Contact made': 'text-orange-500',
+  'Proposal made': 'text-blue-600',
+  Negotiation: 'text-red-600',
+  Converted: 'text-green-600',
+}
 </script>