diff --git a/src/pages/05_quotation/preview/ViewForm.vue b/src/pages/05_quotation/preview/ViewForm.vue
index dc0128f0..26be292e 100644
--- a/src/pages/05_quotation/preview/ViewForm.vue
+++ b/src/pages/05_quotation/preview/ViewForm.vue
@@ -2,10 +2,11 @@
 import { storeToRefs } from 'pinia';
 import { onMounted, nextTick, ref, watch } from 'vue';
 import { precisionRound } from 'src/utils/arithmetic';
+import { useI18n } from 'vue-i18n';
 import ThaiBahtText from 'thai-baht-text';
 
 // NOTE: Import stores
-import { formatNumberDecimal } from 'stores/utils';
+import { dialogWarningClose, formatNumberDecimal } from 'stores/utils';
 import { useConfigStore } from 'stores/config';
 import useBranchStore from 'stores/branch';
 import { baseUrl } from 'stores/utils';
@@ -28,12 +29,14 @@ import ViewHeader from './ViewHeader.vue';
 import ViewFooter from './ViewFooter.vue';
 import BankComponents from './BankComponents.vue';
 import PrintButton from 'src/components/button/PrintButton.vue';
+import { CancelButton } from 'components/button';
 import { convertTemplate } from 'src/utils/string-template';
 
 const configStore = useConfigStore();
 const branchStore = useBranchStore();
 const customerStore = useCustomerStore();
 const quotationStore = useQuotationStore();
+const { t } = useI18n();
 const { data: config } = storeToRefs(configStore);
 
 type Product = {
@@ -323,6 +326,20 @@ function calcPrice(c: Product) {
   return precisionRound(price + vat);
 }
 
+async function closeTab() {
+  dialogWarningClose(t, {
+    message: t('dialog.message.close'),
+    action: () => {
+      window.close();
+    },
+    cancel: () => {},
+  });
+}
+
+function closeAble() {
+  return window.opener !== null;
+}
+
 watch(elements, () => {});
 
 function print() {
@@ -333,7 +350,15 @@ function print() {
 <template>
   <div class="toolbar">
     <PrintButton solid @click="print" />
+    <CancelButton
+      outlined
+      id="btn-close"
+      @click="closeTab()"
+      :label="$t('dialog.action.close')"
+      v-if="closeAble()"
+    />
   </div>
+
   <div
     class="row justify-between container color-quotation"
     :class="{
@@ -641,7 +666,7 @@ function print() {
   position: sticky;
   top: 0;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   padding: 1rem;
diff --git a/src/pages/09_task-order/document_view/MainPage.vue b/src/pages/09_task-order/document_view/MainPage.vue
index a9d5eb22..3a8ddc6f 100644
--- a/src/pages/09_task-order/document_view/MainPage.vue
+++ b/src/pages/09_task-order/document_view/MainPage.vue
@@ -1,10 +1,11 @@
 <script lang="ts" setup>
 import { storeToRefs } from 'pinia';
 import { onMounted, nextTick, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
 import ThaiBahtText from 'thai-baht-text';
 
 // NOTE: Import stores
-import { formatNumberDecimal } from 'stores/utils';
+import { dialogWarningClose, formatNumberDecimal } from 'stores/utils';
 import { useConfigStore } from 'stores/config';
 import { precisionRound } from 'src/utils/arithmetic';
 
@@ -12,6 +13,7 @@ import { precisionRound } from 'src/utils/arithmetic';
 import { Branch } from 'stores/branch/types';
 
 // NOTE: Import Components
+import { CancelButton } from 'components/button';
 import ViewHeader from './ViewHeader.vue';
 import ViewFooter from './ViewFooter.vue';
 import PrintButton from 'src/components/button/PrintButton.vue';
@@ -29,6 +31,7 @@ const route = useRoute();
 const taskOrder = useTaskOrderStore();
 const configStore = useConfigStore();
 const config = storeToRefs(configStore).data;
+const { t } = useI18n();
 const viewType = ref<'docOrder' | 'docReceive'>('docOrder');
 
 type Data = TaskOrder;
@@ -250,11 +253,32 @@ onMounted(async () => {
 function print() {
   window.print();
 }
+
+async function closeTab() {
+  dialogWarningClose(t, {
+    message: t('dialog.message.close'),
+    action: () => {
+      window.close();
+    },
+    cancel: () => {},
+  });
+}
+
+function closeAble() {
+  return window.opener !== null;
+}
 </script>
 
 <template>
   <div class="toolbar">
     <PrintButton solid @click="print" />
+    <CancelButton
+      outlined
+      id="btn-close"
+      @click="closeTab()"
+      :label="$t('dialog.action.close')"
+      v-if="closeAble()"
+    />
   </div>
   <div
     class="row justify-between container"
@@ -489,7 +513,7 @@ function print() {
   position: sticky;
   top: 0;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   padding: 1rem;
diff --git a/src/pages/11_credit-note/document-view/MainPage.vue b/src/pages/11_credit-note/document-view/MainPage.vue
index f26c1c42..f87d4b3b 100644
--- a/src/pages/11_credit-note/document-view/MainPage.vue
+++ b/src/pages/11_credit-note/document-view/MainPage.vue
@@ -3,9 +3,10 @@ import { storeToRefs } from 'pinia';
 import { onMounted, nextTick, ref, watch } from 'vue';
 import { precisionRound } from 'src/utils/arithmetic';
 import ThaiBahtText from 'thai-baht-text';
+import { useI18n } from 'vue-i18n';
 
 // NOTE: Import stores
-import { formatNumberDecimal } from 'stores/utils';
+import { dialogWarningClose, formatNumberDecimal } from 'stores/utils';
 
 import { useConfigStore } from 'stores/config';
 import useBranchStore from 'stores/branch';
@@ -28,12 +29,14 @@ import PrintButton from 'src/components/button/PrintButton.vue';
 import { convertTemplate } from 'src/utils/string-template';
 import { RequestWork } from 'src/stores/request-list';
 import { Employee } from 'src/stores/employee/types';
+import { CancelButton } from 'components/button';
 
 const configStore = useConfigStore();
 const branchStore = useBranchStore();
 const customerStore = useCustomerStore();
 const creditNoteStore = useCreditNote();
 const { data: config } = storeToRefs(configStore);
+const { t } = useI18n();
 
 const agentPrice = ref<boolean>(false);
 
@@ -263,11 +266,32 @@ watch(elements, () => {});
 function print() {
   window.print();
 }
+
+async function closeTab() {
+  dialogWarningClose(t, {
+    message: t('dialog.message.close'),
+    action: () => {
+      window.close();
+    },
+    cancel: () => {},
+  });
+}
+
+function closeAble() {
+  return window.opener !== null;
+}
 </script>
 
 <template>
   <div class="toolbar">
     <PrintButton solid @click="print" />
+    <CancelButton
+      outlined
+      id="btn-close"
+      @click="closeTab()"
+      :label="$t('dialog.action.close')"
+      v-if="closeAble()"
+    />
   </div>
   <div class="row justify-between container color-debit-note">
     <section class="content" v-for="(chunk, i) in chunks" :key="i">
@@ -548,7 +572,7 @@ function print() {
   position: sticky;
   top: 0;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   padding: 1rem;
diff --git a/src/pages/12_debit-note/document-view/MainPage.vue b/src/pages/12_debit-note/document-view/MainPage.vue
index 0e4432f4..7233ede7 100644
--- a/src/pages/12_debit-note/document-view/MainPage.vue
+++ b/src/pages/12_debit-note/document-view/MainPage.vue
@@ -3,9 +3,10 @@ import { storeToRefs } from 'pinia';
 import { onMounted, nextTick, ref, watch } from 'vue';
 import { precisionRound } from 'src/utils/arithmetic';
 import ThaiBahtText from 'thai-baht-text';
+import { useI18n } from 'vue-i18n';
 
 // NOTE: Import stores
-import { formatNumberDecimal } from 'stores/utils';
+import { dialogWarningClose, formatNumberDecimal } from 'stores/utils';
 
 import { useConfigStore } from 'stores/config';
 import useBranchStore from 'stores/branch';
@@ -29,6 +30,7 @@ import ViewHeader from './ViewHeader.vue';
 import ViewFooter from './ViewFooter.vue';
 import BankComponents from './BankComponents.vue';
 import PrintButton from 'src/components/button/PrintButton.vue';
+import { CancelButton } from 'components/button';
 import { convertTemplate } from 'src/utils/string-template';
 
 const configStore = useConfigStore();
@@ -36,6 +38,7 @@ const branchStore = useBranchStore();
 const customerStore = useCustomerStore();
 const debitNoteStore = useDebitNote();
 const { data: config } = storeToRefs(configStore);
+const { t } = useI18n();
 
 type Product = {
   id: string;
@@ -272,6 +275,20 @@ onMounted(async () => {
 
 watch(elements, () => {});
 
+async function closeTab() {
+  dialogWarningClose(t, {
+    message: t('dialog.message.close'),
+    action: () => {
+      window.close();
+    },
+    cancel: () => {},
+  });
+}
+
+function closeAble() {
+  return window.opener !== null;
+}
+
 function print() {
   window.print();
 }
@@ -280,6 +297,13 @@ function print() {
 <template>
   <div class="toolbar">
     <PrintButton solid @click="print" />
+    <CancelButton
+      outlined
+      id="btn-close"
+      @click="closeTab()"
+      :label="$t('dialog.action.close')"
+      v-if="closeAble()"
+    />
   </div>
   <div class="row justify-between container color-debit-note">
     <section class="content" v-for="chunk in chunks">
@@ -553,7 +577,7 @@ function print() {
   position: sticky;
   top: 0;
   display: flex;
-  justify-content: center;
+  justify-content: space-between;
   align-items: center;
   margin-bottom: 1rem;
   padding: 1rem;