diff --git a/src/modules/07_insignia/components/2_Manage/Tab1.vue b/src/modules/07_insignia/components/2_Manage/Tab1.vue
index 1a92fb66f..f8579443e 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab1.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab1.vue
@@ -704,7 +704,6 @@ const clearInsigniaFilters = (name: string) => {
     <div class="row col-12">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
-          class="col-3"
           v-if="roleDataStore.adminRole"
           v-model="organization"
           label="หน่วยงาน"
@@ -721,135 +720,12 @@ const clearInsigniaFilters = (name: string) => {
           :borderless="false"
           :outlined="true"
           :hide-dropdown-icon="false"
-          style="min-width: 150px"
+          style="width: 400px"
           @update:model-value="changtypeOc"
           @filter="(inputValue: any,
             doneFn: Function) => filterSelector(inputValue, doneFn, 'filterOrganizationOP'
             )"
         />
-        <q-select
-          :class="roleDataStore.adminRole ? 'col-1':'col-3'"
-          v-model="DataStore.typeinsignia"
-          label="ประเภทเครื่องราชฯ ที่ยืนขอ"
-          dense
-          emit-value
-          map-options
-          :options="typeinsigniaOptions"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          use-input
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          style="min-width: 180px"
-          @update:model-value="
-            DataStore.searchDataTable(
-              DataStore.typeinsignia,
-              DataStore.employeeClass
-            )
-          "
-          @filter="(inputValue: any,
-    doneFn: Function) => filterSelector(inputValue, doneFn, 'typeinsigniaOptions'
-    )"
-        >
-          <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="
-                clearInsigniaFilters('typeinsigniaOptions'),
-                  DataStore.searchDataTable(
-                    DataStore.typeinsignia,
-                    DataStore.employeeClass
-                  )
-              "
-              class="cursor-pointer"
-            />
-          </template>
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <div>
-          <q-select
-            class="col-2"
-            v-model="DataStore.employeeClass"
-            dense
-            outlined
-            lazy-rules
-            hide-bottom-space
-            :label="`${'สถานภาพ'}`"
-            emit-value
-            use-input
-            map-options
-            option-label="name"
-            :options="employeeClassOps"
-            option-value="id"
-            :readonly="false"
-            :borderless="false"
-            style="min-width: 150px"
-            @update:model-value="
-              DataStore.searchDataTable(
-                DataStore.typeinsignia,
-                DataStore.employeeClass
-              )
-            "
-            @filter="(inputValue: any,
-    doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
-    )"
-          >
-            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
-              <q-icon
-                name="cancel"
-                @click.stop.prevent="
-                  clearInsigniaFilters('employeeClassOps'),
-                    DataStore.searchDataTable(
-                      DataStore.typeinsignia,
-                      DataStore.employeeClass
-                    )
-                "
-                class="cursor-pointer"
-              />
-            </template>
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </div>
-        <div>
-          <q-btn
-            size="md"
-            icon="mdi-download"
-            flat
-            round
-            color="primary"
-            @click="downloadFileexcel"
-          >
-            <q-tooltip>ดาวน์โหลด</q-tooltip>
-          </q-btn>
-          <q-btn
-            size="12px"
-            flat
-            round
-            color="add"
-            icon="mdi-plus"
-            @click="clickmodalAdd"
-            v-if="
-              (DataStore.isLock == false &&
-                DataStore.requestStatus == 'st5' &&
-                roleDataStore.adminRole) ||
-              checkStatus == true
-            "
-          >
-            <q-tooltip>เพิ่ม</q-tooltip>
-          </q-btn>
-        </div>
         <q-space />
 
         <q-input
@@ -889,6 +765,131 @@ const clearInsigniaFilters = (name: string) => {
           class="col-xs-12 col-sm-3 col-md-2"
         />
       </div>
+      <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
+        <div class="row col-12 q-col-gutter-sm">
+          <q-select
+            :class="roleDataStore.adminRole ? 'col-1':'col-3'"
+            v-model="DataStore.typeinsignia"
+            label="ประเภทเครื่องราชฯ ที่ยืนขอ"
+            dense
+            emit-value
+            map-options
+            :options="typeinsigniaOptions"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            use-input
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            style="min-width: 180px"
+            @update:model-value="
+              DataStore.searchDataTable(
+                DataStore.typeinsignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue: any,
+      doneFn: Function) => filterSelector(inputValue, doneFn, 'typeinsigniaOptions'
+      )"
+          >
+            <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('typeinsigniaOptions'),
+                    DataStore.searchDataTable(
+                      DataStore.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </template>
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <q-select
+            v-model="DataStore.employeeClass"
+            dense
+            outlined
+            lazy-rules
+            hide-bottom-space
+            :label="`${'สถานภาพ'}`"
+            emit-value
+            use-input
+            map-options
+            option-label="name"
+            :options="employeeClassOps"
+            option-value="id"
+            :readonly="false"
+            :borderless="false"
+            style="width: 280px"
+            @update:model-value="
+              DataStore.searchDataTable(
+                DataStore.typeinsignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue: any,
+    doneFn: Function) => filterSelector(inputValue, doneFn, 'employeeClassOps'
+    )"
+          >
+            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('employeeClassOps'),
+                    DataStore.searchDataTable(
+                      DataStore.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </template>
+            <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
+              size="md"
+              icon="mdi-download"
+              flat
+              round
+              color="primary"
+              @click="downloadFileexcel"
+            >
+              <q-tooltip>ดาวน์โหลด</q-tooltip>
+            </q-btn>
+            <q-btn
+              size="12px"
+              flat
+              round
+              color="add"
+              icon="mdi-plus"
+              @click="clickmodalAdd"
+              v-if="
+                (DataStore.isLock == false &&
+                  DataStore.requestStatus == 'st5' &&
+                  roleDataStore.adminRole) ||
+                checkStatus == true
+              "
+            >
+              <q-tooltip>เพิ่ม</q-tooltip>
+            </q-btn>
+          </div>
+        </div>
+      </q-card>
       <div class="col-12 q-pt-sm">
         <q-table
           ref="table"
diff --git a/src/modules/07_insignia/components/2_Manage/Tab2.vue b/src/modules/07_insignia/components/2_Manage/Tab2.vue
index 72d312dd2..d5e2261ca 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab2.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab2.vue
@@ -247,7 +247,6 @@ const clearInsigniaFilters = (name: string) => {
     <div class="row col-12">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
-          class="col-3"
           v-if="roleDataStore.adminRole"
           v-model="organization"
           label="หน่วยงาน"
@@ -264,14 +263,54 @@ const clearInsigniaFilters = (name: string) => {
           :borderless="false"
           :outlined="true"
           :hide-dropdown-icon="false"
-          style="min-width: 150px"
+          style="width: 400px"
           @update:model-value="changtypeOc"
           @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
                       ) "
         />
+        <q-space />
+
+        <q-input
+          class="col-xs-12 col-sm-3 col-md-2"
+          standout
+          dense
+          v-model="filterKeyword"
+          ref="filterRef"
+          outlined
+          debounce="300"
+          placeholder="ค้นหา"
+        >
+          <template v-slot:append>
+            <q-icon v-if="filterKeyword == ''" name="search" />
+            <q-icon
+              v-if="filterKeyword !== ''"
+              name="clear"
+              class="cursor-pointer"
+              @click="resetFilter"
+            />
+          </template>
+        </q-input>
+
+        <q-select
+          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"
+          class="col-xs-12 col-sm-3 col-md-2"
+        />
+      </div>
+      <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
+        <div class="row col-12 q-col-gutter-sm">
         <q-select
-        :class="roleDataStore.adminRole ? 'col-1':'col-3'"
           v-model="DataStore.typeinsignia"
           label="ประเภทเครื่องราชฯ ที่ยืนขอ"
           dense
@@ -317,93 +356,53 @@ const clearInsigniaFilters = (name: string) => {
             </q-item>
           </template>
         </q-select>
-        <div>
-          <q-select
-            class="col-2"
-            v-model="DataStore.employeeClass"
-            dense
-            outlined
-            lazy-rules
-            hide-bottom-space
-            :label="`${'สถานภาพ'}`"
-            emit-value
-            use-input
-            map-options
-            option-label="name"
-            :options="employeeClassOps"
-            option-value="id"
-            :readonly="false"
-            :borderless="false"
-            style="min-width: 150px"
-            @update:model-value="
-              DataStore.searchDataTable(
-                DataStore.typeinsignia,
-                DataStore.employeeClass
-              )
-            "
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-          >
-            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
-              <q-icon
-                name="cancel"
-                @click.stop.prevent="
-                  clearInsigniaFilters('employeeClassOps'),
-                    DataStore.searchDataTable(
-                      DataStore.typeinsignia,
-                      DataStore.employeeClass
-                    )
-                "
-                class="cursor-pointer"
-              />
-            </template>
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </div>
-        <q-space />
-
-        <q-input
-          class="col-xs-12 col-sm-3 col-md-2"
-          standout
+        <q-select
+          v-model="DataStore.employeeClass"
           dense
-          v-model="filterKeyword"
-          ref="filterRef"
           outlined
-          debounce="300"
-          placeholder="ค้นหา"
+          lazy-rules
+          hide-bottom-space
+          :label="`${'สถานภาพ'}`"
+          emit-value
+          use-input
+          map-options
+          option-label="name"
+          :options="employeeClassOps"
+          option-value="id"
+          :readonly="false"
+          :borderless="false"
+          style="width: 300px"
+          @update:model-value="
+            DataStore.searchDataTable(
+              DataStore.typeinsignia,
+              DataStore.employeeClass
+            )
+          "
+          @filter="(inputValue:any,
+                    doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                    ) "
         >
-          <template v-slot:append>
-            <q-icon v-if="filterKeyword == ''" name="search" />
+          <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
             <q-icon
-              v-if="filterKeyword !== ''"
-              name="clear"
+              name="cancel"
+              @click.stop.prevent="
+                clearInsigniaFilters('employeeClassOps'),
+                  DataStore.searchDataTable(
+                    DataStore.typeinsignia,
+                    DataStore.employeeClass
+                  )
+              "
               class="cursor-pointer"
-              @click="resetFilter"
             />
           </template>
-        </q-input>
-
-        <q-select
-          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"
-          class="col-xs-12 col-sm-3 col-md-2"
-        />
-      </div>
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+        </div>
+      </q-card>
       <div class="col-12 q-pt-sm">
         <q-table
           ref="table"
diff --git a/src/modules/07_insignia/components/2_Manage/Tab3.vue b/src/modules/07_insignia/components/2_Manage/Tab3.vue
index 3bbb06cce..a761ef7b0 100644
--- a/src/modules/07_insignia/components/2_Manage/Tab3.vue
+++ b/src/modules/07_insignia/components/2_Manage/Tab3.vue
@@ -243,7 +243,6 @@ const clearInsigniaFilters = (name: string) => {
     <div class="row col-12">
       <div class="row col-12 q-col-gutter-sm">
         <q-select
-          class="col-3"
           v-if="roleDataStore.adminRole"
           v-model="organization"
           label="หน่วยงาน"
@@ -260,107 +259,12 @@ const clearInsigniaFilters = (name: string) => {
           :borderless="false"
           :outlined="true"
           :hide-dropdown-icon="false"
-          style="min-width: 150px"
+          style="width: 400px"
           @update:model-value="changtypeOc"
           @filter="(inputValue:any,
                       doneFn:Function) => filterSelector(inputValue, doneFn,'filterOrganizationOP'
                       ) "
         />
-        <q-select
-          :class="roleDataStore.adminRole ? 'col-1' : 'col-3'"
-          v-model="DataStore.typeinsignia"
-          label="ประเภทเครื่องราชฯ ที่ยืนขอ"
-          dense
-          emit-value
-          map-options
-          :options="typeinsigniaOptions"
-          option-value="id"
-          option-label="name"
-          lazy-rules
-          hide-bottom-space
-          use-input
-          :readonly="false"
-          :borderless="false"
-          :outlined="true"
-          :hide-dropdown-icon="false"
-          style="min-width: 180px"
-          @update:model-value="
-            DataStore.searchDataTable(
-              DataStore.typeinsignia,
-              DataStore.employeeClass
-            )
-          "
-          @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
-                      ) "
-        >
-          <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
-            <q-icon
-              name="cancel"
-              @click.stop.prevent="
-                clearInsigniaFilters('typeinsigniaOptions'),
-                  DataStore.searchDataTable(
-                    DataStore.typeinsignia,
-                    DataStore.employeeClass
-                  )
-              "
-              class="cursor-pointer"
-            />
-          </template>
-          <template v-slot:no-option>
-            <q-item>
-              <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-            </q-item>
-          </template>
-        </q-select>
-        <div>
-          <q-select
-            class="col-2"
-            v-model="DataStore.employeeClass"
-            dense
-            outlined
-            lazy-rules
-            hide-bottom-space
-            :label="`${'สถานภาพ'}`"
-            emit-value
-            use-input
-            map-options
-            option-label="name"
-            :options="employeeClassOps"
-            option-value="id"
-            :readonly="false"
-            :borderless="false"
-            style="min-width: 150px"
-            @update:model-value="
-              DataStore.searchDataTable(
-                DataStore.typeinsignia,
-                DataStore.employeeClass
-              )
-            "
-            @filter="(inputValue:any,
-                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
-                      ) "
-          >
-            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
-              <q-icon
-                name="cancel"
-                @click.stop.prevent="
-                  clearInsigniaFilters('employeeClassOps'),
-                    DataStore.searchDataTable(
-                      DataStore.typeinsignia,
-                      DataStore.employeeClass
-                    )
-                "
-                class="cursor-pointer"
-              />
-            </template>
-            <template v-slot:no-option>
-              <q-item>
-                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
-        </div>
         <q-space />
 
         <q-input
@@ -400,6 +304,101 @@ const clearInsigniaFilters = (name: string) => {
           class="col-xs-12 col-sm-3 col-md-2"
         />
       </div>
+      <q-card bordered class="q-pa-sm col-12 bg-grey-1 q-mt-sm">
+        <div class="row col-12 q-col-gutter-sm">
+          <q-select
+            v-model="DataStore.typeinsignia"
+            label="ประเภทเครื่องราชฯ ที่ยืนขอ"
+            dense
+            emit-value
+            map-options
+            :options="typeinsigniaOptions"
+            option-value="id"
+            option-label="name"
+            lazy-rules
+            hide-bottom-space
+            use-input
+            :readonly="false"
+            :borderless="false"
+            :outlined="true"
+            :hide-dropdown-icon="false"
+            style="min-width: 180px"
+            @update:model-value="
+              DataStore.searchDataTable(
+                DataStore.typeinsignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue:any,
+                        doneFn:Function) => filterSelector(inputValue, doneFn,'typeinsigniaOptions'
+                        ) "
+          >
+            <template v-if="DataStore.typeinsignia !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('typeinsigniaOptions'),
+                    DataStore.searchDataTable(
+                      DataStore.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </template>
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+          <q-select
+            v-model="DataStore.employeeClass"
+            dense
+            outlined
+            lazy-rules
+            hide-bottom-space
+            :label="`${'สถานภาพ'}`"
+            emit-value
+            use-input
+            map-options
+            option-label="name"
+            :options="employeeClassOps"
+            option-value="id"
+            :readonly="false"
+            :borderless="false"
+            style="width: 300px"
+            @update:model-value="
+              DataStore.searchDataTable(
+                DataStore.typeinsignia,
+                DataStore.employeeClass
+              )
+            "
+            @filter="(inputValue:any,
+                      doneFn:Function) => filterSelector(inputValue, doneFn,'employeeClassOps'
+                      ) "
+          >
+            <template v-if="DataStore.employeeClass !== 'all'" v-slot:append>
+              <q-icon
+                name="cancel"
+                @click.stop.prevent="
+                  clearInsigniaFilters('employeeClassOps'),
+                    DataStore.searchDataTable(
+                      DataStore.typeinsignia,
+                      DataStore.employeeClass
+                    )
+                "
+                class="cursor-pointer"
+              />
+            </template>
+            <template v-slot:no-option>
+              <q-item>
+                <q-item-section class="text-grey"> ไม่มีข้อมูล </q-item-section>
+              </q-item>
+            </template>
+          </q-select>
+        </div>
+      </q-card>
       <div class="col-12 q-pt-sm">
         <q-table
           ref="table"
diff --git a/src/modules/07_insignia/views/ResultPage.vue b/src/modules/07_insignia/views/ResultPage.vue
index 517f79d7d..79d622382 100644
--- a/src/modules/07_insignia/views/ResultPage.vue
+++ b/src/modules/07_insignia/views/ResultPage.vue
@@ -544,7 +544,7 @@ const clearInsigniaFilters = (name: string) => {
         class="q-pa-none"
       >
         <div class="q-pa-md">
-          <div class="row col-12 q-pb-sm q-col-gutter-x-xs">
+          <div class="row col-12 q-pb-sm q-col-gutter-x-xs no-wrap">
             <div>
               <q-file
                 dense
@@ -552,7 +552,7 @@ const clearInsigniaFilters = (name: string) => {
                 outlined
                 v-model="fileResult"
                 label="บันทึกผลการได้รับพระราชทานเครื่องราชอิสริยาภรณ์"
-                style="min-width: 300px"
+                style="min-width: 350px"
                 accept=".xlsx"
               >
                 <template v-slot:prepend>
@@ -584,7 +584,7 @@ const clearInsigniaFilters = (name: string) => {
                 outlined
                 v-model="fileinvoice"
                 label="บันทึกผลการจ่ายใบกำกับ"
-                style="min-width: 300px"
+                style="min-width: 350px"
                 accept=".xlsx"
               >
                 <template v-slot:prepend>