diff --git a/src/components/common/VnChip.vue b/src/components/common/VnChip.vue
index dd2de2c64..bb9b46e71 100644
--- a/src/components/common/VnChip.vue
+++ b/src/components/common/VnChip.vue
@@ -1,13 +1,11 @@
 <script setup>
-const $props = defineProps({
-    color: { type: String, default: null },
+defineProps({
     text: { type: String, default: null },
-    dense: { type: String, default: null },
     textColor: { type: String, default: 'black' },
 });
 </script>
 <template>
-    <QChip :color="$props.color" :text-color="textColor" :dense="$props.dense">{{
-        text
-    }}</QChip>
+    <QChip v-bind="$attrs">
+        <slot>{{ text }}</slot>
+    </QChip>
 </template>
diff --git a/src/components/common/VnLog.vue b/src/components/common/VnLog.vue
index 0c8a70092..5c70b900d 100644
--- a/src/components/common/VnLog.vue
+++ b/src/components/common/VnLog.vue
@@ -14,7 +14,6 @@ import VnJsonValue from '../common/VnJsonValue.vue';
 import FetchData from '../FetchData.vue';
 import VnSelectFilter from './VnSelectFilter.vue';
 import VnUserLink from '../ui/VnUserLink.vue';
-import VnChip from '../common/VnChip.vue';
 
 const stateStore = useStateStore();
 const validationsStore = useValidator();
@@ -444,10 +443,10 @@ setLogTree();
                 >
                     <QItemSection>
                         <QItemLabel class="model-info q-mb-xs" v-if="!byRecord">
-                            <VnChip
+                            <QChip
+                                dense
                                 size="md"
-                                text-color="white"
-                                class="model-name q-mr-xs"
+                                class="model-name q-mr-xs text-white"
                                 v-if="
                                     !(modelLog.changedModel && modelLog.changedModelId) &&
                                     modelLog.model
@@ -456,9 +455,9 @@ setLogTree();
                                     backgroundColor: useColor(modelLog.model),
                                 }"
                                 :title="modelLog.model"
-                                :text="t(modelLog.modelI18n)"
-                                dense="dense"
-                            />
+                            >
+                                {{ t(modelLog.modelI18n) }}
+                            </QChip>
                             <span class="model-id" v-if="modelLog.id"
                                 >#{{ modelLog.id }}</span
                             >
diff --git a/src/components/common/VnSmsDialog.vue b/src/components/common/VnSmsDialog.vue
index 3027b14c7..59021cef4 100644
--- a/src/components/common/VnSmsDialog.vue
+++ b/src/components/common/VnSmsDialog.vue
@@ -4,7 +4,6 @@ import { useI18n } from 'vue-i18n';
 import { useDialogPluginComponent } from 'quasar';
 
 import VnInput from 'src/components/common/VnInput.vue';
-import VnChip from 'src/components/common/VnChip.vue';
 
 const { dialogRef, onDialogOK } = useDialogPluginComponent();
 const { t, availableLocales } = useI18n();
@@ -138,7 +137,9 @@ async function send() {
                         />
                     </template>
                     <template #counter>
-                        <VnChip :color="color" :text="totalLength + '/' + maxLength" />
+                        <QChip :color="color" dense>
+                            {{ totalLength }}/{{ maxLength }}
+                        </QChip>
                     </template>
                 </QInput>
             </QCardSection>
diff --git a/src/components/ui/CardList.vue b/src/components/ui/CardList.vue
index 9779c58eb..e8392b13e 100644
--- a/src/components/ui/CardList.vue
+++ b/src/components/ui/CardList.vue
@@ -1,6 +1,5 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
-import VnChip from 'src/components/common/VnChip.vue';
 
 const { t } = useI18n();
 
@@ -29,12 +28,9 @@ const toggleCardCheck = (item) => {
                         <div class="title text-primary text-weight-bold text-h5">
                             {{ $props.title }}
                         </div>
-                        <VnChip
-                            :text="'ID:' + $props.id"
-                            class="q-chip-color"
-                            outline
-                            size="sm"
-                        />
+                        <QChip class="q-chip-color" outline size="sm">
+                            {{ t('ID') }}: {{ $props.id }}
+                        </QChip>
                     </div>
                     <QCheckbox
                         v-if="showCheckbox"
diff --git a/src/components/ui/VnSms.vue b/src/components/ui/VnSms.vue
index d45eef103..ceb24b2bb 100644
--- a/src/components/ui/VnSms.vue
+++ b/src/components/ui/VnSms.vue
@@ -4,7 +4,6 @@ import { date } from 'quasar';
 import VnPaginate from 'src/components/ui/VnPaginate.vue';
 import VnAvatar from '../ui/VnAvatar.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import VnChip from '../common/VnChip.vue';
 
 const $props = defineProps({
     url: { type: String, default: null },
@@ -90,14 +89,15 @@ function formatNumber(number) {
                                     )
                                 }}</QItemLabel>
                                 <QItemLabel class="row center">
-                                    <VnChip
+                                    <QChip
                                         :color="
                                             row.sms.status == 'OK'
                                                 ? 'positive'
                                                 : 'negative'
                                         "
-                                        :text="row.sms.status"
-                                    />
+                                    >
+                                        {{ row.sms.status }}
+                                    </QChip>
                                 </QItemLabel>
                             </QItemSection>
                         </QItem>
diff --git a/src/css/app.scss b/src/css/app.scss
index 34d7b0a42..f1fc22527 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -1,5 +1,10 @@
 // app global css in SCSS form
 @import './icons.scss';
+body {
+    .q-chip__content {
+        color: 'red';
+    }
+}
 
 body.body--light {
     --font-color: black;
@@ -11,7 +16,8 @@ body.body--light {
 
     background-color: var(--vn-page-color);
 
-    .q-header .q-toolbar {
+    .q-header .q-toolbar,
+    .q-chip {
         color: var(--font-color);
     }
     .q-card,
@@ -29,6 +35,10 @@ body.body--dark {
     --vn-accent-color: #424242;
 
     background-color: #222;
+
+    .q-chip {
+        color: black;
+    }
 }
 
 a {
diff --git a/src/pages/Claim/Card/ClaimLines.vue b/src/pages/Claim/Card/ClaimLines.vue
index 248b5a69a..90dd31199 100644
--- a/src/pages/Claim/Card/ClaimLines.vue
+++ b/src/pages/Claim/Card/ClaimLines.vue
@@ -12,7 +12,6 @@ import FetchData from 'components/FetchData.vue';
 import VnDiscount from 'components/common/vnDiscount.vue';
 import ClaimLinesImport from './ClaimLinesImport.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
-import VnChip from 'src/components/common/VnChip.vue';
 
 const quasar = useQuasar();
 const route = useRoute();
@@ -162,16 +161,16 @@ function showImportDialog() {
         <div class="row q-gutter-md">
             <div>
                 {{ t('Amount') }}
-                <VnChip :dense="$q.screen.lt.sm" :text="toCurrency(amount)" />
+                <QChip :dense="$q.screen.lt.sm">
+                    {{ toCurrency(amount) }}
+                </QChip>
             </div>
             <QSeparator dark vertical />
             <div>
                 {{ t('Amount Claimed') }}
-                <VnChip
-                    color="positive"
-                    :dense="$q.screen.lt.sm"
-                    :text="toCurrency(amountClaimed)"
-                />
+                <QChip color="positive" :dense="$q.screen.lt.sm">
+                    {{ toCurrency(amountClaimed) }}
+                </QChip>
             </div>
         </div>
     </Teleport>
diff --git a/src/pages/Claim/Card/ClaimSummary.vue b/src/pages/Claim/Card/ClaimSummary.vue
index 12b650dcf..2d4d5603c 100644
--- a/src/pages/Claim/Card/ClaimSummary.vue
+++ b/src/pages/Claim/Card/ClaimSummary.vue
@@ -12,7 +12,6 @@ import ClaimNotes from 'src/pages/Claim/Card/ClaimNotes.vue';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
 import ItemDescriptorProxy from 'src/pages/Item/Card/ItemDescriptorProxy.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
-import VnChip from 'src/components/common/VnChip.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -192,11 +191,9 @@ function openDialog(dmsId) {
                 />
                 <VnLv :label="t('claim.summary.state')">
                     <template #value>
-                        <VnChip
-                            :color="stateColor(claim.claimState.code)"
-                            :text="claim.claimState.description"
-                            dense="dense"
-                        />
+                        <QChip color="stateColor(claim.claimState.code)" dense>
+                            {{ claim.claimState.description }}</QChip
+                        >
                     </template>
                 </VnLv>
                 <VnLv :label="t('globals.salesPerson')">
diff --git a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
index e30d9151c..fc15d3bd9 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInSummary.vue
@@ -6,7 +6,6 @@ import { toCurrency, toDate } from 'src/filters';
 import { getUrl } from 'src/composables/getUrl';
 import CardSummary from 'components/ui/CardSummary.vue';
 import VnLv from 'src/components/ui/VnLv.vue';
-import VnChip from 'src/components/common/VnChip.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
 onMounted(async () => {
@@ -302,7 +301,7 @@ function getLink(param) {
                         />
                         <VnLv :label="t('invoiceIn.summary.dueTotal')">
                             <template #value>
-                                <VnChip
+                                <QChip
                                     dense
                                     class="q-pa-xs"
                                     :color="amountsNotMatch ? 'negative' : 'transparent'"
@@ -311,8 +310,9 @@ function getLink(param) {
                                             ? t('invoiceIn.summary.noMatch')
                                             : t('invoiceIn.summary.dueTotal')
                                     "
-                                    :text="toCurrency(invoiceIn.totals.totalDueDay)"
-                                />
+                                >
+                                    {{ toCurrency(invoiceIn.totals.totalDueDay) }}
+                                </QChip>
                             </template>
                         </VnLv>
                     </div>
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 053615fb4..5a31598e1 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -14,7 +14,6 @@ import VnConfirm from 'components/ui/VnConfirm.vue';
 import { toCurrency, toDate } from 'src/filters';
 import { useSession } from 'composables/useSession';
 import axios from 'axios';
-import VnChip from 'src/components/common/VnChip.vue';
 
 const route = useRoute();
 const { t } = useI18n();
@@ -151,12 +150,9 @@ async function confirmOrder() {
                                     >
                                         {{ row?.item?.name }}
                                     </div>
-                                    <VnChip
-                                        class="q-chip-color"
-                                        outline
-                                        size="sm"
-                                        :text="t('ID') + ':' + row.id"
-                                    />
+                                    <QChip class="q-chip-color" outline size="sm">
+                                        {{ t('ID') }}: {{ row.id }}
+                                    </QChip>
                                 </div>
                             </template>
                             <template #list-items>
diff --git a/src/pages/Ticket/Card/TicketSummary.vue b/src/pages/Ticket/Card/TicketSummary.vue
index a7608cae8..85d98f353 100644
--- a/src/pages/Ticket/Card/TicketSummary.vue
+++ b/src/pages/Ticket/Card/TicketSummary.vue
@@ -12,7 +12,6 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import VnLinkPhone from 'src/components/ui/VnLinkPhone.vue';
 import { getUrl } from 'src/composables/getUrl';
 import VnUserLink from 'src/components/ui/VnUserLink.vue';
-import VnChip from 'src/components/common/VnChip.vue';
 import VnTitle from 'src/components/common/VnTitle.vue';
 
 onUpdated(() => summaryRef.value.fetch());
@@ -155,11 +154,9 @@ async function changeState(value) {
                 />
                 <VnLv :label="t('ticket.summary.state')">
                     <template #value>
-                        <VnChip
-                            :color="ticket.ticketState?.state?.classColor ?? 'dark'"
-                            dense="dense"
-                            :text="ticket.ticketState?.state?.name"
-                        />
+                        <QChip :color="ticket.ticketState?.state?.classColor ?? 'dark'">
+                            {{ ticket.ticketState?.state?.name }}
+                        </QChip>
                     </template>
                 </VnLv>
                 <VnLv :label="t('ticket.summary.salesPerson')">