diff --git a/src/components/StatCardComponent.vue b/src/components/StatCardComponent.vue
index 9501f034..d72b1206 100644
--- a/src/components/StatCardComponent.vue
+++ b/src/components/StatCardComponent.vue
@@ -10,6 +10,7 @@ const props = withDefaults(
     }[];
     dark?: boolean;
     labelI18n?: boolean;
+    nowrap?: boolean;
   }>(),
   {
     labelI18n: false,
@@ -19,14 +20,14 @@ const props = withDefaults(
 
 <template>
   <div
-    class="stat-card"
+    class="row full-width"
     style="gap: var(--size-4)"
-    :class="{ 'justify-between': $q.screen.lt.md, dark }"
+    :class="{ 'justify-between': $q.screen.lt.md, dark, 'no-wrap': nowrap }"
   >
     <AppBox
       v-for="v in props.branch"
       :key="v.label"
-      class="bordered stat-card__wave col-12"
+      class="bordered stat-card__wave"
       :class="{ [`stat-card__${v.color}`]: true }"
       style="
         padding: 12px 16px;
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 8e221d00..14e4f009 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -102,6 +102,7 @@ const typeStats = ref<UserTypeStats>();
 const agencyFile = ref<File[]>([]);
 const agencyFileList = ref<{ name: string; url: string }[]>([]);
 const formData = ref<UserCreate>({
+  branchId: '',
   provinceId: null,
   districtId: null,
   subDistrictId: null,
@@ -256,38 +257,18 @@ async function onSubmit() {
   if (isEdit.value && userId.value) {
     if (!userId.value) return;
 
+    formData.value.branchId = brId.value
+      ? brId.value
+      : hqId.value
+        ? hqId.value
+        : '';
     const formDataEdit = {
       ...formData.value,
       status: !statusToggle.value ? 'INACTIVE' : 'ACTIVE',
     } as const;
+
     await userStore.editById(userId.value, formDataEdit);
 
-    if (
-      hqId.value &&
-      currentUser.value?.branch[0] &&
-      hqId.value !== currentUser.value.branch[0].id &&
-      brId.value !== currentUser.value.branch[0].id
-    ) {
-      await branchStore.removeUser(
-        currentUser.value.branch[0].id,
-        userId.value,
-      );
-
-      await branchStore.addUser(
-        !!brId.value ? brId.value : hqId.value,
-        userId.value,
-      );
-    }
-
-    if (!currentUser.value?.branch[0]) {
-      if (brId.value || hqId.value) {
-        await branchStore.addUser(
-          (!!brId.value ? brId.value : hqId.value)!,
-          userId.value,
-        );
-      }
-    }
-
     if (userId.value && formDataEdit.userType === 'AGENCY') {
       if (!agencyFile.value) return;
       const payload: UserAttachmentCreate = {
@@ -313,13 +294,13 @@ async function onSubmit() {
       ? (formData.value.status = 'CREATED')
       : (formData.value.status = 'INACTIVE');
 
+    formData.value.branchId = brId.value
+      ? brId.value
+      : hqId.value
+        ? hqId.value
+        : '';
+
     const result = await userStore.create(formData.value);
-    if (result) {
-      await branchStore.addUser(
-        !!brId.value ? brId.value : hqId.value,
-        result.id,
-      );
-    }
 
     if (result && formData.value.userType === 'AGENCY') {
       if (!agencyFile.value) return;
@@ -395,6 +376,7 @@ async function assignFormData(idEdit: string) {
     infoPersonId.value = currentUser.value.id;
 
     formData.value = {
+      branchId: foundUser.branch[0].id,
       provinceId: foundUser.provinceId,
       districtId: foundUser.districtId,
       subDistrictId: foundUser.subDistrictId,
@@ -552,27 +534,20 @@ watch(inputSearch, async () => await fetchUserList());
   </ButtonAddComponent>
 
   <div class="column full-height">
-    <!-- <div class="text-h6 text-weight-bold q-mb-md">
-      {{ $t('personnelManagement') }}
-    </div> -->
-
-    <div class="row full-width no-wrap q-pb-md">
+    <div class="row full-width q-pb-md q-gutter-y-md">
       <!-- selector -->
-      <SelectorList
-        :list="selectorList"
-        v-model:selector="selectorLabel"
-        class="q-mr-md col-3"
-      />
+      <div class="col-sm-5 col-md-3 col-12 q-mr-md">
+        <SelectorList :list="selectorList" v-model:selector="selectorLabel" />
+      </div>
 
       <!-- stat -->
-      <AppBox bordered class="column full-width">
-        <div class="row q-pb-sm justify-between items-center">
-          <div class="text-weight-bold text-subtitle1">
-            {{ $t('personnelStatTitle') }}
-            {{ selectorLabel === '' ? '' : $t(selectorLabel) }}
-          </div>
+      <div class="col-12 col-sm bordered surface-1 rounded">
+        <div class="text-weight-bold text-subtitle1 q-pa-md">
+          {{ $t('personnelStatTitle') }}
+          {{ selectorLabel === '' ? '' : $t(selectorLabel) }}
         </div>
-        <div class="row full-width" style="overflow-x: auto">
+
+        <div class="q-px-md scroll">
           <StatCardComponent
             v-if="sortedUserStats"
             :branch="
@@ -583,10 +558,11 @@ watch(inputSearch, async () => await fetchUserList());
               }))
             "
             :dark="$q.dark.isActive"
-            class="no-wrap"
+            nowrap
+            class="q-mb-md"
           />
         </div>
-      </AppBox>
+      </div>
     </div>
 
     <!-- main -->
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index 23c2f2af..754e7d84 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -48,6 +48,7 @@ export type User = {
 };
 
 export type UserCreate = {
+  branchId: string;
   provinceId?: string | null;
   districtId?: string | null;
   subDistrictId?: string | null;