diff --git a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
index 34444f343..c735774be 100644
--- a/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
+++ b/src/modules/04_registryPerson/components/detail/Employee/01_DataEmployee.vue
@@ -322,65 +322,93 @@ onMounted(() => {
   </div>
 
   <q-card bordered class="my-card bg-grey-1 q-pa-md">
-    <div :class="$q.screen.gt.xs ? 'row' : 'column'">
-      <!-- column 1 -->
-      <div class="col-md-7 col-12 row">
-        <div class="col-5 text-grey-6 text-weight-medium">
-          <div class="q-py-xs">กลุ่มงาน</div>
-          <div class="q-py-xs">สายงาน</div>
-          <div class="q-py-xs">ตำแหน่งทางสายงาน</div>
-          <div class="q-py-xs">สังกัด</div>
-          <div class="q-py-xs">ประเภทบุคคล</div>
-        </div>
+    <div class="row q-col-gutter-md">
 
-        <!-- data -->
-        <div class="col-7">
-          <div class="q-py-xs">
-            {{ dataEmployee.positionEmployeeGroupId ?? '-' }}
-          </div>
-          <div class="q-py-xs">
-            {{ dataEmployee.positionEmployeeLineId ?? '-' }}
-          </div>
-          <div class="q-py-xs">
-            {{ dataEmployee.positionEmployeePositionId ?? '-' }}
-          </div>
-          <div class="q-py-xs">
-            {{ dataEmployee.employeeOc ?? '-' }}
-          </div>
-          <div class="q-py-xs">
-            {{ dataEmployee.employeeTypeIndividual ?? '-' }}
-          </div>
+    <!-- column 1 -->
+    <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+      <div class="row items-center">
+        <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+          <div>กลุ่มงาน</div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-7">
+          {{ dataEmployee.positionEmployeeGroupId ?? "-" }}
         </div>
       </div>
-
-      <!-- column 2 -->
-      <div class="col-md-5 col-12 row">
-        <div class="col-5 col text-grey-6 text-weight-medium">
-          <div class="q-py-xs">ค่าจ้าง</div>
-          <div class="q-py-xs">เงินเพิ่มการครองชีพชั่วคราว</div>
-          <div class="q-py-xs">เงินช่วยเหลือการครองชีพชั่วคราว</div>
-          <div class="q-py-xs">เงินสมทบประกันสังคม (ลูกจ้าง)</div>
-          <div class="q-py-xs">เงินสมทบประกันสังคม (นายจ้าง)</div>
+      <div class="row items-center">
+        <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+          <div>สายงาน</div>
         </div>
-
-        <div class="col-7">
-          <div class="q-py-xs">
-            {{ dataEmployee.employeeWage ?? '-' }}
-          </div>
-          <div class="q-py-xs">
-            {{ dataEmployee.employeeMoneyIncrease ?? '-' }}
-          </div>
-          <div class="q-py-xs">
-            {{ dataEmployee.employeeMoneyAllowance ?? '-' }}
-          </div>
-          <div class="q-py-xs">
-            {{ dataEmployee.employeeMoneyEmployee ?? '-' }}
-          </div>
-          <div class="q-py-xs">
-            {{ dataEmployee.employeeMoneyEmployer ?? '-' }}
-          </div>
+        <div class="col-12 col-sm-12 col-md-7">
+          {{ dataEmployee.positionEmployeeLineId ?? "-" }}
         </div>
       </div>
+      <div class="row items-center">
+        <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+          <div>ตำแหน่งทางสายงาน</div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-7">
+          {{ dataEmployee.positionEmployeePositionId ?? "-" }}
+        </div>
+      </div>
+      <div class="row items-center">
+        <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+          <div>สังกัด</div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-7">
+          {{ dataEmployee.employeeOc ?? "-" }}
+        </div>
+      </div>
+      <div class="row items-center">
+        <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+          <div>ประเภทบุคคล</div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-7">
+          {{ dataEmployee.employeeTypeIndividual ?? "-" }}
+        </div>
+      </div>
+    </div>
+    <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+      <div class="row items-center">
+        <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+          <div>ค่าจ้าง</div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-7">
+          {{ dataEmployee.employeeWage ?? "-" }}
+        </div>
+      </div>
+      <div class="row items-start ">
+        <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+          <div>เงินเพิ่มการครองชีพชั่วคราว</div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-7">
+          {{ dataEmployee.employeeMoneyIncrease ?? "-" }}
+        </div>
+      </div>
+      <div class="row items-start ">
+        <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+          <div>เงินช่วยเหลือการครองชีพชั่วคราว</div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-7">
+          {{ dataEmployee.employeeMoneyAllowance ?? "-" }}
+        </div>
+      </div>
+      <div class="row items-start ">
+        <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+          <div>เงินสมทบประกันสังคม (ลูกจ้าง)</div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-7">
+          {{ dataEmployee.employeeMoneyEmployee ?? "-" }}
+        </div>
+      </div>
+      <div class="row items-start ">
+        <div class="col-12 col-sm-12 col-md-5 text-grey-6 text-weight-medium">
+          <div>เงินสมทบประกันสังคม (นายจ้าง)</div>
+        </div>
+        <div class="col-12 col-sm-12 col-md-7">
+          {{ dataEmployee.employeeMoneyEmployer ?? "-" }}
+        </div>
+      </div>
+    </div>
     </div>
   </q-card>
 
diff --git a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
index 5defd1310..023677173 100644
--- a/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
+++ b/src/modules/04_registryPerson/components/detail/PersonalInformation/04_FamilyNew.vue
@@ -522,7 +522,7 @@ onMounted(async () => {
       </q-toolbar>
 
       <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
-        <div class="row items-center">
+        <div class="row items-start">
           <div class="col-2 text-grey-6 text-weight-medium">
             <div>เลขประจำตัวประชาชน</div>
           </div>
@@ -530,7 +530,7 @@ onMounted(async () => {
             {{ fatherData.citizenId ? fatherData.citizenId : "-" }}
           </div>
         </div>
-        <div class="row items-center">
+        <div class="row items-start">
           <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
           <div class="col-6">
             {{
@@ -547,7 +547,7 @@ onMounted(async () => {
             {{ fatherData.job ? fatherData.job : "-" }}
           </div>
         </div>
-        <div class="row items-center">
+        <div class="row items-start">
           <div class="col-2 text-grey-6 text-weight-medium">
             สถานภาพการมีชีวิต
           </div>
@@ -596,7 +596,7 @@ onMounted(async () => {
       </q-toolbar>
 
       <q-card bordered class="bg-grey-1 q-gutter-md q-ma-none q-pb-md">
-        <div class="row items-center">
+        <div class="row items-start">
           <div class="col-2 text-grey-6 text-weight-medium">
             <div>เลขประจำตัวประชาชน</div>
           </div>
@@ -604,7 +604,7 @@ onMounted(async () => {
             {{ motherData.citizenId ? motherData.citizenId : "-" }}
           </div>
         </div>
-        <div class="row items-center">
+        <div class="row items-start">
           <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
           <div class="col-6">
             {{
@@ -621,7 +621,7 @@ onMounted(async () => {
             {{ motherData.job ? motherData.job : "-" }}
           </div>
         </div>
-        <div class="row items-center">
+        <div class="row items-start">
           <div class="col-2 text-grey-6 text-weight-medium">
             สถานภาพการมีชีวิต
           </div>
@@ -677,12 +677,12 @@ onMounted(async () => {
         class="bg-grey-1 q-pb-md"
         v-if="coupleData.statusMarital"
       >
-        <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center">
+        <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-start">
           <div class="text-weight-medium q-pr-md">คู่สมรส</div>
         </div>
         <q-separator />
         <div class="col-12 q-pa-md q-col-gutter-md">
-          <div class="row items-center">
+          <div class="row items-start">
             <div class="col-2 text-grey-6 text-weight-medium">
               <div>สถานภาพการสมรส</div>
             </div>
@@ -690,7 +690,7 @@ onMounted(async () => {
               {{ coupleData.statusMarital ?? "-" }}
             </div>
           </div>
-          <div class="row items-center">
+          <div class="row items-start">
             <div class="col-2 text-grey-6 text-weight-medium">
               <div>เลขประจำตัวประชาชน</div>
             </div>
@@ -698,7 +698,7 @@ onMounted(async () => {
               {{ coupleData.citizenId ?? "-" }}
             </div>
           </div>
-          <div class="row items-center">
+          <div class="row items-start">
             <div class="col-2 text-grey-6 text-weight-medium">ชื่อ-นามสกุล</div>
             <div class="col-6">
               {{
@@ -715,13 +715,13 @@ onMounted(async () => {
               {{ coupleData.job ?? "-" }}
             </div>
           </div>
-          <div class="row items-center" v-if="coupleData.lastNameOld">
+          <div class="row items-start" v-if="coupleData.lastNameOld">
             <div class="col-2 text-grey-6 text-weight-medium">นามสกุลเดิม</div>
             <div class="col">
               {{ coupleData.lastNameOld }}
             </div>
           </div>
-          <div class="row items-center">
+          <div class="row items-start">
             <div class="col-2 text-grey-6 text-weight-medium">
               สถานภาพการมีชีวิต
             </div>
@@ -761,7 +761,7 @@ onMounted(async () => {
 
       <div v-for="(item, index) in childData" :key="index">
         <q-card bordered class="bg-grey-1 q-pb-md q-mb-sm">
-          <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-center">
+          <div class="col-12 row q-py-sm q-px-md bg-grey-2 items-start">
             <div class="text-weight-medium q-pr-md">
               บุตรคนที่ : {{ index + 1 }}
             </div>
@@ -792,7 +792,7 @@ onMounted(async () => {
           </div>
           <q-separator />
           <div class="col-12 q-pa-md q-col-gutter-md">
-            <div class="row items-center">
+            <div class="row items-start">
               <div class="col-2 text-grey-6 text-weight-medium">
                 <div>เลขประจำตัวประชาชน</div>
               </div>
@@ -800,7 +800,7 @@ onMounted(async () => {
                 {{ item.childrenCitizenId }}
               </div>
             </div>
-            <div class="row items-center">
+            <div class="row items-start">
               <div class="col-2 text-grey-6 text-weight-medium">
                 ชื่อ-นามสกุล
               </div>
@@ -821,7 +821,7 @@ onMounted(async () => {
                 {{ item.childrenCareer }}
               </div>
             </div>
-            <div class="row items-center">
+            <div class="row items-start">
               <div class="col-2 text-grey-6 text-weight-medium">
                 สถานภาพการมีชีวิต
               </div>