diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 6bd78dfa..594045e0 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -6,7 +6,7 @@ import { onMounted, reactive, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 
-// NOTE at stores
+// NOTE: Import stores
 import useProductServiceStore from 'src/stores/product-service';
 import { useQuotationStore } from 'src/stores/quotations';
 import { baseUrl, waitAll } from 'src/stores/utils';
@@ -16,11 +16,11 @@ import useFlowStore from 'src/stores/flow';
 import useOcrStore from 'stores/ocr';
 import useMyBranch from 'stores/my-branch';
 
-// NOTE  at type
+// NOTE  Import Types
 import { CustomerBranchCreate } from 'stores/customer/types';
 import { Employee } from 'src/stores/employee/types';
 
-// NOTE  at component
+// NOTE: Import Components
 import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
 import FormReferDocument from 'src/components/05_quotation/FormReferDocument.vue';
 import { UploadFileGroup, noticeJobEmployment } from 'components/upload-file';
@@ -701,8 +701,9 @@ watch(() => pageState.currentTab, fetchQuotationList);
               :name="tab"
               :key="tab"
               @click="
-                async () => {
-                  pageState.currentPage = 1;
+                () => {
+                  quotationPage = 1;
+
                   pageState.currentTab = tab;
                   pageState.inputSearch = '';
                   pageState.statusFilter = 'all';
@@ -735,7 +736,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
         </article>
         <article v-else class="col q-pa-md surface-2 scroll">
           <div class="row q-col-gutter-md">
-            <div v-for="n in quotationData" :key="n.id" class="col-md-4 col-12">
+            <div v-for="v in quotationData" :key="v.id" class="col-md-4 col-12">
               <QuotationCard
                 :type="
                   pageState.currentTab !== 'all'
@@ -745,18 +746,18 @@ watch(() => pageState.currentTab, fetchQuotationList);
                         Split: 'installmentsCash',
                         BillFull: 'fullAmountBill',
                         BillSplit: 'installmentsBill',
-                      }[n.payCondition]
+                      }[v.payCondition]
                 "
-                :code="n.code"
-                :title="n.workName"
-                :date="new Date(n.createdAt).toLocaleString()"
-                :amount="n.workerCount"
+                :code="v.code"
+                :title="v.workName"
+                :date="new Date(v.createdAt).toLocaleString()"
+                :amount="v.workerCount"
                 :customer-name="
-                  n.customerBranch?.registerName ||
-                  `${n.customerBranch?.firstName || '-'} ${n.customerBranch?.lastName || ''}`
+                  v.customerBranch?.registerName ||
+                  `${v.customerBranch?.firstName || '-'} ${v.customerBranch?.lastName || ''}`
                 "
-                :reporter="n.actorName"
-                :total-price="n.totalPrice"
+                :reporter="v.actorName"
+                :total-price="v.totalPrice"
                 @view="console.log('view')"
                 @edit="console.log('edit')"
                 @link="console.log('link')"
@@ -771,7 +772,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
         <!-- SEC: footer content -->
         <footer
           class="row justify-between items-center q-px-md q-py-sm surface-2"
-          v-if="pageState.currentMaxPage > 0"
+          v-if="quotationPageMax > 0"
         >
           <div class="col-4">
             <div class="row items-center no-wrap">
@@ -782,7 +783,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
                 <q-btn-dropdown
                   dense
                   unelevated
-                  :label="pageState.pageSize"
+                  :label="quotationPageSize"
                   class="bordered q-pl-md"
                 >
                   <q-list>
@@ -791,11 +792,7 @@ watch(() => pageState.currentTab, fetchQuotationList);
                       :key="v"
                       clickable
                       v-close-popup
-                      @click="
-                        async () => {
-                          pageState.pageSize = v;
-                        }
-                      "
+                      @click="quotationPageSize = v"
                     >
                       <q-item-section>
                         <q-item-label>{{ v }}</q-item-label>
@@ -826,8 +823,10 @@ watch(() => pageState.currentTab, fetchQuotationList);
     </header>
   </div>
 
-  <!-- SEC: Dialog -->
-  <!-- add quotation -->
+  <!-- NOTE: SEC START - Dialog -->
+
+  <!-- NOTE: START - Quotation Form -->
+
   <DialogForm
     :title="$t('general.add', { text: $t('quotation.title') })"
     v-model:modal="pageState.addModal"
@@ -870,7 +869,10 @@ watch(() => pageState.currentTab, fetchQuotationList);
     </section>
   </DialogForm>
 
-  <!-- add employee quotation -->
+  <!-- NOTE: END - Quotation Form -->
+
+  <!-- NOTE: START - Employee Select Form -->
+
   <DialogForm
     :title="$t('general.select', { msg: $t('quotation.employeeList') })"
     v-model:modal="pageState.employeeModal"
@@ -937,6 +939,8 @@ watch(() => pageState.currentTab, fetchQuotationList);
     </section>
   </DialogForm>
 
+  <!-- NOTE: END - Employee Select Form -->
+
   <!-- NOTE: START - Customer / Employer Type Select Form -->
 
   <DialogForm