diff --git a/README.md b/README.md
index daf8ee8..e874084 100644
--- a/README.md
+++ b/README.md
@@ -1,3 +1,10 @@
-# How to install
+# About
+Blog project built on web3.storage
+
+# Development
 - npm install
-- npm start
\ No newline at end of file
+- npm start
+
+# Deploy to IPFS
+- npm run build
+- npm run upload
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 5c3d1b4..c47c147 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,8 @@
         "@walletconnect/web3-provider": "^1.8.0",
         "axios": "^0.27.2",
         "crypto-js": "^4.1.1",
+        "form-data": "^4.0.0",
+        "fs-extra": "^10.1.0",
         "markdown-it": "^13.0.1",
         "process": "^0.11.10",
         "react": "^18.2.0",
diff --git a/package.json b/package.json
index 4bcb965..30fabe1 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,8 @@
     "@walletconnect/web3-provider": "^1.8.0",
     "axios": "^0.27.2",
     "crypto-js": "^4.1.1",
+    "form-data": "^4.0.0",
+    "fs-extra": "^10.1.0",
     "markdown-it": "^13.0.1",
     "process": "^0.11.10",
     "react": "^18.2.0",
@@ -50,7 +52,8 @@
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
-    "eject": "react-app-rewired eject"
+    "eject": "react-app-rewired eject",
+    "upload": "node ./scripts/upload.js"
   },
   "eslintConfig": {
     "extends": [
diff --git a/scripts/upload.js b/scripts/upload.js
new file mode 100644
index 0000000..565b9c2
--- /dev/null
+++ b/scripts/upload.js
@@ -0,0 +1,73 @@
+const fs = require('fs-extra');
+const axios = require('axios');
+const FormData = require('form-data');
+
+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;
+  }
+}
+
+const pinata = {
+  apiKey: '74b148e5d7e7f830d57e',
+  apiSecret: 'a0eee26f43e71af17cc83a8d46d877581dbfe11dba6ef7287dcc28781241bc37',
+  jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySW5mb3JtYXRpb24iOnsiaWQiOiJhNDBlNzQwOS03Mzc1LTQxNmUtOTY3Zi1mNTdmNmQyZjM5YWMiLCJlbWFpbCI6Imxlb2d1c2hpa2VuMDExMEBnbWFpbC5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwicGluX3BvbGljeSI6eyJyZWdpb25zIjpbeyJpZCI6IkZSQTEiLCJkZXNpcmVkUmVwbGljYXRpb25Db3VudCI6MX0seyJpZCI6Ik5ZQzEiLCJkZXNpcmVkUmVwbGljYXRpb25Db3VudCI6MX1dLCJ2ZXJzaW9uIjoxfSwibWZhX2VuYWJsZWQiOmZhbHNlLCJzdGF0dXMiOiJBQ1RJVkUifSwiYXV0aGVudGljYXRpb25UeXBlIjoic2NvcGVkS2V5Iiwic2NvcGVkS2V5S2V5IjoiNzRiMTQ4ZTVkN2U3ZjgzMGQ1N2UiLCJzY29wZWRLZXlTZWNyZXQiOiJhMGVlZTI2ZjQzZTcxYWYxN2NjODNhOGQ0NmQ4Nzc1ODFkYmZlMTFkYmE2ZWY3Mjg3ZGNjMjg3ODEyNDFiYzM3IiwiaWF0IjoxNjY0MzA2OTk5fQ.vtp_-dfhkZd1WCj1up0-LLljXsTB21gfQBczI2zOJug'
+};
+
+// 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 pinata
+const api = axios.create({
+  headers: {
+    common: {
+      pinata_api_key: pinata.apiKey,
+      pinata_secret_api_key: pinata.apiSecret,
+    },
+  },
+})
+
+const data = new FormData()
+files.forEach((file) => {
+  if (file === "static" || file.substring(file.length - 4) === ".map") {
+    return;
+  }
+
+  data.append(`file`, fs.createReadStream("./build/" + file), {
+    filepath: "./build/" + file,
+  })
+})
+
+api.post('https://api.pinata.cloud/pinning/pinFileToIPFS', data, {
+  maxContentLength: 'Infinity',
+  maxBodyLength: 'Infinity',
+  headers: {
+    'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
+  },
+}).then(res => {
+  console.log(res.data);
+}, err => {
+  console.error(err);
+});
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index c7e0515..48f761d 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -64,13 +64,13 @@ const NavBar = (props: INavBar) => {
   return (
     <div className="navbar">
       <div className="logo">
-        <a href="/">
+        <Link to="/">
           <img
-            src="/logo.png"
+            src="./logo.png"
             className="item-image"
             alt="Protocol Labs"
           />
-        </a>
+        </Link>
       </div>
       <div className="nav-items">
         <Link to="/main" title="Home">
diff --git a/src/components/SyncWorker.tsx b/src/components/SyncWorker.tsx
index a8fb213..234ca3e 100644
--- a/src/components/SyncWorker.tsx
+++ b/src/components/SyncWorker.tsx
@@ -49,9 +49,11 @@ const SyncWorker = (props: ISyncWorker) => {
 
     setProgress(lastSyncNumber * 100 / (uploadObjects.length || 1));
     for (let i = lastSyncNumber; i < uploadObjects.length; i++) {
+      console.log({progress})
       const upload = uploadObjects[i];
       if (upload.name.indexOf("image_") === 0) {
         setStorageItem(config.LAST_SYNC_NUMBER, i + 1);
+        setProgress((i + 1) * 100 / (uploadObjects.length || 1));
         continue;
       }
 
@@ -87,7 +89,7 @@ const SyncWorker = (props: ISyncWorker) => {
       setStorageItem(config.LAST_SYNC_RECORD + i, record);
       setStorageItem(config.LAST_SYNC_NUMBER, i + 1);
       
-      setProgress((lastSyncNumber + 1) * 100 / (uploadObjects.length || 1));
+      setProgress((i + 1) * 100 / (uploadObjects.length || 1));
     }
 
     dispatch(resetFromLocalStorage(lastSyncNumber));
@@ -104,7 +106,7 @@ const SyncWorker = (props: ISyncWorker) => {
   };
 
   return isSyncing ? (
-    <div className="sync-component" title="Syncing ...">
+    <div className="sync-component" title={"Syncing " + progress + "%"}>
       {progress >= 0 && <LinearProgress variant="determinate" value={progress} color="success" />}
     </div>
   ) : null;
diff --git a/src/pages/MainLayout.tsx b/src/pages/MainLayout.tsx
index 4eed850..cfee85d 100644
--- a/src/pages/MainLayout.tsx
+++ b/src/pages/MainLayout.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import {
-  BrowserRouter as Router,
+  HashRouter as Router,
   Routes,
   Route,
   Navigate,