diff --git a/src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue b/src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue
index c2bfbc2f5..c4a50a10f 100644
--- a/src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue
+++ b/src/pages/Customer/Defaulter/CustomerBalanceDueTotal.vue
@@ -14,8 +14,8 @@ const { t } = useI18n();
 </script>
 
 <template>
-    <div class="card_balance">
-        <h6 class="title_balance">{{ t('Total') }}</h6>
+    <div class="card_balance q-px-md q-py-sm q-my-sm">
+        <h6 class="title_balance text-center">{{ t('Total') }}</h6>
         <div class="row">
             <p class="key_balance">{{ t('Balance due') }}:&ensp;</p>
             <b class="value_balance">
@@ -28,21 +28,18 @@ const { t } = useI18n();
 <style lang="scss">
 .card_balance {
     border: 1px solid black;
-    margin: 7px;
-    padding: 5px 7px;
 }
 .title_balance {
-    color: white;
+    color: var(--vn-text);
     margin-top: 0;
     margin-bottom: 0;
-    text-align: center;
 }
 .key_balance {
-    color: grey;
+    color: var(--vn-label);
     margin-bottom: 0;
 }
 .value_balance {
-    color: white;
+    color: var(--vn-text);
     margin-bottom: 0;
 }
 </style>
diff --git a/src/pages/Customer/Defaulter/CustomerDefaulter.vue b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
index b9c863e56..e2e14427e 100644
--- a/src/pages/Customer/Defaulter/CustomerDefaulter.vue
+++ b/src/pages/Customer/Defaulter/CustomerDefaulter.vue
@@ -49,9 +49,9 @@ const tableColumnComponents = {
     },
     isWorker: {
         component: QCheckbox,
-        props: (prop) => ({
+        props: ({ value }) => ({
             disable: true,
-            'model-value': Boolean(prop.value),
+            'model-value': Boolean(value),
         }),
         event: () => {},
     },
@@ -136,7 +136,7 @@ const columns = computed(() => {
         },
         {
             align: 'left',
-            field: (row) => toCurrency(row.amount),
+            field: ({ amount }) => toCurrency(amount),
             label: t('Balance D.'),
             name: 'balance',
         },
@@ -154,19 +154,19 @@ const columns = computed(() => {
         },
         {
             align: 'left',
-            field: (row) => toDate(row.created),
+            field: ({ created }) => toDate(created),
             label: t('L. O. Date'),
             name: 'date',
         },
         {
             align: 'left',
-            field: (row) => toCurrency(row.creditInsurance),
+            field: ({ creditInsurance }) => toCurrency(creditInsurance),
             label: t('Credit I.'),
             name: 'credit',
         },
         {
             align: 'left',
-            field: (row) => toDate(row.defaulterSinced),
+            field: ({ defaulterSinced }) => toDate(defaulterSinced),
             label: t('From'),
             name: 'from',
         },