diff --git a/src/modules/001_Maintenance/view/Main.vue b/src/modules/001_Maintenance/view/Main.vue
new file mode 100644
index 0000000..389cd09
--- /dev/null
+++ b/src/modules/001_Maintenance/view/Main.vue
@@ -0,0 +1,178 @@
+<script setup lang="ts">
+</script>
+<template>
+    <div class="col-12 row justify-center text-h6 text-dark">ติดต่อเรา</div>
+    <div class="col-12 q-pt-md "></div>
+	<div class="col-12"><q-separator color="grey-4" /></div>
+
+
+    <q-card class="row col-12 q-mt-md">
+        <div class="col-12 q-px-md q-py-sm text-subtitle2 text-blue bg-light-blue-1 text-weight-medium">
+            ระบบหลัก
+        </div>
+        <div class="col-12 row q-pa-md">
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-account-tie"/>
+                        <div class="txt text-weight-regular">ผู้ดูแล
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                                นางสาวกัณฐิมา กาฬสินธุ์
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-briefcase"/>
+                        <div class="txt text-weight-regular">หน่วยงาน
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-phone"/>
+                        <div class="txt text-weight-regular">เบอร์โทร
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                               063-511-9047
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-email"/>
+                        <div class="txt text-weight-regular">อีเมล
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                Kantima_Kalsin@gmail.com
+                            </div>
+                        </div>
+            </div>
+        </div>
+    </q-card>
+
+
+    <q-card class="row col-12 q-mt-md">
+        <div class="col-12 q-px-md q-py-sm text-subtitle2 text-blue bg-blue-1 text-weight-medium">
+            โครงสร้างอัตรากำลัง
+        </div>
+        <div class="col-12 row q-pa-md">
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-account-tie"/>
+                        <div class="txt text-weight-regular">ผู้ดูแล
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                                นางสาวรัชภรณ์ ภักดี
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-briefcase"/>
+                        <div class="txt text-weight-regular">หน่วยงาน
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                สำนักงานโครงสร้างอัตรากำลังกรุงเทพมหานคร
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-phone"/>
+                        <div class="txt text-weight-regular">เบอร์โทร
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                                092-112-3427
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-email"/>
+                        <div class="txt text-weight-regular">อีเมล
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                Ratchaphon.Pa@gmail.com
+                            </div>
+                        </div>
+            </div>
+        </div>
+    </q-card>
+
+
+
+    <q-card class="row col-12 q-mt-md">
+        <div class="col-12 q-px-md q-py-sm text-subtitle2 text-blue bg-blue-1 text-weight-medium">
+            ทะเบียนประวัติ
+        </div>
+        <div class="col-12 row q-pa-md">
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-account-tie"/>
+                        <div class="txt text-weight-regular">ผู้ดูแล
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                                นายณัฐพงศ์ ดิษยบุตร
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-briefcase"/>
+                        <div class="txt text-weight-regular">หน่วยงาน
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                สำนักงานทะเบียนประวัติ
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-phone"/>
+                        <div class="txt text-weight-regular">เบอร์โทร
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                                081-233-0892
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-email"/>
+                        <div class="txt text-weight-regular">อีเมล
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                Nuttapong@gmail.com
+                            </div>
+                        </div>
+            </div>
+        </div>
+    </q-card>  
+
+    
+</template>
+
+<style>
+.iconcontat {
+    color: #74747468; 
+    font-size: 25px;
+    margin-right: 1%;
+}
+
+.icon_cer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.txt{
+    color: #747474df;
+    font-size :12px;
+}
+
+.txt1{
+    color: black;
+    font-size :14px;
+}
+</style>
\ No newline at end of file
diff --git a/src/modules/00_contact/views/Main.vue b/src/modules/00_contact/views/Main.vue
index 22eac68..389cd09 100644
--- a/src/modules/00_contact/views/Main.vue
+++ b/src/modules/00_contact/views/Main.vue
@@ -36,7 +36,7 @@
                         <div class="txt text-weight-regular">เบอร์โทร
                             <br>
                             <div class="txt1 text-weight-regular">
-                                012111111111
+                               063-511-9047
                             </div>
                         </div>
             </div>
@@ -46,7 +46,7 @@
                         <div class="txt text-weight-regular">อีเมล
                             <br>
                             <div class="txt1 text-weight-regular ">
-                                g@gmail.com
+                                Kantima_Kalsin@gmail.com
                             </div>
                         </div>
             </div>
@@ -74,7 +74,7 @@
                         <div class="txt text-weight-regular">หน่วยงาน
                             <br>
                             <div class="txt1 text-weight-regular ">
-                                สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร
+                                สำนักงานโครงสร้างอัตรากำลังกรุงเทพมหานคร
                             </div>
                         </div>
             </div>
@@ -84,7 +84,7 @@
                         <div class="txt text-weight-regular">เบอร์โทร
                             <br>
                             <div class="txt1 text-weight-regular">
-                                01111222333
+                                092-112-3427
                             </div>
                         </div>
             </div>
@@ -94,7 +94,56 @@
                         <div class="txt text-weight-regular">อีเมล
                             <br>
                             <div class="txt1 text-weight-regular ">
-                                t@gmail.com
+                                Ratchaphon.Pa@gmail.com
+                            </div>
+                        </div>
+            </div>
+        </div>
+    </q-card>
+
+
+
+    <q-card class="row col-12 q-mt-md">
+        <div class="col-12 q-px-md q-py-sm text-subtitle2 text-blue bg-blue-1 text-weight-medium">
+            ทะเบียนประวัติ
+        </div>
+        <div class="col-12 row q-pa-md">
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-account-tie"/>
+                        <div class="txt text-weight-regular">ผู้ดูแล
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                                นายณัฐพงศ์ ดิษยบุตร
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-briefcase"/>
+                        <div class="txt text-weight-regular">หน่วยงาน
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                สำนักงานทะเบียนประวัติ
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-phone"/>
+                        <div class="txt text-weight-regular">เบอร์โทร
+                            <br>
+                            <div class="txt1 text-weight-regular">
+                                081-233-0892
+                            </div>
+                        </div>
+            </div>
+
+            <div class="col-6 row q-pa-sm icon_cer q-col-gutter-md">
+                        <q-icon class="iconcontat" name="mdi-email"/>
+                        <div class="txt text-weight-regular">อีเมล
+                            <br>
+                            <div class="txt1 text-weight-regular ">
+                                Nuttapong@gmail.com
                             </div>
                         </div>
             </div>
diff --git a/src/modules/01_metadata/views/Main.vue b/src/modules/01_metadata/views/Main.vue
index ba79f0d..48414df 100644
--- a/src/modules/01_metadata/views/Main.vue
+++ b/src/modules/01_metadata/views/Main.vue
@@ -6,38 +6,61 @@
             ข้อมูลหลัก
         </div>
 
+
         <div class="q-pa-md col-12">
-            <div class="text-weight-medium">วัตถุประสงค์ของการพัฒนา
-                <q-card  class="card1 text-weight-regular">
+        <q-list bordered class="rounded-borders">
+        <q-expansion-item class="text-weight-medium"
+            expand-separator
+            label="วัตถุประสงค์ของการพัฒนา"
+            
+      >
+        <q-card>
+          <q-card-section>
+            <q-card  class="card1 text-weight-regular" >
                     <ul>
                         <li>
                             ระบบที่มีวัตถุประสงค์เพื่อจัดการข้อมูลทรัพยากรบุคคล ช่วยให้สามารถจัดเก็บข้อมูลของพนักงานทั้งหมดได้อย่างมีระบบเกี่ยวข้องกับข้อมูลเกี่ยวกับบุคคล, ข้อมูลโครงสร้างหน่วยงาน ข้อมูลข้าราชการ ข้อมูลลูกจ้าง วันลา และข้อมูลอื่นๆ ที่เกี่ยวข้องกับการจัดการทรัพยากรบุคคล
                         </li>
                     </ul>
                 </q-card>
-            </div>
-            <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
-        </div>
-        
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
 
-        <div class="q-pa-md col-12" style="padding-top: 0px;">
-            <div class="text-weight-medium">ขอบเขตการดูแลระบบ
-                <q-card  class="card1 text-weight-regular">
+
+
+      <q-expansion-item
+            class="text-weight-medium"
+            expand-separator
+            label="ขอบเขตการดูแลระบบ"
+            
+      >
+        <q-card>
+          <q-card-section>
+            <q-card  class="card1 text-weight-regular" >
                     <ul>
                         <li>
                             เจ้าหน้าที่ทรัพยากรบุคคลต้องรับผิดชอบในการเก็บรวบรวม บันทึก และบริหารจัดการข้อมูลทรัพยากรบุคคลของพนักงานนอกจากนี้พวกเขาต้องรักษา
             ความถูกต้องและปลอดภัยของข้อมูลทรัพยากรบุคคลและปฏิบัติตามนโยบายความเป็นส่วนตัว
-                        </li>  
+                        </li>
                     </ul>
-
                 </q-card>
-            </div>
-            <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
-        </div>
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
 
-        <div class="q-pa-md col-12" style="padding-top: 0px;">
-            <div class="text-weight-medium">รายละเอียดและขั้นตอนการดูแลระบบ
-                <q-card  class="card1 q-pa-md text-weight-regular">
+
+
+
+      <q-expansion-item
+            class="text-weight-medium"
+            expand-separator
+            label="รายละเอียดและขั้นตอนการดูแลระบบ"
+            
+      >
+        <q-card>
+          <q-card-section>
+            <q-card  class="card1 q-pa-md text-weight-regular">
                     <div class="col-12">
                         <div class="text-weight-medium">1.) ความปลอดภัยของข้อมูล</div>
                         <ul>
@@ -63,15 +86,21 @@
                         </ul>
                     </div>
                 </q-card>
-            </div>
-            <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
-        </div>
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
 
 
 
-        <div class="q-pa-md col-12" style="padding-top: 0px;">
-            <div class="text-weight-medium">คำถามที่พบบ่อย
-                <q-card  class="card1 q-pa-md text-weight-regular">
+      <q-expansion-item
+            class="text-weight-medium"
+            expand-separator
+            label="คำถามที่พบบ่อย"
+            
+      >
+        <q-card>
+          <q-card-section>
+            <q-card  class="card1 q-pa-md text-weight-regular">
                     <div class="col-12 row">
                         <q-icon class="iconQA" name="mdi-cloud-question"/>
                         <div class="text-weight-medium" style="color: #016987;">ข้อมูลส่วนบุคคลถูกปกปิดหรือปล่อยไว้หรือไม่ ?</div>
@@ -127,22 +156,46 @@
                         <div class="col-12 row">
                             <ul>
                                 <li>
-                                    ลองรีเซ็ตระบบหรือแอปพลิเคชันที่มีปัญหาเพื่อดูว่าปัญหาจะถูกแก้ไขหรือไม่ หากการรีเซ็ตระบบไม่ช่วยแก้ไขปัญหาควรติดต่อฝ่ายสนับสนุนเทคนิค
-        หรือทีม IT ขององค์กรเพื่อขอความช่วยเหลือ
+                                    ลองรีเซ็ตระบบหรือแอปพลิเคชันที่มีปัญหาเพื่อดูว่าปัญหาจะถูกแก้ไขหรือไม่
+                                </li>
+                                <li>
+                                    หากการรีเซ็ตระบบไม่ช่วยแก้ไขปัญหาสามารถติดต่อฝ่ายสนับสนุนเทคนิค ที่ปุ่ม
+                                    <span
+                                            style="
+                                            background-color: #016987;
+                                            border: 1px solid #016987;
+                                            color: white;
+                                            font-size: 12px;
+                                            text-align: center;
+                                            display: inline-block;
+                                            padding: 2px 5px;
+                                            border-radius: 2px;
+                                            margin: 0px 5px 0px 5px;
+
+                                            "
+                                        >
+                                           ติดต่อเรา
+                                        </span>  เพื่อขอความช่วยเหลือ
                                 </li>
                             </ul>
                         </div>
                     </div>
 
                 </q-card>
-            </div>
-        </div>
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
+
+    
+    </q-list>
+  </div>
+
+      
     </q-card>
 </template>
 
 <style>
 .card1{
-    margin-top:15px;
     background-color:#F8F8F8;
     border-color: #EDEDED !important;
 }
diff --git a/src/modules/02_organizational/views/Main.vue b/src/modules/02_organizational/views/Main.vue
index 233ce3a..af7f348 100644
--- a/src/modules/02_organizational/views/Main.vue
+++ b/src/modules/02_organizational/views/Main.vue
@@ -6,140 +6,412 @@
             โครงสร้างอัตรากำลัง
         </div>
 
-        <div class="q-pa-md col-12">
-            <div class="text-weight-medium">วัตถุประสงค์ของการพัฒนา
-                <q-card  class="card1 q-pa-md text-weight-regular">
-                    <div class="col-12">
-                        <div class="text-weight-medium">จัดการตำแหน่ง </div>
-                        <ul>
-                            <li>
-                                การจัดการตำแหน่งมีเป้าหมายที่จะสร้างความชัดเจนในหน้าที่และความรับ ผิดชอบของแต่ละตำแหน่งในองค์กร นอกจากนี้ยังเพื่อช่วย
-            ในการเตรียมความพร้อมสำหรับการเติบโตขององค์กรและพัฒนาทักษะของบุคลากรในตำแหน่งนั้น ๆ
-                            </li>
-                        </ul>
-
-                        <div class="text-weight-medium">แผนภูมิโครงสร้าง</div>
-                        <ul>
-                            <li>
-                                การพัฒนาแผนภูมิโครงสร้างมีเป้าหมายที่จะสร้างความชัดเจนในโครงสร้างและลำดับชั้นขององค์กร เพื่อสนับสนุนกระบวนการการทำงาน
-            และเตรียมความพร้อมในการเผยแพร่ตำแหน่งงานและการพัฒนาองค์กรในระยะยาว
-                            </li>
-                        </ul>
-
-                        <div class="text-weight-medium">แผนภูมิองค์กร</div>
-                        <ul>
-                            <li>
-                                การพัฒนาแผนภูมิองค์กรมีเป้าหมายที่จะสร้างความชัดเจนในโครงสร้างและลำดับชั้นขององค์กร เพื่อสนับสนุนกระบวนการการทำงาน
-            และเตรียมความพร้อมในการเผยแพร่ตำแหน่งงานและการพัฒนาองค์กร
-                            </li>
-                        </ul>
-
-                        <div class="text-weight-medium">ผังโครงสร้าง</div>
-                        <ul>
-                            <li>
-                                การพัฒนาแผนภูมิองค์กรมีเป้าหมายที่จะสร้างความชัดเจนในโครงสร้างและลำดับชั้นขององค์กร เพื่อสนับสนุนกระบวนการการทำงาน
-            และเตรียมความพร้อมในการเผยแพร่ตำแหน่งงานและการพัฒนาองค์กร
-                            </li>
-                        </ul>
-
-                        <div class="text-weight-medium">ผังโครงสร้างลูกจ้าง</div>
-                        <ul>
-                            <li>
-                                การพัฒนาผังโครงสร้างลูกจ้างมีเป้าหมายที่จะช่วยให้มีความยืดหยุ่นในการทำงานและจัดการลูกจ้างในองค์กร เพื่อให้มีการเปลี่ยนแปลง
-            ที่ต้องการตามสภาพการทำงานและตลาด
-                            </li>
-                        </ul>
-
-
-                        <div class="text-weight-medium">จัดการบัญชี 2</div>
-                        <ul>
-                            <li>
-                                การพัฒนาผังโครงสร้างลูกจ้างมีเป้าหมายที่จะช่วยให้มีความยืดหยุ่นในการทำงานและจัดการลูกจ้างในองค์กร เพื่อให้มีการเปลี่ยนแปลง
-            ที่ต้องการตามสภาพการทำงานและตลาด
-                            </li>
-                        </ul>
-
-
-                    </div>
-                </q-card>
-            </div>
-            <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
-        </div>
 
         <div class="q-pa-md col-12">
-            <div class="text-weight-medium">ขอบเขตการดูแลระบบ
-                <q-card  class="card1 q-pa-md text-weight-regular">
+        <q-list bordered class="rounded-borders">
+        <q-expansion-item class="text-weight-medium"
+            expand-separator
+            label="วัตถุประสงค์ของการพัฒนา"
+            
+      >
+        <q-card>
+          <q-card-section>
+            <q-card  class="card1 q-pa-md text-weight-regular">
                     <div class="col-12">
-                        <div class="text-weight-medium">1.) การกำหนดบทบาทและความรับผิดชอบ </div>
+                        <div class="text-weight-medium">การวางแผนและการควบคุมทรัพยากรบุคคล </div>
                         <ul>
                             <li>
-                                ระบบทรัพยากรบุคคลควรกำหนดบทบาทและความรับผิดชอบของแต่ละตำแหน่งในองค์กรอย่างชัดเจนเพื่อให้ทุกคนในองค์กรทราบหน้าที่และการรับผิดชอบของตนเอง และสามารถปฏิบัติตามนโยบายและขั้นตอนการทำงานได้อย่างถูกต้อง
+                                ช่วยให้องค์กรสามารถวางแผนในการจัดการทรัพยากรบุคคลเพื่อให้ตรงกับความต้องการและวัตถุประสงค์ทางกลยุทธ์ขององค์กร
                             </li>
                         </ul>
 
-                        <div class="text-weight-medium">2.) การจัดการข้อมูลทรัพยากรบุคคล</div>
+                        <div class="text-weight-medium">การเพิ่มประสิทธิภาพในการทำงาน</div>
                         <ul>
                             <li>
-                                การสร้างระบบที่สามารถจัดการข้อมูลทรัพยากรบุคคลอย่างมีประสิทธิภาพ เพื่อให้สามารถเข้าถึงข้อมูลได้ทันทีและมีความถูกต้อง
+                                ช่วยลดความซ้อนของโครงสร้างองค์กร และเพิ่มความชัดเจนในการรับผิดชอบและหน้าที่ของแต่ละตำแหน่ง
                             </li>
                         </ul>
 
-                        <div class="text-weight-medium">3.) การติดตามและประเมินประสิทธิภาพ</div>
+                        <div class="text-weight-medium">การจัดการบัญชีและความโปร่งใส</div>
                         <ul>
                             <li>
-                                การสร้างระบบติดตามและประเมินประสิทธิภาพของพนักงาน ซึ่งทำให้สามารถปรับปรุงและปรับให้เหมาะสมตามความต้องการขององค์กร
-                            </li>
-                        </ul>
-
-    
-
-
-                    </div>
-                </q-card>
-            </div>
-            <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
-        </div>
-
-        <div class="q-pa-md col-12" style="padding-top: 0px;">
-            <div class="text-weight-medium">รายละเอียดและขั้นตอนการดูแลระบบ
-                <q-card  class="card1 q-pa-md text-weight-regular">
-                    <div class="col-12">
-                        <div class="text-weight-medium">1.) ความปลอดภัยของข้อมูล</div>
-                        <ul>
-                            <li>
-                                มีมาตรการที่เข้มงวดเพื่อรักษาความปลอดภัยของข้อมูลที่เกี่ยวข้องกับทรัพยากรบุคคล รวมถึงการใช้เทคโนโลยีการรักษาความปลอดภัย  การให้สิทธิ์การ
-                            เข้าถึงข้อมูล, และการป้องกันการใช้ข้อมูลที่ไม่ถูกต้อง
+                                ช่วยในการบันทึกข้อมูลที่เกี่ยวข้องกับบุคลากร เช่น ประวัติการทำงาน ทักษะ และประสบการณ์
                             </li>
                         </ul>
                     </div>
                 </q-card>
-            </div>
-            <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
-        </div>
-        
-        <div class="q-pa-md col-12" style="padding-top: 0px;">
-            <div class="text-weight-medium">คำถามที่พบบ่อย
-                <q-card  class="card1 q-pa-md text-weight-regular">
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
+
+
+
+      <q-expansion-item
+            class="text-weight-medium"
+            expand-separator
+            label="ขอบเขตการดูแลระบบ"
+            
+      >
+        <q-card>
+          <q-card-section>
+            <q-card  class="card1 text-weight-regular">
+                    <div class="col-12">
+                        <ul>
+                            
+                            <li>
+                                ระบบทรัพยากรบุคคลควรกำหนดบทบาทและความรับผิดชอบของแต่ละตำแหน่งในองค์กรอย่างชัดเจน เพื่อให้ทุกคนในองค์กรทราบหน้าที่และการรับผิดชอบของตนเอง และสามารถปฏิบัติตามนโยบายและขั้นตอนการทำงานได้อย่างถูกต้อง
+                            </li>
+                            <li>
+                                ระบบควรสนับสนุนกระบวนการปรับปรุงผังโครงสร้างลูกจ้างเมื่อมีการเปลี่ยนแปลงในการจัดการ และระบบควรสนับสนุนกระบวนการบันทึกข้อมูลที่เกี่ยวข้องกับบุคลากรอย่างถูกต้องและเป็นประจำ
+                            </li>
+                            <li>
+                                ระบบควรแสดงการแสดงผังโครงสร้างลูกจ้างที่ชัดเจน และระบุความรับผิดชอบของแต่ละตำแหน่ง
+                            </li>
+                        </ul>
+                    </div>
+                </q-card>
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
+
+
+
+
+      <q-expansion-item
+            class="text-weight-medium"
+            expand-separator
+            label="รายละเอียดและขั้นตอนการดูแลระบบ"
+            
+      >
+        <q-card>
+          <q-card-section>
+            <q-card  class="card1 q-pa-md text-weight-regular">
+                    <div class="col-12">
+                        <div class="text-weight-medium">1.) การจัดการตำแหน่ง</div>
+                        <ul>
+                            <li>
+                                กำหนดตำแหน่งงานที่เหมาะสมและชัดเจนในองค์กร
+                            </li>
+                            <li>
+                                ระบุความรับผิดชอบและคุณสมบัติที่ต้องการสำหรับแต่ละตำแหน่ง
+                            </li>
+                            <li>
+                                ตรวจสอบและอัปเดตข้อมูลเกี่ยวกับตำแหน่งต่างๆ
+                            </li>
+                        </ul>
+
+                        <div class="text-weight-medium">2.) การสร้างแผนภูมิโครงสร้าง</div>
+                        <ul>
+                            <li>
+                                สร้างแผนภูมิโครงสร้างที่แสดงความสัมพันธ์ระหว่างตำแหน่งและบุคลากร ทำให้แผนภูมิโครงสร้างเข้าใจง่ายและสะท้อนความโปร่งใสในการบริหาร
+                            </li>
+                        </ul>
+
+                        <div class="text-weight-medium">3.) การจัดการโครงสร้างลูกจ้าง</div>
+                        <ul>
+                            <li>
+                                จัดหมวดหมู่หรือกลุ่มลูกจ้างตามลักษณะการทำงานหรือสาขาภาควิชา 
+                            </li>
+                            <li>
+                                ตรวจสอบและอัปเดตข้อมูลส่วนตัวของลูกจ้าง
+                            </li>
+                        </ul>
+
+
+                        <div class="text-weight-medium">4.) การจัดการบัญชี</div>
+                        <ul>
+                            <li>
+                                บันทึกและดูแลข้อมูลทรัพยากรบุคคล เช่น ข้อมูลส่วนตัว, ประสบการณ์การทำงาน, การศึกษา, จัดการข้อมูลเกี่ยวกับการลา, การเลื่อนตำแหน่ง และการพัฒนา 
+                            </li>
+                            <li>
+                                รักษาความถูกต้องและครบถ้วนของข้อมูลบุคคล และให้สิทธิ์การเข้าถึงข้อมูลตามความจำเป็น
+                            </li>
+                        </ul>
+
+
+                    </div>
+                    
+                </q-card>
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
+
+
+
+      <q-expansion-item
+            class="text-weight-medium"
+            expand-separator
+            label="คำถามที่พบบ่อย"
+            
+      >
+        <q-card>
+          <q-card-section>
+            <q-card  class="card1 q-pa-md text-weight-regular">
                     <div class="col-12 row">
                         <q-icon class="iconQA" name="mdi-cloud-question"/>
-                        <div class="text-weight-medium" style="color: #016987;">ข้อมูลส่วนบุคคลถูกปกปิดหรือปล่อยไว้หรือไม่ ?</div>
+                        <div class="text-weight-medium" style="color: #016987;">หากต้องการจัดการตำแหน่งในระบบโครงสร้างอัตรากำลังอย่างไร ? </div>
+                        <br>
                         <ul>
                             <li>
-                                ในระบบข้อมูลทรัพยากรบุคคลของเราข้อมูลส่วนบุคคลถูกควบคุมอย่างเข้มงวดการเข้าถึงถูกจำกัดด้วยสิทธิ์และมีการตรวจสอบเพื่อให้มั่นใจว่าเฉพาะบุคคลที่มีความจำเป็นในการเข้าถึงข้อมูลได้
+                                กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง  
+                                <span 
+                                style="color: #02a998;
+                                padding: 2px;">
+                                    “จัดการตำแหน่ง”
+                                </span>
+                                แล้วกดไอคอน
+                                    <q-icon
+                                    name="mdi-pencil-outline"
+                                    style="margin: 0 5px; color: #02a998"
+                                    size="xs"
+                                    />
+                                เพื่อเพิ่ม ลบหรือแก้ไขข้อมูล โดยเลือกกดรายการจัดการตำแหน่งที่ต้องการจัดการ และสามารถกดเลือกรายการจัดการตำแหน่งเพื่อแก้ไขข้อมูลได้ 
+                               
+                                <div 
+                                style="
+                                border: 1px solid #d7d7d7
+                                bg-color; 
+                                padding: 5px ; 
+                                margin-top: 10px;
+                                border-radius: 5px;
+                                background-color: rgba(207, 207, 207, 0.375);
+                                ">
+                                    ทั้งนี้ผู้ใช้งานสามารถศึกษาวิธีจัดการตำแหน่งเพิ่มเติมได้จาก
+                                        <a href="https://bma-ehr-manual.frappet.synology.me/structuremain" target="_blank">https://bma-ehr-manual.frappet.synology.me/structuremain</a>
+                                        ตั้งแต่รูปภาพที่ 3-3 ถึง 3-6
+                                    
+                                </div>
                             </li>
                         </ul>
                     </div>
 
-                </q-card>
-            </div>
 
-        </div>
+
+
+                    <div class="col-12 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">หากต้องการจัดการโครงสร้างในระบบโครงสร้างอัตรากำลังต้องทำอย่างไร ? </div>
+                        <br>
+                        <ul>
+                            <li>
+                                กดเลือกแถบเมนูย่อยของโครงสร้างอัตรากำลัง  
+                                <span 
+                                style="color: #02a998;
+                                padding: 2px;">
+                                    “ผังโครงสร้าง”
+                                </span>
+                                แล้วกดไอคอน
+                                    <q-icon
+                                    name="mdi-pencil-outline"
+                                    style="margin: 0 5px; color: #02a998"
+                                    size="xs"
+                                    />
+                                    เพื่อเพิ่ม ลบหรือแก้ไขข้อมูลโครงสร้างได้
+                               
+                                <div 
+                                style="
+                                border: 1px solid #d7d7d7
+                                bg-color; 
+                                padding: 5px ; 
+                                margin-top: 10px;
+                                border-radius: 5px;
+                                background-color: rgba(207, 207, 207, 0.375);
+                                ">
+                                    ทั้งนี้ผู้ใช้งานสามารถศึกษาวิธีจัดการตำแหน่งเพิ่มเติมได้จาก
+                                        <a href="https://bma-ehr-manual.frappet.synology.me/structuremain" target="_blank">https://bma-ehr-manual.frappet.synology.me/structuremain</a>
+                                        ตั้งแต่รูปภาพที่ 3-10 ถึง 3-11
+                                    
+                                </div>
+                            </li>
+                        </ul>
+                    </div>
+
+
+
+                    <div class="col-12 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">หากต้องการสร้างตำแหน่ง ในระบบโครงสร้างอัตรากำลังต้องทำอย่างไร ?</div>
+                        <br>
+                        <ul>
+                            <li>
+                                สามารถเลือกกดไอคอน 
+                                <span 
+                                style="color: #02a998;
+                                padding: 2px;">
+                                    “ผังโครงสร้าง”
+                                </span>
+                                แล้วกดไอคอน
+                                    <q-icon
+                                    name="mdi-plus"
+                                    style="margin: 0 5px; color: #02a998"
+                                    size="xs"
+                                    />
+                                    ที่ตำแหน่ง เพื่อเพิ่มข้อมูลตำแหน่ง ในตารางเพิ่มโครงสร้างอัตรากำลังภายใต้สำนักงาน 
+                            </li>
+                        </ul>
+                    </div>
+
+
+                    <div class="col-12 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">หากต้องการสร้างหน่วยงาน ในระบบโครงสร้างอัตรากำลังต้องทำอย่างไร ?</div>
+                        <br>
+                        <ul>
+                            <li>
+                                สามารถเลือกกดไอคอน 
+                                <span 
+                                style="color: #02a998;
+                                padding: 2px;">
+                                    “ผังโครงสร้าง”
+                                </span>
+                                แล้วกดไอคอน
+                                    <q-icon
+                                    name="mdi-plus"
+                                    style="margin: 0 5px; color: #02a998"
+                                    size="xs"
+                                    />
+                                    ที่หน่วยงาน เพื่อเพิ่มข้อมูลหน่วยงาน  ในตารางเพิ่มโครงสร้างอัตรากำลังภายใต้สำนักงาน 
+                            </li>
+                        </ul>
+                    </div>
+
+
+
+
+                    <div class="col-12 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">หากต้องการเชื่อมโครงสร้างอย่างไร ในระบบโครงสร้างอัตรากำลังต้องทำอย่างไร ?</div>
+                        <br>
+                        <ul>
+                            <li style="color: red;">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, deleniti. Odit nemo quidem ipsa at nesciunt tenetur, et fugiat ipsam!
+                            </li>
+                        </ul>
+                    </div>
+
+
+                    <div class="col-12 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">
+                            แต่ละค่าที่แสดงคือ ค่าอะไร ?</div>
+                        <br>
+                        <ul>
+                            <li style="color: red;">
+                                Lorem ipsum dolor sit amet consectetur adipisicing elit. Reiciendis, deleniti. Odit nemo quidem ipsa at nesciunt tenetur, et fugiat ipsam!
+                            </li>
+                        </ul>
+                    </div>
+
+
+                    <div class="col-12 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">
+                        ค่าตัวเลขสีดำ สีแดง ต่างกันอย่างไร ?</div>
+                        
+        <!--                    <ul>
+                            <li>
+                          <span 
+                                style="color: #ff0000;
+                                border: 1px solid #ff0000;
+                                border-radius: 50px;
+                                padding: 2px;
+                                margin: 5px;
+                            
+                                ">
+                                  132
+                                </span> 
+                                สีแดง คือจำนวนคนทั้งหมดขององค์กร  
+                            </li>
+                        </ul>-->  
+                    </div>
+
+
+                    <div class="col-12 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">ข้อมูลที่แสดงในระบบไม่ถูกต้อง ข้อมูลผิดพลาด ควรแก้ไขยังไง</div>
+                        <br>
+                        <ul>
+                            <li>
+                                หากคุณเป็นผู้ใช้ที่พบข้อมูลผิดพลาด ควรรายงานข้อผิดพลาดให้กับทีมทรัพยากรบุคคลหรือทีมที่รับผิดชอบในการดูแลระบบทราบถึงปัญหา และระบุรายงานว่าพบข้อมูลผิดพลาดที่ไหน ลักษณะของข้อผิดพลาด 
+                            </li>
+                            <li>
+                                ลองรีเซ็ตระบบหรือแอปพลิเคชันที่มีปัญหาเพื่อดูอีกครั้งว่าปัญหาที่เกิดขึ้นถูกแก้ไขหรือไม่
+                            </li>
+                            <li>
+                                สามารถติดต่อสอบถามเจ้าหน้าที่ ที่ปุ่ม
+                                <span
+                                            style="
+                                            background-color: #016987;
+                                            border: 1px solid #016987;
+                                            color: white;
+                                            font-size: 12px;
+                                            text-align: center;
+                                            display: inline-block;
+                                            padding: 1px 5px;
+                                            border-radius: 2px;
+                                            margin: 0px 5px 0px 5px;
+
+                                            "
+                                        >
+                                           ติดต่อเรา
+                                        </span>  เพื่อแจ้งให้ทราบถึงปัญหา
+                            </li>
+                        </ul>
+                    </div>
+
+
+                    <div class="col-12 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">เมื่อทำการอับเดตข้อมูลแล้ว เกิดผิดพลาดข้อมูลไม่อับเดต หรือกรอกข้อมูลไม่ครบถ้วน จะแก้ไขปัญหาการอับเดตข้อมูลยังไง</div>
+                        
+                        <ul>
+                            <li>
+                            ตรวจสอบข้อมูลที่กรอก :                          
+                            ตรวจสอบว่าข้อมูลที่คุณกรอกเข้าไปมีความถูกต้องและครบถ้วนหรือไม่ แน่ใจว่าไม่มีข้อมูลที่หลุดหรือป้อนผิดพลาด
+                            </li>
+
+                            <li>
+                            การรีเฟรชหน้าจอหรือลอคเอาท์ :                     
+                            ลองรีเฟรชหน้าจอหรือลอคเอาท์แล้วลองอับเดตข้อมูลอีกครั้ง
+                            </li>    
+
+                            <li>
+                            ติดต่อทีมพัฒนาระบบ :                       
+                            หากทุกขั้นตอนตั้งค่าถูกต้องและปัญหายังคงอยู่ คุณควรติดต่อทีมพัฒนาระบบหรือทีมสนับสนุนเพื่อขอความช่วยเหลือ
+                            </li>
+                        </ul>
+
+                    </div>
+
+
+
+                   
+                </q-card>
+          </q-card-section>
+        </q-card>
+      </q-expansion-item>
+
+    
+    </q-list>
+  </div>
+
+
+
+
+
+
+
+
+
+
+
+ 
+
     </q-card>
 </template>
 
 <style>
 .card1{
-    margin-top:15px;
     background-color:#F8F8F8;
     border-color: #EDEDED !important;
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index c27e807..07b718d 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,6 +7,8 @@ const Organizational = () => import("@/modules/02_organizational/views/Main.vue"
 
 const Contact = () => import("@/modules/00_contact/views/Main.vue");
 
+const Maintenance = () => import("@/modules/001_Maintenance/views/Main.vue");
+
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -31,9 +33,18 @@ const router = createRouter({
           name: "contact",
           component: Contact,
         },
+
+        {
+          path: "/maintenance",
+          name: "maintenance",
+          component: Maintenance,
+        },
       ]
     },
   ]
 })
 
 export default router;
+
+
+
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 02203eb..af4339b 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -26,6 +26,7 @@ const tabManu2 = [
 	{name: '9',label:'เครื่องราชฯ',path: ''},
 	{name: '10',label:'การลา',path: ''},
 	{name: '11',label:'วินัย',path: ''},
+	{name: '12',label:'Maintenance',path: 'maintenance'},
 ];
 
 const mainmenu = [
@@ -42,6 +43,18 @@ const mainmenu = [
 	{text: 'วินัย', icon:'mdi-scale-balance',path: 'organizational'}
 ];
 
+
+const mainmanual = [
+	{text: 'คู่มือการใช้งาน', icon:'mdi-account-outline', path: 'metadata'}
+];
+
+const redirectToManual = () => {
+  const newTab = window.open('https://bma-ehr-manual.frappet.synology.me/', '_blank');
+  if (newTab) {
+    newTab.focus();
+  }
+};
+
 const clickMain = (val: string) => {
 	router.push(val)
 	currentRoute.value = val
@@ -62,6 +75,12 @@ const click = () => {
 	router.push('/contact')
 	currentRoute.value = 'contact'
 };
+
+const clickmainte = () => {
+	router.push('/maintenance')
+	currentRoute.value = 'maintenance'
+};
+
 const scrollInfo = ref({})
 const onScroll = (info: any) => { scrollInfo.value = info}
 
@@ -116,6 +135,7 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 							</template>
 						</q-input>
 					</div>
+
 					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
 						<div class="col-12 row justify-center text-h6 text-dark">ระบบทรัพยากรบุคคล</div>
 						<div class="col-12"><q-separator color="grey-4" /></div>
@@ -127,13 +147,63 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 								:key="index"
 							>
 								<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
-									<q-icon class="col-12 items-center" size="20px" :name="`${menu.icon}`"/>
+									<q-icon class="col-12 items-center" size="25px" :name="`${menu.icon}`"/>
 									<div class="q-pt-md">{{ menu.text }} </div>
 								</q-card>
 							</div>	
 							</div>
 						</div>
 					</div>
+
+
+
+					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
+						<div class="col-12 row justify-center text-h6 text-dark">คู่มือการใช้งาน</div>
+						<div class="col-12"><q-separator color="grey-4" /></div>
+						<div class="col-12">
+							<div class="col-12 row q-col-gutter-lg">
+
+							<div class="col-xs-12 col-sm-12" 
+								v-for="(menu , index) in mainmanual"
+								:key="index"
+							>
+							
+								<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="redirectToManual" ><!-- router.push({ name: `${}`}) -->
+									<q-icon class="col-12 items-center" size="25px" :name="`${menu.icon}`"/>
+									<div class="q-pt-md">คู่มือการใช้งาน</div>
+								</q-card>
+							</div>	
+							</div>
+						</div>
+					</div>
+
+
+
+
+
+					<div class="col-xs-10 col-md-8 row q-col-gutter-md" style=" margin-top: 80px;" v-if="currentRoute == 'home'">
+						<div class="col-12 row justify-center text-h6 text-dark">Maintenant</div>
+						<div class="col-12"><q-separator color="grey-4" /></div>
+						<div class="col-12">
+							<div class="col-12 row q-col-gutter-lg">
+
+							<div class="col-xs-12 col-sm-12" 
+								v-for="(menu , index) in mainmanual"
+								:key="index"
+							>
+							
+								<q-card class="q-pa-md row justify-center text-dark cursor-pointer cardmenu" @click="clickMain(menu.path)" ><!-- router.push({ name: `${}`}) -->
+									<q-icon class="col-12 items-center" size="25px" :name="`${menu.icon}`"/>
+									<div class="q-pt-md">Maintenance</div>
+								</q-card>
+							</div>	
+							</div>
+						</div>
+					</div>
+
+
+
+
 					
 					<div class="col-8 row" style=" margin-top: 80px;" v-else>
 						<q-layout>
@@ -173,6 +243,9 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 
 								</q-page>
 							</q-page-container>
+
+
+							
 						</q-layout>
 					</div>
 				</div>