diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index aa6cedb5..c58c3940 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -113,6 +113,7 @@ export default {
     group: 'Group',
     laborIdentified: 'Labor identified',
     beDue: 'Due in',
+    noReason: 'No reason',
     due: 'Due',
     overDue: 'Overdue',
     status: 'Status',
@@ -936,6 +937,7 @@ export default {
       InProgress: 'In Progress',
       Completed: 'Completed',
       Canceled: 'Canceled',
+      CancelRequested: 'Cancel Requested',
 
       AwaitOrder: 'Awaiting Order',
       ReadyOrder: 'Ready for Order',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 1ab24f72..9f59da2f 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -113,6 +113,7 @@ export default {
     group: 'กลุ่ม',
     laborIdentified: 'ระบุแรงงาน',
     beDue: 'จะครบกำหนดในอีก',
+    noReason: 'ไม่มีเหตุผล',
     due: 'ครบกำหนด',
     overDue: 'เลยกำหนด',
     status: 'สถานะ',
@@ -924,6 +925,7 @@ export default {
       InProgress: 'กำลังดำเนินการ',
       Completed: 'เสร็จสิ้น',
       Canceled: 'ยกเลิก',
+      CancelRequested: 'ต้องการยกเลิก',
 
       AwaitOrder: 'รอสั่งงาน',
       ReadyOrder: 'พร้อมสั่งงาน',
diff --git a/src/pages/08_request-list/ProductExpansion.vue b/src/pages/08_request-list/ProductExpansion.vue
index a84e8cc4..788f4d0c 100644
--- a/src/pages/08_request-list/ProductExpansion.vue
+++ b/src/pages/08_request-list/ProductExpansion.vue
@@ -1,20 +1,9 @@
 <script setup lang="ts">
-import { ref } from 'vue';
 import { baseUrl } from 'src/stores/utils';
 
-import BadgeComponent from 'src/components/BadgeComponent.vue';
-
 import { ProductRelation, PayCondition } from 'src/stores/quotations/types';
 import { Step, RequestWorkStatus } from 'src/stores/request-list/types';
-
-const workStatus = ref([
-  RequestWorkStatus.Ready,
-  RequestWorkStatus.Waiting,
-  RequestWorkStatus.InProgress,
-  RequestWorkStatus.Validate,
-  RequestWorkStatus.Ended,
-  RequestWorkStatus.Completed,
-]);
+import BadgeComponent from 'src/components/BadgeComponent.vue';
 
 defineEmits<{
   (
@@ -29,6 +18,8 @@ const props = defineProps<{
   code: string;
   status?: Step;
   imgUrl?: string;
+  requestCancel?: boolean;
+  requestCancelReason?: string;
   installmentInfo?: {
     total: number;
     paid?: number;
@@ -108,6 +99,18 @@ function changeableStatus(currentStatus?: RequestWorkStatus) {
           <div class="rounded q-px-xs app-text-muted surface-3">
             {{ product?.code || code }}
           </div>
+          <BadgeComponent
+            v-if="requestCancel && !cancel"
+            :hsla-color="'--red-5-hsl'"
+            class="q-ml-sm"
+            :title="$t(`requestList.status.CancelRequested`) || '-'"
+          >
+            <template #append>
+              <q-tooltip>
+                {{ requestCancelReason || $t('general.noReason') }}
+              </q-tooltip>
+            </template>
+          </BadgeComponent>
         </div>
 
         <div class="q-ml-auto q-gutter-y-xs">
diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index 2f5ee598..eae2002a 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -731,6 +731,8 @@ async function submitRequestAction(data: {
           <!-- product -->
           <template v-for="(value, index) in productsList" :key="value">
             <ProductExpansion
+              :request-cancel="value.customerRequestCancel"
+              :request-cancel-reason="value.customerRequestCancelReason"
               :cancel="data.requestDataStatus === RequestDataStatus.Canceled"
               :readonly="
                 data.requestDataStatus === RequestDataStatus.Canceled ||
diff --git a/src/pages/08_request-list/TableRequestList.vue b/src/pages/08_request-list/TableRequestList.vue
index 4277204b..359cf498 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -183,6 +183,24 @@ function getEmployeeName(
               $t(`requestList.status.${props.row.requestDataStatus}`) || '-'
             "
           />
+          <BadgeComponent
+            v-if="
+              props.row.customerRequestCancel &&
+              props.row.requestDataStatus !== RequestDataStatus.Canceled
+            "
+            :hsla-color="'--red-5-hsl'"
+            class="q-ml-sm"
+            :title="$t(`requestList.status.CancelRequested`) || '-'"
+          >
+            <template #append>
+              <q-tooltip>
+                {{
+                  props.row.customerRequestCancelReason ||
+                  $t('general.noReason')
+                }}
+              </q-tooltip>
+            </template>
+          </BadgeComponent>
         </q-td>
         <q-td class="text-right">
           <q-btn
diff --git a/src/stores/request-list/types.ts b/src/stores/request-list/types.ts
index 124a8c99..c17e0ebf 100644
--- a/src/stores/request-list/types.ts
+++ b/src/stores/request-list/types.ts
@@ -9,6 +9,9 @@ export type RequestData = {
   createdAt: string;
   updatedAt: string;
 
+  customerRequestCancel?: boolean;
+  customerRequestCancelReason?: string;
+
   quotation: QuotationFull & {
     debitNoteQuotationId: string;
     isDebitNote: boolean;
@@ -60,6 +63,8 @@ export type RequestWork = {
   attributes?: Attributes;
   creditNoteId?: string;
   processByUserId?: string;
+  customerRequestCancel?: boolean;
+  customerRequestCancelReason?: string;
 };
 
 export type RowDocument = {