diff --git a/src/modules/04_registryNew/components/registry/TableView.vue b/src/modules/04_registryNew/components/registry/TableView.vue
index 225dc7f55..cf1e2402b 100644
--- a/src/modules/04_registryNew/components/registry/TableView.vue
+++ b/src/modules/04_registryNew/components/registry/TableView.vue
@@ -105,7 +105,7 @@ const rows = [
     :grid="mode === 'card'"
     :paging="true"
     dense
-    class="custom-header-table q-mx-lg"
+    class="custom-header-table"
     :visible-columns="visibleColumns"
   >
     >
diff --git a/src/modules/04_registryNew/interface/index/registry.ts b/src/modules/04_registryNew/interface/index/registry.ts
new file mode 100644
index 000000000..f21febf12
--- /dev/null
+++ b/src/modules/04_registryNew/interface/index/registry.ts
@@ -0,0 +1,6 @@
+interface RangeYear {
+  min: number;
+  max: number;
+}
+
+export type { RangeYear };
diff --git a/src/modules/04_registryNew/interface/response/Main.ts b/src/modules/04_registryNew/interface/response/Main.ts
new file mode 100644
index 000000000..611a9ff4e
--- /dev/null
+++ b/src/modules/04_registryNew/interface/response/Main.ts
@@ -0,0 +1,15 @@
+interface DataType {
+  id: string;
+  posLevels: any;
+  posTypeName: string;
+  posTypeRank: number;
+}
+
+interface DataLevel {
+  id: string;
+  posLevelAuthority: string | null;
+  posLevelName: string;
+  posLevelRank: number;
+}
+
+export type { DataType, DataLevel };
diff --git a/src/modules/04_registryNew/store.ts b/src/modules/04_registryNew/store.ts
index e69de29bb..2d4e7265e 100644
--- a/src/modules/04_registryNew/store.ts
+++ b/src/modules/04_registryNew/store.ts
@@ -0,0 +1,28 @@
+import { defineStore } from "pinia";
+
+import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
+import type {
+  DataType,
+  DataLevel,
+} from "@/modules/04_registryNew/interface/response/Main";
+
+export const useRegistryNewDataStore = defineStore("registryNew", () => {
+  function fetchType(data: DataType[]) {
+    const list: DataOption[] = data.map((e: DataType) => ({
+      id: e.id,
+      name: e.posTypeName,
+    }));
+    return list;
+  }
+  function fetchLevel(data: DataLevel[]) {
+    const list: DataOption[] = data.map((e: DataLevel) => ({
+      id: e.id,
+      name: e.posLevelName,
+    }));
+    return list;
+  }
+  return {
+    fetchType,
+    fetchLevel,
+  };
+});
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index cdb4bb2d1..fd75b1155 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -1,11 +1,26 @@
 <script setup lang="ts">
-import { ref } from "vue";
+import { ref, reactive, computed, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+/** importType*/
+import type { QTableColumn } from "quasar";
+import type { DataOption } from "@/modules/04_registryNew/interface/index/Main";
+import type { RangeYear } from "@/modules/04_registryNew/interface/index/registry";
+
+/** importComponents*/
 import Search from "@/modules/04_registryNew/components/registry/Search.vue";
 import TableView from "@/modules/04_registryNew/components/registry/TableView.vue";
-import { useQuasar } from "quasar";
-import type { QTableColumn } from "quasar";
+
+/** importStore*/
+import { useRegistryNewDataStore } from "@/modules/04_registryNew/store";
+import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
+const store = useRegistryNewDataStore();
+const { showLoader, hideLoader, messageError } = useCounterMixin();
+
 const mode = ref<"table" | "card">("table");
 const columns = [
   {
@@ -132,18 +147,423 @@ const visibleColumns = ref<string[]>([
   "year",
   "salary",
 ]);
+
+const isSearchData = ref<boolean>(true);
+const isShowFilter = ref<boolean>(true);
+const keyword = ref<string>("");
+
+const searchType = ref<string>("fullName");
+
+const searchTypeOption = ref<DataOption[]>([
+  { id: "fullName", name: "ชื่อ-นามสกุล" },
+  { id: "citizenId", name: "เลขประจำตัวประชาชน" },
+  { id: "posNo", name: "ตำแหน่งเลขที่" },
+  { id: "position", name: "ตำแหน่งสายงาน" },
+]);
+
+const labelOption = reactive({
+  type: "ทั้งหมด",
+  posType: "ทั้งหมด",
+  posLevel: "ทั้งหมด",
+});
+
+const type = ref<string>("ข้าราชการทั้งหมด");
+const posType = ref<string>("ทั้งหมด");
+const posLevel = ref<string>("ทั้งหมด");
+const retireYear = ref<number | null>(null);
+const isShowRetire = ref<boolean>(false);
+const isProbation = ref<boolean>(false);
+const TypeOption = ref<DataOption[]>([
+  { id: "0", name: "ข้าราชการทั้งหมด" },
+  { id: "1", name: "ข้าราชการ กทม.สามัญ" },
+  { id: "2", name: "ลูกจ้างประจำ" },
+  { id: "3", name: "ลููกจ้างชั่วคราว" },
+]);
+const posTypeOption = ref<DataOption[]>([]);
+const posLevelOption = ref<DataOption[]>([]);
+const rangeYear = ref<RangeYear>({
+  min: 0,
+  max: 60,
+});
+
+const conditionTotal = computed(() => {
+  let num: string = "";
+  if (isProbation.value && isShowRetire.value) {
+    num = "(2)";
+  } else if (isProbation.value || isShowRetire.value) {
+    num = "(1)";
+  } else "";
+
+  return num;
+});
+
+function fetchType() {
+  http
+    .get(config.API.orgPosType)
+    .then(async (res) => {
+      posTypeOption.value = store.fetchType(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+async function fetchLevel() {
+  http
+    .get(config.API.orgPosLevel)
+    .then(async (res) => {
+      posLevelOption.value = store.fetchLevel(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function onClickShowFilter() {
+  isShowFilter.value = !isShowFilter.value;
+}
+
+function selectType(item: DataOption) {
+  labelOption.type = item.name;
+}
+
+function selectPosType(item: DataOption) {
+  labelOption.posType = item.name;
+}
+
+function selectPosLevel(item: DataOption) {
+  labelOption.posLevel = item.name;
+}
+
+function clearSelect(t: string) {
+  if (t === "type") {
+    labelOption.type = "ทั้งหมด";
+  } else if (t === "posType") {
+    labelOption.posType = "ทั้งหมด";
+  } else if (t === "posLevel") {
+    labelOption.posLevel = "ทั้งหมด";
+  } else if (t === "retireYear") {
+    retireYear.value = null;
+  } else if (t === "rangeYear") {
+    rangeYear.value.min = 0;
+    rangeYear.value.max = 60;
+  }
+}
+
+onMounted(async () => {
+  fetchType();
+  fetchLevel();
+});
 </script>
 <template>
   <div class="toptitle text-dark col-12 row items-center">
     ข้อมูลทะเบียนประวัติ
   </div>
-  <Search />
-  <div
+
+  <q-card>
+    <q-card-section class="card-img">
+      <div class="text-h5 text-center q-pa-md">ค้นหาข้อมูลทะเบียนประวัติ</div>
+      <div class="row justify-center">
+        <div class="col-12 col-md-10">
+          <q-toolbar style="padding: 0px">
+            <q-select
+              outlined
+              bg-color="white"
+              v-model="searchType"
+              :options="searchTypeOption"
+              emit-value
+              dense
+              emit-option
+              option-label="name"
+              option-value="id"
+              map-options
+            />
+            <q-toolbar-title>
+              <q-input
+                outlined
+                dense
+                bg-color="white"
+                v-model="keyword"
+                clearable
+                placeholder="ค้นหา"
+              >
+              </q-input>
+            </q-toolbar-title>
+            <q-btn color="blue" label="ค้นหา" />
+          </q-toolbar>
+          <q-toolbar inset align="right" style="padding: 0px">
+            <q-toolbar-title>
+              <q-btn
+                flat
+                label="ตัวเลือกเพิ่มเติม"
+                icon-right="tune"
+                @click="onClickShowFilter"
+            /></q-toolbar-title>
+          </q-toolbar>
+
+          <div class="q-pa-md" v-if="isShowFilter">
+            <div class="row q-gutter-sm">
+              <q-btn-dropdown
+                rounded
+                outline
+                class="custom-btn"
+                label-color="white"
+              >
+                <template v-slot:label>
+                  {{ `ประเภทข้าราชการ ${labelOption.type}` }}
+
+                  <q-btn
+                    size="10px"
+                    flat
+                    round
+                    color="white"
+                    icon="close"
+                    v-if="labelOption.type !== 'ทั้งหมด'"
+                    @click.stop.prevent="clearSelect('type')"
+                  />
+                </template>
+                <q-list>
+                  <q-item
+                    v-for="(item, index) in TypeOption"
+                    :key="index"
+                    clickable
+                    v-close-popup
+                    @click="selectType(item)"
+                  >
+                    <q-item-section>
+                      <q-item-label>{{ item.name }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+
+              <q-btn-dropdown
+                rounded
+                outline
+                label-color="white"
+                class="custom-btn"
+              >
+                <template v-slot:label>
+                  {{ `ประเภทตำแหน่ง ${labelOption.posType}` }}
+                  <q-btn
+                    size="10px"
+                    flat
+                    round
+                    color="white"
+                    icon="close"
+                    v-if="labelOption.posType !== 'ทั้งหมด'"
+                    @click.stop.prevent="clearSelect('posType')"
+                  />
+                </template>
+                <q-list>
+                  <q-item
+                    v-for="(item, index) in posTypeOption"
+                    :key="index"
+                    clickable
+                    v-close-popup
+                    @click="selectPosType(item)"
+                  >
+                    <q-item-section>
+                      <q-item-label>{{ item.name }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+
+              <q-btn-dropdown
+                rounded
+                outline
+                class="custom-btn"
+                label-color="white"
+              >
+                <template v-slot:label>
+                  {{ `ระดับตำแหน่ง ${labelOption.posLevel}` }}
+                  <q-btn
+                    size="10px"
+                    flat
+                    round
+                    color="white"
+                    icon="close"
+                    v-if="labelOption.posLevel !== 'ทั้งหมด'"
+                    @click.stop.prevent="clearSelect('posLevel')"
+                  />
+                </template>
+                <q-list>
+                  <q-item
+                    v-for="(item, index) in posLevelOption"
+                    :key="index"
+                    clickable
+                    v-close-popup
+                    @click="selectPosLevel(item)"
+                  >
+                    <q-item-section>
+                      <q-item-label>{{ item.name }}</q-item-label>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+
+              <datepicker
+                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="cursor-pointer custom-select"
+                    rounded
+                    label-color="white"
+                    outlined
+                    dense
+                    input-style="color:white;"
+                    borderless
+                    :model-value="retireYear === null ? null : retireYear + 543"
+                    :label="`${'ปีเกษียณ'}`"
+                  >
+                    <template v-slot:append>
+                      <q-btn
+                        size="10px"
+                        flat
+                        round
+                        color="white"
+                        icon="close"
+                        v-if="retireYear !== null"
+                        @click.stop.prevent="clearSelect('retireYear')"
+                      />
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+
+              <q-btn-dropdown
+                rounded
+                outline
+                class="custom-btn"
+                label-color="white"
+              >
+                <template v-slot:label>
+                  {{ `อายุราชการ (${rangeYear.min} - ${rangeYear.max} ปี)` }}
+                  <q-btn
+                    size="10px"
+                    flat
+                    round
+                    color="white"
+                    icon="close"
+                    v-if="rangeYear.min !== 0 || rangeYear.max !== 60"
+                    @click.stop.prevent="clearSelect('rangeYear')"
+                  />
+                </template>
+                <div class="row justify-center">
+                  <div class="col-12 q-pa-md text-center">
+                    <div>
+                      <span>จำนวนปี</span>
+                      <q-badge
+                        color="grey-4"
+                        text-color="black"
+                        class="q-ml-sm"
+                        :label="`${rangeYear.min}-${rangeYear.max}`"
+                      />
+                    </div>
+                    <div class="q-ma-md">
+                      <q-range
+                        v-model="rangeYear"
+                        :min="0"
+                        :max="60"
+                        :step="1"
+                        label-always
+                        color="primary"
+                        selection-color="blue"
+                        label-color="primary"
+                        thumb-color="blue"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </q-btn-dropdown>
+
+              <q-btn-dropdown
+                rounded
+                outline
+                class="custom-btn"
+                color="white"
+                :label="`เงื่อนไขอื่นๆ  ${conditionTotal}`"
+              >
+                <q-list>
+                  <q-item clickable v-close-popup>
+                    <q-item-section>
+                      <q-toggle
+                        v-model="isProbation"
+                        color="primary"
+                        label="ทดลองปฏิบัติหน้าที่ราชการ"
+                      />
+                    </q-item-section>
+                  </q-item>
+                  <q-item clickable v-close-popup>
+                    <q-item-section>
+                      <q-toggle
+                        v-model="isShowRetire"
+                        color="primary"
+                        label="แสดงข้อมูลผู้พ้นจากราชการ"
+                      />
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-btn-dropdown>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-separator />
+
+    <q-card-section>
+      <div
+        style="
+          height: 50vh;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+        "
+        class="text-grey-5"
+        v-if="isSearchData"
+      >
+        <q-icon name="search" size="4rem" />
+
+        <span>ไม่พบข้อมูล</span>
+      </div>
+      <div v-else class="col-12 q-pa-md">
+        <!-- <TableView
+            :columns="columns"
+            v-model:visibleColumns="visibleColumns"
+            v-model:mode="mode"
+          /> -->
+      </div>
+    </q-card-section>
+  </q-card>
+
+  <!-- <Search /> -->
+  <!-- <div
     flat
     class="q-py-lg bg-white"
     style="width: 100%"
-  >
-    <div class="flex justify-between q-mb-md q-pr-lg q-pl-sm">
+  > -->
+  <!-- <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
@@ -202,19 +622,33 @@ const visibleColumns = ref<string[]>([
           </q-btn-toggle>
         </div>
       </div>
-    </div>
+    </div> -->
 
-    <TableView
+  <!-- <TableView
       :columns="columns"
       v-model:visibleColumns="visibleColumns"
       v-model:mode="mode"
-    />
-    <!-- <CardView v-if="mode === 'card'" /> -->
-  </div>
+    /> -->
+  <!-- <CardView v-if="mode === 'card'" /> -->
+  <!-- </div> -->
 </template>
 
-<!-- <style scoped>
-.no-shadow :deep(.q-card) {
-  box-shadow: none;
+<style scoped>
+.card-img {
+  background: url("@/assets/registry-banner.png");
+  background-size: cover;
+  color: white;
 }
-</style> -->
+
+:deep(.custom-select.q-field--outlined .q-field__control) {
+  color: white;
+  background-color: #36969f;
+}
+:deep(.custom-select.q-field--outlined .q-field__control::before) {
+  border: 1px solid #fff;
+}
+
+:deep(.custom-btn.q-btn--outline::before) {
+  background-color: #36969f;
+}
+</style>