diff --git a/src/modules/04_system/stores/main.ts b/src/modules/04_system/stores/main.ts
index d43c7683..4c25ae7e 100644
--- a/src/modules/04_system/stores/main.ts
+++ b/src/modules/04_system/stores/main.ts
@@ -4,7 +4,10 @@ import config from "@/app.config";
 
 import { useCounterMixin } from "@/stores/mixin";
 
-import type { DataBackup } from "@/modules/04_system/interface/response/Main";
+import type {
+  DataBackup,
+  BackUpRunning,
+} from "@/modules/04_system/interface/response/Main";
 
 import { ref } from "vue";
 
@@ -20,6 +23,13 @@ const {
 
 export const useDataStore = defineStore("storeData", () => {
   const dataBackUp = ref<DataBackup[]>([]);
+  const prevBackupRunTotal = ref<number>(-1);
+  const backupRunTotal = ref<number>(0);
+
+  const prevRestoreRunTotal = ref<number>(-1);
+  const restoreRunTotal = ref<number>(0);
+
+  const recordRestore = ref<Record<string, DataBackup>>({});
 
   async function fetchListBackup() {
     showLoader();
@@ -27,6 +37,13 @@ export const useDataStore = defineStore("storeData", () => {
       .get(config.API.backup)
       .then((res) => {
         dataBackUp.value = res.data;
+
+        dataBackUp.value = dataBackUp.value.map((item) => {
+          return {
+            ...item,
+            status: "สำเร็จ",
+          };
+        });
       })
       .finally(() => {
         hideLoader();
@@ -38,7 +55,7 @@ export const useDataStore = defineStore("storeData", () => {
     await http
       .post(config.API.backup + "/create")
       .then(async (res) => {
-        fetchListBackup();
+        await backupRunningList();
       })
       .finally(() => {
         hideLoader();
@@ -52,7 +69,7 @@ export const useDataStore = defineStore("storeData", () => {
         data: { filename: filename },
       })
       .then(async (res) => {
-        fetchListBackup();
+        await fetchListBackup();
       })
       .finally(() => {
         hideLoader();
@@ -60,21 +77,95 @@ export const useDataStore = defineStore("storeData", () => {
   }
 
   async function restore(filename: string) {
-    showLoader();
     await http
-      .post(config.API.restore, {
+      .post<string>(config.API.restore, {
         filename: filename,
       })
-      .then((res) => {
-        fetchListBackup();
-      })
-      .finally(() => {
-        hideLoader();
+      .then(async (res) => {
+        const tempValue = dataBackUp.value.find((item) => {
+          if (item.name === filename) {
+            return true;
+          }
+        });
+
+        if (tempValue) {
+          recordRestore.value[res.data] = tempValue;
+        }
+
+        restoreRunningList();
+      });
+  }
+
+  async function backupRunningList() {
+    await http
+      .get<BackUpRunning[]>(config.API.backup + "/backup-running-list")
+      .then(async (res) => {
+        backupRunTotal.value = res.data.length;
+
+        if (backupRunTotal.value == 0) {
+          fetchListBackup();
+          prevBackupRunTotal.value = backupRunTotal.value;
+          return;
+        }
+
+        setTimeout(async () => {
+          backupRunningList();
+        }, 1000);
+
+        if (prevBackupRunTotal.value !== backupRunTotal.value) {
+          res.data.forEach((item) => {
+            const index = dataBackUp.value.findIndex((data) => {
+              if (data.name === item.created_at.toString()) return true;
+            });
+
+            if (index === -1) {
+              dataBackUp.value.push({
+                id: item.created_at.toString(),
+                name: "-",
+                timestamp: item.created_at,
+                status: item.running ? "running" : "success",
+              });
+            }
+          });
+
+          prevBackupRunTotal.value = backupRunTotal.value;
+        }
+      });
+  }
+
+  async function restoreRunningList() {
+    await http
+      .get<BackUpRunning[]>(config.API.backup + "/restore-running-list")
+      .then(async (res) => {
+        console.log(res.data);
+
+        restoreRunTotal.value = res.data.length;
+
+        if (restoreRunTotal.value == 0) {
+          fetchListBackup();
+          prevRestoreRunTotal.value = restoreRunTotal.value;
+          return;
+        }
+
+        setTimeout(async () => {
+          restoreRunningList();
+        }, 1000);
+
+        if (prevRestoreRunTotal.value !== restoreRunTotal.value) {
+          for (const [key, value] of Object.entries(recordRestore.value)) {
+            if (!res.data.find((v) => v.id === key))
+              delete recordRestore.value[key];
+            else value.status = "running";
+          }
+
+          prevRestoreRunTotal.value = restoreRunTotal.value;
+        }
       });
   }
 
   return {
     dataBackUp,
+    backupRunTotal,
 
     fetchListBackup,
     createBackUp,