diff --git a/src/modules/06_evaluate/components/viewstep/viewStep1.vue b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
index ccc8c19..99cebc2 100644
--- a/src/modules/06_evaluate/components/viewstep/viewStep1.vue
+++ b/src/modules/06_evaluate/components/viewstep/viewStep1.vue
@@ -360,7 +360,7 @@ onMounted(async () => {
                 label="อายุราชการ"
               />
             </div>
-            <div class="col-xs-12 col-sm-9">
+            <div class="col-xs-12 col-sm-9 text-html">
               <q-input
                 borderless
                 readonly
diff --git a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
index de67f8c..bab7875 100644
--- a/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
+++ b/src/modules/08_KPI/components/Tab/Dialog/DialogGovernment.vue
@@ -19,6 +19,7 @@ const {
   messageError,
   findPosMasterNoOld,
   findOrgNameOld,
+  findOrgNameOldHtml,
   date2Thai,
 } = mixin;
 
@@ -113,7 +114,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "organization",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-    format: (val, row) => findOrgNameOld(row),
   },
   {
     name: "organization",
@@ -172,7 +172,6 @@ const columns = ref<QTableProps["columns"]>([
     field: "commandNo",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
-   
   },
 ]);
 
@@ -266,6 +265,12 @@ watch(
                     <div v-if="col.name === 'no'">
                       {{ props.rowIndex + 1 }}
                     </div>
+                    <div
+                      v-else-if="col.name == 'organizationPositionOld'"
+                      class="text-html"
+                    >
+                      {{ props.row ? findOrgNameOldHtml(props.row) : "-" }}
+                    </div>
                     <div v-else>
                       {{ col.value ? col.value : "-" }}
                     </div>
diff --git a/src/modules/08_KPI/views/form.vue b/src/modules/08_KPI/views/form.vue
index d5b617a..bd71b83 100644
--- a/src/modules/08_KPI/views/form.vue
+++ b/src/modules/08_KPI/views/form.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, computed } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { useQuasar } from "quasar";
 import genReport from "@/plugins/genreport";
@@ -37,6 +37,7 @@ const {
   dialogConfirm,
   success,
   findOrgName,
+  findOrgNameHtml,
   dialogRemove,
 } = mixin;
 const route = useRoute();
@@ -462,7 +463,7 @@ async function fetchProfileEvaluator(id: string) {
       evaluator.value.posLevelName = data.posLevelName;
       evaluator.value.isPosmasterAct = data.isPosmasterAct;
       evaluator.value.posmasterAct = data.posmasterAct;
-      evaluator.value.org = await findOrgName(data);
+      evaluator.value.org = await findOrgNameHtml(data);
     })
     .catch((e) => {
       messageError($q, e);
@@ -637,6 +638,16 @@ function downloadFile(fileName: string) {
     });
 }
 
+const sizeImg = ref<any>();
+
+function onResize(size: { width: any; height: any }) {
+  if (size.height <= 156) {
+    sizeImg.value = "80px";
+  } else if (size.height > 156) {
+    sizeImg.value = "120px";
+  }
+}
+
 onMounted(async () => {
   showLoader();
   store.isUpdate = false;
@@ -672,7 +683,7 @@ onMounted(async () => {
       <div class="col-12">
         <q-card bordered flat class="relative-position">
           <div class="row justify-center q-pa-md" v-if="!$q.screen.gt.xs">
-            <q-avatar size="80px">
+            <q-avatar :size="sizeImg">
               <q-img
                 :src="store.dataEvaluation.avartar"
                 v-if="store.dataEvaluation.avartar !== undefined"
@@ -680,13 +691,12 @@ onMounted(async () => {
               <q-img src="@/assets/avatar_user.jpg" v-else />
             </q-avatar>
           </div>
-
           <div
             v-if="$q.screen.gt.xs"
             class="absolute-center-left"
             style="left: 2%; top: 50%; transform: translateY(-50%)"
           >
-            <q-avatar size="80px">
+            <q-avatar :size="sizeImg">
               <q-img
                 :src="store.dataEvaluation.avartar"
                 v-if="store.dataEvaluation.avartar !== undefined"
@@ -695,6 +705,8 @@ onMounted(async () => {
             </q-avatar>
           </div>
           <div class="row col-12">
+            <q-resize-observer @resize="onResize" />
+
             <div class="row items-center col-12 q-pa-sm">
               <div
                 class="col-12"
@@ -707,8 +719,8 @@ onMounted(async () => {
                         ? `${store.dataEvaluation.prefix}${store.dataEvaluation.firstName} ${store.dataEvaluation.lastName}`
                         : ""
                     }}</span>
-                    <p class="q-mb-none">
-                      {{ findOrgName(store.dataEvaluation) }}
+                    <p class="q-mb-none text-html">
+                      {{ findOrgNameHtml(store.dataEvaluation) }}
                     </p>
                   </div>
                   <q-space v-if="$q.screen.gt.xs" />
@@ -1187,7 +1199,7 @@ onMounted(async () => {
   </q-dialog>
 
   <q-dialog v-model="modalEvaluatorDetail" persistent>
-    <q-card style="width: 700px; max-width: 80vw; min-height: 40vh">
+    <q-card style="width: 60vw; max-width: 70vw; min-height: 40vh">
       <DialogHeader
         :tittle="topic"
         :close="() => (modalEvaluatorDetail = false)"
@@ -1223,7 +1235,7 @@ onMounted(async () => {
                   evaluator.posExecutiveName ? evaluator.posExecutiveName : "-"
                 }}
               </div>
-              <div class="col-3">
+              <div class="col-3 text-html">
                 {{ evaluator.org ? evaluator.org : "-" }}
               </div>
             </div>
diff --git a/src/modules/10_registry/02_Government/01_Government.vue b/src/modules/10_registry/02_Government/01_Government.vue
index e251927..153d08b 100644
--- a/src/modules/10_registry/02_Government/01_Government.vue
+++ b/src/modules/10_registry/02_Government/01_Government.vue
@@ -431,7 +431,7 @@ onMounted(async () => {
         <div class="col-12 col-sm-12 col-md-6">
           <div class="row q-col-gutter-y-sm">
             <div class="col-5 text-grey-6 text-weight-medium">สังกัด</div>
-            <div class="col-7">
+            <div class="col-7 text-html">
               {{ formData.org ? formData.org : "-" }}
             </div>
             <div class="col-5 text-grey-6 text-weight-medium">
diff --git a/src/modules/10_registry/02_Government/07_Position.vue b/src/modules/10_registry/02_Government/07_Position.vue
index 2fbaa00..c6080e0 100644
--- a/src/modules/10_registry/02_Government/07_Position.vue
+++ b/src/modules/10_registry/02_Government/07_Position.vue
@@ -30,6 +30,7 @@ const {
   onSearchDataTable,
   formatDatePosition,
   findOrgName,
+  findOrgNameHtml,
 } = mixin;
 
 const idByRow = ref<string>("");
@@ -543,9 +544,20 @@ onMounted(async () => {
               </div>
               <div
                 v-else-if="col.name == 'organization'"
-                class="table_ellipsis"
+                class="text-html"
+                style="width: 300px"
               >
-                {{ col.value ? col.value : "-" }}
+                {{
+                  props.row
+                    ? findOrgNameHtml({
+                        root: props.row.orgRoot,
+                        child1: props.row.orgChild1,
+                        child2: props.row.orgChild2,
+                        child3: props.row.orgChild3,
+                        child4: props.row.orgChild4,
+                      })
+                    : "-"
+                }}
               </div>
               <div v-else>
                 {{ col.value ? col.value : "-" }}
@@ -588,7 +600,25 @@ onMounted(async () => {
                       col.label
                     }}</q-item-label>
                   </q-item-section>
-                  <q-item-section class="fix_top">
+                  <q-item-section
+                    v-if="col.name == 'organization'"
+                    class="fix_top text-html"
+                  >
+                    <q-item-label class="text-dark text-weight-medium">
+                      {{
+                        props.row
+                          ? findOrgNameHtml({
+                              root: props.row.orgRoot,
+                              child1: props.row.orgChild1,
+                              child2: props.row.orgChild2,
+                              child3: props.row.orgChild3,
+                              child4: props.row.orgChild4,
+                            })
+                          : "-"
+                      }}</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section v-else class="fix_top">
                     <q-item-label class="text-dark text-weight-medium">{{
                       col.value ? col.value : "-"
                     }}</q-item-label>
diff --git a/src/modules/10_registry/03_Salary/01_Salary.vue b/src/modules/10_registry/03_Salary/01_Salary.vue
index 7917069..267ac27 100644
--- a/src/modules/10_registry/03_Salary/01_Salary.vue
+++ b/src/modules/10_registry/03_Salary/01_Salary.vue
@@ -23,6 +23,7 @@ const {
   date2Thai,
   onSearchDataTable,
   findOrgName,
+  findOrgNameHtml,
 } = mixin;
 
 const idByRow = ref<string>("");
@@ -724,8 +725,18 @@ onMounted(async () => {
             <div v-else-if="col.name == 'status'">
               {{ props.row.status ? props.row.status : "-" }}
             </div>
-            <div v-else-if="col.name == 'organization'" class="table_ellipsis">
-              {{ col.value ? col.value : "-" }}
+            <div v-else-if="col.name == 'organization'" class="text-html">
+              {{
+                props.row
+                  ? findOrgNameHtml({
+                      root: props.row.orgRoot,
+                      child1: props.row.orgChild1,
+                      child2: props.row.orgChild2,
+                      child3: props.row.orgChild3,
+                      child4: props.row.orgChild4,
+                    })
+                  : "-"
+              }}
             </div>
             <div v-else>
               {{ col.value ? col.value : "-" }}
@@ -768,7 +779,26 @@ onMounted(async () => {
                     col.label
                   }}</q-item-label>
                 </q-item-section>
-                <q-item-section class="fix_top">
+                <q-item-section
+                  v-if="col.name == 'organization'"
+                  class="fix_top text-html"
+                >
+                  <q-item-label class="text-dark text-weight-medium">
+                    {{
+                      props.row
+                        ? findOrgNameHtml({
+                            root: props.row.orgRoot,
+                            child1: props.row.orgChild1,
+                            child2: props.row.orgChild2,
+                            child3: props.row.orgChild3,
+                            child4: props.row.orgChild4,
+                          })
+                        : "-"
+                    }}</q-item-label
+                  >
+                </q-item-section>
+
+                <q-item-section v-else class="fix_top">
                   <q-item-label class="text-dark text-weight-medium">{{
                     col.value ? col.value : "-"
                   }}</q-item-label>
diff --git a/src/modules/10_registry/Dialog/DialogHistory.vue b/src/modules/10_registry/Dialog/DialogHistory.vue
index f8a7f12..0b67b99 100644
--- a/src/modules/10_registry/Dialog/DialogHistory.vue
+++ b/src/modules/10_registry/Dialog/DialogHistory.vue
@@ -7,7 +7,7 @@ import { useCounterMixin } from "@/stores/mixin";
 
 const type = ref<string>("");
 const mixin = useCounterMixin();
-const { date2Thai, onSearchDataTable } = mixin;
+const { date2Thai, onSearchDataTable, findOrgNameHtml } = mixin;
 const modal = defineModel<boolean>("modal", { required: true });
 const title = defineModel<string>("title", { required: true });
 
@@ -158,6 +158,19 @@ watch(
                 <div v-else-if="col.name == 'status' && type == 'Leave'">
                   {{ props.row.status ? statusLeave(props.row.status) : "-" }}
                 </div>
+                <div v-else-if="col.name == 'organization'">
+                  {{
+                    props.row
+                      ? findOrgNameHtml({
+                          root: props.row.orgRoot,
+                          child1: props.row.orgChild1,
+                          child2: props.row.orgChild2,
+                          child3: props.row.orgChild3,
+                          child4: props.row.orgChild4,
+                        })
+                      : "-"
+                  }}
+                </div>
                 <div v-else>
                   {{ col.value ? col.value : "-" }}
                 </div>
diff --git a/src/stores/mixin.ts b/src/stores/mixin.ts
index 7138c98..e232b31 100644
--- a/src/stores/mixin.ts
+++ b/src/stores/mixin.ts
@@ -1102,7 +1102,6 @@ export const useCounterMixin = defineStore("mixin", () => {
       return "";
     }
   }
-
   function findOrgNameOld(obj: any) {
     if (obj) {
       let name =
@@ -1139,6 +1138,114 @@ export const useCounterMixin = defineStore("mixin", () => {
     }
   }
 
+  function findOrgNameHtml(obj: any) {
+    if (obj) {
+      let name =
+        obj.child4 != null && obj.child3 != null
+          ? obj.child4 + (obj.child3 ? "\n" : "")
+          : obj.child4 != null
+          ? obj.child4
+          : "";
+
+      name +=
+        obj.child3 != null && obj.child2 != null
+          ? obj.child3 + (obj.child2 ? "\n" : "")
+          : obj.child3 !== null
+          ? obj.child3
+          : "";
+
+      name +=
+        obj.child2 != null && obj.child1 != null
+          ? obj.child2 + (obj.child1 ? "\n" : "")
+          : obj.child2 != null
+          ? obj.child2
+          : "";
+
+      name +=
+        obj.child1 != null && obj.root != null
+          ? obj.child1 + (obj.root ? "\n" : "")
+          : obj.child1 != null
+          ? obj.child1
+          : "";
+      name += obj.root != null ? obj.root : "";
+      return name == "" ? "-" : name;
+    } else {
+      return "";
+    }
+  }
+
+  function findOrgNameOldHtml(obj: any) {
+    if (obj) {
+      let name =
+        obj.child4Old != null && obj.child3Old != null
+          ? obj.child4Old + (obj.child3Old ? "\n" : "")
+          : obj.child4Old != null
+          ? obj.child4Old
+          : "";
+
+      name +=
+        obj.child3Old != null && obj.child2Old != null
+          ? obj.child3Old + (obj.child2Old ? "\n" : "")
+          : obj.child3Old !== null
+          ? obj.child3Old
+          : "";
+
+      name +=
+        obj.child2Old != null && obj.child1Old != null
+          ? obj.child2Old + (obj.child1Old ? "\n" : "")
+          : obj.child2Old != null
+          ? obj.child2Old
+          : "";
+
+      name +=
+        obj.child1Old != null && obj.rootOld != null
+          ? obj.child1Old + (obj.rootOld ? "\n" : "")
+          : obj.child1Old != null
+          ? obj.child1Old
+          : "";
+      name += obj.rootOld != null ? obj.rootOld : "";
+      return name == "" ? "-" : name;
+    } else {
+      return "";
+    }
+  }
+
+  function findOrgChildNameHtml(obj: any) {
+    if (obj) {
+      let name =
+        obj.orgChild4Name != null && obj.orgChild3Name != null
+          ? obj.orgChild4Name + (obj.orgChild3Name ? "\n" : "")
+          : obj.orgChild4Name != null
+          ? obj.orgChild4Name
+          : "";
+
+      name +=
+        obj.orgChild3Name != null && obj.orgChild2Name != null
+          ? obj.orgChild3Name + (obj.orgChild2Name ? "\n" : "")
+          : obj.orgChild3Name !== null
+          ? obj.orgChild3Name
+          : "";
+
+      name +=
+        obj.orgChild2Name != null && obj.orgChild1Name != null
+          ? obj.orgChild2Name + (obj.orgChild1Name ? "\n" : "")
+          : obj.orgChild2Name != null
+          ? obj.orgChild2Name
+          : "";
+
+      name +=
+        obj.orgChild1Name != null && obj.orgRootName != null
+          ? obj.orgChild1Name + (obj.orgRootName ? "\n" : "")
+          : obj.orgChild1Name != null
+          ? obj.orgChild1Name
+          : "";
+      name += obj.orgRootName != null ? obj.orgRootName : "";
+      return name == "" ? "-" : name;
+    } else {
+      return "";
+    }
+  }
+
   function onSearchDataTable(keyword: string, data: any[], columns: any[]) {
     const searchText = keyword.trim().toLowerCase();
 
@@ -1229,5 +1336,9 @@ export const useCounterMixin = defineStore("mixin", () => {
     formatDatePosition,
     convertDateToAPI,
     convertDatetimeToAPI,
+
+    findOrgNameHtml,
+    findOrgNameOldHtml,
+    findOrgChildNameHtml,
   };
 });
diff --git a/src/style/quasar-variables.sass b/src/style/quasar-variables.sass
index d628cea..3ae97d0 100644
--- a/src/style/quasar-variables.sass
+++ b/src/style/quasar-variables.sass
@@ -49,7 +49,8 @@ $activetab: #4a5568
     background: $activetab !important
 .bg-white-btn
     background: #ffffff20 !important
-
+.text-html
+    white-space: pre-line
 .inputgreen .q-field__prefix,
 .inputgreen .q-field__suffix,
 .inputgreen .q-field__input,