diff --git a/src/pages/00_manual/MainPage.vue b/src/pages/00_manual/MainPage.vue
index 5c3efa95..b8154c69 100644
--- a/src/pages/00_manual/MainPage.vue
+++ b/src/pages/00_manual/MainPage.vue
@@ -1,4 +1,27 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// NOTE: Library
+import { storeToRefs } from 'pinia';
+
+// NOTE:  Components
+
+// NOTE: Stores & Type
+import { useManualStore } from 'src/stores/manual';
+import { onMounted } from 'vue';
+
+// NOTE: Variable
+const manualStore = useManualStore();
+
+const { dataManual } = storeToRefs(manualStore);
+
+async function fatchManual() {
+  const res = await manualStore.getManual();
+  dataManual.value = res ? res : [];
+}
+
+onMounted(async () => {
+  await fatchManual();
+});
+</script>
 
 <template>
   <div></div>
diff --git a/src/pages/00_manual/ViewPage.vue b/src/pages/00_manual/ViewPage.vue
index f12ba7bc..07ff851f 100644
--- a/src/pages/00_manual/ViewPage.vue
+++ b/src/pages/00_manual/ViewPage.vue
@@ -14,7 +14,10 @@ import mditHighlight from 'markdown-it-highlightjs';
 import { initLang, initTheme } from 'src/utils/ui';
 import { baseUrl } from 'src/stores/utils';
 
+import { useManualStore } from 'src/stores/manual';
+
 const ROUTE = useRoute();
+const manualStore = useManualStore();
 
 const md = new MarkdownIt()
   .use(mditAnchor)
@@ -55,11 +58,10 @@ onUnmounted(() => {
 
 async function getContent() {
   if (!category.value || !page.value) return;
-
-  const res = await fetch(
-    `${baseUrl}/manual/${category.value}/page/${page.value}`,
-  );
-
+  const res = await manualStore.getManualByPage({
+    category: category.value,
+    pageName: page.value,
+  });
   if (res && res.ok) {
     const text = await res.text();
     content.value = text;
diff --git a/src/stores/manual/index.ts b/src/stores/manual/index.ts
new file mode 100644
index 00000000..4c961291
--- /dev/null
+++ b/src/stores/manual/index.ts
@@ -0,0 +1,40 @@
+import { ref } from 'vue';
+import { defineStore } from 'pinia';
+import { api } from 'src/boot/axios';
+import { getToken } from 'src/services/keycloak';
+import { Manual } from './types';
+
+const ENDPOINT = 'manual';
+const baseUrl = '/api/v1';
+
+export async function getManual() {
+  const res = await api.get<Manual[]>(`/${ENDPOINT}`);
+  if (res.status < 400) {
+    return res.data;
+  }
+  return null;
+}
+
+export async function getManualByPage(opt: {
+  category: string;
+  pageName: string;
+}) {
+  const res = await fetch(
+    `${baseUrl}/${ENDPOINT}/${opt.category}/page/${opt.pageName}`,
+  );
+  if (res.status < 400) {
+    return res;
+  }
+  return null;
+}
+
+export const useManualStore = defineStore('manual-store', () => {
+  const dataManual = ref<Manual[]>([]);
+
+  return {
+    getManual,
+    getManualByPage,
+
+    dataManual,
+  };
+});
diff --git a/src/stores/manual/types.ts b/src/stores/manual/types.ts
new file mode 100644
index 00000000..900a91e6
--- /dev/null
+++ b/src/stores/manual/types.ts
@@ -0,0 +1,12 @@
+export type Manual = {
+  label: string;
+  labelEN: string;
+  category: string;
+  page: Page[];
+};
+
+type Page = {
+  namee: string;
+  label: string;
+  labelEN: string;
+};