diff --git a/src/components/05_quotation/FormAbout.vue b/src/components/05_quotation/FormAbout.vue
index d45762bb..21e14f87 100644
--- a/src/components/05_quotation/FormAbout.vue
+++ b/src/components/05_quotation/FormAbout.vue
@@ -26,6 +26,10 @@ defineProps<{
   prefixId: string;
 }>();
 
+defineEmits<{
+  (e: 'addCustomer'): void;
+}>();
+
 async function filter(
   val: string,
   update: (...args: unknown[]) => void,
@@ -123,7 +127,11 @@ async function filter(
         @filter="(val, update) => filter(val, update, 'customer')"
       >
         <template #option="{ scope }">
-          <q-item clickable v-if="scope.index === 0">
+          <q-item
+            clickable
+            v-if="scope.index === 0"
+            @click.stop="$emit('addCustomer')"
+          >
             <q-item-section>
               {{ $t('general.add', { text: $t('quotation.newCustomer') }) }}
             </q-item-section>
@@ -136,6 +144,14 @@ async function filter(
             </q-item-section>
           </q-item>
         </template>
+
+        <template #noOption>
+          <q-item clickable @click.stop="$emit('addCustomer')">
+            <q-item-section>
+              {{ $t('general.add', { text: $t('quotation.newCustomer') }) }}
+            </q-item-section>
+          </q-item>
+        </template>
       </SelectInput>
     </div>
   </div>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 90818d31..312b89b5 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -10,7 +10,7 @@ import useLoader from 'stores/loader';
 import ProfileMenu from './ProfileMenu.vue';
 import DrawerComponent from './DrawerComponent.vue';
 import useUserStore from 'stores/user';
-import { CanvasComponent, FormDialog } from 'components/index';
+import { CanvasComponent, DialogForm } from 'components/index';
 import useOptionStore from 'stores/options';
 import { dialog } from 'stores/utils';
 import { setLocale } from 'src/utils/datetime';
@@ -475,7 +475,7 @@ onMounted(async () => {
       </div>
     </q-page-container>
 
-    <FormDialog
+    <DialogForm
       width="800px"
       height="550px"
       v-model:modal="canvasModal"
@@ -497,7 +497,7 @@ onMounted(async () => {
           style="color: hsl(var(--text-mute))"
         />
       </template>
-    </FormDialog>
+    </DialogForm>
 
     <global-loading :visibility="visible" />
   </q-layout>
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index b2386623..4f39f5d3 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -1,17 +1,22 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
-import { QSelect } from 'quasar';
+import { onMounted, ref } from 'vue';
+import { QSelect, useQuasar } from 'quasar';
 
 import WorkerItem from 'components/05_quotation/WorkerItem.vue';
 import QuotationFormInfo from './QuotationFormInfo.vue';
 import { AddButton, SaveButton } from 'components/button';
 import ToggleButton from 'src/components/button/ToggleButton.vue';
 import ProductItem from 'src/components/05_quotation/ProductItem.vue';
+import { setLocale } from 'src/utils/datetime';
+import { useI18n } from 'vue-i18n';
 
 defineProps<{
   readonly?: boolean;
 }>();
 
+const { locale } = useI18n();
+const $q = useQuasar();
+
 const selectedBranchIssuer = ref('');
 const selectedCustomer = ref('');
 const toggleWorker = ref(true);
@@ -26,10 +31,60 @@ const dueDate = ref('');
 const payType = ref('');
 const paySplitCount = ref(1);
 const payBank = ref('');
+
+function changeMode(mode: string) {
+  if (mode === 'light') {
+    localStorage.setItem('currentTheme', 'light');
+    $q.dark.set(false);
+    return;
+  }
+
+  if (mode === 'dark') {
+    localStorage.setItem('currentTheme', 'dark');
+    $q.dark.set(true);
+    return;
+  }
+
+  if (mode === 'baseOnDevice') {
+    localStorage.setItem('currentTheme', 'baseOnDevice');
+    if (
+      window.matchMedia &&
+      window.matchMedia('(prefers-color-scheme: dark)').matches
+    ) {
+      $q.dark.set(true);
+    } else {
+      $q.dark.set(false);
+    }
+    return;
+  }
+}
+
+onMounted(async () => {
+  const getCurLang = localStorage.getItem('currentLanguage');
+  if (getCurLang === 'English') {
+    locale.value = 'eng';
+    setLocale('en-gb');
+  }
+  if (getCurLang === 'ไทย') {
+    locale.value = 'tha';
+    setLocale('th');
+  }
+
+  const getCurTheme = localStorage.getItem('currentTheme');
+  if (
+    getCurTheme === 'light' ||
+    getCurTheme === 'dark' ||
+    getCurTheme === 'baseOnDevice'
+  ) {
+    changeMode(getCurTheme);
+  } else {
+    changeMode('light');
+  }
+});
 </script>
 
 <template>
-  <div class="fullscreen column">
+  <div class="fullscreen column surface-0">
     <div class="color-bar">
       <div class="blue-segment"></div>
       <div class="orange-segment"></div>
@@ -357,4 +412,12 @@ const payBank = ref('');
 :deep(.q-editor__toolbar-group):nth-child(2) {
   margin-left: auto !important;
 }
+
+:deep(.q-editor__toolbar.row.no-wrap.scroll-x) {
+  background-color: var(--surface-2) !important;
+}
+
+:deep(.q-editor__toolbar) {
+  border-color: var(--surface-3) !important;
+}
 </style>