diff --git a/public/personnel-table-dark.png b/public/personnel-table-dark.png
new file mode 100644
index 00000000..414b6422
Binary files /dev/null and b/public/personnel-table-dark.png differ
diff --git a/public/personnel-table-light.png b/public/personnel-table-light.png
new file mode 100644
index 00000000..20d062a5
Binary files /dev/null and b/public/personnel-table-light.png differ
diff --git a/src/components/SelectorList.vue b/src/components/SelectorList.vue
index c9159da4..8752cf36 100644
--- a/src/components/SelectorList.vue
+++ b/src/components/SelectorList.vue
@@ -11,7 +11,7 @@ defineProps<{
 }>();
 </script>
 <template>
-  <AppBox bordered class="col-4 q-mr-md">
+  <AppBox bordered>
     <q-list>
       <q-item
         v-for="v in list"
@@ -36,8 +36,8 @@ defineProps<{
 
 <style scoped>
 .active {
-  color: hsl(var(--main-fg)) !important;
-  background-color: hsl(var(--main-bg));
+  color: hsl(var(--info-fg)) !important;
+  background-color: hsl(var(--info-bg));
   border-radius: var(--radius-3);
 
   .dot {
@@ -47,7 +47,7 @@ defineProps<{
 
   &.dark {
     background-color: transparent;
-    border: 1px solid hsl(var(--main-bg));
+    border: 1px solid hsl(var(--info-bg));
   }
 }
 
diff --git a/src/i18n/en-US/branch-main-page.ts b/src/i18n/en-US/branch-main-page.ts
index f5c398d4..1dcb5dde 100644
--- a/src/i18n/en-US/branch-main-page.ts
+++ b/src/i18n/en-US/branch-main-page.ts
@@ -1,5 +1,5 @@
 export default {
   branchManagement: 'Branch Management',
-  branchNoMainOfficeYet: 'No main office yet',
+  branchNoMainOfficeYet: 'No main office yet?',
   branchClickToCreateMainOffice: 'Click + to create a main office',
 };
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index d7557e35..6146f2c9 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -1,8 +1,9 @@
 // This is just an example,
 // so you can safely delete all default props below
+import main from './main';
 import drawerComponent from './drawer-component';
 import branchMainPage from './branch-main-page';
-import main from './main';
+import personnelMainPage from './personnel-main-page';
 
 export default {
   ok: 'Confirm',
@@ -14,7 +15,8 @@ export default {
   save: 'Save',
   edit: 'Edit',
   delete: 'Delete',
+  ...main,
   ...drawerComponent,
   ...branchMainPage,
-  ...main,
+  ...personnelMainPage
 };
diff --git a/src/i18n/en-US/personnel-main-page.ts b/src/i18n/en-US/personnel-main-page.ts
new file mode 100644
index 00000000..82c76a9a
--- /dev/null
+++ b/src/i18n/en-US/personnel-main-page.ts
@@ -0,0 +1,5 @@
+export default {
+  personnelManagement: 'Personnel Management',
+  personnelTooltipTitle: 'No personnel yet?',
+  personnelTooltipCaption: 'Click + to add a personnel',
+};
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index 1fa7bc0e..11ba0bc4 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -1,6 +1,7 @@
+import main from './main';
 import drawerComponent from './drawer-component';
 import branchMainPage from './branch-main-page';
-import main from './main';
+import personnelMainPage from './personnel-main-page';
 
 export default {
   ok: 'ยืนยัน',
@@ -12,7 +13,8 @@ export default {
   save: 'บันทึก',
   edit: 'แก้ไขข้อมูล',
   delete: 'ลบข้อมูล',
+  ...main,
   ...drawerComponent,
   ...branchMainPage,
-  ...main,
+  ...personnelMainPage
 };
diff --git a/src/i18n/th-th/personnel-main-page.ts b/src/i18n/th-th/personnel-main-page.ts
new file mode 100644
index 00000000..bb4a4a9a
--- /dev/null
+++ b/src/i18n/th-th/personnel-main-page.ts
@@ -0,0 +1,5 @@
+export default {
+  personnelManagement: 'จัดการบุคลากร',
+  personnelTooltipTitle: 'ยังไม่มีข้อมูลบุคลากร',
+  personnelTooltipCaption: 'คลิก + เพื่อเพิ่มบุคลากร',
+};
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index b67febb1..0f5513ab 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -5,8 +5,8 @@ import PersonCard from 'src/components/home/PersonCard.vue';
 import AppBox from 'components/app/AppBox.vue';
 import StatCardComponet from 'components/StatCardComponet.vue';
 import SelectorList from 'src/components/SelectorList.vue';
-// import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
-// import TooltipComponet from 'src/components/TooltipComponet.vue';
+import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
+import TooltipComponet from 'src/components/TooltipComponet.vue';
 
 const selectorLabel = ref('');
 
@@ -77,25 +77,24 @@ const branchStat = ref<
   }[]
 >([
   {
-    amount: '1',
-    label: 'สำนักงานใหญ่ 1',
-  },
-
-  {
-    amount: '2',
-    label: 'สำนักงานใหญ่ 2',
+    amount: '0',
+    label: '-',
   },
   {
-    amount: '3',
-    label: 'สำนักงานใหญ่ 3',
+    amount: '0',
+    label: '-',
   },
   {
-    amount: '4',
-    label: 'สำนักงานใหญ่ 4',
+    amount: '0',
+    label: '-',
   },
   {
-    amount: '5',
-    label: 'สำนักงานใหญ่ 5',
+    amount: '0',
+    label: '-',
+  },
+  {
+    amount: '0',
+    label: '-',
   },
 ]);
 
@@ -121,24 +120,54 @@ const selectorList = [
 
 <template>
   <div class="column q-pb-lg">
-    <div class="text-h6 text-weight-bold q-mb-md">จัดการบุคลากร</div>
+    <div class="text-h6 text-weight-bold q-mb-md">
+      {{ $t('personnelManagement') }}
+    </div>
 
     <div class="row full-width q-mb-md no-wrap">
       <!-- selector -->
-      <SelectorList :list="selectorList" v-model:selector="selectorLabel" />
+      <SelectorList
+        :list="selectorList"
+        v-model:selector="selectorLabel"
+        class="q-mr-md col-4"
+      />
 
       <!-- stat -->
-      <AppBox bordered class="row col-glow" style="overflow-x: auto">
+      <AppBox bordered class="column full-width" style="overflow-x: auto">
         <span class="text-weight-bold text-subtitle1">
           สรุปจำนวนข้อมูล{{ selectorLabel }}
         </span>
-        <stat-card-componet :branch="branchStat" class="no-wrap" />
+        <div class="row q-pt-lg">
+          <stat-card-componet :branch="branchStat" class="no-wrap" />
+        </div>
       </AppBox>
     </div>
 
     <!-- main -->
     <AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
-      <PersonCard :list="person" class="q-mb-md" />
+      <!-- <PersonCard :list="person" class="q-mb-md" /> -->
+      <div class="column" style="height: 100%">
+        <div class="col-1 self-end">
+          <div class="row">
+            <tooltip-componet
+              title="personnelTooltipTitle"
+              caption="personnelTooltipCaption"
+              imgSrc="personnel-table-"
+            />
+          </div>
+        </div>
+
+        <div class="col self-center" style="display: flex; align-items: center">
+          <btn-add-componet
+            :label="'เพิ่มข้อมูลบุคลากร'"
+            @trigger="
+              () => {
+                console.log('test');
+              }
+            "
+          />
+        </div>
+      </div>
     </AppBox>
   </div>
 </template>