diff --git a/src/assets/registry-banner.png b/src/assets/registry-banner.png
index 3aa0bd34f..381e76686 100644
Binary files a/src/assets/registry-banner.png and b/src/assets/registry-banner.png differ
diff --git a/src/modules/04_registryNew/components/DialogHistory.vue b/src/modules/04_registryNew/components/DialogHistory.vue
index 9226044b4..aca329cf0 100644
--- a/src/modules/04_registryNew/components/DialogHistory.vue
+++ b/src/modules/04_registryNew/components/DialogHistory.vue
@@ -206,129 +206,113 @@ const paginationLabel = (start: number, end: number, total: number) => {
 
 <template>
   <q-dialog v-model="modal">
-    <q-card style="width: 850px; max-width: 80vw">
-      <q-card-section>
-        <div class="my-content">
-          <div
-            class="row q-pa-xs items-center bg-blue-1"
-            style="border-radius: 4px 4px 0px 0px"
-          >
-            <q-icon
-              size="20px"
-              color="blue-9"
-              name="mdi-filter-variant"
-              class="q-mx-sm"
-            />
-            <div class="text-blue-9 text-subtitle2 text-weight-medium">
-              <span>ประวัติถือครองตำแหน่ง</span>
+    <q-card style="width: 850px; max-width: 80vw"> 
+      <q-toolbar>
+        <q-toolbar-title class="text-subtitle2 text-bold">ประวัติถือครองตำแหน่ง</q-toolbar-title>
+        <q-btn
+          icon="close"
+          unelevated
+          round
+          dense
+          v-close-popup
+          style="color: #ff8080; background-color: #ffdede"
+        />
+      </q-toolbar>
+      <q-separator/>
+
+      <div class="dialog-card-contain">
+        <q-card-section class="q-pa-sm">
+          <q-form ref="myForm">
+            <div class="row col-12 q-col-gutter-xs">
+              <q-select
+                class="col-4"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
+                outlined
+                dense
+                lazy-rules
+                v-model="employeeClass"
+                emit-value
+                map-options
+                :options="employeeClassOps"
+                option-label="name"
+                option-value="id"
+                :label="`${'ประเภท'}`"
+                use-input
+                input-debounce="0"
+                @update:model-value="changeEmployeeClass"
+              />
+              <q-select
+                class="col-4"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ฟิลด์ที่จะค้น'}`]"
+                outlined
+                dense
+                lazy-rules
+                v-model="typeKeyword"
+                emit-value
+                map-options
+                :options="typeKeywordOps"
+                option-label="name"
+                option-value="id"
+                :label="`${' เลือกฟิลด์ที่จะค้น'}`"
+                use-input
+                input-debounce="0"
+                @update:model-value="selectTypeKeyword(typeKeyword)"
+              />
+              <q-input
+                v-if="typeKeyword === 'no'"
+                class="col-4"
+                borderless
+                outlined
+                dense
+                debounce="300"
+                v-model="Keyword"
+                placeholder="เลขที่ตำแหน่ง"
+                :rules="[(val:string) => !!val || `${'กรุณากรอก เลขที่ตำแหน่ง'}`]"
+              />
+              <q-select
+                v-if="typeKeyword === 'position'"
+                class="col-4"
+                hide-bottom-space
+                :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
+                outlined
+                dense
+                v-model="positionKeyword"
+                emit-value
+                map-options
+                :options="options"
+                option-label="name"
+                option-value="id"
+                :label="`${' เลือกตำแหน่ง'}`"
+                use-input
+                input-debounce="0"
+                @filter="filterFn"
+                behavior="menu"
+              >
+                <template v-slot:no-option>
+                  <q-item>
+                    <q-item-section class="text-grey">
+                      ไม่มีข้อมูล
+                    </q-item-section>
+                  </q-item>
+                </template></q-select
+              >
+              <q-space />
+              <div>
+                <q-btn
+                  dense
+                  color="primary"
+                  icon="mdi-magnify"
+                  label="ค้นหา"
+                  class="q-px-md"
+                  @click="clickSearch(employeeClass)"
+                />
+              </div>
             </div>
-            <q-space />
-            <q-btn
-              color="blue-9"
-              icon="mdi-close"
-              size="12px"
-              flat
-              round
-              dense
-              v-close-popup
-            />
-          </div>
-          <q-separator color="blue-1" />
-          <div class="dialog-card-contain">
-            <q-card-section class="q-pa-sm">
-              <q-form ref="myForm">
-                <div class="row col-12 q-col-gutter-xs">
-                  <q-select
-                    class="col-4"
-                    hide-bottom-space
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="employeeClass"
-                    emit-value
-                    map-options
-                    :options="employeeClassOps"
-                    option-label="name"
-                    option-value="id"
-                    :label="`${'ประเภท'}`"
-                    use-input
-                    input-debounce="0"
-                    @update:model-value="changeEmployeeClass"
-                  />
-                  <q-select
-                    class="col-4"
-                    hide-bottom-space
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือก ฟิลด์ที่จะค้น'}`]"
-                    outlined
-                    dense
-                    lazy-rules
-                    v-model="typeKeyword"
-                    emit-value
-                    map-options
-                    :options="typeKeywordOps"
-                    option-label="name"
-                    option-value="id"
-                    :label="`${' เลือกฟิลด์ที่จะค้น'}`"
-                    use-input
-                    input-debounce="0"
-                    @update:model-value="selectTypeKeyword(typeKeyword)"
-                  />
-                  <q-input
-                    v-if="typeKeyword === 'no'"
-                    class="col-4"
-                    borderless
-                    outlined
-                    dense
-                    debounce="300"
-                    v-model="Keyword"
-                    placeholder="เลขที่ตำแหน่ง"
-                    :rules="[(val:string) => !!val || `${'กรุณากรอก เลขที่ตำแหน่ง'}`]"
-                  />
-                  <q-select
-                    v-if="typeKeyword === 'position'"
-                    class="col-4"
-                    hide-bottom-space
-                    :rules="[(val:string) => !!val || `${'กรุณาเลือก ตำแหน่ง'}`]"
-                    outlined
-                    dense
-                    v-model="positionKeyword"
-                    emit-value
-                    map-options
-                    :options="options"
-                    option-label="name"
-                    option-value="id"
-                    :label="`${' เลือกตำแหน่ง'}`"
-                    use-input
-                    input-debounce="0"
-                    @filter="filterFn"
-                    behavior="menu"
-                  >
-                    <template v-slot:no-option>
-                      <q-item>
-                        <q-item-section class="text-grey">
-                          ไม่มีข้อมูล
-                        </q-item-section>
-                      </q-item>
-                    </template></q-select
-                  >
-                  <q-space />
-                  <div>
-                    <q-btn
-                      dense
-                      color="primary"
-                      icon="mdi-magnify"
-                      label="ค้นหา"
-                      class="q-px-md"
-                      @click="clickSearch(employeeClass)"
-                    />
-                  </div>
-                </div>
-              </q-form>
-            </q-card-section>
-          </div>
-        </div>
-      </q-card-section>
+          </q-form>
+        </q-card-section>
+      </div>
 
       <q-card-section class="q-pt-none">
         <q-table
diff --git a/src/modules/04_registryNew/components/TableView.vue b/src/modules/04_registryNew/components/TableView.vue
index f01b19854..859856ca4 100644
--- a/src/modules/04_registryNew/components/TableView.vue
+++ b/src/modules/04_registryNew/components/TableView.vue
@@ -188,27 +188,33 @@ watch(
 </script>
 
 <template>
-  <q-toolbar style="padding: 0px">
-    <q-btn
-      round
-      flat
-      color="primary"
-      icon="add"
-      size="16px"
-      @click="onClickAddData"
-    >
-      <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
-    >
-    <q-btn
-      round
-      flat
-      color="blue"
-      icon="mdi-history"
-      size="16px"
-      @click="onClickHistory"
-    >
-      <q-tooltip>ประวัติถือครองตำแหน่ง</q-tooltip></q-btn
-    >
+  <div class="col-12 row q-pb-sm q-col-gutter-sm items-center">
+    <div>
+      <q-btn
+        round
+        flat
+        dense
+        color="primary"
+        icon="add"
+        size="15px"
+        @click="onClickAddData"
+      >
+        <q-tooltip>เพิ่มข้อมูล</q-tooltip></q-btn
+      >
+    </div>
+    <div>
+      <q-btn
+        round
+        flat
+        dense
+        color="blue"
+        icon="mdi-history"
+        size="15px"
+        @click="onClickHistory"
+      >
+        <q-tooltip>ประวัติถือครองตำแหน่ง</q-tooltip></q-btn
+      >
+    </div>
     <q-space />
     <q-select
       v-if="store.mode === 'table'"
@@ -224,40 +230,44 @@ watch(
       option-value="name"
       options-cover
       style="min-width: 150px"
-      class="q-mr-sm"
+      class="full-height"
+      hide-bottom-space
     />
+    <div>
+      <q-btn-toggle
+        v-model="store.mode"
+        dense
+        class="my-custom-toggle no-shadow"
+        toggle-color="grey-4"
+        :options="[
+          { value: 'table', slot: 'table' },
+          { value: 'card', slot: 'card' },
+        ]"
+      >
+        <template v-slot:table>
+          <q-icon
+            name="format_list_bulleted"
+            class="q-px-sm q-py-xs"
+            size="22px"
+            :style="{
+              color: store.mode === 'table' ? '#787B7C' : '#C9D3DB',
+            }"
+          />
+        </template>
 
-    <q-btn-toggle
-      v-model="store.mode"
-      dense
-      class="no-shadow"
-      toggle-color="grey-4"
-      :options="[
-        { value: 'table', slot: 'table' },
-        { value: 'card', slot: 'card' },
-      ]"
-    >
-      <template v-slot:table>
-        <q-icon
-          name="format_list_bulleted"
-          size="24px"
-          :style="{
-            color: store.mode === 'table' ? '#787B7C' : '#C9D3DB',
-          }"
-        />
-      </template>
-
-      <template v-slot:card>
-        <q-icon
-          name="mdi-view-grid-outline"
-          size="24px"
-          :style="{
-            color: store.mode === 'card' ? '#787B7C' : '#C9D3DB',
-          }"
-        />
-      </template>
-    </q-btn-toggle>
-  </q-toolbar>
+        <template v-slot:card>
+          <q-icon
+            name="mdi-view-grid-outline"
+            size="22px"
+            class="q-px-sm q-py-xs"
+            :style="{
+              color: store.mode === 'card' ? '#787B7C' : '#C9D3DB',
+            }"
+          />
+        </template>
+      </q-btn-toggle>
+    </div>
+  </div>
   <d-table
     ref="table"
     row-key="id"
@@ -270,7 +280,7 @@ watch(
     :grid="store.mode === 'card'"
     :paging="true"
     v-model:pagination="pagination"
-    :rows-per-page-options="[20, 50, 100]"
+    :rows-per-page-options="[20, 50, 100] "
     :visible-columns="visibleColumns"
     @update:pagination="updatePageSizePagination"
   >
@@ -329,14 +339,14 @@ watch(
       </q-tr>
     </template>
     <template v-slot:item="props" v-else>
-      <div class="col-xs-12 col-sm-4 col-md-3 q-pa-md">
-        <q-card flat bordered>
-          <q-card-section class="text-center">
-            <q-avatar size="100px">
+      <div class="col-xs-12 col-sm-4 col-md-3">
+        <q-card flat bordered class="cardRO" @click="onClickViewDetail(props.row.id)">
+          <q-card-section class="text-center q-pb-none">
+            <q-avatar size="80px">
               <img src="@/assets/avatar_user.jpg" />
             </q-avatar>
 
-            <div class="text-weight-medium q-mt-md">
+            <div class="text-weight-medium q-mt-md textName">
               {{
                 `${props.row.prefix}${props.row.firstName} ${props.row.lastName}`
               }}
@@ -394,14 +404,14 @@ watch(
               </q-list>
             </q-card>
           </q-card-section>
-          <q-separator inset />
+          <!-- <q-separator inset />
           <q-btn
             flat
             color="black"
             label="ดูเพิ่มเติม"
             class="hover-button full-width q-pa-md"
             @click="onClickViewDetail(props.row.id)"
-          />
+          /> -->
         </q-card>
       </div>
     </template>
@@ -461,6 +471,21 @@ watch(
 }
 
 .bg-grey-13 {
-  background: #f1f2f4 !important;
+  background: #f1f2f496 !important;
+}
+
+.my-custom-toggle{
+  border: 1px solid #d0d0d2;
+}
+.cardRO{
+  border-radius: 10px;
+}
+
+.cardRO:hover{
+  cursor: pointer;
+  background: #dcdcdc33 !important;
+}
+.cardRO:hover .textName{
+  color: #02A998;
 }
 </style>
diff --git a/src/modules/04_registryNew/views/list.vue b/src/modules/04_registryNew/views/list.vue
index 699896726..aa385d8d9 100644
--- a/src/modules/04_registryNew/views/list.vue
+++ b/src/modules/04_registryNew/views/list.vue
@@ -188,67 +188,79 @@ onMounted(async () => {
 });
 </script>
 <template>
-  <div class="toptitle text-dark col-12 row items-center">
+  <!-- <div class="toptitle text-dark col-12 row items-center">
     ข้อมูลทะเบียนประวัติ
-  </div>
+  </div> -->
 
-  <q-card>
-    <q-card-section class="card-img">
-      <div class="text-h5 text-center q-pa-md">ค้นหาข้อมูลทะเบียนประวัติ</div>
+  <q-card class="q-mt-md">
+    <q-card-section class="card-img q-pb-lg">
+      <div class="text-h5 text-center q-py-md text-weight-medium">ค้นหาข้อมูลทะเบียนประวัติ</div>
       <div class="row justify-center">
-        <div class="col-12 q-pa-md">
+        <div class="col-xs-12 col-sm-12 col-md-11 q-pa-md bg-Search rounded-borders">
           <q-form @submit="onclickSearch">
-            <q-toolbar style="padding: 0px">
-              <q-select
-                outlined
-                bg-color="white"
-                v-model="searchType"
-                :options="store.searchTypeOption"
-                emit-value
-                dense
-                emit-option
-                option-label="name"
-                option-value="id"
-                map-options
-              />
-              <q-toolbar-title>
+            <div class="bg-white row col-12 q-pa-none rounded-borders">
+              <div class="row col-11">
+                <div class="col-3 row wrap">
+                  <q-select
+                    borderless
+                    bg-color="white"
+                    v-model="searchType"
+                    :options="store.searchTypeOption"
+                    emit-value
+                    dense
+                    emit-option
+                    option-label="name"
+                    option-value="id"
+                    map-options
+                    class="selectS col-11 q-px-md "
+                    color="deep-orange"
+                    dropdown-icon="mdi-chevron-down"
+                    
+                  />
+                  <q-separator vertical />
+                </div>
                 <q-input
-                  outlined
+                  borderless
                   dense
                   bg-color="white"
                   v-model="formFilter.keyword"
                   clearable
                   placeholder="ค้นหา"
+                  class="col-9 q-pr-md"
                 >
+                  <template v-slot:before>
+                    <q-icon name="search" color="deep-orange" />
+                  </template>
                 </q-input>
-              </q-toolbar-title>
-              <q-btn color="blue" label="ค้นหา" type="submit" />
-            </q-toolbar>
+              </div>
+              <div class="row col-1">
+                <q-btn class="fit btnSearch" unelevated color="deep-orange" label="ค้นหา" type="submit" />
+              </div>
+            </div>
           </q-form>
-          <q-toolbar
-            inset
-            align="right"
-            style="padding: 0px"
-            v-if="isShowBtnFilter"
-          >
-            <q-toolbar-title>
-              <q-btn
-                flat
-                label="ตัวเลือกเพิ่มเติม"
-                icon-right="tune"
-                @click="onClickShowFilter"
-            /></q-toolbar-title>
-          </q-toolbar>
+          <div v-if="isShowBtnFilter" class="col-12 row q-mt-sm">
+            <q-space/>
+            <q-btn
+              flat
+              label="ตัวเลือกเพิ่มเติม"
+              icon-right="mdi-tune"
+              @click="onClickShowFilter"
+              dense
+              class="q-px-sm"
+            ></q-btn>
+          </div>
 
           <div
-            class="row q-mt-md q-gutter-sm justify-center"
+            class="row q-mt-sm q-gutter-sm justify-center"
             v-if="isShowFilter"
           >
             <q-btn-dropdown
+              flat
               rounded
-              outline
-              class="custom-btn"
+              dense
               label-color="white"
+              dropdown-icon="mdi-chevron-down"
+              class="q-px-sm"
             >
               <template v-slot:label>
                 {{ `${labelOption.type}` }}
@@ -278,12 +290,17 @@ onMounted(async () => {
               </q-list>
             </q-btn-dropdown>
 
+            <q-separator inset vertical class="lineFil" />
+
             <q-btn-dropdown
               rounded
-              outline
+              flat
+              dense
               label-color="white"
-              class="custom-btn"
-            >
+              dropdown-icon="mdi-chevron-down"
+              class="q-px-sm"
+              
+            ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   labelOption.posType !== "ทั้งหมด"
@@ -315,12 +332,16 @@ onMounted(async () => {
               </q-list>
             </q-btn-dropdown>
 
+            <q-separator inset vertical class="lineFil" />
+
             <q-btn-dropdown
+              flat
+              dense
               rounded
-              outline
-              class="custom-btn"
               label-color="white"
-            >
+              dropdown-icon="mdi-chevron-down"
+              class="q-px-sm"
+            ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   labelOption.posLevel !== "ทั้งหมด"
@@ -352,12 +373,16 @@ onMounted(async () => {
               </q-list>
             </q-btn-dropdown>
 
+            <q-separator inset vertical class="lineFil" />
+
             <q-btn-dropdown
+              flat
+              dense
               rounded
-              outline
-              class="custom-btn"
               label-color="white"
-            >
+              dropdown-icon="mdi-chevron-down"
+              class="q-px-sm"
+            ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{ `ปีเกษียณ${labelOption.retireYear}` }}
                 <q-btn
@@ -385,6 +410,8 @@ onMounted(async () => {
               </q-list>
             </q-btn-dropdown>
 
+            <q-separator inset vertical class="lineFil" />
+
             <!-- <datepicker
               menu-class-name="modalfix"
               v-model="formFilter.retireYear"
@@ -431,11 +458,13 @@ onMounted(async () => {
             </datepicker> -->
 
             <q-btn-dropdown
+              flat
+              dense
               rounded
-              outline
-              class="custom-btn"
               label-color="white"
-            >
+              dropdown-icon="mdi-chevron-down"
+              class="q-px-sm"
+            ><!-- class="custom-btn" -->
               <template v-slot:label>
                 {{
                   `อายุราชการ (${formFilter.rangeYear.min} - ${formFilter.rangeYear.max} ปี)`
@@ -481,13 +510,17 @@ onMounted(async () => {
               </div>
             </q-btn-dropdown>
 
+            <q-separator inset vertical class="lineFil" />
+
             <q-btn-dropdown
+              flat
+              dense
               rounded
-              outline
-              class="custom-btn"
-              color="white"
+              label-color="white"
+              dropdown-icon="mdi-chevron-down"
               :label="`เงื่อนไขอื่นๆ  ${conditionTotal}`"
-            >
+              class="q-px-sm"
+            ><!-- class="custom-btn" -->
               <q-list>
                 <q-item clickable v-close-popup>
                   <q-item-section>
@@ -529,7 +562,7 @@ onMounted(async () => {
   </q-card>
 </template>
 
-<style scoped>
+<style >
 .card-img {
   background: url("@/assets/registry-banner.png");
   background-size: cover;
@@ -547,4 +580,20 @@ onMounted(async () => {
 :deep(.custom-btn.q-btn--outline::before) {
   background-color: #36969f;
 }
+
+.btnSearch{
+  border-radius: 0px 4px 4px 0px;
+}
+.bg-Search{
+  background: #00000015;
+}
+.lineFil{
+  transform:rotate(30deg);
+  height: 20px;
+  margin-top: 15px;
+  background: #ffffff7b !important;
+}
+.selectS .q-field__control .q-field__append .q-icon{
+  color: #ff5722 !important;
+}
 </style>