diff --git a/src/modules/04_registry/components/PopupHistory.vue b/src/modules/04_registry/components/PopupHistory.vue
index 91c766f9a..585d25c3a 100644
--- a/src/modules/04_registry/components/PopupHistory.vue
+++ b/src/modules/04_registry/components/PopupHistory.vue
@@ -240,7 +240,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
               <q-form ref="myForm">
                 <div class="row col-12 q-col-gutter-xs">
                   <q-select
-                    class="col-4"
+                    class="col-3"
                     hide-bottom-space
                     :rules="[(val:string) => !!val || `${'กรุณาเลือก ประเภท'}`]"
                     outlined
@@ -258,7 +258,7 @@ const paginationLabel = (start: number, end: number, total: number) => {
                     @update:model-value="changeEmployeeClass"
                   />
                   <q-select
-                    class="col-4"
+                    class="col-2"
                     hide-bottom-space
                     :rules="[(val:string) => !!val || `${'กรุณาเลือก ฟิลด์ที่จะค้น'}`]"
                     outlined
diff --git a/src/modules/04_registryNew/components/DialogHistory.vue b/src/modules/04_registryNew/components/DialogHistory.vue
index aca329cf0..24f38a598 100644
--- a/src/modules/04_registryNew/components/DialogHistory.vue
+++ b/src/modules/04_registryNew/components/DialogHistory.vue
@@ -223,98 +223,98 @@ const paginationLabel = (start: number, end: number, total: number) => {
       <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
+            <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
-                  color="primary"
-                  icon="mdi-magnify"
-                  label="ค้นหา"
-                  class="q-px-md"
-                  @click="clickSearch(employeeClass)"
+                  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>
 
-      <q-card-section class="q-pt-none">
+     
+      <div class="col-12 q-px-sm q-pb-sm"> 
         <q-table
           flat
           dense
@@ -374,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 />