diff --git a/src/components/DialogForm.vue b/src/components/DialogForm.vue
index f8003783..533dd6ca 100644
--- a/src/components/DialogForm.vue
+++ b/src/components/DialogForm.vue
@@ -58,7 +58,13 @@ const currentTab = defineModel<string>('currentTab');
         class="column full-height"
       >
         <!-- header -->
-        <div class="form-header q-py-sm q-px-lg">
+        <div
+          class="form-header"
+          :class="{
+            'q-py-sm q-px-lg': $q.screen.gt.sm,
+            'q-pa-xs': !$q.screen.gt.sm,
+          }"
+        >
           <div class="row items-center">
             <div v-if="isEdit && edit" class="row">
               <q-btn
@@ -151,13 +157,13 @@ const currentTab = defineModel<string>('currentTab');
           class="col full-height column full-width"
           :class="{
             dark: $q.dark.isActive,
-            'surface-2': !employee,
+            'surface-0': !employee,
             'surface-tab': employee || tabsList,
           }"
         >
           <div
             v-if="tabsList && tabsList.length > 0"
-            class="row surface-2 q-px-md q-pt-md full-width"
+            class="row surface-0 q-px-md q-pt-md full-width"
             style="border-bottom: 1px solid var(--brand-1)"
           >
             <q-tabs
@@ -200,7 +206,8 @@ const currentTab = defineModel<string>('currentTab');
         <!-- footer -->
         <div
           v-if="!hideFooter"
-          class="form-footer row items-center full-width justify-between q-px-md q-py-md surface-1"
+          class="form-footer row items-center full-width justify-between surface-1"
+          :class="{ 'q-pa-md': $q.screen.gt.sm, 'q-pa-sm': !$q.screen.gt.sm }"
           style="z-index: 3"
         >
           <div>
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index ccea089b..9cb41778 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -72,7 +72,13 @@ function reset() {
         style="padding: 0; border-radius: var(--radius-2)"
       >
         <!-- header -->
-        <div class="bordered-b q-px-lg q-py-md row items-center">
+        <div
+          class="bordered-b row items-center"
+          :class="{
+            'q-px-lg q-py-md': $q.screen.gt.sm,
+            'q-py-xs': !$q.screen.gt.sm,
+          }"
+        >
           <div v-if="!hideAction">
             <div v-if="isEdit" class="row">
               <UndoButton id="btn-info-undo" iconOnly @click="undo" />
@@ -146,7 +152,13 @@ function reset() {
         </div>
 
         <!-- footer -->
-        <div class="bordered-t q-pr-lg row items-center justify-end q-py-md">
+        <div
+          class="bordered-t row items-center justify-end"
+          :class="{
+            'q-pr-lg q-py-md': $q.screen.gt.sm,
+            'q-pr-xs q-py-xs': !$q.screen.gt.sm,
+          }"
+        >
           <CancelButton
             id="btn-info-cancel"
             outlined
diff --git a/src/components/dialog/DialogContainer.vue b/src/components/dialog/DialogContainer.vue
index df2c66e1..aea712ae 100644
--- a/src/components/dialog/DialogContainer.vue
+++ b/src/components/dialog/DialogContainer.vue
@@ -46,7 +46,7 @@ const state = defineModel({ default: false });
 
         <!-- NOTE: DIALOG BODY -->
         <div
-          class="col full-height column full-width"
+          class="col full-height column full-width surface-0"
           :class="{ dark: $q.dark.isActive }"
         >
           <slot />