diff --git a/src/components/Navigations/MainNavigation.js b/src/components/Navigations/MainNavigation.js
index fe3417a..38bdaef 100644
--- a/src/components/Navigations/MainNavigation.js
+++ b/src/components/Navigations/MainNavigation.js
@@ -12,6 +12,46 @@ const MainNavigation = () => {
     if (config===undefined) {
         return <div>Loading ...</div>;
     }
+
+    const handleLoadBackup = async () => {
+        try{
+            const input = document.createElement("input");
+            input.type = "file";
+            input.accept=".zip";
+            input.onchange = async (event) => {
+                const file = event.target.files[0];
+                if(!file)
+                    return;
+                const formData = new FormData();
+                formData.append("file", file);
+                try{
+                    const response = await fetch(
+                        `${config.BACKEND_HOST}/api/backup/load`, {
+                            method: "POST",
+                            headers: {
+                                Authorization: `Bearer ${localStorage.getItem("accessToken")}`,
+                            },
+                            body: formData
+                        }
+                    );
+                    if(response.ok){
+                        const result = await response.json();
+                        alert("Backup loaded");
+                    } else {
+                        const error = await response.json();
+                        alert(`failed to load ${error.error}`);
+                    }
+                } catch (error) {
+                    console.error(error);
+                    alert("error when loading backup");
+                }
+            };
+            input.click();
+        } catch (error) {
+            console.error(error);
+            alert(`Unexpected error`);
+        }
+    }
     const handleGetBackup = async () => {
         try{
             const response = await fetch(
@@ -115,6 +155,13 @@ const MainNavigation = () => {
                                     >
                                         Get Backup
                                     </button>
+                                    <button
+                                        className="button is-primary dropdown-option"
+                                        onClick={handleLoadBackup}
+                                        type="button"
+                                    >
+                                        Load Backup
+                                    </button>
                                     <button
                                         className="button is-danger dropdown-option"
                                         onClick={logout}