diff --git a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
index 96e10e6b5..83bd28c02 100644
--- a/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
+++ b/src/modules/04_registryNew/components/detail/Achievement/03_Insignia.vue
@@ -534,7 +534,6 @@ const clickClose = async () => {
       ok: "ยืนยัน",
       persistent: true,
     }).onOk(async () => {
-      myForm.value.reset()
       // modal.value = false;
       // next.value = false;
       // previous.value = false;
@@ -659,9 +658,9 @@ onMounted(async () => {
     <q-input
       dense
       outlined
-      v-model="filterSearch"
       label="ค้นหา"
       class="q-mr-sm"
+      v-model="filterSearch"
     >
       <template v-slot:append>
         <q-icon name="search" />
@@ -670,19 +669,19 @@ onMounted(async () => {
 
     <q-select
       v-if="modelView === 'table'"
-      v-model="visibleColumns"
+      dense
       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"
+      options-dense
       class="q-mr-sm"
+      option-value="name"
+      style="min-width: 150px"
+      v-model="visibleColumns"
+      :options="columns"
+      :display-value="$q.lang.table.columns"
     />
 
     <q-btn-toggle
@@ -727,6 +726,7 @@ onMounted(async () => {
       :rows="rows"
       :columns="columns"
       :filter="filterSearch"
+      :grid="modelView === 'card'"
       :rows-per-page-options="[0]"
       :pagination="initialPagination"
       :visible-columns="visibleColumns"
@@ -742,13 +742,13 @@ onMounted(async () => {
         </q-tr>
       </template>
 
-      <template v-slot:body="props">
+      <template v-slot:body="props" v-if="modelView === 'table'">
         <q-tr :props="props" class="cursor-pointer">
           <q-td
             v-for="col in props.cols"
+            class="cursor-pointer"
             :key="col.name"
             :props="props"
-            class="cursor-pointer"
           >
             <div
               v-if="
@@ -769,23 +769,108 @@ onMounted(async () => {
           </q-td>
           <q-td auto-width>
             <q-btn
-              color="info"
               flat
               dense
               round
               size="14px"
+              color="info"
               icon="mdi-history"
               @click="clickHistory(props.row)"
-            />
+            >
+              <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
+            </q-btn>
           </q-td>
         </q-tr>
       </template>
+
+      <template v-slot:item="props" v-else>
+        <div
+          class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+        >
+          <q-card bordered>
+            <q-card-actions class="bg-grey-3" align="right">
+              <q-btn
+                flat
+                round
+                color="primary"
+                icon="mdi-pencil-outline"
+                @click.stop.prevent="onClickOpenDialog()"
+              >
+                <q-tooltip>แก่ไขข้อมุล</q-tooltip>
+              </q-btn>
+              <q-btn
+                flat
+                round
+                color="info"
+                icon="mdi-history"
+                @click.stop.prevent="clickHistory(props.row)"
+              >
+                <q-tooltip>ประวัติแก้ไขเครื่องราชอิสริยาภรณ์</q-tooltip>
+              </q-btn>
+            </q-card-actions>
+            <q-separator />
+            <div>
+              <q-item
+                v-for="(col, index) in props.cols.filter(
+                  (col) => col.name !== 'desc'
+                )"
+                :key="col.name"
+                :class="index % 2 !== 0 ? 'bg-grey-1' : ''"
+              >
+                <q-item-section class="text-grey-6" v-if="index <= 7">
+                  <q-item-label>{{ col.label }}</q-item-label>
+                </q-item-section>
+
+                <q-item-section class="text-dark" v-if="index <= 7">
+                  <q-item-label
+                    v-if="
+                      col.name == 'receiveDate' ||
+                      col.name == 'dateAnnounce' ||
+                      col.name == 'refCommandDate'
+                    "
+                  >
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </q-item-label>
+                  <q-item-label v-else-if="col.name == 'year'">
+                    {{ col.value + 543 }}
+                  </q-item-label>
+                  <q-item-label v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </q-item-label>
+                </q-item-section>
+
+                <q-item-section class="text-grey-6" v-if="index > 7">
+                  <q-item-label>{{ col.label }}</q-item-label>
+                </q-item-section>
+
+                <q-item-section class="text-dark" v-if="index > 7">
+                  <q-item-label
+                    v-if="
+                      col.name == 'receiveDate' ||
+                      col.name == 'dateAnnounce' ||
+                      col.name == 'refCommandDate'
+                    "
+                  >
+                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  </q-item-label>
+                  <q-item-label v-else-if="col.name == 'year'">
+                    {{ col.value + 543 }}
+                  </q-item-label>
+                  <q-item-label v-else>
+                    {{ col.value ? col.value : "-" }}
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </div>
+          </q-card>
+        </div>
+      </template>
     </q-table>
   </div>
 
   <q-dialog v-model="modal" persistent>
     <q-card style="width: 600px">
-      <q-form ref="myForm" @submit="onSubmit">
+      <q-form greedy ref="myForm" @submit="onSubmit">
         <DialogHeader tittle="เครื่องราชอิสริยาภรณ์" :close="clickClose" />
         <q-separator />
         <q-card-section class="q-p-sm">
@@ -1105,7 +1190,7 @@ onMounted(async () => {
             unelevated
             label="บันทึก"
             id="onSubmit"
-            type="reset"
+            type="submit"
             color="public"
             class="q-px-md"
           >