diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 824a36ab..9530e77a 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -154,14 +154,14 @@ function reset() {
         >
           <q-btn
             v-if="isEdit"
-            dense
-            outline
-            unelevated
             id="cancelBtn"
-            class="q-px-md app-text-negative"
-            :label="$t('cancel')"
+            unelevated
+            class="btn-cancel-dialog"
+            color="grey-4"
             type="reset"
+            text-color="grey-10"
             @click="close"
+            :label="$t('cancel')"
           />
           <q-btn
             v-if="isEdit"
diff --git a/src/components/FormDialog.vue b/src/components/FormDialog.vue
index cdf903ca..fd8ace59 100644
--- a/src/components/FormDialog.vue
+++ b/src/components/FormDialog.vue
@@ -202,13 +202,13 @@ const tabsList = defineModel<{ name: string; label: string }[]>('tabsList');
           </div>
           <div class="row flex justify-end q-gutter-x-md">
             <q-btn
-              dense
-              outline
-              unelevated
               id="cancelBtn"
-              class="q-px-md app-text-negative"
-              :label="$t('cancel')"
+              unelevated
+              class="col btn-cancel-dialog"
+              color="grey-4"
+              text-color="grey-10"
               @click="close"
+              :label="$t('cancel')"
               v-close-popup
             />
             <q-btn