diff --git a/src/modules/03_logs/views/lists.vue b/src/modules/03_logs/views/lists.vue
index b2720a1b..94551156 100644
--- a/src/modules/03_logs/views/lists.vue
+++ b/src/modules/03_logs/views/lists.vue
@@ -1,11 +1,124 @@
 <script setup lang="ts">
-import { ref } from "vue";
+/** importType*/
+
+/** importComponents*/
+import CardComponents from "@/modules/03_logs/components/CardComponents.vue";
 import LogTable from "@/modules/03_logs/components/LogTable.vue";
 import http from "@/plugins/http";
 import config from "@/app.config";
+import { link } from "fs";
+import { ref } from "vue";
+
+/** importStore*/
+
+/** use*/
+
+const menuList = ref<{ icon: string; label: string; path: string }[]>([
+  {
+    icon: "list",
+    label: "ระบบทะเบียนประวัติ",
+    path: "lists?system=register",
+  },
+  {
+    icon: "",
+    label: "ระบบโครงสร้างหน่วยงานและกรอบอัตรากำลัง",
+    path: "lists?system=organization",
+  },
+  {
+    icon: "",
+    label: "ระบบบันทึกเวลาปฏิบัติงานและการลา",
+    path: "lists?system=timekeeping",
+  },
+  {
+    icon: "mdi-magnify",
+    label: "ระบบการสรรหาบุคคล",
+    path: "lists?system=search",
+  },
+  {
+    icon: "",
+    label: "ระบบการประเมินบุคคล",
+    path: "lists?system=evaluation",
+  },
+  {
+    icon: "",
+    label: "ระบบพ้นจากราชการ",
+    path: "lists?system=recruit",
+  },
+  {
+    icon: "",
+    label: "ระบบการเลื่อนเงินเดือน/ค่าจ้าง",
+    path: "lists?system=payroll",
+  },
+  {
+    icon: "mdi-mdi-account-edit-outline",
+    label: "ระบบการบรรจุ แต่งตั้ง ย้าย โอน",
+    path: "lists?system=transfer",
+  },
+  {
+    icon: "mdi-account-star  ",
+    label: "ระบบการประเมินผลการปฏิบัติราชการระดับบุคคล",
+    path: "lists?system=assessment",
+  },
+  {
+    icon: "mdi-briefcase-account",
+    label: "ระบบการพัฒนาบุคลากร /การศึกษาต่อ",
+    path: "lists?system=development",
+  },
+  {
+    icon: "mdi-medal-outline",
+    label: "ระบบงานเครื่องราชอิสริยาภรณ์",
+    path: "lists?system=machine",
+  },
+  {
+    icon: "mdi-monitor-dashboard",
+    label: "ระบบการรายงานและ Dashboard",
+    path: "lists?system=report",
+  },
+  {
+    icon: "mdi-scale-balance",
+    label: "ระบบดำเนินการทางวินัย",
+    path: "lists?system=cybersecurity",
+  },
+  {
+    icon: "mdi-briefcase-account",
+    label: "ระบบบริการเจ้าของข้อมูลบุคคล",
+    path: "lists?system=owner",
+  },
+  {
+    icon: "mdi-account-settings-outline",
+    label: "ระบบข้อมูลหลัก",
+    path: "lists?system=master",
+  },
+  {
+    icon: "mdi-account-child-circle",
+    label: "ระบบ Admin",
+    path: "lists?system=admin",
+  },
+  {
+    icon: "mdi-shield-key",
+    label: "ระบบ Single Sign-On",
+    path: "lists?system=sso",
+  },
+]);
 </script>
 
 <template>
+  <div>
+    <div class="q-pl-lg q-pb-lg text-h6">ประวัติกิจกรรม (Logs)</div>
+
+    <div class="row q-col-gutter-lg full-width">
+      <div class="col-3" :key="index" v-for="(item, index) in menuList">
+        <CardComponents
+          class="cursor-pointer"
+          @click="$router.push(item.path)"
+          :index="index"
+          :icon="item.icon"
+          :label="item.label"
+        />
+      </div>
+    </div>
+  </div>
+
   <div class="row q-mb-lg">
     <q-btn
       flat
@@ -28,3 +141,5 @@ import config from "@/app.config";
     <LogTable />
   </div>
 </template>
+
+<style scoped lang="scss"></style>