diff --git a/src/modules/00_contact/views/Main.vue b/src/modules/00_contact/views/Main.vue
index 83bbee4..170c690 100644
--- a/src/modules/00_contact/views/Main.vue
+++ b/src/modules/00_contact/views/Main.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 </script>
 <template>
-    <div class="q-px-md q-py-sm text-subtitle1 text-white bg-primary text-weight-medium">
-        ติดต่อเรา
-    </div>
+    <div class="col-12 row justify-center text-h6 text-dark q-pt-md">ติดต่อเรา</div>
+	<div class="col-12"><q-separator color="grey-4" /></div>
 
 
     
diff --git a/src/modules/01_metadata/views/Main.vue b/src/modules/01_metadata/views/Main.vue
index 4d4a95c..ba79f0d 100644
--- a/src/modules/01_metadata/views/Main.vue
+++ b/src/modules/01_metadata/views/Main.vue
@@ -1,144 +1,143 @@
 <script setup lang="ts">
 </script>
 <template>
-    <div class="q-px-md q-py-sm text-subtitle1 text-white bg-primary text-weight-medium">
-        ข้อมูลหลัก
-    </div>
-
-    <div class="q-pa-md col-12">
-        <div class="text-weight-medium">วัตถุประสงค์ของการพัฒนา
-            <q-card  class="card1 text-weight-regular">
-                <ul>
-                    <li>
-                        ระบบที่มีวัตถุประสงค์เพื่อจัดการข้อมูลทรัพยากรบุคคล ช่วยให้สามารถจัดเก็บข้อมูลของพนักงานทั้งหมดได้อย่างมีระบบเกี่ยวข้องกับข้อมูลเกี่ยวกับบุคคล, ข้อมูลโครงสร้างหน่วยงาน ข้อมูลข้าราชการ ข้อมูลลูกจ้าง วันลา และข้อมูลอื่นๆ ที่เกี่ยวข้องกับการจัดการทรัพยากรบุคคล
-                    </li>
-                </ul>
-            </q-card>
+    <q-card class="row col-12">
+        <div class="col-12 q-px-md q-py-sm text-subtitle1 text-white bg-primary text-weight-medium">
+            ข้อมูลหลัก
         </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 text-weight-regular">
-                <ul>
-                    <li>
-                        เจ้าหน้าที่ทรัพยากรบุคคลต้องรับผิดชอบในการเก็บรวบรวม บันทึก และบริหารจัดการข้อมูลทรัพยากรบุคคลของพนักงานนอกจากนี้พวกเขาต้องรักษา
-        ความถูกต้องและปลอดภัยของข้อมูลทรัพยากรบุคคลและปฏิบัติตามนโยบายความเป็นส่วนตัว
-                    </li>  
-                </ul>
-
-            </q-card>
+        <div class="q-pa-md col-12">
+            <div class="text-weight-medium">วัตถุประสงค์ของการพัฒนา
+                <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>
-        <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>
+        <div class="q-pa-md col-12" style="padding-top: 0px;">
+            <div class="text-weight-medium">ขอบเขตการดูแลระบบ
+                <q-card  class="card1 text-weight-regular">
                     <ul>
                         <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>
-                    </ul>
-                </div>
-            </q-card>
+                </q-card>
+            </div>
+            <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
         </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 row">
-                    <q-icon class="iconQA" name="mdi-cloud-question"/>
-                    <div class="text-weight-medium" style="color: #016987;">ข้อมูลส่วนบุคคลถูกปกปิดหรือปล่อยไว้หรือไม่ ?</div>
-                    <ul>
-                        <li>
-                            ในระบบข้อมูลทรัพยากรบุคคลของเราข้อมูลส่วนบุคคลถูกควบคุมอย่างเข้มงวดการเข้าถึงถูกจำกัดด้วยสิทธิ์และมีการตรวจสอบเพื่อให้มั่นใจว่าเฉพาะบุคคลที่มีความจำเป็นในการเข้าถึงข้อมูลได้
-                        </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>
-                    <div class="col-12 row">
+        <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 class="text-weight-medium">2.) การจัดการสิทธิ์การเข้าถึง</div>
+                        <ul>
+                            <li>
+                                กำหนดสิทธิ์การเข้าถึงข้อมูลทรัพยากรบุคคลให้แต่ละบุคคลในองค์กรการควบคุมสิทธิ์จะช่วยลดความเสี่ยงที่เกี่ยวข้องกับการเข้าถึงข้อมูลโดยไม่ได้รับอนุญาต
+                            </li>
+                        </ul>
+
+                        <div class="text-weight-medium">3.) การตรวจสอบและการพัฒนาระบบ</div>
+                        <ul>
+                            <li>
+                                ตรวจสอบและบำรุงรักษาข้อมูลเพื่อให้มั่นใจว่าข้อมูลทรัพยากรบุคคลมีความถูกต้อง,ครบถ้วน และอับเดต ทำการตรวจสอบการป้องกันข้อมูลไม่ถูกส่ง
+    หลายครั้ง และดูแลให้มีการบันทึกข้อมูลทรัพยากรบุคคลตลอดเวลา
                             </li>
                         </ul>
                     </div>
-                </div>
-
-
-                <div class="col-12 row">
-                    <q-icon class="iconQA" name="mdi-cloud-question"/>
-                    <div class="text-weight-medium" style="color: #016987;">มีปัญหาเกี่ยวกับความเสถียรของระบบหรือไม่ ?</div>
-                    <div class="col-12 row">
-                        <ul>
-                            <li>
-                                เราติดตามและตรวจสอบกิจกรรมที่เกี่ยวข้องกับความปลอดภัยและมีการป้องกันปัญหาที่เป็นไปได้ทั้งจากภัยคุกคามภายนอกและภายใน
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-
-
-                <div class="col-12 row">
-                    <q-icon class="iconQA" name="mdi-cloud-question"/>
-                    <div class="text-weight-medium" style="color: #016987;">มีการโจมตีหรือความเสี่ยงด้านความปลอดภัยที่ต้องระวังหรือไม่ ?</div>
-                    <div class="col-12 row">
-                        <ul>
-                            <li>
-                                เรามีการตรวจสอบความเสถียรของระบบอย่างสม่ำเสมอ และมีแผนการที่จะดำเนินการแก้ไขทันทีหากมีปัญหา
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-
-
-                <div class="col-12 row">
-                    <q-icon class="iconQA" name="mdi-cloud-question"/>
-                    <div class="text-weight-medium" style="color: #016987;">เมื่อพบข้อผิดพลาดที่เกี่ยวข้องกับระบบทำงาน เช่น ระบบค้างหรือข้อมูลไม่อัพเดต ต้องทำยังไง ?</div>
-                    <div class="col-12 row">
-                        <ul>
-                            <li>
-                                ลองรีเซ็ตระบบหรือแอปพลิเคชันที่มีปัญหาเพื่อดูว่าปัญหาจะถูกแก้ไขหรือไม่ หากการรีเซ็ตระบบไม่ช่วยแก้ไขปัญหาควรติดต่อฝ่ายสนับสนุนเทคนิค
-     หรือทีม IT ขององค์กรเพื่อขอความช่วยเหลือ
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-
-            </q-card>
+                </q-card>
+            </div>
+            <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
         </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 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">ข้อมูลส่วนบุคคลถูกปกปิดหรือปล่อยไว้หรือไม่ ?</div>
+                        <ul>
+                            <li>
+                                ในระบบข้อมูลทรัพยากรบุคคลของเราข้อมูลส่วนบุคคลถูกควบคุมอย่างเข้มงวดการเข้าถึงถูกจำกัดด้วยสิทธิ์และมีการตรวจสอบเพื่อให้มั่นใจว่าเฉพาะบุคคลที่มีความจำเป็นในการเข้าถึงข้อมูลได้
+                            </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>
+                        <div class="col-12 row">
+                            <ul>
+                                <li>
+                                    เรามีกระบวนการสำรองข้อมูลที่ทันสมัยและทดสอบเพื่อให้มั่นใจว่าข้อมูลสามารถกู้คืนได้ทุกครั้งที่จำเป็น
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+
+                    <div class="col-12 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">มีปัญหาเกี่ยวกับความเสถียรของระบบหรือไม่ ?</div>
+                        <div class="col-12 row">
+                            <ul>
+                                <li>
+                                    เราติดตามและตรวจสอบกิจกรรมที่เกี่ยวข้องกับความปลอดภัยและมีการป้องกันปัญหาที่เป็นไปได้ทั้งจากภัยคุกคามภายนอกและภายใน
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+
+                    <div class="col-12 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">มีการโจมตีหรือความเสี่ยงด้านความปลอดภัยที่ต้องระวังหรือไม่ ?</div>
+                        <div class="col-12 row">
+                            <ul>
+                                <li>
+                                    เรามีการตรวจสอบความเสถียรของระบบอย่างสม่ำเสมอ และมีแผนการที่จะดำเนินการแก้ไขทันทีหากมีปัญหา
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+
+                    <div class="col-12 row">
+                        <q-icon class="iconQA" name="mdi-cloud-question"/>
+                        <div class="text-weight-medium" style="color: #016987;">เมื่อพบข้อผิดพลาดที่เกี่ยวข้องกับระบบทำงาน เช่น ระบบค้างหรือข้อมูลไม่อัพเดต ต้องทำยังไง ?</div>
+                        <div class="col-12 row">
+                            <ul>
+                                <li>
+                                    ลองรีเซ็ตระบบหรือแอปพลิเคชันที่มีปัญหาเพื่อดูว่าปัญหาจะถูกแก้ไขหรือไม่ หากการรีเซ็ตระบบไม่ช่วยแก้ไขปัญหาควรติดต่อฝ่ายสนับสนุนเทคนิค
+        หรือทีม IT ขององค์กรเพื่อขอความช่วยเหลือ
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                </q-card>
+            </div>
+        </div>
+    </q-card>
 </template>
 
 <style>
diff --git a/src/modules/02_organizational/views/Main.vue b/src/modules/02_organizational/views/Main.vue
index bba3b7c..233ce3a 100644
--- a/src/modules/02_organizational/views/Main.vue
+++ b/src/modules/02_organizational/views/Main.vue
@@ -1,146 +1,140 @@
 <script setup lang="ts">
 </script>
 <template>
-    <div class="q-px-md q-py-sm text-subtitle1 text-white bg-primary text-weight-medium">
-        โครงสร้างอัตรากำลัง
-    </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>
+    <q-card class="row col-12">
+        <div class="col-12 q-px-md q-py-sm text-subtitle1 text-white bg-primary text-weight-medium">
+            โครงสร้างอัตรากำลัง
         </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">
+                    <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 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">1.) การกำหนดบทบาทและความรับผิดชอบ </div>
-                    <ul>
-                        <li>
-                            ระบบทรัพยากรบุคคลควรกำหนดบทบาทและความรับผิดชอบของแต่ละตำแหน่งในองค์กรอย่างชัดเจนเพื่อให้ทุกคนในองค์กรทราบหน้าที่และการรับผิดชอบของตนเอง และสามารถปฏิบัติตามนโยบายและขั้นตอนการทำงานได้อย่างถูกต้อง
-                        </li>
-                    </ul>
-
-                    <div class="text-weight-medium">2.) การจัดการข้อมูลทรัพยากรบุคคล</div>
-                    <ul>
-                        <li>
-                            การสร้างระบบที่สามารถจัดการข้อมูลทรัพยากรบุคคลอย่างมีประสิทธิภาพ เพื่อให้สามารถเข้าถึงข้อมูลได้ทันทีและมีความถูกต้อง
-                        </li>
-                    </ul>
-
-                    <div class="text-weight-medium">3.) การติดตามและประเมินประสิทธิภาพ</div>
-                    <ul>
-                        <li>
-                            การสร้างระบบติดตามและประเมินประสิทธิภาพของพนักงาน ซึ่งทำให้สามารถปรับปรุงและปรับให้เหมาะสมตามความต้องการขององค์กร
-                        </li>
-                    </ul>
-
- 
-
-
-                </div>
-            </q-card>
+                    </div>
+                </q-card>
+            </div>
+            <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
         </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">
+                    <div class="col-12">
+                        <div class="text-weight-medium">1.) การกำหนดบทบาทและความรับผิดชอบ </div>
+                        <ul>
+                            <li>
+                                ระบบทรัพยากรบุคคลควรกำหนดบทบาทและความรับผิดชอบของแต่ละตำแหน่งในองค์กรอย่างชัดเจนเพื่อให้ทุกคนในองค์กรทราบหน้าที่และการรับผิดชอบของตนเอง และสามารถปฏิบัติตามนโยบายและขั้นตอนการทำงานได้อย่างถูกต้อง
+                            </li>
+                        </ul>
 
-    <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="text-weight-medium">2.) การจัดการข้อมูลทรัพยากรบุคคล</div>
+                        <ul>
+                            <li>
+                                การสร้างระบบที่สามารถจัดการข้อมูลทรัพยากรบุคคลอย่างมีประสิทธิภาพ เพื่อให้สามารถเข้าถึงข้อมูลได้ทันทีและมีความถูกต้อง
+                            </li>
+                        </ul>
+
+                        <div class="text-weight-medium">3.) การติดตามและประเมินประสิทธิภาพ</div>
+                        <ul>
+                            <li>
+                                การสร้างระบบติดตามและประเมินประสิทธิภาพของพนักงาน ซึ่งทำให้สามารถปรับปรุงและปรับให้เหมาะสมตามความต้องการขององค์กร
+                            </li>
+                        </ul>
 
     
-    <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 row">
-                    <q-icon class="iconQA" name="mdi-cloud-question"/>
-                    <div class="text-weight-medium" style="color: #016987;">ข้อมูลส่วนบุคคลถูกปกปิดหรือปล่อยไว้หรือไม่ ?</div>
-                    <ul>
-                        <li>
-                            ในระบบข้อมูลทรัพยากรบุคคลของเราข้อมูลส่วนบุคคลถูกควบคุมอย่างเข้มงวดการเข้าถึงถูกจำกัดด้วยสิทธิ์และมีการตรวจสอบเพื่อให้มั่นใจว่าเฉพาะบุคคลที่มีความจำเป็นในการเข้าถึงข้อมูลได้
-                        </li>
-                    </ul>
-                </div>
 
-            </q-card>
+
+                    </div>
+                </q-card>
+            </div>
+            <div class="col-12" style="margin-top: 30px;"><q-separator color="grey-3" /></div>
         </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">
+                    <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>
+                        </ul>
+                    </div>
 
-    
+                </q-card>
+            </div>
+
+        </div>
+    </q-card>
 </template>
 
 <style>
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 261cf7d..b5c30bc 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -124,17 +124,19 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 							<q-page-container class="col-12">
 								<q-page>
 									<div class="col-12 row ">
-										<q-card class="col-12">
+										<div class="col-12" >
 											<router-view :key="$route.fullPath" />
-										</q-card>
+										</div>
 									</div>
 
-									<div class="col-12 row " v-if="currentRouteName != 'contact'">
-										<q-tabs no-caps active-color="primary" indicator-color="transparent" class="text-grey-8" v-model="tab">
-										<q-tab name="metadata" label="ข้อมูลหลัก" @click="router.push({ path: '/metadata' })"/>
-										<q-tab name="organizational" label="โครงสร้างอัตรากำลัง" @click="router.push({ path: '/organizational' })" />
-										<q-tab name="articles" label="Articles" />
-										</q-tabs>
+									<div class="col-12 row" v-if="currentRouteName != 'contact'">
+										<q-page-scroller position="bottom-center" :scroll-offset="300" :offset="[18, 18]" >
+											<q-tabs content-class="red" no-caps active-color="primary" indicator-color="transparent" class="text-grey-8" v-model="tab">
+												<q-tab name="metadata" label="ข้อมูลหลัก" @click="router.push({ path: '/metadata' })"/>
+												<q-tab name="organizational" label="โครงสร้างอัตรากำลัง" @click="router.push({ path: '/organizational' })" />
+												<q-tab name="articles" label="Articles" />
+											</q-tabs>
+										</q-page-scroller>
 									</div>
 								</q-page>
 							</q-page-container>
@@ -143,7 +145,7 @@ const onScroll = (info: any) => { scrollInfo.value = info}
 				</div>
 			</q-page>
 			<!-- place QPageScroller at end of page -->
-			<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
+			<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 50]">
 				<q-btn fab icon="keyboard_arrow_up" color="blue" />
 			</q-page-scroller>
 		</q-page-container>