diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index 2472e98e..d341bd68 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -21,7 +21,7 @@ const subDistrictId = defineModel<string | null | undefined>('subDistrictId');
 const zipCode = defineModel<string>('zipCode', { default: '' });
 </script>
 <template>
-  <q-dialog full-width v-model="modal" @hide="close">
+  <q-dialog v-model="modal" @hide="close">
     <AppBox
       style="
         padding: 0;
@@ -86,7 +86,6 @@ const zipCode = defineModel<string>('zipCode', { default: '' });
                   outlined
                   :title="titleFormAddress"
                   :separator="addressSeparator"
-                  v-model:isOpen="modal"
                   v-model:address="address"
                   v-model:addressEN="addressEN"
                   v-model:provinceId="provinceId"
diff --git a/src/css/quasar.variables.scss b/src/css/quasar.variables.scss
index 4b1fb9d9..c248cb28 100644
--- a/src/css/quasar.variables.scss
+++ b/src/css/quasar.variables.scss
@@ -55,3 +55,7 @@ $separator-dark-color: var(--border-color);
 .q-field__inner {
   font-family: 'Noto Sans Thai', sans-serif;
 }
+
+div.fullscreen.q-drawer__backdrop {
+  background-color: hsla(0 0% 60% / 0.4) !important;
+}