diff --git a/addons/crm/web_planner_data.xml b/addons/crm/web_planner_data.xml
index 74341ea180e..15c887cd729 100644
--- a/addons/crm/web_planner_data.xml
+++ b/addons/crm/web_planner_data.xml
@@ -135,7 +135,7 @@
                         <div class="o_planner_notebook_container col-md-12">
                             <ul class="o_planner_notebook">
                                 <li class="row o_planner_notebook_header">
-                                    <div class="col-xs-12 col-md-4 col-md-push-8 fa fa-lightbulb-o">
+                                    <div class="col-md-4 col-md-push-8 fa fa-lightbulb-o">
                                         Examples:
                                         <select id="input_element_pipeline">
                                             <option value="odoo_default">Odoo Default</option>
@@ -144,7 +144,7 @@
                                             <option value="b2b">B2B</option>
                                         </select>
                                     </div>
-                                    <h5 class="col-xs-12 col-md-8 col-md-pull-4"><strong>Sales Stages</strong></h5>
+                                    <h5 class="col-md-8 col-md-pull-4"><strong>Sales Stages</strong></h5>
                                 </li>
                                 <li class="row">
                                     <div class="col-md-6">
@@ -752,7 +752,7 @@
                                 </p>
                             </div>
                             <div class="hidden-xs hidden-sm col-md-2 icon"><span  data-icon="&#xe090;" /></div>
-                            <div class="col-xs-12 col-md-10">
+                            <div class="col-md-10">
                                 <p>
                                     <strong>Review the top 5 opportunities</strong><br/>
                                     Once the big picture is clear, focus on the best opportunities. Start from stages on the right (negotiation, proposal, etc) and review the biggest opportunities one by one with the team.
@@ -762,7 +762,7 @@
                             </div>
 
                             <div class="hidden-xs hidden-sm col-md-2 icon"><span  data-icon="&#xe05c;" /></div>
-                            <div class="col-xs-12 col-md-10">
+                            <div class="col-md-10">
                                 <p>
                                     <strong>Forecast future revenues</strong><br/>
                                     You can assess the maturity of a sales team by its ability to forecasts future revenues
diff --git a/addons/project/web_planner_data.xml b/addons/project/web_planner_data.xml
index 769d21d15e8..756676d9ff0 100644
--- a/addons/project/web_planner_data.xml
+++ b/addons/project/web_planner_data.xml
@@ -258,9 +258,8 @@
                     <div class="row">
                         <div class="o_planner_notebook_container col-md-12">
                             <ul class="o_planner_notebook">
-                                <li class="row o_planner_notebook_header">
-                                    <h5 class="col-xs-12 col-md-7"><strong>Stages and Requirements</strong> for next stage:</h5>
-                                    <div class="col-xs-12 col-md-5">
+                                <li class="o_planner_notebook_header">
+                                    <div class="pull-right">
                                         <select id="input_element_kanban_stage_pipeline">
                                             <option value="basic_management">Basic Management</option>
                                             <option value="development_process">Development Process</option>
@@ -270,40 +269,42 @@
                                             <option value="repair_workshop">Repair Workshop</option>
                                         </select>
                                     </div>
+                                    <h5><strong>Stages and Requirements</strong> for next stage:</h5>
                                 </li>
-                                <li class="row"><span>#1</span>
-                                <input class="col-xs-12 col-sm-4 user_project" id="input_element_stage_0" type="text" value="Ideas"/>
-                                <input class="col-xs-12 col-sm-7 col-sm-offset-1" id="input_element_stage_7" type="text" value="Idea is fully explained"/>
+                                <li>
+                                    <span>#1</span>
+                                    <input class="user_project" id="input_element_stage_0" type="text" value="Ideas"/>
+                                    <input class="indented" id="input_element_stage_7" type="text" value="Idea is fully explained"/>
                                 </li>
-                                <li class="row">
+                                <li>
                                     <span>#2</span>
-                                    <input class="col-xs-12 col-sm-4 user_project" id="input_element_stage_1" type="text" value="To Do"/>
-                                    <input class="col-xs-12 col-sm-7 col-sm-offset-1" id="input_element_stage_8" type="text" value="Idea has been transformed into concrete actions"/>
+                                    <input class="user_project" id="input_element_stage_1" type="text" value="To Do"/>
+                                    <input class="indented" id="input_element_stage_8" type="text" value="Idea has been transformed into concrete actions"/>
                                 </li>
-                                <li class="row">
+                                <li>
                                     <span>#3</span>
-                                    <input class="col-xs-12 col-sm-4 user_project" id="input_element_stage_2" type="text" value="Done"/>
-                                    <input class="col-xs-12 col-sm-7 col-sm-offset-1" id="input_element_stage_9" type="text" value="Task is completed"/>
+                                    <input class="user_project" id="input_element_stage_2" type="text" value="Done"/>
+                                    <input class="indented" id="input_element_stage_9" type="text" value="Task is completed"/>
                                 </li>
-                                <li class="row">
+                                <li>
                                     <span>#4</span>
-                                    <input class="col-xs-12 col-sm-4 user_project" id="input_element_stage_3" type="text" value="Cancelled"/>
-                                    <input class="col-xs-12 col-sm-7 col-sm-offset-1" id="input_element_stage_10" type="text" value="Reason for cancellation has been documented"/>
+                                    <input class="user_project" id="input_element_stage_3" type="text" value="Cancelled"/>
+                                    <input class="indented" id="input_element_stage_10" type="text" value="Reason for cancellation has been documented"/>
                                 </li>
-                                <li class="row">
+                                <li>
                                     <span>#5</span>
-                                    <input class="col-xs-12 col-sm-4 user_project" id="input_element_stage_4" type="text"/>
-                                    <input class="col-xs-12 col-sm-7 col-sm-offset-1" id="input_element_stage_11" type="text"/>
+                                    <input class="user_project" id="input_element_stage_4" type="text"/>
+                                    <input class="indented" id="input_element_stage_11" type="text"/>
                                 </li>
-                                <li class="row">
+                                <li>
                                     <span>#6</span>
-                                    <input class="col-xs-12 col-sm-4 user_project" id="input_element_stage_5" type="text"/>
-                                    <input class="col-xs-12 col-sm-7 col-sm-offset-1" id="input_element_stage_12" type="text"/>
+                                    <input class="user_project" id="input_element_stage_5" type="text"/>
+                                    <input class="indented" id="input_element_stage_12" type="text"/>
                                 </li>
-                                <li class="row">
+                                <li>
                                     <span>#7</span>
-                                    <input class="col-xs-12 col-sm-4 user_project" id="input_element_stage_6" type="text"/>
-                                    <input class="col-xs-12 col-sm-7 col-sm-offset-1" id="input_element_stage_13" type="text"/>
+                                    <input class="user_project" id="input_element_stage_6" type="text"/>
+                                    <input class="indented" id="input_element_stage_13" type="text"/>
                                 </li>
                                 <div class="o_planner_notebook_line_separator"></div>
                             </ul>
@@ -803,8 +804,8 @@
                     <p class="text-muted">Managing notifications is essential: too few and you risk missing critical information, too many and you will be  overloaded with unnecessary information. The trick is to find the right balance between the projects, stages and tasks you want to be informed about. Fortunately, Odoo Project has many levels of notifications and messages you can choose from.</p>
                     <div class="o_planner_paragraphs">
                         <div class="row">
-                            <div class="col-sm-1 col-md-2 icon"><span data-icon="&#xe051;" /></div>
-                            <div class="col-sm-7 col-md-7">
+                            <div class="col-md-2 icon"><span data-icon="&#xe051;" /></div>
+                            <div class="col-md-7">
                                 <p>
                                     <strong>Follow only what you need</strong><br/>
                                     The simplest way to use notifications is to follow a whole Project: you will then receive all the selected notifications for all the Project's new and existing and new Tasks or Issues.
@@ -814,13 +815,13 @@
                                 </p>
                                 <p>Another good way to limit the number of notifications you receive is to only follow your Project's 'Task Assigned' events.  Then you'll be notified when a Task or Issue is created, and can  manually decide if you want to be notified for its other events too.</p>
                             </div>
-                            <div class="col-sm-4 col-md-3">
+                            <div class="col-md-3">
                                 <img class="signature" src="/project/static/src/img/web_planner_subtype.png" />
                             </div>
                         </div>
                         <div class="row">
-                            <div class="col-sm-1 col-md-2 icon"><span data-icon="&#xe04a;" /></div>
-                            <div class="col-xs-12 col-md-10">
+                            <div class="col-md-2 icon"><span data-icon="&#xe04a;" /></div>
+                            <div class="col-md-10">
                                 <p>
                                     <strong>Rely on the chatter</strong><br/>
                                     Below every Task and Issue (or more generally, below every Document in Odoo) is an area called Chatter.
@@ -830,8 +831,8 @@
                             </div>
                         </div>
                         <div class="row">
-                            <div class="col-sm-1 col-md-2 icon"><span data-icon="&#xe035;" /></div>
-                            <div class="col-xs-12 col-md-10">
+                            <div class="col-md-2 icon"><span data-icon="&#xe035;" /></div>
+                            <div class="col-md-10">
                                 <p>
                                     <strong>Be careful about the messages you send</strong><br/>
                                     Sending a message through Odoo will automatically send an email containing your message to all the followers including internal employees, external users or customers.
@@ -839,13 +840,14 @@
                                 <p>An internal message will not send any email notification, but your message will still be displayed to every user that has access to the page.</p>
                                 <p>If you want to limit access for certain users or customers, simply use the Privacy / Visibility settings in the Project Settings.</p>
                             </div>
+                            <div class="col-md-5 col-md-offset-2">
+                                <img src="/project/static/src/img/web_planner_project.png"/>
+                            </div>
                         </div>
-                        <div class="col-sm-12 col-md-12 col-md-push-4">
-                            <img src="/project/static/src/img/web_planner_project.png"/>
-                        </div>
+
                         <div class="row">
-                            <div class="col-sm-1 col-md-2 icon"><span data-icon="&#xe01f;" /></div>
-                            <div class="col-xs-12 col-md-10">
+                            <div class="col-md-2 icon"><span data-icon="&#xe01f;" /></div>
+                            <div class="col-md-10">
                                 <p>
                                     <strong>Create tasks and issues by email</strong><br/>
                                 In Odoo, every project has an email alias. If you send an email to this alias, it will automatically create a task or issue in the first stage of the project, with all the email recipients as its default followers.</p>
@@ -853,7 +855,7 @@
                                     This is particularly useful to manage help and support: all incoming email  from customers will be transformed into an issue that you'll be able to track easily!
                                 </p>
                             </div>
-                            <p class="col-sm-8 col-md-8 col-md-push-2">
+                            <p class="col-md-8 col-md-push-2">
                                 <img src="/project/static/src/img/web_planner_email.png"/>
                             </p>
                         </div>
diff --git a/addons/web_planner/static/src/less/web_planner_common.less b/addons/web_planner/static/src/less/web_planner_common.less
index 265df1907ca..3117389fcbc 100644
--- a/addons/web_planner/static/src/less/web_planner_common.less
+++ b/addons/web_planner/static/src/less/web_planner_common.less
@@ -505,6 +505,10 @@
                                     max-width: 100%;
                                 }
 
+                                input[type="radio"],input[type="checkbox"] {
+                                    margin-right: 5px;
+                                }
+
                                 > li {
                                     list-style: none;
                                     border-bottom: 1px dashed #C1D6DA;
@@ -512,6 +516,10 @@
                                     text-transform: capitalize;
                                     margin: 0;
 
+                                    .indented {
+                                        padding-left: 32px;
+                                    }
+
                                     span {
                                         position: absolute;
                                         left: 9px;
diff --git a/addons/web_planner/static/src/xml/web_planner.xml b/addons/web_planner/static/src/xml/web_planner.xml
index 2e75a42578b..29ce9d370d2 100644
--- a/addons/web_planner/static/src/xml/web_planner.xml
+++ b/addons/web_planner/static/src/xml/web_planner.xml
@@ -48,7 +48,7 @@
         <t t-foreach="menu_categories" t-as="menu_category">
             <h4><i t-att-class="'fa ' + menu_category.classes"/><t t-esc="menu_category.name"/></h4>
             <li t-foreach="menu_category.menu_items" t-as="menu_item">
-                <a t-att-href="'#' + menu_item_page_map[menu_item]"><span class="fa fa-fw"/><t t-esc="menu_item"/></a>
+                <a t-att-href="'#' + menu_item_page_map[menu_item]" disable_anchor="true"><span class="fa fa-fw"/><t t-esc="menu_item"/></a>
             </li>
         </t>
     </t>