diff --git a/addons/website/static/src/css/website.css b/addons/website/static/src/css/website.css
index a047753ebfc..65b322bd9e9 100644
--- a/addons/website/static/src/css/website.css
+++ b/addons/website/static/src/css/website.css
@@ -1,4 +1,3 @@
-@charset "utf-8";
 /*       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
  *
  * css for editor buttons, openerp widget included in the website and other
@@ -79,95 +78,6 @@
   margin-bottom: 0px !important;
 }
 
-.pt128 {
-  padding-top: 128px !important;
-}
-
-.pt92 {
-  padding-top: 92px !important;
-}
-
-.pt64 {
-  padding-top: 64px !important;
-}
-
-.pt48 {
-  padding-top: 48px !important;
-}
-
-.pt32 {
-  padding-top: 32px !important;
-}
-
-.pt16 {
-  padding-top: 16px !important;
-}
-
-.pt8 {
-  padding-top: 8px !important;
-}
-
-.pt4 {
-  padding-top: 4px !important;
-}
-
-.pt0 {
-  padding-top: 0px !important;
-}
-
-.pb128 {
-  padding-bottom: 128px !important;
-}
-
-.pb92 {
-  padding-bottom: 92px !important;
-}
-
-.pb64 {
-  padding-bottom: 64px !important;
-}
-
-.pb48 {
-  padding-bottom: 48px !important;
-}
-
-.pb32 {
-  padding-bottom: 32px !important;
-}
-
-.pb16 {
-  padding-bottom: 16px !important;
-}
-
-.pb8 {
-  padding-bottom: 8px !important;
-}
-
-.pb4 {
-  padding-bottom: 4px !important;
-}
-
-.pb0 {
-  padding-bottom: 0px !important;
-}
-
-/* Grid of unequally tall elements */
-.grid > [class*="col-md"] {
-  display: inline-block;
-  float: none;
-  vertical-align: top;
-  box-sizing: border-box;
-}
-.grid > [class*="col-md"].grid-align-top > [class*="col-md"] {
-  vertical-align: top;
-}
-.grid > [class*="col-md"].grid-align-middle > [class*="col-md"] {
-  vertical-align: middle;
-}
-.grid > [class*="col-md"].grid-align-bottom > [class*="col-md"] {
-  vertical-align: bottom;
-}
-
 /* Extra Styles */
 img.shadow {
   -webkit-border-radius: 3px;
@@ -186,9 +96,14 @@ h1.text-muted, h2.text-muted, h3.text-muted {
 }
 
 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
-.navbar.navbar-default.navbar-static-top {
+.navbar.navbar-static-top {
   margin-bottom: 0;
 }
+.navbar.navbar-static-top ul.nav > li.divider {
+  margin-top: 15px;
+  padding-top: 20px;
+  border-right: 1px solid grey;
+}
 
 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 html, body, #wrapwrap {
@@ -210,7 +125,7 @@ header, main, footer {
 footer {
   height: 100%;
   background: #eff8f8;
-  background: rgba(100, 200, 200, 0.1);
+  background: rgba(200, 200, 200, 0.1);
 }
 
 #footer_container {
@@ -442,7 +357,7 @@ div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
 /* Background */
 .oe_dark {
   background: #eff8f8;
-  background: rgba(100, 200, 200, 0.14);
+  background: rgba(200, 200, 200, 0.14);
   -webkit-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
   -moz-box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
   box-shadow: 0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset;
@@ -450,16 +365,55 @@ div.carousel[data-snippet-id="slider"] .carousel-indicators .active {
 
 .oe_black {
   background-color: rgba(0, 0, 0, 0.9);
+  color: white;
 }
 
 .oe_green {
-  background-color: rgba(0, 128, 0, 0.8);
+  background-color: #51d466;
+  color: white;
+}
+.oe_green .text-muted {
+  color: #dddddd;
+}
+
+.oe_blue_light {
+  background-color: #4791d2;
+  color: white;
+}
+.oe_blue_light .text-muted {
+  color: #dddddd;
+}
+
+.oe_blue {
+  background-color: #34495e;
+  color: white;
+}
+
+.oe_orange {
+  background-color: #e67e22;
+  color: white;
+}
+.oe_orange .text-muted {
+  color: #dddddd;
+}
+
+.oe_purple {
+  background-color: #b163a3;
+  color: white;
+}
+.oe_purple .text-muted {
+  color: #dddddd;
 }
 
 .oe_red {
-  background-color: rgba(255, 0, 0, 0.8);
+  background-color: #f75353;
+  color: white;
+}
+.oe_red .text-muted {
+  color: #dddddd;
 }
 
+/* Misc */
 .oe_img_bg {
   background-size: 100%;
 }
@@ -519,45 +473,3 @@ span[data-oe-type="monetary"] {
   -o-column-count: 3;
   column-count: 3;
 }
-
-.bs-callout {
-  margin: 20px 0;
-  padding: 20px;
-  border-left: 3px solid #eeeeee;
-}
-
-.bs-callout h4 {
-  margin-top: 0;
-  margin-bottom: 5px;
-}
-
-.bs-callout p:last-child {
-  margin-bottom: 0;
-}
-
-.bs-callout-danger {
-  background-color: #fdf7f7;
-  border-color: #eed3d7;
-}
-
-.bs-callout-danger h4 {
-  color: #b94a48;
-}
-
-.bs-callout-warning {
-  background-color: #faf8f0;
-  border-color: #faebcc;
-}
-
-.bs-callout-warning h4 {
-  color: #8a6d3b;
-}
-
-.bs-callout-info {
-  background-color: #f4f8fa;
-  border-color: #bce8f1;
-}
-
-.bs-callout-info h4 {
-  color: #34789a;
-}
diff --git a/addons/website/static/src/css/website.sass b/addons/website/static/src/css/website.sass
index c509bebce55..7422a9008ba 100644
--- a/addons/website/static/src/css/website.sass
+++ b/addons/website/static/src/css/website.sass
@@ -51,57 +51,6 @@
 .mb0
     margin-bottom: 0px !important
 
-.pt128
-    padding-top: 128px !important
-.pt92
-    padding-top: 92px !important
-.pt64
-    padding-top: 64px !important
-.pt48
-    padding-top: 48px !important
-.pt32
-    padding-top: 32px !important
-.pt16
-    padding-top: 16px !important
-.pt8
-    padding-top: 8px !important
-.pt4
-    padding-top: 4px !important
-.pt0
-    padding-top: 0px !important
-
-.pb128
-    padding-bottom: 128px !important
-.pb92
-    padding-bottom: 92px !important
-.pb64
-    padding-bottom: 64px !important
-.pb48
-    padding-bottom: 48px !important
-.pb32
-    padding-bottom: 32px !important
-.pb16
-    padding-bottom: 16px !important
-.pb8
-    padding-bottom: 8px !important
-.pb4
-    padding-bottom: 4px !important
-.pb0
-    padding-bottom: 0px !important
-
-/* Grid of unequally tall elements */
-.grid > [class*="col-md"]
-    display: inline-block
-    float: none
-    vertical-align: top
-    box-sizing: border-box
-    &.grid-align-top > [class*="col-md"]
-        vertical-align: top
-    &.grid-align-middle > [class*="col-md"]
-        vertical-align: middle
-    &.grid-align-bottom > [class*="col-md"]
-        vertical-align: bottom
-
 /* Extra Styles */
 
 img.shadow
@@ -114,8 +63,13 @@ h1.text-muted, h2.text-muted, h3.text-muted
 
 /* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */
 
-.navbar.navbar-default.navbar-static-top
+.navbar.navbar-static-top
     margin-bottom: 0
+    ul.nav
+        > li.divider
+            margin-top: 15px
+            padding-top: 20px
+            border-right: 1px solid grey
 
 /* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */
 
@@ -133,7 +87,7 @@ header, main, footer
 footer
     height: 100%
     background: rgb(239, 248, 248)
-    background: rgba(100, 200, 200, 0.1)
+    background: rgba(200, 200, 200, 0.1)
 
 #footer_container
     padding-top: 24px
@@ -330,17 +284,52 @@ div.carousel[data-snippet-id="slider"]
         padding: 32px 0
 
 /* Background */
- 
+
 .oe_dark
     background: #eff8f8
-    background: rgba(100, 200, 200, 0.14)
+    background: rgba(200, 200, 200, 0.14)
     +box-shadow(0px 5px 9px -7px rgba(0, 0, 255, 0.5) inset, 0px -3px 9px -7px rgba(0, 0, 255, 0.5) inset)
+
 .oe_black
     background-color: rgba(0, 0, 0, 0.9)
+    color: white
+
 .oe_green
-    background-color: rgba(0, 128, 0, 0.8)
+    background-color: #51d466
+    color: white
+    .text-muted
+        color: #ddd
+
+.oe_blue_light
+    background-color: #4791d2
+    color: white
+    .text-muted
+        color: #ddd
+
+.oe_blue
+    background-color: #34495e
+    color: white
+
+.oe_orange
+    background-color: #e67e22
+    color: white
+    .text-muted
+        color: #ddd
+
+.oe_purple
+    background-color: #b163a3
+    color: white
+    .text-muted
+        color: #ddd
+
 .oe_red
-    background-color: rgba(255, 0, 0, 0.8)
+    background-color: #f75353
+    color: white
+    .text-muted
+        color: #ddd
+
+/* Misc */
+
 .oe_img_bg
     background-size: 100%
 
@@ -386,30 +375,3 @@ span[data-oe-type="monetary"]
 .oe_template_fallback
     @include column-count(3)
 
-// ---- Callouts from bootstrap doc ---- {{{
-.bs-callout
-    margin: 20px 0
-    padding: 20px
-    border-left: 3px solid #eee
-.bs-callout h4
-    margin-top: 0
-    margin-bottom: 5px
-.bs-callout p:last-child
-    margin-bottom: 0
-
-.bs-callout-danger
-    background-color: #fdf7f7
-    border-color: #eed3d7
-.bs-callout-danger h4
-    color: #b94a48
-.bs-callout-warning
-    background-color: #faf8f0
-    border-color: #faebcc
-.bs-callout-warning h4
-    color: #8a6d3b
-.bs-callout-info
-    background-color: #f4f8fa
-    border-color: #bce8f1
-.bs-callout-info h4
-    color: #34789a
-// }}}
diff --git a/addons/website/static/src/img/blocks/block_features.png b/addons/website/static/src/img/blocks/block_features.png
new file mode 100644
index 00000000000..b56b1f7ba98
Binary files /dev/null and b/addons/website/static/src/img/blocks/block_features.png differ
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index a11d2b4f722..aa9a136ecdb 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -676,6 +676,118 @@
         </section>
     </div>
 
+    <div data-snippet-id="features" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_features.png"/>
+            <span class="oe_snippet_thumbnail_title">Features</span>
+        </div>
+        <section class="oe_snippet_body mb16">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-12 text-center mb16">
+                        <h2>List of Features</h2>
+                        <h4 class="text-muted">Add a great slogan</h4>
+                    </div>
+                    <div class="col-md-3 text-center">
+                        <span class="fa fa-suitcase fa-5x"></span>
+                        <h3 class="mt8 mb0">First Feature</h3>
+                        <p class="text-muted">Tell what's the value for the customer for this feature.</p>
+                        <p><a class="btn btn-primary">Learn More</a></p>
+                    </div>
+                    <div class="col-md-3 text-center">
+                        <span class="fa fa-lock fa-5x"></span>
+                        <h3 class="mt8 mb0">Second Feature</h3>
+                        <p class="text-muted">Talk about what the customer would like to know, not what you want to show.</p>
+                        <p><a class="btn btn-success">Take Tour</a></p>
+                    </div>
+                    <div class="col-md-3 text-center">
+                        <span class="fa fa-heart fa-5x"></span>
+                        <h3 class="mt8 mb0">Third Feature</h3>
+                        <p class="text-muted">A small explanation of this great feature, in clear words.</p>
+                        <p><a class="btn btn-info">Buy Now</a></p>
+                    </div>
+                    <div class="col-md-3 text-center">
+                        <span class="fa fa-credit-card fa-5x"></span>
+                        <h3 class="mt8 mb0">Fourth Feature</h3>
+                        <p class="text-muted">A small explanation of this great feature on two lines.</p>
+                        <p><a class="btn btn-danger">Buy Now</a></p>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+
+    <div data-snippet-id="features-list" data-selector-children=".oe_structure, [data-oe-type=html]">
+        <div class="oe_snippet_thumbnail">
+            <img class="oe_snippet_thumbnail_img" src="/website/static/src/img/blocks/block_features.png"/>
+            <span class="oe_snippet_thumbnail_title">Feature Grid</span>
+        </div>
+        <section class="oe_snippet_body mb16">
+            <div class="container">
+                <div class="row">
+                    <div class="col-md-5 text-center mb16">
+                        <h2>List of Features</h2>
+                        <h4 class="text-muted">Add a great slogan</h4>
+                    </div>
+                    <div class="col-md-5 text-center mb16 col-md-offset-2">
+                        <h2>Second List</h2>
+                        <h4 class="text-muted">Add a great slogan</h4>
+                    </div>
+                </div><div class="row">
+                    <div class="col-md-5">
+                        <ul class="list-unstyled">
+                          <li>
+                            <span style="min-width: 45px" class="fa fa-3x fa-comment pull-left mb16"></span>
+                            <h3 class="mb0">Blog</h3>
+                            <p>OpenERP includes a full features enterprise blog to promote your messages.</p>
+                          </li>
+                          <li>
+                            <span style="min-width: 45px" class="fa fa-3x fa-columns pull-left mb16"></span>
+                            <h3 class="mb0">Pricing Tables</h3>
+                            <p>Use building blocks to use pricing tables to display your products or services.</p>
+                          </li>
+                          <li>
+                            <span style="min-width: 45px" class="fa fa-3x fa-user pull-left mb16"></span>
+                            <h3 class="mb0">Log In &amp; Signup</h3>
+                            <p>Clean &amp; simple Log In, Signup &amp; Forgot Your Password forms.</p>
+                          </li>
+                          <li>
+                            <span style="min-width: 45px" class="fa fa-3x fa-envelope pull-left mb16"></span>
+                            <h3 class="mb0">Contact</h3>
+                            <p>User-friendly contact form with Google Map integration.</p>
+                          </li>
+                        </ul>
+
+                    </div>
+                    <div class="col-md-5 col-md-offset-2">
+                        <ul class="list-unstyled">
+                          <li>
+                            <span style="min-width: 45px" class="fa fa-3x fa-magic pull-left mb16"></span>
+                            <h3 class="mb0">Bootstrap</h3>
+                            <p>Uses Twitter Bootstrap's sleek, intuitive, and powerful front-end framework.</p>
+                          </li>
+                          <li>
+                            <span style="min-width: 45px" class="fa fa-3x fa-font pull-left mb16"></span>
+                            <h3 class="mb0">Google Web Fonts</h3>
+                            <p>Royalty free, open source fonts for the people, by the people!</p>
+                          </li>
+                          <li>
+                            <span style="min-width: 45px" class="fa fa-3x fa-bolt pull-left mb16"></span>
+                            <h3 class="mb0">Powerful &amp; slick jQuery</h3>
+                            <p>Fantastic jQuery plugins such as Isotope and Bootstrap's inbuilt features.</p>
+                          </li>
+                          <li>
+                            <span style="min-width: 45px" class="fa fa-3x fa-picture-o pull-left mb16"></span>
+                            <h3 class="mb0">Sample images</h3>
+                            <p>Fantastic sample images fully licensed for use.</p>
+                          </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </div>
+
 </div>
 
 <div id="snippet_effect" class="tab-pane fade">
@@ -796,6 +908,10 @@
                         <li data-class='oe_dark'><a>Darken</a></li>
                         <li data-class='oe_green'><a>Green</a></li>
                         <li data-class='oe_red'><a>Red</a></li>
+                        <li data-class='oe_blue_light'><a>Light Blue</a></li>
+                        <li data-class='oe_blue'><a>Dark Blue</a></li>
+                        <li data-class='oe_orange'><a>Orange</a></li>
+                        <li data-class='oe_purple'><a>Purple</a></li>
                         <li data-class='oe_black'><a>Black</a></li>
                     </ul>
                 </li>
diff --git a/addons/website/views/website_templates.xml b/addons/website/views/website_templates.xml
index d78e01948da..9682d2f17e2 100644
--- a/addons/website/views/website_templates.xml
+++ b/addons/website/views/website_templates.xml
@@ -96,12 +96,13 @@
                                     <t t-foreach="website.menu_id.child_id" t-as="submenu">
                                         <t t-call="website.submenu"/>
                                     </t>
+                                    <li class="divider"/>
                                     <li class="dropdown" t-ignore="true" t-if="user_id.id != website.public_user.id">
                                         <a href="#" class="dropdown-toggle" data-toggle="dropdown">
-                                            <span class="badge">
+                                            <b>
                                                 <span t-esc="user_id.name"/>
                                                 <span class="caret"></span>
-                                            </span>
+                                            </b>
                                         </a>
                                         <ul class="dropdown-menu js_usermenu" role="menu">
                                             <li><a href="/web" role="menuitem">Administration</a></li>
@@ -235,7 +236,7 @@
     <xpath expr="//ul[@id='top_menu']" position="inside">
         <li t-if="user_id.id == website.public_user.id">
             <a t-attf-href="/web#redirect=#{ quote_plus(url_for('', keep_query='*')) }">
-                <span class="badge">Sign in</span>
+                <b>Sign in</b>
             </a>
         </li>
     </xpath>
@@ -533,7 +534,7 @@
                     </div>
 
                     <div class="container" t-if="views">
-                        <div class="bs-callout bs-callout-danger" t-if="qweb_template and editable">
+                        <div class="alert alert-danger" t-if="qweb_template and editable">
                             <h4>Template fallback</h4>
                             <p>An error occured while rendering the template <code t-esc="qweb_template"/>.</p>
                             <p>If this error is caused by a change of yours in the templates, you have the possibility to reset one or more templates to their <strong>factory settings</strong>.</p>
diff --git a/addons/website_sale/views/website_sale.xml b/addons/website_sale/views/website_sale.xml
index 902bb9ee604..78c360bc296 100644
--- a/addons/website_sale/views/website_sale.xml
+++ b/addons/website_sale/views/website_sale.xml
@@ -51,7 +51,7 @@
 
 <template id="products_cart" name="Shopping cart">
   <div class="ribbon-wrapper">
-    <div class="ribbon btn btn-danger">Promo</div>
+    <div class="ribbon btn btn-danger">Sale</div>
   </div>
   <div class="oe_product_image">
       <a t-href="/shop/product/#{ slug(product) }/" t-keep-query="category,search,filters">