diff --git a/foundation/public/css/erpnext-org-theme.css b/foundation/public/css/erpnext-org-theme.css
index 66901422..4add50bd 100644
--- a/foundation/public/css/erpnext-org-theme.css
+++ b/foundation/public/css/erpnext-org-theme.css
@@ -1,3 +1,4 @@
+/* palette colors*/
 @import "reset.css";
 @import "/assets/css/frappe-css.css";
 .indicator,
@@ -24,7 +25,7 @@
 }
 .indicator.grey::before,
 .indicator-right.grey::after {
-  background: #F0F4F7;
+  background: #f0f4f7;
 }
 .indicator.blue::before,
 .indicator-right.blue::after {
@@ -52,19 +53,19 @@
 }
 .indicator.black::before,
 .indicator-right.black::after {
-  background: #36414C;
+  background: #36414c;
 }
 .indicator.yellow::before,
 .indicator-right.yellow::after {
-  background: #FEEF72;
+  background: #feef72;
 }
 .indicator.light-blue::before,
 .indicator-right.light-blue::after {
-  background: #7CD6FD;
+  background: #7cd6fd;
 }
 .indicator.lightblue::before,
 .indicator-right.lightblue::after {
-  background: #7CD6FD;
+  background: #7cd6fd;
 }
 .modal-header .indicator {
   float: left;
diff --git a/foundation/templates/includes/macros.html b/foundation/templates/includes/macros.html
index 9d22e4b7..d6dba41b 100644
--- a/foundation/templates/includes/macros.html
+++ b/foundation/templates/includes/macros.html
@@ -16,18 +16,26 @@
 	</div>
 {% endmacro %}
 
-{% macro list(link, image, title, subtitle) %}
-	<div class="list list-unstyled">
-		<div class="list-item flex">
-			<div class="flex1">
-				<a class="flex1" href="{{ link or "#" }}"
-				<img class="thumbnail" src="{% if image %}{% if not '/' in image %}/assets/foundation/img/{% endif %}{{ image }}{% else %}/assets/foundation/img/frappe-bird-grey.svg{% endif %}">
-				</a>
-			</div>
-			<div class="flex4">
-				{% if title %}<h3 class="h3">{{ title }}</h3>{% endif %}
-				{{ content }}
-			</div>
-		</div>
+{% macro list_item(link, image, title, subtitle) %}
+<div class="list-item flex mb2">
+	<div>
+		<a href="{{ link or "#" }}">
+			<img class="thumb-medium mr2" src="{% if image %}{% if not '/' in image %}/assets/foundation/img/{% endif %}{{ image }}{% else %}/assets/foundation/img/frappe-bird-grey.svg{% endif %}">
+		</a>
 	</div>
+	<div>
+		<a href="{{ link or "#" }}">
+			{% if title %}<h3 class="h3">{{ title }}</h3>{% endif %}
+		</a>
+		<a href="{{ link or "#" }}">
+			{% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
+		</a>
+		<a href="{{ link or "#" }}">
+			{% if meta %}{{ meta  }}{% endif %}
+		</a>
+		{% if content %}
+		{{ content }}
+		{% endif %}
+	</div>
+</div>
 {% endmacro %}
diff --git a/foundation/website/doctype/blog_post/templates/blog_post_row.html b/foundation/website/doctype/blog_post/templates/blog_post_row.html
index 745c1464..7170ca77 100644
--- a/foundation/website/doctype/blog_post/templates/blog_post_row.html
+++ b/foundation/website/doctype/blog_post/templates/blog_post_row.html
@@ -1,12 +1,6 @@
 {%- set post = doc -%}
-<div class="list-item">
-	<div class="flex">
-		<div class="mr2">
-			<img class="thumb-medium" alt="{{ post.full_name }}'s profile picture" itemprop="thumbnailUrl" src='{{ post.avatar or "/assets/frappe/images/default-avatar.png" }}' />
-		</div>
-		<div class="text-dark-grey">
-			<h2 class="h2 text-black"><a href="/{{ post.route }}">{{ post.title }}</a></h1>
-			<p>By <a href="/blog?blogger={{ post.blogger }}">{{ post.full_name }}</a>. Posted on
+{% macro  meta() %}
+<p>By <a href="/blog?blogger={{ post.blogger }}">{{ post.full_name }}</a>. Posted on
 				{{ frappe.format_date(post.published_on) }}
 				{% if post.comments %}
 				<span style='display: inline-block; margin-left: 10px;'>
@@ -14,6 +8,6 @@
 				</span>
 				{% endif %}
 			</p>
-		</div>
-	</div>
-</div>
+{% endmacro %}
+{% from "foundation/templates/includes/macros.html" import list_item%}
+{{list_item(post.route, post.avatar, post.title, meta())}}