diff --git a/src/interface/request/main/main.ts b/src/interface/request/main/main.ts
index 8f7b8f8e..bbed2f86 100644
--- a/src/interface/request/main/main.ts
+++ b/src/interface/request/main/main.ts
@@ -132,12 +132,23 @@ const menuList = readonly<any[]>([
     role: ["SUPER_ADMIN", "ADMIN"],
   },
   {
-    key: 6,
+    key: 2,
     icon: "mdi-file-document-outline",
     activeIcon: "mdi-file-document-outline",
-    label: "รายการคำสั่งและ Template",
-    path: "commandTemplate",
+    label: "คำสั่งและ Template",
     role: ["SUPER_ADMIN", "ADMIN"],
+    children: [
+      {
+        key: 2.0,
+        label: "รายการคำสั่ง",
+        path: "commandTemplate",
+      },
+      {
+        key: 2.0,
+        label: "Template สำหรับลงในตำแหน่ง/เงินเดือน",
+        path: "salaryTemplate",
+      },
+    ],
   },
 ]);
 
diff --git a/src/modules/05_command/interface/index/Main.ts b/src/modules/05_command/interface/index/Main.ts
index 30ce3097..b7292feb 100644
--- a/src/modules/05_command/interface/index/Main.ts
+++ b/src/modules/05_command/interface/index/Main.ts
@@ -20,8 +20,21 @@ interface ListOrder {
   category?: string;
 }
 
+interface ListTemplateSalary {
+  id: number | null;
+  name: string;
+  status?: boolean;
+}
+
 interface Tabs {
   value: string;
   label: string;
 }
-export type { Pagination, DateOption, ActiveOptions, ListOrder, Tabs };
+export type {
+  Pagination,
+  DateOption,
+  ActiveOptions,
+  ListOrder,
+  Tabs,
+  ListTemplateSalary,
+};
diff --git a/src/modules/05_command/router.ts b/src/modules/05_command/router.ts
index 6ba2bcc0..6040390a 100644
--- a/src/modules/05_command/router.ts
+++ b/src/modules/05_command/router.ts
@@ -1,4 +1,6 @@
 const ListsPage = () => import("@/modules/05_command/views/lists.vue");
+const SalaryTemplate = () =>
+  import("@/modules/05_command/views/salaryLists.vue");
 
 export default [
   {
@@ -9,4 +11,12 @@ export default [
       Role: ["SUPER_ADMIN", "ADMIN"],
     },
   },
+  {
+    path: "/salary-template",
+    name: "salaryTemplate",
+    component: SalaryTemplate,
+    meta: {
+      Role: ["SUPER_ADMIN", "ADMIN"],
+    },
+  },
 ];
diff --git a/src/modules/05_command/views/salaryLists.vue b/src/modules/05_command/views/salaryLists.vue
new file mode 100644
index 00000000..874bc5a0
--- /dev/null
+++ b/src/modules/05_command/views/salaryLists.vue
@@ -0,0 +1,356 @@
+<script setup lang="ts">
+import { ref, onMounted, reactive } from "vue";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/modules/05_command/stores/main";
+
+import type {
+  ActiveOptions,
+  ListTemplateSalary,
+} from "@/modules/05_command/interface/index/Main";
+
+import Header from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const store = useDataStore();
+const {
+  dialogConfirm,
+  success,
+  showLoader,
+  hideLoader,
+  dialogRemove,
+  messageError,
+} = mixin;
+
+const isActive = ref<string>(""); // สถานะของรายการคำสั่ง
+// options สถานะการใช้งาน
+const activeOptions = ref<ActiveOptions[]>([
+  {
+    value: true,
+    label: "Active",
+  },
+  {
+    value: false,
+    label: "InActive",
+  },
+]);
+
+const dataForm = reactive<ListTemplateSalary>({
+  id: null,
+  name: "",
+  status: false,
+});
+const lists = ref<ListTemplateSalary[]>([]); // list คำสั่ง
+const isEdit = ref<boolean>(false); //เก็บ true/false เช็คแก้ไข
+const dialogForm = ref<boolean>(false); // model คำสั่ง
+
+/**
+ * ฟังก์ชั่นค้นหาคำสั่ง ตามสถานะ
+ * @param val สถานะ true/false
+ */
+function searchByStatus(val: string) {
+  console.log(val);
+}
+
+/** เปิด dialog */
+function onDialogAdd() {
+  isEdit.value = false;
+  dialogForm.value = true;
+}
+/**
+ * เปิด dialog Edit
+ * @param data ข้อมูลคำสั่ง
+ */
+function onDialogEdit(data: ListTemplateSalary) {
+  dataForm.id = data.id;
+  dataForm.name = data.name;
+  dataForm.status = data.status;
+
+  isEdit.value = true;
+  dialogForm.value = true;
+}
+
+/**
+ * ลบ คำสั่ง
+ * @param id id คำสั่ง
+ */
+function onDelete(id: string) {
+  dialogRemove($q, () => {
+    // http
+    //   .delete(config.API.)
+    //   .then((res) => {})
+    //   .catch((e) => {
+    //     messageError($q, e);
+    //   })
+    //   .finally(() => {});
+  });
+}
+
+/** ปิด dialog */
+function closeDialog() {
+  dataForm.id = null;
+  dataForm.name = "";
+  dataForm.status = false;
+
+  isEdit.value = false;
+  dialogForm.value = false;
+}
+
+/** บันทึกข้อมูล dialog */
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+
+/** เก็บ id list คำสั่งที่เลือก เพื่อใช้ class */
+function selectInbox(data: ListTemplateSalary) {
+  dataForm.id = data.id;
+}
+
+/**
+ * ฟังก์ชั่นดึงรายการประเภทคำสั่ง
+ */
+async function fetchOrderType() {
+  lists.value = [
+    {
+      id: 1,
+      name: "เลื่อนเงินเดือน",
+      status: true,
+    },
+    {
+      id: 2,
+      name: "เลื่อนเงินเดือน (ดีเด่น)",
+      status: true,
+    },
+    {
+      id: 3,
+      name: "เลื่อนเงินเดือน (เพิ่มเติม)",
+      status: true,
+    },
+
+    {
+      id: 4,
+      name: "ปรับเงินเดือน",
+      status: true,
+    },
+
+    {
+      id: 5,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา",
+      status: true,
+    },
+    {
+      id: 6,
+      name: "ปรับเงินเดือนเพิ่มเติมตามคุณวุฒิการศึกษา (เพิ่มเติม)",
+      status: true,
+    },
+    {
+      id: 7,
+      name: "เลื่อนเงินเดือนและให้ข้าราชการ กทม. สามัญได้รับเงินเดือนสูงกว่าขั้นสูงของตำแหน่งที่ได้รับแต่งตั้ง",
+      status: true,
+    },
+    {
+      id: 8,
+      name: "เลื่อนเงินเดือนกรณีพิเศษให้แก่ผู้ปฏิบัติงานด้านยาเสพติด",
+      status: true,
+    },
+    {
+      id: 9,
+      name: "{ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+      status: true,
+    },
+    {
+      id: 10,
+      name: "แต่งตั้งข้าราชการ {ประเภทตำแหน่ง} {ชื่อตำแหน่ง} สำนัก{ชื่อสำนัก}",
+      status: true,
+    },
+    {
+      id: 11,
+      name: "แก้ไขคำสั่ง {หน่วยงาน/สำนัก} ที่ {เลขที่}/{ปีงบประมาณ} ลว. {วันที่ลงนาม}",
+      status: true,
+    },
+  ];
+  // showLoader();
+  // await http
+  //   .get(config.API.commandType)
+  //   .then(async (res) => {
+  //     lists.value = res.data.result.map((item: any) => {
+  //       return {
+  //         id: item.id,
+  //         name: item.name,
+  //         status: true,
+  //       };
+  //     });
+  //   })
+  //   .catch((err) => {
+  //     messageError($q, err);
+  //   })
+  //   .finally(() => {
+  //     hideLoader();
+  //   });
+}
+
+/** เริ่มเมื่อโหลดหน้านี้*/
+onMounted(() => {
+  fetchOrderType();
+});
+</script>
+
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    Template สำหรับลงในตำแหน่ง/เงินเดือน
+  </div>
+  <div class="row q-col-gutter-sm">
+    <div class="col-12"></div>
+  </div>
+
+  <q-dialog v-model="dialogForm" persistent>
+    <q-card class="col-12" style="min-width: 30%">
+      <q-form greedy @submit.prevent @validation-success="onSubmit">
+        <Header
+          :tittle="isEdit ? 'แก้ไขคำสั่ง' : 'เพิ่มคำสั่ง'"
+          :close="closeDialog"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="row q-col-gutter-sm">
+            <div class="col-12">
+              <q-input
+                outlined
+                dense
+                v-model="dataForm.name"
+                label="ชื่อคำสั่ง"
+                class="inputgreen"
+                :rules="[(val:string) => !!val || `${'กรุณากรอกชื่อคำสั่ง'}`,]"
+                hide-bottom-space
+              ></q-input>
+            </div>
+            <div class="col-12">
+              <div class="row items-center justify-between border_custom">
+                <p class="q-ma-none">สถานะการใช้งาน</p>
+                <label :class="`toggle-control`">
+                  <input type="checkbox" v-model="dataForm.status" />
+                  <span class="control"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn label="บันทึก" color="secondary" type="submit"
+            ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
+          >
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<style scoped lang="scss">
+:deep(.scrollStyle .q-scrollarea__bar) {
+  background-color: #909090;
+  border-radius: 10px;
+  width: 5px;
+  opacity: 0.1;
+  right: 0px;
+}
+:deep(.scrollStyle .q-scrollarea__thumb) {
+  background-color: #909090;
+  border-radius: 10px;
+  width: 5px;
+  opacity: 0.5;
+  right: 0px;
+}
+.my-menu_link {
+  background: #ebf9f7 !important;
+  border-radius: 5px;
+  color: #1bb19ab8 !important;
+}
+
+.my-menu-link .q-hoverable {
+  border-radius: 5px;
+}
+
+.my-link {
+  font-size: 0.75rem;
+  padding: 2px;
+  min-height: 10px !important;
+}
+
+.my-link:hover {
+  border-radius: 5px;
+}
+
+.border_custom {
+  border-radius: 5px !important;
+  border: 1px solid #c8d3db;
+  height: 40px;
+  padding: 0 12px;
+}
+$toggle-background-color-on: #06884d;
+$toggle-background-color-off: darkgray;
+$toggle-control-color: white;
+$toggle-width: 40px;
+$toggle-height: 25px;
+$toggle-gutter: 3px;
+$toggle-radius: 50%;
+$toggle-control-speed: 0.15s;
+$toggle-control-ease: ease-in;
+$toggle-radius: calc($toggle-height / 2);
+$toggle-control-size: $toggle-height - ($toggle-gutter * 2);
+
+.toggle-control {
+  display: block;
+  position: relative;
+  padding-left: $toggle-width;
+  margin-bottom: 12px;
+  cursor: pointer;
+  font-size: 22px;
+  user-select: none;
+
+  input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+  }
+
+  input:checked ~ .control {
+    background-color: $toggle-background-color-on;
+
+    &:after {
+      left: $toggle-width - $toggle-control-size - $toggle-gutter;
+    }
+  }
+
+  .control {
+    position: absolute;
+    top: -7px;
+    left: -15px;
+    height: $toggle-height;
+    width: $toggle-width;
+    border-radius: $toggle-radius;
+    background-color: $toggle-background-color-off;
+    transition: background-color $toggle-control-speed $toggle-control-ease;
+
+    &:after {
+      content: "";
+      position: absolute;
+      left: $toggle-gutter;
+      top: $toggle-gutter;
+      width: $toggle-control-size;
+      height: $toggle-control-size;
+      border-radius: $toggle-radius;
+      background: $toggle-control-color;
+      transition: left $toggle-control-speed $toggle-control-ease;
+    }
+  }
+}
+</style>