diff --git a/extensions/odoo_theme/layout.html b/extensions/odoo_theme/layout.html
index 86930dbea..635120269 100644
--- a/extensions/odoo_theme/layout.html
+++ b/extensions/odoo_theme/layout.html
@@ -61,7 +61,11 @@
 
 {% block content %}
     <div id="wrap">
-
+        <nav class="navbar navbar-expand-lg navbar-light d-lg-none" aria-label="Toggle OffCanvas">
+            <button class="navbar-toggler p-0 border-0" type="button" data-bs-toggle="offcanvas" aria-label="Toggle navigation">
+              <span class="navbar-toggler-icon"></span>
+            </button>
+        </nav>
         {% set main_classes = [] %}
         {% if pagename == master_doc %}  {# The current page is the homepage #}
             {% set main_classes = main_classes + ['index'] %} {# TODO ANVFE should be 'o_index' #}
@@ -79,7 +83,7 @@
             {% set main_classes = main_classes + ['doc-toc'] %}  {# TODO EDI do you use this ?#}
         {% endif %}
 
-        <main class="{{ ' '.join(main_classes) }}">
+        <main class="container-fluid {{ ' '.join(main_classes) }}">
             <div id="o_content">
                 {% if pagename == master_doc %}
                     {# Custom landing page on the root of the documentation #}
diff --git a/extensions/odoo_theme/layout_templates/header.html b/extensions/odoo_theme/layout_templates/header.html
index 6c11dcafe..11bff777a 100644
--- a/extensions/odoo_theme/layout_templates/header.html
+++ b/extensions/odoo_theme/layout_templates/header.html
@@ -6,7 +6,7 @@
       </a>
 </div>
 {% include "layout_templates/searchbox.html" %}
-<div class="d-none d-md-flex">
+<div class="d-none d-lg-flex">
     {#{% if alternate_languages %}#}
         {% include "layout_templates/language_switcher.html" %}
     {#{% endif %}#}
diff --git a/extensions/odoo_theme/layout_templates/language_switcher.html b/extensions/odoo_theme/layout_templates/language_switcher.html
index d26b063b2..dcbba4a0c 100644
--- a/extensions/odoo_theme/layout_templates/language_switcher.html
+++ b/extensions/odoo_theme/layout_templates/language_switcher.html
@@ -1,4 +1,4 @@
-<div class="o_languages me-2">
+<div class="o_languages me-3">
 	<div class="dropdown">
         {% if alternate_languages|length > 0 %}
             <button class="btn border dropdown-toggle"
diff --git a/extensions/odoo_theme/layout_templates/searchbox.html b/extensions/odoo_theme/layout_templates/searchbox.html
index 27f0f459b..03151214b 100644
--- a/extensions/odoo_theme/layout_templates/searchbox.html
+++ b/extensions/odoo_theme/layout_templates/searchbox.html
@@ -1,4 +1,4 @@
-<div id="searchbox" class="d-flex flex-grow-1 justify-content-end justify-content-md-start" role="search">
+<div id="searchbox" class="d-flex flex-grow-1 justify-content-stretch justify-content-lg-start pe-2" role="search">
     <form class="o_search" action="{{ pathto('search') }}" method="get">
         <input type="text" name="q" id="q" class="form-control rounded-pill" placeholder="What are you looking for?">
         <input type="hidden" name="area" value="default">
diff --git a/extensions/odoo_theme/layout_templates/version_switcher.html b/extensions/odoo_theme/layout_templates/version_switcher.html
index c8799749b..d26f1d67f 100644
--- a/extensions/odoo_theme/layout_templates/version_switcher.html
+++ b/extensions/odoo_theme/layout_templates/version_switcher.html
@@ -1,8 +1,8 @@
-<div class="o_versions row me-2">
-	<div class="col-4 col-form-label">
-    	<label class="fw_bold small mr-2">Version</label>
+<div class="o_versions row gx-2 me-3">
+	<div class="col col-form-label">
+    	<label class="fw_bold small me-2">Version</label>
     </div>
-    <div class="col-8">
+    <div class="col">
         <div class="dropdown">
             {% if alternate_versions|length > 0 %}
                 <button class="btn border dropdown-toggle"
diff --git a/extensions/odoo_theme/static/fonts/icomoon.woff2 b/extensions/odoo_theme/static/fonts/icomoon.woff2
new file mode 100644
index 000000000..b835f6708
Binary files /dev/null and b/extensions/odoo_theme/static/fonts/icomoon.woff2 differ
diff --git a/extensions/odoo_theme/static/js/menu.js b/extensions/odoo_theme/static/js/menu.js
index 47b23f92e..d1a0b20e9 100644
--- a/extensions/odoo_theme/static/js/menu.js
+++ b/extensions/odoo_theme/static/js/menu.js
@@ -43,4 +43,14 @@
         }
     };
 
+    /**
+     * Mobile: Toggle open/close sidebar on click of nav button (&& on swipe left to right?).
+     *
+     *
+     * `o_active_toc_entry` class, and their related (parent) TOC entry list (<ul> elements) receive
+     * the `show` (Bootstrap) class.
+     * Also, the deepest TOC entry receives the `o_deepest_active_toc_entry` class, and its child
+     * Sidebar receives the `o-mobile-show` class.
+     */
+
 })();
diff --git a/extensions/odoo_theme/static/scss/_iconfont.scss b/extensions/odoo_theme/static/scss/_iconfont.scss
index 5deea8555..ee7e03fb6 100644
--- a/extensions/odoo_theme/static/scss/_iconfont.scss
+++ b/extensions/odoo_theme/static/scss/_iconfont.scss
@@ -4,7 +4,7 @@
 
 [class^="i-"], [class*=" i-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: '#{$icomoon-font-family}' !important;
+  font-family: 'icomoon' !important;
   speak: never;
   font-style: normal;
   font-weight: normal;
diff --git a/extensions/odoo_theme/static/scss/_mixins.scss b/extensions/odoo_theme/static/scss/_mixins.scss
index 9529fc8d1..14f1fc89d 100644
--- a/extensions/odoo_theme/static/scss/_mixins.scss
+++ b/extensions/odoo_theme/static/scss/_mixins.scss
@@ -89,7 +89,7 @@
 
 @mixin inline-icomoon($icon-content, $margin, $v-align: middle, $font-size: 1.5rem, $font-weight: $fw_regular) {
     content: '#{$icon-content}';
-    font-family: '#{$icomoon-font-family}' !important;
+    font-family: 'icomoon' !important;
     @include font-size($font-size);
     font-weight: $font-weight;
     vertical-align: $v-align;
diff --git a/extensions/odoo_theme/static/scss/_typography.scss b/extensions/odoo_theme/static/scss/_typography.scss
index be839388f..e41ff2b6f 100644
--- a/extensions/odoo_theme/static/scss/_typography.scss
+++ b/extensions/odoo_theme/static/scss/_typography.scss
@@ -6,45 +6,19 @@
 // Fonts
 //------------------------------------------------------------------------------
 @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap');
-
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
 @font-face {
-  font-family: '#{$icomoon-font-family}';
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?6i2y1w');
-  src:  url('#{$icomoon-font-path}/#{$icomoon-font-family}.eot?6i2y1w#iefix') format('embedded-opentype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?6i2y1w') format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?6i2y1w') format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?6i2y1w##{$icomoon-font-family}') format('svg');
+  font-family: 'icomoon';
+  src: url('fonts/icomoon.woff2') format('woff2'),
+    url('fonts/icomoon.woff') format('woff');
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }
 
-@font-face {
-      font-family: 'Inter';
-      font-weight: 100 900;
-      font-display: swap;
-      font-style: normal;
-      font-named-instance: 'Regular';
-      src: url("Inter-roman.var.woff2?v=3.15") format("woff2");
-}
-
-@font-face {
-      font-family: 'Inter';
-      font-weight: 100 900;
-      font-display: swap;
-      font-style: italic;
-      font-named-instance: 'Italic';
-      src: url("Inter-italic.var.woff2?v=3.15") format("woff2");
-}
-
-//------------------------------------------------------------------------------
-// Font rendering
-//------------------------------------------------------------------------------
 html body{
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    font-family: Inter, Helvetica, sans-serif;
-    font-weight: 400;
 }
 
 //------------------------------------------------------------------------------
diff --git a/extensions/odoo_theme/static/scss/_variables.scss b/extensions/odoo_theme/static/scss/_variables.scss
index 46e098691..0a2e61a61 100644
--- a/extensions/odoo_theme/static/scss/_variables.scss
+++ b/extensions/odoo_theme/static/scss/_variables.scss
@@ -75,9 +75,6 @@ $font-size-secondary:                       .875rem;
 // icomoon icons
 //------------------------------------------------------------------------------
 
-$icomoon-font-family: "icomoon" !default;
-$icomoon-font-path: "fonts" !default;
-
 $i-arrow-up: "\e948";
 $i-arrow-down: "\e945";
 $i-arrow-left: "\e946";
@@ -236,9 +233,15 @@ $doc_cyan:                                  $color-alpha;
 
 // Header
 $o-header-height:                           90px;
+$o-header-white:                            #ffffff;
+
+// Navigation
 $o-side-nav-width:                          350px;
 $o-on-page-width:                           25%;
-$o-header-white:                            #ffffff;
+
+// has_code_col pages
+$o-halfpage-width:                          54%;
+$o-codecol-width:                           43%;
 
 // Paths and Prefixes
 $website-img-base-url:                      "../img/";
diff --git a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
index ba1d67445..b832fe332 100644
--- a/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
+++ b/extensions/odoo_theme/static/scss/bootstrap_overridden.scss
@@ -1,18 +1,11 @@
 //
 // BS Variables
 //
-
-// The contrast ratio value that determines when the lightness of color changes from "dark" to "light". Acceptable values are 3 , 4.5 and 7.
-/* $min-contrast-ratio: 						4.5; */
-// Components
-//
-$enable-shadows	: 							true;
-// Define common padding and border radius sizes and more.
+/* $enable-responsive-font-sizes:              true; */
 
 // Fonts
-//
 // Font, line-height, and color for body text, headings, and more.
-
+$font-family-base:                          "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif !default;
 $h1-font-size:                              1.875rem;
 $h2-font-size:                              1.5rem;
 $h3-font-size:                              1.125rem;
@@ -20,64 +13,12 @@ $h4-font-size:                              1rem;
 $h5-font-size:                              1rem;
 $h6-font-size:                              $font-size-secondary;
 
-$display-line-height:                       1;
-
-/* $blockquote-font-size:                      $font-size-base !default; */
-
 // Buttons
-//
 // For each of Bootstrap's buttons, define text, background, and border color.
 
 $btn-font-size:                             $font-size-secondary;
 $btn-font-weight:                           $fw_semibold;
 $btn-focus-box-shadow:                      0 0 0 transparent;
 
-// Badges
-
-/* $badge-font-size:                           0.9em; */
-
-// Pagination
-
-$pagination-color:                          o-color('600');
-$pagination-bg:                             transparent;
-$pagination-border-color:                   o-color('300');
-
-$pagination-hover-color:                    o-color('o-cc1-link');
-$pagination-hover-bg:                       transparent;
-$pagination-hover-border-color:             o-color('o-cc1-link');
-
-$pagination-active-color:                   o-color('900');
-$pagination-active-bg:                      transparent;
-$pagination-active-border-color:            o-color('900');
-
-// Cards
-
-$card-spacer-y:                             15rem / 16;
-$card-spacer-x:                             15rem / 16;
-
-$card-border-width:                         1px;
-$card-border-color:                         rgba(0,0,0,.06);
-$card-cap-bg:                               transparent;
-
-// Tooltips
-
-$tooltip-max-width:                         220px;
-$tooltip-opacity:                           1;
-
-$tooltip-arrow-width:                       4rem / 16;
-
-// Popovers
-
-$popover-border-color:                      transparent;
-
-$popover-arrow-width:                       10rem / 16;
-
-// List group
-
-$list-group-border-color:                   $card-border-color;
-
-$nav-pills-link-active-color:               #fff;
-$nav-pills-link-active-bg:                  o-color('o-color-2');
-
 // Dropdowns
 $dropdown-min-width:                        4.5rem;
\ No newline at end of file
diff --git a/extensions/odoo_theme/static/style.scss b/extensions/odoo_theme/static/style.scss
index 65e18567b..f8426df2b 100644
--- a/extensions/odoo_theme/static/style.scss
+++ b/extensions/odoo_theme/static/style.scss
@@ -38,28 +38,35 @@ header.o_main_header{
     right: 0;
     background-color: $o-header-white;
     z-index: 10;
-    padding-right: 3rem;
+    @include media-breakpoint-up(lg) {
+        padding-right: 3rem;
+    }
     .o_logo_wrapper {
-        @include media-breakpoint-up(lg) {
+        padding: 0 1rem;
+        > .o_logo {
+            img {
+                margin-bottom: -2px;
+                vertical-align: baseline;
+            }
+            span {
+                @include font-size($font-size-base);
+                color: $o-violet;
+            }
+        }
+        @include media-breakpoint-up(xl) {
             width: $o-side-nav-width;
+        }
+        @include media-breakpoint-up(lg) {
             padding-left: 3rem;
             margin-right: 3rem;
-            > .o_logo {
-                img {
-                    margin-bottom: -2px;
-                    vertical-align: baseline;
-                }
-                span {
-                    @include font-size($font-size-base);
-                    color: $o-violet;
-                }
-            }
         }
     }
     .o_search {
         position: relative;
-        width: 90%;
-        max-width: 500px;
+        width: 100%;
+        @include media-breakpoint-up(lg) {
+            max-width: 500px;
+        }
         .btn{
             @include o-position-absolute($top: 50%, $right: 1rem);
             @include transform (translateY(-50%)) ;
@@ -78,9 +85,6 @@ header.o_main_header{
             @include font-size($font-size-secondary);
         }
     }
-    .o_languages {
-        width: 120px;
-    }
 }
 
 //------------------------------------------------------------------------------
@@ -94,6 +98,10 @@ header.o_main_header{
     position: fixed;
     top:$o-header-height;
     left:-100%;
+    &.o-mobile-show {
+        left:0;
+        width: 100%;
+    }
     @include media-breakpoint-up(lg) {
         left:0;
     }
@@ -244,8 +252,10 @@ header.o_main_header{
             top: $o-header-height;
             right: 0;
             width: $o-on-page-width;
-            height: calc(100% - #{$o-header-height});
+            height: 100%;
+            max-height: calc(100vh - #{$o-header-height});
             padding: 3rem 3rem 3rem 0;
+            overflow-y: auto;
         }
 
         h3 {
@@ -279,8 +289,25 @@ header.o_main_header{
 
 #wrap {
     margin-top: $o-header-height;
-    display: flex;
-    justify-content: space-between;
+
+    @include media-breakpoint-up(lg) {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    code {
+        display: inline-block;
+        color: inherit;
+        background: $doc_code-bg;
+        padding: 0 .3rem;
+        margin: 0.1rem;
+        border: 1px solid $gray-light;
+        overflow-wrap: anywhere;
+    }
+
+    iframe {
+        max-width: 100%;
+    }
 
     main {
         position: relative;
@@ -288,13 +315,14 @@ header.o_main_header{
 
         @include media-breakpoint-up(lg) {
             left: $o-side-nav-width;
-            width: calc(100vw - #{$o-side-nav-width} - #{$o-on-page-width});
+            max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1.5rem)) - #{$o-on-page-width});
             padding: 3rem;
+            margin: 0;
         }
 
         &.index, &.doc-toc, &.has_code_col {
             @include media-breakpoint-up(lg) {
-                width: calc(100vw - #{$o-side-nav-width} );
+                max-width: calc(100vw - (#{$o-side-nav-width} + var(--bs-gutter-x, 1.5rem)) );
             }
         }
 
@@ -380,20 +408,10 @@ header.o_main_header{
         &.has_code_col {
 
             article.doc-body {
-                padding-left: 1rem;
-                padding-right: 1rem;
-
                 > *{
                   max-width: 100%;
                 }
 
-                section {
-                    position: relative;
-                    display:block;
-                    float: left;
-                    width: 100%;
-                }
-
                 @include media-breakpoint-up(lg) {
                     width: 100%;
                     padding-right: 0;
@@ -405,20 +423,18 @@ header.o_main_header{
 
 
                     .o_git_link {
-                        top: .5rem;
-                        right: calc(43% + 1rem);
+                        right: calc(#{$o-codecol-width} + 2rem);
                     }
                     section {
 
                         > * {
-                            width: 54.633333%;
-                            /* max-width: 600px; */
+                            width: $o-halfpage-width;
                             float: left;
                             clear: left;
                         }
 
                         > h1 {
-                            max-width: calc(54% - 120px);
+                            max-width: calc(#{$o-halfpage-width} - 120px);
                         }
 
                         > h1, > h2, > h3, > h4, > h5, > h6 {
@@ -427,7 +443,7 @@ header.o_main_header{
                         }
 
                         .doc-aside {
-                            width: 43%;
+                            width: $o-codecol-width;
                             float: none;
                             clear: none;
                             margin-left: 57%;
@@ -493,16 +509,12 @@ header.o_main_header{
 
                 ul {
                     list-style: none;
-                }
-            }
+                    padding-left: 0;
 
-            code {
-                display: inline-block;
-                color: inherit;
-                background: $doc_code-bg;
-                padding: 0 .3rem;
-                margin: 0.1rem;
-                border: 1px solid $gray-light;
+                    li {
+                        padding-bottom: .5rem;
+                    }
+                }
             }
 
             /* dt {
@@ -512,7 +524,7 @@ header.o_main_header{
             } */
             // Search items highlighted
             dt:target, span.highlighted {
-                background-color: lighten($color-alpha, 50%);
+                background-color: lighten($warning, 15%);
             }
 
             section {
@@ -528,7 +540,7 @@ header.o_main_header{
                     color: $o-violet-dark;
                     font-weight: $fw_bold;
                     max-width: calc(100% - 120px);
-                    + p {
+                    + *:not(h2) {
                         margin-top: 1rem;
                     }
                 }
@@ -551,12 +563,42 @@ header.o_main_header{
                     font-weight: $fw_semibold;
                 }
 
+                img:not([alt="green"]):not([alt="orange"]):not([alt="red"]) {
+                    border: 1px solid $gray-lighter;
+                    background: $white;
+                    padding: .5rem;
+                }
+
+                img:not([alt="green"]):not([alt="orange"]):not([alt="red"]), iframe {
+                    margin-bottom: 1rem;
+                }
+
+                p > img {
+                    border: none;
+                    padding: 0;
+                    margin-bottom: 0;
+                }
+
+                .figure {
+                    .caption, .caption-text {
+                        font-weight: $fw_semibold;
+                        color: $gray;
+                    }
+                    .caption, .caption-text, .legend, .legend p{
+                        font-style: italic;
+                        margin: 0 auto;
+                    }
+                    &:not([class^="col"]) .legend {
+                        max-width: 60%;
+                    }
+                }
+
                 a.headerlink {
                     text-decoration: none;
                     visibility: hidden !important;
                     &:after {
                         content: '#{$i-link}';
-                        font-family: $icomoon-font-family !important;
+                        font-family: icomoon !important;
                         @include font-size($font-size-base);
                         vertical-align: middle;
                         margin: 0 1rem 0 0;
@@ -631,13 +673,6 @@ header.o_main_header{
             font-weight: 600;
         }
 
-        img.img-fluid:not([alt="green"]):not([alt="orange"]):not([alt="red"]) {
-            border: 1px solid $gray-lighter;
-            background: $white;
-            margin-bottom: 1rem;
-            padding: .5rem;
-        }
-
         .container .container:not([class^="col"]) {
             padding: 0;
             margin: 0;
@@ -647,20 +682,6 @@ header.o_main_header{
             text-align: left;
         }
 
-        .figure {
-            .caption, .caption-text {
-                font-weight: $fw_semibold;
-                color: $gray;
-            }
-            .caption, .caption-text, .legend, .legend p{
-                font-style: italic;
-                margin: 0 auto;
-            }
-            &:not([class^="col"]) .legend {
-                max-width: 60%;
-            }
-        }
-
         // restyle numbers on lists
         ol {
             /* list-style: none;