diff --git a/src/pages/05_quotation/ProductServiceForm.vue b/src/pages/05_quotation/ProductServiceForm.vue
index 809925db..e36e6068 100644
--- a/src/pages/05_quotation/ProductServiceForm.vue
+++ b/src/pages/05_quotation/ProductServiceForm.vue
@@ -140,6 +140,7 @@ function mapCard() {
         attributes: s.attributes,
         createAt: s.createdAt,
         selectedImage: s.selectedImage,
+        raw: s,
       })) || [],
     product:
       productList.value[selectedProductGroup.value]?.map((p) => ({
@@ -154,6 +155,7 @@ function mapCard() {
         serviceCharge: p.serviceCharge,
         process: p.process,
         selectedImage: p.selectedImage,
+        raw: p,
       })) || [],
   };
 
@@ -165,15 +167,12 @@ function mapNode() {
   const node = selectedItems.value.map((v: Node) => {
     if (v.type === 'service') {
       return {
+        type: 'type',
         id: v.id,
         title: v.name,
         subtitle: v.code,
-        detail: v.detail,
-        attributes: {
-          additional: v.attributes.additional,
-        },
+        raw: v.raw,
         opened: v.work.length > 0,
-        type: 'type',
         icon: 'mdi-server-outline',
         bg: 'hsla(var(--orange-5-hsl)/0.1)',
         fg: 'var(--orange-5)',
@@ -182,38 +181,30 @@ function mapNode() {
             .filter((w: Work) => !w.name)
             .flatMap((w: Work) =>
               w.productOnWork.map((p) => ({
+                type: 'product',
                 id: p.product.id,
                 title: p.product.name,
                 subtitle: p.product.code || ' ',
-                detail: p.product.detail,
-                remark: p.product.remark,
-                price: p.product.price,
-                agentPrice: p.product.agentPrice,
-                serviceCharge: p.product.serviceCharge,
+                raw: p.product,
                 icon: 'mdi-shopping-outline',
                 bg: 'hsla(var(--teal-10-hsl)/0.1)',
                 fg: 'var(--teal-10)',
-                type: 'product',
               })),
             );
           const withNameObjects = v.work
             .filter((w: Work) => w.name)
             .flatMap((w: Work) => ({
+              type: 'work',
               id: w.id,
               title: w.name,
               subtitle: ' ',
-              attributes: w.attributes,
-              type: 'work',
+              raw: w,
               opened: w.productOnWork.length > 0,
               children: w.productOnWork.map((p) => ({
                 id: p.product.id,
                 title: p.product.name,
                 subtitle: p.product.code || ' ',
-                detail: p.product.detail,
-                remark: p.product.remark,
-                price: p.product.price,
-                agentPrice: p.product.agentPrice,
-                serviceCharge: p.product.serviceCharge,
+                raw: p.product,
                 type: 'product',
               })),
             }));
@@ -225,11 +216,7 @@ function mapNode() {
         id: v.id,
         title: v.name,
         subtitle: v.code,
-        detail: v.detail,
-        remark: v.remark,
-        price: v.price,
-        agentPrice: v.agentPrice,
-        serviceCharge: v.serviceCharge,
+        raw: v.raw,
         type: 'product',
         icon: 'mdi-shopping-outline',
         bg: 'hsla(var(--teal-10-hsl)/0.1)',
@@ -525,7 +512,7 @@ watch(
                           <div
                             class="row text-capitalize"
                             :class="
-                              pageState.infoTab === 'detail'
+                              pageState.infoTab === '1'
                                 ? 'text-bold'
                                 : 'app-text-muted'
                             "
@@ -537,7 +524,7 @@ watch(
                           <div
                             class="row text-capitalize"
                             :class="
-                              pageState.infoTab === 'remark'
+                              pageState.infoTab === '2'
                                 ? 'text-bold'
                                 : 'app-text-muted'
                             "
@@ -568,7 +555,7 @@ watch(
                             }}
                           </span>
                           <aside class="surface-3 q-pa-md">
-                            {{ selectedNode[0].detail || '-' }}
+                            {{ selectedNode[0].raw.detail || '-' }}
                           </aside>
                         </span>
 
@@ -593,16 +580,17 @@ watch(
                             "
                             class="surface-3 q-pa-md"
                           >
-                            {{ selectedNode[0].remark || '-' }}
+                            {{ selectedNode[0].raw.remark || '-' }}
                           </aside>
                           <aside v-else class="q-pt-md row q-gutter-sm">
                             <template
                               v-if="
-                                selectedNode[0].attributes.additional.length > 0
+                                selectedNode[0].raw.attributes.additional
+                                  .length > 0
                               "
                             >
                               <div
-                                v-for="att in selectedNode[0].attributes
+                                v-for="att in selectedNode[0].raw.attributes
                                   .additional"
                                 :key="att"
                                 class="bordered q-py-xs q-px-sm rounded"
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 20ea68ae..13420896 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -1,8 +1,21 @@
 <script lang="ts" setup>
-import { setLocale } from 'src/utils/datetime';
+import { useI18n } from 'vue-i18n';
+import { storeToRefs } from 'pinia';
 import { QSelect, useQuasar } from 'quasar';
 import { onMounted, reactive, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
+
+import { setLocale } from 'src/utils/datetime';
+import { dateFormat } from 'src/utils/datetime';
+
+import useOptionStore from 'stores/options';
+import { useQuotationForm } from './form';
+import { Employee } from 'src/stores/employee/types';
+import {
+  ProductGroup,
+  ProductList,
+  Service,
+} from 'src/stores/product-service/types';
+import { QuotationPayload } from 'src/stores/quotations/types';
 
 import ProductServiceForm from './ProductServiceForm.vue';
 import WorkerItem from 'components/05_quotation/WorkerItem.vue';
@@ -14,15 +27,6 @@ import DialogForm from 'src/components/DialogForm.vue';
 import SelectZone from 'src/components/shared/SelectZone.vue';
 import PersonCard from 'src/components/shared/PersonCard.vue';
 import { AddButton, SaveButton } from 'components/button';
-import { storeToRefs } from 'pinia';
-import { useQuotationForm } from './form';
-import { dateFormat } from 'src/utils/datetime';
-import { Employee } from 'src/stores/employee/types';
-import {
-  ProductGroup,
-  ProductList,
-  Service,
-} from 'src/stores/product-service/types';
 import useProductServiceStore from 'src/stores/product-service';
 
 type Node = {
@@ -39,6 +43,7 @@ defineProps<{
   readonly?: boolean;
 }>();
 
+const optionStore = useOptionStore();
 const productServiceStore = useProductServiceStore();
 const quotationForm = useQuotationForm();
 const { locale } = useI18n();
@@ -131,20 +136,12 @@ function triggerProductServiceDialog() {
   // TODO: form and state controll
 }
 
-function convertToTable(nodes: Node[]): Node[] {
-  const products: Node[] = [];
+function toggleDeleteProduct(index: number) {
+  console.log(index);
+}
 
-  nodes.forEach((node) => {
-    if (node.type === 'product' && node.checked) {
-      products.push(node);
-    }
-
-    if (node.children && node.children.length !== 0) {
-      products.push(...convertToTable(node.children)); // Correctly push the converted children
-    }
-  });
-
-  return products;
+function convertToTable(nodes: Node[]) {
+  console.log(nodes);
 }
 
 function changeMode(mode: string) {
@@ -188,6 +185,11 @@ onMounted(async () => {
   quotationFormData.value.customerBranchId =
     urlParams.get('customerBranchId') || '';
 
+  const resultOption = await fetch('/option/option.json');
+  const rawOption = await resultOption.json();
+  if (locale.value === 'eng') optionStore.globalOption = rawOption.eng;
+  if (locale.value === 'tha') optionStore.globalOption = rawOption.tha;
+
   const getCurLang = localStorage.getItem('currentLanguage');
   if (getCurLang === 'English') {
     locale.value = 'eng';
@@ -270,23 +272,28 @@ onMounted(async () => {
             header-class="surface-1"
           >
             <template v-slot:header>
-              <div class="row full-width items-center q-pr-md q-py-sm">
-                <span
-                  class="text-weight-medium q-mr-md"
-                  style="font-size: 18px"
-                >
-                  {{ $t('quotation.employeeList') }}
-                </span>
-                <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
-                {{
-                  toggleWorker ? $t('general.specify') : $t('general.noSpecify')
-                }}
-              </div>
-              <AddButton
-                icon-only
-                class="q-ml-auto"
-                @click.stop="triggerSelectEmployeeDialog"
-              />
+              <section class="row items-center full-width">
+                <div class="row items-center q-pr-md q-py-sm">
+                  <span
+                    class="text-weight-medium q-mr-md"
+                    style="font-size: 18px"
+                  >
+                    {{ $t('quotation.employeeList') }}
+                  </span>
+                  <ToggleButton class="q-mr-sm" v-model="toggleWorker" />
+                  {{
+                    toggleWorker
+                      ? $t('general.specify')
+                      : $t('general.noSpecify')
+                  }}
+                </div>
+                <nav class="q-ml-auto">
+                  <AddButton
+                    icon-only
+                    @click.stop="triggerSelectEmployeeDialog"
+                  />
+                </nav>
+              </section>
             </template>
 
             <div class="surface-1 q-pa-md full-width">
@@ -320,27 +327,23 @@ onMounted(async () => {
             header-class="surface-1"
           >
             <template v-slot:header>
-              <div class="row full-width items-center q-pr-md q-py-sm">
-                <span class="text-weight-medium" style="font-size: 18px">
-                  {{ $t('quotation.productList') }}
-                </span>
-              </div>
-              <AddButton
-                icon-only
-                class="q-ml-auto"
-                @click.stop="triggerProductServiceDialog"
-              />
+              <section class="row items-center full-width">
+                <div class="row items-center q-pr-md q-py-sm">
+                  <span class="text-weight-medium" style="font-size: 18px">
+                    {{ $t('quotation.productList') }}
+                  </span>
+                </div>
+                <nav class="q-ml-auto">
+                  <AddButton
+                    icon-only
+                    class="q-ml-auto"
+                    @click.stop="triggerProductServiceDialog"
+                  />
+                </nav>
+              </section>
             </template>
             <div class="surface-1 q-pa-md full-width">
-              <ProductItem
-                :rows="
-                  rows.map((p) => ({
-                    code: p.subtitle,
-                    name: p.title,
-                  }))
-                "
-              />
-              {{ console.log(rows) }}
+              <ProductItem @delete="toggleDeleteProduct" :rows="[]" />
             </div>
           </q-expansion-item>
 
@@ -358,7 +361,7 @@ onMounted(async () => {
             <template v-slot:header>
               <div class="row full-width items-center q-pr-md q-py-sm">
                 <span class="text-weight-medium" style="font-size: 18px">
-                  {{ $t('productService.group.title') }}
+                  {{ $t('general.remark') }}
                 </span>
               </div>
             </template>
@@ -501,8 +504,8 @@ onMounted(async () => {
       v-model:service-list="serviceList"
       @submit="
         (nodes) => {
-          rows = convertToTable(nodes);
-          pageState.productServiceModal = false;
+          convertToTable(nodes);
+          // pageState.productServiceModal = false;
         }
       "
       @select-group="
@@ -597,4 +600,11 @@ onMounted(async () => {
 :deep(.q-editor__toolbar) {
   border-color: var(--surface-3) !important;
 }
+
+:deep(
+    .q-item.q-item-type.row.no-wrap.q-item--dense.q-item--clickable.q-link.cursor-pointer.q-focusable.q-hoverable.surface-1
+      .q-focus-helper
+  ) {
+  visibility: hidden;
+}
 </style>