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/01_metadataNew/components/position/DialogAddPosition.vue b/src/modules/01_metadataNew/components/position/DialogAddPosition.vue
index 4e6010d75..8b3f1579b 100644
--- a/src/modules/01_metadataNew/components/position/DialogAddPosition.vue
+++ b/src/modules/01_metadataNew/components/position/DialogAddPosition.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive, watch,defineProps } from "vue";
+import { ref, reactive, watch, defineProps } from "vue";
 import { useQuasar } from "quasar";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -32,10 +32,10 @@ const formPositionSelect = reactive<FormPositionSelectDialog>({
   positionArea: "",
 });
 const $q = useQuasar();
-const isSpecial = ref<boolean>(false)
+const isSpecial = ref<boolean>(false);
 const props = defineProps({
-  getData:Function
-})
+  getData: Function,
+});
 const { dialogConfirm, showLoader, success, hideLoader, messageError } =
   useCounterMixin();
 
@@ -85,8 +85,8 @@ function validateFormPositionEdit() {
 
 /** ฟังชั่น บันทึก */
 function saveSelectEdit() {
-  console.log(formPositionSelect.positionExecutive)
-  console.log(formPositionSelect.positionArea)
+  console.log(formPositionSelect.positionExecutive);
+  console.log(formPositionSelect.positionArea);
   dialogConfirm(
     $q,
     async () => {
@@ -96,10 +96,10 @@ function saveSelectEdit() {
         posDictField: formPositionSelect.positionField, //สายงาน
         posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
         posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-        posExecutiveId:formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
+        posExecutiveId: formPositionSelect.positionExecutive, //ตำแหน่งทางการบริหาร
         posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
         posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
-        isSpecial:isSpecial.value
+        isSpecial: isSpecial.value,
       };
       await http
         .put(config.API.orgPosPositionById(formPositionSelect.positionId), body)
@@ -108,7 +108,7 @@ function saveSelectEdit() {
           clearFormPositionSelect();
           modal.value = false;
           editCheck.value = false;
-          props.getData?.()
+          props.getData?.();
         })
         .catch((err) => {
           messageError($q, err);
@@ -132,13 +132,10 @@ function onSubmitSelectEdit() {
         posDictField: formPositionSelect.positionField, //สายงาน
         posTypeId: formPositionSelect.positionType, //*ประเภทตำแหน่ง
         posLevelId: formPositionSelect.positionLevel, //*ระดับตำแหน่ง
-        posExecutiveId:formPositionSelect.positionExecutive, 
-        posDictExecutiveField: formPositionSelect.positionExecutiveField , //ด้านทางการบริหาร
+        posExecutiveId: formPositionSelect.positionExecutive,
+        posDictExecutiveField: formPositionSelect.positionExecutiveField, //ด้านทางการบริหาร
         posDictArea: formPositionSelect.positionArea, //ด้าน/สาขา
-        isSpecial:isSpecial.value
-
-
-
+        isSpecial: isSpecial.value,
       };
       await http
         .post(config.API.orgPosPosition, body)
@@ -277,7 +274,7 @@ function close() {
 
         <q-card-section>
           <div class="row q-col-gutter-sm col-12">
-            <div class="col-6">
+            <div class="col-12">
               <q-input
                 ref="positionNameRef"
                 v-model="formPositionSelect.positionName"
@@ -291,6 +288,33 @@ function close() {
                 :rules="[(val) => !!val || `${'กรุณากรอกตำแหน่งในสายงาน'}`]"
               />
             </div>
+            <div class="col-6">
+              <q-input
+                ref="positionExecutiveFieldRef"
+                v-model="formPositionSelect.positionExecutiveField"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionExecutiveField"
+                label="ด้านทางการบริหาร"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+            <div class="col-6">
+              <q-input
+                ref="positionAreaRef"
+                v-model="formPositionSelect.positionArea"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionArea"
+                label="ด้าน/สาขา"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
             <div class="col-6">
               <q-input
                 ref="positionFieldRef"
@@ -305,6 +329,7 @@ function close() {
                 :rules="[(val) => !!val || `${'กรุณากรอกสายงาน'}`]"
               />
             </div>
+
             <div class="col-6">
               <q-select
                 ref="positionTypeRef"
@@ -361,32 +386,7 @@ function close() {
                 clearable
               />
             </div>
-            <div class="col-6">
-              <q-input
-                ref="positionExecutiveFieldRef"
-                v-model="formPositionSelect.positionExecutiveField"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                for="#positionExecutiveField"
-                label="ด้านทางการบริหาร"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="positionAreaRef"
-                v-model="formPositionSelect.positionArea"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                for="#positionArea"
-                label="ด้าน/สาขา"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
+
             <div class="col-6 self-center">
               <q-checkbox size="md" v-model="isSpecial" label="ฉ" />
             </div>
diff --git a/src/modules/02_organizationalNew/components/DialogAddPosition.vue b/src/modules/02_organizationalNew/components/DialogAddPosition.vue
index 812cb5818..d28cd7d03 100644
--- a/src/modules/02_organizationalNew/components/DialogAddPosition.vue
+++ b/src/modules/02_organizationalNew/components/DialogAddPosition.vue
@@ -296,7 +296,7 @@ watch(
       <q-card-section class="q-pa-none">
         <form @submit.prevent="validateFormPositionEdit">
           <div class="row q-col-gutter-sm col-12 q-pa-sm">
-            <div class="col-6">
+            <div class="col-12">
               <q-input
                 ref="positionNameRef"
                 v-model="formPositionSelect.positionName"
@@ -314,6 +314,33 @@ watch(
                 "
               />
             </div>
+            <div class="col-6">
+              <q-input
+                ref="positionExecutiveFieldRef"
+                v-model="formPositionSelect.positionExecutiveField"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionExecutiveField"
+                label="ด้านทางการบริหาร"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
+
+            <div class="col-6">
+              <q-input
+                ref="positionAreaRef"
+                v-model="formPositionSelect.positionArea"
+                :class="inputEdit(isReadonly)"
+                dense
+                outlined
+                for="#positionArea"
+                label="ด้าน/สาขา"
+                lazy-rules
+                hide-bottom-space
+              />
+            </div>
             <div class="col-6">
               <q-input
                 ref="positionFieldRef"
@@ -332,6 +359,7 @@ watch(
                 "
               />
             </div>
+
             <div class="col-6">
               <q-select
                 ref="positionTypeRef"
@@ -396,32 +424,7 @@ watch(
                 clearable
               />
             </div>
-            <div class="col-6">
-              <q-input
-                ref="positionExecutiveFieldRef"
-                v-model="formPositionSelect.positionExecutiveField"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                for="#positionExecutiveField"
-                label="ด้านทางการบริหาร"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
-            <div class="col-6">
-              <q-input
-                ref="positionAreaRef"
-                v-model="formPositionSelect.positionArea"
-                :class="inputEdit(isReadonly)"
-                dense
-                outlined
-                for="#positionArea"
-                label="ด้าน/สาขา"
-                lazy-rules
-                hide-bottom-space
-              />
-            </div>
+
             <div class="col-6 self-center">
               <q-checkbox size="md" v-model="isSpecial" label="ฉ" />
             </div>
diff --git a/src/modules/04_registryNew/components/DialogHistory.vue b/src/modules/04_registryNew/components/DialogHistory.vue
index 9226044b4..24f38a598 100644
--- a/src/modules/04_registryNew/components/DialogHistory.vue
+++ b/src/modules/04_registryNew/components/DialogHistory.vue
@@ -206,131 +206,115 @@ 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>
-            </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-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/>
 
-      <q-card-section class="q-pt-none">
+      <div class="dialog-card-contain">
+        <q-card-section class="q-pa-sm">
+          <q-form ref="myForm">
+            <div class=" col-12 bg-grey-2 q-pa-sm">
+              <div class="q-col-gutter-xs row no-wrap">
+                <q-select
+                  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
+                  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'"
+                  borderless
+                  outlined
+                  dense
+                  debounce="300"
+                  v-model="Keyword"
+                  placeholder="เลขที่ตำแหน่ง"
+                  :rules="[(val:string) => !!val || `${'กรุณากรอก เลขที่ตำแหน่ง'}`]"
+                  hide-bottom-space
+                />
+                <q-select
+                  v-if="typeKeyword === 'position'"
+                  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 class="col-2 row">
+                  <q-btn
+                    dense
+                    color="primary"
+                    icon="mdi-magnify"
+                    label="ค้นหา"
+                    class="col-12"
+                    @click="clickSearch(employeeClass)"
+                  />
+                </div>
+              </div>
+            </div>
+          </q-form>
+        </q-card-section>
+      </div>
+
+     
+      <div class="col-12 q-px-sm q-pb-sm"> 
         <q-table
           flat
           dense
@@ -390,7 +374,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
             ></q-pagination>
           </template>
         </q-table>
-      </q-card-section>
+      </div>
 
       <!-- <q-card-actions align="right">
         <q-btn flat label="OK" color="primary" v-close-popup />
diff --git a/src/modules/04_registryNew/components/TableView.vue b/src/modules/04_registryNew/components/TableView.vue
index f01b19854..2e8d46b22 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}`
               }}
@@ -346,22 +356,26 @@ watch(
             </div>
           </q-card-section>
 
-          <q-card-section class="q-px-md">
+          <q-card-section class="q-pa-sm">
             <q-card bordered class="bg-grey-13">
-              <q-list>
-                <q-item>
+              <q-list dense class="q-py-sm">
+                <q-item dense>
                   <q-item-section>
                     <q-item-label caption>ตำแหน่งเลขที่</q-item-label>
-                    <q-item-label>{{
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption class="text-black">{{
                       props.row.posNo ? props.row.posNo : "-"
                     }}</q-item-label>
                   </q-item-section>
                 </q-item>
 
-                <q-item>
+                <q-item dense>
                   <q-item-section>
                     <q-item-label caption>ตำแหน่ง</q-item-label>
-                    <q-item-label>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption class="text-black">
                       {{
                         props.row.position ? props.row.position : "-"
                       }}</q-item-label
@@ -369,39 +383,41 @@ watch(
                   </q-item-section>
                 </q-item>
 
-                <q-item>
+                <q-item dense>
                   <q-item-section>
                     <q-item-label caption>ประเภทตำแหน่ง</q-item-label>
-                    <q-item-label>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption class="text-black">
                       {{
                         props.row.posType ? props.row.posType : "-"
                       }}</q-item-label
                     >
                   </q-item-section>
                 </q-item>
-                <q-item>
+
+                <q-item dense>
                   <q-item-section>
-                    <q-item-label caption
-                      >ระดับตำแหน่ง/ระดับชั้นงาน</q-item-label
-                    >
-                    <q-item-label>
+                    <q-item-label caption>ระดับชั้นงาน</q-item-label>
+                  </q-item-section>
+                  <q-item-section>
+                    <q-item-label caption class="text-black">
                       {{
                         props.row.posLevel ? props.row.posLevel : "-"
-                      }}</q-item-label
-                    >
+                      }}</q-item-label>
                   </q-item-section>
                 </q-item>
               </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 +477,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>