diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 79d1fc0c..108ac12c 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, watch, computed } from 'vue';
-import { storeToRefs } from 'pinia';
 import useUtilsStore, { dialog, calculateAge } from 'src/stores/utils';
+import type { QTableProps } from 'quasar';
+import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import useFlowStore from 'src/stores/flow';
 import useUserStore from 'stores/user';
@@ -32,7 +33,7 @@ import NoData from 'components/NoData.vue';
 import ProfileUpload from 'components/ProfileUpload.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 
-const { locale } = useI18n();
+const { locale, t } = useI18n();
 
 const utilsStore = useUtilsStore();
 const flowStore = useFlowStore();
@@ -77,7 +78,37 @@ const defaultFormData = {
 };
 
 const modeView = ref(true);
-const fieldSelected = ref();
+
+const fieldSelectedOption = ref<{ label: string; value: string }[]>([
+  {
+    label: 'fullname',
+    value: 'name',
+  },
+  {
+    label: 'type',
+    value: 'type',
+  },
+  {
+    label: 'telephone',
+    value: 'telephoneNo',
+  },
+  {
+    label: 'personnelCardAge',
+    value: 'birthDate',
+  },
+  {
+    label: 'formDialogInputEmail',
+    value: 'email',
+  },
+  {
+    label: 'userRole',
+    value: 'userRole',
+  },
+]);
+
+const fieldSelected = ref<
+  ('name' | 'type' | 'telephoneNo' | 'birthDate' | 'email' | 'userRole')[]
+>(['name', 'type', 'telephoneNo', 'birthDate', 'email', 'userRole']);
 const fieldDisplay = ref();
 const hideStat = ref(false);
 const userCode = ref<string>();
@@ -148,6 +179,46 @@ inputFile.accept = 'image/*';
 
 const reader = new FileReader();
 
+const columns = [
+  {
+    name: 'name',
+    align: 'left',
+    label: 'fullname',
+    field: 'firstName',
+  },
+  {
+    name: 'type',
+    align: 'left',
+    label: 'type',
+    field: 'type',
+  },
+  {
+    name: 'telephoneNo',
+    align: 'left',
+    label: 'telephone',
+    field: 'telephoneNo',
+  },
+  {
+    name: 'birthDate',
+    align: 'left',
+    label: 'personnelCardAge',
+    field: 'birthDate',
+  },
+  {
+    name: 'email',
+    align: 'left',
+    label: 'formDialogInputEmail',
+    field: 'email',
+  },
+
+  {
+    name: 'userRole',
+    align: 'left',
+    label: 'userRole',
+    field: 'userRole',
+  },
+] satisfies QTableProps['columns'];
+
 reader.addEventListener('load', () => {
   if (typeof reader.result === 'string') {
     urlProfile.value = reader.result;
@@ -659,12 +730,15 @@ watch(inputSearch, async () => await fetchUserList());
               ></q-select>
 
               <q-select
+                v-if="!modeView"
                 id="select-field"
                 for="select-field"
-                :options="[
-                  { label: 'กันว่าง 1', value: 'กันว่าง 1' },
-                  { label: 'กันว่าง 2', value: 'กันว่าง 2' },
-                ]"
+                :options="
+                  fieldSelectedOption.map((v) => ({
+                    ...v,
+                    label: $t(v.label),
+                  }))
+                "
                 :display-value="$t('displayField')"
                 v-model="fieldSelected"
                 option-label="label"
@@ -843,11 +917,321 @@ watch(inputSearch, async () => await fetchUserList());
       </div>
 
       <div class="col scroll column">
-        <div
-          v-if="userData && userData.total > 0 && !inputSearch"
-          class="q-pa-md q-col-gutter-md row"
-        >
-          <div
+        <div v-if="userData && userData.total > 0 && !inputSearch">
+          <q-table
+            flat
+            bordered
+            :grid="modeView"
+            :rows="
+              userData.result.filter((v) => {
+                if (
+                  statusFilter === 'statusACTIVE' &&
+                  v.status === 'INACTIVE'
+                ) {
+                  return false;
+                }
+
+                if (
+                  statusFilter === 'statusINACTIVE' &&
+                  v.status !== 'INACTIVE'
+                ) {
+                  return false;
+                }
+
+                return true;
+              })
+            "
+            :columns="columns"
+            card-container-class="q-col-gutter-md  full-width "
+            row-key="name"
+            :rows-per-page-options="[0]"
+            hide-pagination
+            :visible-columns="fieldSelected"
+          >
+            <template v-slot:header="props">
+              <q-tr class="surface-2" :props="props">
+                <q-th v-for="col in props.cols" :key="col.name" :props="props">
+                  {{ $t(col.label) }}
+                </q-th>
+                <q-th auto-width />
+              </q-tr>
+            </template>
+
+            <template v-slot:body="props">
+              <q-tr
+                :class="{
+                  'app-text-muted': props.row.status === 'INACTIVE',
+                  'status-active': props.row.status !== 'INACTIVE',
+                  'status-inactive': props.row.status === 'INACTIVE',
+                }"
+                :props="props"
+              >
+                <q-td v-if="fieldSelected.includes('name')">
+                  <div class="row items-center">
+                    <div
+                      style="
+                        width: 50px;
+                        display: flex;
+                        margin-bottom: var(--size-2);
+                      "
+                    >
+                      <div class="branch-card__icon">
+                        <q-avatar size="md">
+                          <q-img
+                            :src="
+                              props.row.profileImageUrl ?? '/no-profile.png'
+                            "
+                          >
+                            <template #error>
+                              <q-img src="/no-profile.png" />
+                            </template>
+                          </q-img>
+                        </q-avatar>
+                      </div>
+                    </div>
+                    <div class="col">
+                      <div class="col">
+                        {{
+                          $i18n.locale === 'en-US'
+                            ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
+                            : `${props.row.firstName} ${props.row.lastName}`.trim()
+                        }}
+
+                        <q-icon
+                          class="q-pl-xs"
+                          :class="{
+                            'symbol-gender': props.row.gender,
+                            'symbol-gender__male': props.row.gender === 'male',
+                            'symbol-gender__female':
+                              props.row.gender === 'female',
+                          }"
+                          :name="`mdi-gender-${props.row.gender === 'male' ? 'male' : 'female'}`"
+                          width="24px"
+                        />
+                      </div>
+                      <div class="col app-text-muted">
+                        {{ props.row.code || '-' }}
+                      </div>
+                    </div>
+                  </div>
+                </q-td>
+                <q-td v-if="fieldSelected.includes('type')">
+                  <span
+                    class="tags"
+                    :class="{
+                      [`tags__${
+                        {
+                          USER: 'cyan',
+                          MESSENGER: 'yellow',
+                          DELEGATE: 'red',
+                          AGENCY: 'magenta',
+                        }[props.row.userType as string] || 'pink'
+                      } }`]: true,
+                    }"
+                  >
+                    {{
+                      $t(
+                        {
+                          USER: 'USER',
+                          MESSENGER: 'MESSENGER',
+                          DELEGATE: 'DELEGATE',
+                          AGENCY: 'AGENCY',
+                        }[props.row.userType as string] || 'USER',
+                      )
+                    }}
+                  </span>
+                </q-td>
+
+                <q-td v-if="fieldSelected.includes('telephoneNo')">
+                  {{ props.row.telephoneNo || '-' }}
+                </q-td>
+
+                <q-td v-if="fieldSelected.includes('birthDate')">
+                  {{ calculateAge(props.row.birthDate) || '-' }}
+                </q-td>
+
+                <q-td v-if="fieldSelected.includes('email')">
+                  {{ props.row.email || '-' }}
+                </q-td>
+
+                <q-td v-if="fieldSelected.includes('userRole')">
+                  {{ props.row.userRole || '-' }}
+                </q-td>
+
+                <q-td>
+                  <q-btn
+                    icon="mdi-eye-outline"
+                    size="sm"
+                    dense
+                    round
+                    flat
+                    @click.stop="
+                      () => {
+                        openDialog('INFO', props.row.id);
+                      }
+                    "
+                  />
+
+                  <q-btn
+                    icon="mdi-dots-vertical"
+                    size="sm"
+                    dense
+                    round
+                    flat
+                    @click.stop
+                    :key="props.row.id"
+                  >
+                    <q-menu class="bordered">
+                      <q-list v-close-popup>
+                        <q-item
+                          :id="`view-detail-btn-${props.row.name}-view`"
+                          @click.stop="
+                            () => {
+                              openDialog('INFO', props.row.id);
+                            }
+                          "
+                          clickable
+                          dense
+                          class="row q-py-sm"
+                          style="white-space: nowrap"
+                        >
+                          <q-icon
+                            name="mdi-eye-outline"
+                            class="col-3"
+                            size="xs"
+                            style="color: hsl(var(--green-6-hsl))"
+                          />
+                          <span class="col-9 q-px-md flex items-center">
+                            {{ $t('viewDetail') }}
+                          </span>
+                        </q-item>
+
+                        <q-item
+                          :id="`view-detail-btn-${props.row.name}-edit`"
+                          clickable
+                          dense
+                          class="row q-py-sm"
+                          style="white-space: nowrap"
+                          @click="
+                            () => {
+                              openDialog('INFO', props.row.id, true);
+                            }
+                          "
+                        >
+                          <q-icon
+                            name="mdi-pencil-outline"
+                            class="col-3"
+                            size="xs"
+                            style="color: hsl(var(--cyan-6-hsl))"
+                          />
+                          <span class="col-9 q-px-md flex items-center">
+                            {{ $t('edit') }}
+                          </span>
+                        </q-item>
+                        <q-item
+                          :id="`view-detail-btn-${props.row.name}-delete`"
+                          dense
+                          :clickable="props.row.status === 'CREATED'"
+                          class="row"
+                          :class="{
+                            'surface-3': props.row.status !== 'CREATED',
+                            'app-text-muted': props.row.status !== 'CREATED',
+                          }"
+                          style="white-space: nowrap"
+                          @click="onDelete(props.row.id)"
+                        >
+                          <q-icon
+                            name="mdi-trash-can-outline"
+                            size="xs"
+                            class="col-3"
+                            :class="{
+                              'app-text-negative':
+                                props.row.status === 'CREATED',
+                            }"
+                          />
+                          <span class="col-9 q-px-md flex items-center">
+                            {{ $t('delete') }}
+                          </span>
+                        </q-item>
+
+                        <q-item dense>
+                          <q-item-section class="q-py-sm">
+                            <div class="q-pa-sm surface-2 rounded">
+                              <q-toggle
+                                :id="`view-detail-btn-${props.row.name}-status`"
+                                dense
+                                size="sm"
+                                :label="
+                                  props.row.status !== 'INACTIVE'
+                                    ? $t('switchOnLabel')
+                                    : $t('switchOffLabel')
+                                "
+                                @click="
+                                  async () => {
+                                    toggleStatus(props.row.id);
+                                  }
+                                "
+                                :model-value="props.row.status !== 'INACTIVE'"
+                              />
+                            </div>
+                          </q-item-section>
+                        </q-item>
+                      </q-list>
+                    </q-menu>
+                  </q-btn>
+                </q-td>
+              </q-tr>
+            </template>
+
+            <template v-slot:item="props">
+              <div class="col-3">
+                <PersonCard
+                  :data="{
+                    code: props.row.code,
+                    name:
+                      $i18n.locale === 'en-US'
+                        ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
+                        : `${props.row.firstName} ${props.row.lastName}`.trim(),
+                    img: props.row.profileImageUrl,
+                    male: props.row.gender === 'male',
+                    female: props.row.gender === 'female',
+                    detail: [
+                      {
+                        icon: 'mdi-phone',
+                        value: props.row.telephoneNo,
+                      },
+                      {
+                        icon: 'mdi-clock-outline',
+                        value:
+                          (props.row.birthDate &&
+                            calculateAge(props.row.birthDate)) ||
+                          '-',
+                      },
+                    ],
+                  }"
+                  :tag="[
+                    {
+                      color:
+                        {
+                          USER: 'cyan',
+                          MESSENGER: 'yellow',
+                          DELEGATE: 'red',
+                          AGENCY: 'magenta',
+                        }[props.row.userType as string] || 'pink',
+                      value: $t(props.row.userType),
+                    },
+                  ]"
+                  :disabled="props.row.status === 'INACTIVE'"
+                  @update-card="(a, b) => openDialog(a, props.row.id, b)"
+                  @delete-card="onDelete(props.row.id)"
+                  @enter-card="(a) => openDialog(a, props.row.id)"
+                  @toggle-status="toggleStatus(props.row.id)"
+                />
+              </div>
+            </template>
+          </q-table>
+
+          <!-- <div
             v-for="v in userData?.result.filter((v) => {
               if (statusFilter === 'statusACTIVE' && v.status === 'INACTIVE') {
                 return false;
@@ -906,7 +1290,7 @@ watch(inputSearch, async () => await fetchUserList());
               @enter-card="(a) => openDialog(a, v.id)"
               @toggle-status="toggleStatus(v.id)"
             />
-          </div>
+          </div> -->
         </div>
 
         <div
@@ -1189,7 +1573,7 @@ watch(inputSearch, async () => await fetchUserList());
     </template>
   </FormDialog>
 </template>
-<style>
+<style scoped>
 .upload-img-preview {
   border: 1px solid var(--border-color);
   border-radius: var(--radius-2);
@@ -1242,4 +1626,85 @@ watch(inputSearch, async () => await fetchUserList());
   transform: translateY(-20px);
   opacity: 0;
 }
+
+.status-active {
+  --_branch-status-color: var(--green-6-hsl);
+}
+
+.status-inactive {
+  --_branch-status-color: var(--red-4-hsl);
+  --_branch-badge-bg: var(--red-4-hsl);
+  filter: grayscale(0.5);
+  opacity: 0.5;
+}
+
+.branch-card__icon {
+  background-color: hsla(var(--_branch-card-bg) / 0.15);
+  border-radius: 50%;
+  padding: var(--size-1);
+  position: relative;
+  transform: rotate(45deg);
+
+  &::after {
+    content: ' ';
+    display: block;
+    block-size: 0.5rem;
+    aspect-ratio: 1;
+    position: absolute;
+    border-radius: 50%;
+    right: -0.1rem;
+    top: calc(50% - 0.25rem);
+    bottom: calc(50% - 0.25rem);
+    background-color: hsla(var(--_branch-status-color) / 1);
+  }
+
+  & :deep(.q-avatar) {
+    transform: rotate(-45deg);
+    color: hsla(var(--_branch-card-bg) / 1);
+  }
+}
+
+.tags {
+  display: inline-block;
+  color: hsla(var(--_color) / 1);
+  background: hsla(var(--_color) / 0.15);
+  border-radius: var(--radius-2);
+  padding-inline: var(--size-2);
+}
+
+.tags__cyan {
+  --_color: var(--cyan-7-hsl);
+}
+
+.tags__yellow {
+  --_color: var(--orange-4-hsl);
+}
+
+.tags__red {
+  --_color: var(--red-6-hsl);
+}
+
+.tags__magenta {
+  --_color: var(--pink-8-hsl);
+}
+
+.tags__pink {
+  --_color: var(--pink-6-hsl);
+}
+
+.dark .tags__magenta {
+  --_color: var(--pink-7-hsl);
+}
+
+& .symbol-gender {
+  color: hsla(var(--_fg));
+
+  &.symbol-gender__male {
+    --_fg: var(--gender-male);
+  }
+
+  &.symbol-gender__female {
+    --_fg: var(--gender-female);
+  }
+}
 </style>