diff --git a/public/images/upload.png b/public/images/upload.png
new file mode 100644
index 00000000..e735a946
Binary files /dev/null and b/public/images/upload.png differ
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index ac627068..e0997d25 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -16,6 +16,7 @@ import { CustomerBranchCreate } from 'stores/customer/types';
 import { Employee } from 'src/stores/employee/types';
 
 // NOTE: Import Components
+import ReceiptDialog from './ReceiptDialog.vue';
 import QuotationCard from 'src/components/05_quotation/QuotationCard.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
@@ -76,6 +77,7 @@ const pageState = reactive({
   addModal: false,
   quotationModal: false,
   employeeModal: false,
+  receiptModal: false,
 });
 
 const CUSTOMER_BRANCH_DEFAULT: CustomerBranchCreate & {
@@ -208,6 +210,10 @@ function triggerQuotationDialog(opts: {
   window.open(url.toString(), '_blank');
 }
 
+function triggerReceiptDialog() {
+  pageState.receiptModal = true;
+}
+
 const quotationStore = useQuotationStore();
 const {
   data: quotationData,
@@ -544,7 +550,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
                     branchId: v.customerBranch.customer.registeredBranchId,
                   })
                 "
-                @link="console.log('link')"
+                @link="triggerReceiptDialog()"
                 @upload="console.log('upload')"
                 @delete="triggerDialogDeleteQuottaion(v.id)"
                 @change-status="console.log('change')"
@@ -911,6 +917,8 @@ watch(() => pageState.currentTab, fetchQuotationList);
       </div>
     </div>
   </DialogForm>
+
+  <ReceiptDialog v-model="pageState.receiptModal"></ReceiptDialog>
 </template>
 
 <style scoped></style>
diff --git a/src/pages/05_quotation/ReceiptDialog.vue b/src/pages/05_quotation/ReceiptDialog.vue
new file mode 100644
index 00000000..2d052067
--- /dev/null
+++ b/src/pages/05_quotation/ReceiptDialog.vue
@@ -0,0 +1,326 @@
+<script setup lang="ts">
+import { storeToRefs } from 'pinia';
+import { useConfigStore } from 'stores/config';
+import { formatNumberDecimal, commaInput } from 'stores/utils';
+import DialogForm from 'src/components/DialogForm.vue';
+import { reactive, ref } from 'vue';
+
+const configStore = useConfigStore();
+const { data: config } = storeToRefs(configStore);
+
+defineEmits<{
+  (e: 'upload', index: number): void;
+}>();
+
+const model = defineModel<boolean>({ default: false, required: true });
+
+const state = reactive({
+  waitExpansion: true,
+  payExpansion: [] as boolean[],
+});
+
+defineProps<{
+  urgent?: boolean;
+}>();
+</script>
+<template>
+  <DialogForm
+    :title="$t('quotation.receipt')"
+    v-model:modal="model"
+    width="65%"
+  >
+    <div
+      class="col column"
+      :class="{
+        'q-mx-lg q-my-md': $q.screen.gt.sm,
+        'q-mx-md q-my-sm': !$q.screen.gt.sm,
+      }"
+    >
+      <section class="bordered rounded surface-1" style="overflow: hidden">
+        <q-expansion-item
+          hide-expand-icon
+          v-model="state.waitExpansion"
+          header-style="padding:0px"
+        >
+          <template v-slot:header>
+            <div class="column full-width bordered-b">
+              <header class="bg-color-orange text-bold text-body1 q-pa-sm">
+                <q-avatar class="surface-1 q-mr-sm" size="10px" />
+                รอชำระเงิน
+              </header>
+              <span class="q-pa-md row items-center">
+                <q-img
+                  src="/images/quotation-avatar.png"
+                  width="3rem"
+                  class="q-mr-lg"
+                />
+                <div class="column col">
+                  <span class="text-bold text-body1">
+                    MOU Myanmar (Re-turn)
+                  </span>
+                  <span
+                    class="row items-center"
+                    :class="urgent ? 'urgent' : 'app-text-muted'"
+                  >
+                    QT240120S0002
+                    <q-icon
+                      v-if="urgent"
+                      class="q-pl-sm"
+                      name="mdi-fire"
+                      size="xs"
+                    />
+                    <span class="q-ml-auto" style="color: var(--foreground)">
+                      ฿ {{ 0 }}
+                    </span>
+                  </span>
+                </div>
+              </span>
+            </div>
+          </template>
+
+          <span class="app-text-muted-2 q-px-md q-py-sm column">
+            <span class="row">
+              {{ $t('general.total') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{ $t('quotation.discountList') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{ $t('general.totalAfterDiscount') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{ $t('general.totalVatExcluded') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{
+                $t('general.vat', {
+                  msg: `${config && Math.round(config.vat * 100)}%`,
+                })
+              }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{ $t('general.totalVatIncluded') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+            <span class="row">
+              {{ $t('general.discountAfterVat') }}
+              <span class="q-ml-auto" style="color: var(--foreground)">
+                ฿ {{ 0 }}
+              </span>
+            </span>
+          </span>
+        </q-expansion-item>
+        <q-separator inset v-if="state.waitExpansion" />
+        <div
+          class="q-py-sm q-px-md row items-center justify-end app-text-muted-2"
+        >
+          {{ $t('quotation.totalPriceBaht') }}:
+          <span class="q-px-sm" style="color: var(--foreground)">
+            {{ 0 }}
+          </span>
+          <q-btn
+            dense
+            flat
+            rounded
+            padding="0"
+            :icon="`mdi-chevron-${state.waitExpansion ? 'down' : 'up'}`"
+            @click.stop="state.waitExpansion = !state.waitExpansion"
+          />
+        </div>
+      </section>
+
+      <section
+        class="surface-1 rounded bordered column q-mt-md q-pa-md col scroll no-wrap"
+      >
+        <span class="text-weight-bold text-body1">การชำระ</span>
+        <div class="row items-center">
+          <span class="app-text-muted-2">วิธีการชำระเงิน</span>
+          <q-btn
+            dense
+            unelevated
+            padding="2px 8px"
+            label="เงินสดแบ่งจ่าย"
+            class="q-ml-auto rounded"
+            style="background: var(--blue-8); color: var(--surface-1)"
+          />
+        </div>
+
+        <div class="row items-center q-pt-md q-pb-sm">
+          <span class="app-text-muted-2">จำนวนงวด</span>
+          <span class="q-ml-auto">ทั้งหมด</span>
+          <span class="bordered rounded surface-2 number-box q-mx-sm">2</span>
+          งวด จ่ายไปแล้ว
+          <span class="bordered rounded surface-2 number-box q-mx-sm">1</span>
+          งวด คงเหลือ
+          <span class="bordered rounded surface-2 number-box q-mx-sm">1</span>
+          งวด
+        </div>
+        <div class="row items-center">
+          <span
+            class="row col rounded q-px-sm q-py-md"
+            style="border: 1px solid hsl(var(--info-bg))"
+          >
+            ยอดทั้งหมด
+            <span class="q-ml-auto">1,0000.00</span>
+          </span>
+          <span
+            class="row col rounded q-px-sm q-py-md q-mx-md"
+            style="border: 1px solid hsl(var(--positive-bg))"
+          >
+            ชำระไปแล้ว
+            <span class="q-ml-auto">1,0000.00</span>
+          </span>
+          <span
+            class="row col rounded q-px-sm q-py-md"
+            style="border: 1px solid hsl(var(--warning-bg))"
+          >
+            คงเหลือ
+            <span class="q-ml-auto">1,0000.00</span>
+          </span>
+        </div>
+
+        <span class="app-text-muted-2 q-pt-md">บิลการชำระ</span>
+        <q-checkbox size="xs" :model-value="false" label="จ่ายเงินทั้งหมด" />
+
+        <section class="row">
+          <div
+            v-for="i in 3"
+            :key="i"
+            class="bordered rounded surface-1 q-mb-md col-12"
+            style="overflow: hidden"
+          >
+            <q-expansion-item
+              hide-expand-icon
+              v-model="state.payExpansion[i]"
+              header-style="padding:0px"
+            >
+              <template v-slot:header>
+                <div class="column full-width">
+                  <section
+                    class="row full-width items-center surface-2 bordered-b q-px-md q-py-sm"
+                  >
+                    <span class="text-weight-medium column">
+                      งวดทั้งหมด กันยายน 2567
+                      <span class="text-caption app-text-muted-2">
+                        วันครบกำหนดชำระเงิน วันที่ 1 ตุลาคม 2567
+                      </span>
+                    </span>
+                    <div
+                      class="q-ml-auto items-center flex bg-color-orange-light q-py-xs q-px-sm rounded"
+                      style="color: var(--orange-6)"
+                    >
+                      <q-avatar size="5px" class="bg-color-orange q-mr-sm" />
+                      ยังไม่ได้ชำระเงิน
+                    </div>
+                  </section>
+                  <section class="row items-center q-px-md q-py-sm">
+                    ยอดเงินที่ต้องชำระ
+                    <span
+                      class="q-px-sm q-ml-auto"
+                      style="color: var(--foreground)"
+                    >
+                      {{ 0 }}
+                    </span>
+                    <q-btn
+                      dense
+                      flat
+                      rounded
+                      padding="0"
+                      :icon="`mdi-chevron-${state.payExpansion[i] ? 'down' : 'up'}`"
+                      @click.stop="
+                        state.payExpansion[i] = !state.payExpansion[i]
+                      "
+                    />
+                  </section>
+                </div>
+              </template>
+
+              <div
+                class="q-px-md q-py-xs text-weight-medium row items-center"
+                style="background-color: hsla(var(--info-bg) / 0.1)"
+              >
+                งานที่ดำเนินการในงวดนี้
+                <q-btn
+                  dense
+                  flat
+                  padding="0px 8px"
+                  label="เพิ่มงาน"
+                  class="q-ml-auto app-text-info"
+                ></q-btn>
+              </div>
+              <div class="q-px-md q-py-sm">
+                <span class="app-text-muted">ยังไม่พบงาน</span>
+              </div>
+
+              <div
+                class="q-px-md q-py-xs text-weight-medium row items-center"
+                style="background-color: hsla(var(--info-bg) / 0.1)"
+              >
+                อัปโหลดใบเสร็จ
+              </div>
+              <div class="surface-2" style="height: 200px">
+                <div class="column full-height items-center justify-center">
+                  <q-img src="/images/upload.png" width="150px" />
+                  อัปโหลด E-Slip หรือ อัปโหลดเอกสารการชำระเงิน
+                  <q-btn
+                    unelevated
+                    :label="$t('general.upload')"
+                    rounded
+                    class="app-bg-info q-mt-sm"
+                    @click.stop="$emit('upload', i)"
+                  />
+                </div>
+              </div>
+            </q-expansion-item>
+          </div>
+        </section>
+      </section>
+    </div>
+  </DialogForm>
+</template>
+<style scoped>
+.bg-color-orange {
+  --_color: var(--yellow-7-hsl);
+  color: white;
+  background: hsla(var(--_color));
+}
+
+.dark .bg-color-orange {
+  --_color: var(--orange-6-hsl);
+}
+
+.bg-color-orange-light {
+  --_color: var(--yellow-7-hsl);
+  background: hsla(var(--_color) / 0.2);
+}
+.dark .bg-color-orange {
+  --_color: var(--orange-6-hsl / 0.2);
+}
+
+.urgent {
+  color: hsl(var(--red-6-hsl));
+}
+
+.number-box {
+  text-align: center;
+  width: 25px;
+  height: 25px;
+}
+</style>