diff --git a/src/pages/Customer/Card/CustomerDescriptor.vue b/src/pages/Customer/Card/CustomerDescriptor.vue
index 43103bd68..3dca43925 100644
--- a/src/pages/Customer/Card/CustomerDescriptor.vue
+++ b/src/pages/Customer/Card/CustomerDescriptor.vue
@@ -37,6 +37,9 @@ const entityId = computed(() => {
 
 const data = ref(useCardDescription());
 const setData = (entity) => (data.value = useCardDescription(entity?.name, entity?.id));
+const debtWarning = computed(() => {
+    return customer.value?.debt > customer.value?.credit ? 'negative' : 'primary';
+});
 </script>
 
 <template>
@@ -110,8 +113,8 @@ const setData = (entity) => (data.value = useCardDescription(entity?.name, entit
                 <QIcon
                     v-if="customer.debt > customer.credit"
                     name="vn:risk"
-                    size="xs"
-                    color="primary"
+                    size="xs" 
+                    :color="debtWarning"
                 >
                     <QTooltip>{{ t('customer.card.hasDebt') }}</QTooltip>
                 </QIcon>
@@ -122,7 +125,7 @@ const setData = (entity) => (data.value = useCardDescription(entity?.name, entit
                     color="primary"
                 >
                     <QTooltip>{{ t('customer.card.notChecked') }}</QTooltip>
-                </QIcon>
+                </QIcon>                             
                 <QBtn
                     v-if="customer.unpaid"
                     flat