diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 45d18af7e..c443c5826 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -18,6 +18,7 @@ $positive: #c8e484;
 $negative: #fb5252;
 $info: #84d0e2;
 $warning: #f4b974;
+$neutral: #b0b0b0;
 // Pendiente de cuadrar con la base de datos
 $success: $positive;
 $alert: $negative;
@@ -51,3 +52,6 @@ $width-xl: 1600px;
 .bg-alert {
     background-color: $negative;
 }
+.bg-neutral {
+    background-color: $neutral;
+}
diff --git a/src/pages/Claim/Card/ClaimDescriptor.vue b/src/pages/Claim/Card/ClaimDescriptor.vue
index 76ede81ed..3728a18c0 100644
--- a/src/pages/Claim/Card/ClaimDescriptor.vue
+++ b/src/pages/Claim/Card/ClaimDescriptor.vue
@@ -28,14 +28,8 @@ const entityId = computed(() => {
     return $props.id || route.params.id;
 });
 
-const STATE_COLOR = {
-    pending: 'warning',
-    incomplete: 'info',
-    resolved: 'positive',
-    canceled: 'negative',
-};
-function stateColor(code) {
-    return STATE_COLOR[code];
+function stateColor(entity) {
+    return entity?.claimState?.classColor;
 }
 
 onMounted(async () => {
@@ -57,9 +51,8 @@ onMounted(async () => {
             <VnLv v-if="entity.claimState" :label="t('claim.state')">
                 <template #value>
                     <QBadge
-                        :color="stateColor(entity.claimState.code)"
-                        text-color="black"
-                        dense
+                        :color="stateColor(entity)"
+                        style="color: var(--vn-black-text-color)"
                     >
                         {{ entity.claimState.description }}
                     </QBadge>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 67d57004f..08df506d4 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -108,15 +108,9 @@ const markerLabels = [
     { value: 5, label: t('claim.person') },
 ];
 
-const STATE_COLOR = {
-    pending: 'warning',
-    incomplete: 'info',
-    resolved: 'positive',
-    canceled: 'negative',
-};
-
 function stateColor(code) {
-    return STATE_COLOR[code];
+    const claimState = claimStates.value.find((state) => state.code === code);
+    return claimState?.classColor;
 }
 
 const developmentColumns = ref([
@@ -188,7 +182,7 @@ function claimUrl(section) {
 <template>
     <FetchData
         url="ClaimStates"
-        :filter="{ fields: ['id', 'description'] }"
+        :filter="{ fields: ['id', 'description', 'code', 'classColor'] }"
         @on-fetch="(data) => (claimStates = data)"
         auto-load
     />
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index e0d9928f9..d6a77bafe 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -101,7 +101,10 @@ const columns = computed(() => [
         name: 'stateCode',
         chip: {
             condition: () => true,
-            color: ({ stateCode }) => STATE_COLOR[stateCode] ?? 'bg-grey',
+            color: ({ stateCode }) => {
+                const state = states.value?.find(({ code }) => code === stateCode);
+                return `bg-${state.classColor}`;
+            },
         },
         columnFilter: {
             name: 'claimStateFk',
@@ -131,12 +134,6 @@ const columns = computed(() => [
         ],
     },
 ]);
-
-const STATE_COLOR = {
-    pending: 'bg-warning',
-    loses: 'bg-negative',
-    resolved: 'bg-positive',
-};
 </script>
 
 <template>