diff --git a/src/components/05_quotation/QuotationCard.vue b/src/components/05_quotation/QuotationCard.vue
index b622ead3..ed454398 100644
--- a/src/components/05_quotation/QuotationCard.vue
+++ b/src/components/05_quotation/QuotationCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import { formatNumberDecimal } from 'src/stores/utils';
+import BadgeComponent from 'components/BadgeCompoent.vue';
 import KebabAction from '../shared/KebabAction.vue';
 import MainButton from '../button/MainButton.vue';
 
@@ -14,7 +15,11 @@ defineProps<{
   title?: string;
   code?: string;
   amount?: number;
-  date?: string;
+  status?: string;
+  workerCount?: number;
+  workerMax?: number;
+  createdAt?: string;
+  validUntil?: string;
   customerName?: string;
   reporter?: string;
   totalPrice?: number;
@@ -35,14 +40,9 @@ defineEmits<{
   <div class="surface-1 rounded bordered q-pa-sm quo-card">
     <!-- SEC: header -->
     <header class="row items-center no-wrap">
-      <div
-        class="badge-card rounded q-pa-xs"
-        :class="{ [`badge-card__${type}`]: true }"
-      >
-        {{ $t(`quotation.type.${type}`) }}
-      </div>
+      <q-img src="/images/quotation-avatar.png" width="2rem" />
 
-      <div class="column q-ml-md relative-position" style="font-size: 12px">
+      <div class="column q-ml-sm relative-position" style="font-size: 12px">
         <span>
           {{ $t('general.itemNo', { msg: $t('quotation.title') }) }}
         </span>
@@ -62,6 +62,14 @@ defineEmits<{
       </div>
 
       <nav class="col text-right">
+        <q-btn
+          flat
+          dense
+          rounded
+          icon="mdi-play-box-outline"
+          size="12px"
+          @click.stop="$emit('preview')"
+        />
         <q-btn
           flat
           dense
@@ -85,47 +93,45 @@ defineEmits<{
     </header>
 
     <!-- SEC: body -->
-    <section class="row no-wrap q-py-md">
-      <q-img src="/images/quotation-avatar.png" width="4rem" class="q-mr-lg" />
-      <div class="column">
-        <span class="col q-pt-sm">{{ title || '-' }}</span>
-        <span class="app-text-muted">x {{ amount || '0' }}</span>
-      </div>
-      <div
-        class="col text-right app-text-muted q-mr-md self-end"
-        style="font-size: 12px"
-      >
-        {{ date || '-' }}
-      </div>
+    <section class="row no-wrap q-py-md items-center" style="font-size: 90%">
+      <span class="app-text-muted q-pr-sm">{{ $t('general.status') }} :</span>
+      <BadgeComponent :title="status" hsla-color="--blue-6-hsl" />
     </section>
     <q-separator />
     <section class="row q-py-sm">
-      <div class="col-3 app-text-muted">{{ $t('quotation.customerName') }}</div>
-      <div class="col-9">{{ customerName || '-' }}</div>
-      <div class="col-3 app-text-muted">{{ $t('quotation.actor') }}</div>
-      <div class="col-9">{{ reporter || '-' }}</div>
-    </section>
-    <q-separator />
-    <footer class="row no-wrap items-center q-mt-sm" style="text-wrap: nowrap">
-      <Icon
-        class="q-mr-xs"
-        icon="ph:money-fill"
-        style="font-size: 24px; color: var(--green-9)"
-      />
-      {{ $t('quotation.totalPriceBaht') }} :
-      <div class="q-ml-xs" style="color: var(--orange-5)">
+      <div class="col-4 app-text-muted q-pr-sm">
+        {{ $t('quotation.customerName') }}
+      </div>
+      <div class="col-8">{{ customerName || '-' }}</div>
+      <div class="col-4 app-text-muted q-pr-sm">
+        {{ $t('quotation.actor') }}
+      </div>
+      <div class="col-8">{{ reporter || '-' }}</div>
+      <div class="col-4 app-text-muted q-pr-sm">
+        {{ $t('quotation.employee') }}
+      </div>
+      <div class="col-8">
+        <BadgeComponent :title="[workerCount, workerMax].join(' / ')" />
+      </div>
+      <div class="col-4 app-text-muted q-pr-sm">
+        {{ $t('general.createdAt') }}
+      </div>
+      <div class="col-8">
+        {{ createdAt }}
+      </div>
+      <div class="col-4 app-text-muted q-pr-sm">
+        {{ $t('general.validUntil') }}
+      </div>
+      <div class="col-8">
+        {{ validUntil }}
+      </div>
+      <div class="col-4 app-text-muted q-pr-sm">
+        {{ $t('quotation.totalPrice') }}
+      </div>
+      <div class="col-8">
         {{ formatNumberDecimal(totalPrice || 0, 2) }}
       </div>
-      <MainButton
-        outlined
-        icon="mdi-play-box-outline"
-        color="207 96% 32%"
-        class="q-ml-auto"
-        @click="$emit('preview')"
-      >
-        {{ $t('general.view', { msg: $t('general.example') }) }}
-      </MainButton>
-    </footer>
+    </section>
   </div>
 </template>
 
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index acb1e042..c1888bda 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -583,8 +583,11 @@ async function storeDataLocal(id: string) {
                 "
                 :code="v.code"
                 :title="v.workName"
-                :date="new Date(v.createdAt).toLocaleString()"
-                :amount="v._count.worker"
+                :created-at="new Date(v.createdAt).toLocaleString()"
+                :valid-until="new Date(v.dueDate).toLocaleString()"
+                :status="v.quotationStatus"
+                :worker-count="v._count.worker"
+                :worker-max="v.workerMax || v._count.worker"
                 :customer-name="
                   v.customerBranch.registerName ||
                   `${v.customerBranch.firstName || '-'} ${v.customerBranch.lastName || ''}`