diff --git a/addons/survey/__manifest__.py b/addons/survey/__manifest__.py
index 0f093e65438..dc54e3b80df 100644
--- a/addons/survey/__manifest__.py
+++ b/addons/survey/__manifest__.py
@@ -91,8 +91,7 @@ sent mails with personal token for the invitation of the survey.
             'survey/static/src/question_page/*.js',
             'survey/static/src/js/fields_section_one2many.js',
             'survey/static/src/js/fields_form_page_description.js',
-            'survey/static/src/js/survey_renderers.js',
-            'survey/static/src/js/survey_views.js',
+            'survey/static/src/views/*.js',
             'survey/static/src/scss/survey_survey_views.scss',
             'survey/static/src/scss/survey_question_views.scss',
             'survey/static/src/scss/survey_templates_results.scss',
diff --git a/addons/survey/static/src/js/survey_renderers.js b/addons/survey/static/src/js/survey_renderers.js
deleted file mode 100644
index b156df21921..00000000000
--- a/addons/survey/static/src/js/survey_renderers.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/** @odoo-module */
-
-import KanbanRenderer from 'web.KanbanRenderer';
-import ListRenderer from 'web.ListRenderer';
-import { Markup } from 'web.utils';
-
-const SurveySampleMixin = {
-
-    /**
-     * @override
-     */
-    _render: function () {
-        // Remove "Try It" buttons of the no content helper if user can not create surveys
-        if (!this.activeActions.create) {
-            this.noContentHelp = Markup(this.noContentHelp.replaceAll(
-                '<a class="btn btn-primary o_survey_load_sample text-white"><span>Try It</span></a>',
-                ''
-            ));
-        }
-        this.isLoadingSample = false;
-        this._super.apply(this, arguments);
-    },
-
-    /**
-     * Load and show the sample survey related to the clicked element,
-     * when there is no survey to display.
-     * We currently have 3 different samples to load:
-     * - Sample Feedback Form
-     * - Sample Certification
-     * - Sample Live Presentation
-     * 
-     * @private
-     * @param {Event} ev
-     */
-    _loadSample: function (ev) {
-        // Prevent loading multiple samples if double clicked
-        if (!this.isLoadingSample && this.activeActions.create) {
-            this.isLoadingSample = true;
-            this.do_action(this._rpc({
-                model: 'survey.survey',
-                method: $(ev.target).closest('.o_survey_sample_container').attr('action'),
-            }));
-        }
-    },
-};
-
-const SurveyKanbanRenderer = KanbanRenderer.extend(SurveySampleMixin, {
-    events: _.extend({}, KanbanRenderer.prototype.events, {
-        'click .o_survey_load_sample': '_loadSample',
-    }),
-});
-
-const SurveyListRenderer = ListRenderer.extend(SurveySampleMixin, {
-    events: _.extend({}, ListRenderer.prototype.events, {
-        'click .o_survey_load_sample': '_loadSample',
-    }),
-});
-
-export {
-    SurveyKanbanRenderer,
-    SurveyListRenderer,
-};
diff --git a/addons/survey/static/src/js/survey_views.js b/addons/survey/static/src/js/survey_views.js
deleted file mode 100644
index bfd46835596..00000000000
--- a/addons/survey/static/src/js/survey_views.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/** @odoo-module */
-
-import KanbanView from 'web.KanbanView';
-import ListView from 'web.ListView';
-import viewRegistry from 'web.view_registry';
-import { SurveyKanbanRenderer, SurveyListRenderer } from './survey_renderers.js';
-
-const SurveyKanbanView = KanbanView.extend({
-    config: _.extend({}, KanbanView.prototype.config, {
-        Renderer: SurveyKanbanRenderer,
-    }),
-});
-
-const SurveyListView = ListView.extend({
-    config: _.extend({}, ListView.prototype.config, {
-        Renderer: SurveyListRenderer,
-    }),
-});
-
-viewRegistry.add('survey_view_kanban', SurveyKanbanView);
-viewRegistry.add('survey_view_tree', SurveyListView);
-
-export {
-    SurveyKanbanView,
-    SurveyListView,
-};
diff --git a/addons/survey/static/src/scss/survey_survey_views.scss b/addons/survey/static/src/scss/survey_survey_views.scss
index 22b0cbfa09b..55b90d12206 100644
--- a/addons/survey/static/src/scss/survey_survey_views.scss
+++ b/addons/survey/static/src/scss/survey_survey_views.scss
@@ -27,7 +27,7 @@
     &.o_kanban_ungrouped {
         padding: 0px;
 
-        .o_survey_kanban_card {
+        .o_kanban_record {
             width: 100%;
             margin: 0px;
             border-top: 0px !important;
diff --git a/addons/survey/static/src/views/survey_views.js b/addons/survey/static/src/views/survey_views.js
new file mode 100644
index 00000000000..5d6d9f06ca7
--- /dev/null
+++ b/addons/survey/static/src/views/survey_views.js
@@ -0,0 +1,83 @@
+/** @odoo-module **/
+
+import { registry } from '@web/core/registry';
+import { ListRenderer } from "@web/views/list/list_renderer";
+import { KanbanRenderer } from "@web/views/kanban/kanban_renderer";
+import { listView } from '@web/views/list/list_view';
+import { kanbanView } from '@web/views/kanban/kanban_view';
+import { useService } from "@web/core/utils/hooks";
+
+const { useEffect, useRef } = owl;
+
+export function useSurveyLoadSampleHook(selector) {
+    const rootRef = useRef("root");
+    const actionService = useService("action");
+    const orm = useService('orm');
+    let isLoadingSample = false;
+    /**
+     * Load and show the sample survey related to the clicked element,
+     * when there is no survey to display.
+     * We currently have 3 different samples to load:
+     * - Sample Feedback Form
+     * - Sample Certification
+     * - Sample Live Presentation
+     */
+    const loadSample = async (method) => {
+        // Prevent loading multiple samples if double clicked
+        isLoadingSample = true;
+        const action = await orm.call('survey.survey', method);
+        actionService.doAction(action);
+    };
+    useEffect(
+        (elems) => {
+            if (!elems || !elems.length) {
+                return;
+            }
+            const handler = (ev) => {
+                if (!isLoadingSample) {
+                    const surveyMethod = ev.currentTarget.closest('.o_survey_sample_container').getAttribute('action');
+                    loadSample(surveyMethod);
+                }
+            }
+            for (const elem of elems) {
+                elem.addEventListener('click', handler);
+            }
+            return () => {
+                for (const elem of elems) {
+                    elem.removeEventListener('click', handler);
+                }
+            };
+        },
+        () => [rootRef.el && rootRef.el.querySelectorAll(selector)]
+    );
+};
+
+export class SurveyListRenderer extends ListRenderer {
+    setup() {
+        super.setup();
+        this.canCreate = this.props.archInfo.activeActions.create;
+        if (this.canCreate) {
+            useSurveyLoadSampleHook('.o_survey_load_sample');
+        }
+    }
+};
+
+registry.category('views').add('survey_view_tree', {
+    ...listView,
+    Renderer: SurveyListRenderer,
+});
+
+export class SurveyKanbanRenderer extends KanbanRenderer {
+    setup() {
+        super.setup();
+        this.canCreate = this.props.archInfo.activeActions.create;
+        if (this.canCreate) {
+            useSurveyLoadSampleHook('.o_survey_load_sample');
+        }
+    }
+};
+
+registry.category('views').add('survey_view_kanban', {
+    ...kanbanView,
+    Renderer: SurveyKanbanRenderer,
+});
diff --git a/addons/survey/views/survey_survey_views.xml b/addons/survey/views/survey_survey_views.xml
index ed9717b6954..866fb884f3c 100644
--- a/addons/survey/views/survey_survey_views.xml
+++ b/addons/survey/views/survey_survey_views.xml
@@ -224,7 +224,7 @@
                                         <field name="user_id" widget="many2one_avatar_user"
                                             options="{'display_avatar_name': True}"/>
                                         -
-                                        <t t-esc="moment(record.create_date.raw_value).format('MMM YYYY')"/>
+                                        <t t-esc="luxon.DateTime.fromJSDate(record.create_date.raw_value).toFormat('MMM yyyy')"/>
                                     </span>
                                 </div>
                             </div>