diff --git a/src/pages/11_credit-note/FormPage.vue b/src/pages/11_credit-note/FormPage.vue
index b567f158..f773e361 100644
--- a/src/pages/11_credit-note/FormPage.vue
+++ b/src/pages/11_credit-note/FormPage.vue
@@ -19,7 +19,7 @@ import AdditionalFileExpansion from '../09_task-order/expansion/AdditionalFileEx
 import PaymentExpansion from './expansion/PaymentExpansion.vue';
 import CreditNoteExpansion from './expansion/CreditNoteExpansion.vue';
 import StateButton from 'src/components/button/StateButton.vue';
-import ProductExpansion from '../09_task-order/expansion/ProductExpansion.vue';
+import ProductExpansion from './expansion/ProductExpansion.vue';
 import SelectReadyRequestWork from '../09_task-order/SelectReadyRequestWork.vue';
 import RefundInformation from './RefundInformation.vue';
 import QuotationFormReceipt from '../05_quotation/QuotationFormReceipt.vue';
diff --git a/src/pages/11_credit-note/constants.ts b/src/pages/11_credit-note/constants.ts
index 70328499..e69f5e6c 100644
--- a/src/pages/11_credit-note/constants.ts
+++ b/src/pages/11_credit-note/constants.ts
@@ -76,3 +76,60 @@ export const hslaColors: Record<string, string> = {
   Pending: '--orange-5-hsl',
   Success: '--blue-6-hsl',
 };
+
+export const productColumn = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: 'no',
+  },
+  {
+    name: 'code',
+    align: 'center',
+    label: 'productService.product.code',
+    field: 'code',
+  },
+  {
+    name: 'productList',
+    align: 'center',
+    label: 'taskOrder.productList',
+    field: 'productList',
+  },
+  {
+    name: 'amountOfEmployee',
+    align: 'center',
+    label: 'taskOrder.amountOfEmployee',
+    field: 'amountOfEmployee',
+  },
+  {
+    name: 'pricePerUnit',
+    align: 'center',
+    label: 'quotation.pricePerUnit',
+    field: 'pricePerUnit',
+  },
+  {
+    name: 'discount',
+    align: 'center',
+    label: 'general.discount',
+    field: 'discount',
+  },
+  {
+    name: 'priceBeforeVat',
+    align: 'center',
+    label: 'quotation.priceBeforeVat',
+    field: 'priceBeforeVat',
+  },
+  {
+    name: 'vat',
+    align: 'center',
+    label: 'general.vat',
+    field: 'vat',
+  },
+  {
+    name: 'totalPriceBaht',
+    align: 'center',
+    label: 'quotation.totalPriceBaht',
+    field: 'totalPriceBaht',
+  },
+] as const satisfies QTableProps['columns'];
diff --git a/src/pages/11_credit-note/expansion/ProductExpansion.vue b/src/pages/11_credit-note/expansion/ProductExpansion.vue
new file mode 100644
index 00000000..57d76198
--- /dev/null
+++ b/src/pages/11_credit-note/expansion/ProductExpansion.vue
@@ -0,0 +1,259 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { QTableSlots } from 'quasar';
+
+import { AddButton } from 'src/components/button';
+import TableEmployee from '../../09_task-order/TableEmployee.vue';
+
+import { RequestWork } from 'src/stores/request-list';
+import { productColumn } from '../constants';
+import { baseUrl, formatNumberDecimal } from 'src/stores/utils';
+import { precisionRound } from 'src/utils/arithmetic';
+import { useConfigStore } from 'stores/config';
+import { storeToRefs } from 'pinia';
+
+const currentExpanded = ref<boolean[]>([]);
+const configStore = useConfigStore();
+const { data: config } = storeToRefs(configStore);
+
+const taskProduct = defineModel<{ productId: string; discount?: number }[]>(
+  'taskProduct',
+  {
+    default: [],
+  },
+);
+
+const props = defineProps<{
+  readonly?: boolean;
+  agentPrice?: boolean;
+  taskList: {
+    product: RequestWork['productService']['product'];
+    list: RequestWork[];
+  }[];
+}>();
+
+defineEmits<{
+  (e: 'addProduct'): void;
+}>();
+
+defineExpose({
+  calcPricePerUnit,
+});
+
+function openList(index: number) {
+  if (!currentExpanded.value[index]) {
+    currentExpanded.value.map((_, i) => {
+      if (i !== index) currentExpanded.value[i] = false;
+    });
+  }
+  currentExpanded.value[index] = !currentExpanded.value[index];
+}
+
+function calcPricePerUnit(product: RequestWork['productService']['product']) {
+  const val = props.agentPrice ? product.agentPrice : product.price;
+
+  if (product[props.agentPrice ? 'agentPriceCalcVat' : 'calcVat']) {
+    return val / (1 + (config.value?.vat || 0.07));
+  } else {
+    return val;
+  }
+}
+
+function calcPrice(
+  product: RequestWork['productService']['product'],
+  amount: number,
+) {
+  const pricePerUnit = props.agentPrice ? product.agentPrice : product.price;
+  const discount =
+    taskProduct.value.find((v) => v.productId === product.id)?.discount || 0;
+  const priceNoVat = product[
+    props.agentPrice ? 'agentPriceVatIncluded' : 'vatIncluded'
+  ]
+    ? pricePerUnit / (1 + (config.value?.vat || 0.07))
+    : pricePerUnit;
+  const priceDiscountNoVat = priceNoVat * amount - discount;
+
+  const rawVatTotal = product[
+    props.agentPrice ? 'agentPriceCalcVat' : 'calcVat'
+  ]
+    ? priceDiscountNoVat * (config.value?.vat || 0.07)
+    : 0;
+
+  return precisionRound(priceNoVat * amount + rawVatTotal);
+}
+</script>
+<template>
+  <q-expansion-item
+    dense
+    class="overflow-hidden bordered full-width"
+    switch-toggle-side
+    style="border-radius: var(--radius-2)"
+    expand-icon="mdi-chevron-down-circle"
+    header-class="surface-1 q-py-sm text-medium text-body1"
+    default-opened
+  >
+    <template #header>
+      <span
+        class="row items-center justify-between full-width"
+        style="min-height: 31.01px"
+      >
+        {{ $t('general.information', { msg: $t('taskOrder.productList') }) }}
+        <AddButton
+          icon-only
+          @click.stop="$emit('addProduct')"
+          v-if="!readonly"
+        />
+      </span>
+    </template>
+
+    <main class="q-px-md q-py-sm surface-1">
+      <q-table
+        :columns="
+          productColumn.filter(
+            (v) =>
+              v.name !== 'discount' &&
+              v.name !== 'priceBeforeVat' &&
+              v.name !== 'vat',
+          )
+        "
+        :rows="taskList"
+        bordered
+        flat
+        hide-pagination
+        card-container-class="q-col-gutter-sm"
+        class="full-width"
+        :rows-per-page-options="[0]"
+        :no-data-label="$t('general.noDataTable')"
+      >
+        <template v-slot:header="props">
+          <q-tr
+            style="background-color: hsla(var(--info-bg) / 0.07)"
+            :props="props"
+          >
+            <q-th v-for="col in props.cols" :key="col.name" :props="props">
+              {{ col.label && $t(col.label) }}
+              {{ col.label === 'quotation.vat' ? '%' : '' }}
+            </q-th>
+            <q-th></q-th>
+          </q-tr>
+        </template>
+
+        <template
+          v-slot:body="props: {
+            row: {
+              product: RequestWork['productService']['product'];
+              list: RequestWork[];
+            };
+          } & Omit<Parameters<QTableSlots['body']>[0], 'row'>"
+        >
+          <q-tr class="text-center">
+            <q-td>
+              {{ props.rowIndex + 1 }}
+            </q-td>
+            <q-td>
+              {{ props.row.product.code }}
+            </q-td>
+            <q-td style="width: 100%" class="text-left">
+              <q-avatar class="q-mr-sm" size="md">
+                <q-img
+                  class="text-center"
+                  :ratio="1"
+                  :src="`${baseUrl}/product/${props.row.product.id}/image/${props.row.product.selectedImage}`"
+                >
+                  <template #error>
+                    <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)`"
+                    />
+                  </template>
+                </q-img>
+              </q-avatar>
+              {{ props.row.product.name }}
+            </q-td>
+            <q-td>
+              {{ props.row.list.length }}
+            </q-td>
+            <q-td class="text-right">
+              {{
+                formatNumberDecimal(
+                  calcPricePerUnit(props.row.product) +
+                    (props.row.product.calcVat
+                      ? calcPricePerUnit(props.row.product) *
+                        (config?.vat || 0.07)
+                      : 0),
+                  2,
+                )
+              }}
+            </q-td>
+
+            <!-- total -->
+            <q-td class="text-right">
+              {{
+                formatNumberDecimal(
+                  calcPrice(props.row.product, props.row.list.length),
+                  2,
+                )
+              }}
+            </q-td>
+            <q-td>
+              <q-btn
+                dense
+                flat
+                class="rounded"
+                @click.stop="openList(props.rowIndex)"
+              >
+                <div class="row items-center no-wrap">
+                  <q-icon name="mdi-account-group-outline" />
+                  <q-icon
+                    class="btn-arrow-right"
+                    :class="{
+                      active: currentExpanded[props.rowIndex],
+                    }"
+                    size="xs"
+                    :name="`mdi-chevron-${currentExpanded[props.rowIndex] ? 'down' : 'up'}`"
+                  />
+                </div>
+              </q-btn>
+            </q-td>
+          </q-tr>
+
+          <q-tr v-show="currentExpanded[props.rowIndex]" :props="props">
+            <q-td colspan="100%" style="padding: 16px">
+              <TableEmployee :rows="props.row.list" />
+            </q-td>
+          </q-tr>
+        </template>
+      </q-table>
+
+      <div class="q-pt-md row items-center">
+        <span class="q-ml-auto q-mr-sm">
+          {{
+            $t('general.numberOf', {
+              msg: $t('productService.product.product'),
+            })
+          }}
+        </span>
+        <div class="surface-3 q-px-sm rounded">{{ taskList.length }}</div>
+      </div>
+    </main>
+  </q-expansion-item>
+</template>
+<style scoped>
+.product-status {
+  padding-left: 8px;
+  border-radius: 20px;
+  color: hsl(var(--_color));
+  background: hsla(var(--_color) / 0.15);
+
+  &.warning {
+    --_color: var(--warning-bg);
+  }
+  &.positive {
+    --_color: var(--positive-bg);
+  }
+  &.negative {
+    --_color: var(--negative-bg);
+  }
+}
+</style>