diff --git a/src/components/BlogComponent.tsx b/src/components/BlogComponent.tsx
index c4f76e0..69d6e5d 100644
--- a/src/components/BlogComponent.tsx
+++ b/src/components/BlogComponent.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import Avatar from 'react-avatar';
 import { useSelector } from "react-redux";
+import { getW3link } from "utils/helper";
 
 interface IBlogComponent {
   blog: IBlog;
@@ -13,7 +14,7 @@ const BlogComponent = (props: IBlogComponent) => {
   return (
     <div className="blog-item">
       <div className="user">
-        <Avatar name={users[blog.Creator]?.Name || "Unnamed"} size="30px" round={true} />
+        <Avatar name={users[blog.Creator]?.Name || "Unnamed"} size="30px" round={true} src={!!(users[blog.Creator]?.Image) ? getW3link(users[blog.Creator]?.Image || "") : ''} />
         <div className="name" title={blog.Creator}>{users[blog.Creator]?.Name || blog.Creator}</div>
         <div className="date">{blog.Date?.toLocaleString() || ""}</div>
       </div>
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
index f80af02..d795d6b 100644
--- a/src/components/Loader.tsx
+++ b/src/components/Loader.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import ClipLoader from 'react-spinners/ClipLoader';
+import ReactLoader from 'react-spinners/GridLoader';
 
 interface IProps {}
 
 const Loader = (props: IProps) => {
   return (
     <div className='screen-overlay'>
-      <ClipLoader
-        speedMultiplier={0.5}
-        size={60}
-        color='#0088cc'
+      <ReactLoader
+        speedMultiplier={0.8}
+        size={15}
+        color='#cc0088'
       />
     </div>
   );
diff --git a/src/components/NewBlog.tsx b/src/components/NewBlog.tsx
index 7cef7ea..801851d 100644
--- a/src/components/NewBlog.tsx
+++ b/src/components/NewBlog.tsx
@@ -6,6 +6,7 @@ import { AppDispatch } from "slices/store";
 import { NotificationManager } from "./Notification";
 import { v4 as uuidv4 } from "uuid";
 import { useNavigate } from "react-router-dom";
+import { setLoading } from "slices/viewState";
 
 interface INewBlog {}
 
@@ -25,6 +26,7 @@ const NewBlog = (props: INewBlog) => {
       return;
     }
 
+    dispatch(setLoading(true));
     const blog: IBlog = {
       Type: "ADD_BLOG",
       UUID: uuidv4(),
@@ -41,10 +43,12 @@ const NewBlog = (props: INewBlog) => {
         NotificationManager.success(`"${blog.Title}" Created`, "Blog Created");
         navigate("/main");
         console.log({blog});
+        dispatch(setLoading(false));
       })
       .catch((rejectedValueOrSerializedError) => {
         // handle error here
         console.log({rejectedValueOrSerializedError});
+        dispatch(setLoading(false));
       });
   };
 
diff --git a/src/components/Profile.tsx b/src/components/Profile.tsx
index e2fd8b7..bd6a518 100644
--- a/src/components/Profile.tsx
+++ b/src/components/Profile.tsx
@@ -1,10 +1,13 @@
-import { Button, TextField } from '@mui/material';
-import React, { useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { createUser } from "slices/dbSlice";
+import { Button, Grid, TextField } from "@mui/material";
+import React, { useState, useEffect } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { createUser, uploadImage } from "slices/dbSlice";
 import { AppDispatch } from "slices/store";
 import { NotificationManager } from "./Notification";
 import { useNavigate } from "react-router-dom";
+import Avatar from "react-avatar";
+import { setLoading } from "slices/viewState";
+import { getW3link } from "utils/helper";
 
 interface IProfile {}
 
@@ -18,70 +21,116 @@ const Profile = (props: IProfile) => {
   );
   const [avatar, setAvatar] = useState<File | null>(null);
 
-  const onCreate = () => {
+  const users = useSelector<any, { [key: string]: IUser }>(
+    (state) => state.db.Users
+  );
+  const [currentUser, setCurrentUser] = useState<IUser | null>(null);
+
+  useEffect(() => {
+    setCurrentUser(account ? users[account] : null);
+  }, [account, users]);
+
+  useEffect(() => {
+    setName(currentUser?.Name || "");
+    setBio(currentUser?.Bio || "");
+    console.log({user: currentUser});
+    setAvatar(null);
+  }, [currentUser]);
+
+  const onSave = async () => {
     if (!account) {
       NotificationManager.warning("Please connect to the wallet", "Warn");
       return;
     }
 
-    const user: IUser = {
-      Type: "ADD_USER",
-      Name: name,
-      Wallet: account,
-      Bio: bio
-    };
+    try {
+      dispatch(setLoading(true));
+
+      // save avatar
+      let imageUrl: any = null;
+      if (avatar) {
+        imageUrl = await dispatch(uploadImage(avatar)).unwrap();
+        console.log({imageUrl});
+      } else if (currentUser?.Image) {
+        imageUrl = currentUser?.Image;
+      }
+      
 
-    dispatch(createUser(user))
-      .unwrap()
-      .then((user) => {
-        // handle result here
-        NotificationManager.success(`"${user.Name}" Created`, "User Created");
-        navigate("/main");
-        console.log({user: user});
-      })
-      .catch((rejectedValueOrSerializedError) => {
-        // handle error here
-        console.log({rejectedValueOrSerializedError});
-      });
+      const user: IUser = {
+        Type: "ADD_USER",
+        Name: name,
+        Wallet: account,
+        Bio: bio,
+      };
+
+      if (imageUrl) {
+        user.Image = imageUrl;
+      }
+
+      dispatch(createUser(user))
+        .unwrap()
+        .then((user) => {
+          // handle result here
+          NotificationManager.success("", "Saved");
+          navigate("/main");
+          console.log({ user: user });
+          dispatch(setLoading(false));
+        })
+        .catch((rejectedValueOrSerializedError) => {
+          // handle error here
+          console.log({ rejectedValueOrSerializedError });
+          dispatch(setLoading(false));
+        });
+    } catch (ex) {}
   };
 
   const onFile = (e: any) => {
     setAvatar(e.target.files[0]);
-  }
+  };
 
   return (
-    <div className='profile-page'>
-      <h2>Profile</h2>
-      <label htmlFor='button-asset-images'>
+    <div className="profile-page">
+      <h1>My Profile</h1>
+      <label htmlFor="button-asset-images">
         <input
-          type='file'
-          id='button-asset-images'
-          name='image'
+          type="file"
+          id="button-asset-images"
+          name="image"
           multiple={true}
           onChange={onFile}
           required={true}
-          style={{display: "none"}}
+          style={{ display: "none" }}
         />
-        <Button variant='contained' component='span'>
-          {avatar?.name || "Select Avatar"}
-        </Button>
+        {avatar ? (
+          <Avatar
+            name="Avatar"
+            size="200px"
+            round={true}
+            src={avatar ? URL.createObjectURL(avatar) : ""}
+          />
+        ) : (
+          <Avatar name="Avatar" size="200px" round={true} src={currentUser?.Image ? getW3link(currentUser?.Image) : ""} />
+        )}
       </label>
       <TextField
-        id="title"
+        fullWidth
         label="Name"
         variant="standard"
         size="small"
         onChange={(e: any) => setName(e.target.value)}
         value={name}
+        className="name"
       />
       <TextField
-        id="title"
+        fullWidth
         label="Wallet"
         variant="standard"
         size="small"
         value={account}
+        className="wallet"
       />
       <TextField
+        fullWidth
         id="body"
         label="Bio"
         variant="standard"
@@ -92,8 +141,8 @@ const Profile = (props: IProfile) => {
         value={bio}
       />
       <div className="submit">
-        <Button variant="contained" onClick={onCreate}>
-          Create
+        <Button variant="contained" onClick={onSave} fullWidth>
+          Save
         </Button>
       </div>
     </div>
diff --git a/src/components/SyncWorker.tsx b/src/components/SyncWorker.tsx
index 0f5391d..2b37220 100644
--- a/src/components/SyncWorker.tsx
+++ b/src/components/SyncWorker.tsx
@@ -16,6 +16,8 @@ const SyncWorker = (props: ISyncWorker) => {
   const isSyncing = useSelector<any, boolean>((state) => state.viewState.syncing);
 
   useEffect(() => {
+    const lastSyncNumber = getStorageItem(config.LAST_SYNC_NUMBER, 0) || 0;
+    dispatch(resetFromLocalStorage(lastSyncNumber));
     sync();
   }, []);
 
@@ -34,6 +36,10 @@ const SyncWorker = (props: ISyncWorker) => {
     const lastSyncNumber = getStorageItem(config.LAST_SYNC_NUMBER, 0) || 0;
     for (let i = lastSyncNumber; i < uploadObjects.length; i++) {
       const upload = uploadObjects[i];
+      if (upload.name.indexOf("image_") === 0) {
+        setStorageItem(config.LAST_SYNC_NUMBER, i + 1);
+        continue;
+      }
       const res = await client.get(uploadObjects[i].cid);
       if (!res) {
         continue;
diff --git a/src/slices/dbSlice.ts b/src/slices/dbSlice.ts
index 640fe95..0989544 100644
--- a/src/slices/dbSlice.ts
+++ b/src/slices/dbSlice.ts
@@ -14,8 +14,8 @@ const initialState = {
 
 export const createBlog = createAsyncThunk('createBlog', async (blog: IBlog, {rejectWithValue}) => {
   try {
-    const title = convertTitle(blog.Title);
-    let blob = new File([JSON.stringify(blog, null, 2)], title + "_1", {type: "application/json"})
+    const title = "blog_" + convertTitle(blog.Title);
+    let blob = new File([JSON.stringify(blog, null, 2)], title, {type: "application/json"})
     const rootCid = await client.put([blob], {
       name: title,
       maxRetries: 3,
@@ -31,8 +31,8 @@ export const createBlog = createAsyncThunk('createBlog', async (blog: IBlog, {re
 
 export const createUser = createAsyncThunk('createUser', async (user: IUser, {rejectWithValue}) => {
   try {
-    const title = convertTitle(user.Wallet);
-    let blob = new File([JSON.stringify(user, null, 2)], title + "_2", {type: "application/json"})
+    const title = "user_" + convertTitle(user.Wallet);
+    let blob = new File([JSON.stringify(user, null, 2)], title, {type: "application/json"})
     const rootCid = await client.put([blob], {
       name: title,
       maxRetries: 3,
@@ -46,6 +46,19 @@ export const createUser = createAsyncThunk('createUser', async (user: IUser, {re
   }
 });
 
+export const uploadImage = createAsyncThunk('uploadImage', async (file: File, {rejectWithValue}) => {
+  try {
+    const rootCid = await client.put([file], {
+      name: "image_" + (new Date()).getTime().toString(),
+      maxRetries: 3,
+      wrapWithDirectory: false
+    });
+    return rootCid;
+  } catch (err: any) {
+    return rejectWithValue(err.response.data);
+  }
+});
+
 export const dbSlice = createSlice({
   name: 'dbSlice',
   // `createSlice` will infer the state type from the `initialState` argument
diff --git a/src/styles/components/_footer.scss b/src/styles/components/_footer.scss
index 90a18a8..eba93f3 100644
--- a/src/styles/components/_footer.scss
+++ b/src/styles/components/_footer.scss
@@ -6,7 +6,7 @@
 
   .footer-items {
     display: flex;
-    gap: 30px;
+    gap: 50px;
 
     @media (max-width: 767px) {
       flex-direction: column;
diff --git a/src/styles/components/_profile.scss b/src/styles/components/_profile.scss
index 5b066f8..e4593af 100644
--- a/src/styles/components/_profile.scss
+++ b/src/styles/components/_profile.scss
@@ -1,5 +1,17 @@
 .profile-page {
+  padding: 0 20%;
   display: flex;
   flex-direction: column;
   gap: 20px;
+  align-items: center;
+
+  
+  
+  .name, .wallet {
+    text-align: center;
+  }
+
+  .submit {
+    width: 100%;
+  }
 }
\ No newline at end of file
diff --git a/src/styles/components/_side_bar.scss b/src/styles/components/_side_bar.scss
index bed8d6c..bd70eb8 100644
--- a/src/styles/components/_side_bar.scss
+++ b/src/styles/components/_side_bar.scss
@@ -14,4 +14,4 @@
       margin: 0 0 10px 0;
     }
   }
-}
\ No newline at end of file
+}