diff --git a/public/personnel-info-bg-dark.png b/public/personnel-info-bg-dark.png
new file mode 100644
index 00000000..c804aa9b
Binary files /dev/null and b/public/personnel-info-bg-dark.png differ
diff --git a/public/personnel-info-bg-light.png b/public/personnel-info-bg-light.png
new file mode 100644
index 00000000..ecf25c97
Binary files /dev/null and b/public/personnel-info-bg-light.png differ
diff --git a/src/pages/02_personnel-management/person-info/MainPage.vue b/src/pages/02_personnel-management/person-info/MainPage.vue
index c6b02e31..1a621b58 100644
--- a/src/pages/02_personnel-management/person-info/MainPage.vue
+++ b/src/pages/02_personnel-management/person-info/MainPage.vue
@@ -2,6 +2,7 @@
 import { useRoute } from 'vue-router';
 import { onMounted, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
+import { useRouter } from 'vue-router';
 
 import useUserStore from 'stores/user';
 import useBranchStore from 'stores/branch';
@@ -20,6 +21,7 @@ import { reactive } from 'vue';
 
 const route = useRoute();
 
+const router = useRouter();
 const userStore = useUserStore();
 const addrStore = useAddressStore();
 const branchStore = useBranchStore();
@@ -115,6 +117,9 @@ onMounted(async () => {
   getCurrentUser();
   getHQ();
   getProvince();
+  if (userStore.userOption.roleOpts.length === 0) {
+    userStore.fetchRoleOption();
+  }
 });
 
 watch(() => route.params.id, getCurrentUser);
@@ -125,209 +130,358 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
 </script>
 
 <template>
+  <div class="text-h6 text-weight-bold q-mb-md" v-if="currentUser">
+    <q-btn
+      flat
+      round
+      padding="xs"
+      icon="mdi-arrow-left"
+      style="color: hsl(var(--info-bg))"
+      @click="router.go(-1)"
+    />
+    {{
+      $i18n.locale === 'en-US'
+        ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
+        : `${currentUser.firstName} ${currentUser.lastName}`
+    }}
+  </div>
   <div
-    class="info-container"
-    :class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
+    class="q-pa-md info-bg"
+    :style="`background-image: url(/personnel-info-bg-${$q.dark.isActive ? 'dark' : 'light'}.png)`"
   >
-    <div>
-      <PersonCard
-        :list="[
-          {
-            id: currentUser.id,
-            img: `${currentUser.profileImageUrl}`,
-            name: `${currentUser.firstName} ${currentUser.lastName}`,
-            male: currentUser.gender === 'male',
-            female: currentUser.gender === 'female',
-            detail: [
-              { label: 'ตำแหน่ง', value: currentUser.userType },
-              { label: 'โทรศัพท์', value: currentUser.telephoneNo },
-              { label: 'อีเมล', value: currentUser.email },
-            ],
-            badge: currentUser.code,
-            disabled: currentUser.status === 'INACTIVE',
-          },
-        ]"
-        v-if="currentUser"
-        :grid-columns="1"
-        no-hover
-        no-action
-      />
-    </div>
-    <AppBox class="surface-1" rounded bordered v-if="currentUser">
-      <div class="row q-col-gutter-md">
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          readonly
-          class="col-6"
-          option-value="id"
-          option-label="code"
-          id="selectHQ"
-          v-model="currentHQ"
-          @update:model-value="currentBR = null"
-          :label="$t('branchHQLabel')"
-          :options="hq"
-        />
-        <q-select
-          v-model="currentBR"
-          dense
-          outlined
-          emit-value
-          map-options
-          readonly
-          class="col-6"
-          id="selectBR"
-          option-value="id"
-          option-label="code"
-          :label="$t('branchLabel')"
-          :options="br"
-        />
-
-        <q-input
-          dense
-          readonly
-          outlined
-          :label="$t('firstname')"
-          class="col-3"
-          v-model="currentUser.firstName"
-        />
-
-        <div class="col-12 group-label">{{ $t('address') }}</div>
-
-        <q-input
-          dense
-          outlined
-          readonly
-          id="address"
-          label="ที่อยู่"
-          class="col-12"
-          v-model="currentUser.addressEN"
-        />
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          readonly
-          id="selectProvince"
-          v-model="currentUser.provinceId"
-          option-value="id"
-          option-label="name"
-          :label="$t('province')"
-          class="col-3"
-          @update:model-value="
-            (currentUser.districtId = null), (currentUser.subDistrictId = null)
-          "
-          :options="opts.province"
-        />
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          readonly
-          id="selectDistrict"
-          v-model="currentUser.districtId"
-          option-value="id"
-          option-label="name"
-          :label="$t('district')"
-          class="col-3"
-          @update:model-value="currentUser.subDistrictId = null"
-          :options="opts.district"
-        />
-        <q-select
-          dense
-          outlined
-          readonly
-          emit-value
-          map-options
-          id="SelectSubDistrict"
-          v-model="currentUser.subDistrictId"
-          option-value="id"
-          option-label="name"
-          :label="$t('subDistrict')"
-          class="col-3"
-          :options="opts.subDistrict"
-        />
-        <q-input
-          dense
-          readonly
-          outlined
-          :label="$t('zipCode')"
-          class="col-3"
-          v-model="currentUser.zipCode"
-        />
-
-        <div class="col-12 group-label">{{ $t('address') }} EN</div>
-
-        <q-input
-          dense
-          outlined
-          readonly
-          id="addressEN"
-          label="ที่อยู่"
-          class="col-12"
-          v-model="currentUser.addressEN"
-        />
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          readonly
-          id="selectProvinceEN"
-          v-model="currentUser.provinceId"
-          option-value="id"
-          option-label="nameEN"
-          :label="$t('province')"
-          class="col-3"
-          @update:model-value="
-            (currentUser.districtId = null), (currentUser.subDistrictId = null)
-          "
-          :options="opts.province"
-        />
-        <q-select
-          dense
-          outlined
-          emit-value
-          map-options
-          readonly
-          id="selectDistrictEN"
-          v-model="currentUser.districtId"
-          option-value="id"
-          option-label="nameEN"
-          :label="$t('district')"
-          class="col-3"
-          @update:model-value="currentUser.subDistrictId = null"
-          :options="opts.district"
-        />
-        <q-select
-          dense
-          outlined
-          readonly
-          emit-value
-          map-options
-          id="SelectSubDistrictEN"
-          v-model="currentUser.subDistrictId"
-          option-value="id"
-          option-label="nameEN"
-          :label="$t('subDistrict')"
-          class="col-3"
-          :options="opts.subDistrict"
-        />
-        <q-input
-          dense
-          readonly
-          outlined
-          zip="zipEN"
-          :label="$t('zipCode')"
-          class="col-3"
-          v-model="currentUser.zipCode"
+    <div
+      class="info-container"
+      :class="{ desktop: $q.screen.gt.sm, dark: $q.dark.isActive }"
+    >
+      <div>
+        <PersonCard
+          :list="[
+            {
+              id: currentUser.id,
+              img: `${currentUser.profileImageUrl}`,
+              name:
+                $i18n.locale === 'en-US'
+                  ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
+                  : `${currentUser.firstName} ${currentUser.lastName}`,
+              male: currentUser.gender === 'male',
+              female: currentUser.gender === 'female',
+              detail: [
+                { label: 'ตำแหน่ง', value: currentUser.userType },
+                { label: 'โทรศัพท์', value: currentUser.telephoneNo },
+                { label: 'อีเมล', value: currentUser.email },
+              ],
+              badge: currentUser.code,
+              disabled: currentUser.status === 'INACTIVE',
+            },
+          ]"
+          v-if="currentUser"
+          :grid-columns="1"
+          no-hover
+          no-action
+          style="box-shadow: var(--shadow-2)"
         />
+        <div class="col-12 row items-center q-pt-md q-col-gutter-x-md">
+          <div class="col-6">
+            <q-btn class="btn-edt full-width" padding="8px 8px">
+              <q-icon size="16px" name="mdi-pencil-outline" class="q-pr-xs" />
+              <span class="text-caption">แก้ไขข้อมูล</span>
+            </q-btn>
+          </div>
+          <div class="col-6">
+            <q-btn class="btn-delete full-width" padding="8px 8px">
+              <q-icon
+                size="16px"
+                name="mdi-trash-can-outline"
+                class="q-pr-xs"
+              />
+              <span class="text-caption">ลบข้อมูล</span>
+            </q-btn>
+          </div>
+        </div>
       </div>
-    </AppBox>
+
+      <AppBox
+        class="surface-1"
+        rounded
+        bordered
+        v-if="currentUser"
+        style="box-shadow: var(--shadow-2)"
+      >
+        <div class="row q-col-gutter-md">
+          <q-select
+            dense
+            borderless
+            emit-value
+            map-options
+            readonly
+            hide-dropdown-icon
+            class="col-6"
+            option-value="id"
+            option-label="code"
+            id="selectHQ"
+            v-model="currentHQ"
+            @update:model-value="currentBR = null"
+            :label="$t('branchHQLabel')"
+            :options="hq"
+          />
+          <q-select
+            v-model="currentBR"
+            dense
+            borderless
+            emit-value
+            map-options
+            readonly
+            hide-dropdown-icon
+            class="col-6"
+            id="selectBR"
+            option-value="id"
+            option-label="code"
+            :label="$t('branchLabel')"
+            :options="br"
+          />
+          <q-select
+            dense
+            borderless
+            emit-value
+            map-options
+            options-dense
+            hide-bottom-space
+            readonly
+            hide-dropdown-icon
+            class="col-3"
+            option-value="value"
+            option-label="label"
+            :label="$t('userType')"
+            v-model="currentUser.userType"
+            :options="userStore.userOption.userTypeOpts"
+            :rules="[(val: string) => !!val || 'กรุณาเลือกประเภทผู้ใช้งาน']"
+          />
+          <q-select
+            dense
+            borderless
+            emit-value
+            map-options
+            options-dense
+            hide-bottom-space
+            readonly
+            hide-dropdown-icon
+            class="col-3"
+            :label="$t('userRole')"
+            option-label="label"
+            option-value="value"
+            v-model="currentUser.userRole"
+            :options="userStore.userOption.roleOpts"
+            :rules="[(val: string) => !!val || 'กรุณาเลือกสิทธิ์ผู้ใช้งาน']"
+          />
+          <q-input
+            dense
+            readonly
+            borderless
+            :label="$t('userCode')"
+            class="col-6"
+            v-model="currentUser.code"
+          />
+          <q-input
+            dense
+            borderless
+            hide-bottom-space
+            readonly
+            class="col-3"
+            label="ชื่อ ภาษาไทย"
+            v-model="currentUser.firstName"
+            :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาไทย']"
+          />
+          <q-input
+            dense
+            borderless
+            hide-bottom-space
+            readonly
+            class="col-3"
+            label="นามสกุล ภาษาไทย"
+            v-model="currentUser.lastName"
+            :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาไทย']"
+          />
+          <q-input
+            dense
+            borderless
+            hide-bottom-space
+            readonly
+            class="col-3"
+            label="ชื่อ ภาษาอังกฤษ"
+            v-model="currentUser.firstNameEN"
+            :rules="[(val: string) => !!val || 'กรุณากรอกชื่อ ภาษาอังกฤษ']"
+          />
+          <q-input
+            dense
+            borderless
+            hide-bottom-space
+            readonly
+            class="col-3"
+            label="นามสกุล ภาษาอังกฤษ"
+            v-model="currentUser.lastNameEN"
+            :rules="[(val: string) => !!val || 'กรุณากรอกนามสกุล ภาษาอังกฤษ']"
+          />
+          <q-input
+            dense
+            readonly
+            borderless
+            label="เบอร์โทร"
+            class="col-6"
+            v-model="currentUser.zipCode"
+          />
+          <q-input
+            dense
+            readonly
+            borderless
+            label="อีเมล"
+            class="col-6"
+            v-model="currentUser.zipCode"
+          />
+
+          <div class="col-12 group-label">{{ $t('address') }}</div>
+
+          <q-input
+            dense
+            borderless
+            readonly
+            id="address"
+            label="ที่อยู่"
+            class="col-12"
+            v-model="currentUser.addressEN"
+          />
+          <q-select
+            dense
+            borderless
+            emit-value
+            map-options
+            readonly
+            hide-dropdown-icon
+            id="selectProvince"
+            v-model="currentUser.provinceId"
+            option-value="id"
+            option-label="name"
+            :label="$t('province')"
+            class="col-3"
+            @update:model-value="
+              (currentUser.districtId = null),
+                (currentUser.subDistrictId = null)
+            "
+            :options="opts.province"
+          />
+          <q-select
+            dense
+            borderless
+            emit-value
+            map-options
+            readonly
+            hide-dropdown-icon
+            id="selectDistrict"
+            v-model="currentUser.districtId"
+            option-value="id"
+            option-label="name"
+            :label="$t('district')"
+            class="col-3"
+            @update:model-value="currentUser.subDistrictId = null"
+            :options="opts.district"
+          />
+          <q-select
+            dense
+            borderless
+            readonly
+            emit-value
+            map-options
+            hide-dropdown-icon
+            id="SelectSubDistrict"
+            v-model="currentUser.subDistrictId"
+            option-value="id"
+            option-label="name"
+            :label="$t('subDistrict')"
+            class="col-3"
+            :options="opts.subDistrict"
+          />
+          <q-input
+            dense
+            readonly
+            borderless
+            :label="$t('zipCode')"
+            class="col-3"
+            v-model="currentUser.zipCode"
+          />
+
+          <div class="col-12 group-label">{{ $t('address') }} EN</div>
+
+          <q-input
+            dense
+            borderless
+            hide-dropdown-icon
+            readonly
+            id="addressEN"
+            label="ที่อยู่"
+            class="col-12"
+            v-model="currentUser.addressEN"
+          />
+          <q-select
+            dense
+            borderless
+            emit-value
+            map-options
+            hide-dropdown-icon
+            readonly
+            id="selectProvinceEN"
+            v-model="currentUser.provinceId"
+            option-value="id"
+            option-label="nameEN"
+            :label="$t('province')"
+            class="col-3"
+            @update:model-value="
+              (currentUser.districtId = null),
+                (currentUser.subDistrictId = null)
+            "
+            :options="opts.province"
+          />
+          <q-select
+            dense
+            emit-value
+            map-options
+            borderless
+            readonly
+            hide-dropdown-icon
+            id="selectDistrictEN"
+            v-model="currentUser.districtId"
+            option-value="id"
+            option-label="nameEN"
+            :label="$t('district')"
+            class="col-3"
+            @update:model-value="currentUser.subDistrictId = null"
+            :options="opts.district"
+          />
+          <q-select
+            dense
+            borderless
+            readonly
+            hide-dropdown-icon
+            emit-value
+            map-options
+            id="SelectSubDistrictEN"
+            v-model="currentUser.subDistrictId"
+            option-value="id"
+            option-label="nameEN"
+            :label="$t('subDistrict')"
+            class="col-3"
+            :options="opts.subDistrict"
+          />
+          <q-input
+            dense
+            readonly
+            borderless
+            zip="zipEN"
+            :label="$t('zipCode')"
+            class="col-3"
+            v-model="currentUser.zipCode"
+          />
+        </div>
+      </AppBox>
+    </div>
   </div>
 </template>
 
@@ -350,4 +504,24 @@ watch(() => currentUser.value?.districtId, getSubDistrict);
     grid-template-columns: 1fr 4fr;
   }
 }
+
+.info-bg {
+  background-color: var(--surface-1);
+  height: 45vw;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+.btn-edt {
+  color: white;
+  background-color: hsl(var(--info-bg));
+  border-radius: var(--radius-2);
+}
+
+.btn-delete {
+  color: hsl(var(--info-bg));
+  background-color: var(--surface-1);
+  border-radius: var(--radius-2);
+  border: 1px solid hsl(var(--info-bg));
+}
 </style>