diff --git a/src/assets/registry-banner.png b/src/assets/registry-banner.png
new file mode 100644
index 000000000..c2145632d
Binary files /dev/null and b/src/assets/registry-banner.png differ
diff --git a/src/modules/04_registryNew/components/registry/CardView.vue b/src/modules/04_registryNew/components/registry/CardView.vue
deleted file mode 100644
index fbacbb786..000000000
--- a/src/modules/04_registryNew/components/registry/CardView.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<script setup lang="ts">
-import type { QTableColumn } from "quasar";
-
-const rows = [
-  {
-    no: 1,
-    citizenId: "1231231231234",
-    fullName: "นางสาวกัณฐิมา กานสิน",
-    posNo: "สกก.1",
-    position: "นักบริหาร",
-    posPath: "บริหาร",
-    posType: "บริหาร",
-    posLevel: "ชำนาญการพิเศษ",
-    posOc: "ฝ่ายบริหารงานทั่วไป",
-    year: 2566,
-    salary: "40,000",
-  },
-  {
-    no: 2,
-    citizenId: "5555555555555",
-    fullName: "นายธามไทย คนคูเมือง",
-    posNo: "สกก.5",
-    position: "นักจัดการงานทั่วไป",
-    posPath: "จัดการงานทั่วไป",
-    posType: "วิชาการ",
-    posLevel: "ปฏิบัติการ",
-    posOc: "ฝ่ายบริหารงานทั่วไป",
-    year: 2566,
-    salary: "25,000",
-  },
-  {
-    no: 3,
-    citizenId: "0000000000000",
-    fullName: "นายชัชชาติ สิทธิพงศ์",
-    posNo: "สกก.5",
-    position: "นักจัดการงานทั่วไป",
-    posPath: "จัดการงานทั่วไป",
-    posType: "วิชาการ",
-    posLevel: "ปฏิบัติการ",
-    posOc: "ฝ่ายบริหารงานทั่วไป",
-    year: 2566,
-    salary: "25,000",
-  },
-] satisfies Record<string, any>[];
-</script>
-
-<template>
-  <div class="flex">
-    <q-card
-      v-for="row in rows"
-      :key="row.fullName"
-      style="max-width: 300px"
-      class="q-mr-md"
-    >
-      <div class="flex justify-center q-py-md q-px-md">
-        <q-item-section avatar class="q-pa-none">
-          <img
-            src="@/assets/avatar_user.jpg"
-            class="col-4 img-info q-mt-md"
-            style="width: 120px; height: 120px; border-radius: 50%"
-          />
-          <div class="text-weight-medium q-mt-md">{{ row.fullName }}</div>
-          <div class="text-weight-light full-width text-center">
-            {{ row.citizenId }}
-          </div>
-        </q-item-section>
-        <div class="bg-grey-3 q-my-md q-py-md" style="height: 20%; width: 100%">
-          <div class="row q-pl-md">
-            <div class="col">
-              <div class="text-weight-light">ตำแหน่งเลขที่</div>
-              <div class="text-weight-medium">{{ row.posNo }}</div>
-            </div>
-            <div class="col">
-              <div class="text-weight-light">ตำแหน่ง</div>
-              <div class="text-weight-medium">{{ row.position }}</div>
-            </div>
-          </div>
-          <div class="row q-pl-md q-pt-md">
-            <div class="col">
-              <div class="text-weight-light">ประเภท</div>
-              <div class="text-weight-medium">{{ row.posType }}</div>
-            </div>
-            <div class="col">
-              <div class="text-weight-light">ระดับชั้นงาน</div>
-              <div class="text-weight-medium">{{ row.posLevel }}</div>
-            </div>
-          </div>
-        </div>
-        <div>
-          <q-separator class="q-mb-sm" color="black" />
-          <span style="font-size: 16px; font-weight: bold">ดูเพิ่มเติม</span>
-        </div>
-      </div>
-    </q-card>
-  </div>
-</template>
diff --git a/src/modules/04_registryNew/components/registry/Search.vue b/src/modules/04_registryNew/components/registry/Search.vue
index 2b8d5b540..7f4c56ff6 100644
--- a/src/modules/04_registryNew/components/registry/Search.vue
+++ b/src/modules/04_registryNew/components/registry/Search.vue
@@ -1,23 +1,94 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive } from "vue";
+import SearchBanner from "@/assets/registry-banner.png";
+import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
+import type { FormData } from "@/modules/04_registryNew/interface/index/form";
 
 const search = ref<string>("");
 const dropdownInput = ref<boolean>(false);
-const name = ref<string>("");
-const citizenId = ref<number>();
-const retireYear = ref<number>();
+const retireYear = ref<number | null>(null);
 const year = ref<number>();
-const level = ref<number>();
+const searchType = ref<string>("fullName");
+const posLevel = ref<string>("");
+const posExecutive = ref<string>("");
+const posType = ref<string>("");
+const type = ref<string>("");
 const posNo = ref<string>("");
 const posOc = ref<string>("");
 
+const formData = reactive<FormData>({
+  citizenId: "",
+  fullName: "",
+  posLevel: "",
+  posOc: "",
+  posPath: "",
+  retireYear: null,
+  type: "",
+  year: null,
+  isShowRetire: false,
+  isProbation: false,
+});
+
+const employeeClassOps = ref<DataOption[]>([
+  { id: "officer", name: "ข้าราชการ กทม.สามัญ" },
+  { id: "perm", name: "ลูกจ้างประจำ" },
+  { id: "temp", name: "ลูกจ้างชั่วคราว" },
+]);
+
+const posLevelMock = ref<DataOption[]>([
+  { id: "officer", name: "1" },
+  { id: "perm", name: "2" },
+  { id: "temp", name: "3" },
+]);
+
+const searchTypeOption = ref<DataOption[]>([
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+  { id: "posNo", name: "ตำแหน่งเลขที่" },
+  { id: "position", name: "ตำแหน่งสายงาน" },
+]);
+
+const TypeOption = ref<DataOption[]>([
+  { id: "1", name: "ข้าราชการ กทม.สามัญ" },
+  { id: "2", name: "ลูกจ้างประจำ" },
+  { id: "3", name: "ลููกจ้างชั่วคราว" },
+]);
+
+const posTypeOption = ref<DataOption[]>([
+  { id: "1", name: "ทั่วไป" },
+  { id: "2", name: "วิชาการ" },
+  { id: "3", name: "อำนวยการ" },
+  { id: "4", name: "บริหาร" },
+]);
+
+const posLevelOption = ref<DataOption[]>([
+  { id: "1", name: "ชำนาญงาน" },
+  { id: "2", name: "ปฏิบัติงาน" },
+  { id: "3", name: "อาวุโส" },
+  { id: "4", name: "ทักษะพิเศษ" },
+]);
+
+const posExecutiveOption = ref<DataOption[]>([
+  { id: "1", name: "นักบริหาร" },
+  { id: "2", name: "ผู้ช่วยหัวหน้าสำนักงาน" },
+  { id: "3", name: "ผู้ช่วยหัวหน้าสำนักงานก.ก." },
+  { id: "4", name: "นักการช่าง" },
+]);
+
 const isActive1 = ref<boolean>(false);
 const isActive2 = ref<boolean>(false);
+
+function onSubmit() {
+  dropdownInput.value = false;
+}
 </script>
 <template>
   <div
-    class="column full-width justify-center items-center inline-block bg-primary q-py-xl q-px-xl"
+    class="column full-width justify-center items-center inline-block q-py-xl q-px-xl banner"
     style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem"
+    :style="{
+      background: `url('${SearchBanner}') center center no-repeat`,
+    }"
   >
     <span
       style="
@@ -31,6 +102,160 @@ const isActive2 = ref<boolean>(false);
       ค้นหาข้อมูลทะเบียนประวัติ
     </span>
 
+    <div class="row q-col-gutter-md">
+      <div class="col-2">
+        <q-select
+          outlined
+          bg-color="white"
+          v-model="searchType"
+          :options="searchTypeOption"
+          emit-value
+          dense
+          emit-option
+          option-label="name"
+          option-value="id"
+          map-options
+          style="border-radius: 0.4rem; background-color: whitesmoke"
+        />
+      </div>
+      <div class="col-9">
+        <q-input
+          outlined
+          dense
+          bg-color="white"
+          v-model="search"
+          clearable
+          placeholder="ค้นหา"
+        >
+          <!-- <template v-slot:append>
+            <q-btn
+              outlined
+              color="blue"
+              icon="filter_list"
+              dense
+              size="12px"
+              @click="() => (dropdownInput = !dropdownInput)"
+            />
+          </template> -->
+        </q-input>
+      </div>
+      <div class="col-1">
+        <q-btn color="blue" unelevated label="ค้นหา" @click="onSubmit" />
+      </div>
+      <div class="col">
+        <q-select
+          rounded
+          dense
+          outlined
+          emit-value
+          clearable
+          emit-option
+          class="custom-select"
+          label-color="white"
+          option-label="name"
+          option-value="id"
+          map-options
+          v-model="type"
+          :options="TypeOption"
+          label="ประเภทตำแหน่ง"
+        />
+        />
+      </div>
+      <div class="col">
+        <q-select
+          rounded
+          dense
+          outlined
+          emit-value
+          clearable
+          emit-option
+          class="custom-select"
+          label-color="white"
+          option-label="name"
+          option-value="id"
+          map-options
+          v-model="posType"
+          :options="posTypeOption"
+          label="ประเภทตำแหน่ง"
+        />
+      </div>
+      <div class="col">
+        <q-select
+          rounded
+          dense
+          emit-value
+          emit-option
+          label-color="white"
+          option-label="name"
+          option-value="id"
+          map-options
+          outlined
+          class="custom-select"
+          clearable
+          v-model="posLevel"
+          :options="posLevelOption"
+          label="ระดับตำแหน่ง"
+        />
+      </div>
+      <div class="col">
+        <q-select
+          rounded
+          outlined
+          label-color="white"
+          emit-value
+          dense
+          emit-option
+          class="custom-select"
+          clearable
+          option-label="name"
+          option-value="id"
+          map-options
+          v-model="posExecutive"
+          :options="posExecutiveOption"
+          label="ตำแหน่งทางการบริหาร"
+        />
+      </div>
+      <div class="col">
+        <datepicker
+          class="col-2"
+          menu-class-name="modalfix"
+          v-model="retireYear"
+          :locale="'th'"
+          autoApply
+          year-picker
+          :enableTimePicker="false"
+          clearable
+        >
+          <template #year="{ year }">{{ year + 543 }}</template>
+          <template #year-overlay-value="{ value }">{{
+            parseInt(value + 543)
+          }}</template>
+          <template #trigger>
+            <q-input
+              class="inputgreen cursor-pointer custom-select"
+              hide-bottom-space
+              rounded
+              label-color="white"
+              outlined
+              dense
+              lazy-rules
+              borderless
+              :model-value="retireYear === null ? null : retireYear + 543"
+              :label="`${'ปีเกษียณ'}`"
+            >
+              <template v-slot:append>
+                <q-icon
+                  v-if="retireYear !== null"
+                  name="close"
+                  @click="retireYear = null"
+                  class="cursor-pointer"
+                />
+              </template>
+            </q-input>
+          </template>
+        </datepicker>
+      </div>
+    </div>
     <div class="flex q-mt-lg" style="border-radius: 20px; flex-wrap: nowrap">
       <div
         class="flex full-width items-center bg-white"
@@ -38,7 +263,7 @@ const isActive2 = ref<boolean>(false);
       >
         <div
           v-if="dropdownInput"
-          class="full-width bg-white q-pa-md"
+          class="full-width bg-white q-px-md q-pt-sm q-pb-md"
           style="
             top: 85%;
             position: absolute;
@@ -57,42 +282,88 @@ const isActive2 = ref<boolean>(false);
           >
             <div class="row q-gutter-md q-mb-md">
               <div class="col">
-                <q-input
+                <q-select
                   outlined
                   dense
-                  v-model="name"
-                  label="ข้าราชการ กทม.สามัญ"
+                  v-model="formData.type"
+                  label="ประเภท"
                   class="bg-white"
+                  clearable
+                  :options="employeeClassOps"
+                  emit-value
+                  emit-option
+                  option-label="name"
+                  option-value="id"
+                  map-options
                 />
               </div>
               <div class="col">
                 <q-input
                   outlined
                   dense
-                  v-model="citizenId"
+                  v-model="formData.citizenId"
                   label="เลขประจำตัวประชาชน"
                   class="bg-white"
+                  clearable
+                  lazy-rules
+                  hide-bottom-space
+                  maxlength="13"
+                  mask="#############"
                 />
               </div>
               <div class="col">
                 <q-input
                   outlined
                   dense
-                  v-model="citizenId"
-                  label="เลขประจำตัวประชาชน"
+                  clearable
+                  v-model="formData.fullName"
+                  label="ชื่อ - นามสกุล"
                   class="bg-white"
                 />
               </div>
             </div>
             <div class="row q-gutter-md">
               <div class="col-2">
-                <q-input
-                  outlined
-                  dense
-                  v-model="retireYear"
-                  label="ปีเกษียณ"
-                  class="bg-white"
-                />
+                <datepicker
+                  class="col-2 bg-white"
+                  menu-class-name="modalfix"
+                  v-model="formData.retireYear"
+                  :locale="'th'"
+                  autoApply
+                  year-picker
+                  :enableTimePicker="false"
+                  clearable
+                >
+                  <template #year="{ year }">{{ year + 543 }}</template>
+                  <template #year-overlay-value="{ value }">{{
+                    parseInt(value + 543)
+                  }}</template>
+                  <template #trigger>
+                    <q-input
+                      class="inputgreen cursor-pointer"
+                      hide-bottom-space
+                      outlined
+                      dense
+                      lazy-rules
+                      borderless
+                      :model-value="
+                        formData.retireYear === null
+                          ? null
+                          : formData.retireYear + 543
+                      "
+                      :label="`${'ปีเกษียณ'}`"
+                    >
+                      <template v-slot:append>
+                        <q-icon
+                          v-if="formData.retireYear !== null"
+                          name="close"
+                          @click="formData.retireYear = null"
+                          class="cursor-pointer"
+                        />
+                      </template>
+                    </q-input>
+                  </template>
+                </datepicker>
               </div>
               <div class="col-2">
                 <q-input
@@ -101,15 +372,24 @@ const isActive2 = ref<boolean>(false);
                   v-model="year"
                   label="อายุราชการ (ปี)"
                   class="bg-white"
+                  clearable
+                  mask="###"
                 />
               </div>
               <div class="col-2">
-                <q-input
+                <q-select
                   outlined
                   dense
-                  v-model="level"
-                  label="ระดับ"
+                  v-model="formData.posLevel"
+                  label="ประเภท"
                   class="bg-white"
+                  :options="posLevelMock"
+                  emit-value
+                  emit-option
+                  clearable
+                  option-label="name"
+                  option-value="id"
+                  map-options
                 />
               </div>
               <div class="col-2">
@@ -119,11 +399,13 @@ const isActive2 = ref<boolean>(false);
                   v-model="posNo"
                   label="ตำแหน่งเลขที่"
                   class="bg-white"
+                  clearable
                 />
               </div>
               <div class="col">
                 <q-input
                   outlined
+                  clearable
                   dense
                   v-model="posOc"
                   label="ตำแหน่งทางการบริหาร"
@@ -134,125 +416,35 @@ const isActive2 = ref<boolean>(false);
           </div>
           <div
             class="flex q-mt-xs"
-            style="align-content: flex-end; flex-direction: row-reverse"
+            style="
+              align-content: flex-end;
+              flex-direction: row-reverse;
+              gap: 0.5rem;
+            "
           >
-            <div class="q-pa-sm bg-white weight-medium">
-              <div class="row no-wrap items-center q-my-sm">
-                <label class="toggle-control">
-                  <input type="checkbox" dense v-model="isActive1" @change="" />
-                  <span class="control"></span>
-                </label>
-                <p class="q-ma-none">แสดงข้อมูลผู้พ้นจากราชการ</p>
-              </div>
-            </div>
-            <div class="q-pa-sm bg-white weight-medium">
-              <div class="row no-wrap items-center q-my-sm q-mr-lg">
-                <label class="toggle-control">
-                  <input type="checkbox" dense v-model="isActive2" @change="" />
-                  <span class="control"></span>
-                </label>
-                <p class="q-ma-none">แสดงข้อมูลผู้พ้นจากราชการ</p>
-              </div>
-            </div>
+            <q-toggle
+              v-model="formData.isShowRetire"
+              color="primary"
+              label="แสดงข้อมูลผู้พ้นจากราชการ"
+            />
+            <q-toggle
+              v-model="formData.isProbation"
+              color="primary"
+              label="ทดลองปฏิบัติหน้าที่ราชการ"
+            />
           </div>
         </div>
-        <q-icon
-          class="q-mx-md"
-          round
-          flat
-          color="grey"
-          name="search"
-          size="20px"
-          dense
-        />
-        <q-input
-          placeholder="ค้นหา"
-          v-model="search"
-          dense
-          style="flex-grow: 1"
-          borderless
-        />
-        <q-btn
-          class="q-mr-md"
-          outline
-          color="blue"
-          icon="filter_list"
-          dense
-          size="12px"
-          @click="() => (dropdownInput = !dropdownInput)"
-        />
       </div>
-      <q-btn class="q-ml-lg q-px-lg" color="blue" unelevated label="ค้นหา" />
     </div>
   </div>
 </template>
 
-<style scoped lang="scss">
-.border_custom {
-  border-radius: 6px !important;
-  border: 1px solid #e1e1e1;
+<style lang="scss" scoped>
+:deep(.custom-select.q-field--outlined .q-field__control::before) {
+  border: 2px solid #ffffff !important;
 }
-$toggle-background-color-on: #06884d;
-$toggle-background-color-off: darkgray;
-$toggle-control-color: white;
-$toggle-width: 40px;
-$toggle-height: 25px;
-$toggle-gutter: 3px;
-$toggle-radius: 50%;
-$toggle-control-speed: 0.15s;
-$toggle-control-ease: ease-in;
 
-// These are our computed variables
-// change at your own risk.
-$toggle-radius: $toggle-height / 2;
-$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
-
-.toggle-control {
-  display: block;
-  position: relative;
-  padding-left: $toggle-width;
-  margin-bottom: 12px;
-  cursor: pointer;
-  font-size: 22px;
-  user-select: none;
-
-  input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-  }
-
-  input:checked ~ .control {
-    background-color: $toggle-background-color-on;
-
-    &:after {
-      left: $toggle-width - $toggle-control-size - $toggle-gutter;
-    }
-  }
-
-  .control {
-    position: absolute;
-    top: -7px;
-    left: -15px;
-    height: $toggle-height;
-    width: $toggle-width;
-    border-radius: $toggle-radius;
-    background-color: $toggle-background-color-off;
-    transition: background-color $toggle-control-speed $toggle-control-ease;
-
-    &:after {
-      content: "";
-      position: absolute;
-      left: $toggle-gutter;
-      top: $toggle-gutter;
-      width: $toggle-control-size;
-      height: $toggle-control-size;
-      border-radius: $toggle-radius;
-      background: $toggle-control-color;
-      transition: left $toggle-control-speed $toggle-control-ease;
-    }
-  }
+:deep(.custom-select.q-field--outlined .q-field__control) {
+  color: white !important;
 }
 </style>
diff --git a/src/modules/04_registryNew/components/registry/TableView.vue b/src/modules/04_registryNew/components/registry/TableView.vue
index bfb17d690..225dc7f55 100644
--- a/src/modules/04_registryNew/components/registry/TableView.vue
+++ b/src/modules/04_registryNew/components/registry/TableView.vue
@@ -3,6 +3,8 @@ import type { QTableColumn } from "quasar";
 
 const visibleColumns = defineModel<string[]>("visibleColumns");
 
+const mode = defineModel<string>("mode");
+
 const props = defineProps<{
   columns: QTableColumn[];
 }>();
@@ -34,6 +36,58 @@ const rows = [
     year: 2566,
     salary: "25,000",
   },
+  {
+    no: 2,
+    fullName: "นายธามไทย คนคูเมือง",
+    citizenId: "5555555555555",
+    posNo: "สกก.5",
+    position: "นักจัดการงานทั่วไป",
+    posPath: "จัดการงานทั่วไป",
+    posType: "วิชาการ",
+    posLevel: "ปฏิบัติการ",
+    posOc: "ฝ่ายบริหารงานทั่วไป",
+    year: 2566,
+    salary: "25,000",
+  },
+  {
+    no: 2,
+    fullName: "นายธามไทย คนคูเมือง",
+    citizenId: "5555555555555",
+    posNo: "สกก.5",
+    position: "นักจัดการงานทั่วไป",
+    posPath: "จัดการงานทั่วไป",
+    posType: "วิชาการ",
+    posLevel: "ปฏิบัติการ",
+    posOc: "ฝ่ายบริหารงานทั่วไป",
+    year: 2566,
+    salary: "25,000",
+  },
+  {
+    no: 2,
+    fullName: "นายธามไทย คนคูเมือง",
+    citizenId: "5555555555555",
+    posNo: "สกก.5",
+    position: "นักจัดการงานทั่วไป",
+    posPath: "จัดการงานทั่วไป",
+    posType: "วิชาการ",
+    posLevel: "ปฏิบัติการ",
+    posOc: "ฝ่ายบริหารงานทั่วไป",
+    year: 2566,
+    salary: "25,000",
+  },
+  {
+    no: 2,
+    fullName: "นายธามไทย คนคูเมือง",
+    citizenId: "5555555555555",
+    posNo: "สกก.5",
+    position: "นักจัดการงานทั่วไป",
+    posPath: "จัดการงานทั่วไป",
+    posType: "วิชาการ",
+    posLevel: "ปฏิบัติการ",
+    posOc: "ฝ่ายบริหารงานทั่วไป",
+    year: 2566,
+    salary: "25,000",
+  },
 ];
 </script>
 <!-- :filter="filterKeyword"
@@ -42,11 +96,13 @@ const rows = [
 <template>
   <d-table
     ref="table"
+    :card-container-class="mode === 'card' ? 'q-col-gutter-md' : ''"
     :columns="props.columns"
     :rows="rows"
     row-key="name"
     flat
     bordered
+    :grid="mode === 'card'"
     :paging="true"
     dense
     class="custom-header-table q-mx-lg"
@@ -60,8 +116,8 @@ const rows = [
         </q-th>
       </q-tr>
     </template>
-    <template v-slot:body="props">
-      <q-tr :props="props" class="cursor-pointer">
+    <template v-slot:body="props" v-if="mode === 'table'">
+      <q-tr :props="props" class="cursor-pointer" v-if="mode === 'table'">
         <q-td v-for="col in props.cols" :key="col.id">
           <template v-if="col.name == 'fullName'">
             <q-item v-ripple>
@@ -85,5 +141,69 @@ const rows = [
         </q-td>
       </q-tr>
     </template>
+    <template v-slot:item="props" v-else>
+      <div class="col-xs-12 col-sm-6 col-md-3">
+        <q-card style="border: 0.5px solid #e4e4e4">
+          <div class="flex justify-center q-pt-md q-px-md">
+            <q-item-section avatar class="q-pa-none">
+              <img
+                src="@/assets/avatar_user.jpg"
+                class="col-4 img-info q-mt-md"
+                style="width: 120px; height: 120px; border-radius: 50%"
+              />
+              <div class="text-weight-medium q-mt-md">
+                {{ props.row.fullName }}
+              </div>
+              <div class="text-weight-light full-width text-center">
+                {{ props.row.citizenId }}
+              </div>
+            </q-item-section>
+            <q-card
+              bordered
+              class="q-my-md q-py-md full-width bg-grey-2"
+              style="border: 0.5px solid #e4e4e4"
+            >
+              <div class="row q-pl-md">
+                <div class="col">
+                  <div class="text-weight-light">ตำแหน่งเลขที่</div>
+                  <div class="text-weight-medium">{{ props.row.posNo }}</div>
+                </div>
+                <div class="col">
+                  <div class="text-weight-light">ตำแหน่ง</div>
+                  <div class="text-weight-medium">
+                    {{ props.row.position }}
+                  </div>
+                </div>
+              </div>
+              <div class="row q-pl-md q-pt-md">
+                <div class="col">
+                  <div class="text-weight-light">ประเภท</div>
+                  <div class="text-weight-medium">
+                    {{ props.row.posType }}
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="text-weight-light">ระดับชั้นงาน</div>
+                  <div class="text-weight-medium">
+                    {{ props.row.posLevel }}
+                  </div>
+                </div>
+              </div>
+            </q-card>
+          </div>
+          <q-separator class="" color="" />
+          <div class="see-more text-center q-py-md" style="width: 100%">
+            <span style="font-size: 14px; font-weight: 500">ดูเพิ่มเติม</span>
+          </div>
+        </q-card>
+      </div>
+    </template>
   </d-table>
 </template>
+
+<style scoped>
+.see-more:hover {
+  background-color: #089cfc;
+  color: white;
+}
+</style>
diff --git a/src/modules/04_registryNew/interface/index/form.ts b/src/modules/04_registryNew/interface/index/form.ts
new file mode 100644
index 000000000..8c9244f0b
--- /dev/null
+++ b/src/modules/04_registryNew/interface/index/form.ts
@@ -0,0 +1,14 @@
+interface FormData {
+    type: string,
+    citizenId: string,
+    fullName: string,
+    retireYear: number | null,
+    year: number | null,
+    posPath: string,
+    posLevel: string,
+    posOc: string,
+    isShowRetire: boolean,
+    isProbation: boolean,
+}
+
+export type { FormData }
\ No newline at end of file
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index ec351e066..3219b8f8e 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -178,7 +178,7 @@ const visibleColumns = ref<string[]>([
             v-model="mode"
             dense
             class="no-shadow"
-            toggle-color="grey-5"
+            toggle-color="grey-4"
             :options="[
               { value: 'table', slot: 'table' },
               { value: 'card', slot: 'card' },
@@ -205,11 +205,11 @@ const visibleColumns = ref<string[]>([
     </div>
 
     <TableView
-      v-if="mode === 'table'"
       :columns="columns"
       v-model:visibleColumns="visibleColumns"
+      v-model:mode="mode"
     />
-    <CardView v-if="mode === 'card'" />
+    <!-- <CardView v-if="mode === 'card'" /> -->
   </div>
 </template>