diff --git a/src/modules/04_registryNew/components/registry/CardView.vue b/src/modules/04_registryNew/components/registry/CardView.vue
new file mode 100644
index 000000000..0a3bedf41
--- /dev/null
+++ b/src/modules/04_registryNew/components/registry/CardView.vue
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { 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
new file mode 100644
index 000000000..1d581afd3
--- /dev/null
+++ b/src/modules/04_registryNew/components/registry/Search.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { ref } from "vue";
+const search = ref<string>("");
+</script>
+<template>
+  <div
+    class="column full-width justify-center items-center inline-block bg-primary q-py-xl q-px-xl"
+    style="border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem"
+  >
+    <span
+      style="
+        display: block;
+        text-align: center;
+        color: white;
+        font-size: 20px;
+        font-weight: bold;
+      "
+    >
+      ค้นหาข้อมูลทะเบียนประวัติ
+    </span>
+
+    <div class="flex q-mt-lg" style="border-radius: 20px; flex-wrap: nowrap">
+      <div
+        class="flex full-width items-center bg-white"
+        style="flex-grow: 1; border-radius: 0.5rem"
+      >
+        <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"
+        />
+      </div>
+      <q-btn class="q-ml-lg q-px-lg" color="blue" unelevated label="ค้นหา" />
+    </div>
+  </div>
+</template>
diff --git a/src/modules/04_registryNew/components/registry/TableView.vue b/src/modules/04_registryNew/components/registry/TableView.vue
new file mode 100644
index 000000000..8bcbe3a28
--- /dev/null
+++ b/src/modules/04_registryNew/components/registry/TableView.vue
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { QTableColumn } from "quasar";
+
+const visibleColumns = defineModel<string[]>("visibleColumns");
+
+const props = defineProps<{
+  columns: QTableColumn[];
+}>();
+
+const rows = [
+  {
+    no: 1,
+    fullName: "นางสาวกัณฐิมา กานสิน",
+    posNo: "สกก.1",
+    position: "นักบริหาร",
+    posPath: "บริหาร",
+    posType: "บริหาร",
+    posLevel: "ชำนาญการพิเศษ",
+    posOc: "ฝ่ายบริหารงานทั่วไป",
+    year: 2566,
+    salary: "40,000",
+  },
+  {
+    no: 2,
+    fullName: "นายธามไทย คนคูเมือง",
+    posNo: "สกก.5",
+    position: "นักจัดการงานทั่วไป",
+    posPath: "จัดการงานทั่วไป",
+    posType: "วิชาการ",
+    posLevel: "ปฏิบัติการ",
+    posOc: "ฝ่ายบริหารงานทั่วไป",
+    year: 2566,
+    salary: "25,000",
+  },
+];
+</script>
+<!-- :filter="filterKeyword"
+:visible-columns="visibleColumns" -->
+
+<template>
+  <d-table
+    ref="table"
+    :columns="props.columns"
+    :rows="rows"
+    row-key="name"
+    flat
+    bordered
+    :paging="true"
+    dense
+    class="custom-header-table q-mx-lg"
+    :visible-columns="visibleColumns"
+  >
+    >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th v-for="col in props.cols" :key="col.name" :props="props">
+          <span class="text-weight-medium">{{ col.label }}</span>
+        </q-th>
+      </q-tr>
+    </template>
+    <template v-slot:body="props">
+      <q-tr :props="props" class="cursor-pointer">
+        <q-td v-for="col in props.cols" :key="col.id">
+          <template v-if="col.name == 'fullName'">
+            <q-item v-ripple>
+              <q-item-section avatar>
+                <img
+                  src="@/assets/avatar_user.jpg"
+                  class="col-4 img-info"
+                  style="width: 35px; height: 40px; border-radius: 50%"
+                />
+              </q-item-section>
+
+              <q-item-section>
+                <div class="text-weight-medium">{{ props.row.fullName }}</div>
+                <div class="text-weight-light">123123123123123</div>
+              </q-item-section>
+            </q-item>
+          </template>
+          <template v-else>
+            {{ col.value }}
+          </template>
+        </q-td>
+      </q-tr>
+    </template>
+  </d-table>
+</template>
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index ab5d5aae5..9caf5c801 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -1,10 +1,220 @@
 <script setup lang="ts">
+import { ref } from "vue";
+import Search from "@/modules/04_registryNew/components/registry/Search.vue";
+import TableView from "@/modules/04_registryNew/components/registry/TableView.vue";
+import CardView from "@/modules/04_registryNew/components/registry/CardView.vue";
+import { useQuasar } from "quasar";
+import type { QTableColumn, QTableProps } from "quasar";
+
+const $q = useQuasar();
+const mode = ref<"table" | "card">("table");
+const columns = [
+  {
+    name: "no",
+    align: "left",
+    label: "ลำดับ",
+    sortable: true,
+    field: "no",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "fullName",
+    align: "center",
+    label: "ชื่อ - นามสกุล",
+    sortable: true,
+    field: "fullName",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posNo",
+    align: "center",
+    label: "ตำแหน่งเลขที่",
+    sortable: true,
+    field: "posNo",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "position",
+    align: "left",
+    label: "ตำแหน่ง",
+    sortable: true,
+    field: "position",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posPath",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "posPath",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posType",
+    align: "left",
+    label: "สายงาน",
+    sortable: true,
+    field: "posPath",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posLevel",
+    align: "left",
+    label: "ระดับชั้นงาน",
+    sortable: true,
+    field: "posLevel",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "posOc",
+    align: "left",
+    label: "สังกัด",
+    sortable: true,
+    field: "posOc",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "year",
+    align: "left",
+    label: "ปีงบประมาณ",
+    sortable: true,
+    field: "year",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+  {
+    name: "salary",
+    align: "left",
+    label: "ค่าจ้าง",
+    sortable: true,
+    field: "salary",
+    headerStyle: "font-size: 14px",
+    style: "font-size: 14px",
+    sort: (a: string, b: string) =>
+      a.localeCompare(b, undefined, { numeric: true, sensitivity: "base" }),
+  },
+] satisfies QTableColumn[];
+
+const visibleColumns = ref<string[]>([
+  "no",
+  "fullName",
+  "posNo",
+  "position",
+  "posPath",
+  "posType",
+  "posLevel",
+  "posOc",
+  "year",
+  "salary",
+]);
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     ข้อมูลทะเบียนประวัติ
   </div>
+  <Search />
+  <div
+    flat
+    class="q-py-lg"
+    :class="{
+      'bg-white': mode === 'table',
+    }"
+    style="width: 100%"
+  >
+    <div class="flex justify-between q-mb-md q-pr-lg q-pl-sm">
+      <div>
+        <q-btn round flat color="primary" icon="add" size="16px">
+          <q-tooltip>เพิ่ม</q-tooltip></q-btn
+        >
+        <q-btn round flat color="blue" icon="mdi-history" size="16px">
+          <q-tooltip>ประวัติ</q-tooltip></q-btn
+        >
+      </div>
+      <div class="flex items-center">
+        <q-select
+          v-if="mode === 'table'"
+          class="q-mr-md"
+          v-model="visibleColumns"
+          multiple
+          outlined
+          dense
+          options-dense
+          :display-value="$q.lang.table.columns"
+          emit-value
+          map-options
+          :options="columns"
+          option-value="name"
+          options-cover
+          style="min-width: 150px"
+        />
+        <div style="border: 1px solid #c8c4c4; border-radius: 5px">
+          <q-btn-toggle
+            v-model="mode"
+            dense
+            class="no-shadow"
+            toggle-color="grey-5"
+            :options="[
+              { value: 'table', slot: 'table' },
+              { value: 'card', slot: 'card' },
+            ]"
+          >
+            <template v-slot:table>
+              <q-icon
+                name="format_list_bulleted"
+                :color="mode === 'table' ? 'dark' : 'grey-5'"
+                size="24px"
+              />
+            </template>
 
+            <template v-slot:card>
+              <q-icon
+                name="mdi-view-grid-outline"
+                :color="mode === 'card' ? 'dark' : 'grey-5'"
+                size="24px"
+              />
+            </template>
+          </q-btn-toggle>
+        </div>
+      </div>
+    </div>
+
+    <TableView
+      v-if="mode === 'table'"
+      :columns="columns"
+      v-model:visibleColumns="visibleColumns"
+    />
+    <CardView v-if="mode === 'card'" />
+  </div>
 </template>
 
-<style scoped></style>
+<!-- <style scoped>
+.no-shadow :deep(.q-card) {
+  box-shadow: none;
+}
+</style> -->