diff --git a/addons/website/static/src/less/website.snippets.less b/addons/website/static/src/less/website.snippets.less
index 0171b7eb9c4..854b4fd41c1 100644
--- a/addons/website/static/src/less/website.snippets.less
+++ b/addons/website/static/src/less/website.snippets.less
@@ -53,9 +53,33 @@ table.table_desc tr td {
 }
 
 // Other snippet styles
+// To prevent paragraph text coming below the feature grid icon / image
+.s_feature_grid p {
+    overflow: auto;
+}
+
 .s_comparisons .panel .list-group-item:not(.active) {
     color: #666;
 }
+.s_comparisons {
+    .panel small {
+        color: inherit;
+    }
+    .text-muted {
+        color: @text-muted;
+    }
+}
+
+.s_faq_collapse .container .panel {
+    background-color: inherit;
+    border : 1px solid rgba(0, 0, 0, 0.15);
+    .panel-body {
+        border-top: none;
+        border-bottom-left-radius: (@panel-border-radius - 1);
+        border-bottom-right-radius: (@panel-border-radius - 1);
+    }
+}
+
 .s_references .img-thumbnail {
     border: none;
 }
diff --git a/addons/website/views/snippets.xml b/addons/website/views/snippets.xml
index eee4a6f2f3b..bfee909f8b8 100644
--- a/addons/website/views/snippets.xml
+++ b/addons/website/views/snippets.xml
@@ -291,14 +291,14 @@
             <h2 class="text-center">Our Offers</h2>
             <div class="row">
                 <div class="col-md-4 col-xs-12">
-                    <div class="panel panel-info">
-                        <div class="panel-heading text-center">
+                    <div class="panel bg-gray-light">
+                        <div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Beginner</h3>
-                            <p style="margin: 0" class="text-muted">
+                            <p style="margin: 0">
                                 Starter package
                             </p>
                         </div>
-                        <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
+                        <div class="panel-body text-center">
                             <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">35</b><small>.00</small></h3>
                             <div>user / month (billed annually)</div>
                         </div>
@@ -317,12 +317,12 @@
                     </div>
                 </div>
                 <div class="col-md-4 col-xs-12">
-                    <div class="panel panel-primary">
-                        <div class="panel-heading text-center">
+                    <div class="panel bg-beta">
+                        <div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Professional</h3>
                             <p style="margin: 0">Enterprise package</p>
                         </div>
-                        <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
+                        <div class="panel-body text-center">
                             <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">65</b><small>.00</small></h3>
                             <div>user / month (billed annually)</div>
                         </div>
@@ -339,12 +339,12 @@
                     </div>
                 </div>
                 <div class="col-md-4 col-xs-12">
-                    <div class="panel panel-info">
-                        <div class="panel-heading text-center">
+                    <div class="panel bg-gray-light">
+                        <div class="panel-heading text-center" style="background-color: rgba(255, 255, 255, 0.1)">
                             <h3 style="margin: 0">Expert</h3>
-                            <p style="margin: 0" class="text-muted">Ultimate package</p>
+                            <p style="margin: 0">Ultimate package</p>
                         </div>
-                        <div class="panel-body text-center text-muted" style="background-color: rgba(0,0,0,0.1)">
+                        <div class="panel-body text-center">
                             <h3 style="margin: 0"><span>$</span><b style="font-size: 60px">125</b><small>.00</small></h3>
                             <div>user / month (billed annually)</div>
                         </div>
@@ -462,57 +462,59 @@
 <template id="s_faq_collapse" name="Accordion">
     <section class="s_faq_collapse">
         <div class="container">
-            <h2 class="page-header">Point of Sale Questions <small>v7</small></h2>
+            <h2 class="page-header"> General Terms and Conditions / Service Policies </h2>
             <div class="panel-group" role="tablist">
-                <div class="panel panel-default">
-                    <div class="panel-heading" role="tab" data-toggle="collapse">
+                <div class="panel">
+                    <div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
                         <h4 class="panel-title">
-                            Which hardware does Odoo POS support?
+                            Terms of service
                         </h4>
                     </div>
                     <div class="panel-collapse collapse" role="tabpanel">
-                        <div class="panel-body">
+                        <div class="panel-body bg-white-50">
                             <p>
-                                Odoo's POS is a web application that can run on any device that
-                                can display websites with little to no setup required.
+                                These terms of service ("Terms", "Agreement") are an agreement between the website
+                                ("Website operator", "us", "we" or "our") and you ("User", "you" or "your").
                             </p>
                             <p>
-                                The Point of Sale works perfectly on any kind of touch enabled
-                                device, whether it's multi-touch tablets like an iPad or
-                                keyboardless resistive touchscreen terminals.
+                                This Agreement sets forth the general terms and conditions of your use of this website
+                                and any of its products or services (collectively, "Website" or "Services").
                             </p>
                         </div>
                     </div>
                 </div>
-                <div class="panel panel-default">
-                    <div class="panel-heading" role="tab" data-toggle="collapse">
+                <div class="panel">
+                    <div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
                         <h4 class="panel-title">
-                            Does it works offline?
+                            Links to other websites
                         </h4>
                     </div>
                     <div class="panel-collapse collapse" role="tabpanel">
-                        <div class="panel-body">
+                        <div class="panel-body bg-white-50">
                             <p>
-                                Deploy new stores with just an internet connection: no
-                                installation, no specific hardware required. It works with any
-                                iPad, Tablet PC, laptop or industrial POS machine.
+                                Although this Website may be linked to other websites, we are not, directly or
+                                indirectly, implying any approval, association, sponsorship, endorsement, or
+                                affiliation with any linked website, unless specifically stated herein.
                             </p>
                             <p>
-                                While an internet connection is required to start the Point of
-                                Sale, it will stay operational even after a complete disconnection.
+                                You should carefully review the legal statements and other conditions of use of
+                                any website which you access through a link from this Website. Your linking to
+                                any other off-site pages or other websites is at your own risk.
                             </p>
                         </div>
                     </div>
                 </div>
-                <div class="panel panel-default">
-                    <div class="panel-heading" role="tab" data-toggle="collapse">
+                <div class="panel">
+                    <div class="panel-heading bg-gray-lighter" role="tab" data-toggle="collapse">
                         <h4 class="panel-title">
-                            Can I use it to manage projects based on agile methodologies?
+                            Use Of Cookies
                         </h4>
                     </div>
                     <div class="panel-collapse collapse" role="tabpanel">
-                        <div class="panel-body">
-                            <p>Yes</p>
+                        <div class="panel-body bg-white-50">
+                            <p>Website may use cookies to personalize and facilitate maximum navigation of the
+                                User by this site. The User may configure his / her browser to notify and
+                                reject the installation of the cookies sent by us.</p>
                         </div>
                     </div>
                 </div>
@@ -553,45 +555,49 @@
         <div class="container">
             <div class="row">
                 <div class="col-md-5 col-md-offset-1">
-                    <div class="col-md-12 mt16 mb16">
-                        <h3 class="mb0">List of Features</h3>
-                        <h5 class="text-muted mb16">Add a great slogan</h5>
-                    </div>
-                    <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-2x fa-comment pull-left mb16"></span>
-                        <h4 class="mt0 mb0">Change Icons</h4>
-                        <p>Click on the icon to adapt it to your feature</p><br/>
-                    </div>
-                    <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-2x fa-columns pull-left mb16"></span>
-                        <h4 class="mt0 mb0">Duplicate</h4>
-                        <p>Duplicate blocks to add more features.</p><br/>
-                    </div>
-                    <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-2x fa-user pull-left mb16"></span>
-                        <h4 class="mt0 mb0">Delete Blocks</h4>
-                        <p>Select and delete blocks to remove some features.</p><br/>
+                    <div class="row">
+                        <div class="col-md-12 mt16 mb16">
+                            <h3 class="mb0">List of Features</h3>
+                            <h5 class="text-muted mb16">Add a great slogan</h5>
+                        </div>
+                        <div class="col-md-12">
+                            <span style="min-width: 45px" class="fa fa-2x fa-comment pull-left mb16"></span>
+                            <h4 class="mt0 mb0">Change Icons</h4>
+                            <p>Click on the icon to adapt it to your feature</p><br/>
+                        </div>
+                        <div class="col-md-12">
+                            <span style="min-width: 45px" class="fa fa-2x fa-columns pull-left mb16"></span>
+                            <h4 class="mt0 mb0">Duplicate</h4>
+                            <p>Duplicate blocks to add more features.</p><br/>
+                        </div>
+                        <div class="col-md-12">
+                            <span style="min-width: 45px" class="fa fa-2x fa-user pull-left mb16"></span>
+                            <h4 class="mt0 mb0">Delete Blocks</h4>
+                            <p>Select and delete blocks to remove some features.</p><br/>
+                        </div>
                     </div>
                 </div>
                 <div class="col-md-5">
-                    <div class="col-md-12 mt16 mb16">
-                        <h3 class="mb0">Second List</h3>
-                        <h5 class="text-muted mb16">Add a great slogan</h5>
-                    </div>
-                    <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-2x fa-magic pull-left mb16"></span>
-                        <h4 class="mt0 mb0">Great Value</h4>
-                        <p>Tell features the visitor would like to know, not what you'd like to say.</p>
-                    </div>
-                    <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-2x fa-bolt pull-left mb16"></span>
-                        <h4 class="mt0 mb0">Change Background</h4>
-                        <p>From the main container, you can change the background to highlight features.</p>
-                    </div>
-                    <div class="col-md-12">
-                        <span style="min-width: 45px" class="fa fa-2x fa-picture-o pull-left mb16"></span>
-                        <h4 class="mt0 mb0">Sample images</h4>
-                        <p>All these icons are licensed under creative commons so that you can use them.</p>
+                    <div class="row">
+                        <div class="col-md-12 mt16 mb16">
+                            <h3 class="mb0">Second List</h3>
+                            <h5 class="text-muted mb16">Add a great slogan</h5>
+                        </div>
+                        <div class="col-md-12">
+                            <span style="min-width: 45px" class="fa fa-2x fa-magic pull-left mb16"></span>
+                            <h4 class="mt0 mb0">Great Value</h4>
+                            <p>Tell features the visitor would like to know, not what you'd like to say.</p>
+                        </div>
+                        <div class="col-md-12">
+                            <span style="min-width: 45px" class="fa fa-2x fa-bolt pull-left mb16"></span>
+                            <h4 class="mt0 mb0">Change Background</h4>
+                            <p>From the main container, you can change the background to highlight features.</p>
+                        </div>
+                        <div class="col-md-12">
+                            <span style="min-width: 45px" class="fa fa-2x fa-picture-o pull-left mb16"></span>
+                            <h4 class="mt0 mb0">Sample images</h4>
+                            <p>All these icons are licensed under creative commons so that you can use them.</p>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -759,7 +765,7 @@
     </div>
 
     <div data-js="colorpicker"
-        data-selector="section:not(.parallax), :not(.o_gallery > .container) > .carousel">
+        data-selector="section:not(.parallax), :not(.o_gallery > .container) > .carousel, .s_comparisons .panel, .s_faq_collapse .panel-body, .s_faq_collapse .panel-heading">
         <li class="dropdown-submenu">
             <a tabindex="-1" href="#"><i class="fa fa-eyedropper"/>Background Color</a>
             <ul class="dropdown-menu">