diff --git a/src/modules/15_development/components/ProjectDetail.vue b/src/modules/15_development/components/ProjectDetail.vue
index b4bc80565..b9bb2b8b3 100644
--- a/src/modules/15_development/components/ProjectDetail.vue
+++ b/src/modules/15_development/components/ProjectDetail.vue
@@ -64,6 +64,8 @@ const formData = reactive<FormProjectDetail>({
   projectDayHoldActual: null,
   projectNigthHoldActual: null,
   developmentProjectTechniqueActuals: [],
+  projectModalActual: null,
+  projectModalPlanneds: null,
 });
 
 const nodes = ref<any>([
@@ -162,7 +164,7 @@ onMounted(() => {
 
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
-    <div class="row q-pa-md q-col-gutter-sm">
+    <div class="row">
       <div class="col-12">
         <q-select
           dense
@@ -177,260 +179,308 @@ onMounted(() => {
           multiple
         />
       </div>
-      <div class="col-12 col-sm-6 col-md-4">
-        <q-input
-          dense
-          outlined
-          v-model="formData.projectModal"
-          label="จำนวน (รุ่น)"
-          mask="#"
-          reverse-fill-mask
-        />
+    </div>
+
+    <q-card bordered class="col-12 q-my-sm">
+      <div
+        class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
+      >
+        ความสอดคล้องหรือเชื่อมโยงกับยุทธศาสตร์ / แผน
       </div>
+      <q-separator />
 
-      <div class="col-12"><q-separator class="q-my-md" /></div>
+      <q-card-section>
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-6">
+            <q-card bordered class="col-12">
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                ยุทธศาสตร์ / แผน
+              </div>
+              <q-separator />
 
-      <div class="row">
-        <div
-          :class="
-            store.projectStatus === 'FINISH'
-              ? 'col-6 q-col-gutter-sm'
-              : 'col-12 q-col-gutter-sm'
-          "
-        >
-          <div class="col-12 text-bold">รูปแบบโครงการตามแผน</div>
-
-          <div class="col-12 q-py-md">
-            <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
-            <q-option-group
-              :disable="store.projectStatus === 'FINISH'"
-              keep-color
-              color="primary"
-              dense
-              v-model="formData.developmentProjectTechniquePlanneds"
-              :options="projectTechniquesOp"
-              type="checkbox"
-            />
+              <q-card-section class="q-pa-sm">
+                <q-input dense outlined v-model="filter" label="ค้นหา">
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="filter !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="filter = ''"
+                    />
+                    <q-icon v-else name="search" color="grey-5" />
+                  </template>
+                </q-input>
+                <q-tree
+                  dense
+                  :nodes="nodes"
+                  selected-color="primary"
+                  node-key="orgTreeName"
+                  label-key="orgTreeName"
+                  :filter="filter"
+                  :no-results-label="notFound"
+                  :no-nodes-label="noData"
+                  v-model:expanded="expanded"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      clickable
+                      @click.stop="updateSelected(prop.node, '1')"
+                      :active="nodeId == prop.node.orgTreeName"
+                      active-class="my-list-link text-white text-weight-medium bg-primary"
+                      class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                    >
+                      <div>
+                        <div class="text-weight-medium">
+                          {{ prop.node.orgTreeName }}
+                        </div>
+                      </div>
+                    </q-item>
+                  </template>
+                </q-tree>
+              </q-card-section>
+            </q-card>
           </div>
+          <div class="col-6">
+            <q-card bordered class="col-12">
+              <div
+                class="col-xs-12 col-sm-12 text-weight-medium bg-grey-1 q-py-xs q-px-md"
+              >
+                ยุทธศาสตร์ / แผน
+              </div>
+              <q-separator />
 
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-12 col-md-3">
-              <q-checkbox
+              <q-card-section class="q-pa-sm">
+                <q-input dense outlined v-model="filter2" label="ค้นหา">
+                  <template v-slot:append>
+                    <q-icon
+                      v-if="filter2 !== ''"
+                      name="clear"
+                      class="cursor-pointer"
+                      @click="filter2 = ''"
+                    />
+                    <q-icon v-else name="search" color="grey-5" />
+                  </template>
+                </q-input>
+                <q-tree
+                  dense
+                  :nodes="nodes"
+                  node-key="orgTreeName"
+                  label-key="orgTreeName"
+                  :filter="filter2"
+                  :no-results-label="notFound"
+                  :no-nodes-label="noData"
+                  v-model:expanded="expanded2"
+                >
+                  <template v-slot:default-header="prop">
+                    <q-item
+                      clickable
+                      @click.stop="updateSelected(prop.node, '2')"
+                      :active="nodeId2 == prop.node.orgTreeName"
+                      active-class="my-list-link text-white text-weight-medium bg-primary"
+                      class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
+                    >
+                      <div>
+                        <div class="text-weight-medium">
+                          {{ prop.node.orgTreeName }}
+                        </div>
+                      </div>
+                    </q-item>
+                  </template>
+                </q-tree>
+              </q-card-section>
+            </q-card>
+          </div>
+        </div>
+      </q-card-section>
+    </q-card>
+
+    <q-card bordered class="col-12 q-my-sm">
+      <div
+        class="col-xs-12 col-sm-12 text-weight-medium bg-grey-3 q-py-xs q-px-md"
+      >
+        รูปแบบโครงการ
+      </div>
+      <q-separator />
+
+      <q-card-section>
+        <div class="row col-12 q-col-gutter-sm">
+          <div class="col-6 q-col-gutter-sm">
+            <div class="col-12 text-bold">ตามแผน</div>
+
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-12 col-md-3">
+                <q-checkbox
+                  :disable="store.projectStatus === 'FINISH'"
+                  keep-color
+                  color="primary"
+                  dense
+                  value="GO_BLACK"
+                  label="ไป-กลับ"
+                  v-model="formData.isBackPlanned"
+                ></q-checkbox>
+              </div>
+              <div class="col-12 col-md-4">
+                <q-input
+                  :readonly="store.projectStatus === 'FINISH'"
+                  dense
+                  outlined
+                  v-model="formData.projectDayBackPlanned"
+                  label="จำนวน (วัน)"
+                  mask="#"
+                  reverse-fill-mask
+                />
+              </div>
+            </div>
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-12 col-md-3">
+                <q-checkbox
+                  :disable="store.projectStatus === 'FINISH'"
+                  keep-color
+                  color="primary"
+                  dense
+                  value="HOLD"
+                  label="พักค้าง"
+                  v-model="formData.isHoldPlanned"
+                ></q-checkbox>
+              </div>
+              <div class="col-12 col-md-4">
+                <q-input
+                  :readonly="store.projectStatus === 'FINISH'"
+                  dense
+                  outlined
+                  v-model="formData.projectDayHoldPlanned"
+                  label="จำนวน (วัน)"
+                  mask="#"
+                  reverse-fill-mask
+                />
+              </div>
+              <div class="col-12 col-md-4">
+                <q-input
+                  :readonly="store.projectStatus === 'FINISH'"
+                  dense
+                  outlined
+                  v-model="formData.projectNigthHoldPlanned"
+                  label="จำนวน (คืน)"
+                  mask="#"
+                  reverse-fill-mask
+                />
+              </div>
+            </div>
+
+            <div class="col-12 q-py-md">
+              <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
+              <q-option-group
                 :disable="store.projectStatus === 'FINISH'"
                 keep-color
                 color="primary"
                 dense
-                value="GO_BLACK"
-                label="ไป-กลับ"
-                v-model="formData.isBackPlanned"
-              ></q-checkbox>
+                v-model="formData.developmentProjectTechniquePlanneds"
+                :options="projectTechniquesOp"
+                type="checkbox"
+              />
             </div>
-            <div class="col-12 col-md-4">
+
+            <div class="col-12 col-sm-6 col-md-4">
               <q-input
-                :readonly="store.projectStatus === 'FINISH'"
+                :disable="store.projectStatus === 'FINISH'"
                 dense
                 outlined
-                v-model="formData.projectDayBackPlanned"
-                label="จำนวน (วัน)"
+                v-model="formData.projectModalPlanneds"
+                label="จำนวน (รุ่น)"
                 mask="#"
                 reverse-fill-mask
               />
             </div>
           </div>
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-12 col-md-3">
-              <q-checkbox
-                :disable="store.projectStatus === 'FINISH'"
+
+          <div
+            v-if="store.projectStatus === 'FINISH'"
+            class="col-6 q-col-gutter-sm"
+          >
+            <div class="col-12 text-bold">รูปแบบโครงการตามจริง</div>
+            <div class="col-12 q-py-md">
+              <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
+              <q-option-group
                 keep-color
                 color="primary"
                 dense
-                value="HOLD"
-                label="พักค้าง"
-                v-model="formData.isHoldPlanned"
-              ></q-checkbox>
-            </div>
-            <div class="col-12 col-md-4">
-              <q-input
-                :readonly="store.projectStatus === 'FINISH'"
-                dense
-                outlined
-                v-model="formData.projectDayHoldPlanned"
-                label="จำนวน (วัน)"
-                mask="#"
-                reverse-fill-mask
+                v-model="formData.developmentProjectTechniqueActuals"
+                :options="projectTechniquesOp"
+                type="checkbox"
               />
             </div>
-            <div class="col-12 col-md-4">
+
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-md-3">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  value="GO_BLACK"
+                  label="ไป-กลับ"
+                  v-model="formData.isBackActual"
+                ></q-checkbox>
+              </div>
+              <div class="col-12 col-md-4">
+                <q-input
+                  dense
+                  outlined
+                  v-model="formData.projectDayBackActual"
+                  label="จำนวน (วัน)"
+                  mask="#"
+                  reverse-fill-mask
+                />
+              </div>
+            </div>
+            <div class="row col-12 q-col-gutter-sm">
+              <div class="col-12 col-md-3">
+                <q-checkbox
+                  keep-color
+                  color="primary"
+                  dense
+                  value="HOLD"
+                  label="พักค้าง"
+                  v-model="formData.isHoldActual"
+                ></q-checkbox>
+              </div>
+              <div class="col-12 col-md-4">
+                <q-input
+                  dense
+                  outlined
+                  v-model="formData.projectDayHoldActual"
+                  label="จำนวน (วัน)"
+                  mask="#"
+                  reverse-fill-mask
+                />
+              </div>
+              <div class="col-12 col-md-4">
+                <q-input
+                  dense
+                  outlined
+                  v-model="formData.projectNigthHoldActual"
+                  label="จำนวน (คืน)"
+                  mask="#"
+                  reverse-fill-mask
+                />
+              </div>
+            </div>
+            <div class="col-12 col-sm-6 col-md-4">
               <q-input
-                :readonly="store.projectStatus === 'FINISH'"
                 dense
                 outlined
-                v-model="formData.projectNigthHoldPlanned"
-                label="จำนวน (คืน)"
+                v-model="formData.projectModalActual"
+                label="จำนวน (รุ่น)"
                 mask="#"
                 reverse-fill-mask
               />
             </div>
           </div>
         </div>
+      </q-card-section>
+    </q-card>
 
-        <div
-          v-if="store.projectStatus === 'FINISH'"
-          class="col-6 q-col-gutter-sm"
-        >
-          <div class="col-12 text-bold">รูปแบบโครงการตามจริง</div>
-          <div class="col-12 q-py-md">
-            <q-label class="q-mb-sm">เทคนิควิธีการที่ใช้ในการพัฒนา</q-label>
-            <q-option-group
-              keep-color
-              color="primary"
-              dense
-              v-model="formData.developmentProjectTechniqueActuals"
-              :options="projectTechniquesOp"
-              type="checkbox"
-            />
-          </div>
-
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-md-3">
-              <q-checkbox
-                keep-color
-                color="primary"
-                dense
-                value="GO_BLACK"
-                label="ไป-กลับ"
-                v-model="formData.isBackActual"
-              ></q-checkbox>
-            </div>
-            <div class="col-12 col-md-4">
-              <q-input
-                dense
-                outlined
-                v-model="formData.projectDayBackActual"
-                label="จำนวน (วัน)"
-                mask="#"
-                reverse-fill-mask
-              />
-            </div>
-          </div>
-          <div class="row col-12 q-col-gutter-sm">
-            <div class="col-12 col-md-3">
-              <q-checkbox
-                keep-color
-                color="primary"
-                dense
-                value="HOLD"
-                label="พักค้าง"
-                v-model="formData.isHoldActual"
-              ></q-checkbox>
-            </div>
-            <div class="col-12 col-md-4">
-              <q-input
-                dense
-                outlined
-                v-model="formData.projectDayHoldActual"
-                label="จำนวน (วัน)"
-                mask="#"
-                reverse-fill-mask
-              />
-            </div>
-            <div class="col-12 col-md-4">
-              <q-input
-                dense
-                outlined
-                v-model="formData.projectNigthHoldActual"
-                label="จำนวน (คืน)"
-                mask="#"
-                reverse-fill-mask
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <q-separator />
-    <div class="row">
-      <div class="col-6 q-pa-md">
-        <q-input dense outlined v-model="filter" label="ค้นหา">
-          <template v-slot:append>
-            <q-icon
-              v-if="filter !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="filter = ''"
-            />
-            <q-icon v-else name="search" color="grey-5" />
-          </template>
-        </q-input>
-        <q-tree
-          dense
-          :nodes="nodes"
-          selected-color="primary"
-          node-key="orgTreeName"
-          label-key="orgTreeName"
-          :filter="filter"
-          :no-results-label="notFound"
-          :no-nodes-label="noData"
-          v-model:expanded="expanded"
-        >
-          <template v-slot:default-header="prop">
-            <q-item
-              clickable
-              @click.stop="updateSelected(prop.node, '1')"
-              :active="nodeId == prop.node.orgTreeName"
-              active-class="my-list-link text-white text-weight-medium bg-primary"
-              class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-            >
-              <div>
-                <div class="text-weight-medium">
-                  {{ prop.node.orgTreeName }}
-                </div>
-              </div>
-            </q-item>
-          </template>
-        </q-tree>
-      </div>
-      <div class="col-6 q-pa-md">
-        <q-input dense outlined v-model="filter2" label="ค้นหา">
-          <template v-slot:append>
-            <q-icon
-              v-if="filter2 !== ''"
-              name="clear"
-              class="cursor-pointer"
-              @click="filter2 = ''"
-            />
-            <q-icon v-else name="search" color="grey-5" />
-          </template>
-        </q-input>
-        <q-tree
-          dense
-          :nodes="nodes"
-          node-key="orgTreeName"
-          label-key="orgTreeName"
-          :filter="filter2"
-          :no-results-label="notFound"
-          :no-nodes-label="noData"
-          v-model:expanded="expanded2"
-        >
-          <template v-slot:default-header="prop">
-            <q-item
-              clickable
-              @click.stop="updateSelected(prop.node, '2')"
-              :active="nodeId2 == prop.node.orgTreeName"
-              active-class="my-list-link text-white text-weight-medium bg-primary"
-              class="row col-12 items-center text-dark q-py-xs q-pl-sm rounded-borders my-list"
-            >
-              <div>
-                <div class="text-weight-medium">
-                  {{ prop.node.orgTreeName }}
-                </div>
-              </div>
-            </q-item>
-          </template>
-        </q-tree>
-      </div>
-    </div>
     <q-separator />
     <div class="text-right q-pa-sm">
       <q-btn
diff --git a/src/modules/15_development/interface/index/Main.ts b/src/modules/15_development/interface/index/Main.ts
index e5a713896..85250e452 100644
--- a/src/modules/15_development/interface/index/Main.ts
+++ b/src/modules/15_development/interface/index/Main.ts
@@ -77,6 +77,8 @@ interface FormProjectDetail {
   projectDayHoldActual: string | null;
   projectNigthHoldActual: string | null;
   developmentProjectTechniqueActuals: [];
+  projectModalActual?: string | null;
+  projectModalPlanneds?: string | null;
 }
 
 export type {