diff --git a/src/components/02_personnel-management/InfoForm.vue b/src/components/02_personnel-management/InfoForm.vue
index e6884e59..aaeb7267 100644
--- a/src/components/02_personnel-management/InfoForm.vue
+++ b/src/components/02_personnel-management/InfoForm.vue
@@ -53,59 +53,49 @@ const employeeTab = defineModel<string>('employeeTab');
     </div>
 
     <div
-      class="full-width no-wrap col"
-      :class="$q.screen.gt.xs ? 'row' : 'column'"
+      class="col full-height q-pa-md"
+      :class="{ row: $q.screen.gt.sm, column: $q.screen.lt.md }"
     >
-      <div class="col-3" v-if="$slots['person-card']">
+      <div class="col-md-2" v-if="$slots['person-card']">
         <slot name="person-card"></slot>
       </div>
+
       <div
+        class="bordered surface-1 rounded q-pa-md scroll full-height col"
         :class="{
-          'col-9': $slots['person-card'],
-          'col-12': !$slots['person-card'],
-          'q-ml-md': $q.screen.xs,
+          'q-ml-md': $q.screen.gt.sm && $slots['person-card'],
+          'q-mt-md': $q.screen.lt.md,
         }"
-        class="relative-position"
       >
-        <AppBox
-          bordered
-          :noPadding="noPaddingTab"
-          :class="{
-            'q-my-md q-mr-md': $slots['person-card'],
-            'q-ma-md': !$slots['person-card'],
-          }"
-          style="position: absolute; overflow-y: auto; inset: 0"
-        >
-          <div class="row q-col-gutter-y-md">
-            <slot name="information"></slot>
-            <slot name="person"></slot>
-            <slot name="address" v-if="!noAddress">
-              <FormAddress
-                dense
-                outlined
-                separator
-                prefix-id="default"
-                :employee="employee"
-                :readonly="readonly"
-                :disabledRule="disabledRule"
-                v-model:address="address"
-                v-model:addressEN="addressEN"
-                v-model:provinceId="provinceId"
-                v-model:districtId="districtId"
-                v-model:subDistrictId="subDistrictId"
-                v-model:zipCode="zipCode"
-                v-model:same-with-employer="sameWithEmployer"
-                :title="titleFormAddress"
-                :addressTitle="addressTitle || ''"
-                :addressTitleEN="addressTitleEN || ''"
-                v-if="!$slots.address"
-              />
-            </slot>
-            <slot name="qr-code"></slot>
-            <slot name="location"></slot>
-            <slot name="by-type"></slot>
-          </div>
-        </AppBox>
+        <div class="row q-col-gutter-y-md">
+          <slot name="information"></slot>
+          <slot name="person"></slot>
+          <slot name="address" v-if="!noAddress">
+            <FormAddress
+              dense
+              outlined
+              separator
+              prefix-id="default"
+              :employee="employee"
+              :readonly="readonly"
+              :disabledRule="disabledRule"
+              v-model:address="address"
+              v-model:addressEN="addressEN"
+              v-model:provinceId="provinceId"
+              v-model:districtId="districtId"
+              v-model:subDistrictId="subDistrictId"
+              v-model:zipCode="zipCode"
+              v-model:same-with-employer="sameWithEmployer"
+              :title="titleFormAddress"
+              :addressTitle="addressTitle || ''"
+              :addressTitleEN="addressTitleEN || ''"
+              v-if="!$slots.address"
+            />
+          </slot>
+          <slot name="qr-code"></slot>
+          <slot name="location"></slot>
+          <slot name="by-type"></slot>
+        </div>
       </div>
     </div>
   </div>
@@ -126,6 +116,5 @@ const employeeTab = defineModel<string>('employeeTab');
 .content-tab {
   border-top-left-radius: var(--radius-2);
   border-top-right-radius: var(--radius-2);
-  position: relative;
 }
 </style>
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 0898a691..8ba42896 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -43,17 +43,7 @@ function reset() {
     no-swipe-open
     @before-hide="reset"
     @hide="close"
-    :width="
-      $q.screen.gt.xs
-        ? $q.screen.gt.sm
-          ? $q.screen.gt.md
-            ? $q.screen.gt.lg
-              ? 1400
-              : 1200
-            : 1000
-          : 700
-        : windowSize
-    "
+    :width="$q.screen.gt.xs ? windowSize * 0.85 : windowSize"
     v-model="drawerOpen"
     behavior="mobile"
     side="right"
@@ -70,7 +60,8 @@ function reset() {
         class="column justify-between full-height"
         style="padding: 0; border-radius: var(--radius-2)"
       >
-        <div class="form-header col q-px-lg row items-center">
+        <!-- header -->
+        <div class="bordered-b q-pa-lg row items-center">
           <div v-if="showEdit">
             <div v-if="isEdit" class="row">
               <q-btn
@@ -154,17 +145,18 @@ function reset() {
           />
         </div>
 
+        <!-- body -->
         <div
-          class="col-10 form-body full-width"
-          style="position: relative"
+          class="col form-body full-width"
           :class="`${bgColor || 'surface-0'} ${$q.dark.isActive && 'dark'}`"
         >
           <slot></slot>
           <slot name="info"></slot>
         </div>
 
+        <!-- footer -->
         <div
-          class="form-footer col q-pr-lg row items-center justify-end q-gutter-x-lg"
+          class="bordered-t q-pr-lg row items-center justify-end q-gutter-x-lg q-py-md"
         >
           <q-btn
             v-if="isEdit"
@@ -214,10 +206,6 @@ function reset() {
   }
 }
 
-.form-header {
-  border-bottom: 1px solid var(--border-color);
-}
-
 .form-body {
   --_body-bg: var(--sand-0);
   background-color: var(--_body-bg);
@@ -228,10 +216,6 @@ function reset() {
   }
 }
 
-.form-footer {
-  border-top: 1px solid var(--border-color);
-}
-
 .branch-badge {
   --_branch-badge-fg: var(--green-8-hsl);
   --_branch-badge-bg: var(--green-6-hsl);
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 91d79ecc..0345d330 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1469,17 +1469,16 @@ watch(
         v-model:zipCode="formData.zipCode"
       >
         <template #person-card>
-          <div class="q-ma-md">
-            <ProfileUpload
-              prefix-id="drawer-info-personnel"
-              v-model:url-profile="profileUrl"
-              v-model:status-toggle="statusToggle"
-              v-model:profile-submit="profileSubmit"
-              @input-file="inputFile.click()"
-              @cancel-file="inputFile.value = ''"
-            />
+          <ProfileUpload
+            prefix-id="drawer-info-personnel"
+            v-model:url-profile="profileUrl"
+            v-model:status-toggle="statusToggle"
+            v-model:profile-submit="profileSubmit"
+            @input-file="inputFile.click()"
+            @cancel-file="inputFile.value = ''"
+          />
 
-            <!-- <AppBox class="surface-1" style="padding: 0">
+          <!-- <AppBox class="surface-1" style="padding: 0">
               <PersonCard
                 :can-edit-profile="infoDrawerEdit"
                 :data="{
@@ -1498,7 +1497,6 @@ watch(
                 @edit-profile="inputFile.click()"
               />
             </AppBox> -->
-          </div>
         </template>
         <template #information>
           <FormInformation
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index 58629f8d..74cb192b 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -2916,6 +2916,7 @@ watch(isMainPage, () => {
       <CustomerInfoComponent
         :customer-type="customerType"
         :customer-id="currentCustomerId"
+        v-model:mode-view="modeView"
         @back="
           () => {
             isMainPage = true;
@@ -3598,38 +3599,34 @@ watch(isMainPage, () => {
     <template #info>
       <InfoForm>
         <template #person-card>
-          <div class="q-ma-md">
-            <AppBox class="surface-1 bordered-b" style="padding: 0">
-              <UsersDetailCardComponent
-                :can-edit-profile="infoDrawerEdit"
-                :hideButton="true"
-                v-if="!!currentCustomer"
-                no-bg
-                no-detail
-                no-hover
-                :color="
-                  currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
-                "
-                :metadata="{
-                  id: '1',
-                  disabled: currentCustomer.status === 'ACTIVE',
-                }"
-                :list="{
-                  id: '1',
-                  type: currentCustomer.customerType,
-                  name: currentCustomer.customerName,
-                  imageUrl: currentCustomer.imageUrl,
-                  status: currentCustomer.status,
-                  code: 'HQ006',
-                }"
-                @edit-profile="
-                  () => {
-                    inputFile.click();
-                  }
-                "
-              />
-            </AppBox>
-          </div>
+          <UsersDetailCardComponent
+            :can-edit-profile="infoDrawerEdit"
+            :hideButton="true"
+            v-if="!!currentCustomer"
+            no-bg
+            no-detail
+            no-hover
+            :color="
+              currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
+            "
+            :metadata="{
+              id: '1',
+              disabled: currentCustomer.status === 'ACTIVE',
+            }"
+            :list="{
+              id: '1',
+              type: currentCustomer.customerType,
+              name: currentCustomer.customerName,
+              imageUrl: currentCustomer.imageUrl,
+              status: currentCustomer.status,
+              code: 'HQ006',
+            }"
+            @edit-profile="
+              () => {
+                inputFile.click();
+              }
+            "
+          />
         </template>
         <template #information>
           <BasicInformation
@@ -3823,43 +3820,39 @@ watch(isMainPage, () => {
     <template #info>
       <InfoForm>
         <template #person-card>
-          <div class="q-ma-md">
-            <AppBox class="surface-1" style="padding: 0">
-              <UsersDetailCardComponent
-                :hideButton="true"
-                v-if="!!currentCustomer"
-                no-bg
-                no-detail
-                no-hover
-                :color="
-                  currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
-                "
-                :metadata="{
-                  id: '1',
-                  disabled: currentCustomer.status === 'ACTIVE',
-                }"
-                :list="{
-                  id: '1',
-                  type: currentCustomer.customerType,
-                  name: currentCustomer.customerName,
-                  imageUrl: currentCustomer.imageUrl,
-                  status: currentCustomer.status,
-                  code: 'HQ006',
-                }"
-              />
-            </AppBox>
+          <UsersDetailCardComponent
+            :hideButton="true"
+            v-if="!!currentCustomer"
+            no-bg
+            no-detail
+            no-hover
+            :color="
+              currentCustomer.customerType === 'CORP' ? 'purple' : 'green'
+            "
+            :metadata="{
+              id: '1',
+              disabled: currentCustomer.status === 'ACTIVE',
+            }"
+            :list="{
+              id: '1',
+              type: currentCustomer.customerType,
+              name: currentCustomer.customerName,
+              imageUrl: currentCustomer.imageUrl,
+              status: currentCustomer.status,
+              code: 'HQ006',
+            }"
+          />
 
-            <div class="text-left q-pt-md" v-if="infoDrawerEdit">
-              <q-toggle
-                id="toggle-status"
-                dense
-                size="md"
-                v-model="statusToggle"
-                padding="none"
-                class="q-pr-md"
-              />
-              <span>สถานะสาขา</span>
-            </div>
+          <div class="text-left q-pt-md" v-if="infoDrawerEdit">
+            <q-toggle
+              id="toggle-status"
+              dense
+              size="md"
+              v-model="statusToggle"
+              padding="none"
+              class="q-pr-md"
+            />
+            <span>สถานะสาขา</span>
           </div>
         </template>
         <template #information>
@@ -3888,8 +3881,8 @@ watch(isMainPage, () => {
             <TabComponent
               :stat-branch-no="statBranchNo"
               prefix-id="drawer-info-customer-branch"
-              :edit="true"
-              :readonly="true"
+              :edit="infoDrawerEdit"
+              :readonly="!infoDrawerEdit"
               v-model:customer-branch="formData.customerBranch"
               v-model:tab-index="indexTab"
             >
@@ -4067,30 +4060,27 @@ watch(isMainPage, () => {
       employee
     >
       <template #person-card>
-        <div class="q-pa-md full-height" style="overflow: hidden">
-          <PersonCard
-            :can-edit-profile="infoDrawerEmployeeEdit"
-            no-hover
-            no-action
-            no-detail
-            prefix-id="drawer-edit"
-            :data="{
-              name:
-                formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
-              code: formDataEmployee.code,
-              male: formDataEmployee.gender === 'male',
-              female: formDataEmployee.gender === 'female',
-              img: profileUrl || undefined,
-            }"
-            :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
-            :gridColumns="1"
-            @edit-profile="
-              () => {
-                inputFile.click();
-              }
-            "
-          />
-        </div>
+        <PersonCard
+          :can-edit-profile="infoDrawerEmployeeEdit"
+          prefix-id="drawer-edit"
+          no-hover
+          no-action
+          no-detail
+          :data="{
+            name: formDataEmployee.firstName + ' ' + formDataEmployee.lastName,
+            code: formDataEmployee.code,
+            male: formDataEmployee.gender === 'male',
+            female: formDataEmployee.gender === 'female',
+            img: profileUrl || undefined,
+          }"
+          :list="infoEmployeePersonCard ? infoEmployeePersonCard : []"
+          :gridColumns="1"
+          @edit-profile="
+            () => {
+              inputFile.click();
+            }
+          "
+        />
       </template>
       <template #information>
         <BasicInformation