diff --git a/src/assets/manual/06_employeehistory/1_main/6-21.png b/src/assets/manual/06_employeehistory/1_main/6-21.png
index fb6a9776..2e215af6 100644
Binary files a/src/assets/manual/06_employeehistory/1_main/6-21.png and b/src/assets/manual/06_employeehistory/1_main/6-21.png differ
diff --git a/src/assets/manual/06_employeehistory/1_main/6-31.png b/src/assets/manual/06_employeehistory/1_main/6-31.png
index 76512dcf..0c085f97 100644
Binary files a/src/assets/manual/06_employeehistory/1_main/6-31.png and b/src/assets/manual/06_employeehistory/1_main/6-31.png differ
diff --git a/src/assets/manual/06_employeehistory/1_main/ไม่มีชื่อ 2.png b/src/assets/manual/06_employeehistory/1_main/ไม่มีชื่อ 2.png
new file mode 100644
index 00000000..9856d0d1
Binary files /dev/null and b/src/assets/manual/06_employeehistory/1_main/ไม่มีชื่อ 2.png differ
diff --git a/src/assets/manual/06_employeehistory/1_main/ไม่มีชื่อ.png b/src/assets/manual/06_employeehistory/1_main/ไม่มีชื่อ.png
new file mode 100644
index 00000000..80d41aa0
Binary files /dev/null and b/src/assets/manual/06_employeehistory/1_main/ไม่มีชื่อ.png differ
diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index c168c862..7ba5d4e8 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -83,6 +83,17 @@ const menuList = readonly<any[]>([
 				label: "ระบบการสรรหาบุคคล",
 				path: "/recruitmain",
 			},
+			{
+				key: 2.6,
+				label: "ระบบทะเบียนประวัติลูกจ้าง",
+				path: "/Employeehistorymain",
+			},
+			{
+				key: 2.7,
+				label: "ระบบออกคำสั่ง",
+				path: "commandsmain",
+			},
+
 		],
 	},
 ])
@@ -507,5 +518,7 @@ const tabList = readonly<any[]>([
 	},
 ])
 
+
+
 export { menuList, tabList, tabListLogin, tabListDatamain, tabStructuremain, tabRegistration, tabRecruit }
 export type { ScrollType, tabType, menuType, notiType, optionType }
diff --git a/src/modules/01_manual/components/1_login/view.vue b/src/modules/01_manual/components/1_login/view.vue
index 367562a7..7a3af585 100644
--- a/src/modules/01_manual/components/1_login/view.vue
+++ b/src/modules/01_manual/components/1_login/view.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Mainlogin from "../1_login/01_Main.vue";
+import Mainlogin1 from "../1_login/01_Main.vue";
 import login from "../1_login/02_login.vue";
 import Password from "../1_login/03_Password.vue";
 import newuser from "../1_login/04_newuser.vue";
@@ -21,7 +21,7 @@ import noti from "../1_login/06_noti.vue";
         class="row col-12 information"
         style="padding-bottom: 60px"
       >
-        <Mainlogin />
+        <Mainlogin1 />
       </div>
       <div
         id="login"
diff --git a/src/modules/01_manual/components/5_recruitment/view.vue b/src/modules/01_manual/components/5_recruitment/view.vue
index 6fb42bdd..ddc3709f 100644
--- a/src/modules/01_manual/components/5_recruitment/view.vue
+++ b/src/modules/01_manual/components/5_recruitment/view.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import recruitmain from "./51_main.vue";
-import recruitSetting from "./52_setting.vue";
-import recruitManage from "./53_managecompet.vue";
-import recruitstati from "./54_staticompet.vue";
-import recruitQualifiers from "./55_qualifiers.vue";
-import recruitDisabilities from "./56_disabilities.vue";
-import recruitSelection from "./57_selection.vue";
+import recruitmain from "@/modules/01_manual/components/5_recruitment/51_main.vue";
+import recruitSetting from "@/modules/01_manual/components/5_recruitment/52_setting.vue";
+import recruitManage from "@/modules/01_manual/components/5_recruitment/53_managecompet.vue";
+import recruitstati from "@/modules/01_manual/components/5_recruitment/54_staticompet.vue";
+import recruitQualifiers from "@/modules/01_manual/components/5_recruitment/55_qualifiers.vue";
+import recruitDisabilities from "@/modules/01_manual/components/5_recruitment/56_disabilities.vue";
+import recruitSelection from "@/modules/01_manual/components/5_recruitment/57_selection.vue";
 </script>
 <template>
   <div class="col-12 row">
diff --git a/src/modules/01_manual/components/6_employeehistory/61_main.vue b/src/modules/01_manual/components/6_employeehistory/61_main.vue
index 73c61b13..734aae7b 100644
--- a/src/modules/01_manual/components/6_employeehistory/61_main.vue
+++ b/src/modules/01_manual/components/6_employeehistory/61_main.vue
@@ -10,6 +10,12 @@ const text = ref("");
       <div class="toptitle text-dark col-12 row items-center">
         คู่มือการใช้งานระบบบริหารทรัพยากรบุคคลของกรุงเทพมหานคร
       </div> -->
+      <div
+      class="toptitle text-dark col-12 row items-center"
+      style="padding-top: 40px"
+    >
+      คู่มือการใช้งานระบบลูกจ้าง
+    </div>
 
       <q-card
         flat
@@ -2456,7 +2462,7 @@ style="
           >
             ส่งไปออกคำสั่ง
           </span>  
-          ปุ่ม                     และยืนยันการบันทึกข้อมูลการส่งรายชื่อไปออกคำสั่ง หากรายชื่อถูกออกคำสั่งเสร็จสิ้น รายชื่อจะปรากฏในระบบ “ออกคำสั่ง” คำสั่ง C-PM-21 คำสั่งแต่งตั้งลูกจ้างชั่วคราวเป็นลูกจ้างประจำ หรือหากต้องการยกเลิกการส่งรายชื่อไปออกคำสั่ง ให้ทำการคลิก                
+          และยืนยันการบันทึกข้อมูลการส่งรายชื่อไปออกคำสั่ง หากรายชื่อถูกออกคำสั่งเสร็จสิ้น รายชื่อจะปรากฏในระบบ “ออกคำสั่ง” คำสั่ง C-PM-21 คำสั่งแต่งตั้งลูกจ้างชั่วคราวเป็นลูกจ้างประจำ หรือหากต้องการยกเลิกการส่งรายชื่อไปออกคำสั่ง ให้ทำการคลิก                
           <i
           class="q-icon mdi mdi-close"
           style="
diff --git a/src/modules/01_manual/components/7_commands/72_try.vue b/src/modules/01_manual/components/7_commands/72_try.vue
new file mode 100644
index 00000000..f07d6878
--- /dev/null
+++ b/src/modules/01_manual/components/7_commands/72_try.vue
@@ -0,0 +1,843 @@
+<template>
+  <div :class="$style.div">
+    <div :class="$style.inner">
+      <div :class="$style.groupChild" />
+    </div>
+    <div :class="$style.child" />
+    <div :class="$style.item" />
+    <div :class="$style.rectangleDiv" />
+    <img :class="$style.image1Icon" alt="" src="/image-1@2x.png" />
+    <div :class="$style.child1" />
+    <div :class="$style.rectangleParent">
+      <div :class="$style.groupItem" />
+      <div :class="$style.caption">ค้นหา</div>
+      <img :class="$style.vectorIcon" alt="" src="/vector.svg" />
+    </div>
+    <div :class="$style.rectangleGroup">
+      <div :class="$style.groupInner" />
+      <div :class="$style.groupParent">
+        <div :class="$style.rectangleContainer">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">โครงสร้างอัตรากำลัง</div>
+        </div>
+        <div :class="$style.groupDiv">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">ทะเบียนประวัติ</div>
+        </div>
+        <div :class="$style.rectangleParent1">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">ทะเบียนประวัติลูกจ้าง</div>
+        </div>
+        <div :class="$style.rectangleParent2">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">สรรหาบุคคล</div>
+        </div>
+        <div :class="$style.rectangleParent3">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">ออกคำสั่ง</div>
+        </div>
+        <div :class="$style.rectangleParent4">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">บรรจุ แต่งตั้ง ย้าย โอน</div>
+        </div>
+        <div :class="$style.rectangleParent5">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">พ้นจากราชการ</div>
+        </div>
+        <div :class="$style.rectangleParent6">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">เครื่องราชอิสริยาภรณ์</div>
+        </div>
+        <div :class="$style.rectangleParent7">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">การลา</div>
+        </div>
+        <div :class="$style.rectangleParent8">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div10">วินัย</div>
+        </div>
+        <div :class="$style.rectangleParent9">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">ความสามารถพิเศษ</div>
+        </div>
+        <div :class="$style.rectangleParent10">
+          <div :class="$style.groupChild12" />
+          <div :class="$style.div12">ข้อมูลหลัก</div>
+        </div>
+        <div :class="$style.rectangleParent11">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div10">ปฏิบัติราชการพิเศษ</div>
+        </div>
+        <div :class="$style.rectangleParent12">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div10">บันทึกวันที่ไม่ได้รับเงินเดือนฯ</div>
+        </div>
+        <div :class="$style.rectangleParent13">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">อื่นๆ</div>
+        </div>
+        <div :class="$style.rectangleParent14">
+          <div :class="$style.groupChild1" />
+          <div :class="$style.div1">เอกสารหลักฐาน</div>
+        </div>
+      </div>
+    </div>
+    <div :class="$style.captionParent">
+      <div :class="$style.caption1">
+        <span>ระบบ</span>
+        <span :class="$style.span">ทรัพยากรบุคคล</span>
+      </div>
+      <div :class="$style.caption2">Support</div>
+      <div :class="$style.lineDiv" />
+    </div>
+    <div :class="$style.div17">เราจะช่วยคุณได้อย่างไร</div>
+    <div :class="$style.div18">ข้อมูลหลัก</div>
+    <img :class="$style.rectangleIcon" alt="" src="/rectangle-3464303@2x.png" />
+    <div :class="$style.groupContainer">
+      <div :class="$style.parent">
+        <div :class="$style.div19">ขอบเขตของระบบข้อมูล</div>
+        <div :class="$style.wrapper">
+          <div :class="$style.div20">
+            <ul :class="$style.ul">
+              <li :class="$style.li">
+                ระบบจัดการข้อมูลหลักเกี่ยวกับทรัพยากรบุคคลมีขอบเขตที่รวมถึงข้อมูลทั้งหมดที่เกี่ยวข้องกับพนักงานในองค์กร
+                ข้อมูลเกี่ยวกับบุคคล, ข้อมูลโครงสร้าง
+              </li>
+            </ul>
+            <p :class="$style.p">
+              หน่วยงาน, ข้อมูลข้าราชการ ข้อมูลลูกจ้าง, วันลา, และข้อมูลอื่นๆ
+              ที่เกี่ยวข้องกับการจัดการทรัพยากรบุคคล
+            </p>
+          </div>
+        </div>
+      </div>
+      <div :class="$style.frameParent">
+        <div :class="$style.container">
+          <div :class="$style.div21">
+            <ul :class="$style.ul">
+              <li :class="$style.li">
+                <span :class="$style.span1"
+                  >การเข้าถึงและบริหารจัดการข้อมูล</span
+                >
+                <span :class="$style.span2"> : </span>
+                <span
+                  >การตรวจสอบและรักษาความปลอดภัยในการเข้าถึงข้อมูล การสร้าง,
+                  การอัปเดต, การลบข้อมูลตามความเหมาะสม
+                  และการจัดการสิทธิ์ในการเข้าถึงข้อมูลของบุคคลในองค์กร</span
+                >
+              </li>
+              <li :class="$style.li">
+                <span :class="$style.span1">การดูแลรักษาความเสถียร :</span>
+                <span :class="$style.span4">
+                  การควบคุมฐานข้อมูล
+                  หรือระบบให้มีประสิทธิภาพและเสถียรภาพตลอดเวลา</span
+                >
+              </li>
+              <li>
+                <span :class="$style.span1">การสำรองข้อมูล :</span>
+                <span :class="$style.span2"> </span>
+                <span :class="$style.span4"
+                  >การสำรองข้อมูลเพื่อป้องกันข้อมูลไม่สูญหายในกรณีของภัยคุกคามหรือปัญหาทางเทคนิคที่อาจเกิดขึ้น</span
+                >
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div :class="$style.div22">ขั้นตอนการดูแลระบบ</div>
+      </div>
+      <div :class="$style.frameChild" />
+      <div :class="$style.frameItem" />
+      <div :class="$style.group">
+        <div :class="$style.div23">คำถามที่พบบ่อย</div>
+        <div :class="$style.rectangleParent15">
+          <div :class="$style.groupChild17" />
+          <img :class="$style.layer1Icon" alt="" src="/layer-1.svg" />
+          <div :class="$style.div24">
+            วิธีเข้าถึงและปรับปรุงข้อมูลส่วนตัวของพนักงานคืออย่างไร?
+          </div>
+          <div :class="$style.div25">
+            <ul :class="$style.ul">
+              <li :class="$style.li">
+                พนักงานสามารถเข้าถึงและปรับปรุงข้อมูลส่วนตัวของตนได้ผ่านระบบส่วนบุคคลบนพอร์ทัลล์ของพนักงาน
+                การเข้าถึงข้อมูลส่วนตัวจะต้องผ่านการ
+              </li>
+            </ul>
+            <p :class="$style.p">ตรวจสอบตัวตนและการสอบถามเพื่อความปลอดภัย</p>
+          </div>
+        </div>
+        <div :class="$style.rectangleParent16">
+          <div :class="$style.groupChild18" />
+          <img :class="$style.layer1Icon" alt="" src="/layer-11.svg" />
+          <div :class="$style.div24">
+            มีข้อมูลที่สูญหายหรือข้อมูลที่ถูกลบโดยไม่ตั้งใจหรือไม่?
+          </div>
+          <div :class="$style.div27">
+            <ul :class="$style.ul">
+              ทางเรามีมาตรการความปลอดภัยที่เข้มงวดเพื่อป้องกันการสูญหายข้อมูล
+              และมีการบันทึกการเข้าถึงและการดำเนินการกับข้อมูลทุกครั้ง
+            </ul>
+          </div>
+        </div>
+        <div :class="$style.rectangleParent17">
+          <div :class="$style.groupChild19" />
+          <img :class="$style.layer1Icon" alt="" src="/layer-12.svg" />
+          <div :class="$style.div24">
+            มีมาตรการความปลอดภัยในการจัดเก็บและใช้ข้อมูลบุคคลหรือไม่?
+          </div>
+          <div :class="$style.div29">
+            <ul :class="$style.ul">
+              <li :class="$style.li">
+                เรามีมาตรการความปลอดภัยที่เข้มงวดเพื่อป้องกันการเข้าถึงข้อมูลบุคคลภายนอกโดยไม่ได้รับอนุญาต
+                มีการใช้เทคโนโลยีการเข้ารหัสและระบบการ
+              </li>
+            </ul>
+            <p :class="$style.p">ตรวจสอบตัวตนเพื่อปกป้องข้อมูล</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+  import { defineComponent } from "vue";
+
+  export default defineComponent({
+    name: "Frame",
+  });
+</script>
+<style module>
+  .groupChild {
+    position: absolute;
+    top: 89px;
+    left: 0px;
+    background-color: var(--color-white);
+    box-shadow: 0px 4px 20px rgba(224, 235, 240, 0.4);
+    width: 1920px;
+    height: 89px;
+  }
+  .inner {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 1920px;
+    height: 89px;
+  }
+  .child {
+    position: absolute;
+    top: 396px;
+    left: calc(50% - 422px);
+    border-radius: var(--br-5xs);
+    background-color: var(--color-white);
+    box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
+    border: 1px solid var(--color-whitesmoke-300);
+    box-sizing: border-box;
+    width: 1166px;
+    height: 709px;
+  }
+  .item {
+    position: absolute;
+    top: 396px;
+    left: calc(50% - 422px);
+    border-radius: var(--br-5xs) var(--br-5xs) 0px 0px;
+    background-color: var(--color-lightseagreen);
+    box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
+    border: 1px solid var(--color-whitesmoke-300);
+    box-sizing: border-box;
+    width: 1166px;
+    height: 59px;
+  }
+  .rectangleDiv {
+    position: absolute;
+    top: 89px;
+    left: calc(50% - 960px);
+    background-color: var(--color-darkslategray-100);
+    box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
+    border: 1px solid var(--color-whitesmoke-300);
+    box-sizing: border-box;
+    width: 1920px;
+    height: 262px;
+  }
+  .image1Icon {
+    position: absolute;
+    top: 90px;
+    left: 0px;
+    width: 1921px;
+    height: 261px;
+    object-fit: cover;
+  }
+  .child1 {
+    position: absolute;
+    top: 90px;
+    left: 0px;
+    background: linear-gradient(
+      90deg,
+      #273238 15.1%,
+      #273238 30.73%,
+      rgba(39, 50, 56, 0.91) 41.67%,
+      rgba(39, 50, 56, 0.87) 50%,
+      rgba(39, 50, 56, 0.69) 66.67%,
+      rgba(39, 50, 56, 0.33) 77.08%,
+      rgba(39, 50, 56, 0) 88.02%
+    );
+    width: 1920px;
+    height: 261px;
+  }
+  .groupItem {
+    position: absolute;
+    height: 100%;
+    top: 0%;
+    bottom: 0%;
+    left: calc(50% - 608.5px);
+    border-radius: 10px;
+    background-color: #f8f8f8;
+    border: 1px solid var(--input-outline-default);
+    box-sizing: border-box;
+    width: 1217px;
+  }
+  .caption {
+    position: absolute;
+    top: 25.81%;
+    left: 6.14%;
+    line-height: 150%;
+  }
+  .vectorIcon {
+    position: absolute;
+    height: 38.71%;
+    width: 2%;
+    top: 30.65%;
+    right: 95.64%;
+    bottom: 30.65%;
+    left: 2.37%;
+    max-width: 100%;
+    overflow: hidden;
+    max-height: 100%;
+  }
+  .rectangleParent {
+    position: absolute;
+    height: 5.17%;
+    top: 18.08%;
+    bottom: 76.75%;
+    left: calc(50% - 608px);
+    width: 1217px;
+    color: rgba(116, 116, 116, 0.52);
+    font-family: var(--font-noto-sans);
+  }
+  .groupInner {
+    position: absolute;
+    top: 0px;
+    left: calc(50% - 145.5px);
+    border-radius: var(--br-5xs);
+    background-color: var(--color-white);
+    border: 1px solid var(--color-whitesmoke-300);
+    box-sizing: border-box;
+    width: 291px;
+    height: 554px;
+  }
+  .groupChild1 {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    border-radius: var(--br-8xs);
+    background-color: var(--color-whitesmoke-100);
+    width: 274px;
+    height: 44px;
+    opacity: 0;
+  }
+  .div1 {
+    position: absolute;
+    top: 10.1px;
+    left: 26px;
+    line-height: 24px;
+    font-weight: 300;
+    display: inline-block;
+    width: 161px;
+    height: 24.52px;
+  }
+  .rectangleContainer {
+    position: absolute;
+    top: 50px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .groupDiv {
+    position: absolute;
+    top: 99px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .rectangleParent1 {
+    position: absolute;
+    top: 148px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .rectangleParent2 {
+    position: absolute;
+    top: 198px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .rectangleParent3 {
+    position: absolute;
+    top: 247px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .rectangleParent4 {
+    position: absolute;
+    top: 296px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .rectangleParent5 {
+    position: absolute;
+    top: 345px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .rectangleParent6 {
+    position: absolute;
+    top: 394px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .rectangleParent7 {
+    position: absolute;
+    top: 443px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .div10 {
+    position: absolute;
+    top: 10.1px;
+    left: 26px;
+    line-height: 24px;
+    font-weight: 300;
+  }
+  .rectangleParent8 {
+    position: absolute;
+    top: 493px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .rectangleParent9 {
+    position: absolute;
+    top: 689px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .groupChild12 {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    border-radius: var(--br-8xs);
+    background-color: rgba(0, 137, 226, 0.04);
+    border: 1px solid #fafafa;
+    box-sizing: border-box;
+    width: 274px;
+    height: 44px;
+  }
+  .div12 {
+    position: absolute;
+    top: 13px;
+    left: 26px;
+    line-height: 24px;
+    font-weight: 500;
+    display: inline-block;
+    width: 130px;
+    height: 24.52px;
+  }
+  .rectangleParent10 {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+    color: #0089e2;
+  }
+  .rectangleParent11 {
+    position: absolute;
+    top: 738px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .rectangleParent12 {
+    position: absolute;
+    top: 787px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .rectangleParent13 {
+    position: absolute;
+    top: 836px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .rectangleParent14 {
+    position: absolute;
+    top: 885px;
+    left: 0px;
+    width: 274px;
+    height: 44px;
+  }
+  .groupParent {
+    position: absolute;
+    top: 7.09px;
+    left: 8px;
+    width: 274px;
+    height: 538.29px;
+    overflow: auto;
+  }
+  .rectangleGroup {
+    position: absolute;
+    top: 396px;
+    left: calc(50% - 744px);
+    box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
+    width: 291px;
+    height: 554px;
+    font-size: var(--body-2-light-size);
+  }
+  .span {
+    color: var(--color-lightseagreen);
+  }
+  .caption1 {
+    position: absolute;
+    top: 0px;
+    left: 14px;
+    font-weight: 900;
+    display: inline-block;
+    width: 181px;
+    height: 24px;
+  }
+  .caption2 {
+    position: absolute;
+    top: 27px;
+    left: 14px;
+    font-size: 14px;
+    font-weight: 600;
+    color: #818181;
+  }
+  .lineDiv {
+    position: absolute;
+    top: 8px;
+    left: -1px;
+    border-right: 2px solid var(--text-body-black);
+    box-sizing: border-box;
+    width: 2px;
+    height: 38px;
+  }
+  .captionParent {
+    position: absolute;
+    top: 20px;
+    left: 205px;
+    width: 195px;
+    height: 48px;
+    color: var(--color-darkslategray-100);
+  }
+  .div17 {
+    position: absolute;
+    top: 162px;
+    left: 352px;
+    font-size: 32px;
+    letter-spacing: 0.03em;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--color-white);
+  }
+  .div18 {
+    position: absolute;
+    top: 415px;
+    left: 588px;
+    letter-spacing: 0.03em;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--color-white);
+  }
+  .rectangleIcon {
+    position: absolute;
+    top: 25px;
+    left: 142px;
+    border-radius: 126px;
+    width: 44px;
+    height: 44px;
+    object-fit: cover;
+  }
+  .div19 {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    letter-spacing: 0.03em;
+    line-height: 24px;
+    font-weight: 600;
+  }
+  .li {
+    margin-bottom: 0px;
+  }
+  .ul {
+    margin: 0;
+    padding-left: var(--padding-2xl);
+  }
+  .p {
+    margin: 0;
+  }
+  .div20 {
+    position: absolute;
+    top: 10px;
+    left: 24px;
+    letter-spacing: 0.03em;
+    line-height: 24px;
+    display: inline-block;
+    width: 1032px;
+  }
+  .wrapper {
+    position: absolute;
+    top: 49px;
+    left: 0px;
+    border-radius: var(--br-5xs);
+    background-color: var(--color-whitesmoke-200);
+    box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
+    border: 1px solid var(--color-whitesmoke-300);
+    box-sizing: border-box;
+    width: 1070px;
+    height: 68px;
+    overflow: hidden;
+    font-size: var(--font-inherit);
+    font-family: var(--font-inherit);
+  }
+  .parent {
+    position: absolute;
+    top: 0px;
+    left: 27px;
+    width: 1070px;
+    height: 117px;
+  }
+  .span1 {
+    font-weight: 600;
+    font-family: var(--body-2-light);
+  }
+  .span2 {
+    font-weight: 500;
+    font-family: var(--body-2-light);
+  }
+  .span4 {
+    font-family: var(--body-2-light);
+  }
+  .div21 {
+    position: absolute;
+    top: 10px;
+    left: 26px;
+    letter-spacing: 0.03em;
+    line-height: 24px;
+    display: inline-block;
+    width: 1014px;
+  }
+  .container {
+    position: absolute;
+    top: 49px;
+    left: 0px;
+    border-radius: var(--br-5xs);
+    background-color: var(--color-whitesmoke-200);
+    box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
+    border: 1px solid var(--color-whitesmoke-300);
+    box-sizing: border-box;
+    width: 1070px;
+    height: 116px;
+    overflow: hidden;
+  }
+  .div22 {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    font-size: var(--font-size-lg);
+    letter-spacing: 0.03em;
+    line-height: 24px;
+    font-weight: 600;
+  }
+  .frameParent {
+    position: absolute;
+    top: 187px;
+    left: 27px;
+    width: 1070px;
+    height: 165px;
+    font-size: var(--font-inherit);
+  }
+  .frameChild {
+    position: absolute;
+    top: 157.5px;
+    left: -0.5px;
+    border-top: 1px solid var(--color-whitesmoke-300);
+    box-sizing: border-box;
+    width: 1121px;
+    height: 1px;
+  }
+  .frameItem {
+    position: absolute;
+    top: 390.5px;
+    left: 1.5px;
+    border-top: 1px solid var(--color-whitesmoke-300);
+    box-sizing: border-box;
+    width: 1121px;
+    height: 1px;
+  }
+  .div23 {
+    position: absolute;
+    top: 0px;
+    left: 2px;
+    font-size: var(--font-size-lg);
+    letter-spacing: 0.03em;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--text-body-black);
+  }
+  .groupChild17 {
+    position: absolute;
+    top: 0px;
+    left: calc(50% - 535px);
+    border-radius: var(--br-5xs);
+    background-color: var(--color-whitesmoke-200);
+    box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
+    width: 1070px;
+    height: 104px;
+  }
+  .layer1Icon {
+    position: absolute;
+    top: 19px;
+    left: 27px;
+    width: 16px;
+    height: 16px;
+    overflow: hidden;
+  }
+  .div24 {
+    position: absolute;
+    top: 14px;
+    left: 61px;
+    letter-spacing: 0.03em;
+    line-height: 24px;
+    font-weight: 500;
+    display: inline-block;
+    width: 819px;
+  }
+  .div25 {
+    position: absolute;
+    top: 47px;
+    left: 52px;
+    font-size: var(--font-inherit);
+    letter-spacing: 0.03em;
+    line-height: 24px;
+    font-family: var(--font-inherit);
+    color: var(--text-body-black);
+    display: inline-block;
+    width: 970px;
+    height: 51px;
+  }
+  .rectangleParent15 {
+    position: absolute;
+    top: 49px;
+    left: calc(50% - 535px);
+    width: 1070px;
+    height: 104px;
+  }
+  .groupChild18 {
+    position: absolute;
+    top: 0px;
+    left: calc(50% - 535px);
+    border-radius: var(--br-5xs);
+    background-color: var(--color-whitesmoke-200);
+    box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
+    width: 1070px;
+    height: 86px;
+  }
+  .div27 {
+    position: absolute;
+    top: 47px;
+    left: 52px;
+    font-size: var(--font-inherit);
+    letter-spacing: 0.03em;
+    line-height: 24px;
+    font-family: var(--font-inherit);
+    color: var(--text-body-black);
+    display: inline-block;
+    width: 978px;
+    height: 25px;
+  }
+  .rectangleParent16 {
+    position: absolute;
+    top: 178px;
+    left: calc(50% - 535px);
+    width: 1070px;
+    height: 86px;
+  }
+  .groupChild19 {
+    position: absolute;
+    top: 0px;
+    left: calc(50% - 535px);
+    border-radius: var(--br-5xs);
+    background-color: var(--color-whitesmoke-200);
+    box-shadow: 0px 4px 22px rgba(200, 211, 219, 0.22);
+    width: 1070px;
+    height: 106px;
+  }
+  .div29 {
+    position: absolute;
+    top: 47px;
+    left: 52px;
+    font-size: var(--font-inherit);
+    letter-spacing: 0.03em;
+    line-height: 24px;
+    font-family: var(--font-inherit);
+    color: var(--text-body-black);
+    display: inline-block;
+    width: 978px;
+    height: 55px;
+  }
+  .rectangleParent17 {
+    position: absolute;
+    top: 289px;
+    left: calc(50% - 535px);
+    width: 1070px;
+    height: 106px;
+  }
+  .group {
+    position: absolute;
+    top: 424px;
+    left: 27px;
+    width: 1070px;
+    height: 395px;
+    font-size: var(--body-2-light-size);
+    color: var(--color-lightseagreen);
+  }
+  .groupContainer {
+    position: absolute;
+    top: 484px;
+    left: 561px;
+    width: 1122px;
+    height: 621px;
+    overflow: auto;
+    font-size: var(--font-size-lg);
+  }
+  .div {
+    position: relative;
+    background-color: #f7f9fa;
+    box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.12);
+    width: 100%;
+    height: 1200px;
+    text-align: left;
+    font-size: var(--font-size-xl);
+    color: var(--text-body-black);
+    font-family: var(--body-2-light);
+  }
+</style>
diff --git a/src/modules/01_manual/components/7_commands/view.vue b/src/modules/01_manual/components/7_commands/view.vue
new file mode 100644
index 00000000..b21baba8
--- /dev/null
+++ b/src/modules/01_manual/components/7_commands/view.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import commandsmain from  "@/modules/01_manual/components/7_commands/71_main.vue"
+import ehrtry from  "@/modules/01_manual/components/7_commands/72_try.vue"
+
+
+</script>
+<template>
+  <div class="col-12 row">
+    <div
+      class="toptitle text-dark col-12 row items-center"
+      style="padding-top: 40px"
+    >
+      คู่มือการใช้งานระบบจัดการระบบสรรหา
+    </div>
+    <div class="row col-12 q-gutter-xs">
+      <div
+        id="recruitmain"
+        name="1"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <commandsmain />
+      </div>
+
+      <div
+        id="recruitSetting"
+        name="2"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <ehrtry />
+      </div>
+      <!-- <div
+        id="recruitManage"
+        name="3"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        สอบแข่งขัน
+      </div> -->
+      <div
+        id="recruitManage"
+        name="3"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <recruitManage />
+      </div>
+      <div
+        id="recruitstati"
+        name="4"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <recruitstati />
+      </div>
+      <div
+        id="recruitQualifiers"
+        name="5"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <recruitQualifiers />
+      </div>
+      <div
+        id="recruitDisabilities"
+        name="6"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <recruitDisabilities />
+      </div>
+      <div
+        id="recruitSelection"
+        name="7"
+        class="row col-12 information"
+        style="padding-bottom: 60px"
+      >
+        <recruitSelection />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/01_manual/router.ts b/src/modules/01_manual/router.ts
index 40f1cc34..e0021aaa 100644
--- a/src/modules/01_manual/router.ts
+++ b/src/modules/01_manual/router.ts
@@ -48,11 +48,13 @@ const recruitdisabilities = () => import("@/modules/01_manual/components/5_recru
 const recruitselection = () => import("@/modules/01_manual/components/5_recruitment/57_selection.vue");
 
 
-const commandsmain = () => import("@/modules/01_manual/components/7_commands/71_main.vue");
-
 const employeehistorymain = () => import("@/modules/01_manual/components/6_employeehistory/61_main.vue");
 
 
+const commandsmain = () => import("@/modules/01_manual/components/7_commands/71_main.vue");
+const ehrtry = () => import("@/modules/01_manual/components/7_commands/72_try.vue");
+
+
 
 /****** 1 ********/
 
@@ -482,6 +484,19 @@ export default [
       Key: [10],
       Role: "order",
     },
+  },
+
+
+
+
+  {
+    path: "/ehrtry",
+    name: "ehrtry",
+    component: ehrtry,
+    meta: {
+      Auth: true,
+      Key: [10],
+      Role: "order",
+    },
   }
-  
 ];
\ No newline at end of file
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 7d57b4b3..52fcc0f8 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -15,6 +15,7 @@ import {
   tabRegistration,
   tabRecruit,
   tabList,
+  
 } from "../interface/request/main/main";
 
 const { setVerticalScrollPosition } = scroll;
@@ -166,6 +167,9 @@ const setListTab = () => {
   } else if (route.name == "recruitmain") {
     listTab.value = tabRecruit;
   }
+  else if (route.name == "commandsmain") {
+    listTab.value = tabRecruit;
+  }
   changeTab(listTab.value[0].tag);
 
   if (route.name == "dashboard") {
@@ -302,13 +306,16 @@ const onScroll = (scroll: ScrollType) => {
 
 <!-- โครงเว็บ -->
 <template>
+  
   <!-- แบบเก่า design แรก -->
   <!-- <q-layout view="lHh Lpr lff"> -->
   <!-- ปรับให้กับหน้า รายละเอียดทะเบียนประวัติ  -->
   <q-layout view="lHh LpR lff" @scroll="onScroll">
+    
     <!-- header -->
     <q-header flat class="bg-grey-2 text-dark" height-hint="7">
       <q-toolbar style="padding: 0 2%">
+        
         <q-btn
           size="13px"
           class="bg-grey-3"
@@ -358,11 +365,12 @@ const onScroll = (scroll: ScrollType) => {
       <template v-slot:mini>
         <q-scroll-area class="fit mini-slot cursor-pointer">
           <q-toolbar class="q-py-md">
-            <q-img
+           <q-img
               src="@/assets/logo.png"
               spinner-color="white"
               style="height: 32px; max-width: 32px"
             />
+            
           </q-toolbar>
           <q-separator color="grey-9" />
           <!-- เมนูย่อย ตอนย่อ -->
@@ -515,6 +523,15 @@ const onScroll = (scroll: ScrollType) => {
           </q-toolbar-title>
         </q-toolbar>
         <q-separator inset color="grey-9" />
+         <div class="row">
+          <div class="col-12 q-pa-md">
+          <q-input outlined bg-color="white" label="ค้นหา" v-model="text" dense>
+							<template v-slot:prepend>
+								<q-icon name="search" />
+							</template>
+						</q-input>
+          </div>
+       </div>
         <q-list padding>
           <div v-for="(menuItem, index) in menuList" :key="index">
             <!-- เมนูย่อย -->
@@ -594,6 +611,7 @@ const onScroll = (scroll: ScrollType) => {
             </q-expansion-item>
 
             <!-- เมนูปกติ -->
+            
             <q-item
               class="text-weight-medium menu"
               :active="activeMenu(menuItem.path)"
@@ -686,6 +704,8 @@ const onScroll = (scroll: ScrollType) => {
       </q-scroll-area>
     </q-drawer>
 
+    
+
     <q-page-container class="bg-grey-2">
       <q-page style="padding: 0 2%">
         <router-view :key="$route.fullPath" />
@@ -776,7 +796,7 @@ const onScroll = (scroll: ScrollType) => {
 }
 
 .q-field--outlined .q-field__control {
-  border-radius: 5px;
+  border-radius: 50px;
 }
 
 .q-field--outlined .q-field__control:before {