diff --git a/addons/board/static/tests/dashboard_tests.js b/addons/board/static/tests/dashboard_tests.js
index 5a39289331f..b8b4466279a 100644
--- a/addons/board/static/tests/dashboard_tests.js
+++ b/addons/board/static/tests/dashboard_tests.js
@@ -1061,7 +1061,7 @@ QUnit.test('click on a cell of pivot view inside dashboard', async function (ass
 
     assert.verifySteps([]);
 
-    await testUtils.dom.click(form.$('.o_pivot .o_pivot_cell_value'));
+    await testUtils.dom.click(form.$('.o_legacy_pivot .o_pivot_cell_value'));
 
     assert.verifySteps(['do action']);
 
@@ -1183,7 +1183,7 @@ QUnit.test('correctly display the time range descriptions of a reporting view in
     });
 
     assert.deepEqual(
-        [...form.el.querySelectorAll('div.o_pivot th.o_pivot_origin_row')].map(el => el.innerText),
+        [...form.el.querySelectorAll('div.o_legacy_pivot th.o_pivot_origin_row')].map(el => el.innerText),
         ['June 2020', 'July 2020', 'Variation']
     );
 
diff --git a/addons/web/__manifest__.py b/addons/web/__manifest__.py
index d22b72dd3b2..0cc3535cd75 100644
--- a/addons/web/__manifest__.py
+++ b/addons/web/__manifest__.py
@@ -116,7 +116,6 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/scss/fields.scss',
             'web/static/src/legacy/scss/file_upload.scss',
             'web/static/src/legacy/scss/views.scss',
-            'web/static/src/legacy/scss/graph_view.scss',
             'web/static/src/legacy/scss/form_view.scss',
             'web/static/src/legacy/scss/list_view.scss',
             'web/static/src/legacy/scss/kanban_dashboard.scss',
@@ -186,7 +185,6 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/js/model.js',
             'web/static/src/legacy/js/owl_compatibility.js',
             ("remove", 'web/static/src/legacy/js/views/graph/**/*'),
-            ("remove", 'web/static/src/legacy/scss/graph_view.scss'),
             ("remove", 'web/static/src/legacy/js/views/pivot/**/*'),
         ],
         "web.assets_backend_legacy_lazy": [
@@ -198,6 +196,7 @@ This module provides the core of the Odoo Web Client.
             'web/static/src/legacy/scss/graph_view.scss',
             # pivot
             'web/static/src/legacy/js/views/pivot/**/*',
+            'web/static/src/legacy/scss/pivot_view.scss',
         ],
         'web.assets_frontend_minimal': [
             'web/static/src/legacy/js/public/lazyloader.js',
diff --git a/addons/web/static/src/legacy/scss/graph_view.scss b/addons/web/static/src/legacy/scss/graph_view.scss
index ddf841c4989..82c0ce39d5f 100644
--- a/addons/web/static/src/legacy/scss/graph_view.scss
+++ b/addons/web/static/src/legacy/scss/graph_view.scss
@@ -1,4 +1,4 @@
-.o_graph_renderer {
+.o_legacy_graph_renderer {
     height: 100%;
     .o_graph_canvas_container {
         padding-top: 5px;
diff --git a/addons/web/static/src/legacy/scss/pivot_view.scss b/addons/web/static/src/legacy/scss/pivot_view.scss
new file mode 100644
index 00000000000..66b23ecdfdc
--- /dev/null
+++ b/addons/web/static/src/legacy/scss/pivot_view.scss
@@ -0,0 +1,104 @@
+.o_legacy_pivot {
+
+    .o_pivot_cell_value {
+        font-size: 1em;
+        .o_comparison {
+            font-size: 0.61em;
+        }
+        .o_variation {
+            &.o_positive {
+                color: green;
+            }
+            &.o_negative {
+                color: red;
+            }
+        }
+    }
+
+    table {
+        background-color: $o-view-background-color;
+        width: auto;  // bootstrap override
+
+        // Inform the user that he may click on a cell to be redirected to a list view of the
+        // items corresponding to the clicked cell
+        &.o_enable_linking {
+            .o_pivot_cell_value:not(.o_empty):hover {
+                color: $o-brand-primary;
+                cursor: pointer;
+
+            }
+        }
+
+        thead th:not(.o_pivot_header_cell_closed):not(.o_pivot_header_cell_opened):not(.o_pivot_header_cell) {
+            text-align: center;
+        }
+
+        th {
+            font-weight: normal;  // bootstrap override
+            background-color: lighten($o-brand-secondary, 40%);
+        }
+
+        @mixin o-pivot-header-cell {
+            background-color: lighten($o-brand-secondary, 40%);
+            cursor: pointer;
+            white-space: nowrap;
+            user-select: none;
+            &:hover {
+                background-color: lighten($o-brand-secondary, 30%);
+            }
+        }
+
+        .o_pivot_measure_row {
+            @include o-pivot-header-cell;
+        }
+
+        .o_pivot_header_cell {
+            white-space: nowrap;
+            user-select: none;
+        }
+
+        .o_pivot_header_cell_closed {
+            @include o-pivot-header-cell;
+            &::before {
+                font-family: FontAwesome;
+                content: "";
+                margin-right: 8px;
+            }
+        }
+
+        .o_pivot_header_cell_opened {
+            @include o-pivot-header-cell;
+            &::before {
+                font-family: FontAwesome;
+                content: "";
+                margin-right: 8px;
+            }
+        }
+
+        .o_pivot_sort_order_asc::after {
+            @include o-caret-up;
+            margin-left: 5px;
+        }
+
+        .o_pivot_sort_order_desc::after {
+            @include o-caret-down;
+            margin-left: 5px;
+        }
+
+        .o_pivot_cell_value.o_cell_hover {
+            background-color: $table-hover-bg;
+        }
+    }
+
+    .o_pivot_field_selection::after {
+        @include o-caret-right;
+        position: absolute;
+        right: 6px;
+        top: 9px;
+    }
+
+    .o_pivot_field_menu .dropdown-item.disabled {
+        color: $text-muted;
+        cursor: default;
+    }
+}
diff --git a/addons/web/static/src/legacy/xml/graph.xml b/addons/web/static/src/legacy/xml/graph.xml
index d194f10dba7..cd8a6d4d9d2 100644
--- a/addons/web/static/src/legacy/xml/graph.xml
+++ b/addons/web/static/src/legacy/xml/graph.xml
@@ -2,7 +2,7 @@
 <templates>
 
     <t t-name="web.Legacy.GraphRenderer" owl="1">
-        <div class="o_graph_renderer">
+        <div class="o_legacy_graph_renderer">
             <label t-if="props.title" t-esc="props.title"/>
             <t t-if="noContentHelperData" t-call="web.NoContentHelper">
                 <t t-set="title" t-value="noContentHelperData.title"/>
diff --git a/addons/web/static/src/legacy/xml/pivot.xml b/addons/web/static/src/legacy/xml/pivot.xml
index a244fec458d..ff5af0f9007 100644
--- a/addons/web/static/src/legacy/xml/pivot.xml
+++ b/addons/web/static/src/legacy/xml/pivot.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="utf-8"?>
 <templates>
 
-    <div t-name="web.legacy.PivotRenderer" class="o_pivot" owl="1">
+    <div t-name="web.legacy.PivotRenderer" class="o_legacy_pivot" owl="1">
         <t t-if="!(props.hasData and props.measures.length) or (props.isSample and !props.isEmbedded)">
             <t t-if="props.noContentHelp" t-call="web.ActionHelper" >
                 <t t-set="noContentHelp" t-value="props.noContentHelp"/>
diff --git a/addons/web/static/src/views/pivot/pivot_view.scss b/addons/web/static/src/views/pivot/pivot_view.scss
index 116c30dedd7..abee2b50c5b 100644
--- a/addons/web/static/src/views/pivot/pivot_view.scss
+++ b/addons/web/static/src/views/pivot/pivot_view.scss
@@ -19,8 +19,6 @@
             background: none!important;
             border: none!important;
             padding: 0!important;
-            // width: 100%!important;
-            // text-align: left!important;
         }
         background-color: $o-view-background-color;
         width: auto;  // bootstrap override
@@ -112,9 +110,4 @@
         @include o-caret-down;
         top: 10px;
     }
-
-    // .o_pivot_field_menu .dropdown-item.disabled {
-    //     color: $text-muted;
-    //     cursor: default;
-    // }
 }
diff --git a/addons/web/static/tests/legacy/views/graph_tests.js b/addons/web/static/tests/legacy/views/graph_tests.js
index 091ea1dac5c..29312aa9b1e 100644
--- a/addons/web/static/tests/legacy/views/graph_tests.js
+++ b/addons/web/static/tests/legacy/views/graph_tests.js
@@ -196,7 +196,7 @@ QUnit.module('Views', {
                 </graph>`,
         });
 
-        assert.strictEqual(graph.$('.o_graph_renderer label').text(), "Partners",
+        assert.strictEqual(graph.$('.o_legacy_graph_renderer label').text(), "Partners",
             "should have 'Partners as title'");
 
         graph.destroy();
diff --git a/addons/web/static/tests/legacy/views/pivot_tests.js b/addons/web/static/tests/legacy/views/pivot_tests.js
index 801910ddd52..0de856711db 100644
--- a/addons/web/static/tests/legacy/views/pivot_tests.js
+++ b/addons/web/static/tests/legacy/views/pivot_tests.js
@@ -197,7 +197,7 @@ QUnit.module('Views', {
                         '<field name="fubar" string="fubar" type="measure"/>' +
                 '</pivot>',
         });
-        assert.containsOnce(pivot, '.o_pivot', 'Non stored fields can have a string attribute');
+        assert.containsOnce(pivot, '.o_legacy_pivot', 'Non stored fields can have a string attribute');
         pivot.destroy();
     });
 
@@ -622,24 +622,24 @@ QUnit.module('Views', {
 
         // click on closed header to open dropdown
         await testUtils.dom.click(pivot.el.querySelector('tbody .o_pivot_header_cell_closed'));
-        assert.containsOnce(pivot, ".o_pivot .o_dropdown_menu");
+        assert.containsOnce(pivot, ".o_legacy_pivot .o_dropdown_menu");
         assert.strictEqual(
-            pivot.el.querySelector(".o_pivot .o_dropdown_menu").innerText.replace(/\s/g, ""),
+            pivot.el.querySelector(".o_legacy_pivot .o_dropdown_menu").innerText.replace(/\s/g, ""),
             "CompanyTypeCustomerDateOtherProductProductbar"
         );
 
         // open the Date sub dropdown
-        await testUtils.dom.click(pivot.el.querySelector(".o_pivot .o_dropdown_menu .o_dropdown_toggler.o_menu_item"));
+        await testUtils.dom.click(pivot.el.querySelector(".o_legacy_pivot .o_dropdown_menu .o_dropdown_toggler.o_menu_item"));
         assert.strictEqual(
             pivot.el
-                .querySelector(".o_pivot .o_dropdown_menu .o_dropdown_menu")
+                .querySelector(".o_legacy_pivot .o_dropdown_menu .o_dropdown_menu")
                 .innerText.replace(/\s/g, ""),
             "YearQuarterMonthWeekDay"
         );
 
         await testUtils.dom.click(
             pivot.el.querySelectorAll(
-                ".o_pivot .o_dropdown_menu .o_dropdown_menu .o_dropdown_item"
+                ".o_legacy_pivot .o_dropdown_menu .o_dropdown_menu .o_dropdown_item"
             )[2]
         );
 
@@ -2664,7 +2664,7 @@ QUnit.module('Views', {
         await cpHelpers.toggleComparisonMenu(pivot.el);
         await cpHelpers.toggleMenuItem(pivot.el, 'Date: Previous period');
 
-        assert.strictEqual(pivot.$('.o_pivot p.o_view_nocontent_empty_folder').length, 1);
+        assert.strictEqual(pivot.$('.o_legacy_pivot p.o_view_nocontent_empty_folder').length, 1);
 
         await cpHelpers.toggleFilterMenu(pivot.el);
         await cpHelpers.toggleMenuItem(pivot.el, 'Date');
@@ -2672,7 +2672,7 @@ QUnit.module('Views', {
         await cpHelpers.toggleMenuItemOption(pivot.el, 'Date', '2016');
         await cpHelpers.toggleMenuItemOption(pivot.el, 'Date', '2015');
 
-        assert.containsN(pivot, '.o_pivot thead tr:last th', 9,
+        assert.containsN(pivot, '.o_legacy_pivot thead tr:last th', 9,
             "last header row should contains 9 cells (3*[December 2016, November 2016, Variation]");
         var values = [
             "19", "0", "-100%", "0", "13", "100%", "19", "13", "-31.58%"
@@ -2680,7 +2680,7 @@ QUnit.module('Views', {
         assert.strictEqual(getCurrentValues(pivot), values.join());
 
         // with data, with row groupby
-        await testUtils.dom.click(pivot.$('.o_pivot .o_pivot_header_cell_closed').eq(2));
+        await testUtils.dom.click(pivot.$('.o_legacy_pivot .o_pivot_header_cell_closed').eq(2));
         await testUtils.dom.click(pivot.el.querySelectorAll("tbody .o_dropdown_menu .o_dropdown_item")[4]);
         values = [
             "19", "0", "-100%", "0", "13", "100%", "19", "13", "-31.58%",
@@ -2708,7 +2708,7 @@ QUnit.module('Views', {
         ];
         assert.strictEqual(getCurrentValues(pivot), values.join());
 
-        await testUtils.dom.clickFirst(pivot.$('.o_pivot .o_pivot_header_cell_opened'));
+        await testUtils.dom.clickFirst(pivot.$('.o_legacy_pivot .o_pivot_header_cell_opened'));
         values = [
             "2", "2", "0%",
             "2", "1", "-50%",
@@ -2789,7 +2789,7 @@ QUnit.module('Views', {
         await cpHelpers.toggleMenuItem(pivot.el, 'Date: Previous period');
 
         // With the data above, the time ranges contain no record.
-        assert.strictEqual(pivot.$('.o_pivot p.o_view_nocontent_empty_folder').length, 1, "there should be no data");
+        assert.strictEqual(pivot.$('.o_legacy_pivot p.o_view_nocontent_empty_folder').length, 1, "there should be no data");
         // export data should be impossible since the pivot buttons
         // are deactivated (exception: the 'Measures' button).
         assert.ok(pivot.$('.o_control_panel button.o_pivot_download').prop('disabled'));
diff --git a/addons/web/static/tests/legacy/views/search_panel_tests.js b/addons/web/static/tests/legacy/views/search_panel_tests.js
index e8dfb55fb4f..0651674572d 100644
--- a/addons/web/static/tests/legacy/views/search_panel_tests.js
+++ b/addons/web/static/tests/legacy/views/search_panel_tests.js
@@ -2393,7 +2393,7 @@ QUnit.module('Views', {
         assert.containsNone(webClient, '.o_content .o_search_panel');
 
         await switchView(webClient, 'pivot');
-        assert.containsOnce(webClient, '.o_content.o_component_with_search_panel .o_pivot');
+        assert.containsOnce(webClient, '.o_content.o_component_with_search_panel .o_legacy_pivot');
         assert.containsOnce(webClient, '.o_content.o_component_with_search_panel .o_search_panel');
     });
 
@@ -2517,7 +2517,7 @@ QUnit.module('Views', {
         // switch to pivot
         await switchView(webClient, 'pivot');
         await legacyExtraNextTick();
-        assert.containsOnce(webClient, '.o_content .o_pivot');
+        assert.containsOnce(webClient, '.o_content .o_legacy_pivot');
         assert.containsNone(webClient, '.o_content .o_search_panel');
         assert.strictEqual($(webClient.el).find('.o_pivot_cell_value').text(), '15');