diff --git a/src/components/05_quotation/ProductItem.vue b/src/components/05_quotation/ProductItem.vue
index 42ab6048..9d3be664 100644
--- a/src/components/05_quotation/ProductItem.vue
+++ b/src/components/05_quotation/ProductItem.vue
@@ -1,38 +1,49 @@
 <script lang="ts" setup>
 import { QTableProps } from 'quasar';
 import TableComponents from 'src/components/TableComponents.vue';
+import { QuotationPayload } from 'src/stores/quotations/types';
+import { computed } from 'vue';
 
 const calTax = defineModel('calTax', { default: false });
-const priceData = defineModel<{
-  productList: number;
-  discount: number;
-  tax: number;
-  totalPrice: number;
-}>('priceData', {
-  default: { productList: 0, discount: 0, tax: 0, totalPrice: 0 },
-});
 
 defineEmits<{
   (e: 'delete', index: number): void;
 }>();
 
-withDefaults(
-  defineProps<{
-    rows: {
-      [key: string]: any;
-      code: string;
-      name: string;
-      type: string;
-      amount: number;
-      pricePerUnit: number;
-      discount: number;
-      tax: number;
-      sumPrice: number;
-    }[];
-  }>(),
-  {
-    rows: () => [],
-  },
+const rows = defineModel<
+  Required<QuotationPayload['productServiceList'][number]>[]
+>('rows', { required: true });
+
+function calcPrice(data: (typeof rows.value)[number]) {
+  const price = data.pricePerUnit * data.amount;
+  const discount = Math.round(price * data.discount) / 100;
+  const vat = Math.round((price - discount) * data.vat) / 100;
+
+  return (price * 100 - discount * 100 + vat * 100) / 100;
+}
+
+const summary = computed(() =>
+  rows.value.reduce(
+    (a, c) => {
+      const price = c.pricePerUnit * c.amount;
+      const discount = Math.round(price * c.discount) / 100;
+      const vat = Math.round((price - discount) * c.vat) / 100;
+
+      a.totalPrice = (a.totalPrice * 100 + price * 100) / 100;
+      a.totalDiscount = (a.totalDiscount * 100 + discount * 100) / 100;
+      a.vat = (a.vat * 100 + vat * 100) / 100;
+      a.finalPrice =
+        (a.finalPrice * 100 + price * 100 - discount * 100 + vat * 100) / 100;
+
+      return a;
+    },
+    {
+      totalPrice: 0,
+      totalDiscount: 0,
+      vat: 0,
+      finalPrice: 0,
+    },
+  ),
 );
 
 const columns = [
@@ -46,13 +57,13 @@ const columns = [
     name: 'code',
     align: 'center',
     label: 'productService.group.code',
-    field: 'code',
+    field: (v) => v.product.code,
   },
   {
     name: 'name',
     align: 'left',
     label: 'productService.service.list',
-    field: 'name',
+    field: (v) => v.product.name,
   },
   {
     name: 'amount',
@@ -101,18 +112,27 @@ const columns = [
       button-delete
       :columns="columns"
       :rows="rows"
-      imgColumn="name"
-      :customColumn="['amount', 'pricePerUnit', 'discount', 'tax', 'sumPrice']"
+      :customColumn="[
+        'name',
+        'amount',
+        'pricePerUnit',
+        'discount',
+        'tax',
+        'sumPrice',
+      ]"
       @delete="(i) => $emit('delete', i)"
     >
-      <template v-slot:img-column="{ props }">
-        <q-avatar class="q-mr-sm" size="md">
-          <q-icon
-            class="full-width full-height"
-            name="mdi-shopping-outline"
-            :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
-          />
-        </q-avatar>
+      <template v-slot:body-cell-name="{ props }">
+        <div>
+          <q-avatar class="q-mr-sm" size="md">
+            <q-icon
+              class="full-width full-height"
+              name="mdi-shopping-outline"
+              :style="`color: var(--teal-10); background: hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
+            />
+          </q-avatar>
+          {{ props.row.product.name }}
+        </div>
       </template>
 
       <template v-slot:body-cell-amount="{ props }">
@@ -123,8 +143,7 @@ const columns = [
             type="number"
             style="width: 70px"
             min="0"
-            :modelValue="props.row.amount"
-            @update:modelValue="(v) => (props.row = v)"
+            v-model="props.row.amount"
           />
         </q-td>
       </template>
@@ -136,9 +155,8 @@ const columns = [
             outlined
             type="number"
             style="width: 70px"
-            :modelValue="props.row.pricePerUnit"
             min="0"
-            @update:modelValue="(v) => (props.row = v)"
+            v-model="props.row.pricePerUnit"
           />
         </q-td>
       </template>
@@ -151,9 +169,12 @@ const columns = [
             outlined
             type="number"
             style="width: 70px"
-            :modelValue="props.row.discount"
-            @update:modelValue="(v) => (props.row = v)"
-          />
+            v-model="props.row.discount"
+          >
+            <template v-slot:append>
+              <span class="text-caption no-padding">%</span>
+            </template>
+          </q-input>
         </q-td>
       </template>
 
@@ -165,8 +186,7 @@ const columns = [
             outlined
             type="number"
             style="width: 70px"
-            :modelValue="props.row.tax"
-            @update:modelValue="(v) => (props.row = v)"
+            v-model="props.row.vat"
           >
             <template v-slot:append>
               <span class="text-caption no-padding">%</span>
@@ -177,15 +197,7 @@ const columns = [
 
       <template v-slot:body-cell-sumPrice="{ props }">
         <q-td align="center">
-          <q-input
-            dense
-            min="0"
-            outlined
-            type="number"
-            style="width: 70px"
-            :modelValue="props.row.sumPrice"
-            @update:modelValue="(v) => (props.row = v)"
-          />
+          {{ calcPrice(props.row) }}
         </q-td>
       </template>
 
@@ -215,21 +227,21 @@ const columns = [
       style="width: 15vw"
     >
       <div class="row">
-        {{ $t('quotation.allProduct') }}
-        <span class="q-ml-auto">{{ priceData.productList }} ฿</span>
+        {{ $t('quotation.price') }}
+        <span class="q-ml-auto">{{ summary.totalPrice }} ฿</span>
       </div>
       <div class="row">
         {{ $t('general.discount') }}
-        <span class="q-ml-auto">{{ priceData.discount }} ฿</span>
+        <span class="q-ml-auto">{{ summary.totalDiscount }} ฿</span>
       </div>
       <div class="row">
         {{ $t('quotation.tax') }}
-        <span class="q-ml-auto">{{ priceData.tax }} ฿</span>
+        <span class="q-ml-auto">{{ summary.vat }} ฿</span>
       </div>
       <q-separator spaced="md" />
       <div class="row text-bold text-body2" style="color: var(--foreground)">
         Total Price
-        <span class="q-ml-auto">{{ priceData.totalPrice }} ฿</span>
+        <span class="q-ml-auto">{{ summary.finalPrice }} ฿</span>
       </div>
     </div>
   </div>
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 13420896..2368520e 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -97,6 +97,10 @@ const selectedGroup = ref<ProductGroup | null>(null);
 const selectedGroupSub = ref<'product' | 'service' | null>(null);
 const selectedProductServiceId = ref('');
 
+const productServiceList = ref<
+  Required<QuotationPayload['productServiceList'][number]>[]
+>([]);
+
 async function getAllProduct(
   groupId: string,
   opts?: { force?: false; page?: number; pageSize?: number },
@@ -141,7 +145,12 @@ function toggleDeleteProduct(index: number) {
 }
 
 function convertToTable(nodes: Node[]) {
-  console.log(nodes);
+  const _recursive = (v: Node): Node | Node[] => {
+    if (v.checked && v.children) return v.children.flatMap(_recursive);
+    if (v.checked) return v;
+    return [];
+  };
+  productServiceList.value = nodes.flatMap(_recursive).map((v) => v.value);
 }
 
 function changeMode(mode: string) {
@@ -343,7 +352,10 @@ onMounted(async () => {
               </section>
             </template>
             <div class="surface-1 q-pa-md full-width">
-              <ProductItem @delete="toggleDeleteProduct" :rows="[]" />
+              <ProductItem
+                @delete="toggleDeleteProduct"
+                v-model:rows="productServiceList"
+              />
             </div>
           </q-expansion-item>
 
@@ -502,12 +514,7 @@ onMounted(async () => {
       v-model:product-group="productGroup"
       v-model:product-list="productList"
       v-model:service-list="serviceList"
-      @submit="
-        (nodes) => {
-          convertToTable(nodes);
-          // pageState.productServiceModal = false;
-        }
-      "
+      @submit="convertToTable"
       @select-group="
         async (id) => {
           await getAllService(id);