diff --git a/src/modules/04_registryNew/views/detailView.vue b/src/modules/04_registryNew/views/detailView.vue
index 54d657581..f8d5b02d0 100644
--- a/src/modules/04_registryNew/views/detailView.vue
+++ b/src/modules/04_registryNew/views/detailView.vue
@@ -661,7 +661,86 @@ onMounted(async () => {
     </q-btn>
   </div>
 
-  <q-card>
+  <q-card class="my-card" flat bordered>
+    <q-card-section>
+      <div class="col row items-center">
+        <div class="row col-12">
+          <div class="col" style="padding-left: 13%">
+            <div class="col-12 text-primary">
+              <h2
+                class="title q-ma-none q-pa-none"
+                v-if="formDetail && formDetail.firstName && formDetail.lastName"
+              >
+                {{
+                  `${formDetail?.prefix ? formDetail?.prefix : ""}${
+                    formDetail?.firstName
+                  } ${formDetail?.lastName} ${leaveReason}`
+                }}
+              </h2>
+            </div>
+            <!-- <div class="col-12 subtitle">{{ formDetail?.position }}</div> -->
+          </div>
+        </div>
+      </div>
+    </q-card-section>
+    <q-card-section style="padding: 0px">
+      <div
+        class="absolute"
+        style="top: 0; left: 12px; transform: translateY(-50%)"
+      >
+        <q-avatar size="90px" class="bg-grey-2">
+          <q-img :src="profilePicture" />
+        </q-avatar>
+        <q-btn
+          round
+          text-color="primary"
+          icon="mdi-pencil-outline"
+          @click="openDialogImg"
+          size="sm"
+          unelevated
+          class="bg-white btnEditImg"
+        >
+        </q-btn>
+      </div>
+
+      <div class="row items-center bg-toolbar">
+        <div class="row col-12" style="padding-left: 14%">
+          <div class="col-4">
+            <div class="col-sm-3 col-md-3">
+              <div class="col text-grey-6 text-caption">
+                {{ empType === "" ? "ตำแหน่งในสายงาน" : "ตำแหน่ง" }}
+              </div>
+              <div class="col">{{ formDetail?.position || "-" }}</div>
+            </div>
+          </div>
+          <div class="col-4">
+            <div class="col-sm-3 col-md-3">
+              <div class="col text-grey-6 text-caption">
+                {{ empType === "" ? "ตำแหน่งประเภท" : "กลุ่มงาน" }}
+              </div>
+              <div class="col">
+                {{ formDetail?.posType?.posTypeName || "-" }}
+              </div>
+            </div>
+          </div>
+          <div class="col-4">
+            <div class="col-sm-3 col-md-3">
+              <div class="col text-grey-6 text-caption">
+                {{ empType === "" ? "ระดับ" : "ระดับชั้นงาน" }}
+              </div>
+              <div class="col">
+                {{ formDetail?.posLevel?.posLevelName || "-" }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </q-card-section>
+
+    <q-separator />
+  </q-card>
+
+ <!--  <q-card>
     <div class="column" style="height: 120px">
       <div class="col row items-center">
         <div class="row col-12">
@@ -678,7 +757,6 @@ onMounted(async () => {
                 }}
               </h2>
             </div>
-            <!-- <div class="col-12 subtitle">{{ formDetail?.position }}</div> -->
           </div>
         </div>
       </div>
@@ -732,7 +810,7 @@ onMounted(async () => {
         </div>
       </div>
     </div>
-  </q-card>
+  </q-card> -->
 
   <q-card bordered class="q-mt-md rounded">
     <TabMain :fetchDataPersonal="fetchDataPersonal" />