diff --git a/admin/app/styles/components/certification-center-form.scss b/admin/app/components/certification-centers/certification-center-form.scss
similarity index 100%
rename from admin/app/styles/components/certification-center-form.scss
rename to admin/app/components/certification-centers/certification-center-form.scss
diff --git a/admin/app/components/certification-centers/creation-form.gjs b/admin/app/components/certification-centers/creation-form.gjs
new file mode 100644
index 00000000000..cf8a48219b9
--- /dev/null
+++ b/admin/app/components/certification-centers/creation-form.gjs
@@ -0,0 +1,158 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixCheckbox from '@1024pix/pix-ui/components/pix-checkbox';
+import PixInput from '@1024pix/pix-ui/components/pix-input';
+import PixSelect from '@1024pix/pix-ui/components/pix-select';
+import { concat, fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { t } from 'ember-intl';
+
+import { types } from '../../models/certification-center';
+
+export default class CertificationCenterForm extends Component {
+  @tracked habilitations = [];
+  certificationCenterTypes = types;
+
+  constructor() {
+    super(...arguments);
+    Promise.resolve(this.args.certificationCenter.habilitations).then((habilitations) => {
+      this.habilitations = habilitations;
+    });
+  }
+  @action
+  handleCenterNameChange(event) {
+    this.args.certificationCenter.name = event.target.value;
+  }
+
+  @action
+  handleExternalIdChange(event) {
+    this.args.certificationCenter.externalId = event.target.value;
+  }
+
+  @action
+  handleIsV3PilotChange(event) {
+    this.args.certificationCenter.isV3Pilot = event.target.checked;
+  }
+
+  @action
+  handleDataProtectionOfficerFirstNameChange(event) {
+    this.args.certificationCenter.dataProtectionOfficerFirstName = event.target.value;
+  }
+
+  @action
+  handleDataProtectionOfficerLastNameChange(event) {
+    this.args.certificationCenter.dataProtectionOfficerLastName = event.target.value;
+  }
+
+  @action
+  handleDataProtectionOfficerEmailChange(event) {
+    this.args.certificationCenter.dataProtectionOfficerEmail = event.target.value;
+  }
+
+  @action
+  selectCertificationCenterType(value) {
+    this.args.certificationCenter.type = value;
+  }
+
+  @action
+  updateGrantedHabilitation(habilitation) {
+    const habilitations = this.habilitations;
+    if (habilitations.includes(habilitation)) {
+      habilitations.removeObject(habilitation);
+    } else {
+      habilitations.addObject(habilitation);
+    }
+  }
+
+  <template>
+    <form class="form certification-center-form" {{on "submit" @onSubmit}}>
+
+      <PixInput
+        @id="certificationCenterName"
+        onchange={{this.handleCenterNameChange}}
+        class="form-field"
+        required={{true}}
+        aria-required={{true}}
+      >
+        <:label>Nom du centre</:label>
+      </PixInput>
+
+      <div class="form-field">
+        <PixSelect
+          @options={{this.certificationCenterTypes}}
+          @placeholder="-- Choisissez --"
+          @hideDefaultOption={{true}}
+          @onChange={{this.selectCertificationCenterType}}
+          @value={{@certificationCenter.type}}
+          required={{true}}
+          aria-required={{true}}
+        >
+          <:label>Type d'établissement</:label>
+          <:default as |certificationCenterType|>{{certificationCenterType.label}}</:default>
+        </PixSelect>
+      </div>
+
+      <PixInput @id="certificationCenterExternalId" onchange={{this.handleExternalIdChange}} class="form-field">
+        <:label>Identifiant externe</:label>
+      </PixInput>
+
+      <PixInput
+        @id="dataProtectionOfficerFirstName"
+        {{on "change" this.handleDataProtectionOfficerFirstNameChange}}
+        class="form-field"
+      >
+        <:label>Prénom du DPO</:label>
+      </PixInput>
+
+      <PixInput
+        @id="dataProtectionOfficerLastName"
+        {{on "change" this.handleDataProtectionOfficerLastNameChange}}
+        class="form-field"
+      >
+        <:label>Nom du DPO</:label>
+      </PixInput>
+
+      <PixInput
+        @id="dataProtectionOfficerEmail"
+        {{on "change" this.handleDataProtectionOfficerEmailChange}}
+        class="form-field"
+      >
+        <:label>Adresse e-mail du DPO</:label>
+      </PixInput>
+
+      <div class="form-field">
+        <PixCheckbox @id="isV3Pilot" @size="small" onChange={{this.handleIsV3PilotChange}}>
+          <:label>{{t "components.certification-centers.is-v3-pilot-label"}}</:label>
+        </PixCheckbox>
+      </div>
+
+      <section>
+        <h2 class="habilitations-title">Habilitations aux certifications complémentaires</h2>
+        <ul class="form-field habilitations-checkbox-list">
+          {{#each @habilitations as |habilitation index|}}
+            <li class="habilitation-entry">
+              <PixCheckbox
+                @id={{concat "habilitation_" index}}
+                @size="small"
+                onChange={{fn this.updateGrantedHabilitation habilitation}}
+              >
+                <:label>{{habilitation.label}}</:label>
+              </PixCheckbox>
+            </li>
+          {{/each}}
+        </ul>
+      </section>
+
+      <ul class="form-actions">
+        <li>
+          <PixButton @size="small" @variant="secondary" @triggerAction={{@onCancel}}>Annuler</PixButton>
+        </li>
+        <li>
+          <PixButton @type="submit" @size="small">Ajouter</PixButton>
+        </li>
+      </ul>
+    </form>
+  </template>
+}
diff --git a/admin/app/components/certification-centers/creation-form.hbs b/admin/app/components/certification-centers/creation-form.hbs
deleted file mode 100644
index 70cb1579d2a..00000000000
--- a/admin/app/components/certification-centers/creation-form.hbs
+++ /dev/null
@@ -1,87 +0,0 @@
-<form class="form certification-center-form" {{on "submit" @onSubmit}}>
-
-  <PixInput
-    @id="certificationCenterName"
-    onchange={{this.handleCenterNameChange}}
-    class="form-field"
-    required={{true}}
-    aria-required={{true}}
-  >
-    <:label>Nom du centre</:label>
-  </PixInput>
-
-  <div class="form-field">
-    <PixSelect
-      @options={{this.certificationCenterTypes}}
-      @placeholder="-- Choisissez --"
-      @hideDefaultOption={{true}}
-      @onChange={{this.selectCertificationCenterType}}
-      @value={{@certificationCenter.type}}
-      required={{true}}
-      aria-required={{true}}
-    >
-      <:label>Type d'établissement</:label>
-      <:default as |certificationCenterType|>{{certificationCenterType.label}}</:default>
-    </PixSelect>
-  </div>
-
-  <PixInput @id="certificationCenterExternalId" onchange={{this.handleExternalIdChange}} class="form-field">
-    <:label>Identifiant externe</:label>
-  </PixInput>
-
-  <PixInput
-    @id="dataProtectionOfficerFirstName"
-    {{on "change" this.handleDataProtectionOfficerFirstNameChange}}
-    class="form-field"
-  >
-    <:label>Prénom du DPO</:label>
-  </PixInput>
-
-  <PixInput
-    @id="dataProtectionOfficerLastName"
-    {{on "change" this.handleDataProtectionOfficerLastNameChange}}
-    class="form-field"
-  >
-    <:label>Nom du DPO</:label>
-  </PixInput>
-
-  <PixInput
-    @id="dataProtectionOfficerEmail"
-    {{on "change" this.handleDataProtectionOfficerEmailChange}}
-    class="form-field"
-  >
-    <:label>Adresse e-mail du DPO</:label>
-  </PixInput>
-
-  <div class="form-field">
-    <PixCheckbox @id="isV3Pilot" @size="small" onChange={{this.handleIsV3PilotChange}}>
-      <:label>{{t "components.certification-centers.is-v3-pilot-label"}}</:label>
-    </PixCheckbox>
-  </div>
-
-  <section>
-    <h2 class="habilitations-title">Habilitations aux certifications complémentaires</h2>
-    <ul class="form-field habilitations-checkbox-list">
-      {{#each @habilitations as |habilitation index|}}
-        <li class="habilitation-entry">
-          <PixCheckbox
-            @id={{concat "habilitation_" index}}
-            @size="small"
-            onChange={{fn this.updateGrantedHabilitation habilitation}}
-          >
-            <:label>{{habilitation.label}}</:label>
-          </PixCheckbox>
-        </li>
-      {{/each}}
-    </ul>
-  </section>
-
-  <ul class="form-actions">
-    <li>
-      <PixButton @size="small" @variant="secondary" @triggerAction={{@onCancel}}>Annuler</PixButton>
-    </li>
-    <li>
-      <PixButton @type="submit" @size="small">Ajouter</PixButton>
-    </li>
-  </ul>
-</form>
\ No newline at end of file
diff --git a/admin/app/components/certification-centers/creation-form.js b/admin/app/components/certification-centers/creation-form.js
deleted file mode 100644
index 50858eedeb0..00000000000
--- a/admin/app/components/certification-centers/creation-form.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-import { types } from '../../models/certification-center';
-
-export default class CertificationCenterForm extends Component {
-  @tracked habilitations = [];
-  certificationCenterTypes = types;
-
-  constructor() {
-    super(...arguments);
-    Promise.resolve(this.args.certificationCenter.habilitations).then((habilitations) => {
-      this.habilitations = habilitations;
-    });
-  }
-  @action
-  handleCenterNameChange(event) {
-    this.args.certificationCenter.name = event.target.value;
-  }
-
-  @action
-  handleExternalIdChange(event) {
-    this.args.certificationCenter.externalId = event.target.value;
-  }
-
-  @action
-  handleIsV3PilotChange(event) {
-    this.args.certificationCenter.isV3Pilot = event.target.checked;
-  }
-
-  @action
-  handleDataProtectionOfficerFirstNameChange(event) {
-    this.args.certificationCenter.dataProtectionOfficerFirstName = event.target.value;
-  }
-
-  @action
-  handleDataProtectionOfficerLastNameChange(event) {
-    this.args.certificationCenter.dataProtectionOfficerLastName = event.target.value;
-  }
-
-  @action
-  handleDataProtectionOfficerEmailChange(event) {
-    this.args.certificationCenter.dataProtectionOfficerEmail = event.target.value;
-  }
-
-  @action
-  selectCertificationCenterType(value) {
-    this.args.certificationCenter.type = value;
-  }
-
-  @action
-  updateGrantedHabilitation(habilitation) {
-    const habilitations = this.habilitations;
-    if (habilitations.includes(habilitation)) {
-      habilitations.removeObject(habilitation);
-    } else {
-      habilitations.addObject(habilitation);
-    }
-  }
-}
diff --git a/admin/app/components/certification-centers/habilitation-tag/index.js b/admin/app/components/certification-centers/habilitation-tag.gjs
similarity index 59%
rename from admin/app/components/certification-centers/habilitation-tag/index.js
rename to admin/app/components/certification-centers/habilitation-tag.gjs
index 3ba07bdff52..a17a9bebb8a 100644
--- a/admin/app/components/certification-centers/habilitation-tag/index.js
+++ b/admin/app/components/certification-centers/habilitation-tag.gjs
@@ -1,3 +1,4 @@
+import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 import Component from '@glimmer/component';
 
 export default class HabilitationTag extends Component {
@@ -12,4 +13,11 @@ export default class HabilitationTag extends Component {
 
     return `circle-${active ? 'check' : 'xmark'}`;
   }
+
+  <template>
+    <li aria-label={{@arialabel}}>
+      <FaIcon class={{this.className}} @icon={{this.icon}} />
+      {{@label}}
+    </li>
+  </template>
 }
diff --git a/admin/app/components/certification-centers/habilitation-tag/index.hbs b/admin/app/components/certification-centers/habilitation-tag/index.hbs
deleted file mode 100644
index 909eb4eab87..00000000000
--- a/admin/app/components/certification-centers/habilitation-tag/index.hbs
+++ /dev/null
@@ -1,4 +0,0 @@
-<li aria-label={{@arialabel}}>
-  <FaIcon class={{this.className}} @icon={{this.icon}} />
-  {{@label}}
-</li>
\ No newline at end of file
diff --git a/admin/app/components/certification-centers/information-edit.gjs b/admin/app/components/certification-centers/information-edit.gjs
new file mode 100644
index 00000000000..2db1955549c
--- /dev/null
+++ b/admin/app/components/certification-centers/information-edit.gjs
@@ -0,0 +1,220 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixCheckbox from '@1024pix/pix-ui/components/pix-checkbox';
+import PixInput from '@1024pix/pix-ui/components/pix-input';
+import PixSelect from '@1024pix/pix-ui/components/pix-select';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import pick from 'ember-composable-helpers/helpers/pick';
+import { t } from 'ember-intl';
+import set from 'ember-set-helper/helpers/set';
+
+import contains from '../../helpers/contains.js';
+import { types } from '../../models/certification-center';
+
+export default class InformationEdit extends Component {
+  @service store;
+  @tracked habilitations = [];
+  certificationCenterTypes = types;
+
+  constructor() {
+    super(...arguments);
+    this.form = this.store.createRecord('certification-center-form');
+    Promise.resolve(this.args.certificationCenter.habilitations).then((habilitations) => {
+      this.habilitations = habilitations;
+    });
+
+    this._initForm();
+  }
+
+  get availableHabilitations() {
+    return this.args.availableHabilitations?.sortBy('id');
+  }
+
+  @action
+  selectCertificationCenterType(value) {
+    this.form.set('type', value ? value.trim() : value);
+  }
+
+  @action
+  updateIsV3Pilot(event) {
+    this.form.set('isV3Pilot', event.target.checked);
+  }
+
+  @action
+  async updateGrantedHabilitation(habilitation) {
+    const habilitations = await this.form.habilitations;
+    if (habilitations.includes(habilitation)) {
+      habilitations.removeObject(habilitation);
+    } else {
+      habilitations.addObject(habilitation);
+    }
+  }
+
+  @action
+  async updateCertificationCenter(event) {
+    event.preventDefault();
+
+    const { validations } = await this.form.validate();
+    if (!validations.isValid) {
+      return;
+    }
+    const habilitations = await this.form.habilitations;
+    this.args.certificationCenter.set('name', this.form.name);
+    this.args.certificationCenter.set('externalId', !this.form.externalId ? null : this.form.externalId);
+    this.args.certificationCenter.set('type', this.form.type);
+    this.args.certificationCenter.set('habilitations', habilitations);
+    this.args.certificationCenter.set('dataProtectionOfficerFirstName', this.form.dataProtectionOfficerFirstName);
+    this.args.certificationCenter.set('dataProtectionOfficerLastName', this.form.dataProtectionOfficerLastName);
+    this.args.certificationCenter.set('dataProtectionOfficerEmail', this.form.dataProtectionOfficerEmail);
+    this.args.certificationCenter.set('isV3Pilot', this.form.isV3Pilot);
+
+    this.args.toggleEditMode();
+    return this.args.onSubmit();
+  }
+
+  async _initForm() {
+    const habilitations = await this.args.certificationCenter.habilitations;
+    const properties = this.args.certificationCenter.getProperties(
+      'name',
+      'externalId',
+      'type',
+      'dataProtectionOfficerFirstName',
+      'dataProtectionOfficerLastName',
+      'dataProtectionOfficerEmail',
+      'isV3Pilot',
+    );
+    this.form.setProperties({ ...properties, habilitations });
+  }
+
+  <template>
+    <h2 class="certification-center-information__edit-title">Modifier un centre de certification</h2>
+    <form class="form certification-center-information__edit-form" onsubmit={{this.updateCertificationCenter}}>
+
+      <PixInput
+        class={{if this.form.validations.attrs.name.isInValid "form-control is-invalid" "form-control"}}
+        @value={{this.form.name}}
+        @requiredLabel={{true}}
+        {{on "input" (pick "target.value" (set this "form.name"))}}
+      >
+        <:label>Nom du centre</:label>
+      </PixInput>
+
+      {{#if this.form.validations.attrs.name.isInvalid}}
+        <span class="error" aria-label="Message d'erreur du champ nom">
+          {{this.form.validations.attrs.name.message}}
+        </span>
+      {{/if}}
+
+      <PixSelect
+        @options={{this.certificationCenterTypes}}
+        @placeholder="-- Choisissez --"
+        @value={{this.form.type}}
+        @onChange={{this.selectCertificationCenterType}}
+        @errorMessage={{this.form.validations.attrs.type.message}}
+      >
+        <:label>Type</:label>
+        <:default as |certificationCenterType|>{{certificationCenterType.label}}</:default>
+      </PixSelect>
+
+      <PixInput
+        class={{if this.form.validations.attrs.externalId.isInvalid "form-control is-invalid" "form-control"}}
+        @value={{this.form.externalId}}
+        {{on "input" (pick "target.value" (set this "form.externalId"))}}
+      >
+        <:label>Identifiant externe</:label>
+      </PixInput>
+
+      {{#if this.form.validations.attrs.externalId.isInvalid}}
+        <span class="error" aria-label="Message d'erreur du champ ID externe">
+          {{this.form.validations.attrs.externalId.message}}
+        </span>
+      {{/if}}
+
+      <PixInput
+        class={{if
+          this.form.validations.attrs.dataProtectionOfficerFirstName.isInvalid
+          "form-control is-invalid"
+          "form-control"
+        }}
+        @value={{this.form.dataProtectionOfficerFirstName}}
+        {{on "input" (pick "target.value" (set this "form.dataProtectionOfficerFirstName"))}}
+      >
+        <:label>Prénom du <abbr title="Délégué à la protection des données">DPO</abbr></:label>
+      </PixInput>
+
+      {{#if this.form.validations.attrs.dataProtectionOfficerFirstName.isInvalid}}
+        <span class="error" aria-label="Message d'erreur du champ Prénom du DPO">
+          {{this.form.validations.attrs.dataProtectionOfficerFirstName.message}}
+        </span>
+      {{/if}}
+
+      <PixInput
+        class={{if
+          this.form.validations.attrs.dataProtectionOfficerLastName.isInvalid
+          "form-control is-invalid"
+          "form-control"
+        }}
+        @value={{this.form.dataProtectionOfficerLastName}}
+        {{on "input" (pick "target.value" (set this "form.dataProtectionOfficerLastName"))}}
+      ><:label>Nom du <abbr title="Délégué à la protection des données">DPO</abbr></:label></PixInput>
+
+      {{#if this.form.validations.attrs.dataProtectionOfficerLastName.isInvalid}}
+        <span class="error" aria-label="Message d'erreur du champ Nom du DPO">
+          {{this.form.validations.attrs.dataProtectionOfficerLastName.message}}
+        </span>
+      {{/if}}
+
+      <PixInput
+        class={{if
+          this.form.validations.attrs.dataProtectionOfficerEmail.isInvalid
+          "form-control is-invalid"
+          "form-control"
+        }}
+        @value={{this.form.dataProtectionOfficerEmail}}
+        {{on "input" (pick "target.value" (set this "form.dataProtectionOfficerEmail"))}}
+      ><:label>Adresse e-mail du <abbr title="Délégué à la protection des données">DPO</abbr></:label></PixInput>
+
+      {{#if this.form.validations.attrs.dataProtectionOfficerEmail.isInvalid}}
+        <span class="error" aria-label="Message d'erreur du champ Adresse e-mail du DPO">
+          {{this.form.validations.attrs.dataProtectionOfficerEmail.message}}
+        </span>
+      {{/if}}
+
+      <PixCheckbox @id="isV3Pilot" @size="small" onChange={{this.updateIsV3Pilot}} @checked={{this.form.isV3Pilot}}>
+        <:label>{{t "components.certification-centers.is-v3-pilot-label"}}</:label>
+      </PixCheckbox>
+
+      <span class="field-label">Habilitations aux certifications complémentaires</span>
+      <ul class="form-field certification-center-information__edit-form__habilitations-checkbox-list">
+        {{#each this.availableHabilitations as |habilitation|}}
+          <li class="habilitation-entry">
+            <PixCheckbox
+              @checked={{contains habilitation this.habilitations}}
+              {{on "change" (fn this.updateGrantedHabilitation habilitation)}}
+            >
+              <:label>
+                {{habilitation.label}}
+              </:label>
+            </PixCheckbox>
+          </li>
+        {{/each}}
+      </ul>
+
+      <div class="certification-center-information__action-buttons">
+        <PixButton @size="small" @variant="secondary" @triggerAction={{@toggleEditMode}}>
+          Annuler
+        </PixButton>
+        <PixButton
+          @type="submit"
+          @size="small"
+          @variant="primary"
+          @triggerAction={{this.updateCertificationCenter}}
+        >Enregistrer</PixButton>
+      </div>
+    </form>
+  </template>
+}
diff --git a/admin/app/components/certification-centers/information-edit.hbs b/admin/app/components/certification-centers/information-edit.hbs
deleted file mode 100644
index 7ff21c6aa2f..00000000000
--- a/admin/app/components/certification-centers/information-edit.hbs
+++ /dev/null
@@ -1,109 +0,0 @@
-<h2 class="certification-center-information__edit-title">Modifier un centre de certification</h2>
-
-<form class="form certification-center-information__edit-form" onsubmit={{this.updateCertificationCenter}}>
-
-  <PixInput
-    class={{if (v-get this.form "name" "isInvalid") "form-control is-invalid" "form-control"}}
-    @value={{this.form.name}}
-    @requiredLabel={{true}}
-    {{on "input" (pick "target.value" (set this "form.name"))}}
-  >
-    <:label>Nom du centre</:label>
-  </PixInput>
-
-  {{#if (v-get this.form "name" "isInvalid")}}
-    <span class="error" aria-label="Message d'erreur du champ nom">
-      {{v-get this.form "name" "message"}}
-    </span>
-  {{/if}}
-
-  <PixSelect
-    @options={{this.certificationCenterTypes}}
-    @placeholder="-- Choisissez --"
-    @value={{this.form.type}}
-    @onChange={{this.selectCertificationCenterType}}
-    @errorMessage={{v-get this.form "type" "message"}}
-  >
-    <:label>Type</:label>
-    <:default as |certificationCenterType|>{{certificationCenterType.label}}</:default>
-  </PixSelect>
-
-  <PixInput
-    class={{if (v-get this.form "externalId" "isInvalid") "form-control is-invalid" "form-control"}}
-    @value={{this.form.externalId}}
-    {{on "input" (pick "target.value" (set this "form.externalId"))}}
-  >
-    <:label>Identifiant externe</:label>
-  </PixInput>
-
-  {{#if (v-get this.form "externalId" "isInvalid")}}
-    <span class="error" aria-label="Message d'erreur du champ ID externe">
-      {{v-get this.form "externalId" "message"}}
-    </span>
-  {{/if}}
-
-  <PixInput
-    class={{if (v-get this.form "dataProtectionOfficerFirstName" "isInvalid") "form-control is-invalid" "form-control"}}
-    @value={{this.form.dataProtectionOfficerFirstName}}
-    {{on "input" (pick "target.value" (set this "form.dataProtectionOfficerFirstName"))}}
-  >
-    <:label>Prénom du <abbr title="Délégué à la protection des données">DPO</abbr></:label>
-  </PixInput>
-
-  {{#if (v-get this.form "dataProtectionOfficerFirstName" "isInvalid")}}
-    <span class="error" aria-label="Message d'erreur du champ Prénom du DPO">
-      {{v-get this.form "dataProtectionOfficerFirstName" "message"}}
-    </span>
-  {{/if}}
-
-  <PixInput
-    class={{if (v-get this.form "dataProtectionOfficerLastName" "isInvalid") "form-control is-invalid" "form-control"}}
-    @value={{this.form.dataProtectionOfficerLastName}}
-    {{on "input" (pick "target.value" (set this "form.dataProtectionOfficerLastName"))}}
-  ><:label>Nom du <abbr title="Délégué à la protection des données">DPO</abbr></:label></PixInput>
-
-  {{#if (v-get this.form "dataProtectionOfficerLastName" "isInvalid")}}
-    <span class="error" aria-label="Message d'erreur du champ Nom du DPO">
-      {{v-get this.form "dataProtectionOfficerLastName" "message"}}
-    </span>
-  {{/if}}
-
-  <PixInput
-    class={{if (v-get this.form "dataProtectionOfficerEmail" "isInvalid") "form-control is-invalid" "form-control"}}
-    @value={{this.form.dataProtectionOfficerEmail}}
-    {{on "input" (pick "target.value" (set this "form.dataProtectionOfficerEmail"))}}
-  ><:label>Adresse e-mail du <abbr title="Délégué à la protection des données">DPO</abbr></:label></PixInput>
-
-  {{#if (v-get this.form "dataProtectionOfficerEmail" "isInvalid")}}
-    <span class="error" aria-label="Message d'erreur du champ Adresse e-mail du DPO">
-      {{v-get this.form "dataProtectionOfficerEmail" "message"}}
-    </span>
-  {{/if}}
-
-  <PixCheckbox @id="isV3Pilot" @size="small" onChange={{this.updateIsV3Pilot}} @checked={{this.form.isV3Pilot}}>
-    <:label>{{t "components.certification-centers.is-v3-pilot-label"}}</:label>
-  </PixCheckbox>
-
-  <span class="field-label">Habilitations aux certifications complémentaires</span>
-  <ul class="form-field certification-center-information__edit-form__habilitations-checkbox-list">
-    {{#each this.availableHabilitations as |habilitation|}}
-      <li class="habilitation-entry">
-        <PixCheckbox
-          @checked={{contains habilitation this.habilitations}}
-          {{on "change" (fn this.updateGrantedHabilitation habilitation)}}
-        >
-          <:label>
-            {{habilitation.label}}
-          </:label>
-        </PixCheckbox>
-      </li>
-    {{/each}}
-  </ul>
-
-  <div class="certification-center-information__action-buttons">
-    <PixButton @size="small" @variant="secondary" @triggerAction={{@toggleEditMode}}>
-      Annuler
-    </PixButton>
-    <PixButton @type="submit" @size="small" @variant="primary">Enregistrer</PixButton>
-  </div>
-</form>
\ No newline at end of file
diff --git a/admin/app/components/certification-centers/information-edit.js b/admin/app/components/certification-centers/information-edit.js
deleted file mode 100644
index 10c0ffa33f7..00000000000
--- a/admin/app/components/certification-centers/information-edit.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { action } from '@ember/object';
-import { inject as service } from '@ember/service';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-import { types } from '../../models/certification-center';
-
-export default class InformationEdit extends Component {
-  @service store;
-  @tracked habilitations = [];
-  certificationCenterTypes = types;
-
-  constructor() {
-    super(...arguments);
-    this.form = this.store.createRecord('certification-center-form');
-    Promise.resolve(this.args.certificationCenter.habilitations).then((habilitations) => {
-      this.habilitations = habilitations;
-    });
-
-    this._initForm();
-  }
-
-  get availableHabilitations() {
-    return this.args.availableHabilitations?.sortBy('id');
-  }
-
-  @action
-  selectCertificationCenterType(value) {
-    this.form.set('type', value ? value.trim() : value);
-  }
-
-  @action
-  updateIsV3Pilot(event) {
-    this.form.set('isV3Pilot', event.target.checked);
-  }
-
-  @action
-  async updateGrantedHabilitation(habilitation) {
-    const habilitations = await this.form.habilitations;
-    if (habilitations.includes(habilitation)) {
-      habilitations.removeObject(habilitation);
-    } else {
-      habilitations.addObject(habilitation);
-    }
-  }
-
-  @action
-  async updateCertificationCenter(event) {
-    event.preventDefault();
-
-    const { validations } = await this.form.validate();
-    if (!validations.isValid) {
-      return;
-    }
-    const habilitations = await this.form.habilitations;
-    this.args.certificationCenter.set('name', this.form.name);
-    this.args.certificationCenter.set('externalId', !this.form.externalId ? null : this.form.externalId);
-    this.args.certificationCenter.set('type', this.form.type);
-    this.args.certificationCenter.set('habilitations', habilitations);
-    this.args.certificationCenter.set('dataProtectionOfficerFirstName', this.form.dataProtectionOfficerFirstName);
-    this.args.certificationCenter.set('dataProtectionOfficerLastName', this.form.dataProtectionOfficerLastName);
-    this.args.certificationCenter.set('dataProtectionOfficerEmail', this.form.dataProtectionOfficerEmail);
-    this.args.certificationCenter.set('isV3Pilot', this.form.isV3Pilot);
-
-    this.args.toggleEditMode();
-    return this.args.onSubmit();
-  }
-
-  async _initForm() {
-    const habilitations = await this.args.certificationCenter.habilitations;
-    const properties = this.args.certificationCenter.getProperties(
-      'name',
-      'externalId',
-      'type',
-      'dataProtectionOfficerFirstName',
-      'dataProtectionOfficerLastName',
-      'dataProtectionOfficerEmail',
-      'isV3Pilot',
-    );
-    this.form.setProperties({ ...properties, habilitations });
-  }
-}
diff --git a/admin/app/components/certification-centers/information-view.gjs b/admin/app/components/certification-centers/information-view.gjs
new file mode 100644
index 00000000000..25f013e88d1
--- /dev/null
+++ b/admin/app/components/certification-centers/information-view.gjs
@@ -0,0 +1,135 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixButtonLink from '@1024pix/pix-ui/components/pix-button-link';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { t } from 'ember-intl';
+import ENV from 'pix-admin/config/environment';
+
+import HabilitationTag from './habilitation-tag';
+
+export default class InformationView extends Component {
+  @service intl;
+  @tracked habilitations = [];
+
+  constructor() {
+    super(...arguments);
+    Promise.resolve(this.args.certificationCenter.habilitations).then((habilitations) => {
+      this.habilitations = habilitations;
+    });
+  }
+
+  get availableHabilitations() {
+    const habilitations = this.args.availableHabilitations?.sortBy('id') || [];
+    return habilitations.map((habilitation) => {
+      const isHabilitated = this.habilitations.includes(habilitation);
+      const label = habilitation.label;
+      const ariaLabel = this.intl.t(
+        `pages.certification-centers.information-view.habilitations.aria-label.${
+          isHabilitated ? 'active' : 'inactive'
+        }`,
+        { complementaryCertificationLabel: label },
+      );
+      return { isHabilitated, label, ariaLabel };
+    });
+  }
+
+  get availablePilotFeatures() {
+    const isV3Pilot = this.args.certificationCenter.isV3Pilot;
+    const isV3PilotLabel = this.intl.t('pages.certification-centers.information-view.pilot-features.is-v3-pilot.label');
+    const isV3PilotAriaLabel = this.intl.t(
+      `pages.certification-centers.information-view.pilot-features.is-v3-pilot.aria-label.${
+        isV3Pilot ? 'active' : 'inactive'
+      }`,
+    );
+
+    const isComplementaryAlonePilot = this.args.certificationCenter.isComplementaryAlonePilot;
+    const isComplementaryAlonePilotLabel = this.intl.t(
+      'pages.certification-centers.information-view.pilot-features.is-complementary-alone-pilot.label',
+    );
+    const isComplementaryAlonePilotAriaLabel = this.intl.t(
+      `pages.certification-centers.information-view.pilot-features.is-complementary-alone-pilot.aria-label.${
+        isComplementaryAlonePilot ? 'active' : 'inactive'
+      }`,
+    );
+
+    return [
+      { isPilot: isV3Pilot, label: isV3PilotLabel, ariaLabel: isV3PilotAriaLabel },
+      {
+        isPilot: isComplementaryAlonePilot,
+        label: isComplementaryAlonePilotLabel,
+        ariaLabel: isComplementaryAlonePilotAriaLabel,
+      },
+    ];
+  }
+
+  get externalURL() {
+    const urlDashboardPrefix = ENV.APP.CERTIFICATION_CENTER_DASHBOARD_URL;
+    return urlDashboardPrefix && urlDashboardPrefix + this.args.certificationCenter.id;
+  }
+
+  <template>
+    <h2 class="certification-center-information-display__name">{{@certificationCenter.name}}</h2>
+
+    <dl class="certification-center-information-display__list">
+      <dt class="label">Type :</dt>
+      <dd>{{@certificationCenter.typeLabel}}</dd>
+
+      <dt class="label">Identifiant externe :</dt>
+      <dd>{{@certificationCenter.externalId}}</dd>
+
+      <dt class="label">
+        Nom du
+        <abbr title="Délégué à la protection des données">DPO</abbr>
+        :
+      </dt>
+      <dd>{{@certificationCenter.dataProtectionOfficerFullName}}</dd>
+
+      <dt class="label">
+        Adresse e-mail du
+        <abbr title="Délégué à la protection des données">DPO</abbr>
+        :
+      </dt>
+      <dd>{{@certificationCenter.dataProtectionOfficerEmail}}</dd>
+    </dl>
+
+    <span class="label">{{t "pages.certification-centers.information-view.pilot-features.title"}}</span>
+    <ul class="certification-center-information-display__habilitations-list">
+      {{#each this.availablePilotFeatures as |feature|}}
+        <HabilitationTag @label={{feature.label}} @active={{feature.isPilot}} @arialabel={{feature.ariaLabel}} />
+      {{/each}}
+    </ul>
+
+    <div class="certification-center-information-display__divider"></div>
+
+    <span class="label">{{t "pages.certification-centers.information-view.habilitations.title"}}</span>
+    <ul class="certification-center-information-display__habilitations-list">
+      {{#each this.availableHabilitations as |habilitation|}}
+        <HabilitationTag
+          @label={{habilitation.label}}
+          @active={{habilitation.isHabilitated}}
+          @arialabel={{habilitation.ariaLabel}}
+        />
+      {{/each}}
+    </ul>
+
+    <ul class="certification-center-information-display__action-buttons">
+      <li>
+        <PixButton @size="small" @triggerAction={{@toggleEditMode}}>
+          Modifier
+        </PixButton>
+      </li>
+      <li>
+        <PixButtonLink
+          @variant="secondary"
+          @href={{this.externalURL}}
+          @size="small"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Tableau de bord
+        </PixButtonLink>
+      </li>
+    </ul>
+  </template>
+}
diff --git a/admin/app/components/certification-centers/information-view.hbs b/admin/app/components/certification-centers/information-view.hbs
deleted file mode 100644
index 122fdd4e431..00000000000
--- a/admin/app/components/certification-centers/information-view.hbs
+++ /dev/null
@@ -1,66 +0,0 @@
-<h2 class="certification-center-information-display__name">{{@certificationCenter.name}}</h2>
-
-<dl class="certification-center-information-display__list">
-  <dt class="label">Type :</dt>
-  <dd>{{@certificationCenter.typeLabel}}</dd>
-
-  <dt class="label">Identifiant externe :</dt>
-  <dd>{{@certificationCenter.externalId}}</dd>
-
-  <dt class="label">
-    Nom du
-    <abbr title="Délégué à la protection des données">DPO</abbr>
-    :
-  </dt>
-  <dd>{{@certificationCenter.dataProtectionOfficerFullName}}</dd>
-
-  <dt class="label">
-    Adresse e-mail du
-    <abbr title="Délégué à la protection des données">DPO</abbr>
-    :
-  </dt>
-  <dd>{{@certificationCenter.dataProtectionOfficerEmail}}</dd>
-</dl>
-
-<span class="label">{{t "pages.certification-centers.information-view.pilot-features.title"}}</span>
-<ul class="certification-center-information-display__habilitations-list">
-  {{#each this.availablePilotFeatures as |feature|}}
-    <CertificationCenters::HabilitationTag
-      @label={{feature.label}}
-      @active={{feature.isPilot}}
-      @arialabel={{feature.ariaLabel}}
-    />
-  {{/each}}
-</ul>
-
-<div class="certification-center-information-display__divider"></div>
-
-<span class="label">{{t "pages.certification-centers.information-view.habilitations.title"}}</span>
-<ul class="certification-center-information-display__habilitations-list">
-  {{#each this.availableHabilitations as |habilitation|}}
-    <CertificationCenters::HabilitationTag
-      @label={{habilitation.label}}
-      @active={{habilitation.isHabilitated}}
-      @arialabel={{habilitation.ariaLabel}}
-    />
-  {{/each}}
-</ul>
-
-<ul class="certification-center-information-display__action-buttons">
-  <li>
-    <PixButton @size="small" @triggerAction={{@toggleEditMode}}>
-      Modifier
-    </PixButton>
-  </li>
-  <li>
-    <PixButtonLink
-      @variant="secondary"
-      @href={{this.externalURL}}
-      @size="small"
-      target="_blank"
-      rel="noopener noreferrer"
-    >
-      Tableau de bord
-    </PixButtonLink>
-  </li>
-</ul>
\ No newline at end of file
diff --git a/admin/app/components/certification-centers/information-view.js b/admin/app/components/certification-centers/information-view.js
deleted file mode 100644
index b01b6bbd7f1..00000000000
--- a/admin/app/components/certification-centers/information-view.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import { service } from '@ember/service';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-import ENV from 'pix-admin/config/environment';
-
-export default class InformationView extends Component {
-  @service intl;
-  @tracked habilitations = [];
-
-  constructor() {
-    super(...arguments);
-    Promise.resolve(this.args.certificationCenter.habilitations).then((habilitations) => {
-      this.habilitations = habilitations;
-    });
-  }
-
-  get availableHabilitations() {
-    const habilitations = this.args.availableHabilitations?.sortBy('id') || [];
-    return habilitations.map((habilitation) => {
-      const isHabilitated = this.habilitations.includes(habilitation);
-      const label = habilitation.label;
-      const ariaLabel = this.intl.t(
-        `pages.certification-centers.information-view.habilitations.aria-label.${isHabilitated ? 'active' : 'inactive'}`,
-        { complementaryCertificationLabel: label },
-      );
-      return { isHabilitated, label, ariaLabel };
-    });
-  }
-
-  get availablePilotFeatures() {
-    const isV3Pilot = this.args.certificationCenter.isV3Pilot;
-    const isV3PilotLabel = this.intl.t('pages.certification-centers.information-view.pilot-features.is-v3-pilot.label');
-    const isV3PilotAriaLabel = this.intl.t(
-      `pages.certification-centers.information-view.pilot-features.is-v3-pilot.aria-label.${isV3Pilot ? 'active' : 'inactive'}`,
-    );
-
-    const isComplementaryAlonePilot = this.args.certificationCenter.isComplementaryAlonePilot;
-    const isComplementaryAlonePilotLabel = this.intl.t(
-      'pages.certification-centers.information-view.pilot-features.is-complementary-alone-pilot.label',
-    );
-    const isComplementaryAlonePilotAriaLabel = this.intl.t(
-      `pages.certification-centers.information-view.pilot-features.is-complementary-alone-pilot.aria-label.${isComplementaryAlonePilot ? 'active' : 'inactive'}`,
-    );
-
-    return [
-      { isPilot: isV3Pilot, label: isV3PilotLabel, ariaLabel: isV3PilotAriaLabel },
-      {
-        isPilot: isComplementaryAlonePilot,
-        label: isComplementaryAlonePilotLabel,
-        ariaLabel: isComplementaryAlonePilotAriaLabel,
-      },
-    ];
-  }
-
-  get externalURL() {
-    const urlDashboardPrefix = ENV.APP.CERTIFICATION_CENTER_DASHBOARD_URL;
-    return urlDashboardPrefix && urlDashboardPrefix + this.args.certificationCenter.id;
-  }
-}
diff --git a/admin/app/components/certification-centers/information.gjs b/admin/app/components/certification-centers/information.gjs
new file mode 100644
index 00000000000..58e6466c324
--- /dev/null
+++ b/admin/app/components/certification-centers/information.gjs
@@ -0,0 +1,36 @@
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import InformationEdit from './information-edit';
+import InformationView from './information-view';
+
+export default class Information extends Component {
+  @tracked isEditMode = false;
+
+  @action
+  toggleEditMode() {
+    this.isEditMode = !this.isEditMode;
+  }
+
+  <template>
+    <section class="page-section">
+      <div class="certification-center-information">
+        {{#if this.isEditMode}}
+          <InformationEdit
+            @certificationCenter={{@certificationCenter}}
+            @availableHabilitations={{@availableHabilitations}}
+            @toggleEditMode={{this.toggleEditMode}}
+            @onSubmit={{@updateCertificationCenter}}
+          />
+        {{else}}
+          <InformationView
+            @certificationCenter={{@certificationCenter}}
+            @availableHabilitations={{@availableHabilitations}}
+            @toggleEditMode={{this.toggleEditMode}}
+          />
+        {{/if}}
+      </div>
+    </section>
+  </template>
+}
diff --git a/admin/app/components/certification-centers/information.hbs b/admin/app/components/certification-centers/information.hbs
deleted file mode 100644
index 3bd9f29bc3d..00000000000
--- a/admin/app/components/certification-centers/information.hbs
+++ /dev/null
@@ -1,18 +0,0 @@
-<section class="page-section">
-  <div class="certification-center-information">
-    {{#if this.isEditMode}}
-      <CertificationCenters::InformationEdit
-        @certificationCenter={{@certificationCenter}}
-        @availableHabilitations={{@availableHabilitations}}
-        @toggleEditMode={{this.toggleEditMode}}
-        @onSubmit={{@updateCertificationCenter}}
-      />
-    {{else}}
-      <CertificationCenters::InformationView
-        @certificationCenter={{@certificationCenter}}
-        @availableHabilitations={{@availableHabilitations}}
-        @toggleEditMode={{this.toggleEditMode}}
-      />
-    {{/if}}
-  </div>
-</section>
\ No newline at end of file
diff --git a/admin/app/components/certification-centers/information.js b/admin/app/components/certification-centers/information.js
deleted file mode 100644
index 674f97255a2..00000000000
--- a/admin/app/components/certification-centers/information.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class Information extends Component {
-  @tracked isEditMode = false;
-
-  @action
-  toggleEditMode() {
-    this.isEditMode = !this.isEditMode;
-  }
-}
diff --git a/admin/app/styles/components/certification-centers/information.scss b/admin/app/components/certification-centers/information.scss
similarity index 98%
rename from admin/app/styles/components/certification-centers/information.scss
rename to admin/app/components/certification-centers/information.scss
index 5eb9220d87a..26d9317004a 100644
--- a/admin/app/styles/components/certification-centers/information.scss
+++ b/admin/app/components/certification-centers/information.scss
@@ -87,7 +87,7 @@
       color: var(--pix-success-700);
     }
 
-    .not-granted-habilitation-icon {
+    .non-granted-habilitation-icon {
       color: var(--pix-neutral-500);
     }
   }
diff --git a/admin/app/components/certification-centers/invitations-action.gjs b/admin/app/components/certification-centers/invitations-action.gjs
new file mode 100644
index 00000000000..9adc5375985
--- /dev/null
+++ b/admin/app/components/certification-centers/invitations-action.gjs
@@ -0,0 +1,115 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import PixInput from '@1024pix/pix-ui/components/pix-input';
+import PixSelect from '@1024pix/pix-ui/components/pix-select';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+export default class CertificationCenterInvitationsAction extends Component {
+  @service intl;
+
+  @tracked invitationLanguage = this.languagesOptions[0].value;
+  @tracked invitationRole = this.rolesOptions[0].value;
+
+  languagesOptions = [
+    {
+      label: 'Français',
+      value: 'fr-fr',
+    },
+    {
+      label: 'Francophone',
+      value: 'fr',
+    },
+    {
+      label: 'Anglais',
+      value: 'en',
+    },
+  ];
+
+  rolesOptions = [
+    {
+      label: this.intl.t('common.roles.auto'),
+      value: 'NULL',
+    },
+    {
+      label: this.intl.t('common.roles.admin'),
+      value: 'ADMIN',
+    },
+    {
+      label: this.intl.t('common.roles.member'),
+      value: 'MEMBER',
+    },
+  ];
+
+  get certificationCenterRoleValue() {
+    return this.invitationRole === 'NULL' ? null : this.invitationRole;
+  }
+
+  @action
+  changeInvitationRole(value) {
+    this.invitationRole = value;
+  }
+
+  @action
+  changeInvitationLanguage(value) {
+    this.invitationLanguage = value;
+  }
+
+  <template>
+    <section class="page-section certification-center-invitations">
+      <form>
+        <h2 class="certification-center-invitations__heading">Inviter un membre</h2>
+        <div class="certification-center-invitations-form-container">
+          <PixInput
+            @id="userEmailToInvite"
+            value={{@userEmailToInvite}}
+            {{on "change" @onChangeUserEmailToInvite}}
+            class="certification-center-invitations-form-container__input
+              {{if @userEmailToInviteError 'certification-center-invitations-form-container__input--error'}}"
+          >
+            <:label>Adresse e-mail du membre à inviter</:label>
+          </PixInput>
+
+          <PixSelect
+            @options={{this.languagesOptions}}
+            @value={{this.invitationLanguage}}
+            @onChange={{this.changeInvitationLanguage}}
+            @placeholder="Choix de la langue"
+            @hideDefaultOption={{true}}
+          >
+            <:label>Choisir la langue de l’email d’invitation</:label>
+          </PixSelect>
+
+          <PixSelect
+            @options={{this.rolesOptions}}
+            @value={{this.invitationRole}}
+            @onChange={{this.changeInvitationRole}}
+            @placeholder="Choix du Rôle"
+            @hideDefaultOption={{true}}
+          >
+            <:label>Choisir le rôle du membre</:label>
+          </PixSelect>
+
+          <PixButton
+            @size="small"
+            @triggerAction={{fn @createInvitation this.invitationLanguage this.certificationCenterRoleValue}}
+            aria-label="Inviter un membre"
+            class="certification-center-invitations-form-container__button"
+            name="Inviter"
+          >
+            Inviter
+          </PixButton>
+        </div>
+        {{#if @userEmailToInviteError}}
+          <label
+            for="userEmailToInvite"
+            class="certification-center-invitations-form-container__error-message"
+          >{{@userEmailToInviteError}}</label>
+        {{/if}}
+      </form>
+    </section>
+  </template>
+}
diff --git a/admin/app/components/certification-centers/invitations-action.hbs b/admin/app/components/certification-centers/invitations-action.hbs
deleted file mode 100644
index e361d476ac0..00000000000
--- a/admin/app/components/certification-centers/invitations-action.hbs
+++ /dev/null
@@ -1,52 +0,0 @@
-<section class="page-section certification-center-invitations">
-  <form>
-    <h2 class="certification-center-invitations__heading">Inviter un membre</h2>
-    <div class="certification-center-invitations-form-container">
-      <PixInput
-        @id="userEmailToInvite"
-        value={{@userEmailToInvite}}
-        {{on "change" @onChangeUserEmailToInvite}}
-        class="certification-center-invitations-form-container__input
-          {{if @userEmailToInviteError 'certification-center-invitations-form-container__input--error'}}"
-      >
-        <:label>Adresse e-mail du membre à inviter</:label>
-      </PixInput>
-
-      <PixSelect
-        @options={{this.languagesOptions}}
-        @value={{this.invitationLanguage}}
-        @onChange={{this.changeInvitationLanguage}}
-        @placeholder="Choix de la langue"
-        @hideDefaultOption={{true}}
-      >
-        <:label>Choisir la langue de l’email d’invitation</:label>
-      </PixSelect>
-
-      <PixSelect
-        @options={{this.rolesOptions}}
-        @value={{this.invitationRole}}
-        @onChange={{this.changeInvitationRole}}
-        @placeholder="Choix du Rôle"
-        @hideDefaultOption={{true}}
-      >
-        <:label>Choisir le rôle du membre</:label>
-      </PixSelect>
-
-      <PixButton
-        @size="small"
-        @triggerAction={{fn @createInvitation this.invitationLanguage this.certificationCenterRoleValue}}
-        aria-label="Inviter un membre"
-        class="certification-center-invitations-form-container__button"
-        name="Inviter"
-      >
-        Inviter
-      </PixButton>
-    </div>
-    {{#if @userEmailToInviteError}}
-      <label
-        for="userEmailToInvite"
-        class="certification-center-invitations-form-container__error-message"
-      >{{@userEmailToInviteError}}</label>
-    {{/if}}
-  </form>
-</section>
\ No newline at end of file
diff --git a/admin/app/components/certification-centers/invitations-action.js b/admin/app/components/certification-centers/invitations-action.js
deleted file mode 100644
index 71ee5e4ef9e..00000000000
--- a/admin/app/components/certification-centers/invitations-action.js
+++ /dev/null
@@ -1,55 +0,0 @@
-import { action } from '@ember/object';
-import { service } from '@ember/service';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class CertificationCenterInvitationsAction extends Component {
-  @service intl;
-
-  @tracked invitationLanguage = this.languagesOptions[0].value;
-  @tracked invitationRole = this.rolesOptions[0].value;
-
-  languagesOptions = [
-    {
-      label: 'Français',
-      value: 'fr-fr',
-    },
-    {
-      label: 'Francophone',
-      value: 'fr',
-    },
-    {
-      label: 'Anglais',
-      value: 'en',
-    },
-  ];
-
-  rolesOptions = [
-    {
-      label: this.intl.t('common.roles.auto'),
-      value: 'NULL',
-    },
-    {
-      label: this.intl.t('common.roles.admin'),
-      value: 'ADMIN',
-    },
-    {
-      label: this.intl.t('common.roles.member'),
-      value: 'MEMBER',
-    },
-  ];
-
-  get certificationCenterRoleValue() {
-    return this.invitationRole === 'NULL' ? null : this.invitationRole;
-  }
-
-  @action
-  changeInvitationRole(value) {
-    this.invitationRole = value;
-  }
-
-  @action
-  changeInvitationLanguage(value) {
-    this.invitationLanguage = value;
-  }
-}
diff --git a/admin/app/styles/components/certification-centers/invitations-action.scss b/admin/app/components/certification-centers/invitations-action.scss
similarity index 100%
rename from admin/app/styles/components/certification-centers/invitations-action.scss
rename to admin/app/components/certification-centers/invitations-action.scss
diff --git a/admin/app/components/certification-centers/invitations.gjs b/admin/app/components/certification-centers/invitations.gjs
new file mode 100644
index 00000000000..5fa4e509445
--- /dev/null
+++ b/admin/app/components/certification-centers/invitations.gjs
@@ -0,0 +1,57 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import { fn } from '@ember/helper';
+import Component from '@glimmer/component';
+import dayjsFormat from 'ember-dayjs/helpers/dayjs-format';
+
+export default class CertificationCenterInvitations extends Component {
+  get sortedCertificationCenterInvitations() {
+    return this.args.certificationCenterInvitations.sortBy('updatedAt').reverse();
+  }
+
+  <template>
+    <section class="page-section">
+      <header class="page-section__header">
+        <h2 class="page-section__title">Invitations</h2>
+      </header>
+      <div class="content-text content-text--small">
+        <div class="table-admin">
+          {{#if this.sortedCertificationCenterInvitations}}
+            <table>
+              <thead>
+                <tr>
+                  <th>Adresse e-mail</th>
+                  <th>Rôle</th>
+                  <th>Date de dernier envoi</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {{#each this.sortedCertificationCenterInvitations as |invitation|}}
+                  <tr aria-label="Invitation en attente de {{invitation.email}}">
+                    <td>{{invitation.email}}</td>
+                    <td>{{invitation.roleLabel}}</td>
+                    <td>{{dayjsFormat invitation.updatedAt "DD/MM/YYYY [-] HH:mm"}}</td>
+                    <td>
+                      <PixButton
+                        @size="small"
+                        @variant="error"
+                        class="certification-center-invitations-actions__button"
+                        aria-label="Annuler l’invitation de {{invitation.email}}"
+                        @triggerAction={{fn @onCancelCertificationCenterInvitation invitation}}
+                        @iconBefore="trash"
+                      >
+                        Annuler l’invitation
+                      </PixButton>
+                    </td>
+                  </tr>
+                {{/each}}
+              </tbody>
+            </table>
+          {{else}}
+            <p class="certification-center-invitations__message">Aucune invitation en attente</p>
+          {{/if}}
+        </div>
+      </div>
+    </section>
+  </template>
+}
diff --git a/admin/app/components/certification-centers/invitations.hbs b/admin/app/components/certification-centers/invitations.hbs
deleted file mode 100644
index 7a53a300689..00000000000
--- a/admin/app/components/certification-centers/invitations.hbs
+++ /dev/null
@@ -1,44 +0,0 @@
-<section class="page-section">
-  <header class="page-section__header">
-    <h2 class="page-section__title">Invitations</h2>
-  </header>
-  <div class="content-text content-text--small">
-    <div class="table-admin">
-      {{#if this.sortedCertificationCenterInvitations}}
-        <table>
-          <thead>
-            <tr>
-              <th>Adresse e-mail</th>
-              <th>Rôle</th>
-              <th>Date de dernier envoi</th>
-              <th>Actions</th>
-            </tr>
-          </thead>
-          <tbody>
-            {{#each this.sortedCertificationCenterInvitations as |invitation|}}
-              <tr aria-label="Invitation en attente de {{invitation.email}}">
-                <td>{{invitation.email}}</td>
-                <td>{{invitation.roleLabel}}</td>
-                <td>{{dayjs-format invitation.updatedAt "DD/MM/YYYY [-] HH:mm"}}</td>
-                <td>
-                  <PixButton
-                    @size="small"
-                    @variant="error"
-                    class="certification-center-invitations-actions__button"
-                    aria-label="Annuler l’invitation de {{invitation.email}}"
-                    @triggerAction={{fn @onCancelCertificationCenterInvitation invitation}}
-                    @iconBefore="trash"
-                  >
-                    Annuler l’invitation
-                  </PixButton>
-                </td>
-              </tr>
-            {{/each}}
-          </tbody>
-        </table>
-      {{else}}
-        <p class="certification-center-invitations__message">Aucune invitation en attente</p>
-      {{/if}}
-    </div>
-  </div>
-</section>
\ No newline at end of file
diff --git a/admin/app/components/certification-centers/invitations.js b/admin/app/components/certification-centers/invitations.js
deleted file mode 100644
index 1fd27187d1c..00000000000
--- a/admin/app/components/certification-centers/invitations.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class CertificationCenterInvitations extends Component {
-  get sortedCertificationCenterInvitations() {
-    return this.args.certificationCenterInvitations.sortBy('updatedAt').reverse();
-  }
-}
diff --git a/admin/app/components/certification-centers/list-items.gjs b/admin/app/components/certification-centers/list-items.gjs
new file mode 100644
index 00000000000..651293c19eb
--- /dev/null
+++ b/admin/app/components/certification-centers/list-items.gjs
@@ -0,0 +1,89 @@
+import PixPagination from '@1024pix/pix-ui/components/pix-pagination';
+import { fn } from '@ember/helper';
+import { LinkTo } from '@ember/routing';
+import Component from '@glimmer/component';
+
+export default class CertificationCenterListItems extends Component {
+  searchedId = this.args.id;
+  searchedName = this.args.name;
+  searchedType = this.args.type;
+  searchedExternalId = this.args.externalId;
+
+  <template>
+    <div class="content-text content-text--small">
+      <table class="table-admin">
+        <thead>
+          <tr>
+            <th class="table__column table__column--id"><label for="id">ID</label></th>
+            <th><label for="name">Nom</label></th>
+            <th><label for="type">Type</label></th>
+            <th><label for="externalId">ID externe</label></th>
+          </tr>
+          <tr>
+            <td class="table__column table__column--id">
+              <input
+                id="id"
+                type="text"
+                value={{this.searchedId}}
+                oninput={{fn @triggerFiltering "id"}}
+                class="table-admin-input"
+              />
+            </td>
+            <td>
+              <input
+                id="name"
+                type="text"
+                value={{this.searchedName}}
+                oninput={{fn @triggerFiltering "name"}}
+                class="table-admin-input"
+              />
+            </td>
+            <td>
+              <input
+                id="type"
+                type="text"
+                value={{this.searchedType}}
+                oninput={{fn @triggerFiltering "type"}}
+                class="table-admin-input"
+              />
+            </td>
+            <td>
+              <input
+                id="externalId"
+                type="text"
+                value={{this.searchedExternalId}}
+                oninput={{fn @triggerFiltering "externalId"}}
+                class="table-admin-input"
+              />
+            </td>
+          </tr>
+        </thead>
+
+        {{#if @certificationCenters}}
+          <tbody>
+            {{#each @certificationCenters as |certificationCenter|}}
+              <tr aria-label="Centre de certification {{certificationCenter.name}}">
+                <td class="table__column table__column--id">
+                  <LinkTo @route="authenticated.certification-centers.get" @model={{certificationCenter.id}}>
+                    {{certificationCenter.id}}
+                  </LinkTo>
+                </td>
+                <td>{{certificationCenter.name}}</td>
+                <td>{{certificationCenter.type}}</td>
+                <td>{{certificationCenter.externalId}}</td>
+              </tr>
+            {{/each}}
+          </tbody>
+        {{/if}}
+      </table>
+
+      {{#unless @certificationCenters}}
+        <div class="table__empty">Aucun résultat</div>
+      {{/unless}}
+    </div>
+
+    {{#if @certificationCenters}}
+      <PixPagination @pagination={{@certificationCenters.meta}} />
+    {{/if}}
+  </template>
+}
diff --git a/admin/app/components/certification-centers/list-items.hbs b/admin/app/components/certification-centers/list-items.hbs
deleted file mode 100644
index dc29b10b56a..00000000000
--- a/admin/app/components/certification-centers/list-items.hbs
+++ /dev/null
@@ -1,75 +0,0 @@
-<div class="content-text content-text--small">
-  <table class="table-admin">
-    <thead>
-      <tr>
-        <th class="table__column table__column--id"><label for="id">ID</label></th>
-        <th><label for="name">Nom</label></th>
-        <th><label for="type">Type</label></th>
-        <th><label for="externalId">ID externe</label></th>
-      </tr>
-      <tr>
-        <td class="table__column table__column--id">
-          <input
-            id="id"
-            type="text"
-            value={{this.searchedId}}
-            oninput={{fn @triggerFiltering "id"}}
-            class="table-admin-input"
-          />
-        </td>
-        <td>
-          <input
-            id="name"
-            type="text"
-            value={{this.searchedName}}
-            oninput={{fn @triggerFiltering "name"}}
-            class="table-admin-input"
-          />
-        </td>
-        <td>
-          <input
-            id="type"
-            type="text"
-            value={{this.searchedType}}
-            oninput={{fn @triggerFiltering "type"}}
-            class="table-admin-input"
-          />
-        </td>
-        <td>
-          <input
-            id="externalId"
-            type="text"
-            value={{this.searchedExternalId}}
-            oninput={{fn @triggerFiltering "externalId"}}
-            class="table-admin-input"
-          />
-        </td>
-      </tr>
-    </thead>
-
-    {{#if @certificationCenters}}
-      <tbody>
-        {{#each @certificationCenters as |certificationCenter|}}
-          <tr aria-label="Centre de certification {{certificationCenter.name}}">
-            <td class="table__column table__column--id">
-              <LinkTo @route="authenticated.certification-centers.get" @model={{certificationCenter.id}}>
-                {{certificationCenter.id}}
-              </LinkTo>
-            </td>
-            <td>{{certificationCenter.name}}</td>
-            <td>{{certificationCenter.type}}</td>
-            <td>{{certificationCenter.externalId}}</td>
-          </tr>
-        {{/each}}
-      </tbody>
-    {{/if}}
-  </table>
-
-  {{#unless @certificationCenters}}
-    <div class="table__empty">Aucun résultat</div>
-  {{/unless}}
-</div>
-
-{{#if @certificationCenters}}
-  <PixPagination @pagination={{@certificationCenters.meta}} />
-{{/if}}
\ No newline at end of file
diff --git a/admin/app/components/certification-centers/list-items.js b/admin/app/components/certification-centers/list-items.js
deleted file mode 100644
index 2e3d6d47d93..00000000000
--- a/admin/app/components/certification-centers/list-items.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import Component from '@glimmer/component';
-
-export default class CertificationCenterListItems extends Component {
-  searchedId = this.args.id;
-  searchedName = this.args.name;
-  searchedType = this.args.type;
-  searchedExternalId = this.args.externalId;
-}
diff --git a/admin/app/styles/components/member-item.scss b/admin/app/components/certification-centers/member-item.scss
similarity index 100%
rename from admin/app/styles/components/member-item.scss
rename to admin/app/components/certification-centers/member-item.scss
diff --git a/admin/app/components/certification-centers/membership-item-actions.gjs b/admin/app/components/certification-centers/membership-item-actions.gjs
new file mode 100644
index 00000000000..cd29c3aac13
--- /dev/null
+++ b/admin/app/components/certification-centers/membership-item-actions.gjs
@@ -0,0 +1,41 @@
+import PixButton from '@1024pix/pix-ui/components/pix-button';
+import { t } from 'ember-intl';
+
+<template>
+  <div class="membership-item-actions">
+    {{#if @isEditionMode}}
+      <PixButton class="member-item-actions__button" @size="small" @triggerAction={{@onSaveRoleButtonClicked}}>
+        {{t "common.actions.save"}}
+      </PixButton>
+
+      <PixButton
+        class="member-item-actions__button"
+        @variant="secondary"
+        @size="small"
+        @triggerAction={{@onCancelButtonClicked}}
+      >
+        {{t "common.actions.cancel"}}
+      </PixButton>
+    {{else}}
+      <PixButton
+        @size="small"
+        class="member-item-actions__button"
+        aria-label="Modifier le rôle"
+        @iconBefore="pen-to-square"
+        @triggerAction={{@onModifyRoleButtonClicked}}
+      >
+        {{t "components.certification-centers.membership-item.actions.edit-role"}}
+      </PixButton>
+
+      <PixButton
+        @size="small"
+        @variant="error"
+        @triggerAction={{@onDeactivateMembershipButtonClicked}}
+        class="member-item-actions__button"
+        @iconBefore="trash"
+      >
+        {{t "common.actions.deactivate"}}
+      </PixButton>
+    {{/if}}
+  </div>
+</template>
diff --git a/admin/app/components/certification-centers/membership-item-actions.hbs b/admin/app/components/certification-centers/membership-item-actions.hbs
deleted file mode 100644
index b0afbb50d6b..00000000000
--- a/admin/app/components/certification-centers/membership-item-actions.hbs
+++ /dev/null
@@ -1,36 +0,0 @@
-<div class="membership-item-actions">
-  {{#if @isEditionMode}}
-    <PixButton class="member-item-actions__button" @size="small" @triggerAction={{@onSaveRoleButtonClicked}}>
-      {{t "common.actions.save"}}
-    </PixButton>
-
-    <PixButton
-      class="member-item-actions__button"
-      @variant="secondary"
-      @size="small"
-      @triggerAction={{@onCancelButtonClicked}}
-    >
-      {{t "common.actions.cancel"}}
-    </PixButton>
-  {{else}}
-    <PixButton
-      @size="small"
-      class="member-item-actions__button"
-      aria-label="Modifier le rôle"
-      @iconBefore="pen-to-square"
-      @triggerAction={{@onModifyRoleButtonClicked}}
-    >
-      {{t "components.certification-centers.membership-item.actions.edit-role"}}
-    </PixButton>
-
-    <PixButton
-      @size="small"
-      @variant="error"
-      @triggerAction={{@onDeactivateMembershipButtonClicked}}
-      class="member-item-actions__button"
-      @iconBefore="trash"
-    >
-      {{t "common.actions.deactivate"}}
-    </PixButton>
-  {{/if}}
-</div>
\ No newline at end of file
diff --git a/admin/app/components/certification-centers/membership-item-role.gjs b/admin/app/components/certification-centers/membership-item-role.gjs
new file mode 100644
index 00000000000..0a8a3030398
--- /dev/null
+++ b/admin/app/components/certification-centers/membership-item-role.gjs
@@ -0,0 +1,31 @@
+import PixSelect from '@1024pix/pix-ui/components/pix-select';
+import { service } from '@ember/service';
+import Component from '@glimmer/component';
+import { t } from 'ember-intl';
+
+export default class CertificationCentersMembershipItemRoleComponent extends Component {
+  @service intl;
+
+  get certificationCenterRoles() {
+    return [
+      { value: 'ADMIN', label: this.intl.t('common.roles.admin') },
+      { value: 'MEMBER', label: this.intl.t('common.roles.member') },
+    ];
+  }
+
+  <template>
+    {{#if @isEditionMode}}
+      <PixSelect
+        @onChange={{@onRoleSelected}}
+        @value={{@role}}
+        @screenReaderOnly={{true}}
+        @options={{this.certificationCenterRoles}}
+      >
+        <:label>{{t "components.certification-centers.membership-item-role.select-role"}}</:label>
+        <:default as |certificationCenterRole|>{{certificationCenterRole.label}}</:default>
+      </PixSelect>
+    {{else}}
+      {{t @roleLabelKey}}
+    {{/if}}
+  </template>
+}
diff --git a/admin/app/components/certification-centers/membership-item-role.hbs b/admin/app/components/certification-centers/membership-item-role.hbs
deleted file mode 100644
index c0f056c43d3..00000000000
--- a/admin/app/components/certification-centers/membership-item-role.hbs
+++ /dev/null
@@ -1,13 +0,0 @@
-{{#if @isEditionMode}}
-  <PixSelect
-    @onChange={{@onRoleSelected}}
-    @value={{@role}}
-    @screenReaderOnly={{true}}
-    @options={{this.certificationCenterRoles}}
-  >
-    <:label>{{t "components.certification-centers.membership-item-role.select-role"}}</:label>
-    <:default as |certificationCenterRole|>{{certificationCenterRole.label}}</:default>
-  </PixSelect>
-{{else}}
-  {{t @roleLabelKey}}
-{{/if}}
\ No newline at end of file
diff --git a/admin/app/components/certification-centers/membership-item-role.js b/admin/app/components/certification-centers/membership-item-role.js
deleted file mode 100644
index 1f98fd491de..00000000000
--- a/admin/app/components/certification-centers/membership-item-role.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { service } from '@ember/service';
-import Component from '@glimmer/component';
-
-export default class CertificationCentersMembershipItemRoleComponent extends Component {
-  @service intl;
-
-  get certificationCenterRoles() {
-    return [
-      { value: 'ADMIN', label: this.intl.t('common.roles.admin') },
-      { value: 'MEMBER', label: this.intl.t('common.roles.member') },
-    ];
-  }
-}
diff --git a/admin/app/components/certification-centers/membership-item.gjs b/admin/app/components/certification-centers/membership-item.gjs
new file mode 100644
index 00000000000..83bdf5e3f62
--- /dev/null
+++ b/admin/app/components/certification-centers/membership-item.gjs
@@ -0,0 +1,82 @@
+import { fn } from '@ember/helper';
+import { action } from '@ember/object';
+import { LinkTo } from '@ember/routing';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import dayjsFormat from 'ember-dayjs/helpers/dayjs-format';
+
+import MembershipItemActions from './membership-item-actions';
+import MembershipItemRole from './membership-item-role';
+
+export default class CertificationCentersMembershipItemComponent extends Component {
+  @tracked isEditionMode = false;
+
+  @action
+  editMembershipRole() {
+    this.isEditionMode = true;
+  }
+
+  @action
+  saveMembershipRole() {
+    this.isEditionMode = false;
+    this.args.onCertificationCenterMembershipRoleChange(this.args.certificationCenterMembership);
+  }
+
+  @action
+  cancelMembershipRoleEditing() {
+    const changedAttributes = this.args.certificationCenterMembership.changedAttributes();
+    // hack to fix EmberData behaviour in integration testing
+    const certificationCenterMembershipAttributesHaveChanged = changedAttributes.length && !!changedAttributes[0];
+    const shouldRollbackCertificationCenterMembershipAttributes =
+      this.args.certificationCenterMembership.hasDirtyAttributes && certificationCenterMembershipAttributesHaveChanged;
+
+    if (shouldRollbackCertificationCenterMembershipAttributes) {
+      this.args.certificationCenterMembership.rollbackAttributes();
+    }
+
+    this.isEditionMode = false;
+  }
+
+  @action
+  onRoleSelected(role) {
+    this.args.certificationCenterMembership.role = role;
+  }
+
+  <template>
+    <tr
+      aria-label="Informations du membre {{@certificationCenterMembership.user.firstName}} {{@certificationCenterMembership.user.lastName}}"
+    >
+      <td>
+        <LinkTo @route="authenticated.users.get" @model={{@certificationCenterMembership.user.id}}>
+          {{@certificationCenterMembership.user.id}}
+        </LinkTo>
+      </td>
+      <td class="member-information">{{@certificationCenterMembership.user.firstName}}</td>
+      <td class="member-information">{{@certificationCenterMembership.user.lastName}}</td>
+      <td class="member-information">{{@certificationCenterMembership.user.email}}</td>
+      <td class="member-information">
+        <MembershipItemRole
+          @isEditionMode={{this.isEditionMode}}
+          @role={{@certificationCenterMembership.role}}
+          @roleLabelKey={{@certificationCenterMembership.roleLabelKey}}
+          @onRoleSelected={{this.onRoleSelected}}
+        />
+      </td>
+      <td>
+        {{dayjsFormat @certificationCenterMembership.createdAt "DD-MM-YYYY - HH:mm:ss"}}
+      </td>
+      <td>
+        <MembershipItemActions
+          @isEditionMode={{this.isEditionMode}}
+          @onDeactivateMembershipButtonClicked={{fn
+            @disableCertificationCenterMembership
+            @certificationCenterMembership
+          }}
+          @onModifyRoleButtonClicked={{this.editMembershipRole}}
+          @onSaveRoleButtonClicked={{this.saveMembershipRole}}
+          @onCancelButtonClicked={{this.cancelMembershipRoleEditing}}
+        />
+      </td>
+    </tr>
+  </template>
+}
diff --git a/admin/app/components/certification-centers/membership-item.hbs b/admin/app/components/certification-centers/membership-item.hbs
deleted file mode 100644
index 88cd8fa1884..00000000000
--- a/admin/app/components/certification-centers/membership-item.hbs
+++ /dev/null
@@ -1,32 +0,0 @@
-<tr
-  aria-label="Informations du membre {{@certificationCenterMembership.user.firstName}} {{@certificationCenterMembership.user.lastName}}"
->
-  <td>
-    <LinkTo @route="authenticated.users.get" @model={{@certificationCenterMembership.user.id}}>
-      {{@certificationCenterMembership.user.id}}
-    </LinkTo>
-  </td>
-  <td class="member-information">{{@certificationCenterMembership.user.firstName}}</td>
-  <td class="member-information">{{@certificationCenterMembership.user.lastName}}</td>
-  <td class="member-information">{{@certificationCenterMembership.user.email}}</td>
-  <td class="member-information">
-    <CertificationCenters::MembershipItemRole
-      @isEditionMode={{this.isEditionMode}}
-      @role={{@certificationCenterMembership.role}}
-      @roleLabelKey={{@certificationCenterMembership.roleLabelKey}}
-      @onRoleSelected={{this.onRoleSelected}}
-    />
-  </td>
-  <td>
-    {{dayjs-format @certificationCenterMembership.createdAt "DD-MM-YYYY - HH:mm:ss"}}
-  </td>
-  <td>
-    <CertificationCenters::MembershipItemActions
-      @isEditionMode={{this.isEditionMode}}
-      @onDeactivateMembershipButtonClicked={{fn @disableCertificationCenterMembership @certificationCenterMembership}}
-      @onModifyRoleButtonClicked={{this.editMembershipRole}}
-      @onSaveRoleButtonClicked={{this.saveMembershipRole}}
-      @onCancelButtonClicked={{this.cancelMembershipRoleEditing}}
-    />
-  </td>
-</tr>
\ No newline at end of file
diff --git a/admin/app/components/certification-centers/membership-item.js b/admin/app/components/certification-centers/membership-item.js
deleted file mode 100644
index 8f2959741ad..00000000000
--- a/admin/app/components/certification-centers/membership-item.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { action } from '@ember/object';
-import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
-
-export default class CertificationCentersMembershipItemComponent extends Component {
-  @tracked isEditionMode = false;
-
-  @action
-  editMembershipRole() {
-    this.isEditionMode = true;
-  }
-
-  @action
-  saveMembershipRole() {
-    this.isEditionMode = false;
-    this.args.onCertificationCenterMembershipRoleChange(this.args.certificationCenterMembership);
-  }
-
-  @action
-  cancelMembershipRoleEditing() {
-    const changedAttributes = this.args.certificationCenterMembership.changedAttributes();
-    // hack to fix EmberData behaviour in integration testing
-    const certificationCenterMembershipAttributesHaveChanged = changedAttributes.length && !!changedAttributes[0];
-    const shouldRollbackCertificationCenterMembershipAttributes =
-      this.args.certificationCenterMembership.hasDirtyAttributes && certificationCenterMembershipAttributesHaveChanged;
-
-    if (shouldRollbackCertificationCenterMembershipAttributes) {
-      this.args.certificationCenterMembership.rollbackAttributes();
-    }
-
-    this.isEditionMode = false;
-  }
-
-  @action
-  onRoleSelected(role) {
-    this.args.certificationCenterMembership.role = role;
-  }
-}
diff --git a/admin/app/styles/components/certification-centers/membership-item.scss b/admin/app/components/certification-centers/membership-item.scss
similarity index 100%
rename from admin/app/styles/components/certification-centers/membership-item.scss
rename to admin/app/components/certification-centers/membership-item.scss
diff --git a/admin/app/components/certification-centers/memberships-section.gjs b/admin/app/components/certification-centers/memberships-section.gjs
new file mode 100644
index 00000000000..4a048d44d6b
--- /dev/null
+++ b/admin/app/components/certification-centers/memberships-section.gjs
@@ -0,0 +1,44 @@
+import MembershipItem from './membership-item';
+
+<template>
+  <section class="page-section">
+
+    <header class="page-section__header">
+      <h2 class="page-section__title">Membres</h2>
+    </header>
+
+    <div class="content-text content-text--small">
+      <div class="table-admin">
+        <table>
+          <thead>
+            <tr>
+              <th class="table__column table__column--id">ID Utilisateur</th>
+              <th class="table__column table__column--wide">Prénom</th>
+              <th class="table__column table__column--wide">Nom</th>
+              <th class="table__column table__column--wide">Adresse e-mail</th>
+              <th class="table__column table__column--wide">Rôle</th>
+              <th class="table__column table__column--wide">Date de rattachement</th>
+              <th class="table__column table__column--wide">Actions</th>
+            </tr>
+          </thead>
+
+          {{#if @certificationCenterMemberships}}
+            <tbody>
+              {{#each @certificationCenterMemberships as |certificationCenterMembership|}}
+                <MembershipItem
+                  @certificationCenterMembership={{certificationCenterMembership}}
+                  @disableCertificationCenterMembership={{@disableCertificationCenterMembership}}
+                  @onCertificationCenterMembershipRoleChange={{@onCertificationCenterMembershipRoleChange}}
+                />
+              {{/each}}
+            </tbody>
+          {{/if}}
+        </table>
+
+        {{#unless @certificationCenterMemberships}}
+          <div class="table__empty">Aucun résultat</div>
+        {{/unless}}
+      </div>
+    </div>
+  </section>
+</template>
diff --git a/admin/app/components/certification-centers/memberships-section.hbs b/admin/app/components/certification-centers/memberships-section.hbs
deleted file mode 100644
index 35e4fc775a4..00000000000
--- a/admin/app/components/certification-centers/memberships-section.hbs
+++ /dev/null
@@ -1,40 +0,0 @@
-<section class="page-section">
-
-  <header class="page-section__header">
-    <h2 class="page-section__title">Membres</h2>
-  </header>
-
-  <div class="content-text content-text--small">
-    <div class="table-admin">
-      <table>
-        <thead>
-          <tr>
-            <th class="table__column table__column--id">ID Utilisateur</th>
-            <th class="table__column table__column--wide">Prénom</th>
-            <th class="table__column table__column--wide">Nom</th>
-            <th class="table__column table__column--wide">Adresse e-mail</th>
-            <th class="table__column table__column--wide">Rôle</th>
-            <th class="table__column table__column--wide">Date de rattachement</th>
-            <th class="table__column table__column--wide">Actions</th>
-          </tr>
-        </thead>
-
-        {{#if @certificationCenterMemberships}}
-          <tbody>
-            {{#each @certificationCenterMemberships as |certificationCenterMembership|}}
-              <CertificationCenters::MembershipItem
-                @certificationCenterMembership={{certificationCenterMembership}}
-                @disableCertificationCenterMembership={{@disableCertificationCenterMembership}}
-                @onCertificationCenterMembershipRoleChange={{@onCertificationCenterMembershipRoleChange}}
-              />
-            {{/each}}
-          </tbody>
-        {{/if}}
-      </table>
-
-      {{#unless @certificationCenterMemberships}}
-        <div class="table__empty">Aucun résultat</div>
-      {{/unless}}
-    </div>
-  </div>
-</section>
\ No newline at end of file
diff --git a/admin/app/styles/app.scss b/admin/app/styles/app.scss
index 9220b498b80..36be6f30258 100644
--- a/admin/app/styles/app.scss
+++ b/admin/app/styles/app.scss
@@ -40,11 +40,7 @@
 @import 'components/campaigns/participations-section';
 @import 'components/campaigns/update';
 @import 'components/card';
-@import 'components/certification-center-form';
 @import 'components/certification-center-invitations';
-@import 'components/certification-centers/information';
-@import 'components/certification-centers/invitations-action';
-@import 'components/certification-centers/membership-item';
 @import 'components/certification-details-answer';
 @import 'components/certification-details-competence';
 @import 'components/certification-info-field';
@@ -65,7 +61,6 @@
 @import 'components/complementary-certifications/search-bar';
 @import 'components/complementary-certifications/selected-target-profile';
 @import 'components/confirm-popup';
-@import 'components/member-item';
 @import 'components/menu-bar';
 @import 'components/organization-information-section';
 @import 'components/organization-invitations';
@@ -104,9 +99,15 @@
 @import 'components/trainings/training-triggers-tab';
 @import 'components/ui';
 @import 'components/users/authentication-method';
-@import 'components/users/membership-item';
 @import 'components/users/organization-learners-table';
 @import 'components/users/user-overview';
 @import 'components/users/user-profile';
 @import 'display/footer-modal';
 @import 'flatpickr';
+
+/* App/Components */
+@import 'certification-centers/certification-center-form';
+@import 'certification-centers/information';
+@import 'certification-centers/member-item';
+@import 'certification-centers/membership-item';
+@import 'certification-centers/invitations-action';
diff --git a/admin/ember-cli-build.js b/admin/ember-cli-build.js
index 803e4e44e87..e63a06a1b97 100644
--- a/admin/ember-cli-build.js
+++ b/admin/ember-cli-build.js
@@ -11,7 +11,7 @@ const sourceMapConfig = {
 module.exports = function (defaults) {
   const app = new EmberApp(defaults, {
     sassOptions: {
-      includePaths: ['node_modules/@1024pix/pix-ui/addon/styles', 'node_modules/flatpickr/dist'],
+      includePaths: ['node_modules/@1024pix/pix-ui/addon/styles', 'node_modules/flatpickr/dist', 'app/components'],
     },
     'ember-simple-auth': {
       useSessionSetupMethod: true,
diff --git a/admin/tests/integration/components/certification-centers/creation-form-test.js b/admin/tests/integration/components/certification-centers/creation-form-test.gjs
similarity index 54%
rename from admin/tests/integration/components/certification-centers/creation-form-test.js
rename to admin/tests/integration/components/certification-centers/creation-form-test.gjs
index a7413bc38c7..e0ee6ba4640 100644
--- a/admin/tests/integration/components/certification-centers/creation-form-test.js
+++ b/admin/tests/integration/components/certification-centers/creation-form-test.gjs
@@ -1,6 +1,6 @@
 import { fillByLabel, render } from '@1024pix/ember-testing-library';
 import { click } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
+import CreationForm from 'pix-admin/components/certification-centers/creation-form';
 import { module, test } from 'qunit';
 
 import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
@@ -10,17 +10,15 @@ module('Integration | Component | certification-centers/creation-form', function
 
   test('it renders the new certification center form component', async function (assert) {
     // given
-    this.onSubmit = () => {};
-    this.onCancel = () => {};
-    this.certificationCenter = {};
+    const onSubmit = () => {};
+    const onCancel = () => {};
+    const certificationCenter = {};
 
     // when
     const screen = await render(
-      hbs`<CertificationCenters::CreationForm
-  @certificationCenter={{this.certificationCenter}}
-  @onSubmit={{this.onSubmit}}
-  @onCancel={{this.onCancel}}
-/>`,
+      <template>
+        <CreationForm @certificationCenter={{certificationCenter}} @onSubmit={{onSubmit}} @onCancel={{onCancel}} />
+      </template>,
     );
 
     // then
@@ -42,17 +40,20 @@ module('Integration | Component | certification-centers/creation-form', function
     test('should add isV3Pilot to certification center on checked checkbox', async function (assert) {
       // given
       const store = this.owner.lookup('service:store');
-      this.certificationCenter = store.createRecord('certification-center');
-      this.habilitations = [];
-      this.stub = () => {};
+      const certificationCenter = store.createRecord('certification-center');
+      const habilitations = [];
+      const onSubmit = () => {};
+      const onCancel = () => {};
 
       const screen = await render(
-        hbs`<CertificationCenters::CreationForm
-  @certificationCenter={{this.certificationCenter}}
-  @habilitations={{this.habilitations}}
-  @onSubmit={{this.stub}}
-  @onCancel={{this.stub}}
-/>`,
+        <template>
+          <CreationForm
+            @habilitations={{habilitations}}
+            @certificationCenter={{certificationCenter}}
+            @onSubmit={{onSubmit}}
+            @onCancel={{onCancel}}
+          />
+        </template>,
       );
 
       // when
@@ -63,22 +64,27 @@ module('Integration | Component | certification-centers/creation-form', function
       );
 
       // then
-      assert.true(this.certificationCenter.isV3Pilot);
+      assert.true(certificationCenter.isV3Pilot);
     });
   });
 
   module('#selectCertificationCenterType', function () {
     test('should update attribute certificationCenter.type', async function (assert) {
       // given
-      this.onSubmit = () => {};
-      this.onCancel = () => {};
-      this.certificationCenter = {};
+      const certificationCenter = {};
+      const habilitations = [];
+      const onSubmit = () => {};
+      const onCancel = () => {};
+
       const screen = await render(
-        hbs`<CertificationCenters::CreationForm
-  @certificationCenter={{this.certificationCenter}}
-  @onSubmit={{this.onSubmit}}
-  @onCancel={{this.onCancel}}
-/>`,
+        <template>
+          <CreationForm
+            @habilitations={{habilitations}}
+            @certificationCenter={{certificationCenter}}
+            @onSubmit={{onSubmit}}
+            @onCancel={{onCancel}}
+          />
+        </template>,
       );
 
       // when
@@ -87,7 +93,7 @@ module('Integration | Component | certification-centers/creation-form', function
       await click(screen.getByRole('option', { name: 'Établissement scolaire' }));
 
       // then
-      assert.strictEqual(this.certificationCenter.type, 'SCO');
+      assert.strictEqual(certificationCenter.type, 'SCO');
     });
   });
 
@@ -97,25 +103,28 @@ module('Integration | Component | certification-centers/creation-form', function
       const store = this.owner.lookup('service:store');
       const habilitation1 = store.createRecord('complementary-certification', { key: 'E', label: 'Pix+Edu' });
       const habilitation2 = store.createRecord('complementary-certification', { key: 'S', label: 'Pix+Surf' });
-      this.certificationCenter = store.createRecord('certification-center');
-      this.habilitations = [habilitation1, habilitation2];
-      this.stub = () => {};
+      const certificationCenter = store.createRecord('certification-center');
+      const habilitations = [habilitation1, habilitation2];
+      const onSubmit = () => {};
+      const onCancel = () => {};
 
       const screen = await render(
-        hbs`<CertificationCenters::CreationForm
-  @certificationCenter={{this.certificationCenter}}
-  @habilitations={{this.habilitations}}
-  @onSubmit={{this.stub}}
-  @onCancel={{this.stub}}
-/>`,
+        <template>
+          <CreationForm
+            @habilitations={{habilitations}}
+            @certificationCenter={{certificationCenter}}
+            @onSubmit={{onSubmit}}
+            @onCancel={{onCancel}}
+          />
+        </template>,
       );
 
       // when
       await click(screen.getByRole('checkbox', { name: 'Pix+Surf' }));
 
       // then
-      const habilitations = await this.certificationCenter.habilitations;
-      assert.ok(habilitations.includes(habilitation2));
+      const expectedHabilitations = await certificationCenter.habilitations;
+      assert.ok(expectedHabilitations.includes(habilitation2));
     });
 
     test('should remove habilitation to certification center on unchecked checkbox', async function (assert) {
@@ -123,42 +132,44 @@ module('Integration | Component | certification-centers/creation-form', function
       const store = this.owner.lookup('service:store');
       const habilitation1 = store.createRecord('complementary-certification', { key: 'E', label: 'Pix+Edu' });
       const habilitation2 = store.createRecord('complementary-certification', { key: 'S', label: 'Pix+Surf' });
-      this.certificationCenter = store.createRecord('certification-center', {
+      const certificationCenter = store.createRecord('certification-center', {
         habilitations: [habilitation2],
       });
-      this.habilitations = [habilitation1, habilitation2];
-      this.stub = () => {};
+      const habilitations = [habilitation1, habilitation2];
+      const onSubmit = () => {};
+      const onCancel = () => {};
 
       const screen = await render(
-        hbs`<CertificationCenters::CreationForm
-  @certificationCenter={{this.certificationCenter}}
-  @habilitations={{this.habilitations}}
-  @onSubmit={{this.stub}}
-  @onCancel={{this.stub}}
-/>`,
+        <template>
+          <CreationForm
+            @habilitations={{habilitations}}
+            @certificationCenter={{certificationCenter}}
+            @onSubmit={{onSubmit}}
+            @onCancel={{onCancel}}
+          />
+        </template>,
       );
 
       // when
       await click(screen.getByRole('checkbox', { name: 'Pix+Surf' }));
 
       // then
-      const habilitations = await this.certificationCenter.habilitations;
-      assert.notOk(habilitations.includes(habilitation2));
+      const expectedHabilitations = await certificationCenter.habilitations;
+      assert.notOk(expectedHabilitations.includes(habilitation2));
     });
   });
 
   test('it should be possible to add data protection officer names and email', async function (assert) {
     // given
-    this.onSubmit = () => {};
-    this.onCancel = () => {};
+    const onSubmit = () => {};
+    const onCancel = () => {};
     const store = this.owner.lookup('service:store');
-    this.certificationCenter = store.createRecord('certification-center', { name: 'Super centre' });
+    const certificationCenter = store.createRecord('certification-center', { name: 'Super centre' });
+
     await render(
-      hbs`<CertificationCenters::CreationForm
-  @certificationCenter={{this.certificationCenter}}
-  @onSubmit={{this.onSubmit}}
-  @onCancel={{this.onCancel}}
-/>`,
+      <template>
+        <CreationForm @certificationCenter={{certificationCenter}} @onSubmit={{onSubmit}} @onCancel={{onCancel}} />
+      </template>,
     );
 
     // when
@@ -167,8 +178,8 @@ module('Integration | Component | certification-centers/creation-form', function
     await fillByLabel('Adresse e-mail du DPO', 'jacques.hadis@example.com');
 
     // then
-    assert.strictEqual(this.certificationCenter.dataProtectionOfficerFirstName, 'Jacques');
-    assert.strictEqual(this.certificationCenter.dataProtectionOfficerLastName, 'Hadis');
-    assert.strictEqual(this.certificationCenter.dataProtectionOfficerEmail, 'jacques.hadis@example.com');
+    assert.strictEqual(certificationCenter.dataProtectionOfficerFirstName, 'Jacques');
+    assert.strictEqual(certificationCenter.dataProtectionOfficerLastName, 'Hadis');
+    assert.strictEqual(certificationCenter.dataProtectionOfficerEmail, 'jacques.hadis@example.com');
   });
 });
diff --git a/admin/tests/integration/components/certification-centers/information-view-test.js b/admin/tests/integration/components/certification-centers/information-view-test.gjs
similarity index 81%
rename from admin/tests/integration/components/certification-centers/information-view-test.js
rename to admin/tests/integration/components/certification-centers/information-view-test.gjs
index fc84b09e6bd..7311f0d33d3 100644
--- a/admin/tests/integration/components/certification-centers/information-view-test.js
+++ b/admin/tests/integration/components/certification-centers/information-view-test.gjs
@@ -1,6 +1,6 @@
 import { render } from '@1024pix/ember-testing-library';
 import ArrayProxy from '@ember/array/proxy';
-import { hbs } from 'ember-cli-htmlbars';
+import InformationView from 'pix-admin/components/certification-centers/information-view';
 import { module, test } from 'qunit';
 
 import setupIntlRenderingTest from '../../../helpers/setup-intl-rendering';
@@ -21,7 +21,6 @@ module('Integration | Component | certification-centers/information-view', funct
     // given
     const store = this.owner.lookup('service:store');
     const availableHabilitations = _createEmberDataHabilitations(store);
-    this.availableHabilitations = availableHabilitations;
 
     const certificationCenter = store.createRecord('certification-center', {
       name: 'Centre SCO',
@@ -32,14 +31,15 @@ module('Integration | Component | certification-centers/information-view', funct
       dataProtectionOfficerEmail: 'lucky@example.net',
       habilitations: [availableHabilitations.firstObject],
     });
-    this.certificationCenter = certificationCenter;
 
     // when
     const screen = await render(
-      hbs`<CertificationCenters::InformationView
-  @availableHabilitations={{this.availableHabilitations}}
-  @certificationCenter={{this.certificationCenter}}
-/>`,
+      <template>
+        <InformationView
+          @availableHabilitations={{availableHabilitations}}
+          @certificationCenter={{certificationCenter}}
+        />
+      </template>,
     );
 
     // then
@@ -57,16 +57,14 @@ module('Integration | Component | certification-centers/information-view', funct
   test('it should show button to direct user to metabase dashboard', async function (assert) {
     // given
     const store = this.owner.lookup('service:store');
-    this.certificationCenter = store.createRecord('certification-center', {
+    const certificationCenter = store.createRecord('certification-center', {
       name: 'Centre SCO',
       type: 'SCO',
       externalId: 'AX129',
     });
 
     // when
-    const screen = await render(
-      hbs`<CertificationCenters::InformationView @certificationCenter={{this.certificationCenter}} />`,
-    );
+    const screen = await render(<template><InformationView @certificationCenter={{certificationCenter}} /></template>);
 
     // then
     assert.dom(screen.getByText('Tableau de bord')).exists();
@@ -81,11 +79,10 @@ module('Integration | Component | certification-centers/information-view', funct
         type: 'SCO',
         isV3Pilot: true,
       });
-      this.certificationCenter = certificationCenter;
 
       // when
       const screen = await render(
-        hbs`<CertificationCenters::InformationView @certificationCenter={{this.certificationCenter}} />`,
+        <template><InformationView @certificationCenter={{certificationCenter}} /></template>,
       );
 
       // then
@@ -108,11 +105,10 @@ module('Integration | Component | certification-centers/information-view', funct
         type: 'SCO',
         isV3Pilot: false,
       });
-      this.certificationCenter = certificationCenter;
 
       // when
       const screen = await render(
-        hbs`<CertificationCenters::InformationView @certificationCenter={{this.certificationCenter}} />`,
+        <template><InformationView @certificationCenter={{certificationCenter}} /></template>,
       );
 
       // then
@@ -135,11 +131,10 @@ module('Integration | Component | certification-centers/information-view', funct
         type: 'SCO',
         isComplementaryAlonePilot: true,
       });
-      this.certificationCenter = certificationCenter;
 
       // when
       const screen = await render(
-        hbs`<CertificationCenters::InformationView @certificationCenter={{this.certificationCenter}} />`,
+        <template><InformationView @certificationCenter={{certificationCenter}} /></template>,
       );
 
       // then
@@ -164,11 +159,10 @@ module('Integration | Component | certification-centers/information-view', funct
         type: 'SCO',
         isComplementaryAlonePilot: false,
       });
-      this.certificationCenter = certificationCenter;
 
       // when
       const screen = await render(
-        hbs`<CertificationCenters::InformationView @certificationCenter={{this.certificationCenter}} />`,
+        <template><InformationView @certificationCenter={{certificationCenter}} /></template>,
       );
 
       // then
diff --git a/admin/tests/integration/components/certification-centers/invitations-action-test.js b/admin/tests/integration/components/certification-centers/invitations-action-test.gjs
similarity index 74%
rename from admin/tests/integration/components/certification-centers/invitations-action-test.js
rename to admin/tests/integration/components/certification-centers/invitations-action-test.gjs
index 49babf16a13..791309d09a9 100644
--- a/admin/tests/integration/components/certification-centers/invitations-action-test.js
+++ b/admin/tests/integration/components/certification-centers/invitations-action-test.gjs
@@ -1,7 +1,7 @@
 import { render, waitForElementToBeRemoved } from '@1024pix/ember-testing-library';
 import { click } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
 import { setupRenderingTest } from 'ember-qunit';
+import InvitationsAction from 'pix-admin/components/certification-centers/invitations-action';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
 
@@ -14,15 +14,16 @@ module('Integration | Component | certification-center-invitations-action', func
   test('it should create certification-center invitation with default language', async function (assert) {
     // given
     const createInvitationStub = sinon.stub();
-    this.set('createInvitation', createInvitationStub);
-    this.set('noop', () => {});
+    const onChangeUserEmailToInvite = () => {};
 
     // when
     const screen = await render(
-      hbs`<CertificationCenters::InvitationsAction
-  @createInvitation={{this.createInvitation}}
-  @onChangeUserEmailToInvite={{this.noop}}
-/>`,
+      <template>
+        <InvitationsAction
+          @createInvitation={{createInvitationStub}}
+          @onChangeUserEmailToInvite={{onChangeUserEmailToInvite}}
+        />
+      </template>,
     );
     await click(screen.getByRole('button', { name: 'Inviter un membre' }));
 
@@ -33,15 +34,16 @@ module('Integration | Component | certification-center-invitations-action', func
   test('it creates a certification-center invitation with choosen language and choosen role', async function (assert) {
     // given
     const createInvitationStub = sinon.stub();
-    this.set('createInvitation', createInvitationStub);
-    this.set('noop', () => {});
+    const onChangeUserEmailToInvite = () => {};
 
     // when
     const screen = await render(
-      hbs`<CertificationCenters::InvitationsAction
-  @createInvitation={{this.createInvitation}}
-  @onChangeUserEmailToInvite={{this.noop}}
-/>`,
+      <template>
+        <InvitationsAction
+          @createInvitation={{createInvitationStub}}
+          @onChangeUserEmailToInvite={{onChangeUserEmailToInvite}}
+        />
+      </template>,
     );
 
     await click(screen.getByRole('button', { name: 'Choisir la langue de l’email d’invitation' }));
diff --git a/admin/tests/integration/components/certification-centers/invitations-test.js b/admin/tests/integration/components/certification-centers/invitations-test.gjs
similarity index 78%
rename from admin/tests/integration/components/certification-centers/invitations-test.js
rename to admin/tests/integration/components/certification-centers/invitations-test.gjs
index d6024389fbe..771a7eb4c65 100644
--- a/admin/tests/integration/components/certification-centers/invitations-test.js
+++ b/admin/tests/integration/components/certification-centers/invitations-test.gjs
@@ -1,6 +1,6 @@
 import { render } from '@1024pix/ember-testing-library';
-import { hbs } from 'ember-cli-htmlbars';
 import { setupRenderingTest } from 'ember-qunit';
+import Invitations from 'pix-admin/components/certification-centers/invitations';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
 
@@ -10,11 +10,11 @@ module('Integration | Component | Certification Centers | Invitations', function
   module('when there is no certification center invitations', function () {
     test('should show "Aucune invitation en attente"', async function (assert) {
       // given
-      this.certificationCenterInvitations = [];
+      const certificationCenterInvitations = [];
 
       // when
       const screen = await render(
-        hbs`<CertificationCenters::Invitations @certificationCenterInvitations={{this.certificationCenterInvitations}} />`,
+        <template><Invitations @certificationCenterInvitations={{certificationCenterInvitations}} /></template>,
       );
 
       // then
@@ -38,15 +38,17 @@ module('Integration | Component | Certification Centers | Invitations', function
         email: 'alain.finis@example.net',
         updatedAt: invitationUpdatedAt2,
       });
-      this.certificationCenterInvitations = [certificationCenterInvitation1, certificationCenterInvitation2];
-      this.cancelCertificationCenterInvitation = sinon.stub();
+      const certificationCenterInvitations = [certificationCenterInvitation1, certificationCenterInvitation2];
+      const cancelCertificationCenterInvitation = sinon.stub();
 
       // when
       const screen = await render(
-        hbs`<CertificationCenters::Invitations
-  @certificationCenterInvitations={{this.certificationCenterInvitations}}
-  @onCancelCertificationCenterInvitation={{this.cancelCertificationCenterInvitation}}
-/>`,
+        <template>
+          <Invitations
+            @certificationCenterInvitations={{certificationCenterInvitations}}
+            @onCancelCertificationCenterInvitation={{cancelCertificationCenterInvitation}}
+          />
+        </template>,
       );
 
       // then
diff --git a/admin/tests/integration/components/certification-centers/membership-item-actions-test.js b/admin/tests/integration/components/certification-centers/membership-item-actions-test.gjs
similarity index 61%
rename from admin/tests/integration/components/certification-centers/membership-item-actions-test.js
rename to admin/tests/integration/components/certification-centers/membership-item-actions-test.gjs
index ebf5e2bcdbd..442d9f82999 100644
--- a/admin/tests/integration/components/certification-centers/membership-item-actions-test.js
+++ b/admin/tests/integration/components/certification-centers/membership-item-actions-test.gjs
@@ -1,5 +1,5 @@
 import { clickByName, render as renderScreen } from '@1024pix/ember-testing-library';
-import hbs from 'htmlbars-inline-precompile';
+import MembershipItemActions from 'pix-admin/components/certification-centers/membership-item-actions';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
 
@@ -11,11 +11,11 @@ module('Integration | Component |  certification-centers/membership-item-actions
   module('when edition mode is deactivated', function () {
     test('displays 2 buttons, "Modifier le rôle" and "Désactiver"', async function (assert) {
       // given
-      this.set('isEditionMode', false);
+      const isEditionMode = false;
 
       //  when
       const screen = await renderScreen(
-        hbs`<CertificationCenters::MembershipItemActions @isEditionMode={{this.isEditionMode}} />`,
+        <template><MembershipItemActions @isEditionMode={{isEditionMode}} /></template>,
       );
 
       // then
@@ -27,17 +27,18 @@ module('Integration | Component |  certification-centers/membership-item-actions
       test('emits an event without any data', async function (assert) {
         // given
         const onModifyRoleButtonClicked = sinon.stub();
-        this.set('isEditionMode', false);
-        this.set('onModifyRoleButtonClicked', onModifyRoleButtonClicked);
-        this.set('onDeactivateMembershipButtonClicked', sinon.stub());
+        const isEditionMode = false;
+        const onDeactivateMembershipButtonClicked = sinon.stub();
 
         //  when
         await renderScreen(
-          hbs`<CertificationCenters::MembershipItemActions
-  @isEditionMode={{this.isEditionMode}}
-  @onModifyRoleButtonClicked={{this.onModifyRoleButtonClicked}}
-  @onDeactivateMembershipButtonClicked={{this.onDeactivateMembershipButtonClicked}}
-/>`,
+          <template>
+            <MembershipItemActions
+              @isEditionMode={{isEditionMode}}
+              @onModifyRoleButtonClicked={{onModifyRoleButtonClicked}}
+              @onDeactivateMembershipButtonClicked={{onDeactivateMembershipButtonClicked}}
+            />
+          </template>,
         );
         await clickByName('Modifier le rôle');
 
@@ -51,17 +52,18 @@ module('Integration | Component |  certification-centers/membership-item-actions
       test('emits an event without any data', async function (assert) {
         // given
         const onDeactivateMembershipButtonClicked = sinon.stub();
-        this.set('isEditionMode', false);
-        this.set('onModifyRoleButtonClicked', sinon.stub());
-        this.set('onDeactivateMembershipButtonClicked', onDeactivateMembershipButtonClicked);
+        const onModifyRoleButtonClicked = sinon.stub();
+        const isEditionMode = false;
 
         //  when
         await renderScreen(
-          hbs`<CertificationCenters::MembershipItemActions
-  @isEditionMode={{this.isEditionMode}}
-  @onModifyRoleButtonClicked={{this.onModifyRoleButtonClicked}}
-  @onDeactivateMembershipButtonClicked={{this.onDeactivateMembershipButtonClicked}}
-/>`,
+          <template>
+            <MembershipItemActions
+              @isEditionMode={{isEditionMode}}
+              @onModifyRoleButtonClicked={{onModifyRoleButtonClicked}}
+              @onDeactivateMembershipButtonClicked={{onDeactivateMembershipButtonClicked}}
+            />
+          </template>,
         );
         await clickByName('Désactiver');
 
@@ -75,11 +77,11 @@ module('Integration | Component |  certification-centers/membership-item-actions
   module('when edition mode is activated', function () {
     test('displays 2 buttons, "Enregistrer" and "Annuler"', async function (assert) {
       // given
-      this.set('isEditionMode', true);
+      const isEditionMode = true;
 
       //  when
       const screen = await renderScreen(
-        hbs`<CertificationCenters::MembershipItemActions @isEditionMode={{this.isEditionMode}} />`,
+        <template><MembershipItemActions @isEditionMode={{isEditionMode}} /></template>,
       );
 
       // then
@@ -93,17 +95,18 @@ module('Integration | Component |  certification-centers/membership-item-actions
       test('emits an event without any data', async function (assert) {
         // given
         const onSaveRoleButtonClicked = sinon.stub();
-        this.set('isEditionMode', true);
-        this.set('onSaveRoleButtonClicked', onSaveRoleButtonClicked);
-        this.set('onCancelButtonClicked', sinon.stub());
+        const onCancelButtonClicked = sinon.stub();
+        const isEditionMode = true;
 
         //  when
         await renderScreen(
-          hbs`<CertificationCenters::MembershipItemActions
-  @isEditionMode={{this.isEditionMode}}
-  @onSaveRoleButtonClicked={{this.onSaveRoleButtonClicked}}
-  @onCancelButtonClicked={{this.onCancelButtonClicked}}
-/>`,
+          <template>
+            <MembershipItemActions
+              @isEditionMode={{isEditionMode}}
+              @onSaveRoleButtonClicked={{onSaveRoleButtonClicked}}
+              @onCancelButtonClicked={{onCancelButtonClicked}}
+            />
+          </template>,
         );
         await clickByName('Enregistrer');
 
@@ -117,17 +120,18 @@ module('Integration | Component |  certification-centers/membership-item-actions
       test('emits an event without any data', async function (assert) {
         // given
         const onCancelButtonClicked = sinon.stub();
-        this.set('isEditionMode', true);
-        this.set('onSaveRoleButtonClicked', sinon.stub());
-        this.set('onCancelButtonClicked', onCancelButtonClicked);
+        const onSaveRoleButtonClicked = sinon.stub();
+        const isEditionMode = true;
 
         //  when
         await renderScreen(
-          hbs`<CertificationCenters::MembershipItemActions
-  @isEditionMode={{this.isEditionMode}}
-  @onSaveRoleButtonClicked={{this.onSaveRoleButtonClicked}}
-  @onCancelButtonClicked={{this.onCancelButtonClicked}}
-/>`,
+          <template>
+            <MembershipItemActions
+              @isEditionMode={{isEditionMode}}
+              @onSaveRoleButtonClicked={{onSaveRoleButtonClicked}}
+              @onCancelButtonClicked={{onCancelButtonClicked}}
+            />
+          </template>,
         );
         await clickByName('Annuler');
 
diff --git a/admin/tests/integration/components/certification-centers/membership-item-role-test.js b/admin/tests/integration/components/certification-centers/membership-item-role-test.gjs
similarity index 64%
rename from admin/tests/integration/components/certification-centers/membership-item-role-test.js
rename to admin/tests/integration/components/certification-centers/membership-item-role-test.gjs
index 75d59179710..46845245187 100644
--- a/admin/tests/integration/components/certification-centers/membership-item-role-test.js
+++ b/admin/tests/integration/components/certification-centers/membership-item-role-test.gjs
@@ -1,6 +1,6 @@
 import { clickByName, render as renderScreen } from '@1024pix/ember-testing-library';
 import { click } from '@ember/test-helpers';
-import hbs from 'htmlbars-inline-precompile';
+import MembershipItemRole from 'pix-admin/components/certification-centers/membership-item-role';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
 
@@ -12,12 +12,12 @@ module('Integration | Component |  certification-centers/membership-item-role',
   module('when the component is not in edition mode', function () {
     test('displays the translated value for given role', async function (assert) {
       // given
-      this.set('isEditionMode', false);
-      this.set('roleLabelKey', 'components.memberships-section.roles.member');
+      const isEditionMode = false;
+      const roleLabelKey = 'components.memberships-section.roles.member';
 
       //  when
       const screen = await renderScreen(
-        hbs`<CertificationCenters::MembershipItemRole @isEditionMode={{this.isEditionMode}} @roleLabelKey={{this.roleLabelKey}} />`,
+        <template><MembershipItemRole @isEditionMode={{isEditionMode}} @roleLabelKey={{roleLabelKey}} /></template>,
       );
 
       // then
@@ -28,17 +28,15 @@ module('Integration | Component |  certification-centers/membership-item-role',
   module('when the component is in edition mode', function () {
     test('displays role selection input', async function (assert) {
       // given
-      this.set('isEditionMode', true);
-      this.set('role', 'MEMBER');
-      this.set('onRoleSelected', sinon.stub());
+      const isEditionMode = true;
+      const role = 'MEMBER';
+      const onRoleSelected = sinon.stub();
 
       //  when
       const screen = await renderScreen(
-        hbs`<CertificationCenters::MembershipItemRole
-  @isEditionMode={{this.isEditionMode}}
-  @role={{this.role}}
-  @onRoleSelected={{this.onRoleSelected}}
-/>`,
+        <template>
+          <MembershipItemRole @isEditionMode={{isEditionMode}} @role={{role}} @onRoleSelected={{onRoleSelected}} />
+        </template>,
       );
 
       // then
@@ -48,17 +46,15 @@ module('Integration | Component |  certification-centers/membership-item-role',
     module('when user click on role selection input', function () {
       test('displays a list of roles', async function (assert) {
         // given
-        this.set('isEditionMode', true);
-        this.set('role', 'MEMBER');
-        this.set('onRoleSelected', sinon.stub());
+        const isEditionMode = true;
+        const role = 'MEMBER';
+        const onRoleSelected = sinon.stub();
 
         //  when
         const screen = await renderScreen(
-          hbs`<CertificationCenters::MembershipItemRole
-  @isEditionMode={{this.isEditionMode}}
-  @role={{this.role}}
-  @onRoleSelected={{this.onRoleSelected}}
-/>`,
+          <template>
+            <MembershipItemRole @isEditionMode={{isEditionMode}} @role={{role}} @onRoleSelected={{onRoleSelected}} />
+          </template>,
         );
         await clickByName('Sélectionner un rôle');
         await screen.findByRole('listbox');
@@ -72,17 +68,14 @@ module('Integration | Component |  certification-centers/membership-item-role',
         test('emits an event with the new role', async function (assert) {
           // given
           const onRoleSelected = sinon.stub();
-          this.set('isEditionMode', true);
-          this.set('role', 'MEMBER');
-          this.set('onRoleSelected', onRoleSelected);
+          const isEditionMode = true;
+          const role = 'MEMBER';
 
           //  when
           const screen = await renderScreen(
-            hbs`<CertificationCenters::MembershipItemRole
-  @isEditionMode={{this.isEditionMode}}
-  @role={{this.role}}
-  @onRoleSelected={{this.onRoleSelected}}
-/>`,
+            <template>
+              <MembershipItemRole @isEditionMode={{isEditionMode}} @role={{role}} @onRoleSelected={{onRoleSelected}} />
+            </template>,
           );
           await clickByName('Sélectionner un rôle');
           await screen.findByRole('listbox');
diff --git a/admin/tests/integration/components/certification-centers/membership-item-test.js b/admin/tests/integration/components/certification-centers/membership-item-test.gjs
similarity index 78%
rename from admin/tests/integration/components/certification-centers/membership-item-test.js
rename to admin/tests/integration/components/certification-centers/membership-item-test.gjs
index 978dee70520..ebe9fda7ea0 100644
--- a/admin/tests/integration/components/certification-centers/membership-item-test.js
+++ b/admin/tests/integration/components/certification-centers/membership-item-test.gjs
@@ -1,7 +1,7 @@
 import { clickByName, render as renderScreen } from '@1024pix/ember-testing-library';
 import { click } from '@ember/test-helpers';
 import dayjs from 'dayjs';
-import hbs from 'htmlbars-inline-precompile';
+import MembershipItem from 'pix-admin/components/certification-centers/membership-item';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
 
@@ -35,15 +35,16 @@ module('Integration | Component |  certification-centers/membership-item', funct
       createdAt: new Date('2023-09-13T10:47:07Z'),
     });
 
-    this.set('certificationCenterMembership', certificationCenterMembership);
-    this.set('disableCertificationCenterMembership', sinon.stub());
+    const disableCertificationCenterMembership = sinon.stub();
 
     //  when
     const screen = await renderScreen(
-      hbs`<CertificationCenters::MembershipItem
-  @certificationCenterMembership={{this.certificationCenterMembership}}
-  @disableCertificationCenterMembership={{this.disableCertificationCenterMembership}}
-/>`,
+      <template>
+        <MembershipItem
+          @certificationCenterMembership={{certificationCenterMembership}}
+          @disableCertificationCenterMembership={{disableCertificationCenterMembership}}
+        />
+      </template>,
     );
 
     // then
@@ -77,15 +78,16 @@ module('Integration | Component |  certification-centers/membership-item', funct
         createdAt: new Date('2023-09-13T10:47:07Z'),
       });
 
-      this.set('certificationCenterMembership', certificationCenterMembership);
-      this.set('disableCertificationCenterMembership', sinon.stub());
+      const disableCertificationCenterMembership = sinon.stub();
 
       // when
       const screen = await renderScreen(
-        hbs`<CertificationCenters::MembershipItem
-  @certificationCenterMembership={{this.certificationCenterMembership}}
-  @disableCertificationCenterMembership={{this.disableCertificationCenterMembership}}
-/>`,
+        <template>
+          <MembershipItem
+            @certificationCenterMembership={{certificationCenterMembership}}
+            @disableCertificationCenterMembership={{disableCertificationCenterMembership}}
+          />
+        </template>,
       );
       await clickByName('Modifier le rôle');
 
@@ -114,17 +116,17 @@ module('Integration | Component |  certification-centers/membership-item', funct
         });
         const onCertificationCenterMembershipRoleChange = sinon.stub();
 
-        this.set('certificationCenterMembership', certificationCenterMembership);
-        this.set('disableCertificationCenterMembership', sinon.stub());
-        this.set('onCertificationCenterMembershipRoleChange', onCertificationCenterMembershipRoleChange);
+        const disableCertificationCenterMembership = sinon.stub();
 
         // when
         const screen = await renderScreen(
-          hbs`<CertificationCenters::MembershipItem
-  @certificationCenterMembership={{this.certificationCenterMembership}}
-  @disableCertificationCenterMembership={{this.disableCertificationCenterMembership}}
-  @onCertificationCenterMembershipRoleChange={{this.onCertificationCenterMembershipRoleChange}}
-/>`,
+          <template>
+            <MembershipItem
+              @certificationCenterMembership={{certificationCenterMembership}}
+              @disableCertificationCenterMembership={{disableCertificationCenterMembership}}
+              @onCertificationCenterMembershipRoleChange={{onCertificationCenterMembershipRoleChange}}
+            />
+          </template>,
         );
         await clickByName('Modifier le rôle');
         await click(screen.getByRole('button', { name: 'Sélectionner un rôle' }));
@@ -158,15 +160,16 @@ module('Integration | Component |  certification-centers/membership-item', funct
           createdAt: new Date('2023-09-13T10:47:07Z'),
         });
 
-        this.set('certificationCenterMembership', certificationCenterMembership);
-        this.set('disableCertificationCenterMembership', sinon.stub());
+        const disableCertificationCenterMembership = sinon.stub();
 
         // when
         const screen = await renderScreen(
-          hbs`<CertificationCenters::MembershipItem
-  @certificationCenterMembership={{this.certificationCenterMembership}}
-  @disableCertificationCenterMembership={{this.disableCertificationCenterMembership}}
-/>`,
+          <template>
+            <MembershipItem
+              @certificationCenterMembership={{certificationCenterMembership}}
+              @disableCertificationCenterMembership={{disableCertificationCenterMembership}}
+            />
+          </template>,
         );
         await clickByName('Modifier le rôle');
         await clickByName('Annuler');
diff --git a/admin/tests/integration/components/certification-centers/memberships-section-test.js b/admin/tests/integration/components/certification-centers/memberships-section-test.gjs
similarity index 75%
rename from admin/tests/integration/components/certification-centers/memberships-section-test.js
rename to admin/tests/integration/components/certification-centers/memberships-section-test.gjs
index 259c027f88d..f6fab336484 100644
--- a/admin/tests/integration/components/certification-centers/memberships-section-test.js
+++ b/admin/tests/integration/components/certification-centers/memberships-section-test.gjs
@@ -1,5 +1,5 @@
 import { render } from '@1024pix/ember-testing-library';
-import { hbs } from 'ember-cli-htmlbars';
+import MembershipsSection from 'pix-admin/components/certification-centers/memberships-section';
 import { module, test } from 'qunit';
 import sinon from 'sinon';
 
@@ -39,15 +39,16 @@ module('Integration | Component | certification-centers/memberships-section', fu
       createdAt: new Date('2018-02-15T05:06:07Z'),
     });
     const certificationCenterMemberships = [certificationCenterMembership1, certificationCenterMembership2];
-    this.set('certificationCenterMemberships', certificationCenterMemberships);
-    this.set('disableCertificationCenterMembership', sinon.stub());
+    const disableCertificationCenterMembership = sinon.stub();
 
     // when
     const screen = await render(
-      hbs`<CertificationCenters::MembershipsSection
-  @certificationCenterMemberships={{this.certificationCenterMemberships}}
-  @disableCertificationCenterMembership={{this.disableCertificationCenterMembership}}
-/>`,
+      <template>
+        <MembershipsSection
+          @certificationCenterMemberships={{certificationCenterMemberships}}
+          @disableCertificationCenterMembership={{disableCertificationCenterMembership}}
+        />
+      </template>,
     );
 
     // then
@@ -57,13 +58,13 @@ module('Integration | Component | certification-centers/memberships-section', fu
 
   test('it should display a message when there is no membership', async function (assert) {
     // given
-    this.set('disableCertificationCenterMembership', sinon.stub());
+    const disableCertificationCenterMembership = sinon.stub();
 
     // when
     const screen = await render(
-      hbs`<CertificationCenters::MembershipsSection
-  @disableCertificationCenterMembership={{this.disableCertificationCenterMembership}}
-/>`,
+      <template>
+        <MembershipsSection @disableCertificationCenterMembership={{disableCertificationCenterMembership}} />
+      </template>,
     );
 
     // then
diff --git a/admin/tests/unit/components/certification-centers/habilitation-tag/index-test.js b/admin/tests/unit/components/certification-centers/habilitation-tag/index-test.gjs
similarity index 100%
rename from admin/tests/unit/components/certification-centers/habilitation-tag/index-test.js
rename to admin/tests/unit/components/certification-centers/habilitation-tag/index-test.gjs