diff --git a/mon-pix/app/components/module/element/qcm.gjs b/mon-pix/app/components/module/element/qcm.gjs
new file mode 100644
index 00000000000..6bb7dba218a
--- /dev/null
+++ b/mon-pix/app/components/module/element/qcm.gjs
@@ -0,0 +1,125 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixCheckbox from '@1024pix/pix-ui/components/pix-checkbox';
+import PixMessage from '@1024pix/pix-ui/components/pix-message';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { t } from 'ember-intl';
+import ModulixFeedback from 'mon-pix/components/modulix/feedback';
+
+import { htmlUnsafe } from '../../../helpers/html-unsafe';
+import ModuleElement from './module-element';
+
+export default class ModuleQcm extends ModuleElement {
+  selectedAnswerIds = new Set();
+
+  get canValidateElement() {
+    return this.selectedAnswerIds.size >= 2;
+  }
+
+  get userResponse() {
+    return [...this.selectedAnswerIds];
+  }
+
+  get disableInput() {
+    return super.disableInput ? true : null;
+  }
+
+  resetAnswers() {
+    this.selectedAnswerIds = new Set();
+  }
+
+  @action
+  checkboxSelected(proposalId) {
+    if (this.selectedAnswerIds.has(proposalId)) {
+      this.selectedAnswerIds.delete(proposalId);
+    } else {
+      this.selectedAnswerIds.add(proposalId);
+    }
+  }
+
+  @action
+  getProposalState(proposalId) {
+    if (!this.correction) {
+      return null;
+    }
+
+    if (!this.selectedAnswerIds.has(proposalId)) {
+      return 'neutral';
+    }
+
+    return this.correction.solution.includes(proposalId) ? 'success' : 'error';
+  }
+
+  <template>
+    <form class="element-qcm" aria-describedby="instruction-{{this.element.id}}">
+      <fieldset>
+        <legend class="screen-reader-only">
+          {{t "pages.modulix.qcm.direction"}}
+        </legend>
+
+        <div class="element-qcm__instruction" id="instruction-{{this.element.id}}">
+          {{htmlUnsafe this.element.instruction}}
+        </div>
+
+        <p class="element-qcm__direction" aria-hidden="true">
+          {{t "pages.modulix.qcm.direction"}}
+        </p>
+
+        <div class="element-qcm__proposals">
+          {{#each this.element.proposals as |proposal|}}
+            <PixCheckbox
+              name={{this.element.id}}
+              @isDisabled={{this.disableInput}}
+              @state={{this.getProposalState proposal.id}}
+              @variant="tile"
+              {{on "click" (fn this.checkboxSelected proposal.id)}}
+            >
+              <:label>{{proposal.content}}</:label>
+            </PixCheckbox>
+          {{/each}}
+        </div>
+      </fieldset>
+
+      {{#if this.shouldDisplayRequiredMessage}}
+        <div class="element-qcm__required-field-missing">
+          <PixMessage role="alert" @type="error" @withIcon={{true}}>
+            {{t "pages.modulix.verification-precondition-failed-alert.qcm"}}
+          </PixMessage>
+        </div>
+      {{/if}}
+
+      {{#unless this.correction}}
+        <PixButton
+          @variant="success"
+          @type="submit"
+          class="element-qcm__verify-button"
+          @triggerAction={{this.onAnswer}}
+        >
+          {{t "pages.modulix.buttons.activity.verify"}}
+        </PixButton>
+      {{/unless}}
+
+      <div class="element-qcm__feedback" role="status" tabindex="-1">
+        {{#if this.shouldDisplayFeedback}}
+          <ModulixFeedback @answerIsValid={{this.answerIsValid}}>
+            {{htmlUnsafe this.correction.feedback}}
+          </ModulixFeedback>
+        {{/if}}
+      </div>
+
+      {{#if this.shouldDisplayRetryButton}}
+        <PixButton
+          class="element-qcm__retry-button"
+          @variant="secondary"
+          @size="small"
+          @type="button"
+          @triggerAction={{this.retry}}
+          @iconAfter="rotate-right"
+        >
+          {{t "pages.modulix.buttons.activity.retry"}}
+        </PixButton>
+      {{/if}}
+    </form>
+  </template>
+}
diff --git a/mon-pix/app/components/module/element/qcm.hbs b/mon-pix/app/components/module/element/qcm.hbs
deleted file mode 100644
index c7f59fb9bc3..00000000000
--- a/mon-pix/app/components/module/element/qcm.hbs
+++ /dev/null
@@ -1,63 +0,0 @@
-<form class="element-qcm" aria-describedby="instruction-{{this.element.id}}">
-  <fieldset>
-    <legend class="screen-reader-only">
-      {{t "pages.modulix.qcm.direction"}}
-    </legend>
-
-    <div class="element-qcm__instruction" id="instruction-{{this.element.id}}">
-      {{html-unsafe this.element.instruction}}
-    </div>
-
-    <p class="element-qcm__direction" aria-hidden="true">
-      {{t "pages.modulix.qcm.direction"}}
-    </p>
-
-    <div class="element-qcm__proposals">
-      {{#each this.element.proposals as |proposal|}}
-        <PixCheckbox
-          name={{this.element.id}}
-          @isDisabled={{this.disableInput}}
-          @variant="tile"
-          {{on "click" (fn this.checkboxSelected proposal.id)}}
-        >
-          <:label>{{proposal.content}}</:label>
-        </PixCheckbox>
-      {{/each}}
-    </div>
-  </fieldset>
-
-  {{#if this.shouldDisplayRequiredMessage}}
-    <div class="element-qcm__required-field-missing">
-      <PixMessage role="alert" @type="error" @withIcon={{true}}>
-        {{t "pages.modulix.verification-precondition-failed-alert.qcm"}}
-      </PixMessage>
-    </div>
-  {{/if}}
-
-  {{#unless this.correction}}
-    <PixButton @variant="success" @type="submit" class="element-qcm__verify-button" @triggerAction={{this.onAnswer}}>
-      {{t "pages.modulix.buttons.activity.verify"}}
-    </PixButton>
-  {{/unless}}
-
-  <div class="element-qcm__feedback" role="status" tabindex="-1">
-    {{#if this.shouldDisplayFeedback}}
-      <Modulix::Feedback @answerIsValid={{this.answerIsValid}}>
-        {{html-unsafe this.correction.feedback}}
-      </Modulix::Feedback>
-    {{/if}}
-  </div>
-
-  {{#if this.shouldDisplayRetryButton}}
-    <PixButton
-      class="element-qcm__retry-button"
-      @variant="secondary"
-      @size="small"
-      @type="button"
-      @triggerAction={{this.retry}}
-      @iconAfter="rotate-right"
-    >
-      {{t "pages.modulix.buttons.activity.retry"}}
-    </PixButton>
-  {{/if}}
-</form>
\ No newline at end of file
diff --git a/mon-pix/app/components/module/element/qcm.js b/mon-pix/app/components/module/element/qcm.js
deleted file mode 100644
index 5a75243e232..00000000000
--- a/mon-pix/app/components/module/element/qcm.js
+++ /dev/null
@@ -1,31 +0,0 @@
-import { action } from '@ember/object';
-import ModuleElement from 'mon-pix/components/module/element/module-element';
-
-export default class ModuleQcm extends ModuleElement {
-  selectedAnswerIds = new Set();
-
-  get canValidateElement() {
-    return this.selectedAnswerIds.size >= 2;
-  }
-
-  get userResponse() {
-    return [...this.selectedAnswerIds];
-  }
-
-  get disableInput() {
-    return super.disableInput ? true : null;
-  }
-
-  resetAnswers() {
-    this.selectedAnswerIds = new Set();
-  }
-
-  @action
-  checkboxSelected(proposalId) {
-    if (this.selectedAnswerIds.has(proposalId)) {
-      this.selectedAnswerIds.delete(proposalId);
-    } else {
-      this.selectedAnswerIds.add(proposalId);
-    }
-  }
-}
diff --git a/mon-pix/tests/integration/components/module/qcm-test.js b/mon-pix/tests/integration/components/module/qcm-test.gjs
similarity index 77%
rename from mon-pix/tests/integration/components/module/qcm-test.js
rename to mon-pix/tests/integration/components/module/qcm-test.gjs
index 9523b64fd5c..a1a0641cbfa 100644
--- a/mon-pix/tests/integration/components/module/qcm-test.js
+++ b/mon-pix/tests/integration/components/module/qcm-test.gjs
@@ -1,7 +1,7 @@
 import { render } from '@1024pix/ember-testing-library';
 // eslint-disable-next-line no-restricted-imports
 import { click, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import ModulixQcm from 'mon-pix/components/module/element/qcm';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
 
@@ -21,8 +21,7 @@ module('Integration | Component | Module | QCM', function (hooks) {
       ],
       type: 'qcm',
     };
-    this.set('el', qcmElement);
-    const screen = await render(hbs`<Module::Element::Qcm @element={{this.el}} />`);
+    const screen = await render(<template><ModulixQcm @element={{qcmElement}} /></template>);
 
     // then
     assert.ok(screen);
@@ -59,11 +58,9 @@ module('Integration | Component | Module | QCM', function (hooks) {
       ],
       type: 'qcm',
     };
-    this.set('el', qcmElement);
     const userResponse = [answeredProposal[0].id, answeredProposal[1].id];
-    const givenonElementAnswerSpy = sinon.spy();
-    this.set('onAnswer', givenonElementAnswerSpy);
-    const screen = await render(hbs`<Module::Element::Qcm @element={{this.el}} @onAnswer={{this.onAnswer}} />`);
+    const onAnswerSpy = sinon.spy();
+    const screen = await render(<template><ModulixQcm @element={{qcmElement}} @onAnswer={{onAnswerSpy}} /></template>);
     const verifyButton = screen.queryByRole('button', { name: 'Vérifier' });
 
     // when
@@ -72,7 +69,7 @@ module('Integration | Component | Module | QCM', function (hooks) {
     await click(verifyButton);
 
     // then
-    sinon.assert.calledWith(givenonElementAnswerSpy, { userResponse, element: qcmElement });
+    sinon.assert.calledWith(onAnswerSpy, { userResponse, element: qcmElement });
     assert.ok(true);
   });
 
@@ -88,10 +85,8 @@ module('Integration | Component | Module | QCM', function (hooks) {
       ],
       type: 'qcm',
     };
-    const onElementAnswerSpy = sinon.spy();
-    this.set('el', qcmElement);
-    this.set('onAnswer', onElementAnswerSpy);
-    const screen = await render(hbs`<Module::Element::Qcm @element={{this.el}} @onAnswer={{this.onAnswer}} />`);
+    const onAnswerSpy = sinon.spy();
+    const screen = await render(<template><ModulixQcm @element={{qcmElement}} @onAnswer={{onAnswerSpy}} /></template>);
 
     // when
     await click(screen.getByLabelText('checkbox1'));
@@ -99,7 +94,7 @@ module('Integration | Component | Module | QCM', function (hooks) {
 
     // then
     assert.dom(screen.getByRole('alert')).exists();
-    sinon.assert.notCalled(onElementAnswerSpy);
+    sinon.assert.notCalled(onAnswerSpy);
   });
 
   test('should hide the error message when QCM is validated with response', async function (assert) {
@@ -114,10 +109,8 @@ module('Integration | Component | Module | QCM', function (hooks) {
       ],
       type: 'qcm',
     };
-    const givenonElementAnswerStub = function () {};
-    this.set('onAnswer', givenonElementAnswerStub);
-    this.set('el', qcmElement);
-    const screen = await render(hbs`<Module::Element::Qcm @element={{this.el}} @onAnswer={{this.onAnswer}} />`);
+    const onAnswerSpy = sinon.spy();
+    const screen = await render(<template><ModulixQcm @element={{qcmElement}} @onAnswer={{onAnswerSpy}} /></template>);
 
     // when
     await click(screen.queryByRole('button', { name: 'Vérifier' }));
@@ -138,12 +131,14 @@ module('Integration | Component | Module | QCM', function (hooks) {
       solution: ['1', '4'],
     });
 
-    prepareContextRecords.call(this, store, correctionResponse);
-    this.set('onAnswer', () => {});
+    const { qcmElement } = prepareContextRecords.call(this, store, correctionResponse);
+    const onAnswerSpy = sinon.spy();
 
     // when
     const screen = await render(
-      hbs`<Module::Element::Qcm @element={{this.el}} @onAnswer={{this.onAnswer}} @correction={{this.correctionResponse}} />`,
+      <template>
+        <ModulixQcm @element={{qcmElement}} @onAnswer={{onAnswerSpy}} @correction={{correctionResponse}} />
+      </template>,
     );
 
     // then
@@ -164,12 +159,14 @@ module('Integration | Component | Module | QCM', function (hooks) {
       solution: ['1', '4'],
     });
 
-    prepareContextRecords.call(this, store, correctionResponse);
-    this.set('onAnswer', () => {});
+    const { qcmElement } = prepareContextRecords.call(this, store, correctionResponse);
+    const onAnswerSpy = sinon.spy();
 
     // when
     const screen = await render(
-      hbs`<Module::Element::Qcm @element={{this.el}} @onAnswer={{this.onAnswer}} @correction={{this.correctionResponse}} />`,
+      <template>
+        <ModulixQcm @element={{qcmElement}} @onAnswer={{onAnswerSpy}} @correction={{correctionResponse}} />
+      </template>,
     );
 
     // then
@@ -191,12 +188,14 @@ module('Integration | Component | Module | QCM', function (hooks) {
       solution: 'solution',
     });
 
-    prepareContextRecords.call(this, store, correctionResponse);
-    this.set('onAnswer', () => {});
+    const { qcmElement } = prepareContextRecords.call(this, store, correctionResponse);
+    const onAnswerSpy = sinon.spy();
 
     // when
     const screen = await render(
-      hbs`<Module::Element::Qcm @element={{this.el}} @onAnswer={{this.onAnswer}} @correction={{this.correctionResponse}} />`,
+      <template>
+        <ModulixQcm @element={{qcmElement}} @onAnswer={{onAnswerSpy}} @correction={{correctionResponse}} />
+      </template>,
     );
 
     // then
@@ -212,12 +211,14 @@ module('Integration | Component | Module | QCM', function (hooks) {
       solution: 'solution',
     });
 
-    prepareContextRecords.call(this, store, correctionResponse);
-    this.set('onAnswer', () => {});
+    const { qcmElement } = prepareContextRecords.call(this, store, correctionResponse);
+    const onAnswerSpy = sinon.spy();
 
     // when
     const screen = await render(
-      hbs`<Module::Element::Qcm @element={{this.el}} @onAnswer={{this.onAnswer}} @correction={{this.correctionResponse}} />`,
+      <template>
+        <ModulixQcm @element={{qcmElement}} @onAnswer={{onAnswerSpy}} @correction={{correctionResponse}} />
+      </template>,
     );
 
     // then
@@ -235,12 +236,14 @@ module('Integration | Component | Module | QCM', function (hooks) {
       solution: 'solution',
     });
 
-    prepareContextRecords.call(this, store, correctionResponse);
-    this.set('onAnswer', () => {});
+    const { qcmElement } = prepareContextRecords.call(this, store, correctionResponse);
+    const onAnswerSpy = sinon.spy();
 
     // when
     const screen = await render(
-      hbs`<Module::Element::Qcm @element={{this.el}} @onAnswer={{this.onAnswer}} @correction={{this.correctionResponse}} />`,
+      <template>
+        <ModulixQcm @element={{qcmElement}} @onAnswer={{onAnswerSpy}} @correction={{correctionResponse}} />
+      </template>,
     );
 
     // then
@@ -268,6 +271,5 @@ function prepareContextRecords(store, correctionResponse) {
     correction: correctionResponse,
     elementId: qcmElement.id,
   });
-  this.set('el', qcmElement);
-  this.set('correctionResponse', correctionResponse);
+  return { qcmElement };
 }
diff --git a/mon-pix/tests/unit/components/module/qcm-test.js b/mon-pix/tests/unit/components/module/qcm-test.gjs
similarity index 100%
rename from mon-pix/tests/unit/components/module/qcm-test.js
rename to mon-pix/tests/unit/components/module/qcm-test.gjs