diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 80ac570ea1f..0ef00e26bbe 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -898,15 +898,20 @@ label.error {
     color: #555;
 }
 
-.openerp .oe-list-pager > *, .openerp .oe_form_pager *, .openerp .oe_pager_separator  {
-   line-height:17px;
-   width:12px;
-   height:17px;
+.openerp .oe_button.oe_button_pager,
+.openerp .oe-list-pager > span,
+.openerp .oe_form_pager > span {
+   line-height: 17px;
+   height: 17px;
    cursor: pointer;
-   color:gray;
-   font-weight:bold;
-   vertical-align:middle;
-   border:0;
+   color: gray;
+   font-weight: bold;
+   vertical-align: middle;
+}
+.openerp .oe_button.oe_button_pager,
+.openerp .oe_button.oe_button_pager:disabled {
+    padding: 0 3px 0 3px;
+    margin: 0;
 }
 .openerp .oe-listview .oe-group-name {
     padding-right: 1em;
@@ -2001,23 +2006,6 @@ ul.oe-arrow-list li.oe-arrow-list-selected .oe-arrow-list-after {
     background-position: 0px -21px;
 }
 
-.openerp .oe-list-pager button[disabled="disabled"], .openerp .oe_form_pager button[disabled="disabled"] {
-    opacity:0.5;
-    filter:alpha(opacity=50); /* For IE8 and earlier */ 
-}
-.openerp .oe-list-pager button[data-pager-action="first"], .openerp .oe_form_pager button[data-pager-action="first"] {
-    background: url("/web/static/src/img/pager_first.png") no-repeat scroll center center transparent;
-}
-.openerp .oe-list-pager button[data-pager-action="previous"], .openerp .oe_form_pager button[data-pager-action="previous"] {
-    background: url("/web/static/src/img/pager_left.png") no-repeat scroll center center transparent;
-}
-.openerp .oe-list-pager button[data-pager-action="next"], .openerp .oe_form_pager button[data-pager-action="next"] {
-    background: url("/web/static/src/img/pager_right.png") no-repeat scroll center center transparent;
-}
-.openerp .oe-list-pager button[data-pager-action="last"], .openerp .oe_form_pager button[data-pager-action="last"] {
-    background: url("/web/static/src/img/pager_last.png") no-repeat scroll center center transparent;
-}
-
 /* Buttons */
 .openerp .oe_button:link,
 .openerp .oe_button:visited,
diff --git a/addons/web/static/src/img/pager_first.png b/addons/web/static/src/img/pager_first.png
index 02e7ef5be41..83074ed696f 100644
Binary files a/addons/web/static/src/img/pager_first.png and b/addons/web/static/src/img/pager_first.png differ
diff --git a/addons/web/static/src/img/pager_first_inactive.png b/addons/web/static/src/img/pager_first_inactive.png
deleted file mode 100644
index 26c7df05ec6..00000000000
Binary files a/addons/web/static/src/img/pager_first_inactive.png and /dev/null differ
diff --git a/addons/web/static/src/img/pager_last.png b/addons/web/static/src/img/pager_last.png
index c598a62c748..dedcede4b62 100644
Binary files a/addons/web/static/src/img/pager_last.png and b/addons/web/static/src/img/pager_last.png differ
diff --git a/addons/web/static/src/img/pager_last_inactive.png b/addons/web/static/src/img/pager_last_inactive.png
deleted file mode 100644
index 3ab5551e6e0..00000000000
Binary files a/addons/web/static/src/img/pager_last_inactive.png and /dev/null differ
diff --git a/addons/web/static/src/img/pager_left.png b/addons/web/static/src/img/pager_left.png
deleted file mode 100644
index e24b5a27566..00000000000
Binary files a/addons/web/static/src/img/pager_left.png and /dev/null differ
diff --git a/addons/web/static/src/img/pager_left_inactive.png b/addons/web/static/src/img/pager_left_inactive.png
deleted file mode 100644
index bea9c3f63b5..00000000000
Binary files a/addons/web/static/src/img/pager_left_inactive.png and /dev/null differ
diff --git a/addons/web/static/src/img/pager_next.png b/addons/web/static/src/img/pager_next.png
new file mode 100644
index 00000000000..9b5e7090735
Binary files /dev/null and b/addons/web/static/src/img/pager_next.png differ
diff --git a/addons/web/static/src/img/pager_previous.png b/addons/web/static/src/img/pager_previous.png
new file mode 100644
index 00000000000..7134186008c
Binary files /dev/null and b/addons/web/static/src/img/pager_previous.png differ
diff --git a/addons/web/static/src/img/pager_right.png b/addons/web/static/src/img/pager_right.png
deleted file mode 100644
index bff268a52b9..00000000000
Binary files a/addons/web/static/src/img/pager_right.png and /dev/null differ
diff --git a/addons/web/static/src/img/pager_right_inactive.png b/addons/web/static/src/img/pager_right_inactive.png
deleted file mode 100644
index dd7cdc5de62..00000000000
Binary files a/addons/web/static/src/img/pager_right_inactive.png and /dev/null differ
diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index 3bcba1b7a2f..07ca67081e0 100644
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -226,6 +226,7 @@ openerp.web.FormView = openerp.web.View.extend( /** @lends openerp.web.FormView#
     do_update_pager: function(hide_index) {
         var $pager = this.$form_header.find('div.oe_form_pager');
         var index = hide_index ? '-' : this.dataset.index + 1;
+        $pager.find('button').prop('disabled', this.dataset.ids.length < 2)
         $pager.find('span.oe_pager_index').html(index);
         $pager.find('span.oe_pager_count').html(this.dataset.ids.length);
     },
diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 260a8e20308..6425d748171 100644
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -567,6 +567,24 @@
     </td>
 </tr>
 
+<t t-name="ViewPager">
+    <button class="oe_button oe_button_pager" type="button" data-pager-action="first">
+        <img t-att-src='_s + "/web/static/src/img/pager_first.png"'/>
+    </button>
+    <button class="oe_button oe_button_pager" type="button" data-pager-action="previous">
+        <img t-att-src='_s + "/web/static/src/img/pager_previous.png"'/>
+    </button>
+
+    <t t-raw="__content__"/>
+
+    <button class="oe_button oe_button_pager" type="button" data-pager-action="next">
+        <img t-att-src='_s + "/web/static/src/img/pager_next.png"'/>
+    </button>
+    <button class="oe_button oe_button_pager" type="button" data-pager-action="last">
+        <img t-att-src='_s + "/web/static/src/img/pager_last.png"'/>
+    </button>
+</t>
+
 <table t-name="ListView" class="oe-listview-content">
     <t t-set="columns_count" t-value="visible_columns.length + (options.selectable ? 1 : 0) + (options.deletable ? 1 : 0) + (options.isClarkGable ? 1 : 0)"/>
     <thead class="ui-widget-header">
@@ -639,18 +657,10 @@
 </t>
 <th t-name="Listview.navigation.button" t-if="!no_leaf and options.pager !== false"
         class="oe-list-pager" t-att-colspan="columns_count">
-    <button type="button" disabled="disabled"
-            data-pager-action="first"></button>
-    <button type="button" disabled="disabled"
-            data-pager-action="previous"></button>
-
-    <span class="oe-pager-state">
-    </span>
-
-    <button type="button" disabled="disabled"
-            data-pager-action="next"></button>
-    <button type="button" disabled="disabled"
-            data-pager-action="last"></button>
+    <t t-call="ViewPager">
+        <span class="oe-pager-state">
+        </span>
+    </t>
 </th>
 <t t-name="ListView.rows" t-foreach="records.length" t-as="index">
     <t t-call="ListView.row">
@@ -696,13 +706,9 @@
             <button type="button" class="oe_button oe_form_button_cancel">Cancel</button>
         </div>
         <div class="oe_form_pager" t-if="widget.options.pager !== false">
-            <button type="button" data-pager-action="first"></button>
-            <button type="button" data-pager-action="previous"></button>
-
-            <span class="oe_pager_index">0</span><span class="oe_pager_separator"> / </span><span class="oe_pager_count">0</span>
-
-            <button type="button" data-pager-action="next"></button>
-            <button type="button" data-pager-action="last"></button>
+            <t t-call="ViewPager">
+                <span class="oe_pager_index">0</span><span class="oe_pager_separator"> / </span><span class="oe_pager_count">0</span>
+            </t>
         </div>
     </div>
     <t t-raw="frame.render()"/>
diff --git a/addons/web_diagram/static/src/xml/base_diagram.xml b/addons/web_diagram/static/src/xml/base_diagram.xml
index 3485020cfa8..6d0e36e2f17 100644
--- a/addons/web_diagram/static/src/xml/base_diagram.xml
+++ b/addons/web_diagram/static/src/xml/base_diagram.xml
@@ -1,19 +1,15 @@
 <template>
-    <t t-name="DiagramView">
-        <div class="oe_diagram_header" t-att-id="element_id + '_header'">
-            <div class="oe_diagram_buttons">
-                <button type="button" id="new_node" class="oe_button oe_diagram_button_new">New Node</button>
-            </div>
-            <div class="oe_diagram_pager">
-                <button type="button" data-pager-action="first">First</button>
-                <button type="button" data-pager-action="previous">&lt;&lt;</button>
-
-                <span class="oe_pager_index">0</span> / <span class="oe_pager_count">0</span>
-
-                <button type="button" data-pager-action="next">&gt;&gt;</button>
-                <button type="button" data-pager-action="last">Last</button>
-            </div>
+<t t-name="DiagramView">
+    <div class="oe_diagram_header" t-att-id="element_id + '_header'">
+        <div class="oe_diagram_buttons">
+            <button type="button" id="new_node" class="oe_button oe_diagram_button_new">New Node</button>
         </div>
-        <div id="dia-canvas" class="diagram" style="overflow: auto;"></div>
-    </t>
+        <div class="oe_diagram_pager">
+            <t t-call="ViewPager">
+                <span class="oe_pager_index">0</span> / <span class="oe_pager_count">0</span>
+            </t>
+        </div>
+    </div>
+    <div id="dia-canvas" class="diagram" style="overflow: auto;"></div>
+</t>
 </template>