diff --git a/src/components/BlogComponent.tsx b/src/components/BlogComponent.tsx
index 5846d3a..d082312 100644
--- a/src/components/BlogComponent.tsx
+++ b/src/components/BlogComponent.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Avatar from 'react-avatar';
 import { useSelector } from "react-redux";
-import { getW3link, removeHtmlTags } from "utils/helper";
+import { formatDate, getW3link, removeHtmlTags } from "utils/helper";
 import MarkdownIt from 'markdown-it' ;
 import { Link } from "react-router-dom";
 
@@ -20,7 +20,7 @@ const BlogComponent = (props: IBlogComponent) => {
       <div className="user">
         <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 className="date" title={blog.Date?.toLocaleString() || ""}>{formatDate(blog.Date)}</div>
       </div>
       <h3 className="blog-title">{blog.Title}</h3>
       <Link className="blog-body" to={`/main/blogs/${blog.UUID}`}>
diff --git a/src/components/NavBar.tsx b/src/components/NavBar.tsx
index d7f4ef1..f3b5c79 100644
--- a/src/components/NavBar.tsx
+++ b/src/components/NavBar.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { FaHome, FaPlus } from "react-icons/fa";
+import { FaEdit, FaHome, FaPlus } from "react-icons/fa";
 import { useSelector, useDispatch } from "react-redux";
 import { Link } from "react-router-dom";
 import Button from '@mui/material/Button';
@@ -8,6 +8,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { useNavigate } from "react-router-dom";
 import { disconnectWallet } from 'slices/web3Slice';
 import { AppDispatch } from 'slices/store';
+import { MdOutlineEditLocationAlt, MdOutlineHelpOutline, MdOutlineHome } from "react-icons/md";
 
 interface INavBar {}
 
@@ -56,13 +57,19 @@ const NavBar = (props: INavBar) => {
         </a>
       </div>
       <div className="nav-items">
-        <Link to="/main">
-          <FaHome size={30} />
+        <Link to="/main" title="Home">
+          <MdOutlineHome size={30} />
+        </Link>
+        <Link to="/main" title="Help">
+          <MdOutlineHelpOutline size={26} />
         </Link>
         {account && (
-          <Link to="/main/new">
-            <FaPlus size={30} />
-          </Link>
+          <>
+            <div className="separator" />
+            <Link to="/main/new" title="New Blog">
+              <MdOutlineEditLocationAlt size={30} />
+            </Link>
+          </>
         )}
       </div>
       <div className="user">
diff --git a/src/components/NewBlog.tsx b/src/components/NewBlog.tsx
index 1698572..6dc856d 100644
--- a/src/components/NewBlog.tsx
+++ b/src/components/NewBlog.tsx
@@ -94,7 +94,7 @@ const NewBlog = (props: INewBlog) => {
         className="newblog-editor"
       />
       <div className="submit">
-        <Button variant="contained" onClick={onCreate}>
+        <Button variant="contained" color="success" onClick={onCreate}>
           Publish
         </Button>
       </div>
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index 914769c..5b7295b 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -1,18 +1,36 @@
+import { Button } from "@mui/material";
 import React from "react";
+import { connectWallet, disconnectWallet } from "slices/web3Slice";
+import { AppDispatch } from "slices/store";
+import { trimAddress } from "utils/helper";
+import { useDispatch, useSelector } from "react-redux";
 
 interface ISideBar {}
 
 const SideBar = (props: ISideBar) => {
-  return <div className="side-bar">
-    <div className="tip-panel">
-      <h3>Writing on IPP</h3>
-      <div className="panel-body">
-        <div className="panel-item">New writer FAQ</div>
-        <div className="panel-item">Expert writing advice</div>
-        <div className="panel-item">Grow your readership</div>
+  const dispatch = useDispatch<AppDispatch>();
+  const account = useSelector<any, string | null>(
+    (state) => state.web3.selectedAddress
+  );
+  const onConnect = () => {
+    dispatch(account ? disconnectWallet() : connectWallet());
+  };
+
+  return (
+    <div className="side-bar">
+      <Button variant="contained" color="success" onClick={onConnect}>
+        {account ? trimAddress(account) : "Connect Wallet"}
+      </Button>
+      <div className="tip-panel">
+        <h3>Writing on IPP</h3>
+        <div className="panel-body">
+          <div className="panel-item">New writer FAQ</div>
+          <div className="panel-item">Expert writing advice</div>
+          <div className="panel-item">Grow your readership</div>
+        </div>
       </div>
     </div>
-  </div>;
+  );
 };
 
 export default SideBar;
diff --git a/src/components/SyncWorker.tsx b/src/components/SyncWorker.tsx
index 2b37220..586c4df 100644
--- a/src/components/SyncWorker.tsx
+++ b/src/components/SyncWorker.tsx
@@ -68,7 +68,7 @@ const SyncWorker = (props: ISyncWorker) => {
 
   return isSyncing ? (
     <div className="sync-component" title="Syncing ...">
-      <LinearProgress color="secondary" />
+      <LinearProgress color="success" />
     </div>
   ) : null;
 };
diff --git a/src/slices/dbSlice.ts b/src/slices/dbSlice.ts
index 622125c..163bac5 100644
--- a/src/slices/dbSlice.ts
+++ b/src/slices/dbSlice.ts
@@ -74,6 +74,7 @@ export const dbSlice = createSlice({
       for (let i = startNumber; i < lastSyncNumber; i++)
       {
         const data = getStorageItem(config.LAST_SYNC_RECORD + i, {}) || {};
+        console.log(data.Date);
         data.Date = new Date(data.Date);
         switch (data.Type) {
           case "ADD_BLOG":
diff --git a/src/styles/_colors.scss b/src/styles/_colors.scss
new file mode 100644
index 0000000..69a4d87
--- /dev/null
+++ b/src/styles/_colors.scss
@@ -0,0 +1,3 @@
+:root {
+  --primary-color: rgb(0, 158, 0);
+}
\ No newline at end of file
diff --git a/src/styles/_common.scss b/src/styles/_common.scss
index 5bbd9b1..a4a44cb 100644
--- a/src/styles/_common.scss
+++ b/src/styles/_common.scss
@@ -29,6 +29,7 @@ body {
 
 button[class*="MuiButtonBase-root-MuiButton-root"] {
   text-transform: none;
+  border-radius: 100px;
 }
 
 /* width */
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 3944a29..38ff4cd 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -1,4 +1,5 @@
 @import './common';
+@import './colors';
 @import './web3_modal';
 
 @import './components/footer';
diff --git a/src/styles/components/_blog_component.scss b/src/styles/components/_blog_component.scss
index f972ab1..0d1f856 100644
--- a/src/styles/components/_blog_component.scss
+++ b/src/styles/components/_blog_component.scss
@@ -2,6 +2,14 @@
   padding: 20px 0;
   border-bottom: 1px solid #ccc;
 
+  &:hover {
+    border-bottom: 1px solid var(--primary-color);
+
+    .blog-title {
+      color: var(--primary-color);
+    }
+  }
+
   .user {
     display: flex;
     align-items: center;
diff --git a/src/styles/components/_navbar.scss b/src/styles/components/_navbar.scss
index 70e6160..92357df 100644
--- a/src/styles/components/_navbar.scss
+++ b/src/styles/components/_navbar.scss
@@ -20,15 +20,22 @@
     display: flex;
     flex-direction: column;
     margin: auto 0;
-    gap: 6px;
+    gap: 20px;
 
     a {
       color: #aaa;
+      display: flex;
+      justify-content: center;
 
       &:hover {
-        color: #666;
+        color: var(--primary-color);
       }
     }
+
+    .separator {
+      border: 1px solid #eee;
+      width: 100%;
+    }
   }
 
   .user {
diff --git a/src/styles/components/_new_blog_page.scss b/src/styles/components/_new_blog_page.scss
index ecb4b55..72cbccc 100644
--- a/src/styles/components/_new_blog_page.scss
+++ b/src/styles/components/_new_blog_page.scss
@@ -15,11 +15,17 @@
   }
 
   .newblog-editor {
+    border: 1px solid #ccc;
+    height: calc(100vh - 160px);
     // padding: 0 0 0 12px;
-    font-size: 14px;
+    font-size: 16px;
 
     * {
-      font-family: 'Poppins';
+      font-family: 'Consolas';
+    }
+
+    .CodeMirror {
+      height: calc(100vh - 162px);
     }
   }
 
diff --git a/src/styles/components/_side_bar.scss b/src/styles/components/_side_bar.scss
index bd70eb8..805bbbf 100644
--- a/src/styles/components/_side_bar.scss
+++ b/src/styles/components/_side_bar.scss
@@ -4,11 +4,13 @@
   flex-direction: column;
 
   .tip-panel {
+    margin: 20px 0 0 0;
     width: 100%;
     padding: 20px;
     border-radius: 20px;
     background: rgba(196, 226, 255, 0.5);
     color: #333;
+    font-size: 14px;
 
     h3 {
       margin: 0 0 10px 0;
diff --git a/src/utils/helper.ts b/src/utils/helper.ts
index 08c1b7d..26e174e 100644
--- a/src/utils/helper.ts
+++ b/src/utils/helper.ts
@@ -122,3 +122,53 @@ export function removeHtmlTags(str: string) {
   else str = str.toString();
   return str.replace(/(<([^>]+)>)/gi, " ");
 }
+
+export function formatTime(date: Date) {
+  const hr = date.getHours();
+  const amOrPm = hr >= 12 ? "PM" : "AM";
+  const hours = hr > 12 ? hr - 12 : hr;
+  return `${hours}:${date.getMinutes().toString().padStart(2, "0")} ${amOrPm}`;
+}
+
+export function getWeekNumber(date: Date) {
+  const oneJan = new Date(date.getFullYear(),0,1);
+  const numberOfDays = Math.floor((date.getTime() - oneJan.getTime()) / (24 * 60 * 60 * 1000));
+  const result = Math.ceil(( date.getDay() + 1 + numberOfDays) / 7);
+  return result;
+}
+
+export function formatDate(date: Date | undefined) {
+  if (!date) {
+    return "";
+  }
+
+  const today = new Date();
+  const span = (today.getTime() - date.getTime()) / 1000;
+  if (today.getFullYear() === date.getFullYear() && today.getMonth() === date.getMonth() && today.getDate() === date.getDate()) {
+    if (span < 3000) {
+      return Math.round(span / 60) + " minutes ago";
+    }
+    return Math.round(span / 3600) + " hours ago";
+  }
+
+  const yesterday = new Date(today.getTime() - 86400000);
+  if (yesterday.getFullYear() === date.getFullYear() && yesterday.getMonth() === date.getMonth() && yesterday.getDate() === date.getDate()) {
+    return `Yesterday ${formatTime(date)}`;
+  }
+
+  const weekdays = [
+    "Sunday",
+    "Monday",
+    "Tuesday",
+    "Wednesday",
+    "Thursday",
+    "Friday",
+    "Saturday"
+  ];
+
+  if (today.getFullYear() === date.getFullYear() && getWeekNumber(today) === getWeekNumber(date)) {
+    return `${weekdays[date.getDay()]} ${formatTime(date)}`;
+  }
+
+  return `${date.getMonth() + 1}/${date.getDate()}/${date.getFullYear()} ${formatTime(date)}`;;
+}