From 1e986f0e0fddab6076b8b28161a825ddb8310b95 Mon Sep 17 00:00:00 2001
From: Damien Foulhoux <Lucanis@users.noreply.github.com>
Date: Fri, 13 Sep 2024 16:24:44 +0200
Subject: [PATCH] change file extension twig components (#57)

* change file extension twig components

* typo

* typo

* improve component integ
---
 404.html.twig                                 |  2 +-
 base.html.twig                                |  4 +-
 category.html.twig                            |  4 +-
 checkout.html.twig                            |  6 +--
 .../Colors/{Colors.twig => Colors.html.twig}  |  0
 components/Atoms/Colors/Colors.stories.js     |  2 +-
 components/Atoms/Font/Font.stories.js         |  6 +--
 .../Font/{Other.twig => Other.html.twig}      |  0
 .../{Paragraph.twig => Paragraph.html.twig}   |  0
 .../Font/{Title.twig => Title.html.twig}      |  0
 .../{Checkbox.twig => Checkbox.html.twig}     |  0
 components/Atoms/Form/Checkboxs.html.twig     |  7 +++
 components/Atoms/Form/Checkboxs.twig          |  7 ---
 components/Atoms/Form/Form.stories.js         |  6 +--
 .../Form/{Radio.twig => Radio.html.twig}      |  0
 components/Atoms/Form/Radios.html.twig        |  5 ++
 components/Atoms/Form/Radios.twig             |  5 --
 .../Form/{Toggle.twig => Toggle.html.twig}    |  0
 components/Atoms/Form/Toggles.html.twig       |  4 ++
 components/Atoms/Form/Toggles.twig            |  4 --
 .../Atoms/Icon/{Icon.twig => Icon.html.twig}  |  0
 components/Atoms/Icon/Icon.stories.js         |  2 +-
 .../CategoryProduct/CategoryProduct.html.twig | 12 ++---
 .../CrossSelling/CrossSelling.html.twig       | 19 +++++++
 .../CrossSelling/CrossSelling.stories.js      |  2 +-
 .../Layout/CrossSelling/CrossSelling.twig     | 21 --------
 .../Footer/{Footer.twig => Footer.html.twig}  |  4 +-
 components/Layout/Footer/Footer.stories.js    |  4 +-
 ...Checkout.twig => FooterCheckout.html.twig} |  0
 .../Header/{Header.twig => Header.html.twig}  | 10 ++--
 components/Layout/Header/Header.stories.js    |  4 +-
 ...Checkout.twig => HeaderCheckout.html.twig} |  0
 .../Layout/Hero/{Hero.twig => Hero.html.twig} |  2 +-
 components/Layout/Hero/Hero.stories.js        | 10 ++--
 .../ProductCategory/ProductCategory.html.twig | 12 +++++
 .../ProductCategory.stories.js                |  2 +-
 .../ProductCategory/ProductCategory.twig      | 12 -----
 ...tGallery.twig => ProductGallery.html.twig} |  0
 components/Layout/ProductGallery/test.twig    |  1 -
 ...anner.twig => PromotionalBanner.html.twig} |  0
 .../PromotionalBanner.stories.js              |  2 +-
 ...Reinsurance.twig => Reinsurance.html.twig} |  0
 .../Layout/Reinsurance/Reinsurance.stories.js |  2 +-
 .../Review/{Review.twig => Review.html.twig}  |  4 +-
 components/Layout/Review/Review.stories.js    |  2 +-
 ...rContent.twig => SimilarContent.html.twig} |  4 +-
 .../SimilarContent/SimilarContent.stories.js  |  2 +-
 ...egory.twig => SubheaderCategory.html.twig} |  2 +-
 .../Category/SubheaderCategory.stories.js     |  2 +-
 ...ge.twig => SubheaderContentPage.html.twig} |  0
 .../SubheaderContentPage.stories.js           |  2 +-
 .../Orders/SubheaderOrders.html.twig          | 12 +++++
 .../Orders/SubheaderOrders.stories.js         |  2 +-
 .../Subheader/Orders/SubheaderOrders.twig     | 12 -----
 ...rSearch.twig => SubheaderSearch.html.twig} |  4 +-
 .../SearchResult/SubheaderSearch.stories.js   |  2 +-
 ...derTitle.twig => SubheaderTitle.html.twig} |  0
 .../TitleOnly/SubheaderTitle.stories.js       |  2 +-
 .../{Accordion.twig => Accordion.html.twig}   |  0
 .../Molecules/Accordion/Accordion.stories.js  | 20 ++++----
 .../{Breadcrumb.twig => Breadcrumb.html.twig} |  0
 .../Breadcrumb/Breadcrumb.stories.js          |  5 +-
 .../Button/{Button.twig => Button.html.twig}  |  0
 components/Molecules/Button/Button.stories.js |  8 +--
 .../{Classic.twig => Classic.html.twig}       | 12 ++---
 .../Molecules/Button/Quantities.html.twig     | 39 +++++++++++++++
 components/Molecules/Button/Quantities.twig   | 39 ---------------
 .../{Quantity.twig => Quantity.html.twig}     |  0
 ...tyButton.twig => QuantityButton.html.twig} |  4 +-
 .../Button/{Rounds.twig => Rounds.html.twig}  |  8 +--
 .../{Dropdown.twig => Dropdown.html.twig}     |  0
 .../Molecules/Dropdown/Dropdown.stories.js    | 19 ++++---
 .../{Favorite.twig => Favorite.html.twig}     |  0
 .../Molecules/Favorite/Favorite.stories.js    |  2 +-
 .../{FieldInput.twig => FieldInput.html.twig} |  4 +-
 .../Fields/FieldInput/FieldInput.stories.js   |  2 +-
 ...FieldNumber.twig => FieldNumber.html.twig} |  0
 .../Fields/FieldNumber/FieldNumber.stories.js | 12 ++---
 ...FieldSelect.twig => FieldSelect.html.twig} |  2 +-
 .../Fields/FieldSelect/FieldSelect.stories.js | 22 +++++----
 .../{FilterList.twig => FilterList.html.twig} |  0
 .../Filters/FilterList/FilterList.stories.js  |  8 +--
 .../{FilterPill.twig => FilterPill.html.twig} |  0
 .../Filters/FilterPill/FilterPill.stories.js  |  2 +-
 ...lterSelect.twig => FilterSelect.html.twig} |  0
 ...aderButton.twig => HeaderButton.html.twig} |  0
 .../HeaderButton/HeaderButton.stories.js      |  2 +-
 .../HeaderButton/HeaderButtons.html.twig      | 15 ++++++
 .../Molecules/HeaderButton/HeaderButtons.twig | 15 ------
 .../{ItemHeader.twig => ItemHeader.html.twig} |  0
 .../ItemHeader/ItemHeader.stories.js          |  2 +-
 .../Link/{Link.twig => Link.html.twig}        |  0
 components/Molecules/Link/Link.stories.js     | 20 +++-----
 .../{OrderTag.twig => OrderTag.html.twig}     |  0
 .../Molecules/OrderTag/OrderTag.stories.js    | 24 ++++-----
 .../{Pagination.twig => Pagination.html.twig} |  0
 .../Pagination/Pagination.stories.js          |  4 +-
 ...ntrols.twig => PasswordControls.html.twig} |  0
 .../PasswordControls.stories.js               |  4 +-
 .../{RadioCard.twig => RadioCard.html.twig}   |  0
 .../Molecules/RadioCard/RadioCard.stories.js  |  2 +-
 .../Score/{Score.twig => Score.html.twig}     |  0
 components/Molecules/Score/Score.stories.js   |  8 +--
 .../SearchBar/{Base.twig => Base.html.twig}   |  2 +-
 .../{SearchBar.twig => SearchBar.html.twig}   |  0
 .../Molecules/SearchBar/SearchBar.stories.js  |  2 +-
 .../{Shortcut.twig => Shortcut.html.twig}     |  0
 .../Molecules/Shortcut/Shortcut.stories.js    |  2 +-
 .../Step/{Steps.twig => Steps.html.twig}      |  0
 components/Molecules/Step/Steps.stories.js    |  2 +-
 .../Molecules/Tab/{Tab.twig => Tab.html.twig} |  0
 components/Molecules/Tab/Tab.stories.js       | 14 +++---
 .../Molecules/Tag/{Tag.twig => Tag.html.twig} |  0
 components/Molecules/Tag/Tag.stories.js       | 28 +++++------
 .../{Tooltip.twig => Tooltip.html.twig}       |  0
 .../Molecules/Tooltip/Tooltip.stories.js      | 13 ++---
 .../{UserMenu.twig => UserMenu.html.twig}     |  0
 .../Molecules/userMenu/UserMenu.stories.js    | 10 ++--
 .../{AddToCart.twig => AddToCart.html.twig}   |  2 +-
 .../Organisms/AddToCart/AddToCart.stories.js  |  2 +-
 ...AddressCard.twig => AddressCard.html.twig} |  4 +-
 .../Card/Address/AddressCard.stories.js       | 31 ++++++------
 ...sCard.twig => ClientAddressCard.html.twig} |  2 +-
 .../{Article.twig => Article.html.twig}       |  0
 .../Organisms/Card/Article/Article.stories.js |  2 +-
 .../{OrderCard.twig => OrderCard.html.twig}   |  4 +-
 .../Organisms/Card/Order/OrderCard.stories.js |  2 +-
 .../Organisms/Card/Payment/Payment.stories.js |  2 +-
 ...PaymentCard.twig => PaymentCard.html.twig} |  4 +-
 ...PickupPoint.twig => PickupPoint.html.twig} |  4 +-
 .../Card/PickupPoint/PickupPoint.stories.js   |  4 +-
 ...rawer.twig => PickupPointDrawer.html.twig} |  2 +-
 .../Review/{Review.twig => Review.html.twig}  |  2 +-
 .../Organisms/Card/Review/Review.stories.js   | 13 ++---
 ...Promotion.twig => SelfPromotion.html.twig} |  0
 .../SelfPromotion/SelfPromotion.stories.js    |  2 +-
 .../{StoreInfo.twig => StoreInfo.html.twig}   |  4 +-
 .../Card/StoreInfo/StoreInfo.stories.js       |  2 +-
 ...tFilters.twig => SuggestFilters.html.twig} |  2 +-
 .../SuggestFilters/SuggestFilters.stories.js  |  7 +--
 ...Transporter.twig => Transporter.html.twig} |  2 +-
 .../Card/Transporter/Transporter.stories.js   |  6 +--
 ...tegoryCard.twig => CategoryCard.html.twig} |  2 +-
 .../CategoryCard/CategoryCard.stories.js      |  2 +-
 .../Organisms/HeaderNav/HeaderNav.html.twig   |  7 +++
 components/Organisms/HeaderNav/HeaderNav.twig |  7 ---
 ...erClassic.twig => FilterClassic.html.twig} |  4 +-
 ...FilterColor.twig => FilterColor.html.twig} |  4 +-
 .../Modules/Filters/Filters.stories.js        |  4 +-
 ...meDelivery.twig => HomeDelivery.html.twig} | 16 +++---
 .../HomeDelivery/HomeDelivery.stories.js      |  2 +-
 .../{Payment.twig => Payment.html.twig}       | 12 ++---
 .../Modules/Payment/Payment.stories.js        |  2 +-
 ...odule.twig => PickupPointModule.html.twig} | 12 ++---
 .../PickupPointModule.stories.js              |  2 +-
 ...eDelivery.twig => StoreDelivery.html.twig} |  8 +--
 .../StoreDelivery/StoreDelivery.stories.js    |  2 +-
 .../AddToCartConfirmation.html.twig           |  1 +
 .../ProductCard/AddToCartConfirmation.twig    |  1 -
 .../Organisms/ProductCard/Order.html.twig     |  1 +
 components/Organisms/ProductCard/Order.twig   |  1 -
 ...ProductCard.twig => ProductCard.html.twig} | 12 ++---
 .../ProductCard/ProductCard.stories.js        | 12 ++---
 .../ProductCard/PurchaseFunnel.html.twig      | 17 +++++++
 .../Organisms/ProductCard/PurchaseFunnel.twig | 17 -------
 .../ProductCard/RemoveProduct.html.twig       |  1 +
 .../Organisms/ProductCard/RemoveProduct.twig  |  1 -
 .../Organisms/ProductCard/Search.html.twig    | 13 +++++
 components/Organisms/ProductCard/Search.twig  | 13 -----
 .../Organisms/ProductCard/Standard.html.twig  |  1 +
 .../Organisms/ProductCard/Standard.twig       |  1 -
 ...Reinsurance.twig => Reinsurance.html.twig} |  0
 .../Reinsurance/Reinsurance.stories.js        |  2 +-
 ...Card.twig => SimilarContentCard.html.twig} |  0
 .../SimilarContentCard.stories.js             |  2 +-
 .../{SnackBar.twig => SnackBar.html.twig}     |  2 +-
 .../Organisms/SnackBar/SnackBar.stories.js    |  2 +-
 ...SummaryCard.twig => SummaryCard.html.twig} |  4 +-
 .../SummaryCard/SummaryCard.stories.js        |  2 +-
 components/account-address.html.twig          |  6 +--
 components/account-orders.html.twig           |  4 +-
 components/account.html.twig                  |  2 +-
 config/packages/.gitkeep                      |  0
 content.html.twig                             | 10 ++--
 email-verification.html.twig                  |  4 +-
 error.html.twig                               |  2 +-
 faq.html.twig                                 |  8 +--
 index.html.twig                               | 41 ++++------------
 login.html.twig                               | 10 ++--
 product.html.twig                             | 23 +++++----
 register.html.twig                            | 20 ++++----
 search.html.twig                              |  4 +-
 src/FlexyBundle.php                           |  9 +++-
 src/Twig/CrossSelling.php                     | 36 ++++++++++++++
 src/Twig/ProductCategory.php                  | 49 +++++++++++++++++++
 .../{messages.en.yaml => messages.en_US.yaml} |  0
 .../{messages.fr.yaml => messages.fr_FR.yaml} |  0
 wishlist.html.twig                            |  2 +-
 198 files changed, 604 insertions(+), 535 deletions(-)
 rename components/Atoms/Colors/{Colors.twig => Colors.html.twig} (100%)
 rename components/Atoms/Font/{Other.twig => Other.html.twig} (100%)
 rename components/Atoms/Font/{Paragraph.twig => Paragraph.html.twig} (100%)
 rename components/Atoms/Font/{Title.twig => Title.html.twig} (100%)
 rename components/Atoms/Form/{Checkbox.twig => Checkbox.html.twig} (100%)
 create mode 100644 components/Atoms/Form/Checkboxs.html.twig
 delete mode 100644 components/Atoms/Form/Checkboxs.twig
 rename components/Atoms/Form/{Radio.twig => Radio.html.twig} (100%)
 create mode 100644 components/Atoms/Form/Radios.html.twig
 delete mode 100644 components/Atoms/Form/Radios.twig
 rename components/Atoms/Form/{Toggle.twig => Toggle.html.twig} (100%)
 create mode 100644 components/Atoms/Form/Toggles.html.twig
 delete mode 100644 components/Atoms/Form/Toggles.twig
 rename components/Atoms/Icon/{Icon.twig => Icon.html.twig} (100%)
 create mode 100644 components/Layout/CrossSelling/CrossSelling.html.twig
 delete mode 100644 components/Layout/CrossSelling/CrossSelling.twig
 rename components/Layout/Footer/{Footer.twig => Footer.html.twig} (90%)
 rename components/Layout/Footer/{FooterCheckout.twig => FooterCheckout.html.twig} (100%)
 rename components/Layout/Header/{Header.twig => Header.html.twig} (73%)
 rename components/Layout/Header/{HeaderCheckout.twig => HeaderCheckout.html.twig} (100%)
 rename components/Layout/Hero/{Hero.twig => Hero.html.twig} (93%)
 create mode 100644 components/Layout/ProductCategory/ProductCategory.html.twig
 delete mode 100644 components/Layout/ProductCategory/ProductCategory.twig
 rename components/Layout/ProductGallery/{ProductGallery.twig => ProductGallery.html.twig} (100%)
 delete mode 100644 components/Layout/ProductGallery/test.twig
 rename components/Layout/PromotionalBanner/{PromotionalBanner.twig => PromotionalBanner.html.twig} (100%)
 rename components/Layout/Reinsurance/{Reinsurance.twig => Reinsurance.html.twig} (100%)
 rename components/Layout/Review/{Review.twig => Review.html.twig} (57%)
 rename components/Layout/SimilarContent/{SimilarContent.twig => SimilarContent.html.twig} (67%)
 rename components/Layout/Subheader/Category/{SubheaderCategory.twig => SubheaderCategory.html.twig} (81%)
 rename components/Layout/Subheader/ContentPage/{SubheaderContentPage.twig => SubheaderContentPage.html.twig} (100%)
 create mode 100644 components/Layout/Subheader/Orders/SubheaderOrders.html.twig
 delete mode 100644 components/Layout/Subheader/Orders/SubheaderOrders.twig
 rename components/Layout/Subheader/SearchResult/{SubheaderSearch.twig => SubheaderSearch.html.twig} (51%)
 rename components/Layout/Subheader/TitleOnly/{SubheaderTitle.twig => SubheaderTitle.html.twig} (100%)
 rename components/Molecules/Accordion/{Accordion.twig => Accordion.html.twig} (100%)
 rename components/Molecules/Breadcrumb/{Breadcrumb.twig => Breadcrumb.html.twig} (100%)
 rename components/Molecules/Button/{Button.twig => Button.html.twig} (100%)
 rename components/Molecules/Button/{Classic.twig => Classic.html.twig} (84%)
 create mode 100644 components/Molecules/Button/Quantities.html.twig
 delete mode 100644 components/Molecules/Button/Quantities.twig
 rename components/Molecules/Button/{Quantity.twig => Quantity.html.twig} (100%)
 rename components/Molecules/Button/{QuantityButton.twig => QuantityButton.html.twig} (50%)
 rename components/Molecules/Button/{Rounds.twig => Rounds.html.twig} (80%)
 rename components/Molecules/Dropdown/{Dropdown.twig => Dropdown.html.twig} (100%)
 rename components/Molecules/Favorite/{Favorite.twig => Favorite.html.twig} (100%)
 rename components/Molecules/Fields/FieldInput/{FieldInput.twig => FieldInput.html.twig} (90%)
 rename components/Molecules/Fields/FieldNumber/{FieldNumber.twig => FieldNumber.html.twig} (100%)
 rename components/Molecules/Fields/FieldSelect/{FieldSelect.twig => FieldSelect.html.twig} (93%)
 rename components/Molecules/Filters/FilterList/{FilterList.twig => FilterList.html.twig} (100%)
 rename components/Molecules/Filters/FilterPill/{FilterPill.twig => FilterPill.html.twig} (100%)
 rename components/Molecules/Filters/FilterSelect/{FilterSelect.twig => FilterSelect.html.twig} (100%)
 rename components/Molecules/HeaderButton/{HeaderButton.twig => HeaderButton.html.twig} (100%)
 create mode 100644 components/Molecules/HeaderButton/HeaderButtons.html.twig
 delete mode 100644 components/Molecules/HeaderButton/HeaderButtons.twig
 rename components/Molecules/ItemHeader/{ItemHeader.twig => ItemHeader.html.twig} (100%)
 rename components/Molecules/Link/{Link.twig => Link.html.twig} (100%)
 rename components/Molecules/OrderTag/{OrderTag.twig => OrderTag.html.twig} (100%)
 rename components/Molecules/Pagination/{Pagination.twig => Pagination.html.twig} (100%)
 rename components/Molecules/PasswordControls/{PasswordControls.twig => PasswordControls.html.twig} (100%)
 rename components/Molecules/RadioCard/{RadioCard.twig => RadioCard.html.twig} (100%)
 rename components/Molecules/Score/{Score.twig => Score.html.twig} (100%)
 rename components/Molecules/SearchBar/{Base.twig => Base.html.twig} (51%)
 rename components/Molecules/SearchBar/{SearchBar.twig => SearchBar.html.twig} (100%)
 rename components/Molecules/Shortcut/{Shortcut.twig => Shortcut.html.twig} (100%)
 rename components/Molecules/Step/{Steps.twig => Steps.html.twig} (100%)
 rename components/Molecules/Tab/{Tab.twig => Tab.html.twig} (100%)
 rename components/Molecules/Tag/{Tag.twig => Tag.html.twig} (100%)
 rename components/Molecules/Tooltip/{Tooltip.twig => Tooltip.html.twig} (100%)
 rename components/Molecules/userMenu/{UserMenu.twig => UserMenu.html.twig} (100%)
 rename components/Organisms/AddToCart/{AddToCart.twig => AddToCart.html.twig} (90%)
 rename components/Organisms/Card/Address/{AddressCard.twig => AddressCard.html.twig} (86%)
 rename components/Organisms/Card/Address/{ClientAddressCard.twig => ClientAddressCard.html.twig} (94%)
 rename components/Organisms/Card/Article/{Article.twig => Article.html.twig} (100%)
 rename components/Organisms/Card/Order/{OrderCard.twig => OrderCard.html.twig} (84%)
 rename components/Organisms/Card/Payment/{PaymentCard.twig => PaymentCard.html.twig} (77%)
 rename components/Organisms/Card/PickupPoint/{PickupPoint.twig => PickupPoint.html.twig} (87%)
 rename components/Organisms/Card/PickupPoint/{PickupPointDrawer.twig => PickupPointDrawer.html.twig} (94%)
 rename components/Organisms/Card/Review/{Review.twig => Review.html.twig} (79%)
 rename components/Organisms/Card/SelfPromotion/{SelfPromotion.twig => SelfPromotion.html.twig} (100%)
 rename components/Organisms/Card/StoreInfo/{StoreInfo.twig => StoreInfo.html.twig} (79%)
 rename components/Organisms/Card/SuggestFilters/{SuggestFilters.twig => SuggestFilters.html.twig} (53%)
 rename components/Organisms/Card/Transporter/{Transporter.twig => Transporter.html.twig} (85%)
 rename components/Organisms/CategoryCard/{CategoryCard.twig => CategoryCard.html.twig} (82%)
 create mode 100644 components/Organisms/HeaderNav/HeaderNav.html.twig
 delete mode 100644 components/Organisms/HeaderNav/HeaderNav.twig
 rename components/Organisms/Modules/Filters/{FilterClassic.twig => FilterClassic.html.twig} (75%)
 rename components/Organisms/Modules/Filters/{FilterColor.twig => FilterColor.html.twig} (77%)
 rename components/Organisms/Modules/HomeDelivery/{HomeDelivery.twig => HomeDelivery.html.twig} (64%)
 rename components/Organisms/Modules/Payment/{Payment.twig => Payment.html.twig} (67%)
 rename components/Organisms/Modules/PickupPointModule/{PickupPointModule.twig => PickupPointModule.html.twig} (74%)
 rename components/Organisms/Modules/StoreDelivery/{StoreDelivery.twig => StoreDelivery.html.twig} (83%)
 create mode 100644 components/Organisms/ProductCard/AddToCartConfirmation.html.twig
 delete mode 100644 components/Organisms/ProductCard/AddToCartConfirmation.twig
 create mode 100644 components/Organisms/ProductCard/Order.html.twig
 delete mode 100644 components/Organisms/ProductCard/Order.twig
 rename components/Organisms/ProductCard/{ProductCard.twig => ProductCard.html.twig} (90%)
 create mode 100644 components/Organisms/ProductCard/PurchaseFunnel.html.twig
 delete mode 100644 components/Organisms/ProductCard/PurchaseFunnel.twig
 create mode 100644 components/Organisms/ProductCard/RemoveProduct.html.twig
 delete mode 100644 components/Organisms/ProductCard/RemoveProduct.twig
 create mode 100644 components/Organisms/ProductCard/Search.html.twig
 delete mode 100644 components/Organisms/ProductCard/Search.twig
 create mode 100644 components/Organisms/ProductCard/Standard.html.twig
 delete mode 100644 components/Organisms/ProductCard/Standard.twig
 rename components/Organisms/Reinsurance/{Reinsurance.twig => Reinsurance.html.twig} (100%)
 rename components/Organisms/SimilarContentCard/{SimilarContentCard.twig => SimilarContentCard.html.twig} (100%)
 rename components/Organisms/SnackBar/{SnackBar.twig => SnackBar.html.twig} (93%)
 rename components/Organisms/SummaryCard/{SummaryCard.twig => SummaryCard.html.twig} (97%)
 create mode 100644 config/packages/.gitkeep
 create mode 100644 src/Twig/CrossSelling.php
 create mode 100644 src/Twig/ProductCategory.php
 rename translations/{messages.en.yaml => messages.en_US.yaml} (100%)
 rename translations/{messages.fr.yaml => messages.fr_FR.yaml} (100%)

diff --git a/404.html.twig b/404.html.twig
index 64f9a96..bd4ef3f 100644
--- a/404.html.twig
+++ b/404.html.twig
@@ -9,7 +9,7 @@
 			{{ source('assets/images/not-found.svg') }}
 		</div>
 		<h3 class="mt-4 mb-6 h3">{{ 'Oops, this page does not exist...'|trans }}</h3>
-		{% include '@components/Molecules/Button/Button.twig' with {text: 'Homepage',  classes:'Button--large', href: "/", variant: 'primary', icon_left: "chevron-left"} %}
+		{% include '@components/Molecules/Button/Button.html.twig' with {text: 'Homepage',  classes:'Button--large', href: "/", variant: 'primary', icon_left: "chevron-left"} %}
 	</div>
 {% endblock %}
 
diff --git a/base.html.twig b/base.html.twig
index 4b80208..d3829eb 100644
--- a/base.html.twig
+++ b/base.html.twig
@@ -17,13 +17,13 @@
 	</head>
 	<body class="no-js">
 		{% block header %}
-			{% include '@components/Layout/Header/Header.twig' %}
+			{% include '@components/Layout/Header/Header.html.twig' %}
 		{% endblock %}
 
 		{% block body %}{% endblock %}
 
 		{% block footer %}
-			{% include '@components/Layout/Footer/Footer.twig' %}
+			{% include '@components/Layout/Footer/Footer.html.twig' %}
 		{% endblock %}
 	</body>
 </html>
diff --git a/category.html.twig b/category.html.twig
index 30fedc2..830be57 100644
--- a/category.html.twig
+++ b/category.html.twig
@@ -7,10 +7,10 @@
 	{% set products = resources('/api/front/products', {'productCategories.category.id': attr('category', 'id'), itemsPerPage:9, page: page}) %}
 	{% set totalProducts = resources('/api/front/products', {'productCategories.category.id': attr('category', 'id'), itemsPerPage:9, page: page}) %}
 
-	{% include '@components/Layout/Subheader/Category/SubheaderCategory.twig' with {title: attr('category', 'title'), description: attr('category', 'description'), nbProducts: products|length}  %}
+	{% include '@components/Layout/Subheader/Category/SimilarContent.html.twig' with {title: attr('category', 'title'), description: attr('category', 'description'), nbProducts: products|length}  %}
   {% include '@components/Layout/CategoryProduct/CategoryProduct.html.twig' with {products: products, totalProducts:totalProducts} %}
 
-	{% include '@components/Layout/Reinsurance/Reinsurance.twig' with { data: [
+	{% include '@components/Layout/Reinsurance/Reinsurance.html.twig' with { data: [
       {
         strongText: 'Free delivery' | trans,
         text: 'For any order over €100' | trans,
diff --git a/checkout.html.twig b/checkout.html.twig
index 4077562..9b721d8 100644
--- a/checkout.html.twig
+++ b/checkout.html.twig
@@ -9,15 +9,15 @@
 {% endblock %}
 
 {% block header %}
-	{% include '@components/Layout/Header/HeaderCheckout.twig' %}
+	{% include '@components/Layout/Header/HeaderCheckout.html.twig' %}
 {% endblock %}
 {% block body %}
 	{% set products = resources('/api/front/products', {'productCategories.category.id':1, itemsPerPage:3}) %}
 	<div id="Checkout"></div>
 	<div class="bg-theme-lighter">
-		{% include '@components/Layout/CrossSelling/CrossSelling.twig' with {products: products, title: 'Consultés récemment'} %}
+		{% include '@components/Layout/CrossSelling/CrossSelling.html.twig' with {products: products, title: 'Consultés récemment'} %}
 	</div>
 {% endblock %}
 {% block footer %}
-	{% include '@components/Layout/Footer/FooterCheckout.twig' %}
+	{% include '@components/Layout/Footer/FooterCheckout.html.twig' %}
 {% endblock %}
diff --git a/components/Atoms/Colors/Colors.twig b/components/Atoms/Colors/Colors.html.twig
similarity index 100%
rename from components/Atoms/Colors/Colors.twig
rename to components/Atoms/Colors/Colors.html.twig
diff --git a/components/Atoms/Colors/Colors.stories.js b/components/Atoms/Colors/Colors.stories.js
index 6e44156..0da0b3a 100644
--- a/components/Atoms/Colors/Colors.stories.js
+++ b/components/Atoms/Colors/Colors.stories.js
@@ -1,4 +1,4 @@
-import Colors from './Colors.twig';
+import Colors from './Colors.html.twig';
 import colors from './colors.json';
 
 import './colors.css';
diff --git a/components/Atoms/Font/Font.stories.js b/components/Atoms/Font/Font.stories.js
index e625046..4505a7b 100644
--- a/components/Atoms/Font/Font.stories.js
+++ b/components/Atoms/Font/Font.stories.js
@@ -1,6 +1,6 @@
-import Title from './Title.twig';
-import Paragraph from './Paragraph.twig';
-import Other from './Other.twig';
+import Title from './Title.html.twig';
+import Paragraph from './Paragraph.html.twig';
+import Other from './Other.html.twig';
 import './font.css';
 
 export default {
diff --git a/components/Atoms/Font/Other.twig b/components/Atoms/Font/Other.html.twig
similarity index 100%
rename from components/Atoms/Font/Other.twig
rename to components/Atoms/Font/Other.html.twig
diff --git a/components/Atoms/Font/Paragraph.twig b/components/Atoms/Font/Paragraph.html.twig
similarity index 100%
rename from components/Atoms/Font/Paragraph.twig
rename to components/Atoms/Font/Paragraph.html.twig
diff --git a/components/Atoms/Font/Title.twig b/components/Atoms/Font/Title.html.twig
similarity index 100%
rename from components/Atoms/Font/Title.twig
rename to components/Atoms/Font/Title.html.twig
diff --git a/components/Atoms/Form/Checkbox.twig b/components/Atoms/Form/Checkbox.html.twig
similarity index 100%
rename from components/Atoms/Form/Checkbox.twig
rename to components/Atoms/Form/Checkbox.html.twig
diff --git a/components/Atoms/Form/Checkboxs.html.twig b/components/Atoms/Form/Checkboxs.html.twig
new file mode 100644
index 0000000..fd8db80
--- /dev/null
+++ b/components/Atoms/Form/Checkboxs.html.twig
@@ -0,0 +1,7 @@
+<div>
+  {% include './Checkbox.html.twig' with {label: 'Unchecked',disabled: disabled, error:error} %}
+  {% include './Checkbox.html.twig' with {label: 'Checked',disabled: disabled, error:error, checked:true} %}
+  {% include './Checkbox.html.twig' with
+    {label: 'Undefined',disabled: disabled, error:error, classes:'indeterminate'}
+  %}
+</div>
diff --git a/components/Atoms/Form/Checkboxs.twig b/components/Atoms/Form/Checkboxs.twig
deleted file mode 100644
index 22dc900..0000000
--- a/components/Atoms/Form/Checkboxs.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-<div>
-  {% include './Checkbox.twig' with {label: 'Unchecked',disabled: disabled, error:error} %}
-  {% include './Checkbox.twig' with {label: 'Checked',disabled: disabled, error:error, checked:true} %}
-  {% include './Checkbox.twig' with
-    {label: 'Undefined',disabled: disabled, error:error, classes:'indeterminate'}
-  %}
-</div>
diff --git a/components/Atoms/Form/Form.stories.js b/components/Atoms/Form/Form.stories.js
index c2c6fc9..1e472be 100644
--- a/components/Atoms/Form/Form.stories.js
+++ b/components/Atoms/Form/Form.stories.js
@@ -1,6 +1,6 @@
-import Checkbox from './Checkboxs.twig';
-import Radio from './Radios.twig';
-import Toggle from './Toggles.twig';
+import Checkbox from './Checkboxs.html.twig';
+import Radio from './Radios.html.twig';
+import Toggle from './Toggles.html.twig';
 import './checkbox.css';
 import './toggle.css';
 
diff --git a/components/Atoms/Form/Radio.twig b/components/Atoms/Form/Radio.html.twig
similarity index 100%
rename from components/Atoms/Form/Radio.twig
rename to components/Atoms/Form/Radio.html.twig
diff --git a/components/Atoms/Form/Radios.html.twig b/components/Atoms/Form/Radios.html.twig
new file mode 100644
index 0000000..61492f3
--- /dev/null
+++ b/components/Atoms/Form/Radios.html.twig
@@ -0,0 +1,5 @@
+<div>
+  {% include './Radio.html.twig' with {label: 'Radio 1', name: 'radio',disabled: disabled, error:error} %}
+  {% include './Radio.html.twig' with {label: 'Radio 2', name: 'radio',disabled: disabled, error:error, checked:true} %}
+  {% include './Radio.html.twig' with    {label: 'Radio 3', name: 'radio',disabled: disabled, error:error} %}
+</div>
diff --git a/components/Atoms/Form/Radios.twig b/components/Atoms/Form/Radios.twig
deleted file mode 100644
index 88b4ea2..0000000
--- a/components/Atoms/Form/Radios.twig
+++ /dev/null
@@ -1,5 +0,0 @@
-<div>
-  {% include './Radio.twig' with {label: 'Radio 1', name: 'radio',disabled: disabled, error:error} %}
-  {% include './Radio.twig' with {label: 'Radio 2', name: 'radio',disabled: disabled, error:error, checked:true} %}
-  {% include './Radio.twig' with    {label: 'Radio 3', name: 'radio',disabled: disabled, error:error} %}
-</div>
diff --git a/components/Atoms/Form/Toggle.twig b/components/Atoms/Form/Toggle.html.twig
similarity index 100%
rename from components/Atoms/Form/Toggle.twig
rename to components/Atoms/Form/Toggle.html.twig
diff --git a/components/Atoms/Form/Toggles.html.twig b/components/Atoms/Form/Toggles.html.twig
new file mode 100644
index 0000000..1c48e8a
--- /dev/null
+++ b/components/Atoms/Form/Toggles.html.twig
@@ -0,0 +1,4 @@
+{% include './Toggle.html.twig' with {labelOff: 'Off', labelOn: 'On',disabled: disabled, error:error} %}
+<div class="mt-5">
+  {% include './Toggle.html.twig' with {disabled: disabled, error:error, checked:true} %}
+</div>
diff --git a/components/Atoms/Form/Toggles.twig b/components/Atoms/Form/Toggles.twig
deleted file mode 100644
index f37d581..0000000
--- a/components/Atoms/Form/Toggles.twig
+++ /dev/null
@@ -1,4 +0,0 @@
-{% include './Toggle.twig' with {labelOff: 'Off', labelOn: 'On',disabled: disabled, error:error} %}
-<div class="mt-5">
-  {% include './Toggle.twig' with {disabled: disabled, error:error, checked:true} %}
-</div>
diff --git a/components/Atoms/Icon/Icon.twig b/components/Atoms/Icon/Icon.html.twig
similarity index 100%
rename from components/Atoms/Icon/Icon.twig
rename to components/Atoms/Icon/Icon.html.twig
diff --git a/components/Atoms/Icon/Icon.stories.js b/components/Atoms/Icon/Icon.stories.js
index b5518e5..9279dd1 100644
--- a/components/Atoms/Icon/Icon.stories.js
+++ b/components/Atoms/Icon/Icon.stories.js
@@ -1,4 +1,4 @@
-import Icon from './Icon.twig';
+import Icon from './Icon.html.twig';
 import icons from './icons.json';
 
 export default {
diff --git a/components/Layout/CategoryProduct/CategoryProduct.html.twig b/components/Layout/CategoryProduct/CategoryProduct.html.twig
index 01661bf..69be4ae 100644
--- a/components/Layout/CategoryProduct/CategoryProduct.html.twig
+++ b/components/Layout/CategoryProduct/CategoryProduct.html.twig
@@ -6,15 +6,15 @@
     <div class="h4 mb-[22px]">{{ 'Filter'|trans }}</div>
 
     <div>
-      {% include '@components/Molecules/Accordion/Accordion.twig' with {
+      {% include '@components/Molecules/Accordion/Accordion.html.twig' with {
         title: "Size" | trans,
         content: ""
       } %}
-      {% include '@components/Molecules/Accordion/Accordion.twig' with {
+      {% include '@components/Molecules/Accordion/Accordion.html.twig' with {
         title: "Color" | trans,
         content: "test"
       } %}
-      {% include '@components/Molecules/Accordion/Accordion.twig' with {
+      {% include '@components/Molecules/Accordion/Accordion.html.twig' with {
         title: "Material" | trans,
         content: "test"
       } %}
@@ -27,7 +27,7 @@
         {{ 'item(s)'|trans }}</span>
 
       <div class="w-[250px]">
-        {% include '@components/Molecules/Fields/FieldSelect/FieldSelect.twig' with {
+        {% include '@components/Molecules/Fields/FieldSelect/FieldSelect.html.twig' with {
         label: "Sort by" | trans,
         tooltip: "Sort the products" | trans,
         placeholder: "Sort by" | trans,
@@ -51,12 +51,12 @@
 
     <div class="grid grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8 mb-[40px]">
       {% for product in products %}
-        {% include '@components/Organisms/ProductCard/ProductCard.twig' with  product|merge({displayWishButton: true}) %}
+        {% include '@components/Organisms/ProductCard/ProductCard.html.twig' with  product|merge({displayWishButton: true}) %}
       {% endfor %}
     </div>
 
     <div class='mx-auto lg:mx-0 lg:ml-auto w-max'>
-      {% include '@components/Molecules/Pagination/Pagination.twig' with {
+      {% include '@components/Molecules/Pagination/Pagination.html.twig' with {
       prevText: 'Previous' | trans,
       nextText: 'Next' | trans,
       currentPage: page,
diff --git a/components/Layout/CrossSelling/CrossSelling.html.twig b/components/Layout/CrossSelling/CrossSelling.html.twig
new file mode 100644
index 0000000..af2596a
--- /dev/null
+++ b/components/Layout/CrossSelling/CrossSelling.html.twig
@@ -0,0 +1,19 @@
+{% set title = title|default('') %}
+
+{% set button = button|default(null) %}
+
+
+
+<div class="pt-[56px] pb-[68px] pl-[24px] md:pl-[48px] xl:pt-[68px] xl:pb-[104px] lg:px-0 lg:container lg:mx-auto">
+	<div class='pb-6 text-black h2'>{{ title }}</div>
+	<div class='CrossSelling slider'>
+		{% for product in this.products %}
+		{% include '@components/Organisms/ProductCard/ProductCard.html.twig' with product|merge({displayWishButton: true}) %}
+		{% endfor %}
+	</div>
+  {% if button %}
+	<div class='mt-5'>
+		{% include '@components/Molecules/Button/Button.html.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %}
+	</div>
+  {% endif %}
+</div>
diff --git a/components/Layout/CrossSelling/CrossSelling.stories.js b/components/Layout/CrossSelling/CrossSelling.stories.js
index cd2f533..78cf1d2 100644
--- a/components/Layout/CrossSelling/CrossSelling.stories.js
+++ b/components/Layout/CrossSelling/CrossSelling.stories.js
@@ -1,4 +1,4 @@
-import CrossSelling from './CrossSelling.twig';
+import CrossSelling from './CrossSelling.html.twig';
 import { slider } from '../../../assets/js/slider';
 import { MAX_SECTION_PRODUCT } from '../../base';
 
diff --git a/components/Layout/CrossSelling/CrossSelling.twig b/components/Layout/CrossSelling/CrossSelling.twig
deleted file mode 100644
index c9c7cd3..0000000
--- a/components/Layout/CrossSelling/CrossSelling.twig
+++ /dev/null
@@ -1,21 +0,0 @@
-{% set title = title|default('') %}
-{% set products = products|default(null) %}
-{% set button = button|default(null) %}
-
-{% if categoryId is defined %}
-  {% set products = resources('/api/front/products', {'productCategories.category.id':categoryId, itemsPerPage:3}) %}
-{% endif %}
-
-<div class="pt-[56px] pb-[68px] pl-[24px] md:pl-[48px] xl:pt-[68px] xl:pb-[104px] lg:px-0 lg:container lg:mx-auto">
-	<div class='pb-6 text-black h2'>{{ title }}</div>
-	<div class='CrossSelling slider'>
-		{% for product in products %}
-		{% include '@components/Organisms/ProductCard/ProductCard.twig' with product|merge({displayWishButton: true}) %}
-		{% endfor %}
-	</div>
-  {% if button %}
-	<div class='mt-5'>
-		{% include '@components/Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary'} %}
-	</div>
-  {% endif %}
-</div>
diff --git a/components/Layout/Footer/Footer.twig b/components/Layout/Footer/Footer.html.twig
similarity index 90%
rename from components/Layout/Footer/Footer.twig
rename to components/Layout/Footer/Footer.html.twig
index 43491f2..4660271 100644
--- a/components/Layout/Footer/Footer.twig
+++ b/components/Layout/Footer/Footer.html.twig
@@ -17,7 +17,7 @@
 			<div class='Footer-newsletter mb-[50px] md:mb-0 md:pt-[50px] md:pl-[50px] lg:pt-[100px]'>
 				<div class='font-semibold paragraph-1'>Newsletter</div>
 				<div class='mb-4 paragraph-5'>Suivez nos dernières actualités & promotions</div>
-				{% include '@components/Molecules/Button/Button.twig' with {text: 'Je m\'inscris', type: 'primary', isFill: true, classes: "Button--large w-full md:w-auto"} %}
+				{% include '@components/Molecules/Button/Button.html.twig' with {text: 'Je m\'inscris', type: 'primary', isFill: true, classes: "Button--large w-full md:w-auto"} %}
       </div>
     {% endif %}
     <div class='Footer-store-infos mb-[30px] md:py-[50px] md:pl-[40px] md:mb-0 lg:pt-[100px] lg:pb-[90px] {{footerStoreInfosClasses}}'>
@@ -26,7 +26,7 @@
         <div class='paragraph-5'>Adresse première ligne <br> Complément d'adresse <br> 00000 Ville-sur-Fleuve <br> PAYS</div>
         <div class='my-4 paragraph-5'>Tel. +33 00 00 00 00 00</div>
       </div>
-      {% include '@components/Molecules/Button/Button.twig' with {text: 'Contactez nous', type: 'primary', icon_right: "email", isFill: true, classes: "w-full md:w-auto Button--secondary Button--large"} %}
+      {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Contactez nous', type: 'primary', icon_right: "email", isFill: true, classes: "w-full md:w-auto Button--secondary Button--large"} %}
     </div>
     <ul class='lg:pt-[100px] {{footerLinksClasses}}'>
       {% set footerLinkClass = 'underline hover:no-underline focus:no-underline hover:opacity-75 focus:opacity-75' %}
diff --git a/components/Layout/Footer/Footer.stories.js b/components/Layout/Footer/Footer.stories.js
index 2de4cc5..5e1c93f 100644
--- a/components/Layout/Footer/Footer.stories.js
+++ b/components/Layout/Footer/Footer.stories.js
@@ -1,5 +1,5 @@
-import Footer from './Footer.twig';
-import FooterCheckout from './FooterCheckout.twig';
+import Footer from './Footer.html.twig';
+import FooterCheckout from './FooterCheckout.html.twig';
 
 export default {
   title: 'Design System/Layout/Footer'
diff --git a/components/Layout/Footer/FooterCheckout.twig b/components/Layout/Footer/FooterCheckout.html.twig
similarity index 100%
rename from components/Layout/Footer/FooterCheckout.twig
rename to components/Layout/Footer/FooterCheckout.html.twig
diff --git a/components/Layout/Header/Header.twig b/components/Layout/Header/Header.html.twig
similarity index 73%
rename from components/Layout/Header/Header.twig
rename to components/Layout/Header/Header.html.twig
index c9d57e6..a1804a4 100644
--- a/components/Layout/Header/Header.twig
+++ b/components/Layout/Header/Header.html.twig
@@ -5,7 +5,7 @@
 	<div class='flex'>
 		{% if type == "searchbar" %}
 			<div class='hidden lg:block xl:hidden'>
-        {% include '@components/Molecules/HeaderButton/HeaderButton.twig' with {icon: 'menu', text: 'Cart', classes: 'HeaderButton--light', small: true } %}
+        {% include '@components/Molecules/HeaderButton/HeaderButton.html.twig' with {icon: 'menu', text: 'Cart', classes: 'HeaderButton--light', small: true } %}
 			</div>
 		{% endif %}
 
@@ -18,7 +18,7 @@
 
 	{% if type == "searchbar" %}
 		<div class='w-[500px] 2xl:w-[800px] hidden lg:flex items-stretch flex-col justify-center absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2'>
-			{% include '@components/Molecules/SearchBar/SearchBar.twig' %}
+			{% include '@components/Molecules/SearchBar/SearchBar.html.twig' %}
 		</div>
 	{% else %}
 		<nav id="Menu">
@@ -30,13 +30,13 @@
       </button>
 			<ul class="Header-navigation" data-menu-sub="0">
         {% for category in categories %}
-				  {% include '@components/Molecules/ItemHeader/ItemHeader.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}
+				  {% include '@components/Molecules/ItemHeader/ItemHeader.html.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}
         {% endfor %}
 			</ul>
 		</nav>
 	{% endif %}
 
-	{% include '@components/Organisms/HeaderNav/HeaderNav.twig' with {type: type} %}
+	{% include '@components/Organisms/HeaderNav/HeaderNav.html.twig' with {type: type} %}
 
 	{% if type == "searchbar" %}
 		<nav id="Menu" class='Header-navWrap'>
@@ -48,7 +48,7 @@
       </button>
 			<ul class="Header-navigation">
         {% for category in categories %}
-				  {% include '@components/Molecules/ItemHeader/ItemHeader.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}
+				  {% include '@components/Molecules/ItemHeader/ItemHeader.html.twig' with { customText: category.i18ns.title, href: category.publicUrl} %}
         {% endfor %}
 			</ul>
 		</nav>
diff --git a/components/Layout/Header/Header.stories.js b/components/Layout/Header/Header.stories.js
index bbeceb8..a19aebd 100644
--- a/components/Layout/Header/Header.stories.js
+++ b/components/Layout/Header/Header.stories.js
@@ -1,6 +1,6 @@
-import Header from './Header.twig';
+import Header from './Header.html.twig';
 import HeaderScript from './Header.js';
-import HeaderCheckout from './HeaderCheckout.twig';
+import HeaderCheckout from './HeaderCheckout.html.twig';
 
 export default {
   title: 'Design System/Layout/Header'
diff --git a/components/Layout/Header/HeaderCheckout.twig b/components/Layout/Header/HeaderCheckout.html.twig
similarity index 100%
rename from components/Layout/Header/HeaderCheckout.twig
rename to components/Layout/Header/HeaderCheckout.html.twig
diff --git a/components/Layout/Hero/Hero.twig b/components/Layout/Hero/Hero.html.twig
similarity index 93%
rename from components/Layout/Hero/Hero.twig
rename to components/Layout/Hero/Hero.html.twig
index 66fbbf1..239a8f9 100644
--- a/components/Layout/Hero/Hero.twig
+++ b/components/Layout/Hero/Hero.html.twig
@@ -12,7 +12,7 @@
             <div class='{{ loop.index != 1 ? "paragraph-4" : "paragraph-1" }} Hero-itemContentTitle font-bold'>
               {{ block.title | default('Title') }}
             </div>
-            {% include '@components/Molecules/Button/Button.twig' with {
+            {% include '@components/Molecules/Button/Button.html.twig' with {
               text: block.linkLabel,
               type: 'primary',
               icon_right: "chevron-right",
diff --git a/components/Layout/Hero/Hero.stories.js b/components/Layout/Hero/Hero.stories.js
index ca5c85b..7bdc7e5 100644
--- a/components/Layout/Hero/Hero.stories.js
+++ b/components/Layout/Hero/Hero.stories.js
@@ -1,17 +1,16 @@
-import Hero from './Hero.twig';
+import Hero from './Hero.html.twig';
 
 export default {
   title: 'Design System/Layout/Hero'
 };
 
-
-
 export const Base = {
   render: (args) => Hero(args),
   args: {
     blocks: [
       {
-        image: 'https://sabatier-k.openstudio-lab.com/cache/images/carousel/design780x480-4-4.png',
+        image:
+          'https://sabatier-k.openstudio-lab.com/cache/images/carousel/design780x480-4-4.png',
         title: 'Ici une phrase d’accroche pour accompagner le visuel',
         href: 'http://sabatier-k.openstudio-lab.com/couteaux-sabatier.html',
         linkLabel: 'Je découvre'
@@ -31,7 +30,6 @@ export const Base = {
     ]
   },
   argTypes: {
-    blocks: { control: 'object' },
+    blocks: { control: 'object' }
   }
 };
-
diff --git a/components/Layout/ProductCategory/ProductCategory.html.twig b/components/Layout/ProductCategory/ProductCategory.html.twig
new file mode 100644
index 0000000..15f586b
--- /dev/null
+++ b/components/Layout/ProductCategory/ProductCategory.html.twig
@@ -0,0 +1,12 @@
+{% set title = title|default('') %}
+{% set categories = this.categories|default([]) %}
+
+<div class='xl:container xl:mx-auto'>
+  <h2 class='pb-6 text-black h2'>{{ title }}</h2>
+</div>
+
+<div class='flex flex-col gap-10 lg:grid lg:grid-cols-3 xl:container xl:mx-auto'>
+  {% for category in categories %}
+    {% include '@components/Organisms/CategoryCard/CategoryCard.html.twig' with category %}
+  {% endfor %}
+</div>
diff --git a/components/Layout/ProductCategory/ProductCategory.stories.js b/components/Layout/ProductCategory/ProductCategory.stories.js
index 4538387..c981093 100644
--- a/components/Layout/ProductCategory/ProductCategory.stories.js
+++ b/components/Layout/ProductCategory/ProductCategory.stories.js
@@ -1,4 +1,4 @@
-import ProductCategory from './ProductCategory.twig';
+import ProductCategory from './ProductCategory.html.twig';
 
 export default {
   title: 'Design System/Layout/Product Category'
diff --git a/components/Layout/ProductCategory/ProductCategory.twig b/components/Layout/ProductCategory/ProductCategory.twig
deleted file mode 100644
index 04c0ad9..0000000
--- a/components/Layout/ProductCategory/ProductCategory.twig
+++ /dev/null
@@ -1,12 +0,0 @@
-{% set title = title|default('') %}
-{% set categories = categories|default([]) %}
-
-<div class='xl:container xl:mx-auto'>
-  <h2 class='h2 text-black pb-6'>{{ title }}</h2>
-</div>
-
-<div class='flex flex-col gap-10  lg:grid lg:grid-cols-3 xl:container xl:mx-auto'>
-  {% for category in categories %}
-    {% include '@components/Organisms/CategoryCard/CategoryCard.twig' with category %}
-  {% endfor %}
-</div>
diff --git a/components/Layout/ProductGallery/ProductGallery.twig b/components/Layout/ProductGallery/ProductGallery.html.twig
similarity index 100%
rename from components/Layout/ProductGallery/ProductGallery.twig
rename to components/Layout/ProductGallery/ProductGallery.html.twig
diff --git a/components/Layout/ProductGallery/test.twig b/components/Layout/ProductGallery/test.twig
deleted file mode 100644
index b0b9969..0000000
--- a/components/Layout/ProductGallery/test.twig
+++ /dev/null
@@ -1 +0,0 @@
-<p>Toto</p>
diff --git a/components/Layout/PromotionalBanner/PromotionalBanner.twig b/components/Layout/PromotionalBanner/PromotionalBanner.html.twig
similarity index 100%
rename from components/Layout/PromotionalBanner/PromotionalBanner.twig
rename to components/Layout/PromotionalBanner/PromotionalBanner.html.twig
diff --git a/components/Layout/PromotionalBanner/PromotionalBanner.stories.js b/components/Layout/PromotionalBanner/PromotionalBanner.stories.js
index 305a18b..1f5a8de 100644
--- a/components/Layout/PromotionalBanner/PromotionalBanner.stories.js
+++ b/components/Layout/PromotionalBanner/PromotionalBanner.stories.js
@@ -1,4 +1,4 @@
-import PromotionalBanner from './PromotionalBanner.twig';
+import PromotionalBanner from './PromotionalBanner.html.twig';
 import promotionalBanner from './PromotionalBanner';
 
 export default {
diff --git a/components/Layout/Reinsurance/Reinsurance.twig b/components/Layout/Reinsurance/Reinsurance.html.twig
similarity index 100%
rename from components/Layout/Reinsurance/Reinsurance.twig
rename to components/Layout/Reinsurance/Reinsurance.html.twig
diff --git a/components/Layout/Reinsurance/Reinsurance.stories.js b/components/Layout/Reinsurance/Reinsurance.stories.js
index bd7990f..e580ec6 100644
--- a/components/Layout/Reinsurance/Reinsurance.stories.js
+++ b/components/Layout/Reinsurance/Reinsurance.stories.js
@@ -1,4 +1,4 @@
-import Reinsurance from './Reinsurance.twig';
+import Reinsurance from './Reinsurance.html.twig';
 
 export default {
   title: 'Design System/Layout/Reinsurance'
diff --git a/components/Layout/Review/Review.twig b/components/Layout/Review/Review.html.twig
similarity index 57%
rename from components/Layout/Review/Review.twig
rename to components/Layout/Review/Review.html.twig
index 4c0f1e5..fe3d90c 100644
--- a/components/Layout/Review/Review.twig
+++ b/components/Layout/Review/Review.html.twig
@@ -6,8 +6,8 @@
 	<div class='pb-6 text-black h2'>{{ title }}</div>
 	<div class='Reviews slider'>
 		{% for review in reviews %}
-    {% include '@components/Organisms/Card/Review/Review.twig' with review %}
+    {% include '@components/Organisms/Card/Review/Review.html.twig' with review %}
 		{% endfor %}
 	</div>
-	{% include '@components/Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary', classes: "mt-5"} %}
+	{% include '@components/Molecules/Button/Button.html.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary', classes: "mt-5"} %}
 </div>
diff --git a/components/Layout/Review/Review.stories.js b/components/Layout/Review/Review.stories.js
index 5751a23..dca09bb 100644
--- a/components/Layout/Review/Review.stories.js
+++ b/components/Layout/Review/Review.stories.js
@@ -1,4 +1,4 @@
-import Review from './Review.twig';
+import Review from './Review.html.twig';
 import { slider } from '../../../assets/js/slider';
 
 export default {
diff --git a/components/Layout/SimilarContent/SimilarContent.twig b/components/Layout/SimilarContent/SimilarContent.html.twig
similarity index 67%
rename from components/Layout/SimilarContent/SimilarContent.twig
rename to components/Layout/SimilarContent/SimilarContent.html.twig
index 0f590c7..e8fb7f5 100644
--- a/components/Layout/SimilarContent/SimilarContent.twig
+++ b/components/Layout/SimilarContent/SimilarContent.html.twig
@@ -7,10 +7,10 @@
 
 	<div class='SimilarContents slider'>
 		{% for similarContent in similarContents %}
-    {% include '@components/Organisms/SimilarContentCard/SimilarContentCard.twig' with similarContent %}
+    {% include '@components/Organisms/SimilarContentCard/SimilarContentCard.html.twig' with similarContent %}
 		{% endfor %}
 	</div>
 	{% if button %}
-		{% include '@components/Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary', classes: 'mt-5'} %}
+		{% include '@components/Molecules/Button/Button.html.twig' with {text: button.label, href: button.href,icon_right:'chevron-right', variant:'secondary', classes: 'mt-5'} %}
 	{% endif %}
 </div>
diff --git a/components/Layout/SimilarContent/SimilarContent.stories.js b/components/Layout/SimilarContent/SimilarContent.stories.js
index e160151..94bbb6b 100644
--- a/components/Layout/SimilarContent/SimilarContent.stories.js
+++ b/components/Layout/SimilarContent/SimilarContent.stories.js
@@ -1,4 +1,4 @@
-import SimilarContent from './SimilarContent.twig';
+import SimilarContent from './SimilarContent.html.twig';
 import { slider } from '../../../assets/js/slider';
 
 export default {
diff --git a/components/Layout/Subheader/Category/SubheaderCategory.twig b/components/Layout/Subheader/Category/SubheaderCategory.html.twig
similarity index 81%
rename from components/Layout/Subheader/Category/SubheaderCategory.twig
rename to components/Layout/Subheader/Category/SubheaderCategory.html.twig
index b23cbfa..107c7d8 100644
--- a/components/Layout/Subheader/Category/SubheaderCategory.twig
+++ b/components/Layout/Subheader/Category/SubheaderCategory.html.twig
@@ -13,7 +13,7 @@
     </div>
     <div class='Subheader-info Subheader-info--category'>
       <div>{{ nbProducts }} {{ 'product(s)'|trans }}</div>
-      {% include '@components/Molecules/Button/Button.twig' with {text: 'Filter & Sort'|trans, icon_left:'filter', variant: 'secondary'} %}
+      {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Filter & Sort'|trans, icon_left:'filter', variant: 'secondary'} %}
     </div>
   </div>
 </div>
diff --git a/components/Layout/Subheader/Category/SubheaderCategory.stories.js b/components/Layout/Subheader/Category/SubheaderCategory.stories.js
index 677ec82..3230783 100644
--- a/components/Layout/Subheader/Category/SubheaderCategory.stories.js
+++ b/components/Layout/Subheader/Category/SubheaderCategory.stories.js
@@ -1,4 +1,4 @@
-import SubheaderCategory from './SubheaderCategory.twig';
+import SubheaderCategory from './SubheaderCategory.html.twig';
 
 export default {
   title: 'Design System/Layout/Subheader/Category'
diff --git a/components/Layout/Subheader/ContentPage/SubheaderContentPage.twig b/components/Layout/Subheader/ContentPage/SubheaderContentPage.html.twig
similarity index 100%
rename from components/Layout/Subheader/ContentPage/SubheaderContentPage.twig
rename to components/Layout/Subheader/ContentPage/SubheaderContentPage.html.twig
diff --git a/components/Layout/Subheader/ContentPage/SubheaderContentPage.stories.js b/components/Layout/Subheader/ContentPage/SubheaderContentPage.stories.js
index 8fcc3bc..4b16538 100644
--- a/components/Layout/Subheader/ContentPage/SubheaderContentPage.stories.js
+++ b/components/Layout/Subheader/ContentPage/SubheaderContentPage.stories.js
@@ -1,4 +1,4 @@
-import SubheaderContentPage from './SubheaderContentPage.twig';
+import SubheaderContentPage from './SubheaderContentPage.html.twig';
 
 export default {
   title: 'Design System/Layout/Subheader/Content Page'
diff --git a/components/Layout/Subheader/Orders/SubheaderOrders.html.twig b/components/Layout/Subheader/Orders/SubheaderOrders.html.twig
new file mode 100644
index 0000000..41334a7
--- /dev/null
+++ b/components/Layout/Subheader/Orders/SubheaderOrders.html.twig
@@ -0,0 +1,12 @@
+{% set title = title|default('') %}
+{% set selected = selected|default('in_progress') %}
+
+<div class='Subheader Subheader--orders'>
+	<div class='container flex flex-col items-center mx-auto'>
+		<h1 class='Subheader-title'>{{ title }}</h1>
+		<div class='flex mt-[30px]'>
+			{% include '@components/Molecules/Button/Button.html.twig' with {text: 'In progress'|trans, sharp:true, variant:selected == 'in_progress' ? 'primary' : 'secondary'} %}
+			{% include '@components/Molecules/Button/Button.html.twig' with {text: 'History'|trans, sharp:true, variant: selected == 'in_progress' ? 'secondary' : 'primary'} %}
+		</div>
+	</div>
+</div>
diff --git a/components/Layout/Subheader/Orders/SubheaderOrders.stories.js b/components/Layout/Subheader/Orders/SubheaderOrders.stories.js
index 13c842f..e6690b2 100644
--- a/components/Layout/Subheader/Orders/SubheaderOrders.stories.js
+++ b/components/Layout/Subheader/Orders/SubheaderOrders.stories.js
@@ -1,4 +1,4 @@
-import SubheaderOrders from './SubheaderOrders.twig';
+import SubheaderOrders from './SubheaderOrders.html.twig';
 
 export default {
   title: 'Design System/Layout/Subheader/Orders'
diff --git a/components/Layout/Subheader/Orders/SubheaderOrders.twig b/components/Layout/Subheader/Orders/SubheaderOrders.twig
deleted file mode 100644
index 61ca41f..0000000
--- a/components/Layout/Subheader/Orders/SubheaderOrders.twig
+++ /dev/null
@@ -1,12 +0,0 @@
-{% set title = title|default('') %}
-{% set selected = selected|default('in_progress') %}
-
-<div class='Subheader Subheader--orders'>
-	<div class='container flex flex-col items-center mx-auto'>
-		<h1 class='Subheader-title'>{{ title }}</h1>
-		<div class='flex mt-[30px]'>
-			{% include '@components/Molecules/Button/Button.twig' with {text: 'In progress'|trans, sharp:true, variant:selected == 'in_progress' ? 'primary' : 'secondary'} %}
-			{% include '@components/Molecules/Button/Button.twig' with {text: 'History'|trans, sharp:true, variant: selected == 'in_progress' ? 'secondary' : 'primary'} %}
-		</div>
-	</div>
-</div>
diff --git a/components/Layout/Subheader/SearchResult/SubheaderSearch.twig b/components/Layout/Subheader/SearchResult/SubheaderSearch.html.twig
similarity index 51%
rename from components/Layout/Subheader/SearchResult/SubheaderSearch.twig
rename to components/Layout/Subheader/SearchResult/SubheaderSearch.html.twig
index 4884dfb..50bd4eb 100644
--- a/components/Layout/Subheader/SearchResult/SubheaderSearch.twig
+++ b/components/Layout/Subheader/SearchResult/SubheaderSearch.html.twig
@@ -5,11 +5,11 @@
   <div class='max-w-[600px] w-full flex flex-col mx-auto'>
     <h1 class='Subheader-title Subheader-title--search'>{{ title }}</h1>
     <div>
-      {% include '@components/Molecules/SearchBar/SearchBar.twig' with { label: "Find a delivery address"|trans, classes: 'SearchBar--white ',placeholder: "e.g. City, Postcode"|trans,iconButtonLeft:true, iconButton: "search" } %}
+      {% include '@components/Molecules/SearchBar/SearchBar.html.twig' with { label: "Find a delivery address"|trans, classes: 'SearchBar--white ',placeholder: "e.g. City, Postcode"|trans,iconButtonLeft:true, iconButton: "search" } %}
     </div>
     <div class='Subheader-info'>
       <div>{{ nbProducts}} {{ 'product(s)'|trans }}</div>
-      {% include '@components/Molecules/Button/Button.twig' with {text: 'Filter & Sort'|trans,icon_left:'filter', variant: 'secondary'} %}
+      {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Filter & Sort'|trans,icon_left:'filter', variant: 'secondary'} %}
     </div>
   </div>
 </div>
diff --git a/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js b/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js
index 277c2f4..21af82c 100644
--- a/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js
+++ b/components/Layout/Subheader/SearchResult/SubheaderSearch.stories.js
@@ -1,4 +1,4 @@
-import SubheaderSearch from './SubheaderSearch.twig';
+import SubheaderSearch from './SubheaderSearch.html.twig';
 
 export default {
   title: 'Design System/Layout/Subheader/Search Results'
diff --git a/components/Layout/Subheader/TitleOnly/SubheaderTitle.twig b/components/Layout/Subheader/TitleOnly/SubheaderTitle.html.twig
similarity index 100%
rename from components/Layout/Subheader/TitleOnly/SubheaderTitle.twig
rename to components/Layout/Subheader/TitleOnly/SubheaderTitle.html.twig
diff --git a/components/Layout/Subheader/TitleOnly/SubheaderTitle.stories.js b/components/Layout/Subheader/TitleOnly/SubheaderTitle.stories.js
index 2f28b7a..ca2dee8 100644
--- a/components/Layout/Subheader/TitleOnly/SubheaderTitle.stories.js
+++ b/components/Layout/Subheader/TitleOnly/SubheaderTitle.stories.js
@@ -1,4 +1,4 @@
-import SubheaderTitle from './SubheaderTitle.twig';
+import SubheaderTitle from './SubheaderTitle.html.twig';
 
 export default {
   title: 'Design System/Layout/Subheader/TitleOnly'
diff --git a/components/Molecules/Accordion/Accordion.twig b/components/Molecules/Accordion/Accordion.html.twig
similarity index 100%
rename from components/Molecules/Accordion/Accordion.twig
rename to components/Molecules/Accordion/Accordion.html.twig
diff --git a/components/Molecules/Accordion/Accordion.stories.js b/components/Molecules/Accordion/Accordion.stories.js
index a744a17..9742c67 100644
--- a/components/Molecules/Accordion/Accordion.stories.js
+++ b/components/Molecules/Accordion/Accordion.stories.js
@@ -1,6 +1,6 @@
-import Accordion from './Accordion.twig';
-import FilterList from '../Filters/FilterList/FilterList.twig';
-import FieldInput from '../Fields/FieldInput/FieldInput.twig';
+import Accordion from './Accordion.html.twig';
+import FilterList from '../Filters/FilterList/FilterList.html.twig';
+import FieldInput from '../Fields/FieldInput/FieldInput.html.twig';
 
 export default {
   title: 'Design System/Molecules/Accordion'
@@ -10,19 +10,19 @@ const commonProps = {
   args: {
     title: 'Concertina',
     iconPlus: null,
-    iconMinus: null,
+    iconMinus: null
   },
   argTypes: {
     variant: {
       options: ['text', 'promo', 'filter', 'faq'],
-      control: { type: 'select' },
+      control: { type: 'select' }
     },
-    iconPlus:  {
-      control: { type: 'text' },
-    },
-    iconMinus:  {
-      control: { type: 'text' },
+    iconPlus: {
+      control: { type: 'text' }
     },
+    iconMinus: {
+      control: { type: 'text' }
+    }
   }
 };
 
diff --git a/components/Molecules/Breadcrumb/Breadcrumb.twig b/components/Molecules/Breadcrumb/Breadcrumb.html.twig
similarity index 100%
rename from components/Molecules/Breadcrumb/Breadcrumb.twig
rename to components/Molecules/Breadcrumb/Breadcrumb.html.twig
diff --git a/components/Molecules/Breadcrumb/Breadcrumb.stories.js b/components/Molecules/Breadcrumb/Breadcrumb.stories.js
index e190360..b290469 100644
--- a/components/Molecules/Breadcrumb/Breadcrumb.stories.js
+++ b/components/Molecules/Breadcrumb/Breadcrumb.stories.js
@@ -1,4 +1,4 @@
-import Breadcrumb from './Breadcrumb.twig';
+import Breadcrumb from './Breadcrumb.html.twig';
 import breadcrumbFunction from './Breadcrumb.js';
 
 export default {
@@ -19,7 +19,7 @@ export const Base = {
 export const Lengthy = {
   render: (args) => Breadcrumb(args),
   play: () => {
-    breadcrumbFunction()
+    breadcrumbFunction();
   },
   args: {
     items: [
@@ -29,6 +29,5 @@ export const Lengthy = {
       { label: 'Page mère', href: '#' },
       { label: 'Page actuelle' }
     ]
-
   }
 };
diff --git a/components/Molecules/Button/Button.twig b/components/Molecules/Button/Button.html.twig
similarity index 100%
rename from components/Molecules/Button/Button.twig
rename to components/Molecules/Button/Button.html.twig
diff --git a/components/Molecules/Button/Button.stories.js b/components/Molecules/Button/Button.stories.js
index 15be54a..164daf4 100644
--- a/components/Molecules/Button/Button.stories.js
+++ b/components/Molecules/Button/Button.stories.js
@@ -1,7 +1,7 @@
-import Compact from './Classic.twig';
-import Quantities from './Quantities.twig';
-import Rounds from './Rounds.twig';
-import {quantityButton} from "./button";
+import Compact from './Classic.html.twig';
+import Quantities from './Quantities.html.twig';
+import Rounds from './Rounds.html.twig';
+import { quantityButton } from './button';
 
 export default {
   title: 'Design System/Molecules/Button'
diff --git a/components/Molecules/Button/Classic.twig b/components/Molecules/Button/Classic.html.twig
similarity index 84%
rename from components/Molecules/Button/Classic.twig
rename to components/Molecules/Button/Classic.html.twig
index 8cd5df8..b65cda1 100644
--- a/components/Molecules/Button/Classic.twig
+++ b/components/Molecules/Button/Classic.html.twig
@@ -3,11 +3,11 @@
 <div>
   <div class='h4-desktop mb-5'>Large</div>
   <div  class='flex gap-4'>
-    {% include './Button.twig' with
+    {% include './Button.html.twig' with
       {disabled: false, classes:'Button--large', variant:variant, fill:fill, rectangle:rectangle, text:customText,
         icon_left: iconLeft,
         icon_right: iconRight} %}
-    {% include './Button.twig' with
+    {% include './Button.html.twig' with
       {disabled: true, classes:'Button--large', variant:variant, fill:fill, rectangle:rectangle, text:customText,
         icon_left: iconLeft,
         icon_right: iconRight} %}
@@ -17,11 +17,11 @@
 <div>
   <div class='h4-desktop my-5'>Medium</div>
   <div  class='flex gap-4'>
-    {% include './Button.twig' with
+    {% include './Button.html.twig' with
       {disabled: false, variant:variant, fill:fill, rectangle:rectangle, text:customText,
         icon_left: iconLeft,
         icon_right: iconRight} %}
-    {% include './Button.twig' with
+    {% include './Button.html.twig' with
       {disabled: true, classes:classes, text:customText,
         icon_left: iconLeft,
         icon_right: iconRight} %}
@@ -31,11 +31,11 @@
 <div>
   <div class='h4-desktop my-5'>Small</div>
   <div  class='flex gap-4'>
-    {% include './Button.twig' with
+    {% include './Button.html.twig' with
       {disabled: false, classes:'Button--small', variant:variant, fill:fill, rectangle:rectangle, text:customText,
         icon_left: iconLeft,
         icon_right: iconRight} %}
-    {% include './Button.twig' with
+    {% include './Button.html.twig' with
       {disabled: true, classes:'Button--small', variant:variant, fill:fill, rectangle:rectangle, text:customText,
         icon_left: iconLeft,
         icon_right: iconRight} %}
diff --git a/components/Molecules/Button/Quantities.html.twig b/components/Molecules/Button/Quantities.html.twig
new file mode 100644
index 0000000..55950fc
--- /dev/null
+++ b/components/Molecules/Button/Quantities.html.twig
@@ -0,0 +1,39 @@
+
+<div>
+  <div class='h4-desktop mb-5'>Large</div>
+  <div  class='flex gap-4'>
+    {% include './Quantity.html.twig' with {disabled: false, value:1, classes:'Button--large'} %}
+    {% include './Quantity.html.twig' with {disabled: true, value:1, classes:'Button--large'} %}
+    {% include './QuantityButton.html.twig' with {value:1, classes:'Button--large', text:'Ajouter au panier', icon:'cart'} %}
+  </div>
+
+  <div class='h4-desktop my-5'>Medium</div>
+  <div  class='flex gap-4'>
+    {% include './Quantity.html.twig' with {disabled: false, value:1} %}
+    {% include './Quantity.html.twig' with {disabled: true, value:1} %}
+    {% include './QuantityButton.html.twig' with {value:1, text:'Ajouter au panier', icon:'cart'} %}
+    {% include './QuantityButton.html.twig' with {disabled: true,value:1, text:'Ajouter au panier', icon:'cart'} %}
+
+  </div>
+
+  <div class='h4-desktop my-5'>Small</div>
+  <div  class='flex gap-4'>
+    {% include './Quantity.html.twig' with {disabled: false, value:1, classes:'Button--small'} %}
+    {% include './Quantity.html.twig' with {disabled: true, value:1, classes:'Button--small'} %}
+    {% include './QuantityButton.html.twig' with {value:1, classes:'Button--small', text:'Ajouter au panier', icon:'cart'} %}
+
+  </div>
+
+  <div class='h4-desktop my-5'>XSmall</div>
+  <div  class='flex gap-4'>
+    {% include './Quantity.html.twig' with {disabled: false, value:1, classes:'Button--small Button--xsmall'} %}
+    {% include './Quantity.html.twig' with {disabled: true, value:1, classes:'Button--small Button--xsmall'} %}
+
+  </div>
+
+  <div class='h4-desktop my-5'>Secondary</div>
+  <div  class='flex gap-4'>
+    {% include './Quantity.html.twig' with {disabled: false, value:1, classes:'Button--secondary'} %}
+    {% include './Quantity.html.twig' with {disabled: true, value:1, classes:'Button--secondary'} %}
+  </div>
+</div>
diff --git a/components/Molecules/Button/Quantities.twig b/components/Molecules/Button/Quantities.twig
deleted file mode 100644
index 78495df..0000000
--- a/components/Molecules/Button/Quantities.twig
+++ /dev/null
@@ -1,39 +0,0 @@
-
-<div>
-  <div class='h4-desktop mb-5'>Large</div>
-  <div  class='flex gap-4'>
-    {% include './Quantity.twig' with {disabled: false, value:1, classes:'Button--large'} %}
-    {% include './Quantity.twig' with {disabled: true, value:1, classes:'Button--large'} %}
-    {% include './QuantityButton.twig' with {value:1, classes:'Button--large', text:'Ajouter au panier', icon:'cart'} %}
-  </div>
-
-  <div class='h4-desktop my-5'>Medium</div>
-  <div  class='flex gap-4'>
-    {% include './Quantity.twig' with {disabled: false, value:1} %}
-    {% include './Quantity.twig' with {disabled: true, value:1} %}
-    {% include './QuantityButton.twig' with {value:1, text:'Ajouter au panier', icon:'cart'} %}
-    {% include './QuantityButton.twig' with {disabled: true,value:1, text:'Ajouter au panier', icon:'cart'} %}
-
-  </div>
-
-  <div class='h4-desktop my-5'>Small</div>
-  <div  class='flex gap-4'>
-    {% include './Quantity.twig' with {disabled: false, value:1, classes:'Button--small'} %}
-    {% include './Quantity.twig' with {disabled: true, value:1, classes:'Button--small'} %}
-    {% include './QuantityButton.twig' with {value:1, classes:'Button--small', text:'Ajouter au panier', icon:'cart'} %}
-
-  </div>
-
-  <div class='h4-desktop my-5'>XSmall</div>
-  <div  class='flex gap-4'>
-    {% include './Quantity.twig' with {disabled: false, value:1, classes:'Button--small Button--xsmall'} %}
-    {% include './Quantity.twig' with {disabled: true, value:1, classes:'Button--small Button--xsmall'} %}
-
-  </div>
-
-  <div class='h4-desktop my-5'>Secondary</div>
-  <div  class='flex gap-4'>
-    {% include './Quantity.twig' with {disabled: false, value:1, classes:'Button--secondary'} %}
-    {% include './Quantity.twig' with {disabled: true, value:1, classes:'Button--secondary'} %}
-  </div>
-</div>
diff --git a/components/Molecules/Button/Quantity.twig b/components/Molecules/Button/Quantity.html.twig
similarity index 100%
rename from components/Molecules/Button/Quantity.twig
rename to components/Molecules/Button/Quantity.html.twig
diff --git a/components/Molecules/Button/QuantityButton.twig b/components/Molecules/Button/QuantityButton.html.twig
similarity index 50%
rename from components/Molecules/Button/QuantityButton.twig
rename to components/Molecules/Button/QuantityButton.html.twig
index 814acc0..4c15b0f 100644
--- a/components/Molecules/Button/QuantityButton.twig
+++ b/components/Molecules/Button/QuantityButton.html.twig
@@ -6,6 +6,6 @@
 {% set fill = fill|default(false) %}
 
 <div class='Button-quantityButton'>
-  {% include '@components/Molecules/Button/Quantity.twig' with {disabled: disabled, value:value, classes:classes} %}
-  {% include '@components/Molecules/Button/Button.twig' with {disabled: disabled, text:text, classes:classes, icon_left: icon, fill:fill} %}
+  {% include '@components/Molecules/Button/Quantity.html.twig' with {disabled: disabled, value:value, classes:classes} %}
+  {% include '@components/Molecules/Button/Button.html.twig' with {disabled: disabled, text:text, classes:classes, icon_left: icon, fill:fill} %}
 </div>
diff --git a/components/Molecules/Button/Rounds.twig b/components/Molecules/Button/Rounds.html.twig
similarity index 80%
rename from components/Molecules/Button/Rounds.twig
rename to components/Molecules/Button/Rounds.html.twig
index 6901e49..fd10422 100644
--- a/components/Molecules/Button/Rounds.twig
+++ b/components/Molecules/Button/Rounds.html.twig
@@ -4,12 +4,12 @@
 <div>
   <div class='h4-desktop mb-5'>Large</div>
   <div  class='flex gap-4'>
-    {% include './Button.twig' with
+    {% include './Button.html.twig' with
       {classes:'Button--large',
         round:true,
         variant:variant,
         icon_left: icon} %}
-    {% include './Button.twig' with
+    {% include './Button.html.twig' with
       {disabled: true,round:true, classes:'Button--large',
         icon_left: icon} %}
   </div>
@@ -18,10 +18,10 @@
 <div class='mt-5'>
   <div class='h4-desktop mb-5'>Small</div>
   <div  class='flex gap-4'>
-    {% include './Button.twig' with
+    {% include './Button.html.twig' with
       {classes:'Button--small', round:true,
         icon_left: icon} %}
-    {% include './Button.twig' with
+    {% include './Button.html.twig' with
       {disabled: true, classes:'Button--small', round:true,
         icon_left: icon} %}
   </div>
diff --git a/components/Molecules/Dropdown/Dropdown.twig b/components/Molecules/Dropdown/Dropdown.html.twig
similarity index 100%
rename from components/Molecules/Dropdown/Dropdown.twig
rename to components/Molecules/Dropdown/Dropdown.html.twig
diff --git a/components/Molecules/Dropdown/Dropdown.stories.js b/components/Molecules/Dropdown/Dropdown.stories.js
index 382a047..368e9f2 100644
--- a/components/Molecules/Dropdown/Dropdown.stories.js
+++ b/components/Molecules/Dropdown/Dropdown.stories.js
@@ -1,4 +1,4 @@
-import Dropdown from './Dropdown.twig';
+import Dropdown from './Dropdown.html.twig';
 import dropdownFunction from './Dropdown.js';
 
 export default {
@@ -8,14 +8,19 @@ export default {
 export const Base = {
   render: (args) => Dropdown(args),
   args: {
-    id: "civility",
-    placeholder: "Civilité",
-    options: [{ value: 1, label: "M." }, { value: 2, label: "Mme" }, { value: 3, label: "Neutre / Non binaire / Agenre" }, { value: 4, label: "Je ne souhaite pas répondre" }],
+    id: 'civility',
+    placeholder: 'Civilité',
+    options: [
+      { value: 1, label: 'M.' },
+      { value: 2, label: 'Mme' },
+      { value: 3, label: 'Neutre / Non binaire / Agenre' },
+      { value: 4, label: 'Je ne souhaite pas répondre' }
+    ]
   },
   play: () => {
-    dropdownFunction()
+    dropdownFunction();
   },
   parameters: {
-    backgrounds: { default: 'grey' },
-  },
+    backgrounds: { default: 'grey' }
+  }
 };
diff --git a/components/Molecules/Favorite/Favorite.twig b/components/Molecules/Favorite/Favorite.html.twig
similarity index 100%
rename from components/Molecules/Favorite/Favorite.twig
rename to components/Molecules/Favorite/Favorite.html.twig
diff --git a/components/Molecules/Favorite/Favorite.stories.js b/components/Molecules/Favorite/Favorite.stories.js
index 162d41a..76c5957 100644
--- a/components/Molecules/Favorite/Favorite.stories.js
+++ b/components/Molecules/Favorite/Favorite.stories.js
@@ -1,4 +1,4 @@
-import Favorite from './Favorite.twig';
+import Favorite from './Favorite.html.twig';
 
 export default {
   title: 'Design System/Molecules/Favorite'
diff --git a/components/Molecules/Fields/FieldInput/FieldInput.twig b/components/Molecules/Fields/FieldInput/FieldInput.html.twig
similarity index 90%
rename from components/Molecules/Fields/FieldInput/FieldInput.twig
rename to components/Molecules/Fields/FieldInput/FieldInput.html.twig
index bdeb19f..34c3735 100644
--- a/components/Molecules/Fields/FieldInput/FieldInput.twig
+++ b/components/Molecules/Fields/FieldInput/FieldInput.html.twig
@@ -42,7 +42,7 @@
 			{% endif %}
 		</label>
 		{% if tooltip %}
-			{% include '../../Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %}
+			{% include '../../Tooltip/Tooltip.html.twig' with {tooltip: tooltip, position: 'bottom'} %}
 		{% endif %}
 	</div>
 	<div class='FieldInput-blockInput {% if iconButton and iconButtonLeft %}FieldInput-blockInputIconLeft{% endif %}'>
@@ -57,7 +57,7 @@
 		{% endif %}
 		{% if button %}
 			<div class="FieldInput-button">
-				{% include '../../Button/Button.twig' with {text: button, rectangle: true, type: "submit", classes: size == 'small' ? ' Button--small' : ''} %}
+				{% include '../../Button/Button.html.twig' with {text: button, rectangle: true, type: "submit", classes: size == 'small' ? ' Button--small' : ''} %}
 			</div>
 		{% endif %}
 	</div>
diff --git a/components/Molecules/Fields/FieldInput/FieldInput.stories.js b/components/Molecules/Fields/FieldInput/FieldInput.stories.js
index 3bc62c5..c8ba138 100644
--- a/components/Molecules/Fields/FieldInput/FieldInput.stories.js
+++ b/components/Molecules/Fields/FieldInput/FieldInput.stories.js
@@ -1,4 +1,4 @@
-import FieldInput from './FieldInput.twig';
+import FieldInput from './FieldInput.html.twig';
 import fieldInputFunction from './FieldInput.js';
 
 export default {
diff --git a/components/Molecules/Fields/FieldNumber/FieldNumber.twig b/components/Molecules/Fields/FieldNumber/FieldNumber.html.twig
similarity index 100%
rename from components/Molecules/Fields/FieldNumber/FieldNumber.twig
rename to components/Molecules/Fields/FieldNumber/FieldNumber.html.twig
diff --git a/components/Molecules/Fields/FieldNumber/FieldNumber.stories.js b/components/Molecules/Fields/FieldNumber/FieldNumber.stories.js
index ed790c0..0408c42 100644
--- a/components/Molecules/Fields/FieldNumber/FieldNumber.stories.js
+++ b/components/Molecules/Fields/FieldNumber/FieldNumber.stories.js
@@ -1,4 +1,4 @@
-import FieldNumber from './FieldNumber.twig';
+import FieldNumber from './FieldNumber.html.twig';
 import fieldNumberFunction from './FieldNumber.js';
 
 export default {
@@ -11,10 +11,10 @@ export const Base = {
     fieldNumberFunction();
   },
   args: {
-    name: "Indication",
-    min: "",
-    max: "",
-    error: "",
+    name: 'Indication',
+    min: '',
+    max: '',
+    error: ''
   },
   argTypes: {
     disabled: {
@@ -22,6 +22,6 @@ export const Base = {
     },
     required: {
       control: { type: 'boolean' }
-    },
+    }
   }
 };
diff --git a/components/Molecules/Fields/FieldSelect/FieldSelect.twig b/components/Molecules/Fields/FieldSelect/FieldSelect.html.twig
similarity index 93%
rename from components/Molecules/Fields/FieldSelect/FieldSelect.twig
rename to components/Molecules/Fields/FieldSelect/FieldSelect.html.twig
index 240e6d9..e644542 100644
--- a/components/Molecules/Fields/FieldSelect/FieldSelect.twig
+++ b/components/Molecules/Fields/FieldSelect/FieldSelect.html.twig
@@ -27,7 +27,7 @@
       {{ label }}{% if required and label %} *{% endif %}
     </label>
     {% if tooltip %}
-      {% include '@components/Molecules/Tooltip/Tooltip.twig' with {tooltip: tooltip, position: 'bottom'} %}
+      {% include '@components/Molecules/Tooltip/Tooltip.html.twig' with {tooltip: tooltip, position: 'bottom'} %}
     {% endif %}
   </div>
   <select
diff --git a/components/Molecules/Fields/FieldSelect/FieldSelect.stories.js b/components/Molecules/Fields/FieldSelect/FieldSelect.stories.js
index 3a782cf..ace5b85 100644
--- a/components/Molecules/Fields/FieldSelect/FieldSelect.stories.js
+++ b/components/Molecules/Fields/FieldSelect/FieldSelect.stories.js
@@ -1,4 +1,4 @@
-import FieldSelect from './FieldSelect.twig';
+import FieldSelect from './FieldSelect.html.twig';
 import fieldSelectFunction from './FieldSelect.js';
 
 export default {
@@ -11,12 +11,16 @@ export const Base = {
     fieldSelectFunction();
   },
   args: {
-    name: "Indication",
-    options: [{ value: 1, label: "selecteur 1" }, { value: 2, label: "selecteur 2" }, { value: 3, label: "selecteur 3" }],
-    label: "Indication",
-    placeholder: "Ex. Nom",
-    error: "",
-    tooltip: "",
+    name: 'Indication',
+    options: [
+      { value: 1, label: 'selecteur 1' },
+      { value: 2, label: 'selecteur 2' },
+      { value: 3, label: 'selecteur 3' }
+    ],
+    label: 'Indication',
+    placeholder: 'Ex. Nom',
+    error: '',
+    tooltip: ''
   },
   argTypes: {
     disabled: {
@@ -27,10 +31,10 @@ export const Base = {
     },
     size: {
       options: ['large', 'small'],
-      control: { type: 'select' },
+      control: { type: 'select' }
     },
     required: {
       control: { type: 'boolean' }
-    },
+    }
   }
 };
diff --git a/components/Molecules/Filters/FilterList/FilterList.twig b/components/Molecules/Filters/FilterList/FilterList.html.twig
similarity index 100%
rename from components/Molecules/Filters/FilterList/FilterList.twig
rename to components/Molecules/Filters/FilterList/FilterList.html.twig
diff --git a/components/Molecules/Filters/FilterList/FilterList.stories.js b/components/Molecules/Filters/FilterList/FilterList.stories.js
index be146a2..f21f70a 100644
--- a/components/Molecules/Filters/FilterList/FilterList.stories.js
+++ b/components/Molecules/Filters/FilterList/FilterList.stories.js
@@ -1,4 +1,4 @@
-import FilterList from './FilterList.twig';
+import FilterList from './FilterList.html.twig';
 
 export default {
   title: 'Design System/Molecules/Filters/FilterList'
@@ -9,9 +9,9 @@ export const Base = {
   args: {
     label: 'Item filtre et tri',
     value: 1,
-    onClick: {},
+    onClick: {}
   },
   parameters: {
-    backgrounds: { default: 'grey-lighter' },
-  },
+    backgrounds: { default: 'grey-lighter' }
+  }
 };
diff --git a/components/Molecules/Filters/FilterPill/FilterPill.twig b/components/Molecules/Filters/FilterPill/FilterPill.html.twig
similarity index 100%
rename from components/Molecules/Filters/FilterPill/FilterPill.twig
rename to components/Molecules/Filters/FilterPill/FilterPill.html.twig
diff --git a/components/Molecules/Filters/FilterPill/FilterPill.stories.js b/components/Molecules/Filters/FilterPill/FilterPill.stories.js
index 3fef34b..7d88f73 100644
--- a/components/Molecules/Filters/FilterPill/FilterPill.stories.js
+++ b/components/Molecules/Filters/FilterPill/FilterPill.stories.js
@@ -1,4 +1,4 @@
-import FilterPill from './FilterPill.twig';
+import FilterPill from './FilterPill.html.twig';
 
 export default {
   title: 'Design System/Molecules/Filters/FilterPill'
diff --git a/components/Molecules/Filters/FilterSelect/FilterSelect.twig b/components/Molecules/Filters/FilterSelect/FilterSelect.html.twig
similarity index 100%
rename from components/Molecules/Filters/FilterSelect/FilterSelect.twig
rename to components/Molecules/Filters/FilterSelect/FilterSelect.html.twig
diff --git a/components/Molecules/HeaderButton/HeaderButton.twig b/components/Molecules/HeaderButton/HeaderButton.html.twig
similarity index 100%
rename from components/Molecules/HeaderButton/HeaderButton.twig
rename to components/Molecules/HeaderButton/HeaderButton.html.twig
diff --git a/components/Molecules/HeaderButton/HeaderButton.stories.js b/components/Molecules/HeaderButton/HeaderButton.stories.js
index 1eaa4ec..65bc60e 100644
--- a/components/Molecules/HeaderButton/HeaderButton.stories.js
+++ b/components/Molecules/HeaderButton/HeaderButton.stories.js
@@ -1,4 +1,4 @@
-import HeaderButton from './HeaderButton.twig';
+import HeaderButton from './HeaderButton.html.twig';
 
 export default {
   title: 'Design System/Molecules/Header Button'
diff --git a/components/Molecules/HeaderButton/HeaderButtons.html.twig b/components/Molecules/HeaderButton/HeaderButtons.html.twig
new file mode 100644
index 0000000..d208708
--- /dev/null
+++ b/components/Molecules/HeaderButton/HeaderButtons.html.twig
@@ -0,0 +1,15 @@
+<div class='block h-[80px] flex'>
+  {% include './HeaderButton.html.twig' with {icon: 'heart-fill', classes: 'HeaderButton--light', text: 'Wishlist',small:small } %}
+  {% include './HeaderButton.html.twig' with {icon: 'account',inactive: inactive, text: 'Connexion',small:small } %}
+  {% include './HeaderButton.html.twig' with {icon: 'account-logged',inactive: inactive, text: 'Prénom N.',small:small } %}
+  {% include './HeaderButton.html.twig' with {icon: 'cart', classes: 'HeaderButton--dark', text: 'Panier' ,small:small} %}
+  {% include './HeaderButton.html.twig' with {icon: 'cart-badge', classes: 'HeaderButton--dark', text: 'Panier', subText:'(2 000,00€)',small:small } %}
+</div>
+
+<div class='block h-[62px] w-[390px] flex'>
+  {% include './HeaderButton.html.twig' with {icon: 'menu',inactive: inactive, text: 'Menu',mobile:true } %}
+  {% include './HeaderButton.html.twig' with {icon: 'heart-fill', classes: 'HeaderButton--light', text: 'Wishlist',mobile:true } %}
+  {% include './HeaderButton.html.twig' with {icon: 'search', classes: 'HeaderButton--light', text: 'Recherche',mobile:true } %}
+  {% include './HeaderButton.html.twig' with {icon: 'account', classes: 'HeaderButton--light', text: 'Compte',mobile:true } %}
+  {% include './HeaderButton.html.twig' with {icon: 'cart', classes: 'HeaderButton--dark', text: 'Panier' ,mobile:true} %}
+</div>
diff --git a/components/Molecules/HeaderButton/HeaderButtons.twig b/components/Molecules/HeaderButton/HeaderButtons.twig
deleted file mode 100644
index 31fc6b9..0000000
--- a/components/Molecules/HeaderButton/HeaderButtons.twig
+++ /dev/null
@@ -1,15 +0,0 @@
-<div class='block h-[80px] flex'>
-  {% include './HeaderButton.twig' with {icon: 'heart-fill', classes: 'HeaderButton--light', text: 'Wishlist',small:small } %}
-  {% include './HeaderButton.twig' with {icon: 'account',inactive: inactive, text: 'Connexion',small:small } %}
-  {% include './HeaderButton.twig' with {icon: 'account-logged',inactive: inactive, text: 'Prénom N.',small:small } %}
-  {% include './HeaderButton.twig' with {icon: 'cart', classes: 'HeaderButton--dark', text: 'Panier' ,small:small} %}
-  {% include './HeaderButton.twig' with {icon: 'cart-badge', classes: 'HeaderButton--dark', text: 'Panier', subText:'(2 000,00€)',small:small } %}
-</div>
-
-<div class='block h-[62px] w-[390px] flex'>
-  {% include './HeaderButton.twig' with {icon: 'menu',inactive: inactive, text: 'Menu',mobile:true } %}
-  {% include './HeaderButton.twig' with {icon: 'heart-fill', classes: 'HeaderButton--light', text: 'Wishlist',mobile:true } %}
-  {% include './HeaderButton.twig' with {icon: 'search', classes: 'HeaderButton--light', text: 'Recherche',mobile:true } %}
-  {% include './HeaderButton.twig' with {icon: 'account', classes: 'HeaderButton--light', text: 'Compte',mobile:true } %}
-  {% include './HeaderButton.twig' with {icon: 'cart', classes: 'HeaderButton--dark', text: 'Panier' ,mobile:true} %}
-</div>
diff --git a/components/Molecules/ItemHeader/ItemHeader.twig b/components/Molecules/ItemHeader/ItemHeader.html.twig
similarity index 100%
rename from components/Molecules/ItemHeader/ItemHeader.twig
rename to components/Molecules/ItemHeader/ItemHeader.html.twig
diff --git a/components/Molecules/ItemHeader/ItemHeader.stories.js b/components/Molecules/ItemHeader/ItemHeader.stories.js
index c491fad..2392adc 100644
--- a/components/Molecules/ItemHeader/ItemHeader.stories.js
+++ b/components/Molecules/ItemHeader/ItemHeader.stories.js
@@ -1,4 +1,4 @@
-import ItemHeader from './ItemHeader.twig';
+import ItemHeader from './ItemHeader.html.twig';
 
 export default {
   title: 'Design System/Molecules/ItemHeader'
diff --git a/components/Molecules/Link/Link.twig b/components/Molecules/Link/Link.html.twig
similarity index 100%
rename from components/Molecules/Link/Link.twig
rename to components/Molecules/Link/Link.html.twig
diff --git a/components/Molecules/Link/Link.stories.js b/components/Molecules/Link/Link.stories.js
index 1860a47..95f5d45 100644
--- a/components/Molecules/Link/Link.stories.js
+++ b/components/Molecules/Link/Link.stories.js
@@ -1,13 +1,13 @@
-import Link from './Link.twig';
+import Link from './Link.html.twig';
 
 export default {
-  title: 'Design System/Molecules/Link',
+  title: 'Design System/Molecules/Link'
 };
 
 const commonProps = {
   args: {
-    customText: "Link",
-    href: "",
+    customText: 'Link',
+    href: '',
     target: ''
   },
   argTypes: {
@@ -16,7 +16,7 @@ const commonProps = {
     },
     size: {
       options: ['large', 'medium'],
-      control: { type: 'select' },
+      control: { type: 'select' }
     }
   }
 };
@@ -30,12 +30,8 @@ export const WithIcon = {
   render: (args) => Link(args),
   ...commonProps,
   args: {
-    iconLeft: "chevron-left",
-    iconRight: "chevron-right",
+    iconLeft: 'chevron-left',
+    iconRight: 'chevron-right',
     ...commonProps.args
-  },
+  }
 };
-
-
-
-
diff --git a/components/Molecules/OrderTag/OrderTag.twig b/components/Molecules/OrderTag/OrderTag.html.twig
similarity index 100%
rename from components/Molecules/OrderTag/OrderTag.twig
rename to components/Molecules/OrderTag/OrderTag.html.twig
diff --git a/components/Molecules/OrderTag/OrderTag.stories.js b/components/Molecules/OrderTag/OrderTag.stories.js
index 1ef681d..d3a8a8a 100644
--- a/components/Molecules/OrderTag/OrderTag.stories.js
+++ b/components/Molecules/OrderTag/OrderTag.stories.js
@@ -1,4 +1,4 @@
-import OrderTag from './OrderTag.twig';
+import OrderTag from './OrderTag.html.twig';
 
 export default {
   title: 'Design System/Molecules/OrderTag'
@@ -36,39 +36,39 @@ export const Variants = {
     <h2 class="font-bold text-lg">Status Commande</h2>
     <div class="my-2">
     informative :
-    ${OrderTag({ customText: 'Commande validée', variant: 'informative' })}</div> 
+    ${OrderTag({ customText: 'Commande validée', variant: 'informative' })}</div>
     </div>
     <span class="mt-4 mb-1">
     success :
     ${OrderTag({ customText: 'Commande expédiée', variant: 'success' })}</div>
     <div class="my-2">
-    validated : 
+    validated :
     ${OrderTag({ customText: 'Commande expédiée', variant: 'validated' })}</div>
     <div class="my-2">
-    grey : 
+    grey :
     ${OrderTag({ customText: 'Commande expédiée', variant: 'grey' })}</div>
     <div class="my-2">
-    error : 
+    error :
     ${OrderTag({ customText: 'Commande expédiée', variant: 'error' })}</div>
     <div class="my-2">
-    processing : 
+    processing :
     ${OrderTag({ customText: 'Commande expédiée', variant: 'processing' })}</div>
     <div class="my-2">
-    warning : 
+    warning :
     ${OrderTag({ customText: 'Commande expédiée', variant: 'warning' })}</div>
     <div class="my-2">
-    vermillon : 
+    vermillon :
     ${OrderTag({ customText: 'Commande expédiée', variant: 'vermillon' })}</div>
 
     <h2 class="font-bold text-lg mt-8">Stock Status</h2>
     <div class="my-2">
-    informative : 
-    ${OrderTag({ customText: 'En stock', variant: 'success', type: 'minimal' })}</div> 
+    informative :
+    ${OrderTag({ customText: 'En stock', variant: 'success', type: 'minimal' })}</div>
     <div class="my-2">
-    success : 
+    success :
     ${OrderTag({ customText: 'Stocks faibles', variant: 'warning', type: 'minimal' })}</div>
     <div class="my-2">
-    validated : 
+    validated :
     ${OrderTag({ customText: 'Epuisé', variant: 'error', type: 'minimal' })}</div>
   `
 };
diff --git a/components/Molecules/Pagination/Pagination.twig b/components/Molecules/Pagination/Pagination.html.twig
similarity index 100%
rename from components/Molecules/Pagination/Pagination.twig
rename to components/Molecules/Pagination/Pagination.html.twig
diff --git a/components/Molecules/Pagination/Pagination.stories.js b/components/Molecules/Pagination/Pagination.stories.js
index 2ea0a77..2bb415d 100644
--- a/components/Molecules/Pagination/Pagination.stories.js
+++ b/components/Molecules/Pagination/Pagination.stories.js
@@ -1,4 +1,4 @@
-import Pagination from './Pagination.twig';
+import Pagination from './Pagination.html.twig';
 
 export default {
   title: 'Design System/Molecules/Pagination'
@@ -10,6 +10,6 @@ export const Base = {
     prevText: 'Précédent',
     nextText: 'Suivant',
     currentPage: 2,
-    totalPages: 3,
+    totalPages: 3
   }
 };
diff --git a/components/Molecules/PasswordControls/PasswordControls.twig b/components/Molecules/PasswordControls/PasswordControls.html.twig
similarity index 100%
rename from components/Molecules/PasswordControls/PasswordControls.twig
rename to components/Molecules/PasswordControls/PasswordControls.html.twig
diff --git a/components/Molecules/PasswordControls/PasswordControls.stories.js b/components/Molecules/PasswordControls/PasswordControls.stories.js
index c1a1263..f15858d 100644
--- a/components/Molecules/PasswordControls/PasswordControls.stories.js
+++ b/components/Molecules/PasswordControls/PasswordControls.stories.js
@@ -1,5 +1,5 @@
-import PasswordControls from './PasswordControls.twig';
-import FieldInput from '../Fields/FieldInput/FieldInput.twig';
+import PasswordControls from './PasswordControls.html.twig';
+import FieldInput from '../Fields/FieldInput/FieldInput.html.twig';
 import PasswordControlsFunction from './PasswordControls';
 
 export default {
diff --git a/components/Molecules/RadioCard/RadioCard.twig b/components/Molecules/RadioCard/RadioCard.html.twig
similarity index 100%
rename from components/Molecules/RadioCard/RadioCard.twig
rename to components/Molecules/RadioCard/RadioCard.html.twig
diff --git a/components/Molecules/RadioCard/RadioCard.stories.js b/components/Molecules/RadioCard/RadioCard.stories.js
index 0a08ead..658dec2 100644
--- a/components/Molecules/RadioCard/RadioCard.stories.js
+++ b/components/Molecules/RadioCard/RadioCard.stories.js
@@ -1,4 +1,4 @@
-import RadioCard from './RadioCard.twig';
+import RadioCard from './RadioCard.html.twig';
 
 export default {
   title: 'Design System/Molecules/RadioCard'
diff --git a/components/Molecules/Score/Score.twig b/components/Molecules/Score/Score.html.twig
similarity index 100%
rename from components/Molecules/Score/Score.twig
rename to components/Molecules/Score/Score.html.twig
diff --git a/components/Molecules/Score/Score.stories.js b/components/Molecules/Score/Score.stories.js
index 1727e65..600b4f1 100644
--- a/components/Molecules/Score/Score.stories.js
+++ b/components/Molecules/Score/Score.stories.js
@@ -1,14 +1,14 @@
-import Score from './Score.twig';
+import Score from './Score.html.twig';
 
 export default {
   title: 'Design System/Molecules/Score'
 };
 
 export const base = {
-  render  : (args) => Score(args),
-  args    : {
+  render: (args) => Score(args),
+  args: {
     score: 4,
-    maxScore: 5,
+    maxScore: 5
   },
   argTypes: {}
 };
diff --git a/components/Molecules/SearchBar/Base.twig b/components/Molecules/SearchBar/Base.html.twig
similarity index 51%
rename from components/Molecules/SearchBar/Base.twig
rename to components/Molecules/SearchBar/Base.html.twig
index 3b300e1..2899842 100644
--- a/components/Molecules/SearchBar/Base.twig
+++ b/components/Molecules/SearchBar/Base.html.twig
@@ -1,3 +1,3 @@
 <div class='w-[400px] max-w-full'>
-  {% include './SearchBar.twig' %}
+  {% include './SearchBar.html.twig' %}
 </div>
diff --git a/components/Molecules/SearchBar/SearchBar.twig b/components/Molecules/SearchBar/SearchBar.html.twig
similarity index 100%
rename from components/Molecules/SearchBar/SearchBar.twig
rename to components/Molecules/SearchBar/SearchBar.html.twig
diff --git a/components/Molecules/SearchBar/SearchBar.stories.js b/components/Molecules/SearchBar/SearchBar.stories.js
index 5e07313..5256376 100644
--- a/components/Molecules/SearchBar/SearchBar.stories.js
+++ b/components/Molecules/SearchBar/SearchBar.stories.js
@@ -1,4 +1,4 @@
-import Base from './Base.twig';
+import Base from './Base.html.twig';
 
 export default {
   title: 'Design System/Molecules/SearchBar'
diff --git a/components/Molecules/Shortcut/Shortcut.twig b/components/Molecules/Shortcut/Shortcut.html.twig
similarity index 100%
rename from components/Molecules/Shortcut/Shortcut.twig
rename to components/Molecules/Shortcut/Shortcut.html.twig
diff --git a/components/Molecules/Shortcut/Shortcut.stories.js b/components/Molecules/Shortcut/Shortcut.stories.js
index e0ad04e..92e73e9 100644
--- a/components/Molecules/Shortcut/Shortcut.stories.js
+++ b/components/Molecules/Shortcut/Shortcut.stories.js
@@ -1,4 +1,4 @@
-import Shortcut from './Shortcut.twig';
+import Shortcut from './Shortcut.html.twig';
 
 export default {
   title: 'Design System/Molecules/Shortcut'
diff --git a/components/Molecules/Step/Steps.twig b/components/Molecules/Step/Steps.html.twig
similarity index 100%
rename from components/Molecules/Step/Steps.twig
rename to components/Molecules/Step/Steps.html.twig
diff --git a/components/Molecules/Step/Steps.stories.js b/components/Molecules/Step/Steps.stories.js
index 9160b54..ac05997 100644
--- a/components/Molecules/Step/Steps.stories.js
+++ b/components/Molecules/Step/Steps.stories.js
@@ -1,4 +1,4 @@
-import Steps from './Steps.twig';
+import Steps from './Steps.html.twig';
 
 export default {
   title: 'Design System/Molecules/Steps'
diff --git a/components/Molecules/Tab/Tab.twig b/components/Molecules/Tab/Tab.html.twig
similarity index 100%
rename from components/Molecules/Tab/Tab.twig
rename to components/Molecules/Tab/Tab.html.twig
diff --git a/components/Molecules/Tab/Tab.stories.js b/components/Molecules/Tab/Tab.stories.js
index a4957c2..c7988dd 100644
--- a/components/Molecules/Tab/Tab.stories.js
+++ b/components/Molecules/Tab/Tab.stories.js
@@ -1,12 +1,12 @@
-import Tab from './Tab.twig';
+import Tab from './Tab.html.twig';
 
 export default {
-  title: 'Design System/Molecules/Tab',
+  title: 'Design System/Molecules/Tab'
 };
 
 const commonProps = {
   args: {
-    customText: "Tabulation",
+    customText: 'Tabulation'
   },
   argTypes: {
     disabled: {
@@ -14,7 +14,7 @@ const commonProps = {
     },
     size: {
       options: ['large', 'small'],
-      control: { type: 'select' },
+      control: { type: 'select' }
     }
   }
 };
@@ -28,8 +28,8 @@ export const WithIcon = {
   render: (args) => Tab(args),
   ...commonProps,
   args: {
-    iconLeft: "chevron-left",
-    iconRight: "chevron-right",
+    iconLeft: 'chevron-left',
+    iconRight: 'chevron-right',
     ...commonProps.args
-  },
+  }
 };
diff --git a/components/Molecules/Tag/Tag.twig b/components/Molecules/Tag/Tag.html.twig
similarity index 100%
rename from components/Molecules/Tag/Tag.twig
rename to components/Molecules/Tag/Tag.html.twig
diff --git a/components/Molecules/Tag/Tag.stories.js b/components/Molecules/Tag/Tag.stories.js
index 6ed8a31..de7b7e0 100644
--- a/components/Molecules/Tag/Tag.stories.js
+++ b/components/Molecules/Tag/Tag.stories.js
@@ -1,4 +1,4 @@
-import Tag from './Tag.twig';
+import Tag from './Tag.html.twig';
 import tagFunction from './Tag.js';
 
 export default {
@@ -8,35 +8,35 @@ export default {
 export const Base = {
   render: (args) => Tag(args),
   args: {
-    customText: "Commande validée",
-    icon: "carbone",
+    customText: 'Commande validée',
+    icon: 'carbone'
   },
   argTypes: {
     variant: {
       options: ['validated', 'error', 'vermillon'],
-      control: { type: 'select' },
-    },
-  },
+      control: { type: 'select' }
+    }
+  }
 };
 
 export const Action = {
   render: (args) => Tag(args),
   play: () => {
-    tagFunction()
+    tagFunction();
   },
   args: {
-    customText: "Commande validée",
-    icon: "carbone",
-    href: "",
-    onClick: {},
+    customText: 'Commande validée',
+    icon: 'carbone',
+    href: '',
+    onClick: {}
   },
   argTypes: {
     variant: {
       options: ['validated', 'error', 'vermillon'],
-      control: { type: 'select' },
+      control: { type: 'select' }
     },
     closeOnClick: {
       control: { type: 'boolean' }
-    },
-  },
+    }
+  }
 };
diff --git a/components/Molecules/Tooltip/Tooltip.twig b/components/Molecules/Tooltip/Tooltip.html.twig
similarity index 100%
rename from components/Molecules/Tooltip/Tooltip.twig
rename to components/Molecules/Tooltip/Tooltip.html.twig
diff --git a/components/Molecules/Tooltip/Tooltip.stories.js b/components/Molecules/Tooltip/Tooltip.stories.js
index 2e2909a..1c3fb4b 100644
--- a/components/Molecules/Tooltip/Tooltip.stories.js
+++ b/components/Molecules/Tooltip/Tooltip.stories.js
@@ -1,4 +1,4 @@
-import Tooltip from './Tooltip.twig';
+import Tooltip from './Tooltip.html.twig';
 import TooltipFunction from './Tooltip.js';
 
 export default {
@@ -8,18 +8,19 @@ export default {
 export const Base = {
   render: (args) => Tooltip(args),
   play: () => {
-    TooltipFunction()
+    TooltipFunction();
   },
   args: {
-    tooltip: "Ici un texte pour le tool tip, celui-ci doit rester en dessous de 80 caractères.",
+    tooltip:
+      'Ici un texte pour le tool tip, celui-ci doit rester en dessous de 80 caractères.'
   },
   argTypes: {
     position: {
       options: ['top', 'bottom'],
-      control: { type: 'select' },
+      control: { type: 'select' }
     }
   },
   parameters: {
-    layout: 'centered',
-  },
+    layout: 'centered'
+  }
 };
diff --git a/components/Molecules/userMenu/UserMenu.twig b/components/Molecules/userMenu/UserMenu.html.twig
similarity index 100%
rename from components/Molecules/userMenu/UserMenu.twig
rename to components/Molecules/userMenu/UserMenu.html.twig
diff --git a/components/Molecules/userMenu/UserMenu.stories.js b/components/Molecules/userMenu/UserMenu.stories.js
index 96758a2..bc55692 100644
--- a/components/Molecules/userMenu/UserMenu.stories.js
+++ b/components/Molecules/userMenu/UserMenu.stories.js
@@ -1,4 +1,4 @@
-import UserMenu from './UserMenu.twig';
+import UserMenu from './UserMenu.html.twig';
 
 export default {
   title: 'Design System/Molecules/UserMenu'
@@ -8,18 +8,18 @@ export const Base = {
   render: (args) => UserMenu(args),
   args: {
     customText: 'Mes commandes',
-    href: '',
+    href: ''
   },
   argTypes: {
     variant: {
       options: ['vermillon', 'white'],
-      control: { type: 'select' },
+      control: { type: 'select' }
     },
     icon: {
       control: { type: 'boolean' }
     }
   },
   parameters: {
-    backgrounds: { default: 'grey' },
-  },
+    backgrounds: { default: 'grey' }
+  }
 };
diff --git a/components/Organisms/AddToCart/AddToCart.twig b/components/Organisms/AddToCart/AddToCart.html.twig
similarity index 90%
rename from components/Organisms/AddToCart/AddToCart.twig
rename to components/Organisms/AddToCart/AddToCart.html.twig
index fa4e694..61492ef 100644
--- a/components/Organisms/AddToCart/AddToCart.twig
+++ b/components/Organisms/AddToCart/AddToCart.html.twig
@@ -13,7 +13,7 @@
     {% if unavailable %}
       <span class='typo-button-large'>{{ "Product unavailable"|trans }}</span>
     {% else %}
-      {% include '@components/Molecules/Button/Button.twig' with
+      {% include '@components/Molecules/Button/Button.html.twig' with
         {classes:'', variant:'primary', text:'Add to cart'|trans} %}
     {% endif %}
   </div>
diff --git a/components/Organisms/AddToCart/AddToCart.stories.js b/components/Organisms/AddToCart/AddToCart.stories.js
index c4a8e9f..ed3d24d 100644
--- a/components/Organisms/AddToCart/AddToCart.stories.js
+++ b/components/Organisms/AddToCart/AddToCart.stories.js
@@ -1,4 +1,4 @@
-import AddToCart from './AddToCart.twig';
+import AddToCart from './AddToCart.html.twig';
 
 export default {
   title: 'Design System/Organisms/AddToCart'
diff --git a/components/Organisms/Card/Address/AddressCard.twig b/components/Organisms/Card/Address/AddressCard.html.twig
similarity index 86%
rename from components/Organisms/Card/Address/AddressCard.twig
rename to components/Organisms/Card/Address/AddressCard.html.twig
index 709efe8..81c0e24 100644
--- a/components/Organisms/Card/Address/AddressCard.twig
+++ b/components/Organisms/Card/Address/AddressCard.html.twig
@@ -23,11 +23,11 @@
 <div class='AddressCard {% if selected %}selected{% endif %}'>
   {% if not purchaseFunnel %}
     <div class='AddressCard-top'>
-      {% include '@components/Molecules/Favorite/Favorite.twig' with {text: 'Favourite'|trans, selected: isDefault} %}
+      {% include '@components/Molecules/Favorite/Favorite.html.twig' with {text: 'Favourite'|trans, selected: isDefault} %}
     </div>
   {% endif %}
   <{{ contentType }} class='AddressCard-content'>
-    {% include '@components/Atoms/Form/Radio.twig' with {classes:radio ? "" : "invisible max-w-0", type:"span", name:"test", value:1, checked:selected} %}
+    {% include '@components/Atoms/Form/Radio.html.twig' with {classes:radio ? "" : "invisible max-w-0", type:"span", name:"test", value:1, checked:selected} %}
 
     <span>
       <span class='AddressCard-title'>{% if not purchaseFunnel %}{{ address.title }}{% else %}{{ 'Delivery address'|trans }}{% endif %}</span>
diff --git a/components/Organisms/Card/Address/AddressCard.stories.js b/components/Organisms/Card/Address/AddressCard.stories.js
index 3e51011..82d270c 100644
--- a/components/Organisms/Card/Address/AddressCard.stories.js
+++ b/components/Organisms/Card/Address/AddressCard.stories.js
@@ -1,5 +1,5 @@
-import AddressCard from './AddressCard.twig';
-import ClientAddressCard from './ClientAddressCard.twig';
+import AddressCard from './AddressCard.html.twig';
+import ClientAddressCard from './ClientAddressCard.html.twig';
 import { addressCard } from './AddressCard';
 
 export default {
@@ -7,14 +7,14 @@ export default {
 };
 
 const address = {
-  title: "Domicile",
-    name: "Eleanor Shellstrop",
-    address1: "12 rue du port",
-    address2: "Bâtiment C",
-    zipCode: '63000',
-    city: 'Clermont-Ferrand',
-    country: 'France',
-    phone: '06 00 00 00 00',
+  title: 'Domicile',
+  name: 'Eleanor Shellstrop',
+  address1: '12 rue du port',
+  address2: 'Bâtiment C',
+  zipCode: '63000',
+  city: 'Clermont-Ferrand',
+  country: 'France',
+  phone: '06 00 00 00 00'
 };
 
 export const Base = {
@@ -27,16 +27,17 @@ export const Base = {
     address: address,
     isDefault: true,
     selected: true,
-    radio: false,
+    radio: false
   },
   argTypes: {
-    radio: {if: { arg: 'purchaseFunnel', truthy: false }},
-    selected: {if: { arg: 'purchaseFunnel', truthy: false }},
-    isDefault: {if: { arg: 'purchaseFunnel', truthy: false }},
+    radio: { if: { arg: 'purchaseFunnel', truthy: false } },
+    selected: { if: { arg: 'purchaseFunnel', truthy: false } },
+    isDefault: { if: { arg: 'purchaseFunnel', truthy: false } }
   }
 };
 export const ClientInformation = {
-  render: (args) => `<div class='max-w-[540px]'>${ClientAddressCard(args)}</div>`,
+  render: (args) =>
+    `<div class='max-w-[540px]'>${ClientAddressCard(args)}</div>`,
   args: {
     address: address,
     undefined: false
diff --git a/components/Organisms/Card/Address/ClientAddressCard.twig b/components/Organisms/Card/Address/ClientAddressCard.html.twig
similarity index 94%
rename from components/Organisms/Card/Address/ClientAddressCard.twig
rename to components/Organisms/Card/Address/ClientAddressCard.html.twig
index cd3d2d0..33801a8 100644
--- a/components/Organisms/Card/Address/ClientAddressCard.twig
+++ b/components/Organisms/Card/Address/ClientAddressCard.html.twig
@@ -31,7 +31,7 @@
       {% set buttonText = undefined ? 'Add a billing address'|trans : 'Edit the address'|trans ~ '<span class="hidden md:inline">&nbsp;' ~ 'of billing'|trans ~ '</span>' %}
       {% set buttonVariant = undefined ? 'primary' : 'secondary' %}
 
-      {% include '@components/Molecules/Button/Button.twig' with {
+      {% include '@components/Molecules/Button/Button.html.twig' with {
           text: buttonText,
           variant: buttonVariant,
           classes: 'Button--fill md:Button--unfill'
diff --git a/components/Organisms/Card/Article/Article.twig b/components/Organisms/Card/Article/Article.html.twig
similarity index 100%
rename from components/Organisms/Card/Article/Article.twig
rename to components/Organisms/Card/Article/Article.html.twig
diff --git a/components/Organisms/Card/Article/Article.stories.js b/components/Organisms/Card/Article/Article.stories.js
index 0f2722d..c0d7375 100644
--- a/components/Organisms/Card/Article/Article.stories.js
+++ b/components/Organisms/Card/Article/Article.stories.js
@@ -1,4 +1,4 @@
-import Article from './Article.twig';
+import Article from './Article.html.twig';
 
 export default {
   title: 'Design System/Organisms/Card/Article'
diff --git a/components/Organisms/Card/Order/OrderCard.twig b/components/Organisms/Card/Order/OrderCard.html.twig
similarity index 84%
rename from components/Organisms/Card/Order/OrderCard.twig
rename to components/Organisms/Card/Order/OrderCard.html.twig
index 85d0c62..fc9a926 100644
--- a/components/Organisms/Card/Order/OrderCard.twig
+++ b/components/Organisms/Card/Order/OrderCard.html.twig
@@ -25,7 +25,7 @@
 
 	<div class='2xl:flex 2xl:items-center 2xl:gap-4 2xl:mb-4 2xl:mt-2'>
 		<div class='mt-1 mb-2 2xl:mt-0 2xl:mb-0'>
-			{% include '@components/Molecules/OrderTag/OrderTag.twig' with {customText: 'Order shipped'|trans, variant:'validated'} %}
+			{% include '@components/Molecules/OrderTag/OrderTag.html.twig' with {customText: 'Order shipped'|trans, variant:'validated'} %}
 		</div>
 		<div class='OrderCard-delivery'>{{ 'Scheduled for delivery on'|trans }}
 			{{ deliveryDate }}</div>
@@ -39,6 +39,6 @@
 		<div class='OrderCard-nbImages'></div>
 	</div>
 	<div class='mt-6 text-center md:text-left'>
-		{% include '@components/Molecules/Button/Button.twig' with {text: 'See order details'|trans} %}
+		{% include '@components/Molecules/Button/Button.html.twig' with {text: 'See order details'|trans} %}
 	</div>
 </div>
diff --git a/components/Organisms/Card/Order/OrderCard.stories.js b/components/Organisms/Card/Order/OrderCard.stories.js
index 715bb99..11dea0c 100644
--- a/components/Organisms/Card/Order/OrderCard.stories.js
+++ b/components/Organisms/Card/Order/OrderCard.stories.js
@@ -1,4 +1,4 @@
-import OrderCard from './OrderCard.twig';
+import OrderCard from './OrderCard.html.twig';
 
 export default {
   title: 'Design System/Organisms/Card/OrderCard'
diff --git a/components/Organisms/Card/Payment/Payment.stories.js b/components/Organisms/Card/Payment/Payment.stories.js
index d97ec83..ff73b50 100644
--- a/components/Organisms/Card/Payment/Payment.stories.js
+++ b/components/Organisms/Card/Payment/Payment.stories.js
@@ -1,4 +1,4 @@
-import PaymentCard from './PaymentCard.twig';
+import PaymentCard from './PaymentCard.html.twig';
 
 export default {
   title: 'Design System/Organisms/Card/PaymentCard'
diff --git a/components/Organisms/Card/Payment/PaymentCard.twig b/components/Organisms/Card/Payment/PaymentCard.html.twig
similarity index 77%
rename from components/Organisms/Card/Payment/PaymentCard.twig
rename to components/Organisms/Card/Payment/PaymentCard.html.twig
index fa2ccab..5fa905a 100644
--- a/components/Organisms/Card/Payment/PaymentCard.twig
+++ b/components/Organisms/Card/Payment/PaymentCard.html.twig
@@ -20,9 +20,9 @@
     </div>
     {% if not withoutButton %}
       <div class='{% if expired %}mt-2 flex gap-2{% endif %}'>
-        {% include '@components/Molecules/Button/Button.twig' with {classes: 'Button--small',text:'Delete'|trans, icon_left: 'delete'} %}
+        {% include '@components/Molecules/Button/Button.html.twig' with {classes: 'Button--small',text:'Delete'|trans, icon_left: 'delete'} %}
         {% if expired %}
-          {% include '@components/Molecules/Button/Button.twig' with {classes: 'Button--small', variant:'secondary', text:'Update'|trans} %}
+          {% include '@components/Molecules/Button/Button.html.twig' with {classes: 'Button--small', variant:'secondary', text:'Update'|trans} %}
         {% endif %}
       </div>
     {% endif %}
diff --git a/components/Organisms/Card/PickupPoint/PickupPoint.twig b/components/Organisms/Card/PickupPoint/PickupPoint.html.twig
similarity index 87%
rename from components/Organisms/Card/PickupPoint/PickupPoint.twig
rename to components/Organisms/Card/PickupPoint/PickupPoint.html.twig
index 78ecfc0..c76f261 100644
--- a/components/Organisms/Card/PickupPoint/PickupPoint.twig
+++ b/components/Organisms/Card/PickupPoint/PickupPoint.html.twig
@@ -14,7 +14,7 @@
 
 <div class='PickupPoint {% if selected %}selected{% endif %}'>
   <label class='PickupPoint-content'>
-    {% include '@components/Atoms/Form/Radio.twig' with {type:"span", name:"PickupPoint", value:1, checked:selected} %}
+    {% include '@components/Atoms/Form/Radio.html.twig' with {type:"span", name:"PickupPoint", value:1, checked:selected} %}
 
     <span>
         <span class='PickupPoint-title'>{{ title }}</span>
@@ -45,6 +45,6 @@
     </table>
   </div>
   <div class='mt-4 md:hidden'>
-    {% include '@components/Molecules/Button/Button.twig' with {text: 'Choose this relay point'|trans, classes:'Button--fill'} %}
+    {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Choose this relay point'|trans, classes:'Button--fill'} %}
   </div>
 </div>
diff --git a/components/Organisms/Card/PickupPoint/PickupPoint.stories.js b/components/Organisms/Card/PickupPoint/PickupPoint.stories.js
index 7ef41c9..ff49ad4 100644
--- a/components/Organisms/Card/PickupPoint/PickupPoint.stories.js
+++ b/components/Organisms/Card/PickupPoint/PickupPoint.stories.js
@@ -1,6 +1,6 @@
-import PickupPoint from './PickupPoint.twig';
+import PickupPoint from './PickupPoint.html.twig';
 import { pickupPointHours, pickupPoint } from './PickupPoint';
-import PickupPointDrawer from './PickupPointDrawer.twig';
+import PickupPointDrawer from './PickupPointDrawer.html.twig';
 import MobileDrawerInit from '../../../../assets/js/mobileDrawer';
 
 export default {
diff --git a/components/Organisms/Card/PickupPoint/PickupPointDrawer.twig b/components/Organisms/Card/PickupPoint/PickupPointDrawer.html.twig
similarity index 94%
rename from components/Organisms/Card/PickupPoint/PickupPointDrawer.twig
rename to components/Organisms/Card/PickupPoint/PickupPointDrawer.html.twig
index 118f67d..baf3273 100644
--- a/components/Organisms/Card/PickupPoint/PickupPointDrawer.twig
+++ b/components/Organisms/Card/PickupPoint/PickupPointDrawer.html.twig
@@ -31,7 +31,7 @@
     </table>
   </div>
   <div class='mt-4'>
-    {% include '@components/Molecules/Button/Button.twig' with
+    {% include '@components/Molecules/Button/Button.html.twig' with
       {classes:'Button--large', variant:'primary', text:'Choose this relay point'|trans, fill:true} %}
   </div>
 </div>
diff --git a/components/Organisms/Card/Review/Review.twig b/components/Organisms/Card/Review/Review.html.twig
similarity index 79%
rename from components/Organisms/Card/Review/Review.twig
rename to components/Organisms/Card/Review/Review.html.twig
index 45d5e7f..449da9f 100644
--- a/components/Organisms/Card/Review/Review.twig
+++ b/components/Organisms/Card/Review/Review.html.twig
@@ -8,7 +8,7 @@
   <div class="Review-author">{{ author }}</div>
   <div class="Review-review">{{ review }}</div>
   <div class="Review-footer">
-    {% include '@components/Molecules/Score/Score.twig' with {score: note, maxScore: maxNote} %}
+    {% include '@components/Molecules/Score/Score.html.twig' with {score: note, maxScore: maxNote} %}
     <div class="Review-date">{{ date }}</div>
   </div>
 </div>
diff --git a/components/Organisms/Card/Review/Review.stories.js b/components/Organisms/Card/Review/Review.stories.js
index 5f53bd8..6aa8d24 100644
--- a/components/Organisms/Card/Review/Review.stories.js
+++ b/components/Organisms/Card/Review/Review.stories.js
@@ -1,4 +1,4 @@
-import Review from './Review.twig';
+import Review from './Review.html.twig';
 
 export default {
   title: 'Design System/Organisms/Card/Review'
@@ -7,13 +7,14 @@ export default {
 export const Base = {
   render: (args) => Review(args),
   args: {
-    author: "Prénom N.",
-    review: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+    author: 'Prénom N.',
+    review:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
     note: 4,
     maxNote: 5,
-    date: "04/05/2021"
+    date: '04/05/2021'
   },
   parameters: {
-    backgrounds: { default: 'grey' },
-  },
+    backgrounds: { default: 'grey' }
+  }
 };
diff --git a/components/Organisms/Card/SelfPromotion/SelfPromotion.twig b/components/Organisms/Card/SelfPromotion/SelfPromotion.html.twig
similarity index 100%
rename from components/Organisms/Card/SelfPromotion/SelfPromotion.twig
rename to components/Organisms/Card/SelfPromotion/SelfPromotion.html.twig
diff --git a/components/Organisms/Card/SelfPromotion/SelfPromotion.stories.js b/components/Organisms/Card/SelfPromotion/SelfPromotion.stories.js
index 9d145fa..ddd3ff1 100644
--- a/components/Organisms/Card/SelfPromotion/SelfPromotion.stories.js
+++ b/components/Organisms/Card/SelfPromotion/SelfPromotion.stories.js
@@ -1,4 +1,4 @@
-import SelfPromotion from './SelfPromotion.twig';
+import SelfPromotion from './SelfPromotion.html.twig';
 
 export default {
   title: 'Design System/Organisms/Card/SelfPromotion'
diff --git a/components/Organisms/Card/StoreInfo/StoreInfo.twig b/components/Organisms/Card/StoreInfo/StoreInfo.html.twig
similarity index 79%
rename from components/Organisms/Card/StoreInfo/StoreInfo.twig
rename to components/Organisms/Card/StoreInfo/StoreInfo.html.twig
index 7a6dd38..d8d2d08 100644
--- a/components/Organisms/Card/StoreInfo/StoreInfo.twig
+++ b/components/Organisms/Card/StoreInfo/StoreInfo.html.twig
@@ -20,7 +20,7 @@
   <div class='justify-between lg:flex align-center'>
     <button class='StoreInfo-hours'>{{ ux_icon("clock") }}{{ 'Shop opening times'|trans }}</button>
     <div class='hidden lg:block'>
-      {% include '@components/Molecules/Button/Button.twig' with {text: 'Choose this shop'|trans, classes:'Button--fill lg:Button--unfill'} %}
+      {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Choose this shop'|trans, classes:'Button--fill lg:Button--unfill'} %}
     </div>
   </div>
   <div class='StoreInfo-hoursListing {% if not displayHours|default(false) %}hidden{% endif %}'>
@@ -30,6 +30,6 @@
       {% endfor %}
   </div>
   <div class='mt-4 lg:hidden'>
-    {% include '@components/Molecules/Button/Button.twig' with {text: 'Choose this shop'|trans, classes:'Button--fill'} %}
+    {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Choose this shop'|trans, classes:'Button--fill'} %}
   </div>
 </div>
diff --git a/components/Organisms/Card/StoreInfo/StoreInfo.stories.js b/components/Organisms/Card/StoreInfo/StoreInfo.stories.js
index 5d2f194..ca59370 100644
--- a/components/Organisms/Card/StoreInfo/StoreInfo.stories.js
+++ b/components/Organisms/Card/StoreInfo/StoreInfo.stories.js
@@ -1,4 +1,4 @@
-import StoreInfo from './StoreInfo.twig';
+import StoreInfo from './StoreInfo.html.twig';
 import { storeInfo } from './StoreInfo';
 
 export default {
diff --git a/components/Organisms/Card/SuggestFilters/SuggestFilters.twig b/components/Organisms/Card/SuggestFilters/SuggestFilters.html.twig
similarity index 53%
rename from components/Organisms/Card/SuggestFilters/SuggestFilters.twig
rename to components/Organisms/Card/SuggestFilters/SuggestFilters.html.twig
index b68af89..6db6586 100644
--- a/components/Organisms/Card/SuggestFilters/SuggestFilters.twig
+++ b/components/Organisms/Card/SuggestFilters/SuggestFilters.html.twig
@@ -3,5 +3,5 @@
 
 <div class="SuggestFilters">
     <div class="SuggestFilters-desc">{{ customText }}</div>
-    {% include '@components/Molecules/Button/Button.twig' with {text: button, variant: "secondary", icon_left: "filter", classes: ' Button--medium'} %}
+    {% include '@components/Molecules/Button/Button.html.twig' with {text: button, variant: "secondary", icon_left: "filter", classes: ' Button--medium'} %}
 </div>
diff --git a/components/Organisms/Card/SuggestFilters/SuggestFilters.stories.js b/components/Organisms/Card/SuggestFilters/SuggestFilters.stories.js
index d0c0d68..b351297 100644
--- a/components/Organisms/Card/SuggestFilters/SuggestFilters.stories.js
+++ b/components/Organisms/Card/SuggestFilters/SuggestFilters.stories.js
@@ -1,4 +1,4 @@
-import SuggestFilters from './SuggestFilters.twig';
+import SuggestFilters from './SuggestFilters.html.twig';
 
 export default {
   title: 'Design System/Organisms/Card/SuggestFilters'
@@ -7,7 +7,8 @@ export default {
 export const Base = {
   render: (args) => SuggestFilters(args),
   args: {
-    customText: "<p>Vous n'avez pas trouvé le produit que vous recherchez ?</p><p>Essayez les filtres</p>",
-    button: "Filtrer & trier",
+    customText:
+      "<p>Vous n'avez pas trouvé le produit que vous recherchez ?</p><p>Essayez les filtres</p>",
+    button: 'Filtrer & trier'
   }
 };
diff --git a/components/Organisms/Card/Transporter/Transporter.twig b/components/Organisms/Card/Transporter/Transporter.html.twig
similarity index 85%
rename from components/Organisms/Card/Transporter/Transporter.twig
rename to components/Organisms/Card/Transporter/Transporter.html.twig
index bd8781b..1ea4468 100644
--- a/components/Organisms/Card/Transporter/Transporter.twig
+++ b/components/Organisms/Card/Transporter/Transporter.html.twig
@@ -6,7 +6,7 @@
 
 <div class='Transporter {% if selected %}selected{% endif %}'>
   <label class='Transporter-content'>
-    {% include '@components/Atoms/Form/Radio.twig' with {type:"span", name:"transporter", value:1, checked:selected} %}
+    {% include '@components/Atoms/Form/Radio.html.twig' with {type:"span", name:"transporter", value:1, checked:selected} %}
 
     <span>
         <span class='Transporter-title'>{{ title }}</span>
diff --git a/components/Organisms/Card/Transporter/Transporter.stories.js b/components/Organisms/Card/Transporter/Transporter.stories.js
index 5eca743..8ff4401 100644
--- a/components/Organisms/Card/Transporter/Transporter.stories.js
+++ b/components/Organisms/Card/Transporter/Transporter.stories.js
@@ -1,4 +1,4 @@
-import Transporter from './Transporter.twig';
+import Transporter from './Transporter.html.twig';
 
 export default {
   title: 'Design System/Organisms/Card/Transporter'
@@ -11,9 +11,9 @@ export const Base = {
     title: 'Nom du transporteur',
     date: 'JJ/MM',
     price: '7,80€',
-    img: {alt: 'Logo Chronopost', src: "/images/chronopost.svg"}
+    img: { alt: 'Logo Chronopost', src: '/images/chronopost.svg' }
   },
   argTypes: {
-    date: {control: { type: 'text' }}
+    date: { control: { type: 'text' } }
   }
 };
diff --git a/components/Organisms/CategoryCard/CategoryCard.twig b/components/Organisms/CategoryCard/CategoryCard.html.twig
similarity index 82%
rename from components/Organisms/CategoryCard/CategoryCard.twig
rename to components/Organisms/CategoryCard/CategoryCard.html.twig
index e7c8349..daa5edb 100644
--- a/components/Organisms/CategoryCard/CategoryCard.twig
+++ b/components/Organisms/CategoryCard/CategoryCard.html.twig
@@ -17,7 +17,7 @@
       <a href="#" class="CategoryCard-title">{{ title }}</a>
 
       <div class="CategoryCard-footer">
-        {% include '@components/Molecules/Button/Button.twig' with {text: button.label, href: button.href,icon_right:'chevron-right'} %}
+        {% include '@components/Molecules/Button/Button.html.twig' with {text: button.label | trans, href: button.href,icon_right:'chevron-right'} %}
 
       </div>
     </div>
diff --git a/components/Organisms/CategoryCard/CategoryCard.stories.js b/components/Organisms/CategoryCard/CategoryCard.stories.js
index 58ae170..e35610f 100644
--- a/components/Organisms/CategoryCard/CategoryCard.stories.js
+++ b/components/Organisms/CategoryCard/CategoryCard.stories.js
@@ -1,4 +1,4 @@
-import CategoryCard from './CategoryCard.twig';
+import CategoryCard from './CategoryCard.html.twig';
 
 export default {
   title: 'Design System/Organisms/Category Card'
diff --git a/components/Organisms/HeaderNav/HeaderNav.html.twig b/components/Organisms/HeaderNav/HeaderNav.html.twig
new file mode 100644
index 0000000..9b4410b
--- /dev/null
+++ b/components/Organisms/HeaderNav/HeaderNav.html.twig
@@ -0,0 +1,7 @@
+<div class='HeaderNav'>
+	{% include '@components/Molecules/HeaderButton/HeaderButton.html.twig' with { icon: 'search', classes: 'HeaderNav-btn HeaderButton--light', text: 'Search'|trans, small: true } %}
+	{% include '@components/Molecules/HeaderButton/HeaderButton.html.twig' with { icon: 'heart-fill', classes: 'HeaderNav-btn HeaderButton--light', text: 'Wishlist'|trans, small: true } %}
+	{% include '@components/Molecules/HeaderButton/HeaderButton.html.twig' with { icon: 'account', classes: 'HeaderNav-btn HeaderButton--theme', text: 'Account'|trans, small: true } %}
+	{% include '@components/Molecules/HeaderButton/HeaderButton.html.twig' with { icon: 'cart', text: 'Cart'|trans, classes: 'HeaderNav-btn HeaderButton--dark ', small: true} %}
+	{% include '@components/Molecules/HeaderButton/HeaderButton.html.twig' with { icon: 'menu', id: "toggleMenu", classes: 'HeaderNav-btn HeaderButton--light lg:hidden', text: 'Menu'|trans, small: true } %}
+</div></header>
diff --git a/components/Organisms/HeaderNav/HeaderNav.twig b/components/Organisms/HeaderNav/HeaderNav.twig
deleted file mode 100644
index e2d95bb..0000000
--- a/components/Organisms/HeaderNav/HeaderNav.twig
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class='HeaderNav'>
-	{% include '@components/Molecules/HeaderButton/HeaderButton.twig' with { icon: 'search', classes: 'HeaderNav-btn HeaderButton--light', text: 'Search'|trans, small: true } %}
-	{% include '@components/Molecules/HeaderButton/HeaderButton.twig' with { icon: 'heart-fill', classes: 'HeaderNav-btn HeaderButton--light', text: 'Wishlist'|trans, small: true } %}
-	{% include '@components/Molecules/HeaderButton/HeaderButton.twig' with { icon: 'account', classes: 'HeaderNav-btn HeaderButton--theme', text: 'Account'|trans, small: true } %}
-	{% include '@components/Molecules/HeaderButton/HeaderButton.twig' with { icon: 'cart', text: 'Cart'|trans, classes: 'HeaderNav-btn HeaderButton--dark ', small: true} %}
-	{% include '@components/Molecules/HeaderButton/HeaderButton.twig' with { icon: 'menu', id: "toggleMenu", classes: 'HeaderNav-btn HeaderButton--light lg:hidden', text: 'Menu'|trans, small: true } %}
-</div></header>
diff --git a/components/Organisms/Modules/Filters/FilterClassic.twig b/components/Organisms/Modules/Filters/FilterClassic.html.twig
similarity index 75%
rename from components/Organisms/Modules/Filters/FilterClassic.twig
rename to components/Organisms/Modules/Filters/FilterClassic.html.twig
index d4dd715..21971a0 100644
--- a/components/Organisms/Modules/Filters/FilterClassic.twig
+++ b/components/Organisms/Modules/Filters/FilterClassic.html.twig
@@ -8,9 +8,9 @@
 {% endif %}
 <div class='hidden md:flex gap-2 flex-wrap'>
   {% for option in options %}
-    {% include '@components/Molecules/Filters/FilterPill/FilterPill.twig' with option|merge({customText: option.label,inputType: 'radio', name: name, value: option.value}) %}
+    {% include '@components/Molecules/Filters/FilterPill/FilterPill.html.twig' with option|merge({customText: option.label,inputType: 'radio', name: name, value: option.value}) %}
   {% endfor %}
 </div>
 <div class='md:hidden'>
-  {% include '@components/Molecules/Filters/FilterSelect/FilterSelect.twig' with {id: id, isRounded:isRounded, options: options} %}
+  {% include '@components/Molecules/Filters/FilterSelect/FilterSelect.html.twig' with {id: id, isRounded:isRounded, options: options} %}
 </div>
diff --git a/components/Organisms/Modules/Filters/FilterColor.twig b/components/Organisms/Modules/Filters/FilterColor.html.twig
similarity index 77%
rename from components/Organisms/Modules/Filters/FilterColor.twig
rename to components/Organisms/Modules/Filters/FilterColor.html.twig
index 4fc47d2..9b64e2a 100644
--- a/components/Organisms/Modules/Filters/FilterColor.twig
+++ b/components/Organisms/Modules/Filters/FilterColor.html.twig
@@ -15,9 +15,9 @@
 {% endif %}
 <div class='hidden md:flex gap-2 flex-wrap'>
 	{% for option in options %}
-		{% include '@components/Molecules/Filters/FilterPill/FilterPill.twig' with option|merge({customText: option.label,icon: 'circle',inputType: 'radio', name: 'color', value: option.value, iconColor: option.color}) %}
+		{% include '@components/Molecules/Filters/FilterPill/FilterPill.html.twig' with option|merge({customText: option.label,icon: 'circle',inputType: 'radio', name: 'color', value: option.value, iconColor: option.color}) %}
 	{% endfor %}
 </div>
 <div class='md:hidden'>
-  {% include '@components/Molecules/Filters/FilterSelect/FilterSelect.twig' with {id: id, options: optionsColors} %}
+  {% include '@components/Molecules/Filters/FilterSelect/FilterSelect.html.twig' with {id: id, options: optionsColors} %}
 </div>
diff --git a/components/Organisms/Modules/Filters/Filters.stories.js b/components/Organisms/Modules/Filters/Filters.stories.js
index a0dcb8f..965a28d 100644
--- a/components/Organisms/Modules/Filters/Filters.stories.js
+++ b/components/Organisms/Modules/Filters/Filters.stories.js
@@ -1,5 +1,5 @@
-import FilterColorComponent from './FilterColor.twig';
-import FilterClassicComponent from './FilterClassic.twig';
+import FilterColorComponent from './FilterColor.html.twig';
+import FilterClassicComponent from './FilterClassic.html.twig';
 import filterSelectFunction from '../../../Molecules/Filters/FilterSelect/FilterSelect';
 import MobileDrawer from '../../../../assets/js/mobileDrawer';
 
diff --git a/components/Organisms/Modules/HomeDelivery/HomeDelivery.twig b/components/Organisms/Modules/HomeDelivery/HomeDelivery.html.twig
similarity index 64%
rename from components/Organisms/Modules/HomeDelivery/HomeDelivery.twig
rename to components/Organisms/Modules/HomeDelivery/HomeDelivery.html.twig
index 85ec3ee..d633cc2 100644
--- a/components/Organisms/Modules/HomeDelivery/HomeDelivery.twig
+++ b/components/Organisms/Modules/HomeDelivery/HomeDelivery.html.twig
@@ -15,7 +15,7 @@
 
 <div class='HomeDelivery {% if selected %}selected{% endif %}'>
 	<label class='HomeDelivery-content'>
-    {% include '@components/Atoms/Form/Radio.twig' with {type:"span", name:"HomeDelivery", value:1, checked:selected} %}
+    {% include '@components/Atoms/Form/Radio.html.twig' with {type:"span", name:"HomeDelivery", value:1, checked:selected} %}
 
 		<span>
 			<div class='flex justify-between'>
@@ -30,7 +30,7 @@
 			</div>
 			<div class='flex items-center justify-between mt-6'>
 				<span class='HomeDelivery-price'>{{ price }}</span>
-          {% include '@components/Molecules/Tag/Tag.twig' with { icon: "carbone", customText: "0.80kg CO2" } %}
+          {% include '@components/Molecules/Tag/Tag.html.twig' with { icon: "carbone", customText: "0.80kg CO2" } %}
 			</div>
 		</span>
 	</label>
@@ -42,22 +42,22 @@
 						{{ 'You have no registered address' |trans }}:
 					</span>
 
-					{% include '@components/Molecules/Button/Button.twig' with {text: 'Add an address'|trans, classes:'mt-4'} %}
+					{% include '@components/Molecules/Button/Button.html.twig' with {text: 'Add an address'|trans, classes:'mt-4'} %}
 				</div>
 			{% else %}
 				<div>
 					<div class='flex flex-col gap-2'>
-						{% include '@components/Organisms/Card/Address/AddressCard.twig' with { address: address } %}
-						{% include '@components/Organisms/Card/Address/AddressCard.twig' with { address: address, selected: false } %}
+						{% include '@components/Organisms/Card/Address/AddressCard.html.twig' with { address: address } %}
+						{% include '@components/Organisms/Card/Address/AddressCard.html.twig' with { address: address, selected: false } %}
 					</div>
 
 					<div class='my-4'>
-          {% include '@components/Atoms/Form/Checkbox.twig' with { label: "Use this address for billing"|trans } %}
+          {% include '@components/Atoms/Form/Checkbox.html.twig' with { label: "Use this address for billing"|trans } %}
 					</div>
 
 					<div class='flex flex-col gap-2 mt-4 lg:flex-row lg:items-center'>
-          {% include '@components/Molecules/Button/Button.twig' with {text: 'Choose this address'|trans, classes:'Button--fill lg:w-1/2'} %}
-          {% include '@components/Molecules/Button/Button.twig' with {text: 'Use another address'|trans, classes:'Button--secondary lg:w-1/2'} %}
+          {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Choose this address'|trans, classes:'Button--fill lg:w-1/2'} %}
+          {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Use another address'|trans, classes:'Button--secondary lg:w-1/2'} %}
 					</div>
 				</div>
 			{% endif %}
diff --git a/components/Organisms/Modules/HomeDelivery/HomeDelivery.stories.js b/components/Organisms/Modules/HomeDelivery/HomeDelivery.stories.js
index 9e81236..50c9981 100644
--- a/components/Organisms/Modules/HomeDelivery/HomeDelivery.stories.js
+++ b/components/Organisms/Modules/HomeDelivery/HomeDelivery.stories.js
@@ -1,4 +1,4 @@
-import HomeDelivery from './HomeDelivery.twig';
+import HomeDelivery from './HomeDelivery.html.twig';
 import { homeDelivery } from './HomeDelivery';
 
 export default {
diff --git a/components/Organisms/Modules/Payment/Payment.twig b/components/Organisms/Modules/Payment/Payment.html.twig
similarity index 67%
rename from components/Organisms/Modules/Payment/Payment.twig
rename to components/Organisms/Modules/Payment/Payment.html.twig
index ee135d5..98b588c 100644
--- a/components/Organisms/Modules/Payment/Payment.twig
+++ b/components/Organisms/Modules/Payment/Payment.html.twig
@@ -3,7 +3,7 @@
 
 <div class='Payment {% if selected %}selected{% endif %}'>
 	<label class='Payment-content'>
-    {% include '@components/Atoms/Form/Radio.twig' with {type:"span", name:"Payment", value:1, checked:selected} %}
+    {% include '@components/Atoms/Form/Radio.html.twig' with {type:"span", name:"Payment", value:1, checked:selected} %}
 
 		<span>
 			<div class='flex justify-between'>
@@ -18,15 +18,15 @@
 	{% if selected %}
 		<div class='Payment-bottom bg-theme-lightest'>
 			<div class="flex flex-col mx-auto gap-4 lg:max-w-[250px] lg:mt-[30px]">
-      {% include '@components/Molecules/Fields/FieldInput/FieldInput.twig' with { label: "Card number"|trans, placeholder: "xxxx xxxx xxxx xxxx" } %}
-      {% include '@components/Molecules/Fields/FieldInput/FieldInput.twig' with { label: "Card holder"|trans, placeholder: "Ex. Alain Dupont" } %}
+      {% include '@components/Molecules/Fields/FieldInput/FieldInput.html.twig' with { label: "Card number"|trans, placeholder: "xxxx xxxx xxxx xxxx" } %}
+      {% include '@components/Molecules/Fields/FieldInput/FieldInput.html.twig' with { label: "Card holder"|trans, placeholder: "Ex. Alain Dupont" } %}
 
 				<div class='flex gap-4'>
 					<div class="w-full">
-						{% include '@components/Molecules/Fields/FieldInput/FieldInput.twig' with { label: "Expiry date"|trans, placeholder: "MM/AA" } %}
+						{% include '@components/Molecules/Fields/FieldInput/FieldInput.html.twig' with { label: "Expiry date"|trans, placeholder: "MM/AA" } %}
 					</div>
 
-        {% include '@components/Molecules/Fields/FieldInput/FieldInput.twig' with { label: "CVV", placeholder: "xxx", tooltip: "Tooltip CVV" } %}
+        {% include '@components/Molecules/Fields/FieldInput/FieldInput.html.twig' with { label: "CVV", placeholder: "xxx", tooltip: "Tooltip CVV" } %}
 				</div>
 
 				<div class="flex gap-2">
@@ -37,7 +37,7 @@
 				</div>
 
       <div class="flex">
-					{% include '@components/Atoms/Form/Checkbox.twig' with { label: "Save this card for future purchases"|trans, classes: 'items-baseline' } %}
+					{% include '@components/Atoms/Form/Checkbox.html.twig' with { label: "Save this card for future purchases"|trans, classes: 'items-baseline' } %}
 				</div>
 			</div>
 		</div>
diff --git a/components/Organisms/Modules/Payment/Payment.stories.js b/components/Organisms/Modules/Payment/Payment.stories.js
index 5ffa4b0..33d2666 100644
--- a/components/Organisms/Modules/Payment/Payment.stories.js
+++ b/components/Organisms/Modules/Payment/Payment.stories.js
@@ -1,4 +1,4 @@
-import Payment from './Payment.twig';
+import Payment from './Payment.html.twig';
 
 export default {
   title: 'Design System/Organisms/Modules/Payment'
diff --git a/components/Organisms/Modules/PickupPointModule/PickupPointModule.twig b/components/Organisms/Modules/PickupPointModule/PickupPointModule.html.twig
similarity index 74%
rename from components/Organisms/Modules/PickupPointModule/PickupPointModule.twig
rename to components/Organisms/Modules/PickupPointModule/PickupPointModule.html.twig
index 33d3908..fdf123b 100644
--- a/components/Organisms/Modules/PickupPointModule/PickupPointModule.twig
+++ b/components/Organisms/Modules/PickupPointModule/PickupPointModule.html.twig
@@ -8,7 +8,7 @@
 
 <div class='PickupPointModule {% if selected %}selected{% endif %}'>
   <label class='PickupPointModule-content'>
-    {% include '@components/Atoms/Form/Radio.twig' with {type:"span", name:"PickupPoint", value:1, checked:selected} %}
+    {% include '@components/Atoms/Form/Radio.html.twig' with {type:"span", name:"PickupPoint", value:1, checked:selected} %}
   <span>
       <span class='PickupPointModule-top'>
       <span>
@@ -21,20 +21,20 @@
     </span>
     <div class='flex items-center justify-between mt-6'>
       <span class='PickupPointModule-price'>{{ price }}</span>
-      {% include '@components/Molecules/Tag/Tag.twig' with { icon: "carbone", customText: carbone } %}
+      {% include '@components/Molecules/Tag/Tag.html.twig' with { icon: "carbone", customText: carbone } %}
     </div>
   </span>
   </label>
   <div class='PickupPointModule-searchZone'>
     <div>
-      {% include '@components/Molecules/Fields/FieldInput/FieldInput.twig' with { label: "Find a delivery address"|trans, placeholder: "e.g. City, Postcode"|trans, iconButton: "search" } %}
+      {% include '@components/Molecules/Fields/FieldInput/FieldInput.html.twig' with { label: "Find a delivery address"|trans, placeholder: "e.g. City, Postcode"|trans, iconButton: "search" } %}
     </div>
     <div>
       <button class='text-black underline-with-icon' type='button'>{{ ux_icon("pin-circle") }}{{ 'Select on map'|trans }}</button>
     </div>
     <div class='flex gap-1 md:gap-5'>
-      {% include '@components/Molecules/Button/Button.twig' with {classes: 'PickupPointModule-buttonView', text: 'Map view'|trans, sharp:true, icon_left: 'list', variant: 'secondary'} %}
-      {% include '@components/Molecules/Button/Button.twig' with {classes: 'PickupPointModule-buttonView', text: 'Map view'|trans, sharp:true, icon_left: 'pin-circle'} %}
+      {% include '@components/Molecules/Button/Button.html.twig' with {classes: 'PickupPointModule-buttonView', text: 'Map view'|trans, sharp:true, icon_left: 'list', variant: 'secondary'} %}
+      {% include '@components/Molecules/Button/Button.html.twig' with {classes: 'PickupPointModule-buttonView', text: 'Map view'|trans, sharp:true, icon_left: 'pin-circle'} %}
     </div>
     <div class='mt-5 paragraph-6'>3 {{ 'relay point(s) found'|trans }}</div>
     <div class='gap-10 mt-3 text-black xl:flex'>
@@ -56,7 +56,7 @@
     </div>
     <div class='flex flex-col gap-2 mt-6'>
       {% for pickup in pickups %}
-      {% include '../../Card/PickupPoint/PickupPoint.twig' with pickup %}
+      {% include '../../Card/PickupPoint/PickupPoint.html.twig' with pickup %}
       {% endfor %}
     </div>
   </div>
diff --git a/components/Organisms/Modules/PickupPointModule/PickupPointModule.stories.js b/components/Organisms/Modules/PickupPointModule/PickupPointModule.stories.js
index 66d28d6..6e718c2 100644
--- a/components/Organisms/Modules/PickupPointModule/PickupPointModule.stories.js
+++ b/components/Organisms/Modules/PickupPointModule/PickupPointModule.stories.js
@@ -1,4 +1,4 @@
-import PickupPointModule from './PickupPointModule.twig';
+import PickupPointModule from './PickupPointModule.html.twig';
 import {
   pickupPoint,
   pickupPointHours
diff --git a/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig b/components/Organisms/Modules/StoreDelivery/StoreDelivery.html.twig
similarity index 83%
rename from components/Organisms/Modules/StoreDelivery/StoreDelivery.twig
rename to components/Organisms/Modules/StoreDelivery/StoreDelivery.html.twig
index f6806ed..da84dfc 100644
--- a/components/Organisms/Modules/StoreDelivery/StoreDelivery.twig
+++ b/components/Organisms/Modules/StoreDelivery/StoreDelivery.html.twig
@@ -19,7 +19,7 @@
 
 <div class='StoreDelivery {% if selected %}selected{% endif %}'>
   <label class='StoreDelivery-content'>
-    {% include '@components/Atoms/Form/Radio.twig' with {type:"span", name:"StoreDelivery", value:1, checked:selected} %}
+    {% include '@components/Atoms/Form/Radio.html.twig' with {type:"span", name:"StoreDelivery", value:1, checked:selected} %}
 
     <span>
         <div class='flex justify-between'>
@@ -34,7 +34,7 @@
         <div class='flex items-center justify-between mt-6'>
           <span class='StoreDelivery-price'>{{ price }}</span>
           {% if carbone %}
-            {% include '@components/Molecules/Tag/Tag.twig' with { icon: "carbone", customText: carbone} %}
+            {% include '@components/Molecules/Tag/Tag.html.twig' with { icon: "carbone", customText: carbone} %}
           {% endif %}
         </div>
 
@@ -42,12 +42,12 @@
         <div class="mt-4 border-t border-t-grey-lighter lg:flex lg:justify-between lg:items-center">
           <span class='my-4 lg:my-6 paragraph-2'>Magasin de Ville-sur-Fleuve</span>
 
-          {% include '@components/Molecules/Button/Button.twig' with {text: 'Choose another shop'|trans, classes:'Button--fill lg:w-max'} %}
+          {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Choose another shop'|trans, classes:'Button--fill lg:w-max'} %}
         </div>
         {% endif %}
 
         {% if newClient %}
-          {% include '@components/Molecules/Button/Button.twig' with {text: 'Choose another shop'|trans, classes:'Button--fill mt-4'} %}
+          {% include '@components/Molecules/Button/Button.html.twig' with {text: 'Choose another shop'|trans, classes:'Button--fill mt-4'} %}
         {% endif %}
 
         {% if not newClient %}
diff --git a/components/Organisms/Modules/StoreDelivery/StoreDelivery.stories.js b/components/Organisms/Modules/StoreDelivery/StoreDelivery.stories.js
index ad30e46..dc69d78 100644
--- a/components/Organisms/Modules/StoreDelivery/StoreDelivery.stories.js
+++ b/components/Organisms/Modules/StoreDelivery/StoreDelivery.stories.js
@@ -1,4 +1,4 @@
-import StoreDelivery from './StoreDelivery.twig';
+import StoreDelivery from './StoreDelivery.html.twig';
 import { storeDelivery } from './StoreDelivery';
 
 export default {
diff --git a/components/Organisms/ProductCard/AddToCartConfirmation.html.twig b/components/Organisms/ProductCard/AddToCartConfirmation.html.twig
new file mode 100644
index 0000000..99c39d5
--- /dev/null
+++ b/components/Organisms/ProductCard/AddToCartConfirmation.html.twig
@@ -0,0 +1 @@
+{% include '@components/Organisms/ProductCard/ProductCard.html.twig' with {classes:'ProductCardAddToCart', isAddToCartConfirmation: true, imgWidth:'312', imgHeight:'312'} %}
diff --git a/components/Organisms/ProductCard/AddToCartConfirmation.twig b/components/Organisms/ProductCard/AddToCartConfirmation.twig
deleted file mode 100644
index b9f834d..0000000
--- a/components/Organisms/ProductCard/AddToCartConfirmation.twig
+++ /dev/null
@@ -1 +0,0 @@
-{% include '@components/Organisms/ProductCard/ProductCard.twig' with {classes:'ProductCardAddToCart', isAddToCartConfirmation: true, imgWidth:'312', imgHeight:'312'} %}
diff --git a/components/Organisms/ProductCard/Order.html.twig b/components/Organisms/ProductCard/Order.html.twig
new file mode 100644
index 0000000..2d4f18c
--- /dev/null
+++ b/components/Organisms/ProductCard/Order.html.twig
@@ -0,0 +1 @@
+{% include '@components/Organisms/ProductCard/ProductCard.html.twig' with {classes:'ProductCardOrder', isOrderCard: true, imgWidth:'112', imgHeight:'112'} %}
diff --git a/components/Organisms/ProductCard/Order.twig b/components/Organisms/ProductCard/Order.twig
deleted file mode 100644
index 86751d8..0000000
--- a/components/Organisms/ProductCard/Order.twig
+++ /dev/null
@@ -1 +0,0 @@
-{% include '@components/Organisms/ProductCard/ProductCard.twig' with {classes:'ProductCardOrder', isOrderCard: true, imgWidth:'112', imgHeight:'112'} %}
diff --git a/components/Organisms/ProductCard/ProductCard.twig b/components/Organisms/ProductCard/ProductCard.html.twig
similarity index 90%
rename from components/Organisms/ProductCard/ProductCard.twig
rename to components/Organisms/ProductCard/ProductCard.html.twig
index 301947b..6953628 100644
--- a/components/Organisms/ProductCard/ProductCard.twig
+++ b/components/Organisms/ProductCard/ProductCard.html.twig
@@ -62,10 +62,10 @@
 	<div class="ProductCard-header">
 		<div class="ProductCard-tagList">
 			{% if isNew %}
-        {% include '@components/Molecules/Tag/Tag.twig' with {customText: 'New'|trans, variant: 'vermillon'} %}
+        {% include '@components/Molecules/Tag/Tag.html.twig' with {customText: 'New'|trans, variant: 'vermillon'} %}
 			{% endif %}
 			{% if isPromo %}
-        {% include '@components/Molecules/Tag/Tag.twig' with {customText: '-15%', variant: 'error'} %}
+        {% include '@components/Molecules/Tag/Tag.html.twig' with {customText: '-15%', variant: 'error'} %}
 			{% endif %}
 		</div>
 
@@ -124,7 +124,7 @@
 					{{ productTitle }}
 					{{ 'has been removed from your cart.' |trans }}
 				</div>
-        {% include '@components/Molecules/Button/Button.twig' with {classes:'Button--small', text: 'Restore'|trans , icon_left: "restore" } %}
+        {% include '@components/Molecules/Button/Button.html.twig' with {classes:'Button--small', text: 'Restore'|trans , icon_left: "restore" } %}
 			{% endif %}
 			<div class="ProductCard-footer">
         {% if rate != null or colors|length > 0 %}
@@ -183,7 +183,7 @@
 						</div>
 					{% else %}
 						<div class="ProductCard-quantity">
-              {% include '@components/Molecules/Button/Quantity.twig' with {disabled: false, value:quantityChoice, classes:'Button--small'} %}
+              {% include '@components/Molecules/Button/Quantity.html.twig' with {disabled: false, value:quantityChoice, classes:'Button--small'} %}
 						</div>
 					{% endif %}
 				{% endif %}
@@ -204,8 +204,8 @@
 	{% endif %}
 	{% if isAddToCartConfirmation %}
 		<div class="ProductCard-ProductCardAddToCartBottom">
-      {% include '@components/Molecules/Button/Button.twig' with {classes:'Button--medium', variant: "primary", text: "View my cart"|trans } %}
-      {% include '@components/Molecules/Button/Button.twig' with {classes:'Button--medium', variant: "secondary", text: "Continue shopping"|trans } %}
+      {% include '@components/Molecules/Button/Button.html.twig' with {classes:'Button--medium', variant: "primary", text: "View my cart"|trans } %}
+      {% include '@components/Molecules/Button/Button.html.twig' with {classes:'Button--medium', variant: "secondary", text: "Continue shopping"|trans } %}
 		</div>
 	{% endif %}
 	{% if isRemoveProduct %}
diff --git a/components/Organisms/ProductCard/ProductCard.stories.js b/components/Organisms/ProductCard/ProductCard.stories.js
index 9f605ae..48323b5 100644
--- a/components/Organisms/ProductCard/ProductCard.stories.js
+++ b/components/Organisms/ProductCard/ProductCard.stories.js
@@ -1,9 +1,9 @@
-import Standard from './Standard.twig';
-import Search from './Search.twig';
-import Order from './Order.twig';
-import PurchaseFunnel from './PurchaseFunnel.twig';
-import AddToCartConfirmation from './AddToCartConfirmation.twig';
-import RemoveProduct from './RemoveProduct.twig';
+import Standard from './Standard.html.twig';
+import Search from './Search.html.twig';
+import Order from './Order.html.twig';
+import PurchaseFunnel from './PurchaseFunnel.html.twig';
+import AddToCartConfirmation from './AddToCartConfirmation.html.twig';
+import RemoveProduct from './RemoveProduct.html.twig';
 import progressBar from './RemoveProduct.js';
 
 export default {
diff --git a/components/Organisms/ProductCard/PurchaseFunnel.html.twig b/components/Organisms/ProductCard/PurchaseFunnel.html.twig
new file mode 100644
index 0000000..5e71f29
--- /dev/null
+++ b/components/Organisms/ProductCard/PurchaseFunnel.html.twig
@@ -0,0 +1,17 @@
+{% set isOutOfStock = isOutOfStock|default(0) %}
+{% set productTitle = productTitle|default('') %}
+
+{% if isOutOfStock %}
+	<div class="ProductCardWrapper ProductCardWrapper--outOfStock purchase-funnel-card-width">
+		<div class="ProductCardWrapper-outOfStockMessage">
+			<div>
+				{{ ux_icon("error") }}
+			</div>
+      <p class="paragraph-4">{{ productTitle }} {{ 'is no longer available and cannot be ordered.'|trans }}</p>
+		</div>
+		{% include '@components/Organisms/ProductCard/ProductCard.html.twig' with {classes:'ProductCardPurchaseFunnel', isPurchaseFunnelCard: true, imgWidth:'232', imgHeight:'232'} %}
+    {% include '@components/Molecules/Button/Button.html.twig' with { classes:"ProductCardWrapper-outOfStockButton", disabled: false, text:"See similar products"|trans } %}
+	</div>
+{% else %}
+	{% include '@components/Organisms/ProductCard/ProductCard.html.twig' with {classes:'ProductCardPurchaseFunnel purchase-funnel-card-width', isPurchaseFunnelCard: true, imgWidth:'232', imgHeight:'232'} %}
+{% endif %}
diff --git a/components/Organisms/ProductCard/PurchaseFunnel.twig b/components/Organisms/ProductCard/PurchaseFunnel.twig
deleted file mode 100644
index f1e031f..0000000
--- a/components/Organisms/ProductCard/PurchaseFunnel.twig
+++ /dev/null
@@ -1,17 +0,0 @@
-{% set isOutOfStock = isOutOfStock|default(0) %}
-{% set productTitle = productTitle|default('') %}
-
-{% if isOutOfStock %}
-	<div class="ProductCardWrapper ProductCardWrapper--outOfStock purchase-funnel-card-width">
-		<div class="ProductCardWrapper-outOfStockMessage">
-			<div>
-				{{ ux_icon("error") }}
-			</div>
-      <p class="paragraph-4">{{ productTitle }} {{ 'is no longer available and cannot be ordered.'|trans }}</p>
-		</div>
-		{% include '@components/Organisms/ProductCard/ProductCard.twig' with {classes:'ProductCardPurchaseFunnel', isPurchaseFunnelCard: true, imgWidth:'232', imgHeight:'232'} %}
-    {% include '@components/Molecules/Button/Button.twig' with { classes:"ProductCardWrapper-outOfStockButton", disabled: false, text:"See similar products"|trans } %}
-	</div>
-{% else %}
-	{% include '@components/Organisms/ProductCard/ProductCard.twig' with {classes:'ProductCardPurchaseFunnel purchase-funnel-card-width', isPurchaseFunnelCard: true, imgWidth:'232', imgHeight:'232'} %}
-{% endif %}
diff --git a/components/Organisms/ProductCard/RemoveProduct.html.twig b/components/Organisms/ProductCard/RemoveProduct.html.twig
new file mode 100644
index 0000000..86be8ac
--- /dev/null
+++ b/components/Organisms/ProductCard/RemoveProduct.html.twig
@@ -0,0 +1 @@
+{% include '@components/Organisms/ProductCard/ProductCard.html.twig' with {classes:'ProductCardRemoveProduct', isRemoveProduct: true, imgWidth:'88', imgHeight:'88'} %}
diff --git a/components/Organisms/ProductCard/RemoveProduct.twig b/components/Organisms/ProductCard/RemoveProduct.twig
deleted file mode 100644
index 0e6a6f7..0000000
--- a/components/Organisms/ProductCard/RemoveProduct.twig
+++ /dev/null
@@ -1 +0,0 @@
-{% include '@components/Organisms/ProductCard/ProductCard.twig' with {classes:'ProductCardRemoveProduct', isRemoveProduct: true, imgWidth:'88', imgHeight:'88'} %}
diff --git a/components/Organisms/ProductCard/Search.html.twig b/components/Organisms/ProductCard/Search.html.twig
new file mode 100644
index 0000000..3a89df5
--- /dev/null
+++ b/components/Organisms/ProductCard/Search.html.twig
@@ -0,0 +1,13 @@
+<div>
+	<div class='mb-5 h4-desktop'>Horizontale</div>
+	<div>
+		{% include '@components/Organisms/ProductCard/ProductCard.html.twig' with {classes:'ProductCardSearch ProductCardSearch--horizontal', imgWidth:'97', imgHeight:'97'} %}
+	</div>
+</div>
+
+<div class="mt-14">
+	<div class='my-5 h4-desktop'>Verticale</div>
+	<div>
+		{% include '@components/Organisms/ProductCard/ProductCard.html.twig' with {classes:'ProductCardSearch ProductCardSearch--vertical', imgWidth:'185', imgHeight:'185'} %}
+	</div>
+</div>
diff --git a/components/Organisms/ProductCard/Search.twig b/components/Organisms/ProductCard/Search.twig
deleted file mode 100644
index 2b81f7f..0000000
--- a/components/Organisms/ProductCard/Search.twig
+++ /dev/null
@@ -1,13 +0,0 @@
-<div>
-	<div class='mb-5 h4-desktop'>Horizontale</div>
-	<div>
-		{% include '@components/Organisms/ProductCard/ProductCard.twig' with {classes:'ProductCardSearch ProductCardSearch--horizontal', imgWidth:'97', imgHeight:'97'} %}
-	</div>
-</div>
-
-<div class="mt-14">
-	<div class='my-5 h4-desktop'>Verticale</div>
-	<div>
-		{% include '@components/Organisms/ProductCard/ProductCard.twig' with {classes:'ProductCardSearch ProductCardSearch--vertical', imgWidth:'185', imgHeight:'185'} %}
-	</div>
-</div>
diff --git a/components/Organisms/ProductCard/Standard.html.twig b/components/Organisms/ProductCard/Standard.html.twig
new file mode 100644
index 0000000..59aecda
--- /dev/null
+++ b/components/Organisms/ProductCard/Standard.html.twig
@@ -0,0 +1 @@
+{% include '@components/Organisms/ProductCard/ProductCard.html.twig' with {imgWidth:'400', imgHeight:'280', displayWishButton: true} %}
diff --git a/components/Organisms/ProductCard/Standard.twig b/components/Organisms/ProductCard/Standard.twig
deleted file mode 100644
index fa43353..0000000
--- a/components/Organisms/ProductCard/Standard.twig
+++ /dev/null
@@ -1 +0,0 @@
-{% include '@components/Organisms/ProductCard/ProductCard.twig' with {imgWidth:'400', imgHeight:'280', displayWishButton: true} %}
diff --git a/components/Organisms/Reinsurance/Reinsurance.twig b/components/Organisms/Reinsurance/Reinsurance.html.twig
similarity index 100%
rename from components/Organisms/Reinsurance/Reinsurance.twig
rename to components/Organisms/Reinsurance/Reinsurance.html.twig
diff --git a/components/Organisms/Reinsurance/Reinsurance.stories.js b/components/Organisms/Reinsurance/Reinsurance.stories.js
index 3eff7f5..99d4937 100644
--- a/components/Organisms/Reinsurance/Reinsurance.stories.js
+++ b/components/Organisms/Reinsurance/Reinsurance.stories.js
@@ -1,4 +1,4 @@
-import Reinsurance from './Reinsurance.twig';
+import Reinsurance from './Reinsurance.html.twig';
 
 export default {
   title: 'Design System/Organisms/Reinsurance'
diff --git a/components/Organisms/SimilarContentCard/SimilarContentCard.twig b/components/Organisms/SimilarContentCard/SimilarContentCard.html.twig
similarity index 100%
rename from components/Organisms/SimilarContentCard/SimilarContentCard.twig
rename to components/Organisms/SimilarContentCard/SimilarContentCard.html.twig
diff --git a/components/Organisms/SimilarContentCard/SimilarContentCard.stories.js b/components/Organisms/SimilarContentCard/SimilarContentCard.stories.js
index 42be27f..732c1ab 100644
--- a/components/Organisms/SimilarContentCard/SimilarContentCard.stories.js
+++ b/components/Organisms/SimilarContentCard/SimilarContentCard.stories.js
@@ -1,4 +1,4 @@
-import SimilarContentCard from './SimilarContentCard.twig';
+import SimilarContentCard from './SimilarContentCard.html.twig';
 
 export default {
   title: 'Design System/Organisms/SimilarContentCard'
diff --git a/components/Organisms/SnackBar/SnackBar.twig b/components/Organisms/SnackBar/SnackBar.html.twig
similarity index 93%
rename from components/Organisms/SnackBar/SnackBar.twig
rename to components/Organisms/SnackBar/SnackBar.html.twig
index 0e2b48c..18a065c 100644
--- a/components/Organisms/SnackBar/SnackBar.twig
+++ b/components/Organisms/SnackBar/SnackBar.html.twig
@@ -19,7 +19,7 @@
   </div>
   {% if button %}
   <div class='SnackBar-button'>
-    {% include '@components/Molecules/Button/Button.twig' with
+    {% include '@components/Molecules/Button/Button.html.twig' with
       {classes:'', variant:'secondary', text:button} %}
   </div>
   {% endif %}
diff --git a/components/Organisms/SnackBar/SnackBar.stories.js b/components/Organisms/SnackBar/SnackBar.stories.js
index cb7e570..bee65b2 100644
--- a/components/Organisms/SnackBar/SnackBar.stories.js
+++ b/components/Organisms/SnackBar/SnackBar.stories.js
@@ -1,4 +1,4 @@
-import SnackBar from './SnackBar.twig';
+import SnackBar from './SnackBar.html.twig';
 
 export default {
   title: 'Design System/Organisms/SnackBar'
diff --git a/components/Organisms/SummaryCard/SummaryCard.twig b/components/Organisms/SummaryCard/SummaryCard.html.twig
similarity index 97%
rename from components/Organisms/SummaryCard/SummaryCard.twig
rename to components/Organisms/SummaryCard/SummaryCard.html.twig
index 74ae912..e463d61 100644
--- a/components/Organisms/SummaryCard/SummaryCard.twig
+++ b/components/Organisms/SummaryCard/SummaryCard.html.twig
@@ -27,7 +27,7 @@
         </div>
         {% if promo %}
           <div>
-            {% include '@components/Molecules/Filters/FilterPill/FilterPill.twig' with
+            {% include '@components/Molecules/Filters/FilterPill/FilterPill.html.twig' with
               {selected: true, customText:promo.reduction, icon:'price-tag'} %}
           </div>
         {% else %}
@@ -43,7 +43,7 @@
       </div>
       {% if giftCard %}
         <div>
-          {% include '@components/Molecules/Filters/FilterPill/FilterPill.twig' with
+          {% include '@components/Molecules/Filters/FilterPill/FilterPill.html.twig' with
             {selected: true, customText:giftCard.reduction, icon:'gift'} %}
         </div>
       {% else %}
diff --git a/components/Organisms/SummaryCard/SummaryCard.stories.js b/components/Organisms/SummaryCard/SummaryCard.stories.js
index 6e8f22a..c7bd312 100644
--- a/components/Organisms/SummaryCard/SummaryCard.stories.js
+++ b/components/Organisms/SummaryCard/SummaryCard.stories.js
@@ -1,4 +1,4 @@
-import SummaryCard from './SummaryCard.twig';
+import SummaryCard from './SummaryCard.html.twig';
 
 export default {
   title: 'Design System/Organisms/SummaryCard'
diff --git a/components/account-address.html.twig b/components/account-address.html.twig
index 88b0dd8..a9235e3 100644
--- a/components/account-address.html.twig
+++ b/components/account-address.html.twig
@@ -37,18 +37,18 @@
     }
   ] %}
 
-	{% include '@components/Layout/Subheader/TitleOnly/SubheaderTitle.twig' with {title: "Mes adresses de livraison", position: "centered" }  %}
+	{% include '@components/Layout/Subheader/TitleOnly/SubheaderTitle.html.twig' with {title: "Mes adresses de livraison", position: "centered" }  %}
 
 	<div class="flex flex-col items-center justify-center mt-6 md:mt-11 mb-[80px] md:mb-[120px] px-6">
 		<div class="grid w-full max-w-screen-xl grid-cols-1 gap-6 mx-auto md:grid-cols-2">
 			{% for address in addresses %}
-				{% include '@components/Organisms/Card/Address/AddressCard.twig' with {
+				{% include '@components/Organisms/Card/Address/AddressCard.html.twig' with {
           address: address
         } %}
 			{% endfor %}
 		</div>
 
-		{% include '@components/Molecules/Button/Button.twig' with {
+		{% include '@components/Molecules/Button/Button.html.twig' with {
       text: "Ajouter une adresse",
       classes: "mt-8 w-[340px]",
     } %}
diff --git a/components/account-orders.html.twig b/components/account-orders.html.twig
index 5240562..a2ca11d 100644
--- a/components/account-orders.html.twig
+++ b/components/account-orders.html.twig
@@ -58,11 +58,11 @@
     }
   ] %}
 
-	{% include '@components/Layout/Subheader/Orders/SubheaderOrders.twig' with {title: "Mes commandes"}  %}
+	{% include '@components/Layout/Subheader/Orders/SubheaderOrders.html.twig' with {title: "Mes commandes"}  %}
 
 	<div class="grid max-w-screen-xl grid-cols-1 gap-6 mx-auto md:grid-cols-2 mt-2 md:mt-11 mb-[80px] md:mb-[120px] [&>.OrderCard]:max-w-full">
 		{% for order in orders %}
-			{% include '@components/Organisms/Card/Order/OrderCard.twig' with order %}
+			{% include '@components/Organisms/Card/Order/OrderCard.html.twig' with order %}
 		{% endfor %}
 	</div>
 {% endblock %}
diff --git a/components/account.html.twig b/components/account.html.twig
index a410cd1..0703714 100644
--- a/components/account.html.twig
+++ b/components/account.html.twig
@@ -4,5 +4,5 @@
 {% endblock %}
 
 {% block body %}
-	{% include '@components/Layout/Subheader/TitleOnly/SubheaderTitle.twig' with {title: "Mon profil", position: "centered" }  %}
+	{% include '@components/Layout/Subheader/TitleOnly/SubheaderTitle.html.twig' with {title: "Mon profil", position: "centered" }  %}
 {% endblock %}
diff --git a/config/packages/.gitkeep b/config/packages/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/content.html.twig b/content.html.twig
index 482907b..371e0e4 100644
--- a/content.html.twig
+++ b/content.html.twig
@@ -13,20 +13,20 @@
     img: {url: '/legacy-image-library/category_image_'~c.id~'/full/%5E*!386,280/0/default.webp', alt: c.i18ns.i18ns.fr_FR.title}
   })) %}
 
-	{% include '@components/Layout/Subheader/ContentPage/SubheaderContentPage.twig' with {title: attr('content', 'title'), description: attr('content', 'chapo') }  %}
+	{% include '@components/Layout/Subheader/ContentPage/SubheaderContentPage.html.twig' with {title: attr('content', 'title'), description: attr('content', 'chapo') }  %}
 
 	<div class="px-[25px] lg:pr-[225px] lg:pl-[250px] xl:pr-[325px] xl:pl-[350px] flex gap-[173px] mt-[25px] lg:mt-[54px] mb-[80px] lg:mb-[120px]">
 		<article class="wysiwyg">
 			{{ attr('content', 'description') }}
 		</article>
 		<aside class="hidden lg:block w-[340px]">
-			{% include '@components/Molecules/Shortcut/Shortcut.twig' with {customText: "Section title" | trans} %}
-			{% include '@components/Molecules/Shortcut/Shortcut.twig' with {customText: "Section title" | trans} %}
-			{% include '@components/Molecules/Shortcut/Shortcut.twig' with {customText: "Section title" | trans} %}
+			{% include '@components/Molecules/Shortcut/Shortcut.html.twig' with {customText: "Section title" | trans} %}
+			{% include '@components/Molecules/Shortcut/Shortcut.html.twig' with {customText: "Section title" | trans} %}
+			{% include '@components/Molecules/Shortcut/Shortcut.html.twig' with {customText: "Section title" | trans} %}
 		</aside>
 	</div>
 
 	<div class="bg-theme-lighter">
-		{% include '@components/Layout/SimilarContent/SimilarContent.twig' with {title: "On the same topic" | trans, button: {label: "See all news" | trans, href: "/" }, similarContents: contentsFiltered}  %}
+		{% include '@components/Layout/SimilarContent/SimilarContent.html.twig' with {title: "On the same topic" | trans, button: {label: "See all news" | trans, href: "/" }, similarContents: contentsFiltered}  %}
 	</div>
 {% endblock %}
diff --git a/email-verification.html.twig b/email-verification.html.twig
index 0a28441..0d46603 100644
--- a/email-verification.html.twig
+++ b/email-verification.html.twig
@@ -18,12 +18,12 @@
       <form id="email-verification-form">
 
         <div id="error-message" class="hidden mb-4 text-xs">
-          {% include "@components/Organisms/SnackBar/SnackBar.twig" with { text:"Le code saisi n’est pas le valide.", size:"full", variant: "error", withIcon: true } %}
+          {% include "@components/Organisms/SnackBar/SnackBar.html.twig" with { text:"Le code saisi n’est pas le valide.", size:"full", variant: "error", withIcon: true } %}
         </div>
 
         <div class="flex flex-row gap-4">
           {% for i in 1..6 %}
-            {% include "@components/Molecules/Fields/FieldInput/FieldInput.twig" with {
+            {% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
               name: "code",
               placeholder: '_',
               max: "1",
diff --git a/error.html.twig b/error.html.twig
index a3c30e5..84f977b 100644
--- a/error.html.twig
+++ b/error.html.twig
@@ -12,7 +12,7 @@
 		</div>
 		<h3 class="mt-4 mb-2 h3">XXX</h3>
 		<p class="mb-6 paragraph-2">Ici une description de l’erreur pour aider l’utilisateur à comprendre.</p>
-		{% include '@components/Molecules/Button/Button.twig' with {text: 'Homepage',  classes:'Button--large', href: "/", variant: 'primary', icon_left: "chevron-left"} %}
+		{% include '@components/Molecules/Button/Button.html.twig' with {text: 'Homepage',  classes:'Button--large', href: "/", variant: 'primary', icon_left: "chevron-left"} %}
 	</div>
 {% endblock %}
 
diff --git a/faq.html.twig b/faq.html.twig
index 662d1bf..aac9f9c 100644
--- a/faq.html.twig
+++ b/faq.html.twig
@@ -4,11 +4,11 @@
 {% endblock %}
 
 {% block body %}
-	{% include '@components/Layout/Subheader/TitleOnly/SubheaderTitle.twig' with {title: "FAQ" }  %}
+	{% include '@components/Layout/Subheader/TitleOnly/SubheaderTitle.html.twig' with {title: "FAQ" }  %}
 
 	<div class="flex flex-col max-w-[676px] px-6 lg:px-0 mt-[24px] mb-[80px] lg:mt-[56px] lg:mb-[120px] mx-auto">
-		{% include '@components/Molecules/Accordion/Accordion.twig' with { title: "Une question fréquente ici ?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", variant: "faq" } %}
-		{% include '@components/Molecules/Accordion/Accordion.twig' with { title: "Une question fréquente ici ?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", variant: "faq" } %}
-		{% include '@components/Molecules/Accordion/Accordion.twig' with { title: "Une question fréquente ici ?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", variant: "faq" } %}
+		{% include '@components/Molecules/Accordion/Accordion.html.twig' with { title: "Une question fréquente ici ?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", variant: "faq" } %}
+		{% include '@components/Molecules/Accordion/Accordion.html.twig' with { title: "Une question fréquente ici ?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", variant: "faq" } %}
+		{% include '@components/Molecules/Accordion/Accordion.html.twig' with { title: "Une question fréquente ici ?", content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.", variant: "faq" } %}
 	</div>
 {% endblock %}
diff --git a/index.html.twig b/index.html.twig
index 47b4766..33d9495 100644
--- a/index.html.twig
+++ b/index.html.twig
@@ -4,31 +4,6 @@
 
 {% block body %}
 
-  <div data-controller="hello"></div>
-
-  <twig:Alert message="I am a success alert!" />
-  <twig:Flexy:Message message="I am a message" />
-  <twig:Flexy:RandomNumber />
-
-  <div {{ react_component('Hello', { fullName: 'React' }) }}>
-      Loading...
-  </div>
-
-
-
-
-
-
-  {% set categories = resources('/api/front/categories', {itemsPerPage:3}) %}
-
-
-  {% set categoriesFiltered = categories|map((c) => ({
-    title: c.i18ns.title,
-    button: {label: 'Discover'|trans, href: c.publicUrl},
-    img: {url: '/legacy-image-library/category_image_'~c.id~'/full/%5E*!386,280/0/default.webp', alt: c.i18ns.title},
-    url: c.publicUrl
-  })) %}
-
 
 {%
   set blocks = [
@@ -56,18 +31,20 @@
   ]
 %}
 
-  {% include '@components/Layout/Hero/Hero.twig' with { blocks: blocks } %}
+  {% include '@components/Layout/Hero/Hero.html.twig' with { blocks: blocks } %}
+
+  {{ component('Flexy:CrossSelling', {categoryId: 1, title: 'Last seen products' | trans}) }}
 
-  {% include '@components/Layout/CrossSelling/CrossSelling.twig' with {title: 'Last seen products' | trans, categoryId: 1}  %}
 
   <div class="bg-theme-lighter">
-    {% include '@components/Layout/CrossSelling/CrossSelling.twig' with {title: 'Popular products' | trans, categoryId: 2}  %}
+    {{ component('Flexy:CrossSelling', {categoryId: 2, title: 'Popular products' | trans}) }}
   </div>
   <div class="bg-theme-lightest">
-    {% include '@components/Layout/CrossSelling/CrossSelling.twig' with {title: 'Promotions' | trans, categoryId: 3}  %}
+    {{ component('Flexy:CrossSelling', {categoryId: 3, title: 'Promotions' | trans}) }}
   </div>
 
-  {% include '@components/Layout/ProductCategory/ProductCategory.twig' with {title: 'Our product categories' | trans, categories: categoriesFiltered}  %}
+  {{ component('Flexy:ProductCategory', {title: 'Our product categories' | trans})   }}
+
 
   {%
     set reviews = [4,2,3]|map((note) => ({
@@ -79,7 +56,7 @@
   %}
 
   <div class="bg-theme-lightest">
-    {% include '@components/Layout/Review/Review.twig' with {title: 'Our customers speak about us' | trans, reviews: reviews, button: {label: "See all reviews" | trans, href: "#"}}  %}
+    {% include '@components/Layout/Review/Review.html.twig' with {title: 'Our customers speak about us' | trans, reviews: reviews, button: {label: "See all reviews" | trans, href: "#"}}  %}
   </div>
 
   {% set news = resources('/api/front/contents', {itemsPerPage:3}) %}
@@ -92,7 +69,7 @@
   }))
   %}
   <div class="bg-theme-lighter">
-    {% include '@components/Layout/SimilarContent/SimilarContent.twig' with {title: 'Our news' | trans, similarContents: newsFiltered, button: {label: "See all news" | trans, href: "#"}}  %}
+    {% include '@components/Layout/SimilarContent/SimilarContent.html.twig' with {title: 'Our news' | trans, similarContents: newsFiltered, button: {label: "See all news" | trans, href: "#"}}  %}
   </div>
 {% endblock %}
 
diff --git a/login.html.twig b/login.html.twig
index 66a72c9..b5ee037 100644
--- a/login.html.twig
+++ b/login.html.twig
@@ -8,7 +8,7 @@
 			<h2 class="mb-4 h2">{{ 'Log in' | trans }}</h2>
 
 			<div class="flex flex-col gap-6 mb-3">
-				{% include "@components/Molecules/Fields/FieldInput/FieldInput.twig" with {
+				{% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
           label: 'Email' | trans,
           name: 'email',
           type: 'email',
@@ -16,7 +16,7 @@
           required: true,
         } %}
 
-				{% include "@components/Molecules/Fields/FieldInput/FieldInput.twig" with {
+				{% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
           label: 'Password' | trans,
           name: 'password',
           type: 'password',
@@ -26,19 +26,19 @@
 			</div>
 
 			<div class="flex flex-col gap-[30px]">
-				{% include "@components/Molecules/Link/Link.twig" with {
+				{% include "@components/Molecules/Link/Link.html.twig" with {
           customText: 'Forgot password?' | trans,
           href: '#'
         } %}
 
-				{% include "@components/Molecules/Button/Button.twig" with { text: 'Log in' | trans, classes: "w-max" } %}
+				{% include "@components/Molecules/Button/Button.html.twig" with { text: 'Log in' | trans, classes: "w-max" } %}
 			</div>
 
 			<hr class="my-[40px]"/>
 
 			<h4 class="mb-4 h4">{{ 'Don’t have an account yet?' | trans }}</h4>
 
-			{% include "@components/Molecules/Button/Button.twig" with { text: "Sign up" | trans, variant: "secondary" } %}
+			{% include "@components/Molecules/Button/Button.html.twig" with { text: "Sign up" | trans, variant: "secondary" } %}
 		</form>
 	</div>
 {% endblock %}
diff --git a/product.html.twig b/product.html.twig
index 45d25a4..202605a 100644
--- a/product.html.twig
+++ b/product.html.twig
@@ -24,33 +24,32 @@
       <div class="lg:flex lg:justify-between gap-[46px]">
         <div>
           <section id="gallery" class="relative md:pl-[92px]">
-            {% include '@components/Layout/ProductGallery/ProductGallery.twig' with {productId:productId } %}
+            {% include '@components/Layout/ProductGallery/ProductGallery.html.twig' with {productId:productId } %}
           </section>
           <section id="description" class="lg:pl-[92px]">
             {% set descriptionContent %}
               <p>toto 2</p>
-              {% include '@components/Layout/ProductGallery/test.twig' %}
             {% endset %}
 
-            {% include '@components/Molecules/Accordion/Accordion.twig' with {
+            {% include '@components/Molecules/Accordion/Accordion.html.twig' with {
               title: 'Description'|trans,
               content: descriptionContent,
               iconPlus: "plus",
               iconMinus: "minus",
             } %}
-            {% include '@components/Molecules/Accordion/Accordion.twig' with {
+            {% include '@components/Molecules/Accordion/Accordion.html.twig' with {
               title: 'Features'|trans,
               content: "tata",
               iconPlus: "plus",
               iconMinus: "minus",
             } %}
-            {% include '@components/Molecules/Accordion/Accordion.twig' with {
+            {% include '@components/Molecules/Accordion/Accordion.html.twig' with {
               title: 'Shipping & Returns'|trans,
               content: "",
               iconPlus: "plus",
               iconMinus: "minus",
             } %}
-            {% include '@components/Molecules/Accordion/Accordion.twig' with {
+            {% include '@components/Molecules/Accordion/Accordion.html.twig' with {
               title: 'Verified Reviews'|trans,
               content: "",
               iconPlus: "plus",
@@ -66,10 +65,10 @@
           {% endif %}
           <div class="flex items-center justify-between mt-[30px]">
             <div class="flex items-center gap-2">
-              {% include '@components/Molecules/Score/Score.twig' with {score: 3} %}
+              {% include '@components/Molecules/Score/Score.html.twig' with {score: 3} %}
               <span class="indication text-grey">12 {{ 'reviews'|trans }}</span>
             </div>
-            {% include '@components/Molecules/OrderTag/OrderTag.twig' with { customText: 'In stock'|trans, variant: 'success', type: 'minimal' } %}
+            {% include '@components/Molecules/OrderTag/OrderTag.html.twig' with { customText: 'In stock'|trans, variant: 'success', type: 'minimal' } %}
           </div>
           {% set attributes = getAttributesAndValues(productId) %}
 
@@ -85,14 +84,14 @@
           {#            { value: 6, color: '#C17767', label: 'Old Rose' }, #}
           {#          ] %} #}
           {#          <div class="mt-4"> #}
-          {#            {% include '@components/Organisms/Modules/Filters/FilterColor.twig' with {options: colors, name: 'color', label: 'Couleur',id: 'filterColor'} %} #}
+          {#            {% include '@components/Organisms/Modules/Filters/FilterColor.html.twig' with {options: colors, name: 'color', label: 'Couleur',id: 'filterColor'} %} #}
           {#          </div> #}
 
           <div class="mt-[30px]">
-            {% include '@components/Molecules/Button/QuantityButton.twig' with {value:1, classes:'Button--large', text:'Add to cart'|trans, icon:'cart', fill:true} %}
+            {% include '@components/Molecules/Button/QuantityButton.html.twig' with {value:1, classes:'Button--large', text:'Add to cart'|trans, icon:'cart', fill:true} %}
           </div>
           <div class="mt-[30px]">
-            {% include '@components/Organisms/Reinsurance/Reinsurance.twig' with {data: [
+            {% include '@components/Organisms/Reinsurance/Reinsurance.html.twig' with {data: [
               {
                 strongText: 'Free delivery'|trans,
                 text: ' from 50€'|trans,
@@ -114,6 +113,6 @@
   </div>
 
   <div class="bg-theme-lighter">
-    {% include '@components/Layout/CrossSelling/CrossSelling.twig' with {title: 'Last seen products'|trans, categoryId: 1}  %}
+    {% include '@components/Layout/CrossSelling/CrossSelling.html.twig' with {title: 'Last seen products'|trans, categoryId: 1}  %}
   </div>
 {% endblock %}
diff --git a/register.html.twig b/register.html.twig
index b8cbe5b..029a9d3 100644
--- a/register.html.twig
+++ b/register.html.twig
@@ -9,7 +9,7 @@
 {% endblock %}
 
 {% block body %}
-    {% include "@components//Molecules/Step/Steps.twig" with {
+    {% include "@components//Molecules/Step/Steps.html.twig" with {
         checkoutSteps:{
           "CART": {
             "id": 1,
@@ -30,7 +30,7 @@
 
       <div class="step-content active" id="step1">
         <div class="flex flex-col gap-6 mb-3">
-          {% include "@components/Molecules/Fields/FieldInput/FieldInput.twig" with {
+          {% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
             label: 'Email',
             name: 'email',
             type: 'email',
@@ -38,7 +38,7 @@
             required: true,
           } %}
 
-          {% include "@components/Molecules/Fields/FieldInput/FieldInput.twig" with {
+          {% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
             label: 'Mot de passe',
             name: 'password',
             type: 'password',
@@ -46,14 +46,14 @@
             required: true,
           } %}
         </div>
-        {% include "@components/Molecules/PasswordControls/PasswordControls.twig" %}
+        {% include "@components/Molecules/PasswordControls/PasswordControls.html.twig" %}
 
         <div class="flex flex-col items-start mt-7">
-          {% include "@components/Molecules/Button/Button.twig" with { classes: "next-btn", icon_right: 'chevron-right', text: "Etape suivante", variant: "large" } %}
+          {% include "@components/Molecules/Button/Button.html.twig" with { classes: "next-btn", icon_right: 'chevron-right', text: "Etape suivante", variant: "large" } %}
 
           <div class="mt-9">
             <p>Vous avez déjà un compte ?</p>
-            {% include "@components/Molecules/Link/Link.twig" with {
+            {% include "@components/Molecules/Link/Link.html.twig" with {
               customText: 'Connectez-vous',
               href: '/login'
             } %}
@@ -63,28 +63,28 @@
 
       <div class="step-content" id="step2">
         <div class="flex flex-col gap-6 mb-7">
-          {% include "@components/Molecules/Fields/FieldInput/FieldInput.twig" with {
+          {% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
             label: 'Prénom',
             name: 'firstname',
             placeholder: 'Ex. Eleanor',
             required: true,
           } %}
 
-          {% include "@components/Molecules/Fields/FieldInput/FieldInput.twig" with {
+          {% include "@components/Molecules/Fields/FieldInput/FieldInput.html.twig" with {
             label: 'Nom',
             name: 'lastname',
             placeholder: 'Ex. Shellstrop',
             required: true,
           } %}
         </div>
-        {% include "@components/Atoms/Form/Checkbox.twig" with {
+        {% include "@components/Atoms/Form/Checkbox.html.twig" with {
           label: 'En souscrivant à notre newsletter, vous acceptez <a href="/politique-de-protection-des-donnees">notre politique de protection des données.*</a>',
           name: 'acceptance',
           required: true,
         } %}
 
           <div class="mt-9">
-            {% include "@components/Molecules/Button/Button.twig"  with { classes: "next-btn", icon_right: 'chevron-right', text: "Valider mon inscription",  type: 'submit', variant: "large" } %}
+            {% include "@components/Molecules/Button/Button.html.twig"  with { classes: "next-btn", icon_right: 'chevron-right', text: "Valider mon inscription",  type: 'submit', variant: "large" } %}
             <p class="mt-6 paragraph-5">* Vos données sont traitées par [Nom de l'entreprise] pour gérer notre relation clientèle, réaliser des analyses statistiques, et vous envoyer des informations sur nos produits, services et évènements, si vous consentez. Vous pouvez vous opposer à ces communications. Vous avez le droit d'accéder, de rectifier, d'effacer, de vous opposer au traitement de vos données. Contactez notre responsable des données à [dpo@domain.com].</p>
           </div>
       </div>
diff --git a/search.html.twig b/search.html.twig
index d6c345d..edab92d 100644
--- a/search.html.twig
+++ b/search.html.twig
@@ -9,10 +9,10 @@
 	{% set products = resources('/api/front/products', {itemsPerPage:9, page: page}) %}
 	{% set totalProducts = resources('/api/front/products', {itemsPerPage:9, page: page}) %}
 
-	{% include '@components/Layout/Subheader/SearchResult/SubheaderSearch.twig' with {title: "Search results" | trans, } %}
+	{% include '@components/Layout/Subheader/SearchResult/SubheaderSearch.html.twig' with {title: "Search results" | trans, } %}
   {% include '@components/Layout/CategoryProduct/CategoryProduct.html.twig' with {products: products, totalProducts:totalProducts} %}
 
-	{% include '@components/Layout/Reinsurance/Reinsurance.twig' with { data: [
+	{% include '@components/Layout/Reinsurance/Reinsurance.html.twig' with { data: [
       {
         strongText: 'Free delivery' | trans,
         text: 'For any order over €100' | trans,
diff --git a/src/FlexyBundle.php b/src/FlexyBundle.php
index af732a1..87aa39d 100644
--- a/src/FlexyBundle.php
+++ b/src/FlexyBundle.php
@@ -20,9 +20,9 @@
 
 class FlexyBundle extends AbstractBundle
 {
-    public function loadExtension(array $config, ContainerConfigurator $container, ContainerBuilder $builder): void
+    public function loadExtension(array $config, ContainerConfigurator $containerConfigurator, ContainerBuilder $builder): void
     {
-        $serviceConfigurator = $container->services();
+        $serviceConfigurator = $containerConfigurator->services();
 
         $resourcePath = THELIA_TEMPLATE_DIR.TemplateDefinition::FRONT_OFFICE_SUBDIR.DS.ConfigQuery::read(TemplateDefinition::FRONT_OFFICE_CONFIG_NAME, 'default').DS.'src';
 
@@ -30,4 +30,9 @@ public function loadExtension(array $config, ContainerConfigurator $container, C
           ->autowire()
           ->autoconfigure();
     }
+
+    public function prependExtension(ContainerConfigurator $containerConfigurator, ContainerBuilder $containerBuilder): void
+    {
+        $containerConfigurator->import('../config/packages/*.yaml');
+    }
 }
diff --git a/src/Twig/CrossSelling.php b/src/Twig/CrossSelling.php
new file mode 100644
index 0000000..a496bbf
--- /dev/null
+++ b/src/Twig/CrossSelling.php
@@ -0,0 +1,36 @@
+<?php
+
+/*
+ * This file is part of the Thelia package.
+ * http://www.thelia.net
+ *
+ * (c) OpenStudio <info@thelia.net>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace FlexyBundle\Twig;
+
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use TwigEngine\Service\DataAccess\DataAccessService;
+
+#[AsTwigComponent(template: 'components/Layout/CrossSelling/CrossSelling.html.twig')]
+class CrossSelling
+{
+    public string $categoryId;
+    private DataAccessService $dataAccessService;
+
+    public function __construct(DataAccessService $dataAccessService)
+    {
+        $this->dataAccessService = $dataAccessService;
+    }
+
+    public function getProducts(): array
+    {
+        return $this->dataAccessService->resources('/api/front/products', [
+            'productCategories.category.id' => $this->categoryId,
+            'itemsPerPage' => 3,
+        ]);
+    }
+}
diff --git a/src/Twig/ProductCategory.php b/src/Twig/ProductCategory.php
new file mode 100644
index 0000000..34423d0
--- /dev/null
+++ b/src/Twig/ProductCategory.php
@@ -0,0 +1,49 @@
+<?php
+
+/*
+ * This file is part of the Thelia package.
+ * http://www.thelia.net
+ *
+ * (c) OpenStudio <info@thelia.net>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace FlexyBundle\Twig;
+
+use Symfony\Contracts\Translation\TranslatorInterface;
+use Symfony\UX\TwigComponent\Attribute\AsTwigComponent;
+use TwigEngine\Service\DataAccess\DataAccessService;
+
+#[AsTwigComponent(template: 'components/Layout/ProductCategory/ProductCategory.html.twig')]
+class ProductCategory
+{
+    public string $categoryId;
+
+    public function __construct(private DataAccessService $dataAccessService, private TranslatorInterface $translator)
+    {
+    }
+
+    public function getCategories(): array
+    {
+        $categories = $this->dataAccessService->resources('/api/front/categories', [
+            'itemsPerPage' => 3,
+        ]);
+
+        return array_map(function ($item) {
+            return [
+                'title' => $item['i18ns']['title'],
+                'button' => [
+                    'label' => $this->translator->trans('Discover'),
+                    'href' => $item['publicUrl'],
+                ],
+                'img' => [
+                    'url' => '/legacy-image-library/category_image_'.$item['id'].'/full/%5E*!386,280/0/default.webp',
+                    'alt' => $item['i18ns']['title'],
+                ],
+                'url' => $item['publicUrl'],
+            ];
+        }, $categories);
+    }
+}
diff --git a/translations/messages.en.yaml b/translations/messages.en_US.yaml
similarity index 100%
rename from translations/messages.en.yaml
rename to translations/messages.en_US.yaml
diff --git a/translations/messages.fr.yaml b/translations/messages.fr_FR.yaml
similarity index 100%
rename from translations/messages.fr.yaml
rename to translations/messages.fr_FR.yaml
diff --git a/wishlist.html.twig b/wishlist.html.twig
index 01333df..7e2c5c8 100644
--- a/wishlist.html.twig
+++ b/wishlist.html.twig
@@ -30,7 +30,7 @@
 
 		<div class="flex flex-col w-full gap-4">
 			{% for product in products %}
-				{% include '@components/Organisms/ProductCard/PurchaseFunnel.twig' with product %}
+				{% include '@components/Organisms/ProductCard/PurchaseFunnel.html.twig' with product %}
 			{% endfor %}
 		</div>
 	</div>