diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 7354505a..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',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 54b9d96e..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: 'สถานะ',
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 22abf9a9..359cf498 100644
--- a/src/pages/08_request-list/TableRequestList.vue
+++ b/src/pages/08_request-list/TableRequestList.vue
@@ -191,7 +191,16 @@ function getEmployeeName(
             :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