diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss
index 72bb93ba8e6..f7fed95fe07 100644
--- a/addons/website/static/src/scss/primary_variables.scss
+++ b/addons/website/static/src/scss/primary_variables.scss
@@ -36,6 +36,9 @@ $o-social-colors: (
     'twitter': #55ACEE,
     'linkedin': #0077B5,
     'google-plus': #DD4B39,
+    'youtube': #ff0000,
+    'github': #1a1e22,
+    'instagram': #cf2872,
 );
 
 $o-theme-figcaption-opacity: 0.6;
diff --git a/addons/website_blog/static/src/js/website_blog.js b/addons/website_blog/static/src/js/website_blog.js
index 27c78e7b471..f158c713af7 100644
--- a/addons/website_blog/static/src/js/website_blog.js
+++ b/addons/website_blog/static/src/js/website_blog.js
@@ -85,6 +85,7 @@ publicWidget.registry.websiteBlog = publicWidget.Widget.extend({
      */
     _onShareArticle: function (ev) {
         var url = '';
+        ev.preventDefault();
         var $element = $(ev.currentTarget);
         if ($element.is('*[class*="_complete"]')) {
             var blogTitleComplete = $('#blog_post_name').html() || '';
diff --git a/addons/website_blog/static/src/scss/website_blog.scss b/addons/website_blog/static/src/scss/website_blog.scss
index f16afd40bf2..48374f923d1 100644
--- a/addons/website_blog/static/src/scss/website_blog.scss
+++ b/addons/website_blog/static/src/scss/website_blog.scss
@@ -75,7 +75,6 @@
         }
         &.o_list_cover {
             display: none;
-            width: auto!important;
             height: 250px!important;
 
             &.cover {
@@ -158,42 +157,6 @@
 
     .o_author_avatar_little {
         width: 40px;
-        display: inline;
-        margin-top: -5px;
-    }
-
-    /* Sharing links style */
-
-    .o_sharing_links {
-        margin-top: 20px;
-        > p {
-            display: inline;
-            font-size: 12px;
-        }
-        > a {
-            color: #b3b3b3;
-            font: normal normal normal 28px/1 FontAwesome;
-            margin: 0 4px 0 4px;
-            cursor: pointer;
-            &:hover {
-                text-decoration: none;
-            }
-            &.o_twitter_complete, &.o_twitter:hover {
-                color: #4099FF;
-            }
-            &.o_google_complete, &.o_google:hover {
-                color: #DD4B39;
-            }
-            &.o_facebook_complete, &.o_facebook:hover {
-                color: #3b5998;
-            }
-            &.o_linkedin_complete, &.o_linkedin:hover {
-                color: #0E76A8;
-            }
-            &.unhover {
-                color: #b3b3b3;
-            }
-        }
     }
 
     .o_blog_post_complete.o_sharing_links {
@@ -210,17 +173,6 @@
         }
     }
 
-    div[name="blog_post_data"] {
-        margin-top: 20px !important;
-        font-size: 13px;
-    }
-    div[name="blog_post"] {
-        position: relative;
-        hr {
-            margin-top: 10px;
-        }
-    }
-
     .blog_post_year_collapse {
         cursor: pointer;
         > i {
diff --git a/addons/website_blog/views/website_blog_templates.xml b/addons/website_blog/views/website_blog_templates.xml
index 8c5724945d7..973643998bd 100644
--- a/addons/website_blog/views/website_blog_templates.xml
+++ b/addons/website_blog/views/website_blog_templates.xml
@@ -126,57 +126,57 @@
         </div>
         <div class="container">
             <div class="row">
-              <div class="col-lg-8 offset-lg-2" t-ignore="True" id="main_column">
-
-                <div t-if="not blog_posts" class="container mb64">
-                    <p class="css_editable_hidden">
-                        <h1>No blog post yet.</h1>
-                    </p>
-                  <p groups="website.group_website_designer">
-                        Click on "New Page" in the top-right corner to write your first blog post.
-                    </p>
-                </div>
-
-                <div t-foreach="blog_posts" t-as="blog_post" class="mb32" name="blog_post">
-                    <a t-attf-href="/blog/#{ slug(blog_post.blog_id) }/post/#{ slug(blog_post) }">
-                        <h2 t-field="blog_post.name" class="mb4 o_blog_post_title">Untitled Post</h2>
-                    </a>
-                    <div class="text-muted">
-                        <div t-field="blog_post.teaser" class="mb12 mt12 o_blog_post_teaser"/>
-                        <div name='blog_post_data' class='mb0'>
-                            <span t-field="blog_post.author_id" style="display: inline-block;" t-options='{
-                                "widget": "contact",
-                                "fields": ["name"]
-                            }'/>
-                            &amp;mdash; <span t-field="blog_post.post_date" t-options='{"format": "MMMM yyyy"}'/>
-                            <span t-if="len(blog_post.message_ids) &gt; 0">
-                                &amp;mdash; <t t-esc="len(blog_post.message_ids)"/>
-                                <t t-if="len(blog_post.message_ids) &lt;= 1" >comment</t>
-                                <t t-if="len(blog_post.message_ids) &gt; 1">comments</t>
-                            </span>
-                            <span t-if="blog_post.visits &gt; 0">
-                                &amp;mdash; <t t-esc="blog_post.visits"/>
-                                <t t-if="blog_post.visits &lt;= 1" >view</t>
-                                <t t-if="blog_post.visits &gt; 1">views</t>
-                            </span>
-                            <span t-if="not blog_post.website_published" class="badge badge-danger">unpublished</span>
-                            <span class="fa fa-tags" role="img" aria-label="Tags" title="Tags"/>
-
-                            <!-- To display tags //no options -->
-                            <t t-foreach="blog_post.tag_ids" t-as="one_tag">
-                                <a class="mr8" t-attf-href="#{blog_url(tag=one_tag.id, date_begin=False, date_end=False)}" t-esc="one_tag.name"/>
-                            </t>
-                            <div class="o_sharing_links">
-                                <a class="fa fa-twitter-square o_twitter" aria-label="Twitter" title="Twitter"></a>
-                                <a class="fa fa-facebook-square o_facebook" aria-label="Facebook" title="Facebook"></a>
-                                <a class="fa fa-linkedin-square o_linkedin" aria-label="LinkedIn" title="LinkedIn"></a>
-                                <a class="fa fa-google-plus-square o_google" aria-label="Google Plus" title="Google Plus"></a>
+                <div class="col-lg-8 offset-lg-2" t-ignore="True" id="main_column">
+                    <t t-if="not blog_posts">
+                        <p class="h2">No blog post yet.</p>
+                        <p groups="website.group_website_designer">Click on "New" in the top-right corner to write your first blog post.</p>
+                    </t>
+                    <t t-foreach="blog_posts" t-as="blog_post">
+                        <div class="card mb-3" name="blog_post">
+                            <div class="card-body">
+                                <a t-attf-href="/blog/#{slug(blog_post.blog_id)}/post/#{slug(blog_post)}">
+                                    <h2 t-field="blog_post.name" class="mb4 o_blog_post_title">Untitled Post</h2>
+                                </a>
+                                <div t-field="blog_post.teaser" class="text-muted o_blog_post_teaser"/>
+                            </div>
+                            <div class="card-footer text-muted">
+                                <div class="row align-items-center">
+                                    <div class="col col-sm-auto">
+                                        <span t-field="blog_post.author_id" style="display: inline-block;" t-options='{
+                                            "widget": "contact",
+                                            "fields": ["name"]
+                                        }'/>
+                                        &amp;mdash; <span t-field="blog_post.post_date" t-options='{"format": "MMMM yyyy"}'/>
+                                        <span t-if="len(blog_post.message_ids) &gt; 0">
+                                            &amp;mdash; <t t-esc="len(blog_post.message_ids)"/>
+                                            <t t-if="len(blog_post.message_ids) &lt;= 1" >comment</t>
+                                            <t t-if="len(blog_post.message_ids) &gt; 1">comments</t>
+                                        </span>
+                                        <span t-if="blog_post.visits &gt; 0">
+                                            &amp;mdash; <t t-esc="blog_post.visits"/>
+                                            <t t-if="blog_post.visits &lt;= 1" >view</t>
+                                            <t t-if="blog_post.visits &gt; 1">views</t>
+                                        </span>
+                                        <span t-if="not blog_post.website_published" class="badge badge-danger">unpublished</span>
+                                    </div>
+                                    <!-- To display tags //no options -->
+                                    <div class="col-12 col-sm my-1 o_wblog_post_short_tag_section">
+                                        <span t-if="len(blog_post.tag_ids)" class="fa fa-tags" role="img" aria-label="Tags" title="Tags"/>
+                                        <t t-foreach="blog_post.tag_ids" t-as="one_tag">
+                                            <a class="badge badge-primary" t-attf-href="#{blog_url(tag=one_tag.id, date_begin=False, date_end=False)}" t-esc="one_tag.name"/>
+                                        </t>
+                                    </div>
+                                    <div class="col-sm-auto my-1">
+                                        <a href="#" class="fa fa-lg fa-twitter-square text-twitter o_twitter" aria-label="Twitter" title="Twitter"/>
+                                        <a href="#" class="fa fa-lg fa-facebook-square text-facebook o_facebook" aria-label="Facebook" title="Facebook"/>
+                                        <a href="#" class="fa fa-lg fa-linkedin-square text-linkedin o_linkedin" aria-label="LinkedIn" title="LinkedIn"/>
+                                        <a href="#" class="fa fa-lg fa-google-plus-square text-google-plus o_google" aria-label="Google Plus" title="Google Plus"/>
+                                    </div>
+                                </div>
                             </div>
-                            <hr/>
                         </div>
-                    </div>
+                    </t>
                 </div>
-              </div>
             </div>
         </div>
 
@@ -195,10 +195,10 @@
 <!-- Option: Blog Post List: cover image -->
 <template id="opt_blog_post_cover_image" name="Cover image"
         customize_show="True" active="True" inherit_id="website_blog.blog_post_short">
-    <xpath expr="//h2[@t-field='blog_post.name']/.." position="before">
+    <xpath expr="//div[@name='blog_post']/div[hasclass('card-body')]" position="before">
         <t t-call="website_blog.blog_cover">
             <t t-set="cover_properties" t-value="blog_posts_cover_properties[blog_post_index]"/>
-            <t t-set="additionnal_classes" t-value="'o_list_cover mt16 mb32'"/>
+            <t t-set="additionnal_classes" t-value="'o_list_cover card-img-top'"/>
         </t>
     </xpath>
 </template>
@@ -206,21 +206,31 @@
 <!-- Option: Blog Post List: grid layout -->
 <template id="opt_blog_post_grid_layout" name="Grid view"
         customize_show="True" active="False" inherit_id="website_blog.blog_post_short">
-    <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class" separator=" " add="d-flex flex-wrap" />
+    <xpath expr="//t[@t-foreach='blog_posts']" position="replace">
+        <div class="row">
+            <t>$0</t>
+        </div>
     </xpath>
     <xpath expr="//div[@name='blog_post']" position="attributes">
-        <attribute name="class" add="col-md-5 o_grid" separator=" "/>
+        <attribute name="class" add="h-100" remove="mb-3" separator=" "/>
+    </xpath>
+    <xpath expr="//div[@name='blog_post']" position="replace">
+        <div class="col-md-6 mb-3">
+            <t>$0</t>
+        </div>
+    </xpath>
+    <xpath expr="//div[hasclass('o_wblog_post_short_tag_section')]" position="before">
+        <div class="w-100"/>
     </xpath>
 </template>
 
 <!-- Option: Blog Post List: display the author avatar -->
 <template id="opt_blog_post_author_avatar" name="Author avatar"
         customize_show="True" active="False" inherit_id="website_blog.blog_post_short">
-    <xpath expr="//span[@t-field='blog_post.author_id']" position="before">
-        <t t-if="blog_post.author_avatar">
+    <xpath expr="//span[@t-field='blog_post.author_id']/.." position="before">
+        <div t-if="blog_post.author_avatar" class="col-auto">
             <div t-field="blog_post.author_avatar" class="o_not_editable" style="display:inline" t-options='{"widget": "image", "class": "rounded-circle o_author_avatar_little "}' />
-        </t>
+        </div>
     </xpath>
 </template>
 
@@ -380,49 +390,48 @@
 <template id="index_right" name="Right Column"
         inherit_id="website_blog.blog_post_short">
     <xpath expr="//div[@id='main_column']" position="after">
-        <div class="col-xl-3 offset-xl-1 col-md-4" id="blog_right_column"/>
+        <div class="col-xl-3 col-lg-4" id="blog_right_column"/>
     </xpath>
 </template>
 
 <!-- Option:Right Column: tags -->
 
 <template id="tag_category" name="Tags List">
-    <ul class="nav nav-pills ml16">
-        <t t-if="tags">
-            <div t-if='not hide_title' class='text-muted mt8'><i class='fa fa-tag' role="img" aria-label="Tag category" title="Tag category"/> <t t-esc='categ_title' /></div>
-            <t t-foreach="tags" t-as="tag">
-                <t t-if="tag.post_ids">
-                    <li class="nav-item">
-                        <a t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, tag.id))}" t-attf-class="nav-link#{tag.id in active_tag_ids and ' active' or ''}">
-                            <span t-field="tag.name"/>
-                        </a>
-                    </li>
-                </t>
+    <t t-if="tags">
+        <div t-if='not hide_title' class='text-muted mt8'><i class='fa fa-tag' role="img" aria-label="Tag category" title="Tag category"/> <t t-esc='categ_title' /></div>
+        <t t-foreach="tags" t-as="tag">
+            <t t-if="tag.post_ids">
+                <a t-attf-href="#{blog_url(tag=tags_list(active_tag_ids, tag.id))}"
+                    t-attf-class="badge #{tag.id in active_tag_ids and 'badge-primary' or 'badge-secondary'}">
+                    <span t-field="tag.name"/>
+                </a>
             </t>
         </t>
-    </ul>
+    </t>
 </template>
 
 <template id="opt_blog_rc_tags" name="Tags"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-md-8</attribute>
+        <attribute name="class">col</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
-        <section class="mt32 blog_tags">
-            <h4>Tags</h4>
-            <t t-foreach="tag_category" t-as="nav_tag_category">
-                <t t-call="website_blog.tag_category">
-                    <t t-set='categ_title' t-value="nav_tag_category.name"/>
-                    <t t-set='tags' t-value='nav_tag_category.tag_ids' />
+        <div class="card mb-3 bg-secondary">
+            <h6 class="card-header">Tags</h6>
+            <div class="card-body">
+                <t t-foreach="tag_category" t-as="nav_tag_category">
+                    <t t-call="website_blog.tag_category">
+                        <t t-set='categ_title' t-value="nav_tag_category.name"/>
+                        <t t-set='tags' t-value='nav_tag_category.tag_ids' />
+                    </t>
                 </t>
-            </t>
-            <t t-call="website_blog.tag_category">
-                <t t-set='hide_title' t-value='not len(tag_category)' />
-                <t t-set='categ_title'>Others</t>
-                <t t-set='tags' t-value='other_tags' />
-            </t>
-        </section>
+                <t t-call="website_blog.tag_category">
+                    <t t-set='hide_title' t-value='not len(tag_category)' />
+                    <t t-set='categ_title'>Others</t>
+                    <t t-set='tags' t-value='other_tags' />
+                </t>
+            </div>
+        </div>
     </xpath>
 </template>
 
@@ -430,122 +439,135 @@
 <template id="opt_blog_rc_history" name="Archives"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-md-8</attribute>
+        <attribute name="class">col</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
-        <section class="mt32">
-        <h4>Archives</h4>
-        <ul class="nav nav-pills flex-column">
-            <t t-foreach="nav_list" t-as="year">
-                <li data-toggle="collapse" t-att-data-target="'#' + year" aria-expanded="false" class="nav-item blog_post_year_collapse mt8">
-                    <i t-attf-class="fa #{'fa-chevron-down' if not date and year_index == 0 else 'fa-chevron-right'} mr4" role="img" aria-label="Next year" title="Next year"/><span t-esc="year"/>
-                </li>
-                <ul t-attf-class="blog_post_year collapse nav nav-pills flex-column #{not date and year_index == 0 and 'in'}" t-att-id="year" role="menu">
-                    <t t-foreach="nav_list[year]" t-as="months">
-                        <li t-if="months['date_begin'] == date" class="nav-item">
-                            <a role="menuitem" t-ignore="True" t-attf-href="#{blog_url(date_begin=False, date_end=False)}" class="nav-link active"><t t-esc="months['month']"/><span class="float-right badge badge-pill" t-esc="months['post_date_count']"/></a>
-                        </li>
-                        <li t-else="1" class="nav-item">
-                            <a role="menuitem" t-ignore="True" t-attf-href="#{blog_url(date_begin=months['date_begin'], date_end=months['date_end'])}" class="nav-link"><t t-esc="months['month']"/><span class="float-right badge badge-pill" t-esc="months['post_date_count']"/></a>
+        <div class="card mb-3 bg-secondary">
+            <h6 class="card-header">Archives</h6>
+            <div class="card-body">
+                <ul class="nav nav-pills flex-column">
+                    <t t-foreach="nav_list" t-as="year">
+                        <li data-toggle="collapse" t-att-data-target="'#' + year" aria-expanded="false" class="nav-item blog_post_year_collapse mt8">
+                            <i t-attf-class="fa #{'fa-chevron-down' if not date and year_index == 0 else 'fa-chevron-right'} mr4" role="img" aria-label="Next year" title="Next year"/><span t-esc="year"/>
                         </li>
+                        <ul t-attf-class="blog_post_year collapse nav nav-pills flex-column #{not date and year_index == 0 and 'in'}" t-att-id="year" role="menu">
+                            <t t-foreach="nav_list[year]" t-as="months">
+                                <li t-if="months['date_begin'] == date" class="nav-item">
+                                    <a role="menuitem" t-ignore="True" t-attf-href="#{blog_url(date_begin=False, date_end=False)}" class="nav-link active"><t t-esc="months['month']"/><span class="float-right badge badge-pill" t-esc="months['post_date_count']"/></a>
+                                </li>
+                                <li t-else="1" class="nav-item">
+                                    <a role="menuitem" t-ignore="True" t-attf-href="#{blog_url(date_begin=months['date_begin'], date_end=months['date_end'])}" class="nav-link"><t t-esc="months['month']"/><span class="float-right badge badge-pill" t-esc="months['post_date_count']"/></a>
+                                </li>
+                            </t>
+                        </ul>
                     </t>
                 </ul>
-            </t>
-        </ul>
-        </section>
+            </div>
+        </div>
     </xpath>
 </template>
 
 <!-- Option:Right Column: about us -->
-<template id="opt_blog_rc_about_us" name="About Us" priority="2"
+<template id="opt_blog_rc_about_us" name="About Us" priority="8"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-md-8</attribute>
+        <attribute name="class">col</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
-        <section class="mt32">
-        <h4>About us</h4>
-        <p>
-            Write a small text here for when <b>new visitors</b> find your website
-            through your <b>blog entries</b>, referenced in Google.
-        </p>
-        </section>
+        <div class="card mb-3 bg-secondary">
+            <h6 class="card-header">About us</h6>
+            <div class="card-body">
+                Write a small text here for when <b>new visitors</b> find your website
+                through your <b>blog entries</b>, referenced in Google.
+            </div>
+        </div>
     </xpath>
 </template>
 
 <!-- Option:Right Column: follow us -->
-<template id="opt_blog_rc_follow_us" name="Subscription" priority="4"
+<template id="opt_blog_rc_follow_us" name="Subscription" priority="12"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-md-8</attribute>
+        <attribute name="class">col</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
-        <section class="mt32">
-            <h4>Stay updated :</h4>
-            <t t-if="blog">
-                <t t-call="website_mail.follow">
-                    <t t-set="email" t-value="user_id.email"/>
-                    <t t-set="object" t-value="blog"/>
+        <div class="card mb-3 bg-secondary">
+            <h6 class="card-header">Stay updated</h6>
+            <div class="card-body">
+                <p class="h6">Participate on our social stream.</p>
+                <div class="h5">
+                    <a t-if="website.social_facebook" t-att-href="website.social_facebook" class="fa fa-lg fa-facebook-square text-facebook" aria-label="Facebook" title="Facebook"/>
+                    <a t-if="website.social_twitter" t-att-href="website.social_twitter" class="fa fa-lg fa-twitter text-twitter" aria-label="Twitter" title="Twitter"/>
+                    <a t-if="website.social_linkedin" t-att-href="website.social_linkedin" class="fa fa-lg fa-linkedin text-linkedin" aria-label="LinkedIn" title="LinkedIn"/>
+                    <a t-if="website.social_youtube" t-att-href="website.social_youtube" class="fa fa-lg fa-youtube-play text-youtube" aria-label="Youtube" title="Youtube"/>
+                    <a t-if="website.social_googleplus" t-att-href="website.social_googleplus" class="fa fa-lg fa-google-plus-square text-google-plus" aria-label="Google Plus" title="Google Plus"/>
+                    <a t-if="website.social_github" t-att-href="website.social_github" class="fa fa-lg fa-github text-github" aria-label="Github" title="Github"/>
+                    <a t-if="website.social_instagram" t-att-href="website.social_instagram" class="fa fa-lg fa-instagram text-instagram" aria-label="Instagram" title="Instagram"/>
+                    <a t-att-href="'/blog/%s/feed' % (blog.id)" class="fa fa-lg fa-rss-square" aria-label="RSS" title="RSS"/>
+                </div>
+                <hr/>
+                <t t-if="blog">
+                    <t t-call="website_mail.follow">
+                        <t t-set="email" t-value="user_id.email"/>
+                        <t t-set="object" t-value="blog"/>
+                        <t t-set="div_class" t-value="'mx-auto'"/>
+                    </t>
                 </t>
-            </t>
-            <p class="text-muted mb0 mt16">
-                Participate on our social stream.
-            </p>
-            <h2 class="mt4">
-                <a t-att-href="website.social_facebook" t-if="website.social_facebook" aria-label="Facebook" title="Facebook"><i class="fa fa-facebook-square"/></a>
-                <a t-att-href="website.social_twitter" t-if="website.social_twitter" aria-label="Twitter" title="Twitter"><i class="fa fa-twitter"/></a>
-                <a t-att-href="website.social_linkedin" t-if="website.social_linkedin" aria-label="LinkedIn" title="LinkedIn"><i class="fa fa-linkedin"/></a>
-                <a t-att-href="website.social_youtube" t-if="website.social_youtube" aria-label="Youtube" title="Youtube"><i class="fa fa-youtube-play"/></a>
-                <a t-att-href="website.social_googleplus" t-if="website.social_googleplus" aria-label="Google Plus" title="Google Plus"><i class="fa fa-google-plus-square"/></a>
-                <a t-att-href="website.social_github" t-if="website.social_github" aria-label="Github" title="Github"><i class="fa fa-github"/></a>
-                <a t-att-href="website.social_instagram" t-if="website.social_instagram" aria-label="Instagram" title="Instagram"><i class="fa fa-instagram"/></a>
-                <a t-att-href="'/blog/%s/feed' % (blog.id)" aria-label="RSS" title="RSS"><i class="fa fa-rss-square"/></a>
-            </h2>
-        </section>
+            </div>
+        </div>
     </xpath>
 </template>
 
 <!-- Option:Right Column: status -->
-<template id="opt_blog_rc_status" name="Status" priority="5"
+<template id="opt_blog_rc_status" name="Status" priority="2"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-md-8</attribute>
+        <attribute name="class">col</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
-        <section class="mt32 mb32" groups="website.group_website_designer">
-        <h4>Status</h4>
-        <ul class="nav nav-pills flex-column">
-            <t t-set="state" t-value="state_info['state']"/>
-            <li class="nav-item">
-                <a t-attf-href="#{state == 'published' and blog_url(state='') or blog_url(state='published')}" t-attf-class="nav-link#{state == 'published' and ' active' or ''}">Published <span class="float-right badge badge-pill" t-esc="state_info['published']" /></a>
-            </li>
-            <li class="nav-item">
-                <a t-attf-href="#{state == 'unpublished' and blog_url(state='') or blog_url(state='unpublished')}" t-attf-class="nav-link#{state == 'unpublished' and ' active' or ''}">Unpublished <span class="float-right badge badge-pill" t-esc="state_info['unpublished']" /></a>
-            </li>
-        </ul>
-        </section>
+        <div class="mb-3" groups="website.group_website_designer">
+            <h3 class="h4">Status</h3>
+            <ul class="nav nav-pills flex-column">
+                <t t-set="state" t-value="state_info['state']"/>
+                <li class="nav-item">
+                    <a t-attf-class="nav-link #{state == 'published' and 'active' or ''}"
+                        t-attf-href="#{state == 'published' and blog_url(state='') or blog_url(state='published')}">
+                        <i class="fa fa-eye mr-2"></i>
+                        <strong><span t-esc="state_info['published']" /></strong> published
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a t-attf-class="nav-link #{state == 'unpublished' and 'active' or ''}"
+                        t-attf-href="#{state == 'unpublished' and blog_url(state='') or blog_url(state='unpublished')}">
+                        <i class="fa fa-edit mr-2"></i>
+                        <strong><span t-esc="state_info['unpublished']" /></strong> unpublished
+                    </a>
+                </li>
+            </ul>
+        </div>
     </xpath>
 </template>
 
 <!-- Option:Right Column: blogs -->
-<template id="opt_blog_rc_blogs" name="Our Blogs" priority="6"
+<template id="opt_blog_rc_blogs" name="Our Blogs" priority="4"
         inherit_id="website_blog.index_right" active="True" customize_show="True">
     <xpath expr="//div[@id='main_column']" position="attributes">
-        <attribute name="class">col-md-8</attribute>
+        <attribute name="class">col</attribute>
     </xpath>
     <xpath expr="//div[@id='blog_right_column']" position="inside">
-        <section class="mt32 mb32">
-        <h4>Our Blogs</h4>
-        <ul class="nav nav-pills flex-column">
-            <t t-foreach="blogs" t-as="nav_blog">
-                <li class="nav-item">
-                    <a t-attf-href="#{blog_url(blog=nav_blog, tag=False, date_begin=False, date_end=False)}" t-attf-class="nav-link#{nav_blog.id == blog.id and ' active' or ''}">
-                        <span t-field="nav_blog.name"/>
-                    </a>
-                </li>
-            </t>
-        </ul>
-        </section>
+        <div class="mb-3">
+            <h3 class="h4">Our Blogs</h3>
+            <ul class="nav nav-pills flex-column">
+                <t t-foreach="blogs" t-as="nav_blog">
+                    <li class="nav-item">
+                        <a t-attf-href="#{blog_url(blog=nav_blog, tag=False, date_begin=False, date_end=False)}"
+                            t-attf-class="nav-link #{nav_blog.id == blog.id and 'active' or ''}">
+                            <span t-field="nav_blog.name"/>
+                        </a>
+                    </li>
+                </t>
+            </ul>
+        </div>
     </xpath>
 </template>