diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 65116f97..32c010a1 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -20,8 +20,8 @@ const productServiceStore = useProductServiceStore();
 const optionStore = useOptionStore();
 const workflowStore = useWorkflowTemplate();
 
-// const { fetchListOfWork } = productServiceStore;
-const { splitPay } = storeToRefs(productServiceStore);
+const { fetchListOfWork } = productServiceStore;
+const { splitPay, workNameItems } = storeToRefs(productServiceStore);
 
 const { getWorkflowTemplateList } = workflowStore;
 const { data: workflowData } = storeToRefs(workflowStore);
@@ -57,7 +57,7 @@ const productItems = defineModel<(Product & { nameEn: string })[]>(
   },
 );
 
-// const refMenu = ref();
+const refMenu = ref();
 
 defineEmits<{
   (e: 'moveWorkUp'): void;
@@ -72,24 +72,10 @@ defineEmits<{
   (e: 'workProperties'): void;
 }>();
 
-// watch(
-//   () => workNameItems.value,
-//   (c, o) => {
-//     const list = c.map((v: { name: string }) => v.name);
-//     const oldList = o.map((v: { name: string }) => v.name);
-//     const index = oldList.indexOf(workName.value);
-
-//     if (list[index] !== oldList[index] && !list.includes(workName.value)) {
-//       if (list.length - 1 === index - 1) workName.value = list[index - 1];
-//       else workName.value = list[index];
-//     }
-//   },
-// );
-
 function mapFlowName(id: string): string {
   if (!id) return workName.value || '';
   const targetFlow = workflowData.value.find((w) => w.id === id);
-  workName.value = targetFlow?.name;
+  // workName.value = targetFlow?.name;
   return targetFlow?.name || attributes.value.workflowName || '';
 }
 
@@ -153,6 +139,23 @@ onMounted(async () => {
   }
 });
 
+watch(
+  () => workNameItems.value,
+  (c, o) => {
+    const list = c.map((v: { name: string }) => v.name);
+    const oldList = o.map((v: { name: string }) => v.name);
+    const index = oldList.indexOf(workName.value || '');
+
+    if (
+      list[index] !== oldList[index] &&
+      !list.includes(workName.value || '')
+    ) {
+      if (list.length - 1 === index - 1) workName.value = list[index - 1];
+      else workName.value = list[index];
+    }
+  },
+);
+
 watch(
   () => attributes.value.workflowId,
   () => {
@@ -203,7 +206,7 @@ watch(
               style="color: hsl(var(--text-mute-2))"
               @click.stop="$emit('moveWorkDown')"
             />
-            <!-- <div
+            <div
               :for="`select-work-name-${index + 1}`"
               class="col q-py-sm q-px-md"
               style="background-color: var(--surface-1); z-index: 2"
@@ -272,8 +275,8 @@ watch(
                   </div>
                 </q-item>
               </q-menu>
-            </div> -->
-            <SelectInput
+            </div>
+            <!-- <SelectInput
               :readonly
               incremental
               :model-value="mapFlowName(attributes.workflowId)"
@@ -293,7 +296,7 @@ watch(
                   }}:
                 </span>
               </template>
-            </SelectInput>
+            </SelectInput> -->
             <q-btn
               v-if="!readonly"
               id="btn-delete-work"
@@ -664,6 +667,7 @@ watch(
 
             <span
               v-if="
+                attributes.workflowId &&
                 attributes.stepProperties?.every(
                   (s) => s.attributes.length === 0,
                 )
@@ -700,7 +704,8 @@ watch(
       <div>
         {{ $t('productService.service.totalProductWork') }}
         <span class="app-text-muted-2">
-          {{ mapFlowName(attributes.workflowId) }}
+          <!-- {{ mapFlowName(attributes.workflowId) }} -->
+          {{ workName }}
         </span>
       </div>
       <div>