diff --git a/website_snippet_project/models/website_snippet_filter.py b/website_snippet_project/models/website_snippet_filter.py
index c2bbf14..4f09584 100644
--- a/website_snippet_project/models/website_snippet_filter.py
+++ b/website_snippet_project/models/website_snippet_filter.py
@@ -1,6 +1,10 @@
+import logging
+
 from odoo import api, models
 from odoo.osv import expression
 
+_logger = logging.getLogger(__name__)
+
 
 class WebsiteSnippetFilter(models.Model):
     _inherit = "website.snippet.filter"
@@ -25,9 +29,17 @@ def _get_projects(self, mode, context):
         return dynamic_filter._filter_records_to_values(projects, False)
 
     def _get_projects_for_category(self, website, limit, domain, context):
+        _logger.info(website)
+        _logger.info(limit)
+        _logger.info(domain)
+        _logger.info(context)
         return self._get_all_published_projects(website, limit, domain, context)
 
     def _get_all_published_projects(self, website, limit, domain, context):
+        _logger.info(website)
+        _logger.info(limit)
+        _logger.info(domain)
+        _logger.info(context)
         return (
             self.env["project.project"]
             .search(domain, limit=limit)
diff --git a/website_snippet_project/static/src/snippets/s_project_list/000.esm.js b/website_snippet_project/static/src/snippets/s_project_list/000.esm.js
index fed5ad1..fa9f8a8 100644
--- a/website_snippet_project/static/src/snippets/s_project_list/000.esm.js
+++ b/website_snippet_project/static/src/snippets/s_project_list/000.esm.js
@@ -5,20 +5,6 @@ import publicWidget from "web.public.widget";
 
 publicWidget.registry.dynamic_project_list = DynamicSnippetCarousel.extend({
     selector: '.s_dynamic_project_list',
-
-    /**
-     * Parses the project category information from the data attributes
-     *
-     * @private
-     * @returns Parsed JSON object
-     */
-    _parseCategoryData: function() {
-        const projectCategoryData = this.$el.get(0).dataset.projectCategory;
-        if (!projectCategoryData)
-            return {id: "all", name: "", description: ""};
-        return JSON.parse(projectCategoryData);
-    },
-
     /**
      * Gets the category search domain
      *
@@ -27,41 +13,13 @@ publicWidget.registry.dynamic_project_list = DynamicSnippetCarousel.extend({
      */
     _getCategorySearchDomain: function() {
         const searchDomain = [];
-        const projectCategory = this._parseCategoryData();
-        if (projectCategory.id === "all") {
-            return searchDomain;
-        }
-        if (projectCategory.id) {
-            searchDomain.push(['category_id', '=', projectCategory.id]);
+        const filterByCategoryIds = JSON.parse(this.$el.get(0).dataset.filterByCategoryIds || '[]');
+        if (filterByCategoryIds.length) {
+            searchDomain.push(['category_id', 'in', filterByCategoryIds.map(projectCategory => projectCategory.id)]);
         }
         return searchDomain;
     },
 
-    /**
-     * @override
-     * @private
-     */
-    _renderContent: function () {
-        const result = this._super.apply(this, arguments);
-
-        const projectCategory = this._parseCategoryData();
-        const $title = this.$el.find('h3');
-        const $subTitle = this.$el.find('h4');
-        const $templateArea = this.$el.find('.dynamic_snippet_template');
-
-        this.trigger_up('widgets_stop_request', {
-            $target: $templateArea,
-        });
-        $title.text(projectCategory.name || "");
-        $subTitle.text(projectCategory.description || "");
-        this.trigger_up('widgets_start_request', {
-            $target: $templateArea,
-            editableMode: this.editableMode,
-        });
-
-        return result;
-    },
-
     /**
      * Method to be overridden in child components in order to provide a search
      * domain if needed.
diff --git a/website_snippet_project/static/src/snippets/s_project_list/options.esm.js b/website_snippet_project/static/src/snippets/s_project_list/options.esm.js
index 390a0c3..bbaba13 100644
--- a/website_snippet_project/static/src/snippets/s_project_list/options.esm.js
+++ b/website_snippet_project/static/src/snippets/s_project_list/options.esm.js
@@ -1,7 +1,6 @@
 /** @odoo-module **/
 import dynamicSnippetCarouselOptions from "website.s_dynamic_snippet_carousel_options";
 import options from "web_editor.snippets.options";
-import utils from "web.utils";
 
 options.registry.dynamic_project_list = dynamicSnippetCarouselOptions.extend({
     /**
@@ -10,18 +9,8 @@ options.registry.dynamic_project_list = dynamicSnippetCarouselOptions.extend({
      */
     init: function () {
         this._super.apply(this, arguments);
-        this.projectCategories = {};
         this.modelNameFilter = "project.project";
     },
-
-    /**
-     * @override
-     */
-    async willStart() {
-        const _super = this._super.bind(this);
-        await this._fetchProjectCategories();
-        return _super(...arguments);
-    },
     /**
      *
      * @override
@@ -30,68 +19,6 @@ options.registry.dynamic_project_list = dynamicSnippetCarouselOptions.extend({
         this._super.apply(this, arguments);
         this.$target[0].dataset.snippet = 'dynamic_project_list';
     },
-
-    _fetchProjectCategories: function () {
-        return this._rpc({
-            model: 'project.project.category',
-            method: 'search_read',
-            kwargs: {
-                fields: ['id', 'name', "description"],
-            }
-        });
-    },
-
-    /**
-     *
-     * @override
-     * @private
-     */
-    _renderCustomXML: async function (uiFragment) {
-        // The parent _renderCustomXML function renders a filter and a template selector.
-        await this._super.apply(this, arguments);
-        await this._renderProjectCategorySelector(uiFragment);
-    },
-
-    _markupDictionary(obj) {
-        Object.keys(obj).forEach(
-            key => {obj[key] = typeof obj[key] === "string" ? utils.Markup(obj[key]) : obj[key]});
-        return obj;
-    },
-
-    /**
-     * Renders the project categories option selector content into the provided uiFragment.
-     * @private
-     * @param {HTMLElement} uiFragment
-     */
-    _renderProjectCategorySelector: async function (uiFragment) {
-        const projectCategories = await this._fetchProjectCategories();
-        for (const index in projectCategories) {
-            this.projectCategories[projectCategories[index].id] = projectCategories[index];
-        }
-        const projectCategoriesSelectorEl = uiFragment.querySelector('[data-name="project_category_opt"]');
-        for (const id in this.projectCategories) {
-            const button = document.createElement('we-button');
-            button.dataset.selectDataAttribute = JSON.stringify(
-                this.projectCategories[id]
-                // This._markupDictionary(this.projectCategories[id])
-            );
-            button.innerText = this.projectCategories[id].name;
-            projectCategoriesSelectorEl.appendChild(button);
-        }
-    },
-
-    /**
-     * @override
-     * @private
-     */
-    _setOptionsDefaultValues: async function () {
-        this._super.apply(this, arguments);
-
-        this.options.wysiwyg.odooEditor.observerUnactive();
-        this._setOptionValue('projectCategory', '');
-        this.options.wysiwyg.odooEditor.observerActive();
-    },
-
 });
 
 export default {
diff --git a/website_snippet_project/views/snippets/options.xml b/website_snippet_project/views/snippets/options.xml
index ddaa8b7..d679e98 100644
--- a/website_snippet_project/views/snippets/options.xml
+++ b/website_snippet_project/views/snippets/options.xml
@@ -1,11 +1,16 @@
 <odoo>
     <template id="s_dynamic_project_list_options_template" inherit_id="website.s_dynamic_snippet_options_template">
         <xpath expr="//we-select[@data-name='filter_opt']" position="after">
-            <t t-if="snippet_name == 'dynamic_project_list'">
-                <we-select string="Category" data-name="project_category_opt" data-attribute-name="projectCategory">
-                    <we-button class="o_we_user_value_widget" data-select-data-attribute=""><div>All</div></we-button>
-                </we-select>
-            </t>
+            <t t-set="project_category_domain" t-translation="off">[["website_published", "=", true]]</t>
+            <we-many2many t-if="snippet_name == 'dynamic_project_list'"
+                          string="Project categories"
+                          data-name="project_categ_opt"
+                          data-model="project.project.category"
+                          t-att-data-domain="project_category_domain"
+                          data-attribute-name="filterByCategoryIds"
+                          data-fakem2m="true"
+                          data-select-data-attribute=""
+                          />
         </xpath>
     </template>
 
diff --git a/website_snippet_project/views/snippets/s_dynamic_project_list.xml b/website_snippet_project/views/snippets/s_dynamic_project_list.xml
index 78fcd0b..048b9cf 100644
--- a/website_snippet_project/views/snippets/s_dynamic_project_list.xml
+++ b/website_snippet_project/views/snippets/s_dynamic_project_list.xml
@@ -1,16 +1,6 @@
 <odoo>
-
-    <template id="s_dynamic_project_list_template" inherit_id="website.s_dynamic_snippet_template">
-        <div class="dynamic_snippet_template" position="before">
-            <t t-if="snippet_name == 's_dynamic_project_list'">
-                <h3 class="text-center">Name</h3>
-                <h4 class="text-center">Subtitle</h4>
-            </t>
-        </div>
-    </template>
-
     <template id="s_dynamic_project_list_snippet" name="Projects">
-        <t t-call="website_snippet_project.s_dynamic_project_list_template">
+        <t t-call="website.s_dynamic_snippet_template">
             <t t-set="snippet_name" t-value="'s_dynamic_project_list'"/>
         </t>
     </template>
diff --git a/website_snippet_project/views/snippets/s_dynamic_project_list_templates.xml b/website_snippet_project/views/snippets/s_dynamic_project_list_templates.xml
index 2cc87b1..653a5a1 100644
--- a/website_snippet_project/views/snippets/s_dynamic_project_list_templates.xml
+++ b/website_snippet_project/views/snippets/s_dynamic_project_list_templates.xml
@@ -3,12 +3,12 @@
     <template id="dynamic_filter_template_project_project_view_detail" name="Classic Card - Detailed">
         <t t-foreach="records" t-as="data" data-number-of-elements="3" data-thumb="/website_snippet_project/static/src/img/snippets_options/project_view_detail.svg">
             <t t-set="record" t-value="data['_record']" data-arrow-position="bottom"/>
-            <div class="o_carousel_project_card card h-100 w-100">
-                <img class="card-img-top o_img_project_square o_img_project_cover h-auto" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+            <div class="o_carousel_project_card card h-100 w-100  text-center">
+                <img class="card-img-top o_img_project_square o_img_project_cover" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                 <div class="o_carousel_project_card_body card-body d-flex flex-column justify-content-between">
                     <div class="card-title h5" t-field="record.display_name"/>
                     <div class="card-text flex-grow-1 text-muted h6" t-field="record.description"/>
-                    <div class="d-flex justify-content-between flex-wrap flex-md-column flex-lg-row align-items-center align-self-end w-100 mt-2 pt-3 border-top">
+                    <div class="d-flex justify-content-between flex-wrap flex-md-column align-items-center align-self-end w-100 mt-2 pt-3 border-top">
                         <a class="btn btn-primary" t-attf-href="/projects/#{data['slug']}">
                             Discover
                         </a>
@@ -59,7 +59,7 @@
         <t t-foreach="records" t-as="data" data-thumb="/website_snippet_project/static/src/img/snippets_options/project_image_with_name.svg">
             <t t-set="record" t-value="data['_record']"/>
             <div class="card h-100 border-0 w-100 rounded-0 bg-transparent o_dynamic_project_hovered" t-att-data-url="record.website_url">
-                <img class="card-img-top h-auto o_img_project_square o_img_project_cover rounded" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
+                <img class="card-img-top o_img_project_square o_img_project_cover rounded" loading="lazy" t-att-src="data['image_512']" t-att-alt="record.display_name"/>
                 <div class="h6 text-center mt-2 p-2" t-field="record.display_name"/>
             </div>
         </t>