diff --git a/README.md b/README.md
index 07f176fbb..0e84452d1 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Hummingbird theme
 
-This is a PrestaShop's theme we are working on. Please, if you work on this theme, use the `1.7.8.x` branch of PrestaShop to make sure this theme is compatible with the latest `1.7` version.
+This is a PrestaShop's theme we are working on. Please, if you work on this theme, use the `8.0.x` branch of PrestaShop to make sure this theme is compatible with the latest `8.x` version.
 
 [Read more](https://build.prestashop.com/news/new-theme-announce/) about this theme on the blog.
 
diff --git a/config/theme.yml b/config/theme.yml
index 5a967e9e7..6155422f3 100644
--- a/config/theme.yml
+++ b/config/theme.yml
@@ -8,7 +8,7 @@ author:
 
 meta:
   compatibility:
-      from: 1.7.0.0
+      from: 8.0.0
       to: ~
 
   available_layouts:
@@ -85,7 +85,7 @@ global_settings:
         - ps_linklist
         - ps_customeraccountlinks
         - ps_contactinfo
-        - ~
+        - blockwishlist
       displayLeftColumn:
         - ps_categorytree
         - ps_facetedsearch
@@ -135,6 +135,43 @@ global_settings:
       width: 170
       height: 115
       scope: [stores]
+    default_xs:
+      width: 120
+      height: 120
+      scope: [products, manufacturers, suppliers, categories]
+    default_s:
+      width: 160
+      height: 160
+      scope: [categories, products]
+    default_m:
+      width: 200
+      height: 200
+      scope: [stores, manufacturers, suppliers, products]
+    default_md:
+      width: 320
+      height: 320
+      scope: [categories, products]
+    default_xl:
+      width: 400
+      height: 400
+      scope: [stores, products]
+    product_main:
+      width: 720
+      height: 720
+      scope: [products]
+    category_cover:
+      width: 1000
+      height: 200
+      scope: [categories]
+    product_main_2x:
+      width: 1440
+      height: 1440
+      scope: [products]
+    category_cover_2x:
+      width: 2000
+      height: 400
+      scope: [categories]
+
 
 theme_settings:
   rtl_generation: false
@@ -145,3 +182,5 @@ theme_settings:
     new-products: layout-left-column
     prices-drop: layout-left-column
     contact: layout-left-column
+    manufacturer: layout-left-column
+    supplier: layout-left-column
diff --git a/modules/blockwishlist/views/templates/components/modals/add-to-wishlist.tpl b/modules/blockwishlist/views/templates/components/modals/add-to-wishlist.tpl
new file mode 100644
index 000000000..44b247234
--- /dev/null
+++ b/modules/blockwishlist/views/templates/components/modals/add-to-wishlist.tpl
@@ -0,0 +1,62 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<div
+ class="wishlist-add-to"
+ data-url="{$url}"
+>
+  <div
+    class="wishlist-modal modal fade"
+    {literal}
+      :class="{show: !isHidden}"
+    {/literal}
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header px-3">
+          <h5 class="modal-title">{l s='Add to wishlist' d='Modules.Blockwishlist.Shop'}</h5>
+          <button
+            type="button"
+            class="btn-close"
+            @click="toggleModal"
+            data-dismiss="modal"
+            aria-label="{l s='Close' d='Modules.Blockwishlist.Shop'}"
+          >
+          </button>
+        </div>
+
+        <div class="modal-body">
+          <choose-list
+            @hide="toggleModal"
+            :product-id="productId"
+            :product-attribute-id="productAttributeId"
+            :quantity="quantity"
+            url="{$url}"
+            add-url="{$addUrl}"
+            empty-text="{l s='No list found.' d='Modules.Blockwishlist.Shop'}"
+          >
+          </choose-list>
+        </div>
+
+        <div class="modal-footer">
+          <a @click="openNewWishlistModal" class="wishlist-add-to-new text-primary">
+            <i class="material-icons text-primary">add_circle_outline</i> {$newWishlistCTA}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div 
+    class="modal-backdrop fade"
+    {literal}
+      :class="{in: !isHidden}"
+    {/literal}
+  >
+  </div>
+</div>
diff --git a/modules/blockwishlist/views/templates/components/modals/create.tpl b/modules/blockwishlist/views/templates/components/modals/create.tpl
new file mode 100644
index 000000000..400ffb5fe
--- /dev/null
+++ b/modules/blockwishlist/views/templates/components/modals/create.tpl
@@ -0,0 +1,79 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<div
+  class="wishlist-create"
+  data-url="{$url}"
+  data-title="{l s='Create wishlist' d='Modules.Blockwishlist.Shop'}"
+  data-label="{l s='Wishlist name' d='Modules.Blockwishlist.Shop'}"
+  data-placeholder="{l s='Add name' d='Modules.Blockwishlist.Shop'}"
+  data-cancel-text="{l s='Cancel' d='Modules.Blockwishlist.Shop'}"
+  data-create-text="{l s='Create wishlist' d='Modules.Blockwishlist.Shop'}"
+  data-length-text="{l s='List title is too short' d='Modules.Blockwishlist.Shop'}"
+>
+  <div
+    class="wishlist-modal modal fade"
+    {literal}
+      :class="{show: !isHidden}"
+    {/literal}
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header px-3">
+          <h5 class="modal-title">((title))</h5>
+          <button
+            type="button"
+            class="btn-close"
+            @click="toggleModal"
+            data-dismiss="modal"
+            aria-label="Close"
+          >
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="form-group form-group-lg">
+            <label class="form-label" for="input2">((label))</label>
+            <input
+              type="text"
+              class="form-control form-control-lg"
+              v-model="value"
+              id="input2"
+              :placeholder="placeholder"
+            >
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button
+            type="button"
+            class="modal-cancel btn btn-secondary"
+            data-dismiss="modal"
+            @click="toggleModal"
+          >
+            ((cancelText))
+          </button>
+
+          <button
+            type="button"
+            class="btn btn-primary"
+            @click="createWishlist"
+          >
+            ((createText))
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div 
+    class="modal-backdrop fade"
+    {literal}
+      :class="{in: !isHidden}"
+    {/literal}
+  >
+  </div>
+</div>
diff --git a/modules/blockwishlist/views/templates/components/modals/delete.tpl b/modules/blockwishlist/views/templates/components/modals/delete.tpl
new file mode 100644
index 000000000..68f4923fd
--- /dev/null
+++ b/modules/blockwishlist/views/templates/components/modals/delete.tpl
@@ -0,0 +1,75 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<div
+  class="wishlist-delete"
+  {if isset($listUrl)}
+    data-delete-list-url="{$listUrl}"
+  {/if}
+  {if isset($deleteProductUrl)}
+    data-delete-product-url="{$deleteProductUrl}"
+  {/if}
+  data-title="{l s='Remove product from wishlist' d='Modules.Blockwishlist.Shop'}"
+  data-title-list="{l s='Delete wishlist' d='Modules.Blockwishlist.Shop'}"
+  data-placeholder='{l s='The product will be removed from "%nameofthewishlist%".' d='Modules.Blockwishlist.Shop'}'
+  data-cancel-text="{l s='Cancel' d='Modules.Blockwishlist.Shop'}"
+  data-delete-text="{l s='Remove' d='Modules.Blockwishlist.Shop'}"
+  data-delete-text-list="{l s='Delete' d='Modules.Blockwishlist.Shop'}"
+>
+  <div
+    class="wishlist-modal modal fade"
+    {literal}
+      :class="{show: !isHidden}"
+    {/literal}
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header px-3">
+          <h5 class="modal-title">((modalTitle))</h5>
+          <button
+            type="button"
+            class="btn-close"
+            @click="toggleModal"
+            data-dismiss="modal"
+            aria-label="Close"
+          >
+          </button>
+        </div>
+        <div class="modal-body" v-if="productId">
+          <p class="modal-text">((confirmMessage))</p> 
+        </div>
+        <div class="modal-footer">
+          <button
+            type="button"
+            class="modal-cancel btn btn-secondary"
+            data-dismiss="modal"
+            @click="toggleModal"
+          >
+            ((cancelText))
+          </button>
+
+          <button
+            type="button"
+            class="btn btn-primary"
+            @click="deleteWishlist"
+          >
+            ((modalDeleteText))
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div 
+    class="modal-backdrop fade"
+    {literal}
+      :class="{in: !isHidden}"
+    {/literal}
+  >
+  </div>
+</div>
diff --git a/modules/blockwishlist/views/templates/components/modals/login.tpl b/modules/blockwishlist/views/templates/components/modals/login.tpl
new file mode 100644
index 000000000..e2d4faa66
--- /dev/null
+++ b/modules/blockwishlist/views/templates/components/modals/login.tpl
@@ -0,0 +1,64 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<div
+  class="wishlist-login"
+  data-login-text="{l s='Sign in' d='Modules.Blockwishlist.Shop'}"
+  data-cancel-text="{l s='Cancel' d='Modules.Blockwishlist.Shop'}"
+>
+  <div
+    class="wishlist-modal modal fade"
+    {literal}
+      :class="{show: !isHidden}"
+    {/literal}
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header px-3">
+          <h5 class="modal-title">{l s='Sign in' d='Modules.Blockwishlist.Shop'}</h5>
+          <button
+            type="button"
+            class="btn-close"
+            @click="toggleModal"
+            data-dismiss="modal"
+            aria-label="Close"
+          >
+          </button>
+        </div>
+        <div class="modal-body">
+          <p class="modal-text">{l s='You need to be logged in to save products in your wishlist.' d='Modules.Blockwishlist.Shop'}</p>
+        </div>
+        <div class="modal-footer">
+          <button
+            type="button"
+            class="modal-cancel btn btn-secondary"
+            data-dismiss="modal"
+            @click="toggleModal"
+          >
+            ((cancelText))
+          </button>
+
+          <a
+            class="btn btn-primary"
+            :href="prestashop.urls.pages.authentication"
+          >
+            ((loginText))
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div
+    class="modal-backdrop fade"
+    {literal}
+      :class="{in: !isHidden}"
+    {/literal}
+  >
+  </div>
+</div>
diff --git a/modules/blockwishlist/views/templates/components/modals/rename.tpl b/modules/blockwishlist/views/templates/components/modals/rename.tpl
new file mode 100644
index 000000000..38478cbe4
--- /dev/null
+++ b/modules/blockwishlist/views/templates/components/modals/rename.tpl
@@ -0,0 +1,76 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<div
+  class="wishlist-rename"
+  data-url="{$url}"
+  data-title="{l s='Rename wishlist' d='Modules.Blockwishlist.Shop'}"
+  data-label="{l s='Wishlist name' d='Modules.Blockwishlist.Shop'}"
+  data-placeholder="{l s='Wishlist name' d='Modules.Blockwishlist.Shop'}"
+  data-cancel-text="{l s='Cancel' d='Modules.Blockwishlist.Shop'}"
+  data-rename-text="{l s='Rename wishlist' d='Modules.Blockwishlist.Shop'}"
+>
+  <div
+    class="wishlist-modal modal fade"
+    {literal}
+      :class="{show: !isHidden}"
+    {/literal}
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header px-3">
+          <h5 class="modal-title">((title))</h5>
+          <button
+            type="button"
+            class="btn-close"
+            @click="toggleModal"
+            data-dismiss="modal"
+            aria-label="Close"
+          >
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="form-group form-group-lg">
+            <label class="form-label" for="input2">((label))</label>
+            <input
+              type="text"
+              class="form-control form-control-lg"
+              v-model="value"
+              id="input2"
+            >
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button
+            type="button"
+            class="modal-cancel btn btn-secondary"
+            data-dismiss="modal"
+            @click="toggleModal"
+          >
+            ((cancelText))
+          </button>
+          <button
+            type="button"
+            class="btn btn-primary"
+            @click="renameWishlist"
+          >
+            ((renameText))
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div 
+    class="modal-backdrop fade"
+    {literal}
+      :class="{in: !isHidden}"
+    {/literal}
+  >
+  </div>
+</div>
diff --git a/modules/blockwishlist/views/templates/components/modals/share.tpl b/modules/blockwishlist/views/templates/components/modals/share.tpl
new file mode 100644
index 000000000..0ddeff71a
--- /dev/null
+++ b/modules/blockwishlist/views/templates/components/modals/share.tpl
@@ -0,0 +1,78 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+
+<div
+  class="wishlist-share"
+  data-url="{$url}"
+  data-title="{l s='Share wishlist' d='Modules.Blockwishlist.Shop'}"
+  data-copied-text="{l s='Copied!' d='Modules.Blockwishlist.Shop'}"
+  data-label="{l s='Share link' d='Modules.Blockwishlist.Shop'}"
+  data-cancel-text="{l s='Cancel' d='Modules.Blockwishlist.Shop'}"
+  data-copy-text="{l s='Copy text' d='Modules.Blockwishlist.Shop'}"
+>
+  <div
+    class="wishlist-modal modal fade"
+    {literal}
+      :class="{show: !isHidden}"
+    {/literal}
+    tabindex="-1"
+    role="dialog"
+    aria-modal="true"
+  >
+    <div class="modal-dialog modal-dialog-centered" role="document">
+      <div class="modal-content">
+        <div class="modal-header px-3">
+          <h5 class="modal-title">((title))</h5>
+          <button
+            type="button"
+            class="btn-close"
+            @click="toggleModal"
+            data-dismiss="modal"
+            aria-label="Close"
+          >
+          </button>
+        </div>
+        <div class="modal-body">
+          <div class="form-group form-group-lg">
+            <label class="form-label" for="input2">((label))</label>
+            <input
+              type="text"
+              class="form-control form-control-lg"
+              v-model="value"
+              id="input2"
+              placeholder="Share link"
+            >
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button
+            type="button"
+            class="modal-cancel btn btn-secondary"
+            data-dismiss="modal"
+            @click="toggleModal"
+          >
+            ((cancelText))
+          </button>
+
+          <button
+            type="button"
+            class="btn btn-primary"
+            @click="copyLink"
+          >
+            (( actionText ))
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div 
+    class="modal-backdrop fade"
+    {literal}
+      :class="{in: !isHidden}"
+    {/literal}
+  >
+  </div>
+</div>
diff --git a/modules/productcomments/views/templates/hook/confirm-modal.tpl b/modules/productcomments/views/templates/hook/confirm-modal.tpl
index 5beb32c87..cca85af99 100644
--- a/modules/productcomments/views/templates/hook/confirm-modal.tpl
+++ b/modules/productcomments/views/templates/hook/confirm-modal.tpl
@@ -38,10 +38,10 @@
         </div>
         <div class="modal-footer">
           <div class="post-comment-buttons">
-            <button type="button" class="btn btn-comment-inverse btn-comment-huge refuse-button" data-bs-dismiss="modal" aria-label="{l s='No' d='Modules.Productcomments.Shop'}">
+            <button type="button" class="btn btn-outline-primary me-2 refuse-button" data-bs-dismiss="modal" aria-label="{l s='No' d='Modules.Productcomments.Shop'}">
               {l s='No' d='Modules.Productcomments.Shop'}
             </button>
-            <button type="button" class="btn btn-comment btn-comment-huge confirm-button" data-bs-dismiss="modal" aria-label="{l s='Yes' d='Modules.Productcomments.Shop'}">
+            <button type="button" class="btn btn-primary confirm-button" data-bs-dismiss="modal" aria-label="{l s='Yes' d='Modules.Productcomments.Shop'}">
               {l s='Yes' d='Modules.Productcomments.Shop'}
             </button>
           </div>
diff --git a/modules/productcomments/views/templates/hook/post-comment-modal.tpl b/modules/productcomments/views/templates/hook/post-comment-modal.tpl
index 93367b52e..0d9f0b427 100644
--- a/modules/productcomments/views/templates/hook/post-comment-modal.tpl
+++ b/modules/productcomments/views/templates/hook/post-comment-modal.tpl
@@ -29,10 +29,68 @@
 
                 {block name='product_cover'}
                   <div class="product-cover">
-                    {if $product.cover}
-                      <img class="js-qv-product-cover rounded" src="{$product.cover.bySize.medium_default.url}" alt="{$product.cover.legend}" title="{$product.cover.legend}" style="width:100%;" itemprop="image">
+                    {if !empty($product.cover)}
+                      <picture>
+                        {if isset($product.cover.bySize.default_xs.sources.avif)}
+                          <source 
+                            srcset="
+                              {$product.cover.bySize.default_xs.sources.avif},
+                              {$product.cover.bySize.default_m.sources.avif} 2x"
+                            type="image/avif"
+                          >
+                        {/if}
+
+                        {if isset($product.cover.bySize.default_xs.sources.webp)}
+                          <source 
+                            srcset="
+                              {$product.cover.bySize.default_xs.sources.webp},
+                              {$product.cover.bySize.default_m.sources.webp} 2x"
+                            type="image/webp"
+                          >
+                        {/if}
+
+                        <img
+                          class="js-qv-product-cover rounded"
+                          srcset="
+                            {$product.cover.bySize.default_xs.url},
+                            {$product.cover.bySize.default_m.url} 2x"
+                          loading="lazy"
+                          width="{$product.cover.bySize.default_xs.width}"
+                          height="{$product.cover.bySize.default_xs.height}"
+                          alt="{$product.cover.legend}"
+                          title="{$product.cover.legend}"
+                        >
+                      </picture>
                     {else}
-                      <img src="{$urls.no_picture_image.bySize.large_default.url nofilter}" style="width:100%;" class="rounded">
+                      <picture>
+                        {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
+                          <source 
+                            srcset="
+                              {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                              {$urls.no_picture_image.bySize.default_m.sources.avif} 2x"
+                            type="image/avif"
+                          >
+                        {/if}
+
+                        {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
+                          <source 
+                            srcset="
+                              {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                              {$urls.no_picture_image.bySize.default_m.sources.webp} 2x"
+                            type="image/webp"
+                          >
+                        {/if}
+
+                        <img
+                          class="rounded"
+                          srcset="
+                            {$urls.no_picture_image.bySize.default_xs.url},
+                            {$urls.no_picture_image.bySize.default_m.url} 2x"
+                          width="{$urls.no_picture_image.bySize.default_xs.width}"
+                          height="{$urls.no_picture_image.bySize.default_xs.height}"
+                          loading="lazy"
+                        >
+                      </picture>
                     {/if}
                   </div>
                 {/block}
diff --git a/modules/ps_brandlist/views/templates/_partials/brand_text.tpl b/modules/ps_brandlist/views/templates/_partials/brand_text.tpl
index 9440bef1a..71ef0c5b0 100644
--- a/modules/ps_brandlist/views/templates/_partials/brand_text.tpl
+++ b/modules/ps_brandlist/views/templates/_partials/brand_text.tpl
@@ -2,12 +2,13 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
+{$componentName = 'search-filters-modules'}
 
-<ul>
+<ul class="{$componentName}__list">
   {foreach from=$brands item=brand name=brand_list}
     {if $smarty.foreach.brand_list.iteration <= $text_list_nb}
-      <li class="facet-label">
-        <a href="{$brand['link']}" title="{$brand['name']}">
+      <li class="{$componentName}__item facet-label">
+        <a class="{$componentName}__item__link" href="{$brand['link']}" title="{$brand['name']}">
           {$brand['name']}
         </a>
       </li>
diff --git a/modules/ps_brandlist/views/templates/hook/ps_brandlist.tpl b/modules/ps_brandlist/views/templates/hook/ps_brandlist.tpl
index 3d252f173..fe2a69a13 100644
--- a/modules/ps_brandlist/views/templates/hook/ps_brandlist.tpl
+++ b/modules/ps_brandlist/views/templates/hook/ps_brandlist.tpl
@@ -2,15 +2,16 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
+{$componentName = 'search-filters-modules'}
 
 <div id="search_filters_brands">
-  <section class="facet">
+  <section class="{$componentName} facet">
     {if $display_link_brand}
-      <a href="{$page_link}" class="h6 text-uppercase facet-label" title="{l s='brands' d='shop.theme.catalog'}">
+      <a href="{$page_link}" class="{$componentName}-title d-block mb-3" title="{l s='brands' d='shop.theme.catalog'}">
         {l s='Brands' d='Shop.Theme.Catalog'}
       </a>
     {else}
-      <p class="h6 text-uppercase facet-label">
+      <p class="{$componentName}-title">
         {l s='Brands' d='Shop.Theme.Catalog'}
       </p>
     {/if}
@@ -19,7 +20,7 @@
       {if $brands}
         {include file="module:ps_brandlist/views/templates/_partials/$brand_display_type.tpl" brands=$brands}
       {else}
-        <p>{l s='No brand' d='Shop.Theme.Catalog'}</p>
+        <p class="mb-0">{l s='No brand' d='Shop.Theme.Catalog'}</p>
       {/if}
     </div>
   </section>
diff --git a/modules/ps_contactinfo/ps_contactinfo.tpl b/modules/ps_contactinfo/ps_contactinfo.tpl
index ce0100ea7..cbde4e3ee 100644
--- a/modules/ps_contactinfo/ps_contactinfo.tpl
+++ b/modules/ps_contactinfo/ps_contactinfo.tpl
@@ -5,9 +5,9 @@
 
 <div class="footer__block block-contact col-md-6 col-lg-3">
 
-  <p class="footer__block__title hidden-on-mobile">{l s='Store information' d='Shop.Theme.Global'}</p>
+  <p class="footer__block__title d-none d-md-flex">{l s='Store information' d='Shop.Theme.Global'}</p>
 
-  <div class="footer__block__toggle hidden-on-desktop collapsed" data-bs-target="#contact-infos" data-bs-toggle="collapse" aria-expanded="false">
+  <div class="footer__block__toggle d-md-none collapsed" data-bs-target="#contact-infos" data-bs-toggle="collapse" aria-expanded="false">
     <span class="footer__block__title">{l s='Store information' d='Shop.Theme.Global'}</span>
     <i class="material-icons">arrow_drop_down</i>
   </div>
diff --git a/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl b/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
index 34093f3ff..527c28787 100644
--- a/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
+++ b/modules/ps_customeraccountlinks/ps_customeraccountlinks.tpl
@@ -4,13 +4,13 @@
  *}
 
 <div id="block-myaccount-infos" class="footer__block col-md-6 col-lg-3">
-  <p class="footer__block__title hidden-on-mobile">
+  <p class="footer__block__title d-none d-md-flex">
     <a href="{$urls.pages.my_account}" rel="nofollow">
       {l s='Your account' d='Shop.Theme.Customeraccount'}
     </a>
   </p>
 
-  <div class="footer__block__toggle hidden-on-desktop collapsed" data-bs-target="#footer_account_list" data-bs-toggle="collapse" aria-expanded="false">
+  <div class="footer__block__toggle d-md-none collapsed" data-bs-target="#footer_account_list" data-bs-toggle="collapse" aria-expanded="false">
     <span class="footer__block__title">{l s='Your account' d='Shop.Theme.Customeraccount'}</span>
     <i class="material-icons">arrow_drop_down</i>
   </div>
diff --git a/modules/ps_customersignin/ps_customersignin.tpl b/modules/ps_customersignin/ps_customersignin.tpl
index bda9b5a62..fa44deb84 100644
--- a/modules/ps_customersignin/ps_customersignin.tpl
+++ b/modules/ps_customersignin/ps_customersignin.tpl
@@ -6,10 +6,16 @@
 <div id="_desktop_user_info">
   <div class="user-info">
     {if $customer.is_logged}
-      <div class="dropdown">
-        <button class="dropdown-toggle btn btn-link btn-with-icon" type="button" id="userMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-          <i class="material-icons">&#xE7FD;</i>
-          <span class="user-info__name">{$customerName|truncate:22:"..":true}</span>
+      <div class="dropdown header-block">
+        <button
+          class="dropdown-toggle header-block__action-btn"
+          type="button"
+          id="userMenuButton"
+          data-bs-toggle="dropdown"
+          aria-haspopup="true"
+          aria-expanded="false">
+          <i class="material-icons header-block__icon">&#xE7FD;</i>
+          <span class="header-block__title">{$customerName|truncate:22:"..":true}</span>
         </button>
 
         <div class="dropdown-menu dropdown-menu-start" aria-labelledby="userMenuButton">
@@ -65,10 +71,17 @@
         </div>
       </div>
     {else}
-      <a href="{$urls.pages.my_account}" title="{l s='Log in to your customer account' d='Shop.Theme.Customeraccount'}" class="btn" rel="nofollow" role="button">
-        <i class="material-icons">&#xE7FD;</i>
-        <span class="d-none d-md-inline">{l s='Sign in' d='Shop.Theme.Actions'}</span>
-      </a>
+      <div class="header-block">
+        <a
+          href="{$urls.pages.authentication}?back={$urls.current_url|urlencode}"
+          title="{l s='Log in to your customer account' d='Shop.Theme.Customeraccount'}"
+          class="header-block__action-btn"
+          rel="nofollow"
+          role="button">
+          <i class="material-icons header-block__icon">&#xE7FD;</i>
+          <span class="d-none d-md-inline header-block__title">{l s='Sign in' d='Shop.Theme.Actions'}</span>
+        </a>
+      </div>
     {/if}
   </div>
 </div>
diff --git a/modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl b/modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl
new file mode 100644
index 000000000..a7e3e838f
--- /dev/null
+++ b/modules/ps_emailalerts/views/templates/front/mailalerts-account-line.tpl
@@ -0,0 +1,24 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+{$componentName = 'mailalerts-account-line'}
+
+<div class="{$componentName} d-flex flex-column position-relative"> 
+  <a href="{$mailAlert.link}" class="text-center">
+    <img src="{$mailAlert.cover_url}" alt="" />
+  </a>
+  <a class="mt-2" href="{$mailAlert.link}">
+    <div class="{$componentName}__product d-flex flex-column">
+      <span class="{$componentName}__product__name">{$mailAlert.name}</span>
+      <span class="{$componentName}__product__attributes mt-1">{$mailAlert.attributes_small}</span>
+    </div>
+  </a>
+  <a href="#"
+    title="{l s='Remove mail alert' d='Modules.Emailalerts.Shop'}"
+    class="js-remove-email-alert btn btn-link {$componentName}__remove"
+    rel="js-id-emailalerts-{$mailAlert.id_product|intval}-{$mailAlert.id_product_attribute|intval}"
+    data-url="{url entity='module' name='ps_emailalerts' controller='actions' params=['process' => 'remove']}">
+    <i class="material-icons">delete</i>
+  </a>
+</div>
diff --git a/modules/ps_emailalerts/views/templates/front/mailalerts-account.tpl b/modules/ps_emailalerts/views/templates/front/mailalerts-account.tpl
new file mode 100644
index 000000000..18ebe5aee
--- /dev/null
+++ b/modules/ps_emailalerts/views/templates/front/mailalerts-account.tpl
@@ -0,0 +1,21 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+{extends file='customer/page.tpl'}
+
+{block name='page_title'}
+  {l s='My alerts' d='Modules.Emailalerts.Shop'}
+{/block}
+
+{block name='page_content'}
+  {if $mailAlerts}
+    <ul class="row">
+      {foreach from=$mailAlerts item=mailAlert}
+        <li class="col-sm-6 col-md-3">{include 'module:ps_emailalerts/views/templates/front/mailalerts-account-line.tpl' mailAlert=$mailAlert}</li>
+      {/foreach}
+    </ul>
+  {else}
+    <div class="alert alert-info" role="alert" data-alert="info">{l s='No mail alerts yet.' d='Modules.Emailalerts.Shop'}</div>
+  {/if}
+{/block}
diff --git a/modules/ps_emailalerts/views/templates/hook/product.tpl b/modules/ps_emailalerts/views/templates/hook/product.tpl
index 302263dd9..d1541a9c4 100644
--- a/modules/ps_emailalerts/views/templates/hook/product.tpl
+++ b/modules/ps_emailalerts/views/templates/hook/product.tpl
@@ -23,7 +23,7 @@
 * International Registered Trademark & Property of PrestaShop SA
 *}
 
-<div class="card card-body text-center js-mailalert mb-3 bg-light" data-url="{url entity='module' name='ps_emailalerts' controller='actions' params=['process' => 'add']}">
+<div class="card card-body text-center js-mailalert mb-3 mt-3 bg-light" data-url="{url entity='module' name='ps_emailalerts' controller='actions' params=['process' => 'add']}">
     {if isset($email) AND $email}
         <p>{l s="Interested in this product? Drop us an email and we will let you know when it's available for order." d='Modules.Emailalerts.Shop'}</p>
         <input class="form-control" type="email" placeholder="{l s='your@email.com' d='Modules.Emailalerts.Shop'}"/>
diff --git a/modules/ps_imageslider/views/templates/hook/slider.tpl b/modules/ps_imageslider/views/templates/hook/slider.tpl
index 7c362dc88..f6806042b 100644
--- a/modules/ps_imageslider/views/templates/hook/slider.tpl
+++ b/modules/ps_imageslider/views/templates/hook/slider.tpl
@@ -4,43 +4,43 @@
  *}
 
 {if $homeslider.slides}
-    <div id="home-slider" class="ratio ratio-homeSlider">
-        <div class="carousel slide" data-bs-ride="carousel">
-            <div class="carousel-indicators">
-                {assign var="count" value=0}
-                {foreach from=$homeslider.slides item=slide name='homeslider'}
-                    <button type="button" data-bs-target="#home-slider .carousel" data-bs-slide-to="{$count}" aria-label="{$slide.title}"
-                        {if $smarty.foreach.homeslider.first} class="active" aria-current="true" {/if}></button>
-                    {$count = $count + 1}
-                {/foreach}
-            </div>
-            <div class="carousel-inner">
-                {foreach from=$homeslider.slides item=slide name='homeslider'}
-                    <li class="carousel-item{if $smarty.foreach.homeslider.first} active{/if}" role="option"
-                        aria-hidden="{if $smarty.foreach.homeslider.first}false{else}true{/if}">
-                        {if !empty($slide.url)}<a class="carousel-link" href="{$slide.url}">{/if}
-                            <figure class="carousel-content">
-                                <img src="{$slide.image_url}" alt="{$slide.legend|escape}" loading="lazy">
-                                {if $slide.title || $slide.description}
-                                    <figcaption class="carousel-caption caption">
-                                        <h2 class="display-1 text-uppercase">{$slide.title}</h2>
-                                        <div class="caption-description">{$slide.description nofilter}</div>
-                                    </figcaption>
-                                {/if}
-                            </figure>
-                        {if !empty($slide.url)}</a>{/if}
-                    </li>
-                {/foreach}
-            </div>
+  <div id="home-slider" class="ratio ratio-homeSlider">
+    <div class="carousel slide" data-bs-ride="carousel">
+      <div class="carousel-indicators">
+        {assign var="count" value=0}
+        {foreach from=$homeslider.slides item=slide name='homeslider'}
+          <button type="button" data-bs-target="#home-slider .carousel" data-bs-slide-to="{$count}" aria-label="{$slide.title}"
+          {if $smarty.foreach.homeslider.first} class="active" aria-current="true" {/if}></button>
+          {$count = $count + 1}
+        {/foreach}
+      </div>
+      <div class="carousel-inner" role="listbox" aria-label="{l s='Carousel container' d='Shop.Theme.Global'}">
+        {foreach from=$homeslider.slides item=slide name='homeslider'}
+          <li class="carousel-item{if $smarty.foreach.homeslider.first} active{/if}" role="option"
+            aria-hidden="{if $smarty.foreach.homeslider.first}false{else}true{/if}">
+            {if !empty($slide.url)}<a class="carousel-link" href="{$slide.url}">{/if}
+              <figure class="carousel-content">
+                <img src="{$slide.image_url}" alt="{$slide.legend|escape}" loading="lazy" {$slide.size|replace: '"':''}>
+                {if $slide.title || $slide.description}
+                  <figcaption class="carousel-caption caption">
+                    <h2 class="display-1 text-uppercase">{$slide.title}</h2>
+                    <div class="caption-description">{$slide.description nofilter}</div>
+                  </figcaption>
+                {/if}
+              </figure>
+            {if !empty($slide.url)}</a>{/if}
+          </li>
+        {/foreach}
+      </div>
 
-            <button class="carousel-control-prev" type="button" data-bs-target="#home-slider .carousel" data-bs-slide="prev">
-                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-                <span class="visually-hidden">Previous</span>
-            </button>
-            <button class="carousel-control-next" type="button" data-bs-target="#home-slider .carousel" data-bs-slide="next">
-                <span class="carousel-control-next-icon" aria-hidden="true"></span>
-                <span class="visually-hidden">Next</span>
-            </button>
-        </div>
+      <button class="carousel-control-prev" type="button" data-bs-target="#home-slider .carousel" data-bs-slide="prev">
+        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">{l s='Previous' d='Shop.Theme.Actions'}</span>
+      </button>
+      <button class="carousel-control-next" type="button" data-bs-target="#home-slider .carousel" data-bs-slide="next">
+        <span class="carousel-control-next-icon" aria-hidden="true"></span>
+        <span class="visually-hidden">{l s='Next' d='Shop.Theme.Actions'}</span>
+      </button>
     </div>
+  </div>
 {/if}
diff --git a/modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl b/modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl
index e188ed151..f37eed8fd 100644
--- a/modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl
+++ b/modules/ps_legalcompliance/views/templates/hook/hookDisplayFooter.tpl
@@ -5,9 +5,9 @@
 
 <div class="footer__block col-md-6 col-lg-3">
 
-  <h3 class="footer__block__title hidden-on-mobile">{l s='Information' d='Modules.Legalcompliance.Shop'}</h3>
+  <h3 class="footer__block__title d-none d-md-flex">{l s='Information' d='Modules.Legalcompliance.Shop'}</h3>
 
-  <div class="footer__block__toggle hidden-on-desktop collapsed" data-target="#footer_eu_about_us_list" data-bs-toggle="collapse">
+  <div class="footer__block__toggle d-md-none collapsed" data-target="#footer_eu_about_us_list" data-bs-toggle="collapse">
     <span class="footer__block__title">{l s='Information' d='Modules.Legalcompliance.Shop'}</span>
     <i class="material-icons">arrow_drop_down</i>
   </div>
diff --git a/modules/ps_linklist/views/templates/hook/linkblock-column.tpl b/modules/ps_linklist/views/templates/hook/linkblock-column.tpl
index 07806860a..d711e5afd 100644
--- a/modules/ps_linklist/views/templates/hook/linkblock-column.tpl
+++ b/modules/ps_linklist/views/templates/hook/linkblock-column.tpl
@@ -6,9 +6,9 @@
 {foreach $linkBlocks as $linkBlock}
   <div class="footer__block col-md-6 col-lg-3">
 
-    <p class="footer__block__title hidden-on-mobile">{$linkBlock.title}</p>
+    <p class="footer__block__title d-none d-md-flex">{$linkBlock.title}</p>
 
-    <div class="footer__block__toggle hidden-on-desktop collapsed" data-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
+    <div class="footer__block__toggle d-md-none collapsed" data-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
       <span class="footer__block__title">{$linkBlock.title}</span>
       <i class="material-icons">arrow_drop_down</i>
     </div>
diff --git a/modules/ps_linklist/views/templates/hook/linkblock.tpl b/modules/ps_linklist/views/templates/hook/linkblock.tpl
index 95e33056a..0706614ac 100644
--- a/modules/ps_linklist/views/templates/hook/linkblock.tpl
+++ b/modules/ps_linklist/views/templates/hook/linkblock.tpl
@@ -5,9 +5,9 @@
 {foreach $linkBlocks as $linkBlock}
   <div class="footer__block col-md-6 col-lg-3">
 
-    <p class="footer__block__title hidden-on-mobile">{$linkBlock.title}</p>
+    <p class="footer__block__title d-none d-md-flex">{$linkBlock.title}</p>
 
-    <div class="footer__block__toggle hidden-on-desktop collapsed" aria-expanded="false" data-bs-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
+    <div class="footer__block__toggle d-md-none collapsed" aria-expanded="false" data-bs-target="#footer_sub_menu_{$linkBlock.id}" data-bs-toggle="collapse">
       <span class="footer__block__title">{$linkBlock.title}</span>
       <i class="material-icons">arrow_drop_down</i>
     </div>
diff --git a/modules/ps_mainmenu/ps_mainmenu.tpl b/modules/ps_mainmenu/ps_mainmenu.tpl
index 6753303c6..6f582bb8a 100644
--- a/modules/ps_mainmenu/ps_mainmenu.tpl
+++ b/modules/ps_mainmenu/ps_mainmenu.tpl
@@ -13,7 +13,7 @@
         {if $depth > 1 && $node.children|count}
           <div class="dropdown dropend">
         {/if}
-          <a 
+          <a
             class="main-menu__tree__link{if $node.children|count} dropdown-toggle{/if}{if $depth > 0} dropdown-item{/if}"
             href="{$node.url}"
             data-depth="{$depth}"
@@ -63,11 +63,11 @@
           <li class="main-menu__title h5">{$parent.label}</li>
         {/if}
         {foreach from=$nodes item=node}
-          <li 
+          <li
             class="{$node.type}{if $node.current} current{/if}{if $node.children|count} menu--childrens{/if}"
             id="{$node.page_identifier}"
           >
-            <a 
+            <a
               class="{if $depth>= 0}menu__link{/if}"
               href="{$node.url}"
               data-depth="{$depth}"
@@ -94,34 +94,38 @@
       </ul>
     </nav>
     {foreach from=$children item=child}
-      {mobileMenu 
-        nodes=$child.children 
-        depth=$child.children[0].depth 
-        parent=$child backTitle=$child.parent.label 
+      {mobileMenu
+        nodes=$child.children
+        depth=$child.children[0].depth
+        parent=$child backTitle=$child.parent.label
         expandId=$child.expandId
       }
     {/foreach}
   {/if}
 {/function}
 
-<div id="_desktop_menu" class="main-menu main-menu--desktop order-0 order-xl-1">
+<div class="main-menu col-xl col-auto">
   <div class="d-none d-xl-block position-static js-menu-desktop">
     {desktopMenu nodes=$menu.children}
   </div>
-  <button
-    class="main-menu__toggler btn btn-unstyle d-xl-none me-2" 
-    type="button" 
-    data-bs-toggle="offcanvas"
-    data-bs-target="#mobileMenu"
-    aria-controls="mobileMenu"
-  >
-    <i class="material-icons">menu</i>
-  </button>
+
+  <div class="header-block d-xl-none">
+    <a
+      class="header-block__action-btn"
+      href="#"
+      role="button"
+      data-bs-toggle="offcanvas"
+      data-bs-target="#mobileMenu"
+      aria-controls="mobileMenu"
+    >
+      <span class="material-icons header-block__icon">menu</span>
+    </a>
+  </div>
 </div>
 
 <div
-  class="main-menu__offcanvas offcanvas offcanvas-start js-menu-canvas" 
-  tabindex="-1" 
+  class="main-menu__offcanvas offcanvas offcanvas-start js-menu-canvas"
+  tabindex="-1"
   id="mobileMenu"
   aria-labelledby="mobileMenuLabel"
 >
diff --git a/modules/ps_searchbar/ps_searchbar.tpl b/modules/ps_searchbar/ps_searchbar.tpl
index 11c4c62e7..3f5a7174e 100644
--- a/modules/ps_searchbar/ps_searchbar.tpl
+++ b/modules/ps_searchbar/ps_searchbar.tpl
@@ -23,7 +23,7 @@
  * International Registered Trademark & Property of PrestaShop SA
  *}
 
-<div id="_desktop_search" class="order-2 ms-auto">
+<div id="_desktop_search" class="order-2 ms-auto col-auto d-none d-md-flex">
   <div id="search_widget" class="search-widgets js-search-widget" data-search-controller-url="{$search_controller_url}">
     <form method="get" action="{$search_controller_url}">
       <input type="hidden" name="controller" value="search">
diff --git a/modules/ps_shoppingcart/modal.tpl b/modules/ps_shoppingcart/modal.tpl
index c900937f6..195eadc7c 100644
--- a/modules/ps_shoppingcart/modal.tpl
+++ b/modules/ps_shoppingcart/modal.tpl
@@ -58,18 +58,18 @@
               <div class="mb-3">
                 <div class="blockcart-modal__total product-subtotal">
                   <span class="label">{l s='Subtotal:' d='Shop.Theme.Checkout'}</span>
-                  <span class="value">{$cart.subtotals.products.value}</span>
+                  <span class="subtotals value">{$cart.subtotals.products.value}</span>
                 </div>
                 {if $cart.subtotals.shipping.value}
                   <div class="blockcart-modal__total product-shipping">
                     <span class="label">{l s='Shipping:' d='Shop.Theme.Checkout'}</span>
-                    <span class="value">{$cart.subtotals.shipping.value} {hook h='displayCheckoutSubtotalDetails' subtotal=$cart.subtotals.shipping}</span>
+                    <span class="shipping value">{$cart.subtotals.shipping.value} {hook h='displayCheckoutSubtotalDetails' subtotal=$cart.subtotals.shipping}</span>
                   </div>
                 {/if}
               </div>
               {if !$configuration.display_prices_tax_incl && $configuration.taxes_enabled}
                 <div class="blockcart-modal__total product-total">
-                  <span class="label">{$cart.totals.total.label}&nbsp;{$cart.labels.tax_short}</span>
+                  <span class="label">{$cart.totals.total.label}{if $configuration.display_taxes_label}&nbsp;{$cart.labels.tax_short}{/if}</span>
                   <span class="value">{$cart.totals.total.value}</span>
                 </div>
                 <div class="blockcart-modal__total product-total">
@@ -78,7 +78,7 @@
                 </div>
               {else}
                 <div class="blockcart-modal__total product-total">
-                  <span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.taxes_enabled}{$cart.labels.tax_short}{/if}</span>
+                  <span class="label">{$cart.totals.total.label}&nbsp;{if $configuration.taxes_enabled && $configuration.display_taxes_label}{$cart.labels.tax_short}{/if}</span>
                   <span class="value">{$cart.totals.total.value}</span>
                 </div>
               {/if}
diff --git a/modules/ps_shoppingcart/ps_shoppingcart.tpl b/modules/ps_shoppingcart/ps_shoppingcart.tpl
index 27f3680eb..e4c335ca2 100644
--- a/modules/ps_shoppingcart/ps_shoppingcart.tpl
+++ b/modules/ps_shoppingcart/ps_shoppingcart.tpl
@@ -3,15 +3,21 @@
  * file that was distributed with this source code.
  *}
 <div id="_desktop_cart">
-  <div class="blockcart cart-preview {if $cart.products_count> 0}active{else}inactive{/if}" data-refresh-url="{$refresh_url}">
+  <div class="header-block blockcart cart-preview {if $cart.products_count> 0}header-block--active{else}inactive{/if}" data-refresh-url="{$refresh_url}">
     {if $cart.products_count> 0}
-      <a rel="nofollow" href="{$cart_url}">
+      <a class="header-block__action-btn" rel="nofollow" href="{$cart_url}">
+    {else}
+      <span class="header-block__action-btn">
     {/if}
-      <i class="material-icons shopping-cart">shopping_cart</i>
-      <span class="hidden-on-mobile">{l s='Cart' d='Shop.Theme.Checkout'}</span>
-      <span class="cart-products-count">{$cart.products_count}</span>
+
+    <i class="material-icons header-block__icon">shopping_cart</i>
+    <span class="d-none d-md-flex header-block__title">{l s='Cart' d='Shop.Theme.Checkout'}</span>
+    <span class="header-block__badge">{$cart.products_count}</span>
+
     {if $cart.products_count> 0}
       </a>
+    {else}
+      </span>
     {/if}
   </div>
 </div>
diff --git a/modules/ps_supplierlist/views/templates/_partials/supplier_text.tpl b/modules/ps_supplierlist/views/templates/_partials/supplier_text.tpl
index 125df103d..dce6af0d9 100644
--- a/modules/ps_supplierlist/views/templates/_partials/supplier_text.tpl
+++ b/modules/ps_supplierlist/views/templates/_partials/supplier_text.tpl
@@ -2,12 +2,13 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
+{$componentName = 'search-filters-modules'}
 
-<ul>
+<ul class="{$componentName}__list">
   {foreach from=$suppliers item=supplier name=supplier_list}
     {if $smarty.foreach.supplier_list.iteration <= $text_list_nb}
-      <li class="facet-label">
-        <a href="{$supplier['link']}" title="{$supplier['name']}">
+      <li class="{$componentName}__item facet-label">
+        <a class="{$componentName}__item__link" href="{$supplier['link']}" title="{$supplier['name']}">
           {$supplier['name']}
         </a>
       </li>
diff --git a/modules/ps_supplierlist/views/templates/hook/ps_supplierlist.tpl b/modules/ps_supplierlist/views/templates/hook/ps_supplierlist.tpl
index 2c9bd6fc4..58cbbe362 100644
--- a/modules/ps_supplierlist/views/templates/hook/ps_supplierlist.tpl
+++ b/modules/ps_supplierlist/views/templates/hook/ps_supplierlist.tpl
@@ -2,15 +2,16 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
+{$componentName = 'search-filters-modules'}
 
 <div id="search_filters_suppliers">
-  <section class="facet">
+  <section class="{$componentName} facet">
     {if $display_link_supplier}
-      <a href="{$page_link}" class="h6 text-uppercase facet-label" title="{l s='Suppliers' d='Shop.Theme.Catalog'}">
+      <a href="{$page_link}" class="{$componentName}-title d-block mb-3" title="{l s='Suppliers' d='Shop.Theme.Catalog'}">
         {l s='Suppliers' d='Shop.Theme.Catalog'}
       </a>
     {else}
-      <p class="h6 text-uppercase facet-label">
+      <p class="{$componentName}-title">
         {l s='Suppliers' d='Shop.Theme.Catalog'}
       </p>
     {/if}
diff --git a/modules/psgdpr/views/templates/hook/displayGDPRConsent.tpl b/modules/psgdpr/views/templates/hook/displayGDPRConsent.tpl
new file mode 100644
index 000000000..71dcff497
--- /dev/null
+++ b/modules/psgdpr/views/templates/hook/displayGDPRConsent.tpl
@@ -0,0 +1,29 @@
+{**
+ * 2007-2020 PrestaShop and Contributors
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.txt.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * @author    PrestaShop SA <contact@prestashop.com>
+ * @copyright 2007-2020 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ * International Registered Trademark & Property of PrestaShop SA
+ *}
+{extends file="modules/psgdpr/views/templates/hook/displayGDPRConsent.tpl"}
+{block name='gdpr_checkbox'}
+  <div id="gdpr_consent" class="mt-2 gdpr_module_{$psgdpr_id_module|escape:'htmlall':'UTF-8'}">
+    <span class="form-check">
+      <input id="psgdpr_consent_checkbox_{$psgdpr_id_module|escape:'htmlall':'UTF-8'}" name="psgdpr_consent_checkbox" type="checkbox" value="1" class="form-check-input psgdpr_consent_checkboxes_{$psgdpr_id_module|escape:'htmlall':'UTF-8'}">
+      <label class="form-check-label psgdpr_consent_message">
+        {$psgdpr_consent_message nofilter}{* html data *}
+      </label>
+    </span>
+  </div>
+{/block}
diff --git a/package-lock.json b/package-lock.json
index c8a5a6925..391f8df22 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,21 +12,18 @@
         "@fontsource/inter": "^4.5.0",
         "@popperjs/core": "^2.9.2",
         "@types/jquery": "^3.5.6",
-        "bootstrap": "5.1.3",
+        "bootstrap": "5.2.0",
         "events": "^3.3.0",
         "jquery": "^3.5.1",
         "jquery-touchswipe": "^1.6",
         "jquery.browser": "^0.1.0",
         "material-design-icons-iconfont": "^6.7.0",
         "nouislider": "^15.5.0",
-        "swiper": "^7.4.1",
+        "sprintf-js": "^1.1.2",
         "vazirmatn": "^32.102.0",
         "wnumb": "^1.2.0"
       },
       "devDependencies": {
-        "@babel/core": "^7.17.5",
-        "@babel/preset-env": "^7.16.11",
-        "@babel/preset-typescript": "^7.16.7",
         "@storybook/addon-a11y": "^6.4.19",
         "@storybook/addon-actions": "^6.4.19",
         "@storybook/addon-essentials": "^6.4.19",
@@ -36,11 +33,11 @@
         "@storybook/manager-webpack5": "^6.4.19",
         "@types/bootstrap": "^5.1.6",
         "@types/jest": "^27.4.0",
+        "@types/sprintf-js": "^1.1.2",
         "@types/wnumb": "^1.2.1",
         "@typescript-eslint/eslint-plugin": "^5.12.0",
         "@typescript-eslint/parser": "^5.12.0",
         "autoprefixer": "^10.4.11",
-        "babel-loader": "^8.2.3",
         "bootstrap-touchspin": "^4.3.0",
         "bourbon": "^7.0.0",
         "clean-webpack-plugin": "^4.0.0",
@@ -6940,6 +6937,7 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@npmcli/move-file/-/move-file-1.1.2.tgz",
       "integrity": "sha512-1SUf/Cg2GzGDyaf15aR9St9TWlb+XvbZXWpDx8YKs7MLzMH/BCeopv+y9vzrzgkfykCGuWOlSu3mZhj2+FQcrg==",
+      "deprecated": "This functionality has been moved to @npmcli/fs",
       "dev": true,
       "dependencies": {
         "mkdirp": "^1.0.4",
@@ -14421,6 +14419,12 @@
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
       "dev": true
     },
+    "node_modules/@types/sprintf-js": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@types/sprintf-js/-/sprintf-js-1.1.2.tgz",
+      "integrity": "sha512-hkgzYF+qnIl8uTO8rmUSVSfQ8BIfMXC4yJAF4n8BE758YsKBZvFC4NumnAegj7KmylP0liEZNpb9RRGFMbFejA==",
+      "dev": true
+    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -15563,6 +15567,12 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/argparse/node_modules/sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
     "node_modules/arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -16490,15 +16500,21 @@
       "dev": true
     },
     "node_modules/bootstrap": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/bootstrap"
-      },
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz",
+      "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/twbs"
+        },
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/bootstrap"
+        }
+      ],
       "peerDependencies": {
-        "@popperjs/core": "^2.10.2"
+        "@popperjs/core": "^2.11.5"
       }
     },
     "node_modules/bootstrap-touchspin": {
@@ -19317,14 +19333,6 @@
       "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=",
       "dev": true
     },
-    "node_modules/dom7": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
-      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
-      "dependencies": {
-        "ssr-window": "^4.0.0"
-      }
-    },
     "node_modules/domain-browser": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz",
@@ -32123,23 +32131,6 @@
         "semver": "bin/semver"
       }
     },
-    "node_modules/sass": {
-      "version": "1.43.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.43.4.tgz",
-      "integrity": "sha512-/ptG7KE9lxpGSYiXn7Ar+lKOv37xfWsZRtFYal2QHNigyVQDx685VFT/h7ejVr+R8w7H4tmUgtulsKl5YpveOg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "chokidar": ">=3.0.0 <4.0.0"
-      },
-      "bin": {
-        "sass": "sass.js"
-      },
-      "engines": {
-        "node": ">=8.9.0"
-      }
-    },
     "node_modules/sass-embedded": {
       "version": "1.55.0",
       "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.55.0.tgz",
@@ -33148,15 +33139,9 @@
       }
     },
     "node_modules/sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
-    },
-    "node_modules/ssr-window": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
-      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
+      "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug=="
     },
     "node_modules/ssri": {
       "version": "6.0.2",
@@ -33990,29 +33975,6 @@
         "node": ">= 10"
       }
     },
-    "node_modules/swiper": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-7.4.1.tgz",
-      "integrity": "sha512-dhbL4tpYFvHug1J7GnKElfTi6EYhlZy/vNZRhHkWFyUsWZ1Vovipxj3la5gqllMogygXJMe3zvVv+f6eppvWiA==",
-      "funding": [
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/swiperjs"
-        },
-        {
-          "type": "open_collective",
-          "url": "http://opencollective.com/swiper"
-        }
-      ],
-      "hasInstallScript": true,
-      "dependencies": {
-        "dom7": "^4.0.2",
-        "ssr-window": "^4.0.2"
-      },
-      "engines": {
-        "node": ">= 4.7.0"
-      }
-    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -35521,6 +35483,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz",
       "integrity": "sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==",
+      "deprecated": "Use your platform's native performance.now() and performance.timeOrigin.",
       "dev": true,
       "dependencies": {
         "browser-process-hrtime": "^1.0.0"
@@ -47661,6 +47624,12 @@
       "integrity": "sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==",
       "dev": true
     },
+    "@types/sprintf-js": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@types/sprintf-js/-/sprintf-js-1.1.2.tgz",
+      "integrity": "sha512-hkgzYF+qnIl8uTO8rmUSVSfQ8BIfMXC4yJAF4n8BE758YsKBZvFC4NumnAegj7KmylP0liEZNpb9RRGFMbFejA==",
+      "dev": true
+    },
     "@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
@@ -48560,6 +48529,14 @@
       "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
+      },
+      "dependencies": {
+        "sprintf-js": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+          "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+          "dev": true
+        }
       }
     },
     "arr-diff": {
@@ -49280,9 +49257,9 @@
       "dev": true
     },
     "bootstrap": {
-      "version": "5.1.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.1.3.tgz",
-      "integrity": "sha512-fcQztozJ8jToQWXxVuEyXWW+dSo8AiXWKwiSSrKWsRB/Qt+Ewwza+JWoLKiTuQLaEPhdNAJ7+Dosc9DOIqNy7Q==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.0.tgz",
+      "integrity": "sha512-qlnS9GL6YZE6Wnef46GxGv1UpGGzAwO0aPL1yOjzDIJpeApeMvqV24iL+pjr2kU4dduoBA9fINKWKgMToobx9A==",
       "requires": {}
     },
     "bootstrap-touchspin": {
@@ -51511,14 +51488,6 @@
       "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=",
       "dev": true
     },
-    "dom7": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/dom7/-/dom7-4.0.4.tgz",
-      "integrity": "sha512-DSSgBzQ4rJWQp1u6o+3FVwMNnT5bzQbMb+o31TjYYeRi05uAcpF8koxdfzeoe5ElzPmua7W7N28YJhF7iEKqIw==",
-      "requires": {
-        "ssr-window": "^4.0.0"
-      }
-    },
     "domain-browser": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz",
@@ -61238,17 +61207,6 @@
         }
       }
     },
-    "sass": {
-      "version": "1.43.4",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.43.4.tgz",
-      "integrity": "sha512-/ptG7KE9lxpGSYiXn7Ar+lKOv37xfWsZRtFYal2QHNigyVQDx685VFT/h7ejVr+R8w7H4tmUgtulsKl5YpveOg==",
-      "dev": true,
-      "optional": true,
-      "peer": true,
-      "requires": {
-        "chokidar": ">=3.0.0 <4.0.0"
-      }
-    },
     "sass-embedded": {
       "version": "1.55.0",
       "resolved": "https://registry.npmjs.org/sass-embedded/-/sass-embedded-1.55.0.tgz",
@@ -62010,15 +61968,9 @@
       }
     },
     "sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
-    },
-    "ssr-window": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-4.0.2.tgz",
-      "integrity": "sha512-ISv/Ch+ig7SOtw7G2+qkwfVASzazUnvlDTwypdLoPoySv+6MqlOV10VwPSE6EWkGjhW50lUmghPmpYZXMu/+AQ=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.1.2.tgz",
+      "integrity": "sha512-VE0SOVEHCk7Qc8ulkWw3ntAzXuqf7S2lvwQaDLRnUeIEaKNQJzV6BwmLKhOqT61aGhfUMrXeaBk+oDGCzvhcug=="
     },
     "ssri": {
       "version": "6.0.2",
@@ -62667,15 +62619,6 @@
         }
       }
     },
-    "swiper": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/swiper/-/swiper-7.4.1.tgz",
-      "integrity": "sha512-dhbL4tpYFvHug1J7GnKElfTi6EYhlZy/vNZRhHkWFyUsWZ1Vovipxj3la5gqllMogygXJMe3zvVv+f6eppvWiA==",
-      "requires": {
-        "dom7": "^4.0.2",
-        "ssr-window": "^4.0.2"
-      }
-    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
diff --git a/package.json b/package.json
index 5c72819e1..1fcbec492 100644
--- a/package.json
+++ b/package.json
@@ -23,9 +23,6 @@
   "author": "PrestaShop",
   "license": "AFL-3.0",
   "devDependencies": {
-    "@babel/core": "^7.17.5",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/preset-typescript": "^7.16.7",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
     "@storybook/addon-essentials": "^6.4.19",
@@ -35,11 +32,11 @@
     "@storybook/manager-webpack5": "^6.4.19",
     "@types/bootstrap": "^5.1.6",
     "@types/jest": "^27.4.0",
+    "@types/sprintf-js": "^1.1.2",
     "@types/wnumb": "^1.2.1",
     "@typescript-eslint/eslint-plugin": "^5.12.0",
     "@typescript-eslint/parser": "^5.12.0",
     "autoprefixer": "^10.4.11",
-    "babel-loader": "^8.2.3",
     "bootstrap-touchspin": "^4.3.0",
     "bourbon": "^7.0.0",
     "clean-webpack-plugin": "^4.0.0",
@@ -83,15 +80,15 @@
     "@fontsource/inter": "^4.5.0",
     "@popperjs/core": "^2.9.2",
     "@types/jquery": "^3.5.6",
-    "bootstrap": "5.1.3",
+    "bootstrap": "5.2.0",
     "events": "^3.3.0",
     "jquery": "^3.5.1",
     "jquery-touchswipe": "^1.6",
     "jquery.browser": "^0.1.0",
     "material-design-icons-iconfont": "^6.7.0",
     "nouislider": "^15.5.0",
-    "swiper": "^7.4.1",
     "vazirmatn": "^32.102.0",
+    "sprintf-js": "^1.1.2",
     "wnumb": "^1.2.0"
   }
 }
diff --git a/src/js/components/usePasswordPolicy.ts b/src/js/components/usePasswordPolicy.ts
new file mode 100644
index 000000000..194afd06d
--- /dev/null
+++ b/src/js/components/usePasswordPolicy.ts
@@ -0,0 +1,220 @@
+/**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ */
+
+import selectorsMap from '@constants/selectors-map';
+import {sprintf} from 'sprintf-js';
+import {Popover} from 'bootstrap';
+
+const {passwordPolicy: PasswordPolicyMap} = selectorsMap;
+
+export interface PasswordPolicyReturn {
+  element?: HTMLElement
+  error?: Error
+}
+
+const PASSWORD_POLICY_ERROR = 'The password policy elements are undefined.';
+
+const getPasswordStrengthFeedback = (
+  strength: number,
+) => {
+  switch (strength) {
+    case 0:
+      return {
+        color: 'bg-danger',
+      };
+
+    case 1:
+      return {
+        color: 'bg-danger',
+      };
+
+    case 2:
+      return {
+        color: 'bg-warning',
+      };
+
+    case 3:
+      return {
+        color: 'bg-success',
+      };
+
+    case 4:
+      return {
+        color: 'bg-success',
+      };
+
+    default:
+      throw new Error('Invalid password strength indicator.');
+  }
+};
+
+const watchPassword = async (
+  elementInput: HTMLInputElement,
+  feedbackContainer: HTMLElement,
+  hints: Record<string, string>,
+) => {
+  const {prestashop} = window;
+  const passwordValue = elementInput.value;
+  const elementIcon = feedbackContainer.querySelector(PasswordPolicyMap.requirementScoreIcon);
+  const result = await prestashop.checkPasswordScore(passwordValue);
+  const feedback = getPasswordStrengthFeedback(result.score);
+  const passwordLength = passwordValue.length;
+  const popoverContent:string[] = [];
+  const previousPopover = Popover.getInstance(elementInput);
+
+  if (previousPopover) {
+    previousPopover.dispose();
+  }
+
+  feedbackContainer.classList.toggle('d-none', passwordValue === '');
+
+  if (result.feedback.warning !== '') {
+    if (result.feedback.warning in hints) {
+      popoverContent.push(hints[result.feedback.warning]);
+    }
+  }
+
+  result.feedback.suggestions.forEach((suggestion: string) => {
+    if (suggestion in hints) {
+      popoverContent.push(hints[suggestion]);
+    }
+  });
+
+  const popover = new Popover(
+    elementInput,
+    {
+      html: true,
+      placement: 'top',
+      content: popoverContent.join('<br/>'),
+    },
+  );
+  popover.show();
+
+  const passwordLengthValid = passwordLength >= parseInt(<string>elementInput.dataset.minlength, 10)
+    && passwordLength <= parseInt(<string>elementInput.dataset.maxlength, 10);
+  const passwordScoreValid = parseInt(<string>elementInput.dataset.minscore, 10) <= result.score;
+
+  feedbackContainer.querySelector(PasswordPolicyMap.requirementLengthIcon)?.classList.toggle(
+    'text-success',
+    passwordLengthValid,
+  );
+
+  elementIcon?.classList.toggle(
+    'text-success',
+    passwordScoreValid,
+  );
+
+  // Change input border color depending on the validity
+  elementInput
+    .classList.remove('border-success', 'border-danger');
+  elementInput
+    .classList.add(passwordScoreValid && passwordLengthValid ? 'border-success' : 'border-danger');
+  elementInput
+    .classList.add('form-control', 'border');
+
+  const percentage = (result.score * 20) + 20;
+  const progressBar = feedbackContainer.querySelector<HTMLElement>(PasswordPolicyMap.progressBar);
+
+  // increase and decrease progress bar
+  if (progressBar) {
+    progressBar.style.width = `${percentage}%`;
+    progressBar.classList.remove('bg-success', 'bg-danger', 'bg-warning');
+    progressBar.classList.add(feedback.color);
+  }
+};
+
+// Not testable because it manipulates SVG elements, unsupported by JSDom
+const usePasswordPolicy = (selector: string): PasswordPolicyReturn => {
+  const element = document.querySelector<HTMLElement>(selector);
+  const elementInput = element?.querySelector<HTMLInputElement>('input');
+  const templateElement = document.createElement('div');
+  const feedbackTemplate = document.querySelector<HTMLTemplateElement>(PasswordPolicyMap.template);
+
+  if (feedbackTemplate && element && elementInput) {
+    templateElement.innerHTML = feedbackTemplate.innerHTML;
+    element.append(templateElement);
+    const feedbackContainer = element.querySelector<HTMLElement>(PasswordPolicyMap.container);
+
+    if (feedbackContainer) {
+      const hintElement = document.querySelector(PasswordPolicyMap.hint);
+
+      if (hintElement) {
+        const hints = ((content) => {
+          try {
+            return JSON.parse(content);
+          } catch (error) {
+            return false;
+          }
+        })(hintElement.innerHTML);
+
+        if (hints) {
+          // eslint-disable-next-line max-len
+          const passwordRequirementsLength = feedbackContainer.querySelector<HTMLElement>(PasswordPolicyMap.requirementLength);
+          // eslint-disable-next-line max-len
+          const passwordRequirementsScore = feedbackContainer.querySelector<HTMLElement>(PasswordPolicyMap.requirementScore);
+          const passwordLengthText = passwordRequirementsLength?.querySelector<HTMLElement>('span');
+          const passwordRequirementsText = passwordRequirementsScore?.querySelector<HTMLElement>('span');
+
+          if (passwordLengthText && passwordRequirementsLength && passwordRequirementsLength.dataset.translation) {
+            passwordLengthText.innerText = sprintf(
+              passwordRequirementsLength.dataset.translation,
+              elementInput.dataset.minlength,
+              elementInput.dataset.maxlength,
+            );
+          }
+
+          if (passwordRequirementsText && passwordRequirementsScore && passwordRequirementsScore.dataset.translation) {
+            passwordRequirementsText.innerText = sprintf(
+              passwordRequirementsScore.dataset.translation,
+              hints[<string>elementInput.dataset.minscore],
+            );
+          }
+
+          // eslint-disable-next-line max-len, @typescript-eslint/no-non-null-assertion
+          elementInput.addEventListener('keyup', () => watchPassword(elementInput, feedbackContainer, hints));
+          elementInput.addEventListener('blur', () => {
+            const previousPopover = Popover.getInstance(elementInput);
+
+            if (previousPopover) {
+              previousPopover.dispose();
+            }
+          });
+        }
+      }
+    }
+  }
+
+  if (element) {
+    return {
+      element,
+    };
+  }
+
+  return {
+    error: new Error(PASSWORD_POLICY_ERROR),
+  };
+};
+
+export default usePasswordPolicy;
diff --git a/src/js/constants/selectors-map.ts b/src/js/constants/selectors-map.ts
index c0b41e205..bbc505634 100644
--- a/src/js/constants/selectors-map.ts
+++ b/src/js/constants/selectors-map.ts
@@ -112,6 +112,18 @@ export const formValidation = {
   default: '.form-validation',
 };
 
+export const passwordPolicy = {
+  template: '#password-feedback',
+  hint: '.js-hint-password',
+  container: '.password-strength-feedback',
+  strengthText: '.password-strength-text',
+  requirementScore: '.password-requirements-score',
+  requirementLength: '.password-requirements-length',
+  requirementScoreIcon: '.password-requirements-score i',
+  requirementLengthIcon: '.password-requirements-length i',
+  progressBar: '.progress-bar',
+};
+
 const selectorsMap = {
   qtyInput,
   alert: {
@@ -158,6 +170,7 @@ const selectorsMap = {
   visiblePassword,
   desktopMenu,
   formValidation,
+  passwordPolicy,
 };
 
 export default selectorsMap;
diff --git a/src/js/theme.ts b/src/js/theme.ts
index 666b8fc15..ed6261a75 100644
--- a/src/js/theme.ts
+++ b/src/js/theme.ts
@@ -18,6 +18,7 @@ import initCurrencySelector from './modules/ps_currencyselector';
 import initVisiblePassword from './visible-password';
 import useToast from './components/useToast';
 import useAlert from './components/useAlert';
+import usePasswordPolicy from './components/usePasswordPolicy';
 import useProgressRing from './components/useProgressRing';
 import useQuantityInput from './components/useQuantityInput';
 import './modules/blockcart';
@@ -30,6 +31,12 @@ initEmitter();
 $(() => {
   const {prestashop, Theme: {events}} = window;
 
+  // @TODO: Fix this on core.js side inside a major version of PrestaShop instead of minor
+  // For reference: https://github.com/PrestaShop/hummingbird/pull/418#discussion_r1061938669
+  document.querySelectorAll<HTMLInputElement>('[name="token"]').forEach((el) => {
+    el.value = prestashop.static_token;
+  });
+
   initProductBehavior();
   initQuickview();
   initCheckout();
@@ -44,6 +51,7 @@ $(() => {
   initVisiblePassword();
   initDesktopMenu();
   initFormValidation();
+  usePasswordPolicy('.field-password-policy');
 
   prestashop.on(events.responsiveUpdate, () => {
     initSearchbar();
diff --git a/src/scss/abstract/mixins/_search-box.scss b/src/scss/abstract/mixins/_search-box.scss
index 194c6bacb..3aad1f8ee 100644
--- a/src/scss/abstract/mixins/_search-box.scss
+++ b/src/scss/abstract/mixins/_search-box.scss
@@ -5,17 +5,17 @@
     input[type="text"] {
       min-width: 255px;
       padding: 10px;
-      color: $gray-600;
+      color: var(--bs-gray-600);
       border: none;
       border: $input-btn-border-width solid $input-border-color;
 
       &:focus {
-        color: $gray-900;
-        background: $white;
-        outline: 3px $primary solid;
+        color: var(--bs-gray-900);
+        background: var(--bs-white);
+        outline: 3px var(--bs-primary) solid;
 
         + button .search {
-          color: $primary;
+          color: var(--bs-primary);
         }
       }
     }
@@ -24,12 +24,12 @@
       position: absolute;
       right: 0.125rem;
       bottom: 0.3125rem;
-      color: $gray-600;
+      color: var(--bs-gray-600);
       background: none;
       border: none;
 
       .search:hover {
-        color: $primary;
+        color: var(--bs-primary);
       }
     }
   }
diff --git a/src/scss/abstract/variables/_index.scss b/src/scss/abstract/variables/_index.scss
index 60a82f934..2a19bd91a 100644
--- a/src/scss/abstract/variables/_index.scss
+++ b/src/scss/abstract/variables/_index.scss
@@ -4,6 +4,7 @@
 
 @import "~bootstrap/scss/variables";
 @import "~bootstrap/scss/mixins";
+@import "~bootstrap/scss/maps";
 @import "~bootstrap/scss/utilities";
 
 @import "prestashop";
diff --git a/src/scss/abstract/variables/bootstrap/_nav.scss b/src/scss/abstract/variables/bootstrap/_nav.scss
index c2338cb79..9d5e69f75 100644
--- a/src/scss/abstract/variables/bootstrap/_nav.scss
+++ b/src/scss/abstract/variables/bootstrap/_nav.scss
@@ -1,9 +1,9 @@
 $nav-link-font-size:                1rem;
 $nav-link-font-weight:              600;
-$nav-link-color:                    $gray-800;
-$nav-link-hover-color:              $primary;
-$nav-tabs-link-active-color: $primary;
+$nav-link-color:                    var(--bs-gray-800);
+$nav-link-hover-color:              var(--bs-primary);
+$nav-tabs-link-active-color: var(--bs-primary);
 $nav-tabs-border-width: 2px;
 $nav-tabs-border-color: transparent;
 $nav-tabs-link-hover-border-color:  transparent;
-$nav-tabs-link-active-border-color: transparent transparent $primary;
+$nav-tabs-link-active-border-color: transparent transparent var(--bs-primary);
diff --git a/src/scss/abstract/variables/prestashop/_carousel.scss b/src/scss/abstract/variables/prestashop/_carousel.scss
index 4031df436..b94650c08 100644
--- a/src/scss/abstract/variables/prestashop/_carousel.scss
+++ b/src/scss/abstract/variables/prestashop/_carousel.scss
@@ -1,12 +1,12 @@
 $carousel-control-height: 4rem;
-$slider-control-bg: $white;
+$slider-control-bg: var(--bs-white);
 $slider-control-radius: 50%;
 
 $slider-title-weight: 800;
 $slider-title-size: 3rem;
 $slider-subtitle-weight: 700;
 $slider-subtitle-size: 1.25rem;
-$slider-text-color: $gray-800;
+$slider-text-color: var(--bs-gray-800);
 $slider-text-spacing: 1rem;
 
 $slider-description-size: 1rem;
diff --git a/src/scss/abstract/variables/prestashop/_colors.scss b/src/scss/abstract/variables/prestashop/_colors.scss
index 987011d00..7d8944414 100644
--- a/src/scss/abstract/variables/prestashop/_colors.scss
+++ b/src/scss/abstract/variables/prestashop/_colors.scss
@@ -1,11 +1,11 @@
 // General colors
-$default-icon-color: #6c868e;
+$default-icon-color: var(--bs-gray-700);
 
 // Footer
 $footer-background-color: #16181c;
-$footer-heading-color: $white;
-$footer-text-color: $gray-300;
+$footer-heading-color: var(--bs-white);
+$footer-text-color: var(--bs-gray-300);
 
 // Emailsubscriptions
-$email-input-color: $gray-300;
-$email-input-border-color: $gray-300;
+$email-input-color: var(--bs-gray-300);
+$email-input-border-color: var(--bs-gray-300);
diff --git a/src/scss/abstract/variables/prestashop/_header.scss b/src/scss/abstract/variables/prestashop/_header.scss
index 66e131446..9fd994b5d 100644
--- a/src/scss/abstract/variables/prestashop/_header.scss
+++ b/src/scss/abstract/variables/prestashop/_header.scss
@@ -1,6 +1,11 @@
 $header-bg: #fff;
 $header-top-bg: $header-bg;
-$header-top-border-bottom: 1px solid $gray-200;
+$header-top-border-bottom: 1px solid var(--bs-gray-200);
 $header-bottom-border-bottom: $header-top-border-bottom;
-$header-color: $gray-800;
+$header-color: var(--bs-gray-800);
 $header-top-color: $header-color;
+
+$header-block-spacing-x: 0.25rem;
+$header-block-spacing-y: 0.75rem;
+$header-block-spacing-lg-x: $btn-padding-x;
+$header-block-spacing-lg-y: $btn-padding-y;
diff --git a/src/scss/core/components/_breadcrumb.scss b/src/scss/core/components/_breadcrumb.scss
index 995849397..b8d7afbb6 100644
--- a/src/scss/core/components/_breadcrumb.scss
+++ b/src/scss/core/components/_breadcrumb.scss
@@ -5,7 +5,7 @@ $component-name: breadcrumb;
   font-size: 0.875rem;
 
   a {
-    color: $gray-800;
+    color: var(--bs-gray-800);
   }
 
   &[data-depth="1"] {
@@ -14,7 +14,7 @@ $component-name: breadcrumb;
 
   &__wrapper {
     margin-bottom: 2rem;
-    background: #f6f6f6;
+    background: var(--bs-gray-100);
 
     @include media-breakpoint-down(md) {
       margin-bottom: 1rem;
diff --git a/src/scss/core/components/_buttons.scss b/src/scss/core/components/_buttons.scss
index 7e62378cb..0f697d404 100644
--- a/src/scss/core/components/_buttons.scss
+++ b/src/scss/core/components/_buttons.scss
@@ -35,7 +35,7 @@
     outline: 0;
 
     .expand-more {
-      color: $primary;
+      color: var(--bs-primary);
     }
   }
 }
diff --git a/src/scss/core/components/_checkout-steps.scss b/src/scss/core/components/_checkout-steps.scss
index 774583137..b3f12acce 100644
--- a/src/scss/core/components/_checkout-steps.scss
+++ b/src/scss/core/components/_checkout-steps.scss
@@ -13,8 +13,8 @@ $component-name: checkout__steps;
     width: 1.5rem;
     height: 1.5rem;
     margin: auto;
-    color: $white;
-    background: $gray-300;
+    color: var(--bs-white);
+    background: var(--bs-gray-300);
     border-radius: 100%;
   }
 
@@ -29,7 +29,7 @@ $component-name: checkout__steps;
       width: 50%;
       height: 2px;
       content: "";
-      background: $gray-300;
+      background: var(--bs-gray-300);
     }
 
     &::before {
@@ -54,38 +54,38 @@ $component-name: checkout__steps;
   }
 
   &__text {
-    color: $gray-300;
+    color: var(--bs-gray-300);
   }
 
   &--current {
     .#{$component-name}__number {
-      background: $gray-900;
+      background: var(--bs-gray-900);
     }
 
     .#{$component-name}__text {
-      color: $gray-900;
+      color: var(--bs-gray-900);
     }
 
     &::before {
-      background: $success;
+      background: var(--bs-success);
     }
   }
 
   &--success {
     .#{$component-name}__number {
-      background: $success;
+      background: var(--bs-success);
     }
 
     .#{$component-name}__text {
-      color: $success;
+      color: var(--bs-success);
     }
 
     &::before {
-      background: $success;
+      background: var(--bs-success);
     }
 
     &::after {
-      background: $success;
+      background: var(--bs-success);
     }
   }
 
diff --git a/src/scss/core/components/_mobile-menu.scss b/src/scss/core/components/_mobile-menu.scss
index 81f7511ee..7d52633bf 100644
--- a/src/scss/core/components/_mobile-menu.scss
+++ b/src/scss/core/components/_mobile-menu.scss
@@ -30,7 +30,7 @@ $component-name: main-menu;
 
       li:not(.h5),
       a {
-        color: $gray-700;
+        color: var(--bs-gray-700);
       }
 
       a {
@@ -72,7 +72,7 @@ $component-name: main-menu;
   &__title {
     padding: 0 0.5rem;
     font-size: 1.25rem;
-    color: $gray-800;
+    color: var(--bs-gray-800);
   }
 
   &__offcanvas {
@@ -95,19 +95,6 @@ $component-name: main-menu;
     margin-bottom: 0;
   }
 
-  &__toggler {
-    display: flex;
-    padding: 1rem;
-
-    @include media-breakpoint-down(md) {
-      padding: 0.75rem;
-    }
-
-    i {
-      color: $gray-700;
-    }
-  }
-
   &__back-button .btn {
     display: flex;
     align-items: center;
diff --git a/src/scss/core/components/_progress-ring.scss b/src/scss/core/components/_progress-ring.scss
index ff762844e..cfdbbc7df 100644
--- a/src/scss/core/components/_progress-ring.scss
+++ b/src/scss/core/components/_progress-ring.scss
@@ -6,7 +6,7 @@
   }
 
   &__background-circle {
-    stroke: $gray-200;
+    stroke: var(--bs-gray-200);
     transform: rotate(-90deg);
     transform-origin: 50% 50%;
   }
diff --git a/src/scss/core/components/_qty-input.scss b/src/scss/core/components/_qty-input.scss
index 0f8002de0..45f07c510 100644
--- a/src/scss/core/components/_qty-input.scss
+++ b/src/scss/core/components/_qty-input.scss
@@ -13,13 +13,13 @@
 
     &.increment {
       .confirmation {
-        color: $success;
+        color: var(--bs-success);
       }
     }
 
     &.decrement {
       .confirmation {
-        color: $danger;
+        color: var(--bs-danger);
       }
     }
 
diff --git a/src/scss/core/components/_rich-text.scss b/src/scss/core/components/_rich-text.scss
index 89c0f3469..b9cbd8db9 100644
--- a/src/scss/core/components/_rich-text.scss
+++ b/src/scss/core/components/_rich-text.scss
@@ -12,7 +12,7 @@
   h5,
   h6 {
     font-weight: 700;
-    color: $gray-800;
+    color: var(--bs-gray-800);
   }
 
   h1 {
diff --git a/src/scss/core/components/_search.scss b/src/scss/core/components/_search.scss
index b4c51a9cd..75d1fce5f 100644
--- a/src/scss/core/components/_search.scss
+++ b/src/scss/core/components/_search.scss
@@ -4,19 +4,25 @@ $component-name: search;
   margin: 0.5rem 0;
 
   &__product {
-    margin: 0.5rem 0;
+    margin: 0.25rem 0;
   }
 
   &__link {
     display: flex;
     align-items: center;
+    padding: 0.25rem 0.5rem;
+    border-radius: $border-radius;
+
+    &:hover {
+      background: var(--bs-gray-100);
+    }
   }
 
   &__name {
     margin-bottom: 0;
     margin-left: 1rem;
     font-size: 1rem;
-    color: $gray-800;
+    color: var(--bs-gray-800);
   }
 
   &__image {
@@ -44,20 +50,12 @@ $component-name: search;
         width: auto;
         height: auto;
         margin: 0;
-        color: $gray-700;
+        color: var(--bs-gray-700);
         background: none;
       }
     }
   }
 
-  &__mobile__toggler {
-    color: $gray-700;
-
-    @include media-breakpoint-down(md) {
-      padding: 0.5rem 0.375rem;
-    }
-  }
-
   &__container {
     width: calc(100% - 0.5rem);
   }
@@ -77,9 +75,9 @@ $component-name: search;
       width: 100vw;
       max-width: 30rem;
       overflow: hidden;
-      background: $white;
+      background: var(--bs-white);
       border: 1px solid $input-border-color;
-      border-radius: $border-radius;
+      border-radius: var(--bs-border-radius-sm);
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
       @include media-breakpoint-down(md) {
@@ -93,8 +91,7 @@ $component-name: search;
 
     &__results {
       max-height: 20rem;
-      padding: 0.5rem 1rem;
-      padding-right: 1.5rem;
+      padding: 0.5rem 1.5rem 0.5rem 0.5rem;
       margin: 0;
       overflow-y: scroll;
     }
@@ -116,7 +113,7 @@ $component-name: search;
       height: 2.5rem;
       padding-right: 3.5rem;
       padding-left: 1.5rem;
-      background: $gray-100;
+      background: var(--bs-gray-100);
       border-radius: 100rem;
 
       &:focus {
@@ -131,12 +128,12 @@ $component-name: search;
 
     .search {
       right: 1.5rem;
-      color: $gray-700;
+      color: var(--bs-gray-700);
     }
 
     .clear {
       right: 3.5rem;
-      color: $gray-700;
+      color: var(--bs-gray-700);
     }
   }
 }
diff --git a/src/scss/core/components/_slider.scss b/src/scss/core/components/_slider.scss
index 2f6f1bcb7..edcedd6c4 100644
--- a/src/scss/core/components/_slider.scss
+++ b/src/scss/core/components/_slider.scss
@@ -3,7 +3,7 @@ $component-name: carousel;
 .#{$component-name} {
   .caption-description {
     p {
-      color: $white;
+      color: var(--bs-white);
     }
   }
 }
diff --git a/src/scss/core/components/product/_product-flags.scss b/src/scss/core/components/product/_product-flags.scss
index 400cfdba3..f13f30764 100644
--- a/src/scss/core/components/product/_product-flags.scss
+++ b/src/scss/core/components/product/_product-flags.scss
@@ -11,7 +11,7 @@
 
 .badge {
   margin: 0.25rem;
-  background-color: $primary;
+  background-color: var(--bs-primary);
 
   @include media-breakpoint-down(md) {
     padding: 0.25rem;
@@ -19,8 +19,8 @@
   }
 
   &.discount {
-    color: $primary;
-    background-color: $white;
-    border: 1px solid $primary;
+    color: var(--bs-primary);
+    background-color: var(--bs-white);
+    border: 1px solid var(--bs-primary);
   }
 }
diff --git a/src/scss/core/components/product/_product-miniature.scss b/src/scss/core/components/product/_product-miniature.scss
index 3f7d22fa1..53d2140a3 100644
--- a/src/scss/core/components/product/_product-miniature.scss
+++ b/src/scss/core/components/product/_product-miniature.scss
@@ -13,7 +13,7 @@ $component-name: product-miniature;
     &__top,
     &__bottom {
       padding: 0.25rem 0.5rem;
-      background-color: $white;
+      background-color: var(--bs-white);
     }
 
     &__top {
diff --git a/src/scss/core/layout/_footer.scss b/src/scss/core/layout/_footer.scss
index 86b2bf1d4..3ae907e95 100644
--- a/src/scss/core/layout/_footer.scss
+++ b/src/scss/core/layout/_footer.scss
@@ -53,7 +53,7 @@ $component-name: footer;
       justify-content: space-between;
 
       i {
-        color: $white;
+        color: var(--bs-white);
         transition: transform 0.25s ease-in-out;
       }
 
diff --git a/src/scss/core/layout/_header-bottom.scss b/src/scss/core/layout/_header-bottom.scss
new file mode 100644
index 000000000..79e647e4a
--- /dev/null
+++ b/src/scss/core/layout/_header-bottom.scss
@@ -0,0 +1,9 @@
+$component-name: header-bottom;
+
+.#{$component-name} {
+  &__row {
+    @include media-breakpoint-up(md) {
+      min-height: 4rem;
+    }
+  }
+}
diff --git a/src/scss/core/layout/_header-top.scss b/src/scss/core/layout/_header-top.scss
new file mode 100644
index 000000000..cae761d08
--- /dev/null
+++ b/src/scss/core/layout/_header-top.scss
@@ -0,0 +1,42 @@
+$component-name: header-top;
+
+.#{$component-name} {
+  background-color: var(--header-top-bg);
+
+  a {
+    color: var(--header-top-color);
+  }
+
+  &__right {
+    flex-wrap: nowrap;
+    justify-content: flex-end;
+  }
+
+  &__right,
+  &__left {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+  }
+
+  .form-select {
+    padding-right: 1.5rem;
+    background-color: var(--header-top-bg);
+    background-position: right 0.12rem center;
+    border: none;
+
+    option {
+      text-align: right;
+    }
+  }
+
+  &-desktop {
+    padding: 0.25rem 0;
+  }
+
+  @include media-breakpoint-down(sm) {
+    .container {
+      padding: 0;
+    }
+  }
+}
diff --git a/src/scss/core/layout/_header.scss b/src/scss/core/layout/_header.scss
index 36a1f9508..006b7b2e4 100644
--- a/src/scss/core/layout/_header.scss
+++ b/src/scss/core/layout/_header.scss
@@ -13,83 +13,15 @@ $component-name: header;
   max-width: 100vw;
   background-color: var(--header-bg);
 
-  a:not(.dropdown-item) {
+  a:not(.dropdown-item):not(.btn) {
     color: var(--header-color);
-  }
-
-  &__top {
-    background-color: var(--header-top-bg);
-
-    a {
-      color: var(--header-top-color);
-    }
-
-    &__right {
-      @extend .inline-items;
-      justify-content: flex-end;
-    }
-
-    &__right,
-    &__left {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-    }
-
-    .form-select {
-      padding-right: 1.5rem;
-      background-color: var(--header-top-bg);
-      background-position: right 0.12rem center;
-      border: none;
 
-      option {
-        text-align: right;
-      }
-    }
-
-    &-desktop {
-      padding: 0.25rem 0;
-    }
-
-    &-mobile {
-      display: flex;
-      flex-wrap: nowrap;
-      align-items: center;
-      justify-content: space-between;
-
-      .logo-mobile {
-        flex-shrink: 1;
-        margin-right: auto;
-      }
-    }
-
-    @include media-breakpoint-down(sm) {
-      .container {
-        padding: 0;
-      }
-    }
-  }
-
-  &__bottom {
-    &__container {
-      display: flex;
-      flex-wrap: nowrap;
-      align-items: center;
-      justify-content: space-between;
-
-      @include media-breakpoint-up(md) {
-        min-height: 4rem;
-      }
-
-      .logo {
-        h1 {
-          margin-bottom: 0;
-        }
-
-        a {
-          display: block;
-        }
+    &:hover {
+      &,
+      i {
+        color: var(--bs-primary);
       }
     }
   }
 }
+
diff --git a/src/scss/core/layout/_index.scss b/src/scss/core/layout/_index.scss
index 2c8d5fe6f..c541fdd31 100644
--- a/src/scss/core/layout/_index.scss
+++ b/src/scss/core/layout/_index.scss
@@ -1,2 +1,4 @@
 @import "header";
+@import "header-top";
+@import "header-bottom";
 @import "footer";
diff --git a/src/scss/core/modules/_customersignin.scss b/src/scss/core/modules/_customersignin.scss
index b3c6355a1..92e5f1d6d 100644
--- a/src/scss/core/modules/_customersignin.scss
+++ b/src/scss/core/modules/_customersignin.scss
@@ -1,39 +1,16 @@
 .user-info {
-  @include media-breakpoint-down(md) {
-    &__name {
-      display: none;
-    }
-  }
-
   @include media-breakpoint-down(md) {
     .dropdown-toggle {
-      display: flex;
-      padding: 0.5rem;
-
-      i {
-        margin-right: 0;
-      }
-
       &::after {
         display: none;
       }
     }
   }
 
-  a {
-    display: flex;
-    gap: 0.25rem;
-    align-items: center;
-
-    @include media-breakpoint-down(md) {
-      padding: 0.5rem 0.375rem;
-    }
-  }
-
   button {
     display: flex;
     align-items: center;
-    color: $gray-800;
+    color: var(--bs-gray-800);
     text-decoration: none;
 
     @include media-breakpoint-down(md) {
diff --git a/src/scss/core/modules/_shoppingcart.scss b/src/scss/core/modules/_shoppingcart.scss
index 54dc70c40..b080120cd 100644
--- a/src/scss/core/modules/_shoppingcart.scss
+++ b/src/scss/core/modules/_shoppingcart.scss
@@ -1,97 +1,6 @@
 $component-name: blockcart;
 
 .#{$component-name} {
-  position: relative;
-  color: var(--header-top-color);
-
-  &,
-  a {
-    display: flex;
-    flex-wrap: nowrap;
-    align-items: center;
-    padding: $btn-padding-y $btn-padding-x;
-    padding-right: 0;
-    border-radius: $btn-border-radius;
-
-    @include media-breakpoint-up(md) {
-      i {
-        margin-right: 0.25rem;
-      }
-    }
-
-  }
-
-  &.active {
-    padding: 0;
-
-    a {
-      &:focus {
-        outline: 0;
-        box-shadow: $btn-focus-box-shadow;
-      }
-    }
-  }
-
-  i {
-    color: var(--header-top-color);
-  }
-
-  /* When active, on desktom everything is primary */
-
-  /* On mobile, the icon stays the same */
-  @include media-breakpoint-up(md) {
-    &.active {
-      &,
-      i,
-      a {
-        color: $primary;
-      }
-    }
-  }
-
-  a {
-    @include media-breakpoint-down(md) {
-      padding: 0.5rem 0.375rem;
-    }
-  }
-
-  .cart-products-count {
-    display: flex;
-    align-items: center;
-    padding: 0.3rem 0.6rem;
-    margin-left: 0.4rem;
-    font-weight: 600;
-    line-height: 1;
-    background: $gray-100;
-    border-radius: 50rem;
-  }
-
-  @include media-breakpoint-down(md) {
-    .cart-products-count {
-      position: absolute;
-      top: 0;
-      right: 0;
-      padding: 0.3rem 0.4rem;
-      font-size: 0.6rem;
-      color: $white;
-      background: $primary;
-      border-radius: 50rem;
-    }
-  }
-
-  &:not(.active) {
-    @include media-breakpoint-down(md) {
-      padding: 0.5rem 0.375rem;
-    }
-
-    @include media-breakpoint-down(md) {
-      .cart-products-count {
-        color: $gray-800;
-        background: $gray-100;
-      }
-    }
-  }
-
   &-modal {
     .modal-dialog {
       @include media-breakpoint-up(sm) {
diff --git a/src/scss/core/modules/nouislider/_vars.scss b/src/scss/core/modules/nouislider/_vars.scss
index 2b193f1ed..d9ae56411 100644
--- a/src/scss/core/modules/nouislider/_vars.scss
+++ b/src/scss/core/modules/nouislider/_vars.scss
@@ -1,19 +1,19 @@
 // Slider target
 $nouislider-target-border-width: 0;
-$nouislider-target-border-color: $gray-300;
+$nouislider-target-border-color: var(--bs-gray-300);
 $nouislider-target-border-radius: $border-radius;
-$nouislider-target-background-color: $gray-200;
+$nouislider-target-background-color: var(--bs-gray-200);
 $nouislider-target-shadow: null;
 
 // Slider handle basic styles
 $nouislider-handle-border-radius: 50%;
-$nouislider-handle-border-color: $gray-800;
+$nouislider-handle-border-color: var(--bs-gray-800);
 $nouislider-handle-border-width: 1px;
-$nouislider-handle-background-color: $white;
+$nouislider-handle-background-color: var(--bs-white);
 $nouislider-handle-shadow: null;
 // Slider handle active styles
 $nouislider-handle-active-shadow: null;
-$nouislider-handle-active-background-color: $primary;
+$nouislider-handle-active-background-color: var(--bs-primary);
 
 // Slider bar horizontal
 $nouislider-horizontal-height: 4px;
@@ -26,9 +26,9 @@ $nouislider-vertical-handler-width: 24px;
 $nouislider-vertical-handler-height: 24px;
 
 // Slider connect
-$nouislider-connects-background-color: $gray-700;
+$nouislider-connects-background-color: var(--bs-gray-700);
 $nouislider-connects-border-radius: $border-radius;
-$nouislider-connects-disabled-background-color: $gray-200;
+$nouislider-connects-disabled-background-color: var(--bs-gray-200);
 
 // Slider pips
 $nouislider-pips-color: #999;
diff --git a/src/scss/custom/components/_address.scss b/src/scss/custom/components/_address.scss
index 3cb6d7f94..6c4f7272a 100644
--- a/src/scss/custom/components/_address.scss
+++ b/src/scss/custom/components/_address.scss
@@ -9,14 +9,14 @@ $component-name: address;
     font-style: normal;
     font-weight: 500;
     line-height: 1.5rem;
-    color: $gray-800;
+    color: var(--bs-gray-800);
   }
 
   &__alias {
     margin-bottom: 1rem;
     font-weight: 600;
     line-height: 1.5rem;
-    color: $gray-800;
+    color: var(--bs-gray-800);
   }
 
   .card-footer {
@@ -28,11 +28,11 @@ $component-name: address;
   &__delete {
     display: inline-block;
     padding: 1rem 0.5rem;
-    color: $gray-800;
+    color: var(--bs-gray-800);
     text-decoration: underline;
   }
 
   &__delete {
-    color: $danger;
+    color: var(--bs-danger);
   }
 }
diff --git a/src/scss/custom/components/_brand.scss b/src/scss/custom/components/_brand.scss
index 75bb23123..5c704aa65 100644
--- a/src/scss/custom/components/_brand.scss
+++ b/src/scss/custom/components/_brand.scss
@@ -5,7 +5,7 @@ $component-name: brand;
 
   & &__link {
     font-size: 1rem;
-    color: $gray-800;
+    color: var(--bs-gray-800);
   }
 
   p {
diff --git a/src/scss/custom/components/_cart.scss b/src/scss/custom/components/_cart.scss
index 3ef92f4e1..6a2749bb9 100644
--- a/src/scss/custom/components/_cart.scss
+++ b/src/scss/custom/components/_cart.scss
@@ -23,7 +23,7 @@ $component-name: cart;
     &__container {
       .card-header,
       .card-footer {
-        background-color: $white;
+        background-color: var(--bs-white);
 
         i {
           color: inherit;
@@ -33,7 +33,7 @@ $component-name: cart;
 
     &__products {
       margin-bottom: 0.75rem;
-      border-bottom: 1px solid $gray-200;
+      border-bottom: 1px solid var(--bs-gray-200);
 
       > p {
         padding: 1rem 0;
@@ -41,7 +41,7 @@ $component-name: cart;
 
         &:first-of-type {
           padding-top: 0.5rem;
-          border-bottom: 1px solid $gray-200;
+          border-bottom: 1px solid var(--bs-gray-200);
         }
       }
 
@@ -55,7 +55,7 @@ $component-name: cart;
           .value {
             font-size: 1rem;
             font-weight: 400;
-            color: $gray-800;
+            color: var(--bs-gray-800);
           }
 
           .product-line-info {
@@ -65,7 +65,7 @@ $component-name: cart;
           .product-name {
             a {
               font-weight: 600;
-              color: $gray-800;
+              color: var(--bs-gray-800);
 
               &:hover {
                 opacity: 0.6;
@@ -80,7 +80,7 @@ $component-name: cart;
       font-weight: 500;
 
       i {
-        color: $primary;
+        color: var(--bs-primary);
       }
 
       span {
@@ -95,7 +95,7 @@ $component-name: cart;
     &__totals {
       padding-top: 1rem;
       margin-top: 0.75rem;
-      border-top: 1px solid $gray-200;
+      border-top: 1px solid var(--bs-gray-200);
 
       span {
         font-weight: 700;
@@ -113,7 +113,7 @@ $component-name: cart;
         font-size: 1rem;
 
         &.value {
-          color: $gray-800;
+          color: var(--bs-gray-800);
         }
       }
     }
@@ -136,7 +136,7 @@ $component-name: cart;
         align-self: start;
         width: 100%;
         font-weight: 600;
-        color: $gray-800;
+        color: var(--bs-gray-800);
       }
 
       &__image {
@@ -157,7 +157,7 @@ $component-name: cart;
       }
 
       &__regular {
-        color: $gray-600;
+        color: var(--bs-gray-600);
         text-decoration: line-through;
       }
 
@@ -178,7 +178,7 @@ $component-name: cart;
             width: 100%;
             height: 1px;
             content: "";
-            background: $primary;
+            background: var(--bs-primary);
             transition: 0.25s ease-out;
           }
 
diff --git a/src/scss/custom/components/_index.scss b/src/scss/custom/components/_index.scss
index d3d5a392f..1eda40b53 100644
--- a/src/scss/custom/components/_index.scss
+++ b/src/scss/custom/components/_index.scss
@@ -15,3 +15,6 @@
 @import "address";
 @import "table-wrapper";
 @import "product";
+@import "search-filters-modules";
+@import "mailalerts-account";
+@import "misc";
diff --git a/src/scss/custom/components/_language-selector.scss b/src/scss/custom/components/_language-selector.scss
index 65d854fed..66b83148a 100644
--- a/src/scss/custom/components/_language-selector.scss
+++ b/src/scss/custom/components/_language-selector.scss
@@ -1,20 +1,7 @@
 $component-name: language-selector;
 
-.#{$component-name} {
-  display: flex;
-  align-items: center;
-
-  > span {
-    margin-right: 0.5rem;
-  }
-
-  i.expand-more {
-    color: $default-icon-color;
-  }
-
-  @include media-breakpoint-down(md) {
-    &__wrapper {
-      margin-bottom: 1rem;
-    }
+.#{$component-name}__wrapper {
+  select {
+    cursor: pointer;
   }
 }
diff --git a/src/scss/custom/components/_order-confirmation.scss b/src/scss/custom/components/_order-confirmation.scss
index fb70745c6..271ecd10f 100644
--- a/src/scss/custom/components/_order-confirmation.scss
+++ b/src/scss/custom/components/_order-confirmation.scss
@@ -25,7 +25,7 @@ $component-name: order-confirmation;
     .item__prices {
       div {
         font-weight: 500;
-        color: $gray-800;
+        color: var(--bs-gray-800);
       }
     }
 
@@ -36,7 +36,7 @@ $component-name: order-confirmation;
     .item__title {
       margin-bottom: 0;
       font-weight: 600;
-      color: $gray-800;
+      color: var(--bs-gray-800);
     }
 
     .item__image {
diff --git a/src/scss/custom/components/_section-title.scss b/src/scss/custom/components/_section-title.scss
index 8e3dabd28..d1b84b535 100644
--- a/src/scss/custom/components/_section-title.scss
+++ b/src/scss/custom/components/_section-title.scss
@@ -4,5 +4,5 @@ $component-name: section-title;
   margin: 2.5rem 0;
   font-size: 1.5rem;
   font-weight: 600;
-  color: $gray-800;
+  color: var(--bs-gray-800);
 }
diff --git a/src/scss/custom/components/_sitemap.scss b/src/scss/custom/components/_sitemap.scss
index 0a786cc3a..7fe2a31f6 100644
--- a/src/scss/custom/components/_sitemap.scss
+++ b/src/scss/custom/components/_sitemap.scss
@@ -4,7 +4,7 @@ $component-name: sitemap;
   ul a {
     display: block;
     padding: 0.2rem 0;
-    color: $gray-800;
+    color: var(--bs-gray-800);
   }
 
   h2 {
@@ -15,7 +15,7 @@ $component-name: sitemap;
     margin-left: 1rem;
 
     a {
-      color: $gray-700;
+      color: var(--bs-gray-700);
     }
   }
 }
diff --git a/src/scss/custom/components/_slider.scss b/src/scss/custom/components/_slider.scss
index ef68758c2..3b2524d73 100644
--- a/src/scss/custom/components/_slider.scss
+++ b/src/scss/custom/components/_slider.scss
@@ -41,12 +41,12 @@ $component-name: carousel;
     button {
       width: 10px;
       height: 10px;
-      background-color: $white;
+      background-color: var(--bs-white);
       border: 0;
       border-radius: 1000rem;
 
       &.active {
-        background-color: $primary;
+        background-color: var(--bs-primary);
       }
     }
   }
diff --git a/src/scss/custom/components/_store.scss b/src/scss/custom/components/_store.scss
index 287f6d17f..cc9f02ac1 100644
--- a/src/scss/custom/components/_store.scss
+++ b/src/scss/custom/components/_store.scss
@@ -28,7 +28,7 @@ $component-name: store;
 
   img {
     margin-bottom: 1.5rem;
-    border-radius: $border-radius;
+    border-radius: var(--bs-border-radius-sm);
   }
 
   address {
diff --git a/src/scss/custom/components/_table-wrapper.scss b/src/scss/custom/components/_table-wrapper.scss
index cebb3eefe..ec3a88875 100644
--- a/src/scss/custom/components/_table-wrapper.scss
+++ b/src/scss/custom/components/_table-wrapper.scss
@@ -4,7 +4,7 @@
   border-radius: 0.5rem;
 
   table {
-    border-color: $gray-200;
+    border-color: var(--bs-gray-200);
 
     > :not(:first-child) {
       border-top: none;
@@ -14,7 +14,7 @@
       th,
       td {
         font-weight: 400;
-        color: $body-color;
+        color: var(--bs-body-color);
         vertical-align: middle;
         box-shadow: none;
       }
diff --git a/src/scss/custom/components/category/_header.scss b/src/scss/custom/components/category/_header.scss
index cca463b8d..7af2f6153 100644
--- a/src/scss/custom/components/category/_header.scss
+++ b/src/scss/custom/components/category/_header.scss
@@ -7,6 +7,6 @@ $component-name: block-category;
 
   #category-description {
     font-size: 1rem;
-    color: $gray-800;
+    color: var(--bs-gray-800);
   }
 }
diff --git a/src/scss/custom/components/category/_pagination.scss b/src/scss/custom/components/category/_pagination.scss
index da28b8afa..d0769ce57 100644
--- a/src/scss/custom/components/category/_pagination.scss
+++ b/src/scss/custom/components/category/_pagination.scss
@@ -5,6 +5,6 @@ $component-name: pagination;
 
   &-number {
     font-size: 1rem;
-    color: $gray-600;
+    color: var(--bs-gray-600);
   }
 }
diff --git a/src/scss/custom/components/category/_subcategories.scss b/src/scss/custom/components/category/_subcategories.scss
index 702739353..42536811b 100644
--- a/src/scss/custom/components/category/_subcategories.scss
+++ b/src/scss/custom/components/category/_subcategories.scss
@@ -22,7 +22,7 @@ $component-name: subcategories;
     margin-bottom: 0;
     margin-left: 1rem;
     font-size: 1rem;
-    color: $gray-800;
+    color: var(--bs-gray-800);
   }
 
   @include media-breakpoint-down(md) {
diff --git a/src/scss/custom/components/customer/_customer-link.scss b/src/scss/custom/components/customer/_customer-link.scss
index e9d64a0be..ab3ea0cb5 100644
--- a/src/scss/custom/components/customer/_customer-link.scss
+++ b/src/scss/custom/components/customer/_customer-link.scss
@@ -11,17 +11,17 @@ $component-name: customer-link;
       padding: 1.25rem 1rem;
       font-size: 1rem;
       font-weight: 600;
-      color: $gray-800;
-      background: $gray-100;
-      border-radius: $border-radius;
+      color: var(--bs-gray-800);
+      background: var(--bs-gray-100);
+      border-radius: var(--bs-border-radius-sm);
       transition: 0.25s ease-out;
 
       &:hover {
-        color: $white;
-        background: $primary;
+        color: var(--bs-white);
+        background: var(--bs-primary);
 
         i {
-          color: $white;
+          color: var(--bs-white);
         }
       }
 
@@ -34,7 +34,7 @@ $component-name: customer-link;
       i {
         margin-bottom: 0.75rem;
         font-size: 2rem;
-        color: $gray-700;
+        color: var(--bs-gray-700);
         transition: 0.25s ease-out;
 
         @include media-breakpoint-down(md) {
@@ -53,7 +53,7 @@ $component-name: customer-link;
 
     i,
     & {
-      color: $danger;
+      color: var(--bs-danger);
     }
   }
 }
diff --git a/src/scss/custom/components/customer/_customer-menu.scss b/src/scss/custom/components/customer/_customer-menu.scss
index 472a04197..be6d0153e 100644
--- a/src/scss/custom/components/customer/_customer-menu.scss
+++ b/src/scss/custom/components/customer/_customer-menu.scss
@@ -19,18 +19,18 @@ $component-name: account-menu;
       .link-item {
         &,
         i {
-          color: $primary;
+          color: var(--bs-primary);
         }
       }
     }
 
     &.#{$component-name}--signout {
       .link-item {
-        color: $danger;
+        color: var(--bs-danger);
 
         &,
         i {
-          color: $danger;
+          color: var(--bs-danger);
         }
       }
     }
@@ -40,7 +40,7 @@ $component-name: account-menu;
     display: flex;
     flex-wrap: nowrap;
     align-items: center;
-    color: $gray-800;
+    color: var(--bs-gray-800);
     transition: all 0.25s ease-out;
 
     i {
diff --git a/src/scss/custom/components/mailalerts-account/_index.scss b/src/scss/custom/components/mailalerts-account/_index.scss
new file mode 100644
index 000000000..8d7bf337e
--- /dev/null
+++ b/src/scss/custom/components/mailalerts-account/_index.scss
@@ -0,0 +1 @@
+@import "mailalerts-account";
diff --git a/src/scss/custom/components/mailalerts-account/_mailalerts-account.scss b/src/scss/custom/components/mailalerts-account/_mailalerts-account.scss
new file mode 100644
index 000000000..2e95a89d9
--- /dev/null
+++ b/src/scss/custom/components/mailalerts-account/_mailalerts-account.scss
@@ -0,0 +1,29 @@
+$component-name: mailalerts-account-line;
+
+.#{$component-name} {
+  padding: 1rem;
+  border: var(--bs-border-width) solid var(--bs-border-color);
+  border-radius: var(--bs-border-radius-xl);
+
+  &__product {
+    min-height: 54px;
+
+    &__name {
+      font-size: 0.875rem;
+      font-weight: 600;
+      color: var(--bs-body-color);
+    }
+
+    &__attributes {
+      font-size: 0.75rem;
+      color: var(--bs-body-color);
+    }
+  }
+
+  &__remove {
+    position: absolute;
+    top: 0;
+    right: 0;
+    color: var(--bs-black);
+  }
+}
diff --git a/src/scss/custom/components/misc/_header-block.scss b/src/scss/custom/components/misc/_header-block.scss
new file mode 100644
index 000000000..634ca48aa
--- /dev/null
+++ b/src/scss/custom/components/misc/_header-block.scss
@@ -0,0 +1,73 @@
+$component-name: header-block;
+
+.#{$component-name} {
+  position: relative;
+
+  &__action-btn {
+    --header-block-spacing-x: #{$header-block-spacing-x};
+    --header-block-spacing-y: #{$header-block-spacing-y};
+
+    display: inline-flex;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding: var(--header-block-spacing-y) var(--header-block-spacing-x);
+    color: var(--header-top-color);
+    border-radius: $btn-border-radius;
+
+    &:hover,
+    &:focus {
+      color: var(--header-top-color);
+    }
+
+    @include media-breakpoint-up(md) {
+      --header-block-spacing-x: #{$header-block-spacing-lg-x};
+      --header-block-spacing-y: #{$header-block-spacing-lg-y};
+    }
+  }
+
+  &__icon {
+    @include media-breakpoint-up(md) {
+      margin-right: 0.2em;
+    }
+  }
+
+  &__badge {
+    position: absolute;
+    top: 0.4em;
+    right: 0;
+    display: inline-block;
+    min-width: 1.8em;
+    height: 1.8em;
+    padding: 0 0.2em;
+    font-size: 0.6rem;
+    font-weight: 600;
+    line-height: 1.8;
+    color: var(--bs-white);
+    text-align: center;
+    background: var(--bs-primary);
+    border-radius: 50rem;
+
+    @include media-breakpoint-up(md) {
+      position: static;
+      min-width: 1.6em;
+      height: 1.6em;
+      margin-left: 0.4em;
+      font-size: inherit;
+      line-height: 1.6;
+      color: inherit;
+      background: var(--bs-gray-100);
+    }
+  }
+
+  /* When active, on desktop everything is primary */
+  &--active {
+    @include media-breakpoint-up(lg) {
+      .#{$component-name} {
+        &,
+        &__icon {
+          color: var(--bs-primary);
+        }
+      }
+    }
+  }
+}
diff --git a/src/scss/custom/components/misc/_index.scss b/src/scss/custom/components/misc/_index.scss
new file mode 100644
index 000000000..e8c589da5
--- /dev/null
+++ b/src/scss/custom/components/misc/_index.scss
@@ -0,0 +1 @@
+@import "header-block";
diff --git a/src/scss/custom/components/product/_product-miniature.scss b/src/scss/custom/components/product/_product-miniature.scss
index f44cfea06..685936751 100644
--- a/src/scss/custom/components/product/_product-miniature.scss
+++ b/src/scss/custom/components/product/_product-miniature.scss
@@ -50,7 +50,7 @@ $component-name: product-miniature;
   }
 
   & &__regular-price {
-    color: $gray-700;
+    color: var(--bs-gray-700);
   }
 
   & &__price {
@@ -63,7 +63,7 @@ $component-name: product-miniature;
     z-index: -1;
     width: 100%;
     padding: 0.5rem;
-    background-color: $white;
+    background-color: var(--bs-white);
     transition: 0.25s ease-out;
 
     @media (hover: none) and (pointer: coarse) {
diff --git a/src/scss/custom/components/search-filters-modules/_index.scss b/src/scss/custom/components/search-filters-modules/_index.scss
new file mode 100644
index 000000000..68258ff94
--- /dev/null
+++ b/src/scss/custom/components/search-filters-modules/_index.scss
@@ -0,0 +1 @@
+@import "search-filters-modules";
diff --git a/src/scss/custom/components/search-filters-modules/_search-filters-modules.scss b/src/scss/custom/components/search-filters-modules/_search-filters-modules.scss
new file mode 100644
index 000000000..6b15a48b9
--- /dev/null
+++ b/src/scss/custom/components/search-filters-modules/_search-filters-modules.scss
@@ -0,0 +1,26 @@
+$component-name: search-filters-modules;
+
+.#{$component-name} {
+  padding-bottom: 1rem;
+  margin-bottom: 2rem;
+  border-bottom: var(--category-tree-border-bottom);
+
+  &-title {
+    font-size: var(--category-tree-title-size);
+    font-weight: 600;
+    color: var(--category-tree-title-color);
+  }
+
+  &__list {
+    margin-bottom: 0;
+  }
+
+  &__item {
+    &__link {
+      display: block;
+      font-weight: 600;
+      line-height: 2rem;
+      color: var(--category-tree-title-color);
+    }
+  }
+}
diff --git a/src/scss/custom/components/search-filters/_search-filters.scss b/src/scss/custom/components/search-filters/_search-filters.scss
index 3dc1f1a5e..c664affbb 100644
--- a/src/scss/custom/components/search-filters/_search-filters.scss
+++ b/src/scss/custom/components/search-filters/_search-filters.scss
@@ -1,6 +1,10 @@
 $component-name: search-filters;
 
 .#{$component-name} {
+  padding-bottom: 1rem;
+  margin-bottom: 2rem;
+  border-bottom: var(--category-tree-border-bottom);
+
   & &-title {
     font-size: var(--category-tree-title-size);
     font-weight: 600;
diff --git a/src/scss/custom/layout/_footer.scss b/src/scss/custom/layout/_footer.scss
index 98166a081..8ee1e00b3 100644
--- a/src/scss/custom/layout/_footer.scss
+++ b/src/scss/custom/layout/_footer.scss
@@ -1,12 +1,12 @@
 $component-name: footer;
 $footer-background-color: #16181c !default;
-$footer-heading-color: $white !default;
-$footer-text-color: $body-color !default;
+$footer-heading-color: var(--bs-white) !default;
+$footer-text-color: var(--bs-body-color) !default;
 
 .#{$component-name} {
   --footer-background-color: #{$footer-background-color};
   --footer-text-color: #{$footer-text-color};
-  --footer-hover-color: #{$white};
+  --footer-hover-color: var(--bs-white);
   --footer-heading-color: #{$footer-heading-color};
 
   & &__main {
@@ -26,7 +26,7 @@ $footer-text-color: $body-color !default;
   .copyright {
     &,
     a {
-      color: $white;
+      color: var(--bs-white);
     }
   }
 
diff --git a/src/scss/custom/layout/_header-bottom.scss b/src/scss/custom/layout/_header-bottom.scss
new file mode 100644
index 000000000..a0980e592
--- /dev/null
+++ b/src/scss/custom/layout/_header-bottom.scss
@@ -0,0 +1,24 @@
+$component-name: header-bottom;
+
+.#{$component-name} {
+  --header-top-border-bottom: #{$header-top-border-bottom};
+  --header-bottom-border-bottom: #{$header-bottom-border-bottom};
+
+  padding: 0;
+  border-bottom: var(--header-bottom-border-bottom);
+
+  .navbar-brand {
+    padding: 0;
+  }
+
+  .nav-link {
+    &:active,
+    &.active {
+      color: var(--bs-white);
+    }
+
+    &:active:hover {
+      color: var(--bs-white);
+    }
+  }
+}
diff --git a/src/scss/custom/layout/_header-top.scss b/src/scss/custom/layout/_header-top.scss
new file mode 100644
index 000000000..863e996b8
--- /dev/null
+++ b/src/scss/custom/layout/_header-top.scss
@@ -0,0 +1,27 @@
+$component-name: header-top;
+
+.#{$component-name} {
+  --header-top-border-bottom: #{$header-top-border-bottom};
+  --header-bottom-border-bottom: #{$header-bottom-border-bottom};
+
+  @include media-breakpoint-up(md) {
+    border-bottom: var(--header-top-border-bottom);
+  }
+
+  a:not(.dropdown-item) {
+    color: var(--header-top-color);
+
+    &:hover {
+      &,
+      i {
+        color: var(--bs-primary);
+      }
+    }
+  }
+
+  &__right {
+    > *:not(:last-child) {
+      margin-right: 0.25rem;
+    }
+  }
+}
diff --git a/src/scss/custom/layout/_header.scss b/src/scss/custom/layout/_header.scss
deleted file mode 100644
index 4639a90a1..000000000
--- a/src/scss/custom/layout/_header.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-$component-name: header;
-
-.#{$component-name} {
-  --header-top-border-bottom: #{$header-top-border-bottom};
-  --header-bottom-border-bottom: #{$header-bottom-border-bottom};
-
-  & &__top {
-    border-bottom: var(--header-top-border-bottom);
-
-    a:not(.dropdown-item) {
-      color: var(--header-top-color);
-
-      &:hover {
-        &,
-        i {
-          color: $primary;
-        }
-      }
-    }
-
-    &__right {
-      > *:not(:last-child) {
-        margin-right: 0.25rem;
-      }
-    }
-  }
-
-  & &__bottom {
-    padding: 0;
-
-    @include media-breakpoint-up(md) {
-      border-bottom: var(--header-bottom-border-bottom);
-    }
-
-    .navbar-brand {
-      padding: 0;
-    }
-
-    .nav-link {
-      &:active,
-      &.active {
-        color: $white;
-      }
-
-      &:active:hover {
-        color: $white;
-      }
-    }
-  }
-}
diff --git a/src/scss/custom/layout/_index.scss b/src/scss/custom/layout/_index.scss
index 2a50e8a33..165c12364 100644
--- a/src/scss/custom/layout/_index.scss
+++ b/src/scss/custom/layout/_index.scss
@@ -1,3 +1,4 @@
-@import "header";
+@import "header-top";
+@import "header-bottom";
 @import "footer";
 @import "content";
diff --git a/src/scss/custom/modules/_contactinfo.scss b/src/scss/custom/modules/_contactinfo.scss
index abcc0f289..53a5a9cf6 100644
--- a/src/scss/custom/modules/_contactinfo.scss
+++ b/src/scss/custom/modules/_contactinfo.scss
@@ -21,7 +21,7 @@
 
     i {
       margin-right: 1.25rem;
-      color: $gray-600;
+      color: var(--bs-gray-600);
     }
 
     h2 {
diff --git a/src/scss/custom/modules/_emailsubscriptions.scss b/src/scss/custom/modules/_emailsubscriptions.scss
index fffc6cbcc..0191562e5 100644
--- a/src/scss/custom/modules/_emailsubscriptions.scss
+++ b/src/scss/custom/modules/_emailsubscriptions.scss
@@ -4,7 +4,7 @@ $email-input-border-color: $input-border-color !default;
 
 .#{$component-name} {
   padding: 2.5rem 1rem;
-  background-color: $gray-100;
+  background-color: var(--bs-gray-100);
 
   & &__content {
     max-width: 56.625rem;
@@ -29,7 +29,7 @@ $email-input-border-color: $input-border-color !default;
       }
 
       .btn-primary {
-        color: $white;
+        color: var(--bs-white);
         text-transform: inherit;
       }
     }
@@ -38,6 +38,6 @@ $email-input-border-color: $input-border-color !default;
   & &__label {
     font-size: 1.25rem;
     line-height: 1.75rem;
-    color: $gray-800;
+    color: var(--bs-gray-800);
   }
 }
diff --git a/src/scss/custom/modules/_featuredproducts.scss b/src/scss/custom/modules/_featuredproducts.scss
index 921beda0e..59c760aef 100644
--- a/src/scss/custom/modules/_featuredproducts.scss
+++ b/src/scss/custom/modules/_featuredproducts.scss
@@ -1,11 +1,11 @@
 .all-product-link.btn {
   i {
-    color: $primary;
+    color: var(--bs-primary);
   }
 
   &:hover {
     i {
-      color: $white;
+      color: var(--bs-white);
     }
   }
 }
diff --git a/src/scss/custom/modules/_mainmenu.scss b/src/scss/custom/modules/_mainmenu.scss
index 5fbd498a1..6ecc9e07d 100644
--- a/src/scss/custom/modules/_mainmenu.scss
+++ b/src/scss/custom/modules/_mainmenu.scss
@@ -1,5 +1,11 @@
-.main-menu--desktop {
-  .main-menu__tree {
+.main-menu {
+  order: -1;
+
+  @include media-breakpoint-up(xl) {
+    order: 1;
+  }
+
+  &__tree {
     > li {
       > a {
         padding: 1.5rem 1rem;
@@ -38,6 +44,13 @@
             font-weight: 600;
             color: $dropdown-link-color;
 
+            &:hover {
+              &,
+              i {
+                color: var(--bs-primary);
+              }
+            }
+
             &::after {
               display: none;
             }
@@ -47,3 +60,4 @@
     }
   }
 }
+
diff --git a/src/scss/custom/modules/_social-sharing.scss b/src/scss/custom/modules/_social-sharing.scss
index 8372be907..e027d6245 100644
--- a/src/scss/custom/modules/_social-sharing.scss
+++ b/src/scss/custom/modules/_social-sharing.scss
@@ -106,7 +106,7 @@
 
 #block-myaccount-infos {
   .myaccount-title a {
-    color: $gray-900;
+    color: var(--bs-gray-900);
   }
 }
 
diff --git a/src/scss/custom/pages/_addresses.scss b/src/scss/custom/pages/_addresses.scss
index d1d6c0ca3..5ee11303f 100644
--- a/src/scss/custom/pages/_addresses.scss
+++ b/src/scss/custom/pages/_addresses.scss
@@ -23,8 +23,8 @@
       width: 4rem;
       height: 4rem;
       font-size: 2rem;
-      color: $primary;
-      background: $gray-400;
+      color: var(--bs-primary);
+      background: var(--bs-gray-400);
       border-radius: 50%;
       transition: 0.25s ease-out;
 
diff --git a/src/scss/custom/pages/_checkout.scss b/src/scss/custom/pages/_checkout.scss
index afe64d883..55e57e1f3 100644
--- a/src/scss/custom/pages/_checkout.scss
+++ b/src/scss/custom/pages/_checkout.scss
@@ -20,8 +20,8 @@ $component-name: step;
     align-items: center;
     justify-content: space-between;
     padding: 1rem;
-    background: $gray-100;
-    border-radius: $border-radius;
+    background: var(--bs-gray-100);
+    border-radius: var(--bs-border-radius-sm);
 
     dd,
     dt {
@@ -30,7 +30,7 @@ $component-name: step;
       margin: 0;
 
       &:not(:last-of-type) {
-        border-bottom: 1px solid $gray-300;
+        border-bottom: 1px solid var(--bs-gray-300);
       }
     }
 
diff --git a/src/scss/custom/pages/_global.scss b/src/scss/custom/pages/_global.scss
index a61b6cc15..f9ef4a2cb 100644
--- a/src/scss/custom/pages/_global.scss
+++ b/src/scss/custom/pages/_global.scss
@@ -12,6 +12,6 @@
 
 hr {
   &:not(.alert-divider) {
-    color: $gray-500;
+    color: var(--bs-gray-500);
   }
 }
diff --git a/src/scss/custom/pages/_orders.scss b/src/scss/custom/pages/_orders.scss
index cf3c08f82..227f5d95e 100644
--- a/src/scss/custom/pages/_orders.scss
+++ b/src/scss/custom/pages/_orders.scss
@@ -5,7 +5,7 @@
     a {
       display: inline-block;
       padding: 0.5rem;
-      color: $body-color;
+      color: var(--bs-body-color);
 
       &::after {
         display: block;
diff --git a/src/scss/custom/pages/product/_details.scss b/src/scss/custom/pages/product/_details.scss
index 5d0492340..58415435e 100644
--- a/src/scss/custom/pages/product/_details.scss
+++ b/src/scss/custom/pages/product/_details.scss
@@ -1,13 +1,13 @@
 .product__details,
 .product__features {
-  background: $gray-100;
+  background: var(--bs-gray-100);
 }
 
 .detail {
   display: flex;
   align-items: center;
   padding: 1rem;
-  border-bottom: 4px solid $white;
+  border-bottom: 4px solid var(--bs-white);
 
   &__left {
     flex-grow: 0;
diff --git a/src/scss/custom/pages/product/_product.scss b/src/scss/custom/pages/product/_product.scss
index 7c9053666..c3c8ee3af 100644
--- a/src/scss/custom/pages/product/_product.scss
+++ b/src/scss/custom/pages/product/_product.scss
@@ -31,7 +31,7 @@
 
     &__tax-label {
       margin-bottom: 1.5rem;
-      color: $gray-700;
+      color: var(--bs-gray-700);
     }
 
     &__prices {
@@ -44,7 +44,7 @@
 
     &__discount {
       margin-left: 0.5rem;
-      color: $gray-700;
+      color: var(--bs-gray-700);
     }
 
     &__price-regular {
@@ -92,6 +92,22 @@
       border: 1px $gray-200 solid;
     }
   }
+
+  @include media-breakpoint-down(md) {
+    .carousel-control-next {
+      right: 1rem;
+    }
+
+    .carousel-control-prev {
+      left: 1rem;
+    }
+
+    .carousel-control-prev,
+    .carousel-control-next {
+      width: 3rem;
+      height: 3rem;
+    }
+  }
 }
 
 // Needs to be outside of the .page-product scope because it can be inside a modal
diff --git a/src/scss/partials/_commons.scss b/src/scss/partials/_commons.scss
index 70e85f505..c5da4a6f2 100644
--- a/src/scss/partials/_commons.scss
+++ b/src/scss/partials/_commons.scss
@@ -1,6 +1,6 @@
 @use "sass:color";
 
-$default-icon-color: $primary !default;
+$default-icon-color: var(--bs-primary) !default;
 
 
 body,
@@ -10,7 +10,7 @@ html {
 
 body {
   font-family: $font-family-base;
-  color: $body-color;
+  color: var(--bs-body-color);
   direction: ltr;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -61,9 +61,9 @@ label .color,
 }
 
 .bright {
-  color: $gray-100;
+  color: var(--bs-gray-100);
 }
 
 .dark {
-  color: $gray-800;
+  color: var(--bs-gray-800);
 }
diff --git a/src/scss/partials/_helpers.scss b/src/scss/partials/_helpers.scss
index 454aad633..3cffd2b04 100644
--- a/src/scss/partials/_helpers.scss
+++ b/src/scss/partials/_helpers.scss
@@ -1,12 +1,3 @@
-.hidden-on-desktop {
-  @extend .d-md-none;
-}
-
-.hidden-on-mobile {
-  @extend .d-none;
-  @extend .d-md-flex;
-}
-
 .inline-items {
   display: flex;
   flex-wrap: nowrap;
@@ -31,5 +22,5 @@
 }
 
 .text-gray {
-  color: $gray-700;
+  color: var(--bs-gray-700);
 }
diff --git a/templates/_partials/form-fields.tpl b/templates/_partials/form-fields.tpl
index 636480e5b..ce7b81252 100644
--- a/templates/_partials/form-fields.tpl
+++ b/templates/_partials/form-fields.tpl
@@ -10,10 +10,9 @@
 
 {else}
 
-  <div class="mb-3 {if !empty($field.errors)}has-error{/if}">
-
+  <div class="mb-3{if !empty($field.errors)} has-error{/if}">
     {if ($field.type !== 'checkbox')}
-      <label class="form-label{if $field.required} required{/if}">
+      <label class="form-label{if $field.required} required{/if}" for="field-{$field.name}">
         {if $field.type !== 'checkbox'}
           {$field.label}
         {/if}
@@ -52,17 +51,16 @@
         <div>
           {foreach from=$field.availableValues item="label" key="value"}
             <div class="form-check form-check-inline">
-              <input 
+              <input
                 class="form-check-input"
                 type="radio"
                 name="{$field.name}"
-                id="{$field.name}_{$value}"
+                id="field-{$field.name}_{$value}"
                 value="{$value}"
-                checked
                 {if $field.required}required{/if}
                 {if $value eq $field.value} checked {/if}
               >
-              <label class="form-check-label" for="{$field.name}_{$value}">
+              <label class="form-check-label" for="field-{$field.name}_{$value}">
                 {$label}
               </label>
             </div>
@@ -74,16 +72,16 @@
 
       {block name='form_field_item_checkbox'}
         <div class="form-check">
-          <input 
+          <input
             class="form-check-input"
             name="{$field.name}"
             type="checkbox"
             value="1"
-            id="{$field.name}"
+            id="field-{$field.name}"
             value="1" {if $field.value}checked="checked"{/if}
             {if $field.required}required{/if}
           >
-          <label class="form-check-label" for="{$field.name}">
+          <label class="form-check-label" for="field-{$field.name}">
             {$field.label nofilter}
           </label>
         </div>
@@ -130,12 +128,17 @@
           <input
             class="form-control js-child-focus js-visible-password"
             name="{$field.name}"
-            title="{l s='At least 5 characters long' d='Shop.Forms.Help'}"
+            id="field-{$field.name}"
             type="password"
             {if $field.autocomplete}autocomplete="{$field.autocomplete}"{/if}
             value=""
             pattern=".{literal}{{/literal}5,{literal}}{/literal}"
             {if $field.required}required{/if}
+            {if isset($configuration.password_policy.minimum_length)}data-minlength="{$configuration.password_policy.minimum_length}"{/if}
+            {if isset($configuration.password_policy.maximum_length)}data-maxlength="{$configuration.password_policy.maximum_length}"{/if}
+            {if isset($configuration.password_policy.minimum_score)}data-minscore="{$configuration.password_policy.minimum_score}"{/if}
+            data-bs-placement="top"
+            data-bs-trigger="manual"
           >
 
           <button
@@ -156,13 +159,14 @@
         <input
           class="form-control"
           name="{$field.name}"
+          id="field-{$field.name}"
           type="{$field.type}"
           value="{$field.value}"
           {if $field.autocomplete}autocomplete="{$field.autocomplete}"{/if}
           {if isset($field.availableValues.placeholder)}placeholder="{$field.availableValues.placeholder}"{/if}
           {if $field.maxLength}maxlength="{$field.maxLength}"{/if}
-          {if $field.required}required{/if}
           aria-label="{$field.name}"
+          {if $field.required}required{/if}
         >
         {if isset($field.availableValues.comment)}
           <span class="form-text">
@@ -177,13 +181,10 @@
       {include file='_partials/form-errors.tpl' errors=$field.errors}
     {/block}
 
-    <div class="form-text">
-      {block name='form_field_comment'}
-        {if (!$field.required && !in_array($field.type, ['radio-buttons', 'checkbox']))}
-         {l s='Optional' d='Shop.Forms.Labels'}
-        {/if}
-      {/block}
-    </div>
+    {block name='form_field_comment'}
+      {if (!$field.required && !in_array($field.type, ['radio-buttons', 'checkbox']))}
+        <div class="form-text">{l s='Optional' d='Shop.Forms.Labels'}</div>
+      {/if}
+    {/block}
   </div>
-
 {/if}
diff --git a/templates/_partials/header.tpl b/templates/_partials/header.tpl
index 7e4f28cd5..7743caf60 100644
--- a/templates/_partials/header.tpl
+++ b/templates/_partials/header.tpl
@@ -2,8 +2,8 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
-{$headerTopName = 'header__top'}
-{$headerBottomName = 'header__bottom'}
+{$headerTopName = 'header-top'}
+{$headerBottomName = 'header-bottom'}
 
 {block name='header_banner'}
   <div class="header__banner">
@@ -14,7 +14,7 @@
 {block name='header_nav'}
   <nav class="{$headerTopName}">
     <div class="container-md">
-      <div class="{$headerTopName}-desktop hidden-on-mobile row">
+      <div class="{$headerTopName}-desktop d-none d-md-flex row">
         <div class="{$headerTopName}__left col-md-5">
           {hook h='displayNav1'}
         </div>
@@ -22,15 +22,29 @@
           {hook h='displayNav2'}
         </div>
       </div>
+    </div>
+  </nav>
+{/block}
+
+{block name='header_bottom'}
+  <div class="{$headerBottomName}">
+    <div class="container-md {$headerBottomName}__container">
+      <div class="row align-items-center gx-2 {$headerBottomName}__row">
+        <div class="col-auto logo order-xl-1 ms-lg-0 ms-2 me-lg-0 me-auto">
+          {if $shop.logo_details}
+            {if $page.page_name == 'index'}<h1 class="mb-0">{/if}
+              {renderLogo}
+            {if $page.page_name == 'index'}</h1>{/if}
+          {/if}
+        </div>
 
-      <div class="{$headerTopName}-mobile hidden-on-desktop">
-        <div id="_mobile_menu"></div>
-        <div id="_mobile_logo" class="logo logo-mobile"></div>
+        <div class="search__mobile d-md-none col-auto">
 
-        <div class="search__mobile hide-on-desktop">
-          <button class="search__mobile__toggler btn d-xl-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#searchCanvas" aria-controls="searchCanvas">
-            <span class="material-icons">search</span>  
-          </button>
+          <div class="header-block">
+            <a class="header-block__action-btn" href="#" role="button" data-bs-toggle="offcanvas" data-bs-target="#searchCanvas" aria-controls="searchCanvas">
+              <span class="material-icons header-block__icon">search</span>
+            </a>
+          </div>
 
           <div class="search__offcanvas js-search-offcanvas offcanvas offcanvas-top" data-bs-backdrop="false" data-bs-scroll="true" tabindex="-1" id="searchCanvas" aria-labelledby="offcanvasTopLabel">
             <div class="offcanvas-header">
@@ -40,25 +54,30 @@
           </div>
         </div>
 
-        <div id="_mobile_user_info"></div>
-        <div id="_mobile_cart"></div>
-      </div>
-    </div>
-  </nav>
-{/block}
+        {hook h='displayTop'}
 
-{block name='header_bottom'}
-  <div class="{$headerBottomName}">
-    <div class="container {$headerBottomName}__container">
-      <div id="_desktop_logo" class="logo logo-desktop order-1 order-xl-0">
-        {if $shop.logo_details}
-          {if $page.page_name == 'index'}<h1>{/if}
-            {renderLogo}
-          {if $page.page_name == 'index'}</h1>{/if}
-        {/if}
-      </div>
+        <div id="_mobile_user_info" class="d-md-none col-auto">
+          {* JUST PLACEHOLDER FOR RESPONSIVE COMPONENT TO LOAD REAL ONE *}
+          <div class="header-block">
+            <span class="header-block__action-btn">
+              <i class="material-icons header-block__icon">&#xE7FD;</i>
+              <span class="d-none d-md-inline header-block__title">{l s='Sign in' d='Shop.Theme.Actions'}</span>
+            </span>
+          </div>
+          {* JUST PLACEHOLDER FOR RESPONSIVE COMPONENT TO LOAD REAL ONE *}
+        </div>
 
-      {hook h='displayTop'}
+        <div id="_mobile_cart" class="d-md-none col-auto">
+          {* JUST PLACEHOLDER FOR RESPONSIVE COMPONENT TO LOAD REAL ONE *}
+          <div class="header-block">
+            <span class="header-block__action-btn">
+              <i class="material-icons header-block__icon">shopping_cart</i>
+              <span class="header-block__badge">{$cart.products_count}</span>
+            </span>
+          </div>
+          {* JUST PLACEHOLDER FOR RESPONSIVE COMPONENT TO LOAD REAL ONE *}
+        </div>
+      </div>
     </div>
   </div>
   {hook h='displayNavFullWidth'}
diff --git a/templates/_partials/helpers.tpl b/templates/_partials/helpers.tpl
index ed0cd488d..dd52efe44 100644
--- a/templates/_partials/helpers.tpl
+++ b/templates/_partials/helpers.tpl
@@ -4,7 +4,7 @@
  *}
 
 {function renderLogo}
-  <a class="navbar-brand" href="{$urls.pages.index}">
+  <a class="navbar-brand d-block" href="{$urls.pages.index}">
     <img
       class="logo img-fluid"
       src="{$shop.logo_details.src}"
diff --git a/templates/_partials/pagination.tpl b/templates/_partials/pagination.tpl
index 0a6e9664c..bdbe5c2a7 100644
--- a/templates/_partials/pagination.tpl
+++ b/templates/_partials/pagination.tpl
@@ -28,9 +28,9 @@
                     class="page-link btn-with-icon {if $page.type === 'previous'}previous {elseif $page.type === 'next'}next {/if}{['disabled' => !$page.clickable, 'js-search-link' => true]|classnames}">
                     {if $page.type === 'previous'}
                       <i class="material-icons rtl-flip">&#xE314;</i>
-                      <span class="hidden-on-mobile">{l s='Previous' d='Shop.Theme.Actions'}</span>
+                      <span class="d-none d-md-flex">{l s='Previous' d='Shop.Theme.Actions'}</span>
                     {elseif $page.type === 'next'}
-                      <span class="hidden-on-mobile">{l s='Next' d='Shop.Theme.Actions'}</span>
+                      <span class="d-none d-md-flex">{l s='Next' d='Shop.Theme.Actions'}</span>
                       <i class="material-icons rtl-flip">&#xE315;</i>
                     {else}
                       {$page.page}
diff --git a/templates/catalog/_partials/category-header.tpl b/templates/catalog/_partials/category-header.tpl
index 6106947e4..2548b5fbe 100644
--- a/templates/catalog/_partials/category-header.tpl
+++ b/templates/catalog/_partials/category-header.tpl
@@ -5,7 +5,7 @@
 <div id="js-product-list-header">
     {if $listing.pagination.items_shown_from == 1}
         <div class="block-category">
-            <h1 class="h1 mb-4">{$category.name}</h1>
+          {include file="components/page-title-section.tpl" title={$category.name}}
             {if $category.description}
               <div id="category-description" class="rich-text mb-4">{$category.description nofilter}</div>
             {/if}
@@ -14,6 +14,7 @@
                 <img src="{$category.image.large.url}" 
                   alt="{if !empty($category.image.legend)}{$category.image.legend}{else}{$category.name}{/if}" 
                   loading="lazy" 
+                  class="img-fluid"
                   width="{$category.image.large.width}" 
                   height="{$category.image.large.height}">
               </div>
@@ -24,5 +25,3 @@
       {include file='catalog/_partials/subcategories.tpl' subcategories=$subcategories}
     {/if}
 </div>
-
-
diff --git a/templates/catalog/_partials/miniatures/brand.tpl b/templates/catalog/_partials/miniatures/brand.tpl
index abbb910cb..084f2b798 100644
--- a/templates/catalog/_partials/miniatures/brand.tpl
+++ b/templates/catalog/_partials/miniatures/brand.tpl
@@ -4,7 +4,11 @@
  *}
 {block name='brand_miniature_item'}
   <li class="brand card col-6 col-md-4 col-lg-3">
-    <div class="brand__img"><a href="{$brand.url}"><img src="{$brand.image}" alt="{$brand.name}" loading="lazy"></a></div>
+    <div class="brand__img">
+      <a href="{$brand.url}">
+        <img src="{$brand.image}" alt="{$brand.name}" loading="lazy">
+      </a>
+    </div>
     <div class="brand__infos">
       <p><a class="brand__link" href="{$brand.url}">{$brand.name}</a></p>
       {$brand.text nofilter}
diff --git a/templates/catalog/_partials/miniatures/pack-product.tpl b/templates/catalog/_partials/miniatures/pack-product.tpl
index 6ba7e561e..78e0c5006 100644
--- a/templates/catalog/_partials/miniatures/pack-product.tpl
+++ b/templates/catalog/_partials/miniatures/pack-product.tpl
@@ -6,20 +6,67 @@
   <article class="product-pack__item rounded mb-2 p-2">
     <a href="{$product.url}" title="{$product.name}" class="row align-items-center">
       <div class="product-pack__image col-2">
-        {if !empty($product.default_image.medium)}
-          <img
-            src="{$product.default_image.medium.url}"
-            {if !empty($product.default_image.legend)}
+        {if !empty($product.default_image)}
+          <picture>
+            {if isset($product.default_image.bySize.default_xs.sources.avif)}
+              <source 
+                srcset="
+                  {$product.default_image.bySize.default_xs.sources.avif},
+                  {$product.default_image.bySize.default_m.sources.avif} 2x"
+                type="image/avif"
+              >
+            {/if}
+
+            {if isset($product.default_image.bySize.default_xs.sources.webp)}
+              <source 
+                srcset="
+                  {$product.default_image.bySize.default_xs.sources.webp},
+                  {$product.default_image.bySize.default_m.sources.webp} 2x"
+                type="image/webp"
+              >
+            {/if}
+
+            <img
+              class="img-fluid rounded"
+              srcset="
+                {$product.default_image.bySize.default_xs.url},
+                {$product.default_image.bySize.default_m.url} 2x"
+              loading="lazy"
+              width="{$product.default_image.bySize.default_xs.width}"
+              height="{$product.default_image.bySize.default_xs.height}"
               alt="{$product.default_image.legend}"
               title="{$product.default_image.legend}"
-            {else}
-              alt="{$product.name}"
-            {/if}
-            loading="lazy"
-            class="img-fluid rounded"
-          >
+          </picture>
         {else}
-          <img src="{$urls.no_picture_image.bySize.medium_default.url}" loading="lazy" class="img-fluid rounded" />
+          <picture>
+            {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
+              <source 
+                srcset="
+                  {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                  {$urls.no_picture_image.bySize.default_m.sources.avif} 2x"
+                type="image/avif"
+              >
+            {/if}
+
+            {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
+              <source 
+                srcset="
+                  {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                  {$urls.no_picture_image.bySize.default_m.sources.webp} 2x"
+                type="image/webp"
+              >
+            {/if}
+
+            <img
+              class="img-fluid rounded"
+              srcset="
+                {$urls.no_picture_image.bySize.default_xs.url},
+                {$urls.no_picture_image.bySize.default_m.url} 2x"
+              width="{$urls.no_picture_image.bySize.default_xs.width}"
+              height="{$urls.no_picture_image.bySize.default_xs.height}"
+              loading="lazy"
+            >
+          </picture>
         {/if}
       </div>
 
diff --git a/templates/catalog/_partials/miniatures/product.tpl b/templates/catalog/_partials/miniatures/product.tpl
index 88fb6ebed..aaddfbf54 100644
--- a/templates/catalog/_partials/miniatures/product.tpl
+++ b/templates/catalog/_partials/miniatures/product.tpl
@@ -13,23 +13,91 @@
         {block name='product_miniature_image'}
           <div class="{$componentName}__image-container thumbnail-container">
             {if $product.cover}
-              <img
-                src="{$product.cover.bySize.home_default.url}"
-                alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name}{/if}"
-                loading="lazy"
-                data-full-size-image-url="{$product.cover.bySize.home_default.url}"
-                width="{$product.cover.bySize.home_default.width}"
-                height="{$product.cover.bySize.home_default.height}"
-                class="{$componentName}__image card-img-top"
-              />
+              <picture>
+                {if isset($product.cover.bySize.default_md.sources.avif)}
+                  <source 
+                    srcset="
+                      {$product.cover.bySize.default_xs.sources.avif} 120w,
+                      {$product.cover.bySize.default_m.sources.avif} 200w,
+                      {$product.cover.bySize.default_md.sources.avif} 320w,
+                      {$product.cover.bySize.product_main.sources.avif} 720w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 50vw" 
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($product.cover.bySize.default_md.sources.webp)}
+                  <source 
+                    srcset="
+                      {$product.cover.bySize.default_xs.sources.webp} 120w,
+                      {$product.cover.bySize.default_m.sources.webp} 200w,
+                      {$product.cover.bySize.default_md.sources.webp} 320w,
+                      {$product.cover.bySize.product_main.sources.webp} 720w"
+                    sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
+                    type="image/webp"
+                  >
+                {/if}
+
+                <img
+                  class="{$componentName}__image card-img-top"
+                  srcset="
+                    {$product.cover.bySize.default_xs.url} 120w,
+                    {$product.cover.bySize.default_m.url} 200w,
+                    {$product.cover.bySize.default_md.url} 320w,
+                    {$product.cover.bySize.product_main.url} 720w"
+                  sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
+                  src="{$product.cover.bySize.default_md.url}" 
+                  width="{$product.cover.bySize.default_md.width}"
+                  height="{$product.cover.bySize.default_md.height}"
+                  loading="lazy"
+                  alt="{$product.cover.legend}"
+                  title="{$product.cover.legend}"
+                  data-full-size-image-url="{$product.cover.bySize.home_default.url}"
+                >
+              </picture>
             {else}
-              <img
-                src="{$urls.no_picture_image.bySize.home_default.url}"
-                loading="lazy"
-                width="{$urls.no_picture_image.bySize.home_default.width}"
-                height="{$urls.no_picture_image.bySize.home_default.height}"
-                class="{$componentName}__image card-img-top"
-              />
+              <picture>
+                {if isset($urls.no_picture_image.bySize.default_md.sources.avif)}
+                  <source 
+                    srcset="
+                      {$urls.no_picture_image.bySize.default_xs.sources.avif} 120w,
+                      {$urls.no_picture_image.bySize.default_m.sources.avif} 200w,
+                      {$urls.no_picture_image.bySize.default_md.sources.avif} 320w,
+                      {$urls.no_picture_image.bySize.product_main.sources.avif} 720w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 50vw" 
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($urls.no_picture_image.bySize.default_md.sources.webp)}
+                  <source 
+                    srcset="
+                      {$urls.no_picture_image.bySize.default_xs.sources.webp} 120w,
+                      {$urls.no_picture_image.bySize.default_m.sources.webp} 200w,
+                      {$urls.no_picture_image.bySize.default_md.sources.webp} 320w,
+                      {$urls.no_picture_image.bySize.product_main.sources.webp} 720w"
+                    sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
+                    type="image/webp"
+                  >
+                {/if}
+
+                <img
+                  class="{$componentName}__image card-img-top"
+                  srcset="
+                    {$urls.no_picture_image.bySize.default_xs.url} 120w,
+                    {$urls.no_picture_image.bySize.default_m.url} 200w,
+                    {$urls.no_picture_image.bySize.default_md.url} 320w,
+                    {$urls.no_picture_image.bySize.product_main.url} 720w"
+                  sizes="(min-width: 1300px) 320px, (min-width: 768px) 120px, 50vw" 
+                  width="{$urls.no_picture_image.bySize.default_md.width}"
+                  height="{$urls.no_picture_image.bySize.default_md.height}"
+                  src="{$urls.no_picture_image.bySize.default_md.url}" 
+                  loading="lazy"
+                  alt="{l s='No image available' d='Shop.Theme.Catalog'}"
+                  title="{l s='No image available' d='Shop.Theme.Catalog'}"
+                  data-full-size-image-url="{$product.cover.bySize.home_default.url}"
+                >
+              </picture>
             {/if}
 
             {block name='quick_view_touch'}
@@ -100,6 +168,30 @@
               {/block}
             </div>
 
+            {if $product.add_to_cart_url}
+              <form action="{$urls.pages.cart}" method="post" class="d-flex align-items-center mt-3">
+                <input type="hidden" value="{$product.id_product}" name="id_product">
+                <input type="hidden" name="token" value="{$static_token}" />
+                <div class="quantity-button js-quantity-button">
+                  {include file='components/qty-input.tpl'
+                    attributes=[
+                      "id"=>"quantity_wanted_{$product.id_product}",
+                      "value"=>"1",
+                      "min"=>"{if $product.quantity_wanted}{$product.minimal_quantity}{else}1{/if}"
+                    ]
+                    marginHelper="mb-0"
+                  }
+                </div>
+                <button data-button-action="add-to-cart" class="btn btn-primary ms-3">
+                  <i class="material-icons">&#xe854;</i>
+                  <span class="visually-hidden">{l s='Add to cart' d='Shop.Theme.Actions'}</span>
+                </button>
+              </form>
+            {else}
+              <a href="{$product.url}" class="btn btn-outline-primary mt-3">
+                {l s='See details' d='Shop.Theme.Actions'}
+              </a>
+            {/if}
           </div>
         </div>
       {/block}
diff --git a/templates/catalog/_partials/product-cover-thumbnails.tpl b/templates/catalog/_partials/product-cover-thumbnails.tpl
index 59dd3ebc9..48339a9a3 100644
--- a/templates/catalog/_partials/product-cover-thumbnails.tpl
+++ b/templates/catalog/_partials/product-cover-thumbnails.tpl
@@ -6,7 +6,7 @@
 <div class="product__images js-images-container">
   {if $product.images|@count > 0}
     <div id="product-images" class="carousel slide js-product-carousel"
-      data-bs-ride="carousel" data-bs-interval="false">
+      data-bs-ride="carousel">
 
       <div class="carousel-inner">
         {include file='catalog/_partials/product-flags.tpl'}
@@ -23,18 +23,47 @@
         {/if}
 
         {block name='product_cover'}
-          {foreach from=$product.images item=image key=key}
+          {foreach from=$product.images item=image key=key name=productImages}
             <div class="carousel-item{if $image.id_image == $product.default_image.id_image} active{/if}">
-              <img
-                class="img-fluid"
-                src="{$image.bySize.large_default.url}"
-                {if !empty($image.legend)}
+              <picture>
+                {if isset($image.bySize.default_md.sources.avif)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_md.sources.avif} 320w,
+                      {$image.bySize.product_main.sources.avif} 720w,
+                      {$image.bySize.product_main_2x.sources.avif} 1440w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($image.bySize.default_md.sources.webp)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_md.sources.webp} 320w,
+                      {$image.bySize.product_main.sources.webp} 720w,
+                      {$image.bySize.product_main_2x.sources.webp} 1440w"
+                    sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                    type="image/webp"
+                  >
+                {/if}
+
+                <img
+                  class="img-fluid"
+                  srcset="
+                    {$image.bySize.default_md.url} 320w,
+                    {$image.bySize.product_main.url} 720w,
+                    {$image.bySize.product_main_2x.url} 1440w"
+                  sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+                  src="{$image.bySize.product_main.url}" 
+                  width="{$image.bySize.product_main.width}"
+                  height="{$image.bySize.product_main.height}"
+                  loading="{if $smarty.foreach.productImages.first}eager{else}lazy{/if}"
                   alt="{$image.legend}"
                   title="{$image.legend}"
-                {else}
-                  alt="{$product.name}"
-                {/if}
-                loading="lazy">
+                  data-full-size-image-url="{$image.bySize.home_default.url}"
+                >
+              </picture>
             </div>
           {/foreach}
         {/block}
@@ -54,19 +83,37 @@
               {/if}
               aria-label="{l s='Product image %number%' d='Shop.Theme.Catalog' sprintf=['%number%' => $key]}"
           >
-              <img
-                class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
-                data-image-medium-src="{$image.bySize.medium_default.url}"
-                data-image-large-src="{$image.bySize.large_default.url}"
-                src="{$image.bySize.home_default.url}"
-                {if !empty($image.legend)}
+              <picture>
+                {if isset($image.bySize.default_xs.sources.avif)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_xs.sources.avif},
+                      {$image.bySize.default_m.sources.avif} 2x",
+                  type="image/avif"
+                  >
+                {/if}
+
+                {if isset($image.bySize.default_xs.sources.webp)}
+                  <source 
+                    srcset="
+                      {$image.bySize.default_xs.sources.webp},
+                      {$image.bySize.default_m.sources.webp} 2x"
+                    type="image/webp"
+                  >
+                {/if}
+
+                <img
+                  class="img-fluid js-thumb{if $image.id_image == $product.default_image.id_image} js-thumb-selected{/if}"
+                  srcset="
+                    {$image.bySize.default_xs.url},
+                    {$image.bySize.default_m.url} 2x"
+                  width="{$image.bySize.default_xs.width}"
+                  height="{$image.bySize.default_xs.height}"
+                  loading="lazy"
                   alt="{$image.legend}"
                   title="{$image.legend}"
-                {else}
-                  alt="{$product.name}"
-                {/if}
-                loading="lazy"
-            >
+                >
+              </picture>
             </li>
           {/foreach}
         </ul>
@@ -75,12 +122,43 @@
 
     {hook h='displayAfterProductThumbs' product=$product}
   {else}
-      <img 
-        class="img-fluid" 
-        src="{$urls.no_picture_image.bySize.large_default.url}" 
-        width="{$urls.no_picture_image.bySize.large_default.width}"
-        height="{$urls.no_picture_image.bySize.large_default.height}"
+    <picture>
+      {if isset($urls.no_picture_image.bySize.default_md.sources.avif)}
+        <source 
+          srcset="
+            {$urls.no_picture_image.bySize.default_md.sources.avif} 320w,
+            {$urls.no_picture_image.bySize.product_main.sources.avif} 720w,
+            {$urls.no_picture_image.bySize.product_main_2x.sources.avif} 1440w"
+          sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+          type="image/avif"
+        >
+      {/if}
+
+      {if isset($urls.no_picture_image.bySize.default_md.sources.webp)}
+        <source 
+          srcset="
+            {$urls.no_picture_image.bySize.default_md.sources.webp} 320w,
+            {$urls.no_picture_image.bySize.product_main.sources.webp} 720w,
+            {$urls.no_picture_image.bySize.product_main_2x.sources.webp} 1440w"
+          sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+          type="image/webp"
+        >
+      {/if}
+
+      <img
+        class="img-fluid"
+        srcset="
+          {$urls.no_picture_image.bySize.default_md.url} 320w,
+          {$urls.no_picture_image.bySize.product_main.url} 720w,
+          {$urls.no_picture_image.bySize.product_main_2x.url} 1440w"
+        sizes="(min-width: 1300px) 720px, (min-width: 768px) 50vw, 100vw" 
+        width="{$urls.no_picture_image.bySize.product_main.width}"
+        height="{$urls.no_picture_image.bySize.product_main.height}"
+        src="{$urls.no_picture_image.bySize.default_md.url}" 
         loading="lazy"
+        alt="{l s='No image available' d='Shop.Theme.Catalog'}"
+        title="{l s='No image available' d='Shop.Theme.Catalog'}"
       >
+    </picture>
   {/if}
 </div>
diff --git a/templates/catalog/_partials/product-images-modal.tpl b/templates/catalog/_partials/product-images-modal.tpl
index 409f6533a..530ee167b 100644
--- a/templates/catalog/_partials/product-images-modal.tpl
+++ b/templates/catalog/_partials/product-images-modal.tpl
@@ -13,12 +13,8 @@
               class="js-modal-product-cover product-cover-modal"
               width="{$product.default_image.bySize.large_default.width}"
               src="{$product.default_image.bySize.large_default.url}"
-              {if !empty($product.default_image.legend)}
-                alt="{$product.default_image.legend}"
-                title="{$product.default_image.legend}"
-              {else}
-                alt="{$product.name}"
-              {/if}
+              alt="{$product.default_image.legend}"
+              title="{$product.default_image.legend}"
               height="{$product.default_image.bySize.large_default.height}"
            >
           {else}
@@ -40,12 +36,8 @@
                       data-image-large-src="{$image.large.url}"
                       class="thumb js-modal-thumb"
                       src="{$image.medium.url}"
-                      {if !empty($image.legend)}
-                        alt="{$image.legend}"
-                        title="{$image.legend}"
-                      {else}
-                        alt="{$product.name}"
-                      {/if}
+                      alt="{$image.legend}"
+                      title="{$image.legend}"
                       width="{$image.medium.width}"
                       height="148"
                    >
diff --git a/templates/catalog/_partials/sort-orders.tpl b/templates/catalog/_partials/sort-orders.tpl
index 6101c3d92..7f87f850c 100644
--- a/templates/catalog/_partials/sort-orders.tpl
+++ b/templates/catalog/_partials/sort-orders.tpl
@@ -11,7 +11,7 @@
     data-bs-toggle="dropdown"
     aria-haspopup="true"
     aria-expanded="false">
-    {if $listing.sort_selected}{$listing.sort_selected}{else}{l s='Select' d='Shop.Theme.Actions'}{/if}
+    {if $listing.sort_selected}{$listing.sort_selected}{else}{l s='Choose' d='Shop.Theme.Actions'}{/if}
     <i class="material-icons ms-2">expand_more</i>
   </button>
   <div class="dropdown-menu dropdown-menu-start">
@@ -20,7 +20,7 @@
         rel="nofollow"
         href="{$sort_order.url}"
         class="dropdown-item select-list {['current' => $sort_order.current, 'js-search-link' => true]|classnames}"
-     >
+      >
         {$sort_order.label}
       </a>
     {/foreach}
diff --git a/templates/catalog/brands.tpl b/templates/catalog/brands.tpl
index e02e565ec..7037a1296 100644
--- a/templates/catalog/brands.tpl
+++ b/templates/catalog/brands.tpl
@@ -6,7 +6,7 @@
 
 {block name='content'}
   {block name='brand_header'}
-    <h1>{l s='Brands' d='Shop.Theme.Catalog'}</h1>
+    {include file="components/page-title-section.tpl" title={l s='Brands' d='Shop.Theme.Catalog'}}
   {/block}
 
   {block name='brand_miniature'}
diff --git a/templates/catalog/listing/manufacturer.tpl b/templates/catalog/listing/manufacturer.tpl
index 1a8c95807..5095a2114 100644
--- a/templates/catalog/listing/manufacturer.tpl
+++ b/templates/catalog/listing/manufacturer.tpl
@@ -5,7 +5,7 @@
 {extends file='catalog/listing/product-list.tpl'}
 
 {block name='product_list_header'}
-  <h1>{l s='List of products by brand %brand_name%' sprintf=['%brand_name%' => $manufacturer.name] d='Shop.Theme.Catalog'}</h1>
+  {include file="components/page-title-section.tpl" title={l s='List of products by brand %brand_name%' sprintf=['%brand_name%' => $manufacturer.name] d='Shop.Theme.Catalog'}}
   <div id="manufacturer-short_description" class="rich-text">{$manufacturer.short_description nofilter}</div>
   <div id="manufacturer-description" class="rich-text">{$manufacturer.description nofilter}</div>
 {/block}
diff --git a/templates/catalog/listing/supplier.tpl b/templates/catalog/listing/supplier.tpl
index 4a4bc9ac5..ab4efa78c 100644
--- a/templates/catalog/listing/supplier.tpl
+++ b/templates/catalog/listing/supplier.tpl
@@ -5,6 +5,6 @@
 {extends file='catalog/listing/product-list.tpl'}
 
 {block name='product_list_header'}
-  <h1>{l s='List of products by supplier %s' sprintf=[$supplier.name] d='Shop.Theme.Catalog'}</h1>
+  {include file="components/page-title-section.tpl" title={l s='List of products by supplier %s' sprintf=[$supplier.name] d='Shop.Theme.Catalog'}}
   <div id="supplier-description" class="rich-text">{$supplier.description nofilter}</div>
 {/block}
diff --git a/templates/catalog/suppliers.tpl b/templates/catalog/suppliers.tpl
index 5666e4637..e54e8395a 100644
--- a/templates/catalog/suppliers.tpl
+++ b/templates/catalog/suppliers.tpl
@@ -5,5 +5,5 @@
 {extends file='catalog/brands.tpl'}
 
 {block name='brand_header'}
-  <h1>{l s='Suppliers' d='Shop.Theme.Catalog'}</h1>
+  {include file="components/page-title-section.tpl" title={l s='Suppliers' d='Shop.Theme.Catalog'}}
 {/block}
diff --git a/templates/checkout/_partials/cart-detailed-product-line.tpl b/templates/checkout/_partials/cart-detailed-product-line.tpl
index 861193e42..dc79a298e 100644
--- a/templates/checkout/_partials/cart-detailed-product-line.tpl
+++ b/templates/checkout/_partials/cart-detailed-product-line.tpl
@@ -10,10 +10,67 @@
     <a class="product-line__title product-line__item" href="{$product.url}"
       data-id_customization="{$product.id_customization|intval}">
       {if $product.default_image}
-        <img src="{$product.default_image.bySize.cart_default.url}" class="img-fluid" alt="{$product.name|escape:'quotes'}"
-          loading="lazy">
+        <picture>
+          {if isset($product.default_image.bySize.default_xs.sources.avif)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_xs.sources.avif},
+                {$product.default_image.bySize.default_m.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($product.default_image.bySize.default_xs.sources.webp)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_xs.sources.webp},
+                {$product.default_image.bySize.default_m.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
+
+          <img
+            class="img-fluid"
+            srcset="
+              {$product.default_image.bySize.default_xs.url},
+              {$product.default_image.bySize.default_m.url} 2x"
+            width="{$product.default_image.bySize.default_xs.width}"
+            height="{$product.default_image.bySize.default_xs.height}"
+            loading="lazy"
+            alt="{$product.name|escape:'quotes'}"
+            title="{$product.name|escape:'quotes'}"
+          >
+        </picture>
       {else}
-        <img src="{$urls.no_picture_image.bySize.cart_default.url}" class="img-fluid" loading="lazy" />
+        <picture>
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                {$urls.no_picture_image.bySize.default_m.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                {$urls.no_picture_image.bySize.default_m.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
+
+          <img
+            class="img-fluid"
+            srcset="
+              {$urls.no_picture_image.bySize.default_xs.url},
+              {$urls.no_picture_image.bySize.default_m.url} 2x"
+            width="{$urls.no_picture_image.bySize.default_xs.width}"
+            height="{$urls.no_picture_image.bySize.default_xs.height}"
+            loading="lazy"
+          >
+        </picture>
       {/if}
     </a>
   </div>
diff --git a/templates/checkout/_partials/cart-summary-product-line.tpl b/templates/checkout/_partials/cart-summary-product-line.tpl
index b211ecdac..836666e84 100644
--- a/templates/checkout/_partials/cart-summary-product-line.tpl
+++ b/templates/checkout/_partials/cart-summary-product-line.tpl
@@ -6,9 +6,67 @@
   <div class="cart-summary__product__image col-md-2">
     <a href="{$product.url}" title="{$product.name}">
       {if $product.default_image}
-        <img src="{$product.default_image.small.url}" alt="{$product.name}" class="img-fluid rounded" loading="lazy">
+        <picture>
+          {if isset($product.default_image.bySize.default_xs.sources.avif)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_xs.sources.avif},
+                {$product.default_image.bySize.default_s.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($product.default_image.bySize.default_xs.sources.webp)}
+            <source 
+              srcset="
+                {$product.default_image.bySize.default_xs.sources.webp},
+                {$product.default_image.bySize.default_s.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
+
+          <img
+            class="img-fluid rounded"
+            srcset="
+              {$product.default_image.bySize.default_xs.url},
+              {$product.default_image.bySize.default_s.url} 2x"
+            width="{$product.default_image.bySize.default_xs.width}"
+            height="{$product.default_image.bySize.default_xs.height}"
+            loading="lazy"
+            alt="{$product.name}"
+            title="{$product.name}"
+          >
+        </picture>
       {else}
-        <img src="{$urls.no_picture_image.bySize.small_default.url}" class="img-fluid" loading="lazy" />
+        <picture>
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                {$urls.no_picture_image.bySize.default_s.sources.avif} 2x"
+              type="image/avif"
+            >
+          {/if}
+
+          {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
+            <source 
+              srcset="
+                {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                {$urls.no_picture_image.bySize.default_s.sources.webp} 2x"
+              type="image/webp"
+            >
+          {/if}
+
+          <img
+            class="img-fluid"
+            srcset="
+              {$urls.no_picture_image.bySize.default_xs.url},
+              {$urls.no_picture_image.bySize.default_s.url} 2x"
+            width="{$urls.no_picture_image.bySize.default_xs.width}"
+            height="{$urls.no_picture_image.bySize.default_xs.height}"
+            loading="lazy"
+          >
+        </picture>
       {/if}
     </a>
   </div>
@@ -38,9 +96,11 @@
       {/if}
     </div>
 
-    <div class="cart-summary__product__basic">
-      <span class="cart-summary__product__regular text-decoration-line-through">{$product.regular_price}</span>
-    </div>
+    {if $product.has_discount}
+      <div class="cart-summary__product__basic">
+        <span class="cart-summary__product__regular text-decoration-line-through">{$product.regular_price}</span>
+      </div>
+    {/if}
 
     {hook h='displayProductPriceBlock' product=$product type="unit_price"}
   </div>
diff --git a/templates/checkout/_partials/cart-voucher.tpl b/templates/checkout/_partials/cart-voucher.tpl
index 859921fdf..19b287a06 100644
--- a/templates/checkout/_partials/cart-voucher.tpl
+++ b/templates/checkout/_partials/cart-voucher.tpl
@@ -45,7 +45,7 @@
               {/block}
 
               {block name='cart_voucher_notifications'}
-                <div class="alert alert-danger js-error d-none" role="alert">
+                <div class="alert alert-danger js-error mt-2" role="alert" style="display: none;">
                   <i class="material-icons">&#xE001;</i><span class="ml-1 js-error-text"></span>
                 </div>
               {/block}
diff --git a/templates/checkout/_partials/order-confirmation-table.tpl b/templates/checkout/_partials/order-confirmation-table.tpl
index 5960887de..66b198c33 100644
--- a/templates/checkout/_partials/order-confirmation-table.tpl
+++ b/templates/checkout/_partials/order-confirmation-table.tpl
@@ -11,9 +11,66 @@
 
       <div class="item__image col-lg-1 col-md-2 col-sm-2 col-3 mb-2 mb-md-0">
           {if !empty($product.default_image)}
-            <img src="{$product.default_image.medium.url}" loading="lazy" class="img-fluid" />
+            <picture>
+              {if isset($product.default_image.bySize.default_xs.sources.avif)}
+                <source 
+                  srcset="
+                    {$product.default_image.bySize.default_xs.sources.avif},
+                    {$product.default_image.bySize.default_m.sources.avif} 2x"
+                  type="image/avif"
+                >
+              {/if}
+
+              {if isset($product.default_image.bySize.default_xs.sources.webp)}
+                <source 
+                  srcset="
+                    {$product.default_image.bySize.default_xs.sources.webp},
+                    {$product.default_image.bySize.default_m.sources.webp} 2x"
+                  type="image/webp"
+                >
+              {/if}
+
+              <img
+                class="img-fluid"
+                srcset="
+                  {$product.default_image.bySize.default_xs.url},
+                  {$product.default_image.bySize.default_m.url} 2x"
+                loading="lazy"
+                width="{$product.default_image.bySize.default_xs.width}"
+                height="{$product.default_image.bySize.default_xs.height}"
+                alt="{$product.default_image.legend}"
+                title="{$product.default_image.legend}"
+            </picture>
           {else}
-            <img src="{$urls.no_picture_image.bySize.medium_default.url}" loading="lazy" class="img-fluid" />
+            <picture>
+              {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
+                <source 
+                  srcset="
+                    {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                    {$urls.no_picture_image.bySize.default_m.sources.avif} 2x"
+                  type="image/avif"
+                >
+              {/if}
+
+              {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
+                <source 
+                  srcset="
+                    {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                    {$urls.no_picture_image.bySize.default_m.sources.webp} 2x"
+                  type="image/webp"
+                >
+              {/if}
+
+              <img
+                class="img-fluid"
+                srcset="
+                  {$urls.no_picture_image.bySize.default_xs.url},
+                  {$urls.no_picture_image.bySize.default_m.url} 2x"
+                width="{$urls.no_picture_image.bySize.default_xs.width}"
+                height="{$urls.no_picture_image.bySize.default_xs.height}"
+                loading="lazy"
+              >
+            </picture>
           {/if}
       </div>
 
diff --git a/templates/checkout/order-confirmation.tpl b/templates/checkout/order-confirmation.tpl
index 7e3647643..669e59845 100644
--- a/templates/checkout/order-confirmation.tpl
+++ b/templates/checkout/order-confirmation.tpl
@@ -38,6 +38,10 @@
     {$HOOK_ORDER_CONFIRMATION nofilter}
   {/block}
 
+  {block name='hook_order_confirmation_1'}
+    {hook h='displayOrderConfirmation1'}
+  {/block}
+
   {block name='order_details'}
     <div class="{$componentName}__details card bg-light border-1 mb-3">
       <div class="card-body">
@@ -72,10 +76,6 @@
     {/block}
   {/if}
 
-  {block name='hook_order_confirmation_1'}
-    {hook h='displayOrderConfirmation1'}
-  {/block}
-
   {block name='hook_order_confirmation_2'}
     {hook h='displayOrderConfirmation2'}
   {/block}
diff --git a/templates/cms/stores.tpl b/templates/cms/stores.tpl
index d9fc334b6..7c4796ff1 100644
--- a/templates/cms/stores.tpl
+++ b/templates/cms/stores.tpl
@@ -16,18 +16,40 @@
           <div class="card-body">
             <div class="row">
               <div class="col-xl-6 store__picture">
-                <img
-                  src="{$store.image.bySize.stores_default.url}"
-                  width="{$store.image.bySize.stores_default.width}"
-                  height="{$store.image.bySize.stores_default.height}"
-                  class="img-fluid"
-                  {if !empty($store.image.legend)}
-                    alt="{$store.image.legend}"
-                    title="{$store.image.legend}"
-                  {else}
-                    alt="{$store.name}"
+                <picture>
+                  {if isset($store.image.bySize.default_m.sources.avif)}
+                    <source 
+                      srcset="
+                        {$store.image.bySize.default_m.sources.avif},
+                        {$store.image.bySize.default_xl.sources.avif} 2x"
+                      type="image/avif"
+                    >
                   {/if}
-              >
+
+                  {if isset($store.image.bySize.default_m.sources.webp)}
+                    <source 
+                      srcset="
+                        {$store.image.bySize.default_m.sources.webp},
+                        {$store.image.bySize.default_xl.sources.webp} 2x"
+                      type="image/webp"
+                    >
+                  {/if}
+
+                  <img
+                    class="img-fluid rounded"
+                    srcset="
+                      {$store.image.bySize.default_m.url},
+                      {$store.image.bySize.default_xl.url} 2x"
+                    loading="lazy"
+                    width="{$store.image.bySize.default_m.width}"
+                    height="{$store.image.bySize.default_m.height}"
+                    {if !empty($store.image.legend)}
+                      alt="{$store.image.legend}"
+                      title="{$store.image.legend}"
+                    {else}
+                      alt="{$store.name}"
+                    {/if}
+                </picture>
               </div>
               <div class="col-xl-6 store__description d-none d-md-block">
                 <h2 class="h6 store__name">{$store.name}</h2>
diff --git a/templates/components/account-menu.tpl b/templates/components/account-menu.tpl
index 5371b0733..5168cfc85 100644
--- a/templates/components/account-menu.tpl
+++ b/templates/components/account-menu.tpl
@@ -5,7 +5,7 @@
 {$componentName = 'account-menu'}
 
 {block name='account_menu'}
-  <div class="{$componentName} hidden-on-mobile">
+  <div class="{$componentName} d-none d-md-flex">
     <p class="{$componentName}__title mb-4 h4">{l s='My Account' d='Shop.Theme.Customeraccount'}</p>
     <a class="{$componentName}__line{if $urls.current_url === $urls.pages.identity} active{/if}" id="identity__link" href="{$urls.pages.identity}">
       <span class="link-item">
diff --git a/templates/components/page-title-section.tpl b/templates/components/page-title-section.tpl
new file mode 100644
index 000000000..12b6fc83d
--- /dev/null
+++ b/templates/components/page-title-section.tpl
@@ -0,0 +1,9 @@
+{**
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ *}
+{$componentName = 'page-title-section'}
+
+{block name='page_title_section'}
+  <h1 class="{$componentName} mb-4">{$title}</h1>
+{/block}
diff --git a/templates/components/password-policy-template.tpl b/templates/components/password-policy-template.tpl
new file mode 100644
index 000000000..0caad2dbd
--- /dev/null
+++ b/templates/components/password-policy-template.tpl
@@ -0,0 +1,54 @@
+
+{**
+ * Copyright since 2007 PrestaShop SA and Contributors
+ * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
+ *
+ * NOTICE OF LICENSE
+ *
+ * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
+ * that is bundled with this package in the file LICENSE.md.
+ * It is also available through the world-wide-web at this URL:
+ * https://opensource.org/licenses/AFL-3.0
+ * If you did not receive a copy of the license and are unable to
+ * obtain it through the world-wide-web, please send an email
+ * to license@prestashop.com so we can send you a copy immediately.
+ *
+ * DISCLAIMER
+ *
+ * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
+ * versions in the future. If you wish to customize PrestaShop for your
+ * needs please refer to https://devdocs.prestashop.com/ for more information.
+ *
+ * @author    PrestaShop SA and Contributors <contact@prestashop.com>
+ * @copyright Since 2007 PrestaShop SA and Contributors
+ * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
+ *}
+
+<template id="password-feedback">
+  <div
+    class="password-strength-feedback d-none"
+  >
+    <div class="progress-container">
+      <div class="progress mb-3">
+        <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+    </div>
+    <script type="text/javascript" class="js-hint-password">
+      {if !empty($page['password-policy']['feedbacks'])}
+        {$page['password-policy']['feedbacks']|@json_encode nofilter}
+      {/if}
+    </script>
+
+    <div class="password-strength-text"></div>
+    <div class="password-requirements">
+      <p class="password-requirements-length" data-translation="{l s='Enter a password between %s and %s characters' d='Shop.Theme.Customeraccount'}">
+        <i class="material-icons">check_circle</i>
+        <span></span>
+      </p>
+      <p class="password-requirements-score" data-translation="{l s='The minimum score must be: %s' d='Shop.Theme.Customeraccount'}">
+        <i class="material-icons">check_circle</i>
+        <span></span>
+      </p>
+    </div>
+  </div>
+</template>
diff --git a/templates/components/qty-input.tpl b/templates/components/qty-input.tpl
index 2de174e42..56846c760 100644
--- a/templates/components/qty-input.tpl
+++ b/templates/components/qty-input.tpl
@@ -18,7 +18,7 @@
   {assign var="append" value=["button"=>"increment", "icon"=>$increment_icon, "confirm_icon"=>$submit_icon]}
 {/if}
 
-<div class="input-group flex-nowrap mb-3">
+<div class="input-group flex-nowrap{if isset($marginHelper)} {$marginHelper}{else} mb-3{/if}">
   <button class="btn {$prepend.button} js-{$prepend.button}-button" type="button">
     <i class="material-icons">&#x{$prepend.icon};</i>
     <i class="material-icons confirmation d-none">&#x{$prepend.confirm_icon};</i>
diff --git a/templates/customer/_partials/customer-form.tpl b/templates/customer/_partials/customer-form.tpl
index e757e89b0..fa306311a 100644
--- a/templates/customer/_partials/customer-form.tpl
+++ b/templates/customer/_partials/customer-form.tpl
@@ -2,37 +2,42 @@
  * For the full copyright and license information, please view the LICENSE
  * file that was distributed with this source code.
  *}
-{block name='customer_form'}
-  {block name='customer_form_errors'}
-    {include file='_partials/form-errors.tpl' errors=$errors['']}
+{block name="customer_form"}
+  {block name="customer_form_errors"}
+    {include file="_partials/form-errors.tpl" errors=$errors[""]}
   {/block}
 
-  <form action="{block name='customer_form_actionurl'}{$action}{/block}" id="customer-form" class="form-validation js-customer-form" method="post" novalidate>
-    <section>
-      {block "form_fields"}
-        {foreach from=$formFields item="field"}
-          {block "form_field"}
-            {form_field field=$field}
-          {/block}
-        {/foreach}
-        {$hook_create_account_form nofilter}
-      {/block}
-    </section>
-
-    {block name='customer_form_footer'}
-      <footer class="form-footer">
-        <input type="hidden" name="submitCreate" value="1">
-        {block "form_buttons"}
-          <button class="btn btn-primary form-control-submit" data-link-action="save-customer" type="submit">
-          {if isset($mode) && $mode === "register"}
-            {l s='Create account' d='Shop.Theme.Actions'}
+<form action="{block name="customer_form_actionurl"}{$action}{/block}" id="customer-form" class="form-validation js-customer-form" method="post" novalidate>
+  <section>
+    {block "form_fields"}
+      {foreach from=$formFields item="field"}
+        {block "form_field"}
+          {if $field.type === "password"}
+            <div class="field-password-policy">
+              {form_field field=$field}
+            </div>
           {else}
-            {l s='Save' d='Shop.Theme.Actions'}
+            {form_field field=$field}
           {/if}
-          </button>
         {/block}
-      </footer>
+      {/foreach}
+      {$hook_create_account_form nofilter}
     {/block}
+  </section>
 
-  </form>
+  {block name='customer_form_footer'}
+    <footer class="form-footer">
+      <input type="hidden" name="submitCreate" value="1">
+      {block "form_buttons"}
+        <button class="btn btn-primary form-control-submit" data-link-action="save-customer" type="submit">
+        {if isset($mode) && $mode === "register"}
+          {l s='Create account' d='Shop.Theme.Actions'}
+        {else}
+          {l s='Save' d='Shop.Theme.Actions'}
+        {/if}
+        </button>
+      {/block}
+    </footer>
+  {/block}
+</form>
 {/block}
diff --git a/templates/customer/_partials/order-detail-no-return.tpl b/templates/customer/_partials/order-detail-no-return.tpl
index 6b982e5af..f31ae85f8 100644
--- a/templates/customer/_partials/order-detail-no-return.tpl
+++ b/templates/customer/_partials/order-detail-no-return.tpl
@@ -18,13 +18,67 @@
         <tr>
           <td>
             {if $product.cover}
-              <img src="{$product.cover.bySize.small_default.url}"
-                alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
-                loading="lazy" data-full-size-image-url="{$product.cover.large.url}" width="64" height="64"
-                class="order-products__image card-img-top w-auto" />
+              <picture>
+                {if isset($product.cover.bySize.default_xs.sources.avif)}
+                  <source 
+                    srcset="
+                      {$product.cover.bySize.default_xs.sources.avif},
+                      {$product.cover.bySize.default_m.sources.avif} 2x",
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($product.cover.bySize.default_xs.sources.webp)}
+                  <source 
+                    srcset="
+                      {$product.cover.bySize.default_xs.sources.webp},
+                      {$product.cover.bySize.default_m.sources.webp} 2x"
+                    type="image/webp"
+                  >
+                {/if}
+
+                <img
+                  class="order-products__image card-img-top w-auto"
+                  srcset="
+                    {$product.cover.bySize.default_xs.url},
+                    {$product.cover.bySize.default_m.url} 2x"
+                  width="{$product.cover.bySize.default_xs.width}"
+                  height="{$product.cover.bySize.default_xs.height}"
+                  loading="lazy"
+                  alt="{$product.cover.legend}"
+                  title="{$product.cover.legend}"
+                >
+              </picture>
             {else}
-              <img src="{$urls.no_picture_image.bySize.small_default.url}" loading="lazy" width="64" height="64"
-                class="order-products__image card-img-top w-auto" />
+              <picture>
+                {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
+                  <source 
+                    srcset="
+                      {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                      {$urls.no_picture_image.bySize.default_m.sources.avif} 2x"
+                    type="image/avif"
+                  >
+                {/if}
+
+                {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
+                  <source 
+                    srcset="
+                      {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                      {$urls.no_picture_image.bySize.default_m.sources.webp} 2x"
+                    type="image/webp"
+                  >
+                {/if}
+
+                <img
+                  class="order-products__image card-img-top w-auto"
+                  srcset="
+                    {$urls.no_picture_image.bySize.default_xs.url},
+                    {$urls.no_picture_image.bySize.default_m.url} 2x"
+                  width="{$urls.no_picture_image.bySize.default_xs.width}"
+                  height="{$urls.no_picture_image.bySize.default_xs.height}"
+                  loading="lazy"
+                >
+              </picture>
             {/if}
           </td>
 
@@ -91,7 +145,7 @@
             <div class="col-4">
               {if $product.cover}
                 <img src="{$product.cover.bySize.small_default.url}"
-                  alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
+                  alt="{$product.cover.legend}"
                   loading="lazy" data-full-size-image-url="{$product.cover.large.url}" width="64" height="64"
                   class="order-products__image card-img-top w-auto" />
               {else}
diff --git a/templates/customer/_partials/order-detail-return.tpl b/templates/customer/_partials/order-detail-return.tpl
index 423025390..81e1a2e37 100644
--- a/templates/customer/_partials/order-detail-return.tpl
+++ b/templates/customer/_partials/order-detail-return.tpl
@@ -120,13 +120,67 @@
               </div>
               <div class="col-4">
                 {if $product.cover}
-                  <img src="{$product.cover.bySize.small_default.url}"
-                    alt="{if !empty($product.cover.legend)}{$product.cover.legend}{else}{$product.name|truncate:30:'...'}{/if}"
-                    loading="lazy" data-full-size-image-url="{$product.cover.large.url}" width="64" height="64"
-                    class="order-products__image card-img-top w-auto" />
+                  <picture>
+                    {if isset($product.cover.bySize.default_xs.sources.avif)}
+                      <source 
+                        srcset="
+                          {$product.cover.bySize.default_xs.sources.avif},
+                          {$product.cover.bySize.default_m.sources.avif} 2x",
+                        type="image/avif"
+                      >
+                    {/if}
+
+                    {if isset($product.cover.bySize.default_xs.sources.webp)}
+                      <source 
+                        srcset="
+                          {$product.cover.bySize.default_xs.sources.webp},
+                          {$product.cover.bySize.default_m.sources.webp} 2x"
+                        type="image/webp"
+                      >
+                    {/if}
+
+                    <img
+                      class="order-products__image card-img-top w-auto"
+                      srcset="
+                        {$product.cover.bySize.default_xs.url},
+                        {$product.cover.bySize.default_m.url} 2x"
+                      width="{$product.cover.bySize.default_xs.width}"
+                      height="{$product.cover.bySize.default_xs.height}"
+                      loading="lazy"
+                      alt="{$product.cover.legend}"
+                      title="{$product.cover.legend}"
+                    >
+                  </picture>
                 {else}
-                  <img src="{$urls.no_picture_image.bySize.small_default.url}" loading="lazy" width="64" height="64"
-                    class="order-products__image card-img-top w-auto" />
+                  <picture>
+                    {if isset($urls.no_picture_image.bySize.default_xs.sources.avif)}
+                      <source 
+                        srcset="
+                          {$urls.no_picture_image.bySize.default_xs.sources.avif},
+                          {$urls.no_picture_image.bySize.default_m.sources.avif} 2x"
+                        type="image/avif"
+                      >
+                    {/if}
+
+                    {if isset($urls.no_picture_image.bySize.default_xs.sources.webp)}
+                      <source 
+                        srcset="
+                          {$urls.no_picture_image.bySize.default_xs.sources.webp},
+                          {$urls.no_picture_image.bySize.default_m.sources.webp} 2x"
+                        type="image/webp"
+                      >
+                    {/if}
+
+                    <img
+                      class="order-products__image card-img-top w-auto"
+                      srcset="
+                        {$urls.no_picture_image.bySize.default_xs.url},
+                        {$urls.no_picture_image.bySize.default_m.url} 2x"
+                      width="{$urls.no_picture_image.bySize.default_xs.width}"
+                      height="{$urls.no_picture_image.bySize.default_xs.height}"
+                      loading="lazy"
+                    >
+                  </picture>
                 {/if}
               </div>
 
diff --git a/templates/customer/_partials/order-messages.tpl b/templates/customer/_partials/order-messages.tpl
index 9c04d6a26..e5cafc881 100644
--- a/templates/customer/_partials/order-messages.tpl
+++ b/templates/customer/_partials/order-messages.tpl
@@ -4,17 +4,17 @@
  *}
 {block name='order_messages_table'}
   {if $order.messages}
-    <div class="box messages">
-      <h3>{l s='Messages' d='Shop.Theme.Customeraccount'}</h3>
+    <div class="customer__messages mb-3">
+      <h3 class="mb-3">{l s='Messages' d='Shop.Theme.Customeraccount'}</h3>
       {foreach from=$order.messages item=message}
-        <div class="message row">
-          <div class="col-sm-4">
-            {$message.name}<br />
-            {$message.message_date}
-          </div>
-          <div class="col-sm-8">
-            {$message.message nofilter}
-          </div>
+        <div class="customer__message border rounded p-3 my-2">
+          <div class="customer__message__content row">
+            <div class="col-sm-4 mb-2 mb-sm-0">
+              <p class="fw-bold mb-0">{$message.name}</p>
+              <p class="fs-6 mb-0">{$message.message_date}</p>
+            </div>
+            <div class="col-sm-8">{$message.message nofilter}</div>
+          </div> 
         </div>
       {/foreach}
     </div>
diff --git a/templates/customer/my-account.tpl b/templates/customer/my-account.tpl
index 003edd56d..0dce65777 100644
--- a/templates/customer/my-account.tpl
+++ b/templates/customer/my-account.tpl
@@ -76,7 +76,7 @@
     {/block}
   </div>
 
-  <a class="{$componentName}__logout hidden-on-desktop" href="{$urls.actions.logout}">
+  <a class="{$componentName}__logout d-md-none" href="{$urls.actions.logout}">
     <i class="material-icons me-2">exit_to_app</i>
     {l s='Sign out' d='Shop.Theme.Actions'}
   </a>
diff --git a/templates/customer/page.tpl b/templates/customer/page.tpl
index 69c04943f..ab94f3bcd 100644
--- a/templates/customer/page.tpl
+++ b/templates/customer/page.tpl
@@ -18,7 +18,7 @@
           </div>
         {/block}
         {block name='account_link'}
-          <a class="btn btn-unstyle hidden-on-desktop account-menu__back" href="{$urls.pages.my_account}">
+          <a class="btn btn-unstyle d-md-none account-menu__back" href="{$urls.pages.my_account}">
             <i class="material-icons">&#xE5CB;</i> {l s='Back to your account' d='Shop.Theme.Customeraccount'}
           </a>
         {/block}
diff --git a/templates/layouts/layout-both-columns.tpl b/templates/layouts/layout-both-columns.tpl
index d70fdcb4b..32c1401f3 100644
--- a/templates/layouts/layout-both-columns.tpl
+++ b/templates/layouts/layout-both-columns.tpl
@@ -91,6 +91,7 @@
     {block name='bottom_elements'}
       {include file="components/page-loader.tpl"}
       {include file='components/toast-container.tpl'}
+      {include file='components/password-policy-template.tpl'}
     {/block}
 
     {block name='hook_before_body_closing_tag'}