diff --git a/addons/web/static/src/core/notebook/notebook.scss b/addons/web/static/src/core/notebook/notebook.scss
index d9d783f0ba6..952495765d2 100644
--- a/addons/web/static/src/core/notebook/notebook.scss
+++ b/addons/web/static/src/core/notebook/notebook.scss
@@ -8,6 +8,14 @@
 
     .o_notebook_headers {
         margin: 0 var(--notebook-margin-x, 0);
+
+        @include media-breakpoint-down(md) {
+            overflow-x: auto;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
     }
 
     .nav {
@@ -17,15 +25,13 @@
 
     .nav-item {
         white-space: nowrap;
+        margin: 0 -1px 0 0;
     }
 
     .nav-link {
-        border: 1px solid var(--notebook-link-border-color, transparent);
+        border-color: var(--notebook-link-border-color, transparent);
 
         &.active {
-            border: 1px solid var(--notebook-link-border-color-active);
-            border-bottom-color: $o-view-background-color;
-
             &, &:hover, &:focus, &:active {
                 border-color: var(--notebook-link-border-color-active);
                 border-top-color: var(--notebook-link-border-color-active-accent, var(--notebook-link-border-color-active));
@@ -33,38 +39,41 @@
             }
         }
 
+        &:hover, &:focus, &:active {
+            outline: none;
+        }
+
         &:hover {
             border-color: var(--notebook-link-border-color-hover);
         }
     }
 
     &.vertical {
-        .o_notebook_headers {
-            border-right: 1px solid $border-color;
-        }
-
         .nav {
             width: max-content;
-            border-bottom: 1px solid var(--notebook-link-border-color);
+            border-bottom-color: transparent; // removing the width has weird side effect due to the negative margin
         }
 
         .nav-item {
-            margin: 0 -1px -1px 0;
+            margin: 0 0 -1px 0;
 
             &:first-child .nav-link {
                 border-top-width: 0;
             }
+
+            &:last-child .nav-link {
+                border-bottom-width: 0;
+            }
         }
 
         .nav-link {
-            border: 1px solid var(--notebook-link-border-color, transparent);
+            margin-bottom: 0;
 
             &.active {
-                border: 1px solid var(--notebook-link-border-color-active);
-
                 &, &:hover, &:focus, &:active {
+                    border-color: var(--notebook-link-border-color-active);
                     border-left-color: var(--notebook-link-border-color-active-accent, var(--notebook-link-border-color-active));
-                    border-right-color: $o-white;
+                    border-right-color: $o-view-background-color;
                 }
             }
         }
diff --git a/addons/web/static/src/core/notebook/notebook.xml b/addons/web/static/src/core/notebook/notebook.xml
index 55fd1da773d..bf244bcddc1 100644
--- a/addons/web/static/src/core/notebook/notebook.xml
+++ b/addons/web/static/src/core/notebook/notebook.xml
@@ -2,11 +2,11 @@
 <templates xml:space="preserve">
 
     <t t-name="web.Notebook" owl="1">
-        <div t-attf-class="o_notebook d-flex w-100 {{ props.orientation == 'horizontal' ? 'horizontal flex-column' : 'vertical flex-row' }} {{ props.className }}" t-if="state.currentPage">
+        <div t-attf-class="o_notebook d-flex w-100 {{ props.orientation === 'horizontal' ? 'horizontal flex-column' : 'vertical flex-row' }} {{ props.className }}" t-if="state.currentPage">
             <div class="o_notebook_headers" t-att-class="{ 'm-0': props.orientation === 'vertical' }">
                 <ul t-attf-class="nav nav-tabs {{ props.orientation === 'horizontal' ? 'flex-row flex-nowrap' : 'flex-column p-0' }}">
                     <li t-foreach="navItems" t-as="navItem" t-key="navItem[0]" class="nav-item flex-nowrap cursor-pointer" t-if="navItem[1].isVisible">
-                        <a class="nav-link" t-att-class="{ active: navItem[0] === state.currentPage, 'p-3': props.orientation === 'vertical'}" t-att-name="navItem[1].name" t-on-click.prevent="() => state.currentPage = navItem[0]" href="#" role="tab" tabindex="-1" t-esc="navItem[1].title"/>
+                        <a class="nav-link" t-attf-class="{{ navItem[0] === state.currentPage ? 'active' : '' }} {{ props.orientation === 'vertical' ? 'p-3 rounded-0' : '' }}" t-att-name="navItem[1].name" t-on-click.prevent="() => state.currentPage = navItem[0]" href="#" role="tab" tabindex="-1" t-esc="navItem[1].title"/>
                     </li>
                 </ul>
             </div>
diff --git a/addons/web/static/src/views/form/form_controller.scss b/addons/web/static/src/views/form/form_controller.scss
index 448d7a3e243..802ee3a7369 100644
--- a/addons/web/static/src/views/form/form_controller.scss
+++ b/addons/web/static/src/views/form/form_controller.scss
@@ -219,12 +219,9 @@
         }
 
         .o_notebook {
-            > .o_notebook_headers {
-                @include o-form-nosheet-negative-margin;
-                > .nav.nav-tabs {
-                    @include o-form-nosheet-inner-left-padding;
-                }
-            }
+            --notebook-margin-x: -#{$o-horizontal-padding};
+            --notebook-padding-x: #{$o-horizontal-padding};
+
             > .tab-content > .tab-pane > :first-child {
                 // These elements will appear attached to the tabs
                 &.o_field_x2many.o_field_x2many_list {
@@ -484,55 +481,12 @@
         clear: both; // For the notebook not to have alongside floating elements
         margin-top: $o-form-spacing-unit * 2;
 
-        > .o_notebook_headers {
-            @include o-form-sheet-negative-margin;
+        --notebook-margin-x: -#{$o-horizontal-padding};
+        --notebook-padding-x: #{$o-horizontal-padding};
 
-            @include media-breakpoint-down(md) {
-                overflow-x: auto;
-                &::-webkit-scrollbar {
-                    display: none;
-                }
-                .nav.nav-tabs {
-                    flex-flow: row nowrap;
-                }
-            }
-
-            > .nav.nav-tabs {
-                @include o-form-sheet-inner-left-padding;
-                border-bottom-color: $border-color;
-
-                > .nav-item {
-                    white-space: nowrap;
-
-                    > .nav-link {
-                        color: $body-color;
-                        border-color: $border-color;
-                        background-color: white;
-
-                        &:hover, &:focus, &:active {
-                            outline: none;
-                            color: $link-color;
-                        }
-
-                        &.active {
-                            border-bottom-color: white;
-
-                            &, &:hover, &:focus, &:active {
-                                color: $headings-color;
-                                border-top-color: $o-brand-odoo;
-                            }
-                        }
-
-                        &.disabled {
-                            color: $text-muted;
-                        }
-                    }
-
-                    + .nav-item {
-                        margin-left: -1px;
-                    }
-                }
-            }
+        @include media-breakpoint-up(lg, $o-extra-grid-breakpoints) {
+            --notebook-margin-x: -#{$o-horizontal-padding * 2};
+            --notebook-padding-x: #{$o-horizontal-padding * 2};
         }
 
         > .tab-content {
diff --git a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss
index 9e50f0de314..60bad7f31d5 100644
--- a/addons/web/static/src/views/kanban/kanban_examples_dialog.scss
+++ b/addons/web/static/src/views/kanban/kanban_examples_dialog.scss
@@ -1,45 +1,31 @@
 // container ghost card in modal
-.o_kanban_examples_dialog .modal-body {
-    display: flex;
-    padding: 0px;
-    background: map-get($theme-colors, 'light');
-
-    // sidebar
-    .o_notebook_headers {
-        flex: 0 0 auto;
-        border-right: 1px solid map-get($grays, '300');
-        background: white;
-
-        > ul > li {
-            margin: 0;
-            border-bottom: 1px solid map-get($grays, '300');
-
-            > a {
-                padding: 12px 15px;
-                border-left: 3px solid transparent;
-                &:not(.active) {
-                    color: $o-main-text-color;
-                }
-                &:focus {
-                    outline: none;
-                }
-            }
-            &.active > a {
-                color: $headings-color;
-                border-left-color: $o-brand-primary;
-                font-weight: bold;
-            }
-        }
+.o_kanban_examples_dialog {
+    .modal-body {
+        padding: 0;
+        background: map-get($theme-colors, 'light');
     }
 
-    // content
-    .o_notebook_content {
-        flex: 1 1 100%;
-        min-height: 300px;
+    .o_notebook {
+        --notebook-link-border-color: #{$border-color};
+        --notebook-link-border-color-hover: #{$border-color};
+        --notebook-link-border-color-active-accent: #{$o-brand-primary};
 
-        .o_kanban_examples_description {
-            padding: 16px 16px 0;
-            text-align: justify;
+        // sidebar
+        .nav-link.active {
+            &, &:hover, &:focus, &:active {
+                border-right-color: var(--notebook-link-border-color-active);
+            }
+        }
+
+        // content
+        .o_notebook_content {
+            flex: 1 1 100%;
+            min-height: 300px;
+
+            .o_kanban_examples_description {
+                padding: 16px 16px 0;
+                text-align: justify;
+            }
         }
     }
 }