diff --git a/src/components/button/StateButton.vue b/src/components/button/StateButton.vue
index dd3032ed..98e09734 100644
--- a/src/components/button/StateButton.vue
+++ b/src/components/button/StateButton.vue
@@ -30,7 +30,7 @@ defineEmits<{
       ['status-color-waiting']: statusWaiting,
       ['step-status-active']: statusActive,
     }"
-    @click="statusWaiting ? undefined : $emit('click')"
+    @click="statusWaiting && !statusDone ? undefined : $emit('click')"
   >
     <div class="q-px-sm">
       <q-icon
@@ -57,15 +57,15 @@ defineEmits<{
     --_color: var(--blue-5-hsl);
     color: var(--foreground);
   }
-  &.status-color-done {
-    --_color: var(--green-5-hsl);
-    color: var(--foreground);
-  }
-  &.status-color-waiting {
+  &.status-color-waiting:not(.status-color-done) {
     --_color: var(--gray-4-hsl);
     color: var(--foreground);
     cursor: not-allowed !important;
   }
+  &.status-color-done {
+    --_color: var(--green-5-hsl);
+    color: var(--foreground);
+  }
 }
 
 .step-status-active {
diff --git a/src/pages/08_request-list/MainPage.vue b/src/pages/08_request-list/MainPage.vue
index fb5967ec..dab89be0 100644
--- a/src/pages/08_request-list/MainPage.vue
+++ b/src/pages/08_request-list/MainPage.vue
@@ -50,6 +50,7 @@ async function fetchList(opts?: { rotateFlowId?: boolean }) {
     pageSize: pageSize.value,
     requestDataStatus:
       pageState.statusFilter === 'None' ? undefined : pageState.statusFilter,
+    // responsibleOnly: true,
   });
 
   if (ret) {
diff --git a/src/pages/08_request-list/ProductExpansion.vue b/src/pages/08_request-list/ProductExpansion.vue
index 1603c3b7..d5af2fcd 100644
--- a/src/pages/08_request-list/ProductExpansion.vue
+++ b/src/pages/08_request-list/ProductExpansion.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { baseUrl } from 'src/stores/utils';
 
 import BadgeComponent from 'src/components/BadgeComponent.vue';
@@ -6,14 +7,14 @@ 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 = [
+const workStatus = ref([
   RequestWorkStatus.Ready,
   RequestWorkStatus.Waiting,
   RequestWorkStatus.InProgress,
   RequestWorkStatus.Validate,
   RequestWorkStatus.Ended,
   RequestWorkStatus.Completed,
-];
+]);
 
 defineEmits<{
   (
@@ -22,7 +23,7 @@ defineEmits<{
   ): void;
 }>();
 
-defineProps<{
+const props = defineProps<{
   product: ProductRelation;
   name: string;
   code: string;
@@ -37,8 +38,30 @@ defineProps<{
   payCondition: PayCondition;
   readonly?: boolean;
   cancel?: boolean;
+  orderAble?: boolean;
 }>();
 
+function changeableStatus(currentStatus?: RequestWorkStatus) {
+  switch (currentStatus) {
+    case RequestWorkStatus.Ready:
+    case RequestWorkStatus.Waiting:
+    case RequestWorkStatus.InProgress:
+      return [RequestWorkStatus.Canceled];
+    case RequestWorkStatus.Validate:
+    case RequestWorkStatus.Ended:
+    case RequestWorkStatus.Completed:
+    case RequestWorkStatus.Canceled:
+      return [];
+    default:
+      if (props.readonly) return [];
+      if (props.orderAble) {
+        return [RequestWorkStatus.Ready, RequestWorkStatus.Canceled];
+      } else {
+        return [RequestWorkStatus.Ended, RequestWorkStatus.Canceled];
+      }
+  }
+}
+
 // NOTE: Function
 </script>
 <template>
@@ -87,9 +110,7 @@ defineProps<{
           <div class="justify-end flex">
             <q-btn-dropdown
               :disable="
-                readonly ||
-                status?.workStatus === 'Waiting' ||
-                status?.workStatus === 'InProgress'
+                readonly || changeableStatus(status?.workStatus).length === 0
               "
               dense
               unelevated
@@ -104,11 +125,12 @@ defineProps<{
               "
               class="text-capitalize text-weight-regular product-status rounded"
               :class="{
-                disable:
-                  $q.screen.gt.xs &&
-                  (readonly ||
-                    status?.workStatus === RequestWorkStatus.Waiting ||
-                    status?.workStatus === RequestWorkStatus.InProgress),
+                disable: $q.screen.gt.xs && readonly,
+                wait:
+                  ($q.screen.gt.xs &&
+                    !readonly &&
+                    status?.workStatus === RequestWorkStatus.Waiting) ||
+                  status?.workStatus === RequestWorkStatus.InProgress,
                 pending:
                   $q.screen.gt.xs &&
                   !readonly &&
@@ -129,13 +151,7 @@ defineProps<{
                   !readonly &&
                   status?.workStatus === RequestWorkStatus.Canceled,
               }"
-              :style="
-                readonly ||
-                status?.workStatus === RequestWorkStatus.Waiting ||
-                status?.workStatus === RequestWorkStatus.InProgress
-                  ? `opacity: 30% !important`
-                  : ''
-              "
+              :style="readonly ? `opacity: 30% !important` : ''"
               :menu-offset="[0, 8]"
               dropdown-icon="mdi-chevron-down"
               content-class="bordered rounded"
@@ -143,14 +159,15 @@ defineProps<{
             >
               <q-list dense>
                 <q-item
-                  v-for="(value, index) in workStatus"
+                  v-for="(value, index) in changeableStatus(status?.workStatus)"
                   :key="index"
                   clickable
                   v-close-popup
+                  class="row items-center"
                   @click="
                     $emit('changeStatus', {
                       step: status,
-                      requestWorkStatus: workStatus[index],
+                      requestWorkStatus: value,
                     })
                   "
                 >
diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index 715f2475..ce5908a9 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -194,10 +194,6 @@ async function triggerChangeStatusWork(step: Step, responsibleUserId?: string) {
     }
   }
   await nextTick();
-
-  if (successAll.value) {
-    await requestListStore.editStatusRequestWork(step, !!successAll.value);
-  }
 }
 
 async function triggerChangeStatusFile(opt: {
@@ -503,7 +499,9 @@ function goToQuotation(
                       )?.workStatus;
                       return (
                         status === RequestWorkStatus.Completed ||
-                        status === RequestWorkStatus.Ended
+                        status === RequestWorkStatus.Ended ||
+                        status === RequestWorkStatus.Canceled ||
+                        (data?.requestDataStatus === 'Canceled' && !status)
                       );
                     })
                 "
@@ -680,7 +678,7 @@ function goToQuotation(
                     (v) => v.id === getUserId(),
                   ))
               "
-              :order-able="value._formExpansion"
+              :order-able="value._messengerExpansion"
               :installment-info="getInstallmentInfo()"
               :pay-success="
                 isInstallmentPaySuccess(value.productService.installmentNo)