diff --git a/package.json b/package.json
index 30fabe1..a06cd86 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,8 @@
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "eject": "react-app-rewired eject",
-    "upload": "node ./scripts/upload.js"
+    "upload": "node ./scripts/upload_web3.js",
+    "upload_pinata": "node ./scripts/upload_pinata.js"
   },
   "eslintConfig": {
     "extends": [
diff --git a/scripts/upload.js b/scripts/upload_pinata.js
similarity index 100%
rename from scripts/upload.js
rename to scripts/upload_pinata.js
diff --git a/scripts/upload_web3.js b/scripts/upload_web3.js
new file mode 100644
index 0000000..2cf482d
--- /dev/null
+++ b/scripts/upload_web3.js
@@ -0,0 +1,69 @@
+const fs = require('fs-extra');
+const axios = require('axios');
+const FormData = require('form-data');
+const { Service, Web3Storage, File } = require("web3.storage");
+
+const buildPath = "./build";
+let cssFilename = "";
+
+// move css file
+const cssFiles = fs.readdirSync(buildPath + "/static/css");
+for (let i = 0; i < cssFiles.length; i++) {
+  const filename = cssFiles[i];
+  if (filename.substring(filename.length - 4) === ".css") {
+    cssFilename = filename;
+    fs.moveSync(buildPath + "/static/css/" + filename, buildPath + "/" + filename);
+    break;
+  }
+}
+
+// remove js map file
+const files = fs.readdirSync(buildPath);
+for (let i = 0; i < files.length; i++) {
+  const filename = files[i];
+  if (filename.substring(filename.length - 4) === ".map") {
+    fs.removeSync(buildPath + "/" + filename);
+  }
+  else if (filename.substring(filename.length - 4) === ".css") {
+    cssFilename = filename;
+  }
+}
+
+
+// update index.html file
+let html = fs.readFileSync(buildPath + "/index.html").toString();
+html = html.replaceAll("static/css/" + cssFilename, cssFilename);
+fs.writeFileSync(buildPath + "/index.html", html);
+
+
+// upload to web3
+
+const client = new Web3Storage({
+  token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJkaWQ6ZXRocjoweGVmMDc4OWQwYjRhMWNFNTE5QjIwNjNkRjA2ZjJhRjg2YzBFNjIwRDAiLCJpc3MiOiJ3ZWIzLXN0b3JhZ2UiLCJpYXQiOjE2NjAyNDQ2MDY2MDcsIm5hbWUiOiJ0b2tlbjEifQ.iLx7RjI1SfygVXg0OSDqKFStPlZeEUtGrK53AyY359U",
+});
+
+(async function() {
+  try {
+    const uploadFiles = [];
+    files.forEach((file) => {
+      if (file === "static" || file.substring(file.length - 4) === ".map") {
+        return;
+      }
+  
+      const data = fs.readFileSync("./build/" + file);
+      const blob = new File([data], file);
+      uploadFiles.push(blob);
+    })
+  
+  
+    const rootCid = await client.put(uploadFiles, {
+      name: "build_" + (new Date()).getTime(),
+      maxRetries: 3,
+      wrapWithDirectory: true,
+    });
+  
+    console.log(`https://${rootCid}.ipfs.w3s.link`);
+  } catch (err) {
+    console.log(err);
+  }  
+})();
diff --git a/src/components/SyncWorker.tsx b/src/components/SyncWorker.tsx
index 395497e..15477f1 100644
--- a/src/components/SyncWorker.tsx
+++ b/src/components/SyncWorker.tsx
@@ -54,6 +54,7 @@ const SyncWorker = (props: ISyncWorker) => {
   // }, [account]);
 
   useEffect(() => {
+    sync();
     const intervalId = setInterval(() => sync(), 60000);
     return () => clearInterval(intervalId);
   }, [ipnsCid]);
@@ -67,6 +68,7 @@ const SyncWorker = (props: ISyncWorker) => {
 
     // show syncing progress bar
     dispatch(setSyncing(true));
+    dispatch(setLoading(true));
 
     const client = new Web3Storage({
       token: config.REACT_APP_WEB3_STORAGE_API_TOKEN,
@@ -83,7 +85,6 @@ const SyncWorker = (props: ISyncWorker) => {
     // get the latest synced address
     let lastSyncNumber = getStorageItem(config.LAST_SYNC_NUMBER + ipnsCid, 0) || 0;
 
-    dispatch(setLoading(true));
     // reads data from the w3.storage
     setProgress((lastSyncNumber * 100) / (cids.length || 1));
     for (let i = lastSyncNumber; i < cids.length; i++) {