diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
index bc4e125..914769c 100644
--- a/src/components/SideBar.tsx
+++ b/src/components/SideBar.tsx
@@ -1,11 +1,18 @@
-import React from 'react';
+import React from "react";
 
 interface ISideBar {}
 
 const SideBar = (props: ISideBar) => {
-  return (
-    <div></div>
-  );
+  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>
+      </div>
+    </div>
+  </div>;
 };
 
 export default SideBar;
diff --git a/src/pages/HomeLayout.tsx b/src/pages/HomeLayout.tsx
index d77c98c..d866088 100644
--- a/src/pages/HomeLayout.tsx
+++ b/src/pages/HomeLayout.tsx
@@ -34,9 +34,9 @@ interface IHomeLayout {}
 
 const HomeLayout = (props: IHomeLayout) => {
   return (
-    <div className="main-container">
+    <div className="home-layout">
       <NavBar />
-      <div className="container">
+      <div className="main-container">
         <Routes>
           {routes.map((e) => (
             <Route
@@ -48,7 +48,9 @@ const HomeLayout = (props: IHomeLayout) => {
           <Route path="*" element={<Navigate to="/" />} />
         </Routes>
       </div>
-      <SideBar />
+      <div className="side-container">
+        <SideBar />
+      </div>
     </div>
   );
 };
diff --git a/src/pages/Welcome.tsx b/src/pages/Welcome.tsx
index 20b699e..74a466e 100644
--- a/src/pages/Welcome.tsx
+++ b/src/pages/Welcome.tsx
@@ -6,12 +6,14 @@ import { Link } from 'react-router-dom';
 import { connectWallet, disconnectWallet } from 'slices/web3Slice';
 import { AppDispatch } from 'slices/store';
 import { trimAddress } from 'utils/helper';
+import BlogComponent from 'components/BlogComponent';
 
 interface IWelcome {}
 
 const Welcome = (props: IWelcome) => {
   const dispatch = useDispatch<AppDispatch>();
   const account = useSelector<any, string | null>(state => state.web3.selectedAddress);
+  const blogs = useSelector<any, IBlog[]>(state => state.db.Blogs) || [];
 
   const onConnect = () => {
     dispatch(account ? disconnectWallet() : connectWallet());
@@ -38,6 +40,10 @@ const Welcome = (props: IWelcome) => {
       </div>
       <div className="body">
         <h2>Trending</h2>
+        {blogs
+          .map((blog) => (
+            <BlogComponent key={blog.CID} blog={blog} />
+          ))}
       </div>
       <Footer />
     </div>
diff --git a/src/styles/app.scss b/src/styles/app.scss
index 8874a4f..ecbc418 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -8,6 +8,8 @@
 @import './components/sync_component';
 @import './components/myblogs_page';
 @import './components/profile';
+@import './components/home';
+@import './components/side_bar';
 
 @import './pages/home_layout';
 @import './pages/welcome_page';
diff --git a/src/styles/components/_blog_component.scss b/src/styles/components/_blog_component.scss
index 878aa7f..ec1ebc9 100644
--- a/src/styles/components/_blog_component.scss
+++ b/src/styles/components/_blog_component.scss
@@ -1,5 +1,5 @@
 .blog-item {
-  padding: 20px;
+  padding: 20px 0;
   border-bottom: 1px solid #ccc;
 
   .user {
@@ -29,7 +29,7 @@
   }
 
   .blog-body {
-    font-size: 16px;
+    font-size: 15px;
     cursor: pointer;
   }
 }
\ No newline at end of file
diff --git a/src/styles/components/_home.scss b/src/styles/components/_home.scss
new file mode 100644
index 0000000..edbdda9
--- /dev/null
+++ b/src/styles/components/_home.scss
@@ -0,0 +1,5 @@
+.home-page {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
\ No newline at end of file
diff --git a/src/styles/components/_navbar.scss b/src/styles/components/_navbar.scss
index 830ee8e..70e6160 100644
--- a/src/styles/components/_navbar.scss
+++ b/src/styles/components/_navbar.scss
@@ -1,6 +1,6 @@
 .navbar {
   height: 100vh;
-  padding: 40px 10px;
+  padding: 40px 20px;
   display: flex;
   flex-direction: column;
 
@@ -33,5 +33,9 @@
 
   .user {
     height: 30px;
+
+    button {
+      padding: 0;
+    }
   }
 }
diff --git a/src/styles/components/_side_bar.scss b/src/styles/components/_side_bar.scss
new file mode 100644
index 0000000..bed8d6c
--- /dev/null
+++ b/src/styles/components/_side_bar.scss
@@ -0,0 +1,17 @@
+.side-bar {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .tip-panel {
+    width: 100%;
+    padding: 20px;
+    border-radius: 20px;
+    background: rgba(196, 226, 255, 0.5);
+    color: #333;
+
+    h3 {
+      margin: 0 0 10px 0;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/pages/_home_layout.scss b/src/styles/pages/_home_layout.scss
index 0bc8299..b874670 100644
--- a/src/styles/pages/_home_layout.scss
+++ b/src/styles/pages/_home_layout.scss
@@ -1,5 +1,5 @@
 
-.main-container {
+.home-layout {
   width: 1600px;
   height: 100vh;
 
@@ -14,15 +14,21 @@
   height: 100%;
   display: flex;
 
-  .container {
-    margin: 0 10px;
+  .main-container {
     border: 1px solid #ddd;
     border-top: none;
     border-bottom: none;
     height: 100vh;
     width: 70%;
     height: 100vh;
-    padding: 20px 10px 10px 10px;
+    padding: 20px 30px 10px 30px;
+    overflow-y: auto;
+  }
+
+  .side-container {
+    width: 30%;
+    height: 100vh;
+    padding: 20px;
     overflow-y: auto;
   }
 }