diff --git a/src/components/app/AppBox.vue b/src/components/app/AppBox.vue
index df423954..e9249bf0 100644
--- a/src/components/app/AppBox.vue
+++ b/src/components/app/AppBox.vue
@@ -1,9 +1,16 @@
 <script lang="ts" setup>
-defineProps<{ dark?: boolean; bordered?: boolean }>();
+defineProps<{ dark?: boolean; bordered?: boolean; shadowed?: boolean }>();
 </script>
 
 <template>
-  <div class="app-box" :class="{ dark, 'app-box__bordered': bordered }">
+  <div
+    class="app-box"
+    :class="{
+      dark,
+      'app-box__bordered': bordered,
+      'app-box__shadowed': shadowed,
+    }"
+  >
     <slot />
   </div>
 </template>
@@ -14,6 +21,9 @@ defineProps<{ dark?: boolean; bordered?: boolean }>();
   background-color: var(--surface-1);
   border-radius: var(--radius-3);
   padding: var(--size-4);
+}
+
+.app-box__shadowed {
   box-shadow: var(--shadow-1);
 }
 
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index 42f25852..c85dd489 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -14,6 +14,7 @@ defineProps<{
     disabled?: boolean;
     img?: string;
   }[];
+  detailColumnCount?: number;
 }>();
 
 const status = ref(false);
@@ -131,7 +132,7 @@ const status = ref(false);
       <!-- detail -->
       <q-separator />
       <div
-        class="q-pt-sm q-pb-md q-px-lg q-gutter-x-xl person-detail rounded-b"
+        class="q-pt-sm q-px-sm q-pb-md person-detail rounded-b full-width"
         :class="{
           'bg-gender': v.male || v.female,
           'bg-gender__light':
@@ -140,6 +141,11 @@ const status = ref(false);
           'bg-gender__female': !v.disabled && v.female,
           'bg-gender__disable': v.disabled,
         }"
+        :style="
+          (detailColumnCount &&
+            `grid-template-columns: repeat(${detailColumnCount}, 1fr);`) ||
+          ''
+        "
       >
         <div v-for="(d, j) in v.detail" :key="j">
           <span
@@ -219,6 +225,7 @@ const status = ref(false);
     flex-grow: 1;
     grid-template-columns: repeat(2, 1fr);
     gap: var(--size-2);
+    overflow-x: scroll;
 
     & > * {
       display: flex;
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 2eda42cb..19a1ee9e 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted } from 'vue';
+import useUserStore from 'stores/user';
+import { storeToRefs } from 'pinia';
 
 import PersonCard from 'src/components/home/PersonCard.vue';
 import AppBox from 'components/app/AppBox.vue';
@@ -8,115 +10,25 @@ import SelectorList from 'src/components/SelectorList.vue';
 import BtnAddComponet from 'components/01_branch-management/BtnAddComponet.vue';
 import TooltipComponet from 'src/components/TooltipComponet.vue';
 
-const selectorLabel = ref('');
+const userStore = useUserStore();
+const { data: userData } = storeToRefs(userStore);
 
-const person = [
-  {
-    name: 'นายสันติ เมติกาญจ์',
-    badge: 'CORP000001-01-240002',
-    detail: [
-      { label: 'สัญชาติ', value: 'ไทย' },
-      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
-      { label: 'โทรศัพท์', value: '0621249602' },
-      { label: 'ตำแหน่ง', value: '32 ปี' },
-    ],
-    male: true,
-    img: 'profile.png',
-  },
-  {
-    name: 'นางสาวสุขใจ แสนดี',
-    badge: 'CORP000001-01-240001',
-    detail: [
-      { label: 'สัญชาติ', value: 'ไทย' },
-      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
-      { label: 'โทรศัพท์', value: '0621249602' },
-      { label: 'ตำแหน่ง', value: '32 ปี' },
-    ],
-    female: true,
-  },
-  {
-    name: 'นายสันติ เมติกาญจ์',
-    badge: 'CORP000001-01-240002',
-    detail: [
-      { label: 'สัญชาติ', value: 'ไทย' },
-      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
-      { label: 'โทรศัพท์', value: '0621249602' },
-      { label: 'ตำแหน่ง', value: '32 ปี' },
-    ],
-    male: true,
-    disabled: true,
-    img: 'profile.png',
-  },
-  {
-    name: 'นางสาวสุขใจ แสนดี',
-    badge: 'CORP000001-01-240001',
-    detail: [
-      { label: 'สัญชาติ', value: 'ไทย' },
-      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
-      { label: 'โทรศัพท์', value: '0621249602' },
-      { label: 'ตำแหน่ง', value: '32 ปี' },
-    ],
-    female: true,
-    disabled: true,
-  },
-  {
-    name: 'นางสาวสุขใจ แสนดี',
-    badge: 'CORP000001-01-240001',
-    detail: [
-      { label: 'สัญชาติ', value: 'ไทย' },
-      { label: 'ตำแหน่ง', value: 'นักบริหาร' },
-      { label: 'โทรศัพท์', value: '0621249602' },
-      { label: 'ตำแหน่ง', value: '32 ปี' },
-    ],
-    female: true,
-  },
-] satisfies InstanceType<typeof PersonCard>['$props']['list'];
+onMounted(async () => {
+  await userStore.fetchList();
+});
 
-const branchStat = ref<
-  {
-    amount: string;
-    label: string;
-  }[]
->([
-  {
-    amount: '0',
-    label: '-',
-  },
-  {
-    amount: '0',
-    label: '-',
-  },
-  {
-    amount: '0',
-    label: '-',
-  },
-  {
-    amount: '0',
-    label: '-',
-  },
-  {
-    amount: '0',
-    label: '-',
-  },
+const branchStat = ref([
+  { label: 'Branch A', amount: 1 },
+  { label: 'Branch B', amount: 5 },
+  { label: 'Branch C', amount: 3 },
 ]);
 
+const selectorLabel = ref('');
 const selectorList = [
-  {
-    label: 'personnelSelector1',
-    count: 0,
-  },
-  {
-    label: 'personnelSelector2',
-    count: 0,
-  },
-  {
-    label: 'personnelSelector3',
-    count: 0,
-  },
-  {
-    label: 'personnelSelector4',
-    count: 0,
-  },
+  { label: 'personnelSelector1', count: 0 },
+  { label: 'personnelSelector2', count: 0 },
+  { label: 'personnelSelector3', count: 0 },
+  { label: 'personnelSelector4', count: 0 },
 ] satisfies InstanceType<typeof SelectorList>['$props']['list'];
 </script>
 
@@ -147,8 +59,27 @@ const selectorList = [
 
     <!-- main -->
     <AppBox bordered style="width: 100%; height: 580px; overflow-y: auto">
-      <!-- <PersonCard :list="person" class="q-mb-md" /> -->
-      <div class="column" style="height: 100%">
+      <PersonCard
+        :list="
+          userData?.result.map((v) => ({
+            img: `${v.profileImageUrl}`,
+            name: `${v.firstName} ${v.lastName}`,
+            male: v.gender === 'male',
+            female: v.gender === 'female',
+            detail: [
+              { label: 'Email', value: v.email },
+              { label: 'Telephone No', value: v.telephoneNo },
+            ],
+            badge: v.code.slice(0, 10),
+            disabled: v.status === 'INACTIVE',
+          })) || []
+        "
+      />
+      <div
+        class="column"
+        style="height: 100%"
+        v-if="userData && userData.total === 0"
+      >
         <div class="col-1 self-end">
           <div class="row">
             <tooltip-componet
diff --git a/src/stores/types.ts b/src/stores/types.ts
index 42223bb1..c2eb7e9e 100644
--- a/src/stores/types.ts
+++ b/src/stores/types.ts
@@ -5,7 +5,4 @@ export type Pagination<T> = {
   total: number;
 };
 
-export enum Status {
-  CREATED,
-  USED,
-}
+export type Status = 'CREATED' | 'ACTIVE' | 'INACTIVE';
diff --git a/src/stores/user/types.ts b/src/stores/user/types.ts
index 58ff7c5b..cdb508a8 100644
--- a/src/stores/user/types.ts
+++ b/src/stores/user/types.ts
@@ -17,6 +17,7 @@ export type User = {
   licenseIssueDate: string | null;
   licenseNo: string | null;
   discountCondition: string | null;
+  gender: string;
   userRole: string;
   userType: string;
   retireDate: string | null;
@@ -34,7 +35,7 @@ export type User = {
   lastName: string;
   firstNameEN: string;
   firstName: string;
-  code: string | null;
+  code: string;
   keycloakId: string;
   id: string;
   profileImageUrl: string;
@@ -47,6 +48,7 @@ export type UserCreate = {
   telephoneNo: string;
   email: string;
   zipCode: string;
+  gender: string;
   addressEN: string;
   address: string;
   trainingPlace?: string;