diff --git a/src/modules/04_system/components/cardBackupRestore.vue b/src/modules/04_system/components/cardBackupRestore.vue
index 2f540a4f..17b6bcc4 100644
--- a/src/modules/04_system/components/cardBackupRestore.vue
+++ b/src/modules/04_system/components/cardBackupRestore.vue
@@ -12,6 +12,8 @@ import type { DataBackup } from "@/modules/04_system/interface/response/Main";
  * importStore
  */
 import { useCounterMixin } from "@/stores/mixin";
+import { useDataStore } from "@/modules/04_system/stores/main";
+import { storeToRefs } from "pinia";
 
 /**
  * use
@@ -19,6 +21,9 @@ import { useCounterMixin } from "@/stores/mixin";
 const $q = useQuasar();
 const { showLoader, hideLoader, date2Thai, dialogRemove, dialogConfirm } =
   useCounterMixin();
+const { fetchListBackup, createBackUp, restore } = useDataStore();
+const storeData = useDataStore();
+const { dataBackUp } = storeToRefs(storeData);
 
 /**
  * props
@@ -28,7 +33,6 @@ const tab = defineModel<string>("tab", { required: true });
 /**
  * Table
  */
-const rows = ref<DataBackup[]>([]);
 const filter = ref<string>("");
 const visibleColumns = ref<string[]>(["name", "createAt", "status"]);
 const baseColumns = ref<QTableProps["columns"]>([
@@ -50,15 +54,6 @@ const baseColumns = ref<QTableProps["columns"]>([
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
-  {
-    name: "status",
-    align: "left",
-    label: "สถานะ",
-    sortable: true,
-    field: "status",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
 ]);
 const columns = computed(() => {
   if (tab.value === "restore") {
@@ -69,40 +64,15 @@ const columns = computed(() => {
   return baseColumns.value;
 });
 
-/**
- * function เรียกข้อมูลรายการสำรอง
- */
-function fetchListBackup() {
-  showLoader();
-  const data: DataBackup[] = [
-    {
-      id: "1",
-      name: "สำรอง1",
-      createAt: new Date(),
-      status: "ดำเนินการ",
-    },
-    {
-      id: "2",
-      name: "สำรอง2",
-      createAt: new Date(),
-      status: "ดำเนินการ",
-    },
-  ];
-  rows.value = data;
-  setTimeout(() => {
-    hideLoader();
-  }, 500);
-}
-
 /**
  * function สร้างรายการข้อมูสำรอง
  */
 function onCreateBackup() {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
       showLoader();
-      fetchListBackup();
+      await createBackUp();
     },
     "ยืนยันการสร้างข้อมูสำรอง",
     "ต้องการยืนยันการสร้างข้อมูสำรองใช่หรือไม่?"
@@ -124,20 +94,20 @@ function onDelete(id: string) {
  * function คืนค่าข้อมูสำรอง
  * @param id ข้อมูสำรอง
  */
-function onRestore(id: string) {
+function onRestore(name: string) {
   dialogConfirm(
     $q,
-    () => {
+    async () => {
       showLoader();
-      fetchListBackup();
+      await restore(name);
     },
     "ยืนยันการคืนค่าข้อมูสำรอง",
     "ต้องการยืนยันการคืนค่าข้อมูสำรองนี้ใช่หรือไม่?"
   );
 }
 
-onMounted(() => {
-  fetchListBackup();
+onMounted(async () => {
+  await fetchListBackup();
 });
 </script>
 
@@ -184,7 +154,7 @@ onMounted(() => {
     </div>
 
     <d-table
-      :rows="rows"
+      :rows="dataBackUp"
       :columns="columns"
       row-key="name"
       :visible-columns="visibleColumns"
@@ -227,7 +197,7 @@ onMounted(() => {
               icon="restore"
               color="primary"
               size="12px"
-              @click.petvent="onRestore(props.row.id)"
+              @click.petvent="onRestore(props.row.name)"
             >
               <q-tooltip>คืนค่า </q-tooltip>
             </q-btn>