diff --git a/config/sync/block.block.materiosimplenewssubscription.yml b/config/sync/block.block.materiosimplenewssubscription.yml
index 864986a..a88bf6a 100644
--- a/config/sync/block.block.materiosimplenewssubscription.yml
+++ b/config/sync/block.block.materiosimplenewssubscription.yml
@@ -5,6 +5,7 @@ dependencies:
   module:
     - context
     - materio_simplenews
+    - user
   theme:
     - materiotheme
 id: materiosimplenewssubscription
@@ -33,3 +34,10 @@ visibility:
     pages: ''
     negate: null
     context_mapping: {  }
+  user_role:
+    id: user_role
+    roles:
+      anonymous: anonymous
+    negate: false
+    context_mapping:
+      user: '@user.current_user_context:current_user'
diff --git a/config/sync/core.entity_form_display.node.frontpage.default.yml b/config/sync/core.entity_form_display.node.frontpage.default.yml
index 4326c07..4778761 100644
--- a/config/sync/core.entity_form_display.node.frontpage.default.yml
+++ b/config/sync/core.entity_form_display.node.frontpage.default.yml
@@ -8,6 +8,7 @@ dependencies:
     - field.field.node.frontpage.field_blabla_links
     - field.field.node.frontpage.field_database_links
     - field.field.node.frontpage.field_pricing
+    - field.field.node.frontpage.field_pricing_pitch
     - field.field.node.frontpage.field_showroom_links
     - field.field.node.frontpage.field_showrooms
     - field.field.node.frontpage.field_what_is_materio
@@ -96,6 +97,7 @@ third_party_settings:
     group_pricing:
       children:
         - field_pricing
+        - field_pricing_pitch
       parent_name: group_htabs
       weight: 23
       format_type: tab
@@ -152,6 +154,14 @@ content:
     third_party_settings: {  }
     type: text_textarea
     region: content
+  field_pricing_pitch:
+    weight: 1
+    settings:
+      size: 60
+      placeholder: ''
+    third_party_settings: {  }
+    type: text_textfield
+    region: content
   field_showroom_links:
     weight: 4
     settings:
diff --git a/config/sync/core.entity_view_display.node.frontpage.default.yml b/config/sync/core.entity_view_display.node.frontpage.default.yml
index adcf944..bf30d42 100644
--- a/config/sync/core.entity_view_display.node.frontpage.default.yml
+++ b/config/sync/core.entity_view_display.node.frontpage.default.yml
@@ -8,6 +8,7 @@ dependencies:
     - field.field.node.frontpage.field_blabla_links
     - field.field.node.frontpage.field_database_links
     - field.field.node.frontpage.field_pricing
+    - field.field.node.frontpage.field_pricing_pitch
     - field.field.node.frontpage.field_showroom_links
     - field.field.node.frontpage.field_showrooms
     - field.field.node.frontpage.field_what_is_materio
@@ -97,14 +98,14 @@ third_party_settings:
       region: content
     group_pricing:
       children:
+        - field_pricing_pitch
         - field_pricing
         - computed_products_reference
       parent_name: ''
       weight: 4
       format_type: html_element
       format_settings:
-        element: section
-        show_label: false
+        show_label: true
         label_element: h3
         label_element_classes: ''
         attributes: ''
@@ -112,6 +113,7 @@ third_party_settings:
         speed: fast
         id: ''
         classes: home-pricing
+        element: section
       label: pricing
       region: content
     group_db_col_left:
@@ -324,7 +326,14 @@ content:
     region: content
   field_pricing:
     weight: 5
-    label: above
+    label: hidden
+    settings: {  }
+    third_party_settings: {  }
+    type: text_default
+    region: content
+  field_pricing_pitch:
+    weight: 4
+    label: hidden
     settings: {  }
     third_party_settings: {  }
     type: text_default
diff --git a/config/sync/core.entity_view_display.node.frontpage.teaser.yml b/config/sync/core.entity_view_display.node.frontpage.teaser.yml
index d848b15..3a7a771 100644
--- a/config/sync/core.entity_view_display.node.frontpage.teaser.yml
+++ b/config/sync/core.entity_view_display.node.frontpage.teaser.yml
@@ -9,6 +9,7 @@ dependencies:
     - field.field.node.frontpage.field_blabla_links
     - field.field.node.frontpage.field_database_links
     - field.field.node.frontpage.field_pricing
+    - field.field.node.frontpage.field_pricing_pitch
     - field.field.node.frontpage.field_showroom_links
     - field.field.node.frontpage.field_showrooms
     - field.field.node.frontpage.field_what_is_materio
@@ -76,6 +77,7 @@ hidden:
   field_blabla_links: true
   field_database_links: true
   field_pricing: true
+  field_pricing_pitch: true
   field_showroom_links: true
   field_showrooms: true
   field_what_is_materio: true
diff --git a/config/sync/field.field.node.frontpage.field_pricing_pitch.yml b/config/sync/field.field.node.frontpage.field_pricing_pitch.yml
new file mode 100644
index 0000000..0353e35
--- /dev/null
+++ b/config/sync/field.field.node.frontpage.field_pricing_pitch.yml
@@ -0,0 +1,21 @@
+uuid: 3c7164c6-f8eb-449f-b394-47764bc10ae5
+langcode: en
+status: true
+dependencies:
+  config:
+    - field.storage.node.field_pricing_pitch
+    - node.type.frontpage
+  module:
+    - text
+id: node.frontpage.field_pricing_pitch
+field_name: field_pricing_pitch
+entity_type: node
+bundle: frontpage
+label: 'Pricing pitch'
+description: ''
+required: false
+translatable: true
+default_value: {  }
+default_value_callback: ''
+settings: {  }
+field_type: text
diff --git a/config/sync/field.storage.node.field_pricing_pitch.yml b/config/sync/field.storage.node.field_pricing_pitch.yml
new file mode 100644
index 0000000..e1d2d92
--- /dev/null
+++ b/config/sync/field.storage.node.field_pricing_pitch.yml
@@ -0,0 +1,24 @@
+uuid: 7fb3d321-c82e-43d9-8350-eb2821556692
+langcode: en
+status: true
+dependencies:
+  module:
+    - field_permissions
+    - node
+    - text
+third_party_settings:
+  field_permissions:
+    permission_type: public
+id: node.field_pricing_pitch
+field_name: field_pricing_pitch
+entity_type: node
+type: text
+settings:
+  max_length: 255
+module: text
+locked: false
+cardinality: 1
+translatable: true
+indexes: {  }
+persist_with_no_fields: false
+custom_storage: false
diff --git a/web/themes/custom/materiotheme/assets/dist/main.css b/web/themes/custom/materiotheme/assets/dist/main.css
index eb7af14..069895b 100644
--- a/web/themes/custom/materiotheme/assets/dist/main.css
+++ b/web/themes/custom/materiotheme/assets/dist/main.css
@@ -1497,7 +1497,7 @@ aside.messages {
         #content-left .flag-collection > ul > li article.card.minicard > nav.tools .mdi.unflag {
           cursor: pointer; }
 
-article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-title {
+article.node--type-frontpage .node__content > section.home-intro > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-database > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-showrooms > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-blabla > div:nth-child(1) .field__label, article.node--type-frontpage .node__content > section.home-pricing > h3, article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference > .field__item .field--name-title {
   font-size: 3.5em;
   line-height: 1; }
 
@@ -1530,8 +1530,18 @@ article.node--type-frontpage .node__content > section.home-database, article.nod
 article.node--type-frontpage > h2 {
   display: none; }
 
+article.node--type-frontpage .node__content > section.home-intro .field__item {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center; }
+  article.node--type-frontpage .node__content > section.home-intro .field__item p {
+    flex: 0 0 410px;
+    padding: 1em; }
+
 article.node--type-frontpage .node__content > section.home-database {
   background-color: #69cdcf; }
+  article.node--type-frontpage .node__content > section.home-database .field--name-field-a-database .field__label {
+    cursor: pointer; }
   article.node--type-frontpage .node__content > section.home-database .field--name-field-database-links .field__item {
     display: inline-block; }
     article.node--type-frontpage .node__content > section.home-database .field--name-field-database-links .field__item a {
@@ -1690,8 +1700,26 @@ article.node--type-frontpage .node__content > section.home-blabla {
             font-size: 0.756em;
             line-height: 0.9; }
 
+article.node--type-frontpage .node__content > section.home-pricing > h3 {
+  text-align: center;
+  text-transform: capitalize;
+  padding: 0.7em 0 0.3em 0; }
+
+article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing-pitch {
+  text-align: center; }
+  article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing-pitch p {
+    margin: 0; }
+
 article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing {
-  padding: 2em 0; }
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  padding-bottom: 1em; }
+  article.node--type-frontpage .node__content > section.home-pricing .field--name-field-pricing p {
+    flex: 0 0 410px;
+    padding: 1em;
+    margin: 0;
+    text-align: center; }
 
 article.node--type-frontpage .node__content > section.home-pricing .field--name-computed-products-reference {
   display: flex;
diff --git a/web/themes/custom/materiotheme/assets/dist/main.js b/web/themes/custom/materiotheme/assets/dist/main.js
index 8ac679f..a300200 100644
--- a/web/themes/custom/materiotheme/assets/dist/main.js
+++ b/web/themes/custom/materiotheme/assets/dist/main.js
@@ -1190,7 +1190,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  props: ['html'],\n  // get the html from parent with props\n  data: function data() {\n    return {\n      template: null,\n      // compiled template from html used in render\n      showrooms: [],\n      showroomsOdd: [],\n      showroomsEven: [],\n      showroomMode: 1,\n      showroomInterval: 0,\n      showroomI: 0,\n      showroomJ: 0\n    };\n  },\n  beforeMount: function beforeMount() {\n    // console.log('Home beforeMount');\n    // compile the html src (coming from parent with props or from ajax call)\n    if (this.html) {\n      // console.log('html', this.html);\n      this.compileTemplate();\n    }\n  },\n  render: function render(h) {\n    if (!this.template) {\n      return h('span', 'Loading ...');\n    } else {\n      return this.template.render.call(this);\n    }\n  },\n  mounted: function mounted() {// this.initShowroomCarroussel()\n  },\n  methods: {\n    compileTemplate: function compileTemplate() {\n      var _this = this;\n\n      this.template = _vue.default.compile(this.html);\n      this.$options.staticRenderFns = [];\n      this._staticTrees = [];\n      this.template.staticRenderFns.map(function (fn) {\n        return _this.$options.staticRenderFns.push(fn);\n      });\n      setTimeout(this.initShowroomCarroussel.bind(this), 250);\n    },\n    initShowroomCarroussel: function initShowroomCarroussel() {\n      console.log(\"startShowroomCarroussel\");\n      this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item');\n      console.log('showrooms', this.showrooms);\n\n      for (var i = 0; i < this.showrooms.length; i++) {\n        if (i % 2 === 0) {\n          this.showroomsOdd.push(this.showrooms[i]);\n        } else {\n          this.showroomsEven.push(this.showrooms[i]);\n        }\n      }\n\n      console.log('Odd', this.showroomsOdd);\n      console.log('Even', this.showroomsEven); // TODO: share media query and variables between scss and js\n\n      var column_width = 205;\n      var column_goutiere = 13;\n      var bp = (column_width + column_goutiere) * 7 + 1;\n      var mediaQuery = window.matchMedia(\"(min-width: \".concat(bp, \"px)\")); // Register event listener\n\n      mediaQuery.addListener(this.checkShowroomMode);\n      this.checkShowroomMode(mediaQuery); // this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);\n      // console.log('this.showroomInterval', this.showroomInterval);\n      // this.switchShowroomCarroussel()\n    },\n    checkShowroomMode: function checkShowroomMode(mq) {\n      // default mode 1\n      var newmode = 1;\n\n      if (mq.matches) {\n        // if mediaquery match switch to mode 2\n        newmode = 2;\n      }\n\n      if (newmode !== this.showroomMode) {\n        // if new mode different from old mode\n        // reset sowrooms classes\n        for (var i = 0; i < this.showrooms.length; i++) {\n          this.showrooms[i].classList.remove('active');\n        } // record new mode\n\n\n        this.showroomMode = newmode; // clear interval\n        // if (this.showroomInterval) {\n\n        clearInterval(this.showroomInterval);\n        this.showroomInterval = 0; // }\n        // reset indexes\n\n        this.showroomI = 0;\n        this.showroomJ = 0;\n      } // in any case (re)launch the animation\n\n\n      this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 15000);\n      console.log('this.showroomInterval', this.showroomInterval);\n      this.switchShowroomCarroussel();\n    },\n    switchShowroomCarroussel: function switchShowroomCarroussel() {\n      // console.log('switchShowroomCarroussel i', $elmts, i);\n      if (this.showroomMode === 1) {\n        this.showrooms[this.showroomI].classList.add('active');\n        this.showrooms[this.showroomI - 1 < 0 ? this.showrooms.length - 1 : this.showroomI - 1].classList.remove('active');\n        this.showroomI = this.showroomI + 1 >= this.showrooms.length ? 0 : this.showroomI + 1;\n      } else {\n        this.showroomsOdd[this.showroomI].classList.add('active');\n        this.showroomsOdd[this.showroomI - 1 < 0 ? this.showroomsOdd.length - 1 : this.showroomI - 1].classList.remove('active');\n        this.showroomI = this.showroomI + 1 >= this.showroomsOdd.length ? 0 : this.showroomI + 1;\n        this.showroomsEven[this.showroomJ].classList.add('active');\n        this.showroomsEven[this.showroomJ - 1 < 0 ? this.showroomsEven.length - 1 : this.showroomJ - 1].classList.remove('active');\n        this.showroomJ = this.showroomJ + 1 >= this.showroomsEven.length ? 0 : this.showroomJ + 1;\n      }\n    },\n    onClickLink: function onClickLink(e) {\n      console.log(\"onClickLink\", e, this.$router, this.$route);\n      var path = null; // find existing router route compared with link href\n\n      for (var i = 0; i < this.$router.options.routes.length; i++) {\n        if (this.$router.options.routes[i].path == e.originalTarget.pathname) {\n          if (e.originalTarget.pathname !== this.$route.path) {\n            path = e.originalTarget.pathname;\n          }\n\n          break;\n        }\n      }\n\n      if (path) {\n        this.$router.push({\n          path: path\n        });\n      }\n    }\n  },\n  watch: {\n    html: function html(val) {\n      console.log('html prop changed', val);\n      this.compileTemplate();\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", ({\n  value: true\n}));\nexports.default = void 0;\n\nvar _vue = _interopRequireDefault(__webpack_require__(/*! vue */ \"./node_modules/vue/dist/vue.js\"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nvar _default = {\n  props: ['html'],\n  // get the html from parent with props\n  data: function data() {\n    return {\n      template: null,\n      // compiled template from html used in render\n      showrooms: [],\n      showroomsOdd: [],\n      showroomsEven: [],\n      showroomMode: 1,\n      showroomInterval: 0,\n      showroomI: 0,\n      showroomJ: 0\n    };\n  },\n  beforeMount: function beforeMount() {\n    // console.log('Home beforeMount');\n    // compile the html src (coming from parent with props or from ajax call)\n    if (this.html) {\n      // console.log('html', this.html);\n      this.compileTemplate();\n    }\n  },\n  render: function render(h) {\n    if (!this.template) {\n      return h('span', 'Loading ...');\n    } else {\n      return this.template.render.call(this);\n    }\n  },\n  mounted: function mounted() {// this.initShowroomCarroussel()\n  },\n  methods: {\n    compileTemplate: function compileTemplate() {\n      var _this = this;\n\n      this.template = _vue.default.compile(this.html);\n      this.$options.staticRenderFns = [];\n      this._staticTrees = [];\n      this.template.staticRenderFns.map(function (fn) {\n        return _this.$options.staticRenderFns.push(fn);\n      });\n      setTimeout(this.initShowroomCarroussel.bind(this), 250);\n    },\n    initShowroomCarroussel: function initShowroomCarroussel() {\n      console.log(\"startShowroomCarroussel\");\n      this.showrooms = document.querySelectorAll('.field--name-computed-showrooms-reference > .field__item');\n      console.log('showrooms', this.showrooms);\n\n      for (var i = 0; i < this.showrooms.length; i++) {\n        if (i % 2 === 0) {\n          this.showroomsOdd.push(this.showrooms[i]);\n        } else {\n          this.showroomsEven.push(this.showrooms[i]);\n        }\n      }\n\n      console.log('Odd', this.showroomsOdd);\n      console.log('Even', this.showroomsEven); // TODO: share media query and variables between scss and js\n\n      var column_width = 205;\n      var column_goutiere = 13;\n      var bp = (column_width + column_goutiere) * 7 + 1;\n      var mediaQuery = window.matchMedia(\"(min-width: \".concat(bp, \"px)\")); // Register event listener\n\n      mediaQuery.addListener(this.checkShowroomMode);\n      this.checkShowroomMode(mediaQuery); // this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 5000);\n      // console.log('this.showroomInterval', this.showroomInterval);\n      // this.switchShowroomCarroussel()\n    },\n    checkShowroomMode: function checkShowroomMode(mq) {\n      // default mode 1\n      var newmode = 1;\n\n      if (mq.matches) {\n        // if mediaquery match switch to mode 2\n        newmode = 2;\n      }\n\n      if (newmode !== this.showroomMode) {\n        // if new mode different from old mode\n        // reset sowrooms classes\n        for (var i = 0; i < this.showrooms.length; i++) {\n          this.showrooms[i].classList.remove('active');\n        } // record new mode\n\n\n        this.showroomMode = newmode; // clear interval\n        // if (this.showroomInterval) {\n\n        clearInterval(this.showroomInterval);\n        this.showroomInterval = 0; // }\n        // reset indexes\n\n        this.showroomI = 0;\n        this.showroomJ = 0;\n      } // in any case (re)launch the animation\n\n\n      this.showroomInterval = setInterval(this.switchShowroomCarroussel.bind(this), 15000);\n      console.log('this.showroomInterval', this.showroomInterval);\n      this.switchShowroomCarroussel();\n    },\n    switchShowroomCarroussel: function switchShowroomCarroussel() {\n      // console.log('switchShowroomCarroussel i', $elmts, i);\n      if (this.showroomMode === 1) {\n        this.showrooms[this.showroomI].classList.add('active');\n        this.showrooms[this.showroomI - 1 < 0 ? this.showrooms.length - 1 : this.showroomI - 1].classList.remove('active');\n        this.showroomI = this.showroomI + 1 >= this.showrooms.length ? 0 : this.showroomI + 1;\n      } else {\n        this.showroomsOdd[this.showroomI].classList.add('active');\n        this.showroomsOdd[this.showroomI - 1 < 0 ? this.showroomsOdd.length - 1 : this.showroomI - 1].classList.remove('active');\n        this.showroomI = this.showroomI + 1 >= this.showroomsOdd.length ? 0 : this.showroomI + 1;\n        this.showroomsEven[this.showroomJ].classList.add('active');\n        this.showroomsEven[this.showroomJ - 1 < 0 ? this.showroomsEven.length - 1 : this.showroomJ - 1].classList.remove('active');\n        this.showroomJ = this.showroomJ + 1 >= this.showroomsEven.length ? 0 : this.showroomJ + 1;\n      }\n    },\n    onClickLink: function onClickLink(e) {\n      console.log(\"onClickLink\", e, this.$router, this.$route);\n      var path = null; // find existing router route compared with link href\n\n      for (var i = 0; i < this.$router.options.routes.length; i++) {\n        if (this.$router.options.routes[i].path == e.originalTarget.pathname) {\n          if (e.originalTarget.pathname !== this.$route.path) {\n            path = e.originalTarget.pathname;\n          }\n\n          break;\n        }\n      }\n\n      if (path) {\n        this.$router.push({\n          path: path\n        });\n      }\n    },\n    onClickFieldLabel: function onClickFieldLabel(e) {\n      console.log(\"onClickFieldLabel\", e, this.$router, this.$route);\n    }\n  },\n  watch: {\n    html: function html(val) {\n      console.log('html prop changed', val);\n      this.compileTemplate();\n    }\n  }\n};\nexports.default = _default;\n\n//# sourceURL=webpack://materio.com/./web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue?./node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/index.js??vue-loader-options");
 
 /***/ }),
 
diff --git a/web/themes/custom/materiotheme/assets/styles/main.scss b/web/themes/custom/materiotheme/assets/styles/main.scss
index 41a8d36..6cdebc9 100644
--- a/web/themes/custom/materiotheme/assets/styles/main.scss
+++ b/web/themes/custom/materiotheme/assets/styles/main.scss
@@ -573,11 +573,23 @@ article.node--type-frontpage{
     &>section{
       &.home-intro{
         @extend %part-centered-layout;
+        .field__item{
+          display: flex;
+          flex-flow: row nowrap;
+          justify-content: center;
+          p{
+            flex: 0 0 $column_width * 2;
+            padding:1em;
+          }
+        }
       }
       &.home-database{
         background-color: $color-base;
         @extend %part-columned-layout;
         .field--name-field-a-database{
+          .field__label{
+            cursor: pointer;
+          }
         }
         .field--name-field-database-links{
           .field__item{
@@ -806,8 +818,28 @@ article.node--type-frontpage{
       }
       &.home-pricing{
         @extend %part-centered-layout;
+        >h3{
+          @extend %front-col-field__label;
+          text-align: center;
+          text-transform: capitalize;
+          padding: 0.7em 0 0.3em 0;
+        }
+        .field--name-field-pricing-pitch{
+          text-align: center;
+          p{ margin:0;}
+        }
         .field--name-field-pricing{
-          padding:2em 0;
+          // padding:2em 0;
+          display: flex;
+          flex-flow: row nowrap;
+          justify-content: center;
+          padding-bottom: 1em;
+          p{
+            flex: 0 0 $column_width * 2;
+            padding: 1em;
+            margin: 0;
+            text-align: center;
+          }
         }
         .field--name-computed-products-reference{
           display: flex;
diff --git a/web/themes/custom/materiotheme/materiotheme.theme b/web/themes/custom/materiotheme/materiotheme.theme
index d165a90..0651f7e 100644
--- a/web/themes/custom/materiotheme/materiotheme.theme
+++ b/web/themes/custom/materiotheme/materiotheme.theme
@@ -150,3 +150,24 @@ function materiotheme_theme_suggestions_taxonomy_term_alter(&$suggestions, &$var
 
   // dsm($suggestions);
 }
+
+function materiotheme_theme_suggestions_field_alter(&$suggestions, &$vars){
+  if($vars['element']["#entity_type"] === "commerce_product_variation"
+    && $vars['element']["#bundle"] === "materio_product_variation_type"
+    && $vars['element']["#field_name"] === "title"){
+    $test = 'test';
+    $original = $vars['theme_hook_original'];
+    $entity_type = $vars['element']["#entity_type"];
+    $bundle = $vars['element']["#bundle"];
+    $field_name = $vars['element']["#field_name"];
+    $viewmode = $vars['element']['#view_mode'];
+    $suggestions[] = $original.'__'.$entity_type.'__'.$bundle.'__'.$field_name.'__'.$viewmode;
+  }
+}
+
+/**
+ * Implements hook_theme_suggestions_commerce_product_variation().
+ */
+// function materiotheme_theme_suggestions_commerce_product_variation_later(&$suggestions, &$vars) {
+//   $test = 'test';
+// }
diff --git a/web/themes/custom/materiotheme/templates/content/field--commerce-product-variation--materio-product-variation-type--title--summary.html.twig b/web/themes/custom/materiotheme/templates/content/field--commerce-product-variation--materio-product-variation-type--title--summary.html.twig
new file mode 100644
index 0000000..b223398
--- /dev/null
+++ b/web/themes/custom/materiotheme/templates/content/field--commerce-product-variation--materio-product-variation-type--title--summary.html.twig
@@ -0,0 +1,87 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>
+        <a href="/pricing" @click.prevent="onClickLink">
+          {{ item.content }}
+        </a>
+      </div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>
+      {{ label }}
+    </div>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/web/themes/custom/materiotheme/templates/content/field--node--field-a-database--frontpage.html.twig b/web/themes/custom/materiotheme/templates/content/field--node--field-a-database--frontpage.html.twig
new file mode 100644
index 0000000..0b2167e
--- /dev/null
+++ b/web/themes/custom/materiotheme/templates/content/field--node--field-a-database--frontpage.html.twig
@@ -0,0 +1,81 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }} @click.prevent="onClickFieldLabel($event, 'database')">{{ label }}</div>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/web/themes/custom/materiotheme/templates/content/field--node--field-blabla--frontpage.html.twig b/web/themes/custom/materiotheme/templates/content/field--node--field-blabla--frontpage.html.twig
new file mode 100644
index 0000000..4fb3991
--- /dev/null
+++ b/web/themes/custom/materiotheme/templates/content/field--node--field-blabla--frontpage.html.twig
@@ -0,0 +1,84 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>
+      <a href="/blabla" @click.prevent="onClickLink">
+        {{ label }}</div>
+      </a>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/web/themes/custom/materiotheme/templates/content/field--node--field-showrooms--frontpage.html.twig b/web/themes/custom/materiotheme/templates/content/field--node--field-showrooms--frontpage.html.twig
new file mode 100644
index 0000000..a5167f7
--- /dev/null
+++ b/web/themes/custom/materiotheme/templates/content/field--node--field-showrooms--frontpage.html.twig
@@ -0,0 +1,84 @@
+{#
+/**
+ * @file
+ * Theme override for a field.
+ *
+ * To override output, copy the "field.html.twig" from the templates directory
+ * to your theme's directory and customize it, just like customizing other
+ * Drupal templates such as page.html.twig or node.html.twig.
+ *
+ * Instead of overriding the theming for all fields, you can also just override
+ * theming for a subset of fields using
+ * @link themeable Theme hook suggestions. @endlink For example,
+ * here are some theme hook suggestions that can be used for a field_foo field
+ * on an article node type:
+ * - field--node--field-foo--article.html.twig
+ * - field--node--field-foo.html.twig
+ * - field--node--article.html.twig
+ * - field--field-foo.html.twig
+ * - field--text-with-summary.html.twig
+ * - field.html.twig
+ *
+ * Available variables:
+ * - attributes: HTML attributes for the containing element.
+ * - label_hidden: Whether to show the field label or not.
+ * - title_attributes: HTML attributes for the title.
+ * - label: The label for the field.
+ * - multiple: TRUE if a field can contain multiple items.
+ * - items: List of all the field items. Each item contains:
+ *   - attributes: List of HTML attributes for each item.
+ *   - content: The field item's content.
+ * - entity_type: The entity type to which the field belongs.
+ * - field_name: The name of the field.
+ * - field_type: The type of the field.
+ * - label_display: The display settings for the label.
+ *
+ *
+ * @see template_preprocess_field()
+ */
+#}
+{%
+  set classes = [
+    'field',
+    'field--name-' ~ field_name|clean_class,
+    'field--type-' ~ field_type|clean_class,
+    'field--label-' ~ label_display,
+    label_display == 'inline' ? 'clearfix',
+  ]
+%}
+{%
+  set title_classes = [
+    'field__label',
+    label_display == 'visually_hidden' ? 'visually-hidden',
+  ]
+%}
+
+{% if label_hidden %}
+  {% if multiple %}
+    <div{{ attributes.addClass(classes, 'field__items') }}>
+      {% for item in items %}
+        <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+      {% endfor %}
+    </div>
+  {% else %}
+    {% for item in items %}
+      <div{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+  {% endif %}
+{% else %}
+  <div{{ attributes.addClass(classes) }}>
+    <div{{ title_attributes.addClass(title_classes) }}>
+      <a href="/showrooms" @click.prevent="onClickLink">
+        {{ label }}</div>
+      </a>
+    {% if multiple %}
+      <div class="field__items">
+    {% endif %}
+    {% for item in items %}
+      <div{{ item.attributes.addClass('field__item') }}>{{ item.content }}</div>
+    {% endfor %}
+    {% if multiple %}
+      </div>
+    {% endif %}
+  </div>
+{% endif %}
diff --git a/web/themes/custom/materiotheme/templates/content/field-group-html-element--node--frontpage--group-pricing.html.twig b/web/themes/custom/materiotheme/templates/content/field-group-html-element--node--frontpage--group-pricing.html.twig
new file mode 100644
index 0000000..020d003
--- /dev/null
+++ b/web/themes/custom/materiotheme/templates/content/field-group-html-element--node--frontpage--group-pricing.html.twig
@@ -0,0 +1,34 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a fieldgroup html element.
+ *
+ * Available variables:
+ * - title: Title of the group.
+ * - title_element: Element to wrap the title.
+ * - children: The children of the group.
+ * - wrapper_element: The html element to use
+ * - attributes: A list of HTML attributes for the group wrapper.
+ *
+ * @see template_preprocess_field_group_html_element()
+ *
+ * @ingroup themeable
+ */
+#}
+
+<{{ wrapper_element }} {{ attributes }}>
+  {% if title %}
+  <{{ title_element }}{{ title_attributes }}>
+    <a href="/pricing" @click.prevent="onClickLink">
+      {{ title }}
+    </a>
+  </{{ title_element }}>
+  {% endif %}
+  {% if collapsible %}
+  <div class="field-group-wrapper">
+  {% endif %}
+  {{children}}
+  {% if collapsible %}
+  </div>
+  {% endif %}
+</{{ wrapper_element }}>
diff --git a/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue b/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue
index bddf3bf..8ec5893 100644
--- a/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Pages/Home.vue
@@ -134,6 +134,9 @@ export default {
           path: path
         })
       }
+    },
+    onClickFieldLabel(e){
+      console.log("onClickFieldLabel", e, this.$router, this.$route);
     }
   },
   watch: {