diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index f19845e..15cca86 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -1,14 +1,30 @@
 {{ define "header" }}
-
+    <link rel="stylesheet" href="/assets/css/list.css">
 {{ end }}
 
 {{ define "navbar" }}
     {{ partial "navbar-2.html" (dict "baseURL" .Site.BaseURL "title" .Site.Title "hasToggleButton" true) }}
 {{ end }}
 
-
 {{ define "content" }}
-    <h1>Here is the actual content</h1>
+<div class="sidebar" id="sidebar">
+    <div class="sidebar-tree">
+      <input type="text" name="filtr-search" value="" placeholder="Search" data-search="" id="search-box" />
+      <ul class="tree" id="tree">
+        <li id="list-heading"><a href="#" data-filter="all">{{.Title}}</a></li>
+        <div class="subtree">
+            {{ partial "sections.html" .Sections }}
+        </div>
+      </ul>
+    </div>
+  </div>
+  <div class="content container-fluid" id="content">
+    <div class="content-cards">
+      <div class="container-fluid filtr-container post-cards" id="post-cards">
+        {{ partial "posts.html" . }}
+      </div>
+    </div>
+  </div>
 {{ end }}
 
 {{ define "scripts" }}
diff --git a/layouts/partials/cards/post.html b/layouts/partials/cards/post.html
index a20f003..d3104ec 100644
--- a/layouts/partials/cards/post.html
+++ b/layouts/partials/cards/post.html
@@ -1,17 +1,19 @@
-<div class="col-lg-4 col-md-6 pt-2">
+<div class="filtr-item" data-category='{{ delimit .Params.categories ","}}'>
   <div class="card">
     <div class="card-head">
-      <img class="card-img-top" src="{{ .Params.hero }}"
-        alt="Card image cap"
-      />
+      <img class="card-img-top" src="{{ .Params.hero }}" alt="Card image cap" />
     </div>
     <div class="card-body">
       <h5 class="card-title">{{ .Title }}</h5>
-      <p class="card-text post-summery"> {{ .Summary }}</p>
+      <p class="card-text post-summery">{{ .Summary }}</p>
     </div>
     <div class="card-footer">
       <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
-      <a href="{{ .RelPermalink }}" class="float-right btn btn-outline-info btn-sm">Details</a>
+      <a
+        href="{{ .RelPermalink }}"
+        class="float-right btn btn-outline-info btn-sm"
+        >Read</a
+      >
     </div>
   </div>
 </div>
diff --git a/layouts/partials/cards/recent-post.html b/layouts/partials/cards/recent-post.html
new file mode 100644
index 0000000..d61af71
--- /dev/null
+++ b/layouts/partials/cards/recent-post.html
@@ -0,0 +1,17 @@
+<div class="col-lg-4 col-md-6 pt-2">
+  <div class="card">
+    <div class="card-head">
+      <img class="card-img-top" src="{{ .Params.hero }}"
+        alt="Card image cap"
+      />
+    </div>
+    <div class="card-body">
+      <h5 class="card-title">{{ .Title }}</h5>
+      <p class="card-text post-summery"> {{ .Summary }}</p>
+    </div>
+    <div class="card-footer">
+      <span class="float-left">{{ .Date.Format "January 2, 2006" }}</span>
+      <a href="{{ .RelPermalink }}" class="float-right btn btn-outline-info btn-sm">Read</a>
+    </div>
+  </div>
+</div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 471336b..7f65f40 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -51,7 +51,7 @@
       <div class="col-md-4">
         Powered by <a href="https://gohugo.io/">Hugo</a>
         <img
-          src="assets/images/logos/hugo-logo-wide.svg"
+          src="/assets/images/logos/hugo-logo-wide.svg"
           alt="Hugo Logo"
           height="18"
         />
diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html
index 6c2deda..dc03708 100644
--- a/layouts/partials/navbar.html
+++ b/layouts/partials/navbar.html
@@ -20,7 +20,7 @@
         {{ end }}
         <div class="dropdown-divider" id="top-navbar-divider"></div>
         <li class="nav-item">
-          <a class="nav-link" id="blog-link" href="blog.html">Blog</a>
+          <a class="nav-link" id="blog-link" href="/posts">Blog</a>
         </li>
       </ul>
     </div>
diff --git a/layouts/partials/posts.html b/layouts/partials/posts.html
new file mode 100644
index 0000000..544812a
--- /dev/null
+++ b/layouts/partials/posts.html
@@ -0,0 +1,7 @@
+{{ range .Pages }}
+    {{ if .IsNode }}
+        {{ partial "posts.html" . }}
+    {{ else }}
+        {{ partial "cards/post.html" . }}
+    {{ end }}
+{{ end }}
\ No newline at end of file
diff --git a/layouts/partials/recent-posts.html b/layouts/partials/recent-posts.html
index 9b57286..9e377af 100644
--- a/layouts/partials/recent-posts.html
+++ b/layouts/partials/recent-posts.html
@@ -3,7 +3,7 @@
   <div class="container">
     <div class="row" id="recent-posts">
       {{ range first 3 .Site.RegularPages }}
-        {{ partial "cards/post.html" . }}
+        {{ partial "cards/recent-post.html" . }}
       {{ end }}
     </div>
   </div>
diff --git a/layouts/partials/sections.html b/layouts/partials/sections.html
new file mode 100644
index 0000000..d847fb5
--- /dev/null
+++ b/layouts/partials/sections.html
@@ -0,0 +1,11 @@
+{{ range . }}
+{{ if .Sections }}
+    <li><a data-filter="{{ .Params.id }}">{{ title .Title }}</a>
+    <ul>
+        {{ partial "sections.html" .Sections }}
+    </ul>
+    </li>
+    {{ else }}
+        <li><a data-filter="{{ .Params.id }}">{{ title .Title }}</a></li>
+    {{ end }}
+{{ end }}
diff --git a/static/assets/css/list.css b/static/assets/css/list.css
index 56f6178..ddbeaec 100644
--- a/static/assets/css/list.css
+++ b/static/assets/css/list.css
@@ -43,6 +43,10 @@
   position: fixed;
 }
 
+#list-heading{
+  padding-left: 0px!important;
+}
+
 .tree,
 .tree ul {
   margin: 0;
@@ -52,7 +56,7 @@
 }
 
 .tree ul {
-  margin-left: 1em;
+  margin-left: 0.5rem;
   position: relative;
 }
 
@@ -65,12 +69,27 @@
   display: block;
   width: 0;
   position: absolute;
-  top: -17px;
+  top: -20px;
   left: -3px;
   bottom: 16px;
   border-left: 1px solid;
 }
 
+.subtree{
+  padding-left: 0.7rem;
+}
+
+.subtree:before{
+  content: "";
+  display: block;
+  width: 0;
+  position: absolute;
+  top: 6.5rem;
+  left: 0.5rem;
+  bottom: 16px;
+  border-left: 1px solid;
+}
+
 .tree li {
   margin: 0;
   padding: 0 1em;
@@ -80,10 +99,10 @@
   position: relative;
 }
 
-.tree ul li:before {
+.subtree li:before {
   content: "";
   display: block;
-  width: 16px;
+  width: 20px;
   height: 0;
   border-top: 1px solid;
   margin-top: -1px;
@@ -92,7 +111,7 @@
   left: -3px;
 }
 
-.tree ul li:last-child:before {
+.subtree li:last-child:before {
   background: #f9fafc;
   height: auto;
   top: 1em;
diff --git a/static/assets/css/single.css b/static/assets/css/single.css
index 75ab9f7..70f5266 100644
--- a/static/assets/css/single.css
+++ b/static/assets/css/single.css
@@ -1,3 +1,6 @@
+body{
+  background-color: #e5e9f2;
+}
 .read-area {
   background-color: #f9fafc;
 }
@@ -7,7 +10,7 @@
 }
 
 .hero-area {
-  margin-top: 50px;
+  margin-top: 3.5rem;
   width: 100%;
   height: 400px;
   background-position: center;
diff --git a/static/assets/js/list.js b/static/assets/js/list.js
index 2ec8c28..41b5e87 100644
--- a/static/assets/js/list.js
+++ b/static/assets/js/list.js
@@ -26,7 +26,11 @@ var isMobile = false, isTablet = false, isLaptop = false;
     // ======= Adjust height of the post cards =============
     function adjustPostCardsHeight() {
       if (!isMobile) { // no need to adjust height for mobile devices
-        let el = document.getElementById("post-cards").children;
+        let postCardHolder = document.getElementById("post-cards");
+        if (postCardHolder == null ){
+          return
+        }
+        let el = postCardHolder.children;
         let maxHeight = 0;
         for (let i = 0; i < el.length; i++) {
           if (el[i].children[0].clientHeight > maxHeight) {