diff --git a/addons/hr_recruitment/static/src/scss/hr_job.scss b/addons/hr_recruitment/static/src/scss/hr_job.scss
index ea195c06157..4bd6278d6bf 100644
--- a/addons/hr_recruitment/static/src/scss/hr_job.scss
+++ b/addons/hr_recruitment/static/src/scss/hr_job.scss
@@ -64,12 +64,6 @@
 
 .o_kanban_renderer {
     &.o_kanban_applicant {
-        .o_sample_data_disabled {
-            .ribbon {
-                display: none;
-            }
-        }
-
         .ribbon {
             &::before, &::after {
                 display: none;
@@ -93,11 +87,17 @@
     }
 }
 
-.o_kanban_view .oe_kanban_card {
-    .o_kanban_state_with_padding {
-        padding-left:7%;
-        padding-bottom:5%;
-        width: 12px;
+.o_kanban_view {
+    .oe_kanban_card {
+        .o_kanban_state_with_padding {
+            padding-left:7%;
+            padding-bottom:5%;
+            width: 12px;
+        }
+    }
+
+    .o_view_sample_data .ribbon {
+        display: none;
     }
 }
 
diff --git a/addons/web/static/src/legacy/scss/utils.scss b/addons/web/static/src/legacy/scss/utils.scss
index d980421e297..1a7d2c0bb72 100644
--- a/addons/web/static/src/legacy/scss/utils.scss
+++ b/addons/web/static/src/legacy/scss/utils.scss
@@ -416,6 +416,13 @@
     background: transparent url(/web/static/img/empty_folder.svg) no-repeat center;
 }
 
+// Sample data
+@mixin o-sample-data-disabled {
+    opacity: 0.33;
+    pointer-events: none;
+    user-select: none;
+}
+
 // ----------------------------------------------------------------------------
 // CSS Variables
 // ----------------------------------------------------------------------------
diff --git a/addons/web/static/src/views/graph/graph_controller.xml b/addons/web/static/src/views/graph/graph_controller.xml
index 75049f4574b..ebd4e6ca7b8 100644
--- a/addons/web/static/src/views/graph/graph_controller.xml
+++ b/addons/web/static/src/views/graph/graph_controller.xml
@@ -65,11 +65,7 @@
                     <t t-if="model.useSampleModel and props.info.noContentHelp" t-call="web.ActionHelper">
                         <t t-set="noContentHelp" t-value="props.info.noContentHelp"/>
                     </t>
-                    <t t-component="props.Renderer"
-                        class="model.useSampleModel ? 'o_sample_data_disabled' : ''"
-                        model="model"
-                        onGraphClicked="(domain) => this.onGraphClicked(domain)"
-                        />
+                    <t t-component="props.Renderer" model="model" onGraphClicked="(domain) => this.onGraphClicked(domain)" />
                 </t>
                 <t t-else="" t-call="web.NoContentHelper">
                     <t t-set="title">Invalid data</t>
diff --git a/addons/web/static/src/views/graph/graph_view.scss b/addons/web/static/src/views/graph/graph_view.scss
index 7fb03e8eef6..32711fb1675 100644
--- a/addons/web/static/src/views/graph/graph_view.scss
+++ b/addons/web/static/src/views/graph/graph_view.scss
@@ -1,3 +1,11 @@
-.o_graph_view canvas {
+// ------- Graph renderer -------
+.o_graph_renderer canvas {
     background-color: $o-view-background-color;
 }
+
+// ------- Sample mode -------
+.o_graph_view .o_view_sample_data {
+    .o_graph_renderer {
+        @include o-sample-data-disabled;
+    }
+}
diff --git a/addons/web/static/src/views/kanban/kanban_controller.scss b/addons/web/static/src/views/kanban/kanban_controller.scss
index 86528a541fa..a6c29dc6fe6 100644
--- a/addons/web/static/src/views/kanban/kanban_controller.scss
+++ b/addons/web/static/src/views/kanban/kanban_controller.scss
@@ -1,4 +1,4 @@
-// ------- Kanban View Layout -------
+// ------- Kanban renderer -------
 .o_kanban_renderer {
     // ----------------------------------------------------------------------------
     // Default KanbanView values
@@ -603,7 +603,21 @@
     }
 }
 
-// ----------------- Set Cover Dialog -----------------
+// ------- Sample mode -------
+.o_kanban_view .o_view_sample_data {
+    // all records
+    .o_kanban_record,
+    // progress bars and counters
+    .o_kanban_counter,
+    // column actions
+    .o_kanban_toggle_fold,
+    .o_column_archive_records,
+    .o_column_unarchive_records {
+        @include o-sample-data-disabled;
+    }
+}
+
+// ------- Set cover dialog -------
 .modal .o_kanban_cover_container .o_kanban_cover_image {
     height: 120px;
     width: 120px;
diff --git a/addons/web/static/src/views/kanban/kanban_record.js b/addons/web/static/src/views/kanban/kanban_record.js
index 8b8aa6f3d55..35e099adfc2 100644
--- a/addons/web/static/src/views/kanban/kanban_record.js
+++ b/addons/web/static/src/views/kanban/kanban_record.js
@@ -236,9 +236,6 @@ export class KanbanRecord extends Component {
             const value = record.data[archInfo.cardColorField];
             classes.push(getColorClass(value));
         }
-        if (record.model.useSampleModel) {
-            classes.push("o_sample_data_disabled");
-        }
         if (!this.props.list.isGrouped) {
             classes.push("flex-grow-1 flex-md-shrink-1 flex-shrink-0");
         }
diff --git a/addons/web/static/src/views/kanban/kanban_renderer.xml b/addons/web/static/src/views/kanban/kanban_renderer.xml
index c8774db6b66..80bab5f5404 100644
--- a/addons/web/static/src/views/kanban/kanban_renderer.xml
+++ b/addons/web/static/src/views/kanban/kanban_renderer.xml
@@ -24,7 +24,7 @@
                                         </t>
                                         <DropdownItem t-if="!env.isSmall" class="{
                                                 'o_kanban_toggle_fold': true,
-                                                'o_sample_data_disabled disabled': props.list.model.useSampleModel,
+                                                'disabled': props.list.model.useSampleModel,
                                             }" onSelected="() => this.toggleGroup(group)">
                                             Fold
                                         </DropdownItem>
diff --git a/addons/web/static/src/views/list/list_renderer.js b/addons/web/static/src/views/list/list_renderer.js
index 113c995dfff..97161e192c7 100644
--- a/addons/web/static/src/views/list/list_renderer.js
+++ b/addons/web/static/src/views/list/list_renderer.js
@@ -621,9 +621,6 @@ export class ListRenderer extends Component {
         if (record.selected) {
             classNames.push("o_data_row_selected");
         }
-        if (this.props.list.model.useSampleModel) {
-            classNames.push("o_sample_data_disabled");
-        }
         if (this.canResequenceRows) {
             classNames.push("o_row_draggable");
         }
diff --git a/addons/web/static/src/views/list/list_renderer.scss b/addons/web/static/src/views/list/list_renderer.scss
index d86ec693778..f86b78e1c2b 100644
--- a/addons/web/static/src/views/list/list_renderer.scss
+++ b/addons/web/static/src/views/list/list_renderer.scss
@@ -1,3 +1,4 @@
+// ------- List renderer -------
 .o_list_renderer {
     --ListRenderer-table-padding-h: #{$table-cell-padding-x-sm};
 
@@ -89,7 +90,8 @@
         &.o_list_computing_widths {
             > tbody > tr > td {
                 &.o_list_text, // text field, className on the td
-                > .o_field_text { // text field with widget, className inside the td
+                > .o_field_text {
+                    // text field with widget, className inside the td
                     white-space: pre !important;
                 }
             }
@@ -162,7 +164,8 @@
 
         // Grouped list views
         tbody > tr.o_group_header {
-            > th, > td {
+            > th,
+            > td {
                 vertical-align: middle;
                 padding-top: 5px;
                 padding-bottom: 5px;
@@ -191,7 +194,8 @@
                 margin-top: -2px;
                 margin-bottom: -2px;
 
-                .o_pager_previous, .o_pager_next {
+                .o_pager_previous,
+                .o_pager_next {
                     max-height: 30px;
                     padding: 0 5px;
                     background-color: lighten($o-brand-lightsecondary, 10%);
@@ -202,16 +206,15 @@
             }
         }
         tbody + tbody {
-            border-top: none;  // Override bootstrap for grouped list views
+            border-top: none; // Override bootstrap for grouped list views
         }
 
 
-
         .o_data_cell.o_text_overflow,
         .o_data_cell.o_invisible_modifier {
             // Override display: none to keep table cells aligned. Note: cannot use
             // 'initial' as it will force them to 'inline', not 'table-cell'.
-            display: table-cell!important;
+            display: table-cell !important;
         }
 
         &.o_resizing tr > :not(.o_column_resizing) {
@@ -239,7 +242,6 @@
         }
 
         .o_data_row:not(.o_selected_row) .o_data_cell {
-
             // Boolean fields in non-selected rows completely disabled.
             .form-check {
                 pointer-events: none;
@@ -310,16 +312,19 @@
                 &.o_field_badge {
                     width: auto; // override width: 100% to keep the optimal badge width
                 }
-                .o_input_dropdown, .o_datepicker {
+                .o_input_dropdown,
+                .o_datepicker {
                     > .o_input {
                         padding-right: 15px; // to prevent caret overlapping
                     }
-                    > .o_dropdown_button, .o_datepicker_button {
+                    > .o_dropdown_button,
+                    .o_datepicker_button {
                         margin-right: 5px;
                         @include o-position-absolute(0, 0);
                     }
                 }
-                > input.o_field_translate, textarea.o_field_translate {
+                > input.o_field_translate,
+                textarea.o_field_translate {
                     padding-right: 25px;
                     + span.o_field_translate {
                         margin-left: -35px;
@@ -336,8 +341,12 @@
             }
         }
 
-        .o_field_x2many_list_row_add, .o_group_field_row_add {
-            a:focus, a:active, button:focus, button:active {
+        .o_field_x2many_list_row_add,
+        .o_group_field_row_add {
+            a:focus,
+            a:active,
+            button:focus,
+            button:active {
                 color: $link-hover-color;
                 outline: none;
             }
@@ -414,3 +423,16 @@
         }
     }
 }
+
+// ------- Sample mode -------
+.o_list_view .o_view_sample_data {
+    .o_list_table {
+        cursor: default !important;
+    }
+
+    .o_data_row,
+    .o_list_footer,
+    thead .o_list_record_selector {
+        @include o-sample-data-disabled;
+    }
+}
diff --git a/addons/web/static/src/views/list/list_renderer.xml b/addons/web/static/src/views/list/list_renderer.xml
index 4ce7c457f04..693aeae2bc3 100644
--- a/addons/web/static/src/views/list/list_renderer.xml
+++ b/addons/web/static/src/views/list/list_renderer.xml
@@ -15,7 +15,7 @@
             <table t-if="showTable" t-attf-class="o_list_table table table-sm position-relative mb-0  {{props.list.isGrouped ? 'o_list_table_grouped' : 'o_list_table_ungrouped table-striped'}}" t-ref="table">
                 <thead>
                     <tr>
-                        <th t-if="hasSelectors" class="o_list_record_selector o_list_controller align-middle pe-1 cursor-pointer" t-att-class="{o_sample_data_disabled: props.list.model.useSampleModel}" tabindex="-1" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" t-on-click.stop="toggleSelection">
+                        <th t-if="hasSelectors" class="o_list_record_selector o_list_controller align-middle pe-1 cursor-pointer" tabindex="-1" t-on-keydown.synthetic="(ev) => this.onCellKeydown(ev)" t-on-click.stop="toggleSelection">
                             <CheckBox disabled="!!props.list.editedRecord or props.list.model.useSampleModel" value="selectAll" className="'d-flex'" onChange.bind="toggleSelection"/>
                         </th>
                         <t t-foreach="state.columns" t-as="column" t-key="column.id">
@@ -72,7 +72,7 @@
                         <t t-set="list" t-value="props.list"/>
                     </t>
                 </tbody>
-                <tfoot t-on-click="() => props.list.unselectRecord(true)" class="cursor-default" t-att-class="{o_sample_data_disabled: props.list.model.useSampleModel}">
+                <tfoot t-on-click="() => props.list.unselectRecord(true)" class="o_list_footer cursor-default" t-att-class="{o_sample_data_disabled: props.list.model.useSampleModel}">
                     <tr>
                         <td t-if="hasSelectors"/>
                         <t t-foreach="state.columns" t-as="column" t-key="column.id">
diff --git a/addons/web/static/src/views/pivot/pivot_renderer.xml b/addons/web/static/src/views/pivot/pivot_renderer.xml
index 7bc4418bced..37f784cfa19 100644
--- a/addons/web/static/src/views/pivot/pivot_renderer.xml
+++ b/addons/web/static/src/views/pivot/pivot_renderer.xml
@@ -6,10 +6,7 @@
 
             <table
                 class="table-hover table table-sm table-bordered table-borderless bg-white"
-                t-att-class="{
-                    o_enable_linking: !model.metaData.disableLinking,
-                    o_sample_data_disabled: model.useSampleModel,
-                }"
+                t-att-class="{ o_enable_linking: !model.metaData.disableLinking }"
                 t-ref="table"
             >
                 <thead>
diff --git a/addons/web/static/src/views/pivot/pivot_view.scss b/addons/web/static/src/views/pivot/pivot_view.scss
index 85b13bd4c1c..d0128ba2630 100644
--- a/addons/web/static/src/views/pivot/pivot_view.scss
+++ b/addons/web/static/src/views/pivot/pivot_view.scss
@@ -1,3 +1,4 @@
+// ------- Pivot renderer -------
 .o_pivot table {
     width: var(--PivotView-width, auto);
 
@@ -8,7 +9,8 @@
     }
 
     // This can be removed after the migration to BS5.
-    th, td {
+    th,
+    td {
         border-width: $border-width;
     }
 
@@ -22,7 +24,7 @@
         @include o-hover-text-color($body-color, $headings-color);
 
         &:hover {
-            background-color: map-get($grays, '200') !important;
+            background-color: map-get($grays, "200") !important;
         }
     }
 
@@ -30,3 +32,10 @@
         background-color: $table-hover-bg;
     }
 }
+
+// ------- Sample mode -------
+.o_pivot_view .o_view_sample_data {
+    table {
+        @include o-sample-data-disabled;
+    }
+}
diff --git a/addons/web/static/src/views/view.scss b/addons/web/static/src/views/view.scss
new file mode 100644
index 00000000000..4aac2a953ca
--- /dev/null
+++ b/addons/web/static/src/views/view.scss
@@ -0,0 +1,17 @@
+/**
+ * This file regroups the rules which apply on elements which are shared between
+ * all views.
+ */
+
+//  Sample data global rules
+.o_view_sample_data {
+    .form-check {
+        pointer-events: none !important;
+    }
+
+    .o_nocontent_help {
+        border-radius: 20%;
+        background-color: #f9f9f9;
+        box-shadow: 0 0 120px 100px #f9f9f9;
+    }
+}
diff --git a/addons/web/static/tests/views/graph_view_tests.js b/addons/web/static/tests/views/graph_view_tests.js
index 9ce97973443..e3c3a7bbdd6 100644
--- a/addons/web/static/tests/views/graph_view_tests.js
+++ b/addons/web/static/tests/views/graph_view_tests.js
@@ -3586,7 +3586,6 @@ QUnit.module("Views", (hooks) => {
     });
 
     QUnit.test("empty graph view with sample data", async function (assert) {
-        assert.expect(8);
         await makeView({
             serverData,
             type: "graph",
@@ -3609,24 +3608,19 @@ QUnit.module("Views", (hooks) => {
         assert.hasClass(target.querySelector(".o_graph_view .o_content"), "o_view_sample_data");
         assert.containsOnce(target, ".o_view_nocontent");
         assert.containsOnce(target, ".o_graph_canvas_container canvas");
-        assert.hasClass(target.querySelector(".o_graph_renderer"), "o_sample_data_disabled");
 
         await toggleFilterMenu(target);
         await toggleMenuItem(target, "False Domain");
+
         assert.doesNotHaveClass(
             target.querySelector(".o_graph_view .o_content"),
             "o_view_sample_data"
         );
         assert.containsNone(target, ".o_view_nocontent");
         assert.containsOnce(target, ".o_graph_canvas_container canvas");
-        assert.doesNotHaveClass(
-            target.querySelector(".o_graph_renderer"),
-            "o_sample_data_disabled"
-        );
     });
 
     QUnit.test("non empty graph view with sample data", async function (assert) {
-        assert.expect(8);
         await makeView({
             serverData,
             type: "graph",
@@ -3647,18 +3641,12 @@ QUnit.module("Views", (hooks) => {
         assert.doesNotHaveClass(target, "o_view_sample_data");
         assert.containsNone(target, ".o_view_nocontent");
         assert.containsOnce(target, ".o_graph_canvas_container canvas");
-        assert.doesNotHaveClass(
-            target.querySelector(".o_graph_canvas_container"),
-            "o_sample_data_disabled"
-        );
+
         await toggleFilterMenu(target);
         await toggleMenuItem(target, "False Domain");
+
         assert.doesNotHaveClass(target, "o_view_sample_data");
         assert.containsOnce(target, ".o_graph_canvas_container canvas");
-        assert.doesNotHaveClass(
-            target.querySelector(".o_graph_canvas_container"),
-            "o_sample_data_disabled"
-        );
         assert.containsNone(target, ".o_view_nocontent");
     });
 
diff --git a/addons/web/static/tests/views/kanban_view_tests.js b/addons/web/static/tests/views/kanban_view_tests.js
index b804530cb19..dec16634d35 100644
--- a/addons/web/static/tests/views/kanban_view_tests.js
+++ b/addons/web/static/tests/views/kanban_view_tests.js
@@ -6681,14 +6681,9 @@ QUnit.module("Views", (hooks) => {
             },
         });
 
-        // Check keynav is disabled
-        assert.hasClass(getCard(0), "o_sample_data_disabled");
-
         await toggleColumnActions(0);
 
-        assert.hasClass(target.querySelector(".o_kanban_toggle_fold"), "o_sample_data_disabled");
         assert.containsNone(target, '[tabindex]:not([tabindex="-1"])');
-
         assert.hasClass(document.activeElement, "o_searchview_input");
 
         await triggerEvent(document.activeElement, null, "keydown", { key: "ArrowDown" });
@@ -6951,10 +6946,6 @@ QUnit.module("Views", (hooks) => {
 
         await toggleColumnActions(0);
 
-        assert.hasClass(
-            target.querySelector(".o_kanban_config .o_kanban_toggle_fold"),
-            "o_sample_data_disabled"
-        );
         assert.hasClass(target.querySelector(".o_kanban_config .o_kanban_toggle_fold"), "disabled");
     });
 
diff --git a/addons/web/static/tests/views/list_view_tests.js b/addons/web/static/tests/views/list_view_tests.js
index e4931534194..d88d3c7e2bc 100644
--- a/addons/web/static/tests/views/list_view_tests.js
+++ b/addons/web/static/tests/views/list_view_tests.js
@@ -5601,7 +5601,6 @@ QUnit.module("Views", (hooks) => {
         });
         assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
         assert.ok(target.querySelectorAll(".o_data_row").length > 0);
-        assert.hasClass(target.querySelectorAll(".o_data_row"), "o_sample_data_disabled");
         assert.containsN(
             target,
             "th",
@@ -5616,7 +5615,6 @@ QUnit.module("Views", (hooks) => {
 
         assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
         assert.ok(target.querySelectorAll(".o_data_row").length > 0);
-        assert.hasClass(target.querySelector(".o_data_row"), "o_sample_data_disabled");
         assert.containsN(target, "th", 4);
     });
 
@@ -5635,12 +5633,7 @@ QUnit.module("Views", (hooks) => {
         });
 
         // Check keynav is disabled
-        assert.hasClass(target.querySelector(".o_data_row"), "o_sample_data_disabled");
-        assert.hasClass(target.querySelector(".o_list_table > tfoot"), "o_sample_data_disabled");
-        assert.hasClass(
-            target.querySelector(".o_list_table > thead .o_list_record_selector"),
-            "o_sample_data_disabled"
-        );
+        assert.hasClass(target.querySelector(".o_list_view .o_content"), "o_view_sample_data");
 
         // From search bar
         assert.hasClass(document.activeElement, "o_searchview_input");
diff --git a/addons/web/static/tests/views/pivot_view_tests.js b/addons/web/static/tests/views/pivot_view_tests.js
index ab873f9fa73..52e665ac251 100644
--- a/addons/web/static/tests/views/pivot_view_tests.js
+++ b/addons/web/static/tests/views/pivot_view_tests.js
@@ -4717,7 +4717,6 @@ QUnit.module("Views", (hooks) => {
 
         assert.hasClass(target.querySelector(".o_pivot_view .o_content"), "o_view_sample_data");
         assert.containsOnce(target, ".o_view_nocontent .abc");
-        assert.containsOnce(target, "table.o_sample_data_disabled");
 
         await removeFacet(target);
 
@@ -4727,7 +4726,6 @@ QUnit.module("Views", (hooks) => {
         );
         assert.containsNone(target, ".o_view_nocontent .abc");
         assert.containsOnce(target, "table");
-        assert.doesNotHaveClass(target.querySelector("table"), "o_sample_data_disabled");
     });
 
     QUnit.test("non empty pivot view with sample data", async function (assert) {
@@ -4756,7 +4754,6 @@ QUnit.module("Views", (hooks) => {
         assert.doesNotHaveClass(target, "o_view_sample_data");
         assert.containsNone(target, ".o_view_nocontent .abc");
         assert.containsOnce(target, "table");
-        assert.doesNotHaveClass(target.querySelector("table"), "o_sample_data_disabled");
 
         await toggleFilterMenu(target);
         await toggleMenuItem(target, "Small Than 0");