diff --git a/src/components/05_quotation/ProductItem.vue b/src/components/05_quotation/ProductItem.vue
index a4194fb4..09cc18e9 100644
--- a/src/components/05_quotation/ProductItem.vue
+++ b/src/components/05_quotation/ProductItem.vue
@@ -40,13 +40,6 @@ const rows = defineModel<
   Required<QuotationPayload['productServiceList'][number]>[]
 >('rows', { required: true });
 
-const groupList = ref<
-  {
-    title: string;
-    product: QuotationPayload['productServiceList'][number][];
-  }[]
->([{ title: '', product: [] }]);
-
 const finalDiscount = defineModel<number>('finalDiscount', { default: 0 });
 
 const summaryPrice = defineModel<{
@@ -181,7 +174,7 @@ function openEmployeeTable(title: string, index: number) {
     !currentBtnOpen.value[0].opened[index];
 }
 
-function groupByServiceId() {
+function groupByServiceId(data: typeof rows.value) {
   const groupedItems: {
     title: string;
     product: QuotationPayload['productServiceList'][number][];
@@ -191,7 +184,7 @@ function groupByServiceId() {
   let currentServiceName: string | null = null;
   let serviceFlag: boolean = false;
 
-  rows.value.forEach((item) => {
+  data.forEach((item) => {
     if (item.service) {
       if (noServiceGroup.length > 0) {
         // console.log('push p changmode');
@@ -244,7 +237,7 @@ function groupByServiceId() {
     });
   }
 
-  groupList.value = groupedItems;
+  return groupedItems;
 }
 
 function handleCheck(
@@ -259,13 +252,6 @@ function handleCheck(
   }
 }
 
-watch(
-  () => rows.value,
-  () => {
-    if (rows.value.length > 0) groupByServiceId();
-  },
-);
-
 watch(
   () => summary.value,
   () => {
@@ -289,7 +275,11 @@ watch(
 <template>
   <div class="column">
     <div class="full-width">
-      <section v-for="(item, i) in groupList" :key="i" class="q-pb-md">
+      <section
+        v-for="(item, i) in groupByServiceId(rows)"
+        :key="i"
+        class="q-pb-md"
+      >
         <div
           v-if="item.title && !item.title.includes('_product')"
           class="q-py-sm q-px-md bordered"
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index c75cede3..71c0370d 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -401,7 +401,8 @@ function triggerProductServiceDialog() {
 }
 
 function toggleDeleteProduct(index: number) {
-  deleteItem(productServiceList.value, index);
+  productServiceList.value.splice(index, 1);
+  console.log(productServiceList.value);
 }
 async function assignWorkerToSelectedWorker() {
   if (quotationFormData.value.customerBranchId) {
@@ -440,22 +441,31 @@ function convertToTable(nodes: Node[]) {
 }
 
 function convertEmployeeToTable() {
-  productServiceList.value.map((v) => {
+  productServiceList.value.forEach((v) => {
     if (selectedWorker.value.length === 0 && v.amount === 1) v.amount -= 1;
+
     v.amount = Math.max(
       v.amount + preSelectedWorker.value.length - selectedWorker.value.length,
       1,
     );
 
-    for (
-      let i = 0;
-      i < preSelectedWorker.value.length - selectedWorker.value.length;
-      i++
-    ) {
-      v.workerIndex.push(selectedWorker.value.length + i);
-    }
-    return v;
+    const oldWorkerId: string[] = [];
+    const newWorkerIndex: number[] = [];
+
+    selectedWorker.value.forEach((item, i) => {
+      if (v.workerIndex.includes(i)) oldWorkerId.push(item.id);
+    });
+    preSelectedWorker.value.forEach((item, i) => {
+      if (selectedWorker.value.find((n) => item.id === n.id)) return;
+      newWorkerIndex.push(i);
+    });
+
+    v.workerIndex = oldWorkerId
+      .map((id) => preSelectedWorker.value.findIndex((item) => item.id === id))
+      .filter((idx) => idx !== -1)
+      .concat(newWorkerIndex);
   });
+
   refSelectZoneEmployee.value?.assignSelect(
     selectedWorker.value,
     preSelectedWorker.value,