diff --git a/templates/components/post_preview.html b/templates/components/post_preview.html
new file mode 100644
index 0000000..44530e2
--- /dev/null
+++ b/templates/components/post_preview.html
@@ -0,0 +1,20 @@
+{% macro render_post(post, expanded=False) %} {% if expanded %}
+
+<div class="blog-content">{{ post.content | safe }}</div>
+
+<hr class="post-divider post-divider-expanded" />
+
+{% else %}
+
+<div class="blog-preview">{{ post.content | striptags | truncate(200) }}</div>
+
+<a
+  class="btn btn-default btn-custom"
+  href="{{ url_for('post_detail', post_id=post.id) }}"
+>
+  Read More
+</a>
+
+<hr class="post-divider post-divider-preview" />
+
+{% endif %} {% endmacro %}
diff --git a/templates/index.html b/templates/index.html
index 30b5095..e90807f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -1,5 +1,6 @@
-{% extends "base.html" %} {% block title %}{{blog_title.title}}{% endblock %} {%
-block content %}
+{% from "components/post_preview.html" import render_post %} {% extends
+"base.html" %} {% block title %}{{blog_title.title}}{% endblock %} {% block
+content %}
 <!--timeline as a component which will be filled with callable function
 ### double curly brace timeline("career")  this is a part of html string
 ### nested render-->
@@ -18,22 +19,7 @@ block content %}
     <p>
       <span class="glyphicon glyphicon-time"></span> Posted on {{ post.date }}
     </p>
-    <!-- stytle customed, expanded and unextanded posts have different margin-->
-    {% if post.displayall %}
-    <div>{{ post.content | safe }}</div>
-    <hr class="post-divider post-divider-expanded" />
-
-    {% else %}
-    <div>{{ post.content | striptags | truncate(200) }}</div>
-    <!--div>{{ post.content[:200] | safe }}...</div-->
-    <a
-      class="btn btn-default btn-custom"
-      href="{{ url_for('post_detail', post_id=post.id) }}"
-      >Read More</a
-    >
-    <hr class="post-divider post-divider-preview" />
-
-    {% endif %} {% endfor %}
+    {{ render_post(post, post.displayall) }} {% endfor %}
     <ul class="pager">
       {% if prev_url %}
       <li class="previous"><a href="{{ prev_url }}">&larr; Newer</a></li>