diff --git a/website_airproof/__manifest__.py b/website_airproof/__manifest__.py
index 439d09e6b72..f6cd9dc0d5e 100644
--- a/website_airproof/__manifest__.py
+++ b/website_airproof/__manifest__.py
@@ -9,14 +9,18 @@
     'data': [
         # Options
         'data/presets.xml',
+        'data/website.xml',
         # Menu
         'data/menu.xml',
+        # Gradients
+        'data/gradients.xml',
         # Shapes
         'data/shapes.xml',
         # Pages
         'data/pages/home.xml',
         'data/pages/contact.xml',
         # Frontend
+        'views/new_page_template_templates.xml',
         'views/website_templates.xml',
         'views/website_sale_templates.xml',
         'views/website_sale_wishlist_templates.xml',
@@ -35,6 +39,7 @@
         ],
         'web.assets_frontend': [
             # SCSS
+            'website_airproof/static/src/scss/font.scss',
             'website_airproof/static/src/scss/components/mouse_follower.scss',
             'website_airproof/static/src/scss/layout/header.scss',
             'website_airproof/static/src/scss/pages/product_page.scss',
@@ -46,4 +51,9 @@
             'website_airproof/static/src/js/mouse_follower.js',
         ],
     },
+    'new_page_templates': {
+        'airproof': {
+            'services': ['s_parallax', 's_airproof_key_benefits_h2', 's_call_to_action', 's_airproof_carousel']
+        }
+    },
 }
diff --git a/website_airproof/airproof-shop-page.jpg b/website_airproof/airproof-shop-page.jpg
index 0a6a5d50a44..c77e724d7f1 100644
Binary files a/website_airproof/airproof-shop-page.jpg and b/website_airproof/airproof-shop-page.jpg differ
diff --git a/website_airproof/data/gradients.xml b/website_airproof/data/gradients.xml
new file mode 100644
index 00000000000..fd68f07b17c
--- /dev/null
+++ b/website_airproof/data/gradients.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+    <record id="colorpicker" model="ir.ui.view">
+        <field name="key">website_airproof.colorpicker</field>
+        <field name="name">Custom Gradients</field>
+        <field name="type">qweb</field>
+        <field name="inherit_id" ref="web_editor.colorpicker"/>
+        <field name="arch" type="xml">
+            <xpath expr="//div[@data-name='predefined_gradients']/t[@t-set='gradients']" position="after">
+                <t t-set="gradients" t-value="gradients + ['linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%)']"/>
+            </xpath>
+        </field>
+    </record>
+</odoo>
diff --git a/website_airproof/data/images.xml b/website_airproof/data/images.xml
index 08018dc2ccd..e3c7414a4d0 100644
--- a/website_airproof/data/images.xml
+++ b/website_airproof/data/images.xml
@@ -1,10 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 <!-- Branding -->
-    <!-- Set as the logo of the website -->
-    <record id="website.default_website" model="website">
-        <field name="logo" type="base64" file="website_airproof/static/src/img/content/branding/airproof-logo.svg"/>
-    </record>
     <!-- Record the image of the logo -->
     <record id="logo" model="ir.attachment">
         <field name="name">Logo Airproof</field>
diff --git a/website_airproof/data/pages/home.xml b/website_airproof/data/pages/home.xml
index ebfd91ff9f3..7acd510b23c 100644
--- a/website_airproof/data/pages/home.xml
+++ b/website_airproof/data/pages/home.xml
@@ -11,6 +11,7 @@
         <field name="key">website_airproof.page_home</field>
         <field name="url">/</field>
         <field name="type">qweb</field>
+        <field name="header_overlay" eval="True"/>
         <field name="arch" type="xml">
             <t t-name="website_airproof.page_home">
                 <t t-call="website.layout">
@@ -27,14 +28,14 @@
                                 </ol>
                                 <div class="carousel-inner">
                                     <!-- Slide 01 -->
-                                    <div class="carousel-item pt24 pb64 o_colored_level active" data-name="Slide">
+                                    <div class="carousel-item pt64 pb64 o_colored_level active" data-name="Slide">
                                         <div class="oe_unremovable container">
                                             <div class="row content">
                                                 <div class="carousel-content col-lg-6 pt88 position-relative o_colored_level">
                                                     <!-- Image animation -->
                                                     <img src="/web/image/website_airproof.img_sticker" class="img img-fluid position-absolute x_sticker o_animate o_anim_rotate_in o_visible" style="animation-delay: 0.8s; --wanim-intensity: 30;"/>
                                                     <!-- Text animation -->
-                                                    <h1 class="x_carousel_title position-relative z-index-1">
+                                                    <h1 class="x_carousel_title position-relative display-1 z-index-1">
                                                         <span class="o_animated_text o_animate o_anim_fade_in o_anim_from_bottom o_visible">One step</span><br/>
                                                         <span class="o_animated_text o_animate o_anim_fade_in o_anim_from_bottom o_visible" style="animation-delay: 0.2s;">beyond</span><br/>
                                                         <span class="o_animated_text o_animate o_anim_fade_in o_anim_from_bottom o_visible" style="animation-delay: 0.4s;">the horizon</span>
@@ -49,11 +50,11 @@
                                                     <!-- Image animation -->
                                                     <img src="/web/image/website_airproof.img_drone" class="img img-fluid o_animate o_anim_zoom_out o_visible" alt="Drone"/>
                                                     <div class="x_bubble row justify-content-center justify-content-lg-end position-static position-lg-absolute">
-                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble1 bg-white mb-3 pt24 pb24 px-4">
+                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble1 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                                             <p class="fw-bold pb8 m-0">Best drone of the year</p>
                                                             <p class="m-0 small">GQ France</p>
                                                         </div>
-                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble2 bg-white mb-3 pt24 pb24 px-4">
+                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble2 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                                             <div class="s_rating_icons pb8">
                                                                 <span class="s_rating_active_icons">
                                                                     <i class="fa fa-star"/>
@@ -73,7 +74,7 @@
                                         </div>
                                     </div>
                                     <!-- Slide 02 -->
-                                    <div class="carousel-item o_colored_level pt24 pb64" data-name="Slide">
+                                    <div class="carousel-item o_colored_level pt64 pb64" data-name="Slide">
                                         <div class="oe_unremovable container">
                                             <div class="row content">
                                                 <div class="carousel-content col-lg-6 pt88 position-relative">
@@ -88,11 +89,11 @@
                                                 <div class="carousel-content col-lg-6">
                                                     <img src="/web/image/website_airproof.img_drone" class="img img-fluid" alt="Drone"/>
                                                     <div class="x_bubble row justify-content-center justify-content-lg-end position-static position-lg-absolute">
-                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble1 bg-white mb-3 pt24 pb24 px-4">
+                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble1 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                                             <p class="fw-bold pb8 m-0">Best drone of the year</p>
                                                             <p class="m-0 small">GQ France</p>
                                                         </div>
-                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble2 bg-white mb-3 pt24 pb24 px-4">
+                                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble2 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                                             <div class="s_rating_icons pb8">
                                                                 <span class="s_rating_active_icons">
                                                                     <i class="fa fa-star"/>
@@ -174,25 +175,23 @@
                             </div>
                         </section>
                         <!-- Latest products section -->
-                        <section class="s_parallax o_colored_level o_cc o_cc5 s_parallax_no_overflow_hidden pt40 pb32" data-scroll-background-ratio="0" data-snippet="s_parallax" data-name="Parallax" style="background-image: linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%) !important;">
-                            <div class="oe_structure oe_empty" data-editor-message-default="true" data-editor-message="DRAG BUILDING BLOCKS HERE">
-                                <!-- Products title -->
-                                <section class="s_title pb40 o_colored_level" data-vcss="001" data-snippet="s_title" data-name="Title">
-                                    <div class="s_allow_columns container">
-                                        <h2>Our latest products</h2>
-                                    </div>
-                                </section>
-                                <!--  Products dynamic snippet : custom template & Background gradient -->
-                                <section data-snippet="s_dynamic_snippet_products" class="s_product_product_airproof s_dynamic_snippet_products s_dynamic o_colored_level o_dynamic_empty" data-name="Products" data-filter-id="3" data-template-key="website_airproof.dynamic_filter_template_product_product_airproof" data-product-category-id="all" data-number-of-records="16" data-carousel-interval="5000">
-                                    <div class="container o_not_editable">
+                        <section data-snippet="s_dynamic_snippet_products" class="s_dynamic_snippet_products s_dynamic s_dynamic_empty pt32 pb32 o_colored_level s_product_product_airproof o_dynamic_snippet_empty o_cc o_cc5" data-custom-template-data="{}" data-name="Produits" data-product-category-id="all" data-show-variants="" data-number-of-records="16" data-filter-id="3" data-carousel-interval="5000" data-template-key="website_airproof.dynamic_filter_template_product_product_airproof" style="background-image: linear-gradient(0deg, rgb(41, 128, 187) 0%, rgb(11, 142, 230) 100%) !important;">
+                            <div class="container">
+                                <div class="row s_nb_column_fixed">
+                                    <section class="s_dynamic_snippet_title oe_unremovable oe_unmovable d-flex flex-column flex-md-row mb-5 mb-lg-1 pb-5 pb-md-4 o_colored_level justify-content-between">
+                                        <div>
+                                            <h2>Our latest products</h2>
+                                        </div>
+                                    </section>
+                                    <section class="s_dynamic_snippet_content oe_unremovable oe_unmovable o_not_editable col o_colored_level">
                                         <div class="css_non_editable_mode_hidden">
-                                            <div class="missing_option_warning alert alert-info rounded-0 fade show d-none d-print-none">
-                                                Your Dynamic Snippet will be displayed here... This message is displayed because you did not provided both a filter and a template to use.<br/>
+                                            <div class="missing_option_warning alert alert-info fade show d-none d-print-none rounded-0 o_default_snippet_text">
+                                                Your Dynamic Snippet will be displayed here... This message is displayed because you did not provide both a filter and a template to use.<br/>
                                             </div>
                                         </div>
                                         <div class="dynamic_snippet_template"/>
-                                    </div>
-                                </section>
+                                    </section>
+                                </div>
                             </div>
                         </section>
                         <!-- Text-image block & Background shape -->
diff --git a/website_airproof/data/presets.xml b/website_airproof/data/presets.xml
index 2cca52f6308..e4b3637a101 100644
--- a/website_airproof/data/presets.xml
+++ b/website_airproof/data/presets.xml
@@ -57,10 +57,14 @@
     <record id="website_sale.products_categories_top" model="ir.ui.view">
         <field name="active" eval="False"/>
     </record>
-    <!-- Collapse products categories -->
+    <!-- Enable Collapse products categories -->
     <record id="website_sale.option_collapse_products_categories" model="ir.ui.view">
         <field name="active" eval="True"/>
     </record>
+    <!-- Disable Collapse categories recursive -->
+    <record id="website_sale.option_collapse_products_categories" model="ir.ui.view">
+        <field name="active" eval="False"/>
+    </record>
     <!-- Enable Product Attributes filtring -->
     <record id="website_sale.products_attributes" model="ir.ui.view">
         <field name="active" eval="True"/>
@@ -79,7 +83,7 @@
     <record id="website_sale_wishlist.product_add_to_wishlist" model="ir.ui.view">
         <field name="active" eval="True"/>
     </record>
-    <!-- Disable quantity -->
+    <!-- Disable Quantity -->
     <record id="website_sale.product_quantity" model="ir.ui.view">
         <field name="active" eval="False"/>
     </record>
@@ -91,4 +95,8 @@
     <record id="website_sale.product_share_buttons" model="ir.ui.view">
         <field name="active" eval="False"/>
     </record>
-</odoo>
\ No newline at end of file
+    <!-- Enable More information -->
+    <record id="website_sale.accordion_more_information" model="ir.ui.view">
+        <field name="active" eval="True"/>
+    </record>
+</odoo>
diff --git a/website_airproof/data/shapes.xml b/website_airproof/data/shapes.xml
index f89aece780c..e8f359bb8af 100644
--- a/website_airproof/data/shapes.xml
+++ b/website_airproof/data/shapes.xml
@@ -7,4 +7,4 @@
         <field name="url">/web_editor/shape/illustration/airproof/waves.svg</field>
         <field name="public" eval="True"/>
     </record>
-</odoo>
\ No newline at end of file
+</odoo>
diff --git a/website_airproof/data/website.xml b/website_airproof/data/website.xml
new file mode 100644
index 00000000000..e71b76f975c
--- /dev/null
+++ b/website_airproof/data/website.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo noupdate="1">
+   <record id="website.default_website" model="website">
+      <field name="name">Airproof</field>
+      <field name="logo" type="base64" file="website_airproof/static/src/img/content/branding/airproof-logo.svg"/>
+      <field name="favicon" type="base64" file="website_airproof/static/description/airproof-favicon.png" />
+      <field name="shop_ppr">3</field>
+   </record>
+</odoo>
diff --git a/website_airproof/static/description/airproof-favicon.png b/website_airproof/static/description/airproof-favicon.png
new file mode 100644
index 00000000000..33c06df748b
Binary files /dev/null and b/website_airproof/static/description/airproof-favicon.png differ
diff --git a/website_airproof/static/fonts/lato.woff b/website_airproof/static/fonts/lato.woff
new file mode 100644
index 00000000000..a5df43a2bf9
Binary files /dev/null and b/website_airproof/static/fonts/lato.woff differ
diff --git a/website_airproof/static/fonts/lato.woff2 b/website_airproof/static/fonts/lato.woff2
new file mode 100644
index 00000000000..c9c4a6779dd
Binary files /dev/null and b/website_airproof/static/fonts/lato.woff2 differ
diff --git a/website_airproof/static/src/scss/bootstrap_overridden.scss b/website_airproof/static/src/scss/bootstrap_overridden.scss
index 9f47d7cb097..ed4d2182af1 100644
--- a/website_airproof/static/src/scss/bootstrap_overridden.scss
+++ b/website_airproof/static/src/scss/bootstrap_overridden.scss
@@ -5,6 +5,14 @@ $h3-font-size: 2rem !default;
 $h4-font-size: 1.75rem !default;
 $h5-font-size: 1.5rem !default;
 $h6-font-size: 1.25rem !default;
+$display-font-sizes: (
+  1: 6.25rem,
+  2: 4.5rem,
+  3: 4rem,
+  4: 3.5rem,
+  5: 3rem,
+  6: 2.5rem
+);
 
 $headings-font-weight: 700 !default;
 $font-weight-normal: 400 !default;
@@ -29,4 +37,4 @@ $navbar-padding-y: 1.4rem !default;
 $navbar-nav-link-padding-x: 1rem !default;
 
 // Breadcrumb
-$breadcrumb-divider: quote("\f105") !default;
+$breadcrumb-divider: quote("\f105") !default;
\ No newline at end of file
diff --git a/website_airproof/static/src/scss/font.scss b/website_airproof/static/src/scss/font.scss
new file mode 100644
index 00000000000..7333444e9ca
--- /dev/null
+++ b/website_airproof/static/src/scss/font.scss
@@ -0,0 +1,7 @@
+@font-face {
+    font-family: "Lato", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    src: url('/fonts/lato.woff') format('woff'),
+         url('/fonts/lato.woff2') format('woff2');
+}
\ No newline at end of file
diff --git a/website_airproof/static/src/scss/primary_variables.scss b/website_airproof/static/src/scss/primary_variables.scss
index 4eca8b6e984..74920c50170 100644
--- a/website_airproof/static/src/scss/primary_variables.scss
+++ b/website_airproof/static/src/scss/primary_variables.scss
@@ -35,8 +35,7 @@ $o-theme-font-configs: (
         ),
     ),
     'Lato': (
-        'family': ('Lato', 'Trebuchet MS', sans-serif),
-        'url': 'Lato:300,300i,400,400i,700,700i',
+        'family': ('Lato', 'Trebuchet MS', 'Roboto', sans-serif),
         'properties' : (
             'base': (
                 'font-size-base': 1.125rem,
diff --git a/website_airproof/static/src/scss/snippets/caroussel.scss b/website_airproof/static/src/scss/snippets/caroussel.scss
index c5167f67ccc..b6a062052cf 100644
--- a/website_airproof/static/src/scss/snippets/caroussel.scss
+++ b/website_airproof/static/src/scss/snippets/caroussel.scss
@@ -5,7 +5,9 @@
         .carousel-control-next-icon,
         .carousel-control-prev-icon,
         .carousel-control-next .fa,
-        .carousel-control-prev .fa {
+        .carousel-control-prev .fa,
+        .carousel-control-next .oi,
+        .carousel-control-prev .oi {
             display: none;
         }
         .carousel-control-next:after,
@@ -46,7 +48,7 @@
         .carousel-control-prev:after { border-radius: 10px 0 0 10px !important; }
         .carousel-control-next:after {
             border-radius: 0 10px 10px 0 !important;
-            left: 0 !important;
+            left: -4rem !important;
         }
         .carousel-control-prev {
             left: auto !important;
diff --git a/website_airproof/views/new_page_template_templates.xml b/website_airproof/views/new_page_template_templates.xml
new file mode 100644
index 00000000000..7693185d277
--- /dev/null
+++ b/website_airproof/views/new_page_template_templates.xml
@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+<!-- Building blocks for page templates -->
+    <template id="s_airproof_key_benefits_h2" inherit_id="website.s_key_benefits" primary="True">
+        <xpath expr="//h2" position="replace">
+            <h2 class="display-3-fs">Discover our service</h2>
+        </xpath>
+    </template>
+    <template id="new_page_template_airproof_services_s_key_benefits_h2" inherit_id="website_airproof.s_airproof_key_benefits_h2" primary="True"/>
+
+    <template id="new_page_template_airproof_services_s_parallax" inherit_id="website.s_parallax" primary="True"/>
+    <template id="new_page_template_airproof_services_s_call_to_action" inherit_id="website.s_call_to_action" primary="True"/>
+    <template id="new_page_template_airproof_services_s_airproof_carousel" inherit_id="website_airproof.s_airproof_carousel" primary="True"/>
+
+<!-- Page template: Services -->
+    <template id="new_page_template_sections_airproof_services" name="Airproof - New Page Template services">
+        <div id="wrap">
+            <t t-snippet-call="website_airproof.new_page_template_airproof_services_s_parallax"/>
+            <t t-snippet-call="website_airproof.new_page_template_airproof_services_s_key_benefits_h2"/>
+            <t t-snippet-call="website_airproof.new_page_template_airproof_services_s_call_to_action"/>
+            <t t-snippet-call="website_airproof.new_page_template_airproof_services_s_airproof_carousel"/>
+        </div>
+    </template>
+
+<!-- Add custom group to the list for page templates -->
+    <template id="new_page_template_groups" inherit_id="website.new_page_template_groups" name="Airproof - New Page Template Groups">
+        <xpath expr="//div[@id='custom']" position="after">
+            <div id="airproof">Airproof</div>
+        </xpath>
+    </template>
+</odoo>
diff --git a/website_airproof/views/snippets/options.xml b/website_airproof/views/snippets/options.xml
index 81874f0f888..b5fda9b1a88 100644
--- a/website_airproof/views/snippets/options.xml
+++ b/website_airproof/views/snippets/options.xml
@@ -2,17 +2,12 @@
 <odoo>
 <!-- Add custom snippets to the builder -->
     <template id="snippets" inherit_id="website.snippets" name="Airproof - Custom Snippets">
-        <xpath expr="//*[@id='default_snippets']" position="before">
-            <t id="x_theme_snippets">
-                <div id="x_airproof_snippets" class="o_panel">
-                    <div class="o_panel_header">Airproof</div>
-                    <div class="o_panel_body">
-                        <!-- Carousel snippet -->
-                        <t t-snippet="website_airproof.s_airproof_carousel" t-thumbnail="/website_airproof/static/src/img/wbuilder/s-airproof-snippet.svg">
-                            <keywords>Carousel block</keywords>
-                        </t>
-                    </div>
-                </div>
+        <xpath expr="//snippets[@id='snippet_groups']/*[1]" position="before">
+            <t snippet-group="airproof" t-snippet="website.s_snippet_group" string="Airproof" t-thumbnail="/website_airproof/static/src/img/wbuilder/s-airproof-snippet.svg"/>
+        </xpath>
+        <xpath expr="//snippets[@id='snippet_structure']/*[1]" position="before">
+            <t t-snippet="website_airproof.s_airproof_carousel" string="Custom snippet" group="airproof">
+                <keywords>Carousel block</keywords>
             </t>
         </xpath>
     </template>
diff --git a/website_airproof/views/snippets/s_airproof_carousel.xml b/website_airproof/views/snippets/s_airproof_carousel.xml
index a6ff4f964ef..e057e732ddb 100644
--- a/website_airproof/views/snippets/s_airproof_carousel.xml
+++ b/website_airproof/views/snippets/s_airproof_carousel.xml
@@ -10,7 +10,7 @@
                 </ol>
                 <!-- Slide 01 -->
                 <div class="carousel-inner">
-                    <div class="carousel-item o_colored_level pt24 pb64 active" data-name="Slide">  
+                    <div class="carousel-item o_colored_level pt24 pb64 active" data-name="Slide">
                         <div class="oe_unremovable container">
                             <div class="row content">
                                 <div class="carousel-content col-lg-6 pt88 position-relative">
@@ -25,11 +25,11 @@
                                 <div class="carousel-content col-lg-6">
                                     <img src="/web/image/website_airproof.img_drone" class="img img-fluid" alt="Drone"/>
                                     <div class="x_bubble row justify-content-center justify-content-lg-end position-static position-lg-absolute">
-                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble1 bg-white mb-3 pt24 pb24 px-4">
+                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble1 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                             <p class="fw-bold pb8 m-0">Best drone of the year</p>
                                             <p class="m-0 small">GQ France</p>
                                         </div>
-                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble2 bg-white mb-3 pt24 pb24 px-4">
+                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble2 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                             <div class="s_rating_icons pb8">
                                                 <span class="s_rating_active_icons">
                                                     <i class="fa fa-star"/>
@@ -49,7 +49,7 @@
                         </div>
                     </div>
                     <!-- Slide 02 -->
-                    <div class="carousel-item o_colored_level pt24 pb64" data-name="Slide">  
+                    <div class="carousel-item o_colored_level pt24 pb64" data-name="Slide">
                         <div class="oe_unremovable container">
                             <div class="row content">
                                 <div class="carousel-content col-lg-6 pt88 position-relative">
@@ -64,11 +64,11 @@
                                 <div class="carousel-content col-lg-6">
                                     <img src="/web/image/website_airproof.img_drone" class="img img-fluid" alt="Drone"/>
                                     <div class="x_bubble row justify-content-center justify-content-lg-end position-static position-lg-absolute">
-                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble1 bg-white mb-3 pt24 pb24 px-4">
+                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble1 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                             <p class="fw-bold pb8 m-0">Best drone of the year</p>
                                             <p class="m-0 small">GQ France</p>
                                         </div>
-                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble2 bg-white mb-3 pt24 pb24 px-4">
+                                        <div class="col-5 col-lg-5 offset-lg-7 z-index-1 x_bubble_item x_bubble2 o_cc o_cc1 mb-3 pt24 pb24 px-4">
                                             <div class="s_rating_icons pb8">
                                                 <span class="s_rating_active_icons">
                                                     <i class="fa fa-star"/>
@@ -91,17 +91,23 @@
             </div>
         </section>
     </template>
-    
+
     <!-- Add options to snippets -->
     <template id="snippet_options" inherit_id="website.snippet_options" name="Airproof - Snippets Options">
         <xpath expr="." position="inside">
-            <!-- Carousel snippet : blue or green bubble -->
             <div data-selector=".x_bubble_item">
-                <we-button-group string="Bubble shadow">
+                <!-- Bubble shadow color -->
+                <we-button-group string="Bubble Shadow">
                     <we-button data-select-class="x_bubble1">Blue</we-button>
                     <we-button data-select-class="x_bubble2">Green</we-button>
                 </we-button-group>
+                <!-- Bubble spacing -->
+                <we-range string="Bubble Spacing" data-select-class="mb-1|mb-2|mb-3|mb-4|mb-5"/>
             </div>
         </xpath>
+        <xpath expr="//div[@data-js='Box'][@data-selector='section .row > div']" position="attributes">
+            <!-- Disable standard shadow & border for bubbles -->
+            <attribute name="t-attf-data-exclude" add=".x_bubble_item" separator=", "/>
+        </xpath>
     </template>
 </odoo>
diff --git a/website_airproof/views/website_sale_templates.xml b/website_airproof/views/website_sale_templates.xml
index 507ce5ba0fd..ab36de85464 100644
--- a/website_airproof/views/website_sale_templates.xml
+++ b/website_airproof/views/website_sale_templates.xml
@@ -38,7 +38,7 @@
         </xpath>
     </template>
 
-    <!-- Disable Search everywhere -->
+    <!-- Disable Search in shop & product page -->
     <template id="search" inherit_id="website_sale.search" name="Airproof - Search">
         <xpath expr="//t[@t-call='website.website_search_box_input']" position="replace" />
     </template>
@@ -54,6 +54,16 @@
 
 <!-- PRODUCT PAGE -->
     <template id="product" inherit_id="website_sale.product" name="Airproof - Product">
+        <!-- Move breadcrumb -->
+        <xpath expr="//section[@id='product_detail']/div" position="attributes">
+            <attribute name="class" add="justify-content-end" separator=" "/>
+        </xpath>
+        <xpath expr="//section[@id='product_detail']/div/div[1]" position="attributes">
+            <attribute name="class" add="col-lg-4" remove="col order-1 order-lg-0" separator=" "/>
+        </xpath>
+        <xpath expr="//section[@id='product_detail']/div/div[2]" position="attributes">
+            <attribute name="class" add="col-lg-2" remove="col-lg-4" separator=" "/>
+        </xpath>
         <!-- Adapt "Add to wishlist" button -->
         <xpath expr="//div[@id='add_to_cart_wrap']" position="attributes">
             <attribute name="t-attf-class" add="my-2 me-4" remove="mb-2 me-auto" separator=" "/>
@@ -66,23 +76,53 @@
             <img src="/web/image/website_airproof.img_shopping" alt="Shopping icon" class="img img-fluid me-1"/>
             Add to cart
         </xpath>
-        <!-- product_attributes_simple - Specification title -->
-        <xpath expr="//div[@id='product_attributes_simple']/table" position="before">
-            <h2 t-if="single_value_attributes" class="h6 mb-3 mt-5">Specifications</h2>
-        </xpath>
+        <!-- Delete product specifications to move in accordion -->
+        <xpath expr="//div[@id='product_attributes_simple']" position="replace"/>
         <!-- Add drop zone on all products -->
         <xpath expr="//section[@id='product_detail']" position="after">
             <div id="oe_structure_layout_airproof_products" class="oe_structure oe_empty" data-editor-message="DROP ZONE VISIBLE ACROSS ALL PRODUCTS"/>
         </xpath>
     </template>
 
+    <!-- Add product specifications in accordion -->
+    <template id="product_accordion" inherit_id="website_sale.product_accordion" name="Airproof - Product specifications">
+        <xpath expr="//div[@id='product_accordion']" position="inside">
+            <div class="accordion-item">
+            <div t-if="product.valid_product_template_attribute_line_ids._prepare_single_value_for_display()" class="accordion-header my-0 h6">
+                <button class="accordion-button collapsed fw-medium" type="button" data-bs-toggle="collapse" data-bs-target="#specifications" aria-expanded="false" aria-controls="specifications">
+                    Specifications
+                </button>
+            </div>
+            <div id="specifications" class="accordion-collapse collapse" data-bs-parent="#product_accordion">
+                <div class="accordion-body pt-0">
+                    <div t-if="not is_view_active('website_sale_comparison.accordion_specs_item')" id="product_attributes_simple" >
+                        <t t-set="single_value_attributes" t-value="product.valid_product_template_attribute_line_ids._prepare_single_value_for_display()"/>
+                        <table t-attf-class="table table-sm text-muted {{'' if single_value_attributes else 'd-none'}}">
+                            <t t-foreach="single_value_attributes" t-as="attribute">
+                                <tr>
+                                    <td class="border-0">
+                                        <span t-field="attribute.name"/>:
+                                        <t t-foreach="single_value_attributes[attribute]" t-as="ptal">
+                                            <span t-field="ptal.product_template_value_ids._only_active().name"/><t t-if="not ptal_last">, </t>
+                                        </t>
+                                    </td>
+                                </tr>
+                            </t>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            </div>
+        </xpath>
+    </template>
+
     <!-- Product - Img carousel indicators -->
     <template id="carousel_product_indicators" inherit_id="website_sale.carousel_product_indicators" name="Airproof - Carousel product indicators">
         <xpath expr="//ol" position="attributes">
-            <attribute name="t-attf-class" add="justify-content-center p-3" remove="pt-2 pt-lg-0" separator=" "/>
+            <attribute name="t-att-class" add="' justify-content-center p-3'" separator=" + "/>
         </xpath>
         <xpath expr="//li" position="attributes">
-            <attribute name="t-attf-class" add=" border-0 rounded" remove="" separator=" "/>
+            <attribute name="t-attf-class" add="border-0 rounded" separator=" "/>
         </xpath>
     </template>
 
@@ -90,7 +130,7 @@
     <template id="alternative_products" inherit_id="website_sale.alternative_products" name="Airproof - Alternative products">
         <!-- Title -->
         <xpath expr="//div[@id='oe_structure_website_sale_recommended_products']" position="before">
-            <section class="s_title pt64 pb40 o_colored_level" data-snippet="s_title" data-name="Title" style="background-color: #E6E7E8;" t-if="product.alternative_product_ids">
+            <section class="s_title pt64 pb64 o_colored_level" data-vcss="001" data-snippet="s_title" data-name="Title" style="background-color: #E6E7E8;" t-if="product.alternative_product_ids">
                 <div class="container s_allow_columns">
                     <h2 class="text-center fw-bold">You might also like</h2>
                 </div>
diff --git a/website_airproof/views/website_templates.xml b/website_airproof/views/website_templates.xml
index 1fbbc7b7bea..6a2dd13390f 100644
--- a/website_airproof/views/website_templates.xml
+++ b/website_airproof/views/website_templates.xml
@@ -9,6 +9,13 @@
                 data-customize-website-variable="'airproof'"
                 data-img="/website_airproof/static/src/img/wbuilder/template-header-opt.svg"/>
         </xpath>
+        <xpath expr="//*[@data-name='mega_menu_template_opt']/*" position="before">
+            <t t-set="_label">Airproof</t>
+            <we-button t-att-data-select-label="_label"
+                data-select-template="website_airproof.s_mega_menu_airproof"
+                data-img="/website_airproof/static/src/img/wbuilder/template-header-opt.svg"
+                t-out="_label"/>
+        </xpath>
     </template>
     <!-- Custom header -->
     <record id="header" model="ir.ui.view">
@@ -101,6 +108,56 @@
         </field>
     </record>
 
+    <!-- Mega menu template -->
+    <template id="s_mega_menu_airproof" name="Airproof" groups="base.group_user">
+        <section class="s_mega_menu_airproof pt24 pb24" style="background-color: #F4F4F4 !important;">
+            <div class="container">
+                <div class="row">
+                    <div class="col-6 col-sm text-center pt8 pb8 o_colored_level">
+                        <a href="/shop/airproof-mini-1" class="nav-link p-0" data-name="Menu Item">
+                            <img src="/web/image/website_airproof.img_mini" alt="Drone Airproof Mini" class="img-fluid img"/>
+                            <div class="p-2">
+                                <font class="fw-bold">Airproof Mini</font>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-6 col-sm text-center pt8 pb8 o_colored_level">
+                        <a href="/shop/airproof-pro-2" class="nav-link p-0" data-name="Menu Item">
+                            <img src="/web/image/website_airproof.img_pro" alt="Drone Airproof Pro" class="img-fluid img"/>
+                            <div class="p-2">
+                                <font class="fw-bold">Airproof Pro</font>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-6 col-sm text-center pt8 pb8 o_colored_level">
+                        <a href="/shop/airproof-robin-3" class="nav-link p-0" data-name="Menu Item">
+                            <img src="/web/image/website_airproof.img_robin" alt="Drone Airproof Robin" class="img-fluid img"/>
+                            <div class="d-block p-2">
+                                <font class="fw-bold">Airproof Robin</font>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-6 col-sm text-center pt8 pb8 o_colored_level">
+                        <a href="/shop/airproof-falcon-4" class="nav-link p-0" data-name="Menu Item">
+                            <img src="/web/image/website_airproof.img_falcon" alt="Drone Airproof Falcon" class="img-fluid img"/>
+                            <div class="d-block p-2">
+                                <font class="fw-bold">Airproof Falcon</font>
+                            </div>
+                        </a>
+                    </div>
+                    <div class="col-6 col-sm text-center pt8 pb8 o_colored_level">
+                        <a href="/shop/airproof-eagle-5" class="nav-link p-0" data-name="Menu Item">
+                            <img src="/web/image/website_airproof.img_eagle" alt="Drone Airproof Eagle" class="img-fluid img"/>
+                            <div class="d-block p-2">
+                                <font class="fw-bold">Airproof Eagle</font>
+                            </div>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </section>
+    </template>
+
 <!-- FOOTER -->
     <!-- Add option footer -->
     <template id="template_footer_opt" inherit_id="website.snippet_options" name="Airproof Footer Template - Option">
@@ -128,11 +185,14 @@
                                 </div>
                                 <div class="pt40 pb8 o_colored_level col-lg-6">
                                     <div class="s_newsletter_subscribe_form s_newsletter_list js_subscribe" data-vxml="001" data-list-id="0" data-name="Newsletter Form" data-snippet="s_newsletter_subscribe_form">
-                                        <div class="input-group">
-                                            <input type="email" name="email" class="js_subscribe_email form-control border-0 me-3" placeholder="your email..."/>
-                                            <a role="button" href="#" class="js_subscribe_btn o_submit btn btn-primary fw-bold">Subscribe
-                                            </a>
-                                            <a role="button" href="#" class="btn btn-success js_subscribed_btn o_submit d-none fw-bold" disabled="disabled">Thanks</a>
+                                        <div class="js_subscribed_wrap d-none">
+                                            <p class="text-end text-success"><i class="fa fa-check-circle-o" role="img"/> Thanks for registering!</p>
+                                        </div>
+                                        <div class="js_subscribe_wrap">
+                                            <div class="input-group">
+                                                <input type="email" name="email" class="js_subscribe_value form-control border-0 me-3" placeholder="Your email..."/>
+                                                <a role="button" href="#" class="btn btn-primary o_cc o_cc3 js_subscribe_btn o_submit">Subscribe</a>
+                                            </div>
                                         </div>
                                     </div>
                                 </div>
@@ -190,10 +250,9 @@
         </field>
     </record>
 
-<!-- Copyright -->
+    <!-- Copyright -->
     <template id="copyright" inherit_id="website.layout">
         <xpath expr="//div[hasclass('o_footer_copyright')]/div[hasclass('container')]" position="replace">
-            <!-- Content -->
             <div class="container pt24 pb24">
                 <div class="row d-flex flex-row align-items-center justify-content-between">
                     <div class="col-12 col-md-6 col-lg-6 s_social_media text-start o_not_editable no_icon_color" data-snippet="s_social_media" data-name="Social Media">