diff --git a/src/modules/15_development/components/history/AddPage.vue b/src/modules/15_development/components/history/AddPage.vue
index bb9bd5b78..1ca3c9c8e 100644
--- a/src/modules/15_development/components/history/AddPage.vue
+++ b/src/modules/15_development/components/history/AddPage.vue
@@ -15,6 +15,9 @@ const store = useDevelopmentDataStore();
 const modalDialog = ref<boolean>(false);
 const typeSelect = ref<string>("");
 
+const order = ref<string>('')
+const dateOrder = ref<string>('')
+
 /** ตัวแปรข้อมูลข้าราชการ */
 const formMain = reactive<FormAddHistory>({
   citizenId: "1XXXXXXXXXXXX", //เลขประจําตัวประชาชน
@@ -178,6 +181,15 @@ function openDialog(select: string) {
   modalDialog.value = true;
   typeSelect.value = select;
 }
+
+function getClass() {
+  return "inputgreen";
+}
+/** save */
+function onSubmit(){
+  
+}
+
 </script>
 <template>
   <div class="toptitle text-dark">
@@ -195,113 +207,160 @@ function openDialog(select: string) {
       >เพิ่มประวัติการฝึกอบรม/ดูงานของข้าราชการกรุงเทพมหานครสามัญ</span
     >
   </div>
-  <q-card flat bordered class="q-pa-md">
-    <q-card flat bordered style="border: 1px solid #d6dee1">
-      <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
-        ข้อมูลข้าราชการ
+  <q-card flat bordered>
+    <q-form greedy @submit.prevent @validation-success="onSubmit">
+    <q-card-section>
+      <q-card flat bordered style="border: 1px solid #d6dee1">
+        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+          ข้อมูลข้าราชการ
 
-        <q-btn
-          flat
-          class="btn-fixed-width"
-          color="teal"
-          label="เลือกข้าราชการ"
-          icon="add"
-          @click="openDialog('GOV')"
-        />
-      </div>
-      <div class="col-12"><q-separator /></div>
-      <div class="row q-col-gutter-md q-pa-md">
-        <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-          <div
-            class="row"
-            v-for="(field, index) in Object.keys(fieldLabels).slice(0, 4)"
-            :key="index"
-          >
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-6 text-weight-medium">{{
-                fieldLabels[field as keyof typeof fieldLabels]
-              }}</span>
+          <q-btn
+            flat
+            class="btn-fixed-width"
+            color="teal"
+            label="เลือกข้าราชการ"
+            icon="add"
+            @click="openDialog('GOV')"
+          />
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row q-col-gutter-md q-pa-md">
+          <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+            <div
+              class="row"
+              v-for="(field, index) in Object.keys(fieldLabels).slice(0, 4)"
+              :key="index"
+            >
+              <div class="col-12 col-sm-12 col-md-4">
+                <span class="text-grey-6 text-weight-medium">{{
+                  fieldLabels[field as keyof typeof fieldLabels]
+                }}</span>
+              </div>
+              <div class="col-12 col-sm-12 col-md-8">
+                <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+              </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+          </div>
+
+          <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+            <div
+              class="row"
+              v-for="(field, index) in Object.keys(fieldLabels).slice(4, 7)"
+              :key="index"
+            >
+              <div class="col-12 col-sm-12 col-md-4">
+                <span class="text-grey-6 text-weight-medium">{{
+                  fieldLabels[field as keyof typeof fieldLabels]
+                }}</span>
+              </div>
+              <div class="col-12 col-sm-12 col-md-8">
+                <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+              </div>
             </div>
           </div>
         </div>
+      </q-card>
 
-        <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-          <div
-            class="row"
-            v-for="(field, index) in Object.keys(fieldLabels).slice(4, 7)"
-            :key="index"
-          >
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-6 text-weight-medium">{{
-                fieldLabels[field as keyof typeof fieldLabels]
-              }}</span>
+      <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
+        <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
+          ข้อมูลโครงการ
+          <q-btn
+            flat
+            class="btn-fixed-width"
+            color="teal"
+            label="เลือกโครงการ"
+            icon="add"
+            @click="openDialog('project')"
+          />
+        </div>
+        <div class="col-12"><q-separator /></div>
+        <div class="row q-col-gutter-md q-pa-md">
+          <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+            <div
+              class="row"
+              v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
+                0,
+                5
+              )"
+              :key="index"
+            >
+              <div class="col-12 col-sm-12 col-md-4">
+                <span class="text-grey-6 text-weight-medium">{{
+                  fieldLabelsProject[field as keyof typeof fieldLabelsProject]
+                }}</span>
+              </div>
+              <div class="col-12 col-sm-12 col-md-8">
+                <span>{{
+                  formMainProject[field] ? formMainProject[field] : "-"
+                }}</span>
+              </div>
             </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{ formMain[field] ? formMain[field] : "-" }}</span>
+          </div>
+
+          <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
+            <div
+              class="row"
+              v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
+                5,
+                10
+              )"
+              :key="index"
+            >
+              <div class="col-12 col-sm-12 col-md-4">
+                <span class="text-grey-6 text-weight-medium">{{
+                  fieldLabelsProject[field as keyof typeof fieldLabelsProject]
+                }}</span>
+              </div>
+              <div class="col-12 col-sm-12 col-md-8">
+                <span>{{
+                  formMainProject[field] ? formMainProject[field] : "-"
+                }}</span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </q-card>
+      </q-card>
 
-    <q-card flat bordered class="q-mt-md" style="border: 1px solid #d6dee1">
-      <div class="col-12 text-weight-bold bg-grey-1 q-py-sm q-px-md">
-        ข้อมูลโครงการ
-        <q-btn
-          flat
-          class="btn-fixed-width"
-          color="teal"
-          label="เลือกโครงการ"
-          icon="add"
-          @click="openDialog('project')"
-        />
-      </div>
-      <div class="col-12"><q-separator /></div>
-      <div class="row q-col-gutter-md q-pa-md">
-        <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-          <div
-            class="row"
-            v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
-              0,
-              5
-            )"
-            :key="index"
-          >
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-6 text-weight-medium">{{
-                fieldLabelsProject[field as keyof typeof fieldLabelsProject]
-              }}</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{ formMainProject[field] ? formMainProject[field] : "-" }}</span>
-            </div>
-          </div>
+      <div class="row q-col-gutter-sm q-mt-md">
+        <div class="col-3">
+          <q-input
+            label="เลขที่คำสั่ง/เลขที่หนังสืออนุมัติ"
+            v-model="order"
+            dense
+            outlined
+            :class="getClass()"
+            hide-bottom-space
+            :rules="[(val:string) => !!val || `${'กรุณากรอกเลขที่คำสั่ง/เลขที่หนังสืออนุมัติ'}`,]"
+          />
         </div>
-
-        <div class="col-12 col-sm-6 col-md-6 q-gutter-y-sm">
-          <div
-            class="row"
-            v-for="(field, index) in Object.keys(fieldLabelsProject).slice(
-              5,
-              10
-            )"
-            :key="index"
-          >
-            <div class="col-12 col-sm-12 col-md-4">
-              <span class="text-grey-6 text-weight-medium">{{
-                fieldLabelsProject[field as keyof typeof fieldLabelsProject]
-              }}</span>
-            </div>
-            <div class="col-12 col-sm-12 col-md-8">
-              <span>{{ formMainProject[field] ? formMainProject[field] : "-" }}</span>
-            </div>
-          </div>
+        <div class="col-3">
+          <q-input
+            label="คำสั่งลงวันที่/หนังสืออนุมัติลงวันที่"
+            v-model="dateOrder"
+            dense
+            outlined
+            :class="getClass()"
+            hide-bottom-space
+            :rules="[(val:string) => !!val || `${'กรุณากรอกคำสั่งลงวันที่/หนังสืออนุมัติลงวันที่'}`,]"
+          />
         </div>
       </div>
-    </q-card>
+    </q-card-section>
+    <q-separator />
+    <div class="text-right q-pa-sm">
+      <q-btn
+        dense
+        unelevated
+        label="บันทึก"
+        id="onSubmit"
+        type="submit"
+        color="public"
+        class="q-px-md"
+      >
+        <q-tooltip>บันทึกข้อมูล</q-tooltip>
+      </q-btn>
+    </div>
+  </q-form>
   </q-card>
 
   <Dialog v-model:modal="modalDialog" v-model:type="typeSelect" />