diff --git a/packages/backend/src/controllers/bo-authentication/email/login.js b/packages/backend/src/controllers/bo-authentication/email/login.js
index 747699ec9..4a30acbad 100644
--- a/packages/backend/src/controllers/bo-authentication/email/login.js
+++ b/packages/backend/src/controllers/bo-authentication/email/login.js
@@ -55,13 +55,6 @@ module.exports = async function login(req, res, next) {
     );
   }
 
-  user.serviceCompetent =
-    user.territoireCode === "FRA"
-      ? "NAT"
-      : /^[0-9]+$/.test(user.territoireCode)
-        ? "DEP"
-        : "REG";
-
   try {
     const accessToken = jwt.sign(buildAccessToken(user), config.tokenSecret, {
       algorithm: "ES512",
diff --git a/packages/backend/src/controllers/bo-user/index.js b/packages/backend/src/controllers/bo-user/index.js
index 9e2ff9133..ef93e3172 100644
--- a/packages/backend/src/controllers/bo-user/index.js
+++ b/packages/backend/src/controllers/bo-user/index.js
@@ -4,5 +4,6 @@ module.exports.getOne = require("./get-one");
 module.exports.getMe = require("./get-me");
 module.exports.create = require("./create");
 module.exports.update = require("./update");
+module.exports.updateMe = require("./update-me");
 module.exports.serviceCompetence = require("./service-competence");
 module.exports.verifyCompetence = require("./service-competence");
diff --git a/packages/backend/src/controllers/bo-user/update-me.js b/packages/backend/src/controllers/bo-user/update-me.js
new file mode 100644
index 000000000..b642171cf
--- /dev/null
+++ b/packages/backend/src/controllers/bo-user/update-me.js
@@ -0,0 +1,37 @@
+const BoUser = require("../../services/BoUser");
+
+const logger = require("../../utils/logger");
+const ValidationAppError = require("../../utils/validation-error");
+
+const BOUserSchema = require("../../schemas/bo-user");
+
+const log = logger(module.filename);
+
+module.exports = async function updateMe(req, res, next) {
+  log.i("IN", req.body);
+  const { id } = req.decoded;
+  let user;
+  if (id) {
+    try {
+      user = await BOUserSchema()
+        .omit(["email", "deleted", "roles", "territoireCode"])
+        .validate(req.body, {
+          abortEarly: false,
+          stripUnknown: true,
+        });
+    } catch (error) {
+      log.w(error);
+      return next(new ValidationAppError(error));
+    }
+    try {
+      await BoUser.updateMe(id, user);
+      return res.status(200).json({ message: "Utilisateur mis à jour" });
+    } catch (error) {
+      log.w("DONE with error");
+      return next(error);
+    }
+  } else
+    return res.status(403).json({
+      message: "Permission refusée. Utilisateur non reconnu",
+    });
+};
diff --git a/packages/backend/src/routes/bo-user.js b/packages/backend/src/routes/bo-user.js
index 23089c5cc..cdce30363 100644
--- a/packages/backend/src/routes/bo-user.js
+++ b/packages/backend/src/routes/bo-user.js
@@ -22,6 +22,8 @@ router.get(
 router.get("/me", BOcheckJWT, BOUserController.getMe);
 // Renvoie les informations liées à l'utilisateur
 router.get("/:userId", BOcheckJWT, BOcheckRoleCompte, BOUserController.getOne);
+// Mise à jour de mes informations
+router.post("/me", BOcheckJWT, BOUserController.updateMe);
 // Création d'un utilisateur
 router.post(
   "/",
diff --git a/packages/backend/src/services/BoUser.js b/packages/backend/src/services/BoUser.js
index d4179fc68..14742ae72 100644
--- a/packages/backend/src/services/BoUser.js
+++ b/packages/backend/src/services/BoUser.js
@@ -209,6 +209,17 @@ ${additionalParamsQuery}
       `,
     [id, nom, prenom, territoireCode],
   ],
+  updateMe: (id, nom, prenom) => [
+    `
+      UPDATE back.users
+      SET
+        nom = $2,
+        prenom = $3
+      WHERE
+        id = $1
+      `,
+    [id, nom, prenom],
+  ],
 };
 
 module.exports.create = async ({
@@ -250,6 +261,27 @@ module.exports.create = async ({
   return { code: "CreationCompte", user };
 };
 
+module.exports.updateMe = async (id, { nom, prenom }) => {
+  log.i("update - IN", { id });
+  if (!id) {
+    throw new AppError("Paramètre manquant ou erroné de patate", {
+      statusCode: 500,
+    });
+  }
+  // Mise à jour du compte en base de données
+  const { rowCount } = await pool.query(...query.updateMe(id, nom, prenom));
+
+  if (rowCount === 0) {
+    log.d("update - DONE - Utilisateur BO inexistant");
+    throw new AppError("Utilisateur déjà inexistant", {
+      name: "UserNotFound",
+    });
+  }
+  log.i("updateMe - DONE");
+  return { code: "MajCompte" };
+};
+
+
 module.exports.update = async (
   id,
   { nom, prenom, roles, territoireCode, deleted },
diff --git a/packages/frontend-bo/src/components/user/Compte.vue b/packages/frontend-bo/src/components/user/Compte.vue
new file mode 100644
index 000000000..ad37c68f3
--- /dev/null
+++ b/packages/frontend-bo/src/components/user/Compte.vue
@@ -0,0 +1,729 @@
+<template>
+  <div class="fr-container">
+    <div>
+      <div>
+        <div
+          v-if="
+            formStatus === formStates.VALIDATED ||
+            formStatus === formStates.SUBMITTED
+          "
+          class="fr-grid-row fr-grid-row--center fr-my-5v fr-col-12"
+        >
+          <DsfrAlert
+            :role="
+              displayType === 'CreationDoneWithSucces' ? 'status' : 'alert'
+            "
+            :title="displayInfos[displayType].title"
+            :description="displayInfos[displayType].description"
+            :type="displayInfos[displayType].type"
+            :closeable="false"
+          />
+        </div>
+        <div v-else>
+          <form>
+            <div class="fr-fieldset fr-grid-row fr-grid-row--center fr-my-5v">
+              <h1
+                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
+              >
+                {{ titreForm }}
+              </h1>
+              <div
+                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
+              >
+                <div class="fr-input-group">
+                  <DsfrInputGroup
+                    :error-message="emailField.errorMessage"
+                    :model-value="emailField.modelValue"
+                    type="text"
+                    label="Adresse courriel"
+                    name="email"
+                    :disabled="formStatus === formStates.EDITION"
+                    :required="true"
+                    :label-visible="true"
+                    placeholder="Veuillez saisir votre email"
+                    :is-valid="emailField.isValid"
+                    @update:model-value="checkValidEmail"
+                  />
+                </div>
+              </div>
+
+              <div
+                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
+              >
+                <div class="fr-input-group">
+                  <DsfrInputGroup
+                    :error-message="nomField.errorMessage"
+                    :model-value="nomField.modelValue"
+                    type="text"
+                    label="Nom"
+                    name="nom"
+                    :disabled="isFormDisabled && !isSameUser"
+                    :required="true"
+                    :label-visible="true"
+                    placeholder=""
+                    hint="Veuillez saisir votre nom d'usage"
+                    :is-valid="nomField.isValid"
+                    @update:model-value="checkValidNom"
+                  />
+                </div>
+              </div>
+              <div
+                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
+              >
+                <div class="fr-input-group">
+                  <DsfrInputGroup
+                    :error-message="prenomField.errorMessage"
+                    :model-value="prenomField.modelValue"
+                    type="text"
+                    label="Prénom"
+                    name="prenom"
+                    :disabled="isFormDisabled && !isSameUser"
+                    :required="true"
+                    :label-visible="true"
+                    hint="Veuillez saisir votre prénom"
+                    placeholder=""
+                    :is-valid="prenomField.isValid"
+                    @update:model-value="checkValidPrenom"
+                  />
+                </div>
+              </div>
+              <div
+                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
+              >
+                <div class="fr-fieldset__element">
+                  <div class="fr-input-group fr-col-12">
+                    <DsfrRadioButtonSet
+                      name="competence"
+                      :disabled="isFormDisabled || isSameUser"
+                      legend="Type de compétence du service"
+                      :required="true"
+                      :model-value="serviceCompetenceField.modelValue"
+                      :options="serviceCompetenceOptions"
+                      :is-valid="serviceCompetenceField.isValid"
+                      :inline="true"
+                      @update:model-value="checkValidServiceCompetence"
+                    />
+                  </div>
+                </div>
+              </div>
+              <div
+                v-if="
+                  !serviceCompetenceField.modelValue ||
+                  serviceCompetenceField.modelValue != 'FRA'
+                "
+                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
+              >
+                <div class="fr-fieldset">
+                  <div class="fr-fieldset__element">
+                    <div class="fr-input-group fr-col-6">
+                      <DsfrSelect
+                        v-if="serviceCompetenceField.modelValue === 'DEP'"
+                        :model-value="territoireField.modelValue"
+                        name="departementTerritoire"
+                        :disabled="isFormDisabled || isSameUser"
+                        label="Département du service"
+                        :required="true"
+                        :options="userDepartements"
+                        :is-valid="territoireField.valid"
+                        @update:model-value="checkValidTerritoire"
+                      />
+
+                      <DsfrSelect
+                        v-if="serviceCompetenceField.modelValue === 'REG'"
+                        :model-value="territoireField.modelValue"
+                        name="regionTerritoire"
+                        :disabled="isFormDisabled || isSameUser"
+                        label="Région du service"
+                        :required="true"
+                        :options="userRegions"
+                        :is-valid="territoireField.valid"
+                        @update:model-value="checkValidTerritoire"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
+              >
+                <DsfrCheckboxSet
+                  name="roleUtilisateurField"
+                  :disabled="isFormDisabled || isSameUser"
+                  legend="Rôle(s) associé(s) à l'utilisateur ?"
+                  :required="true"
+                  :model-value="roleUtilisateurField.modelValue"
+                  :options="roleOptions"
+                  :is-valid="roleUtilisateurField.isValid"
+                  :inline="false"
+                  :error-message="
+                    roleUtilisateurField.roleUtilisateurErrorMessage
+                  "
+                  @update:model-value="checkValidRoleUtilisateur"
+                />
+              </div>
+              <div
+                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
+              >
+                <div v-if="formStatus === formStates.CREATION">
+                  <DsfrButton :disabled="!canSubmit" @click.prevent="post"
+                    >Créer le compte
+                  </DsfrButton>
+                </div>
+                <div v-else>
+                  <div class="fr-fieldset__element">
+                    <DsfrToggleSwitch
+                      id="toggle-valide"
+                      :key="modalOpenCounter"
+                      :label="actifField.modelValue ? 'Activé' : 'Désactivé'"
+                      :model-value="actifField.modelValue"
+                      :disabled="
+                        !usersStore.user.roles.includes('Desactivation') ||
+                        !props.user.editable ||
+                        isSameUser
+                      "
+                      aria-describedby="toggle-valide"
+                      @update:model-value="openModal"
+                    />
+                    <p v-if="!actifField.modelValue && props.user.deleted_date">
+                      Désactivé le
+                      {{ formatDate(props.user.deleted_date, "dd/MM/yyyy") }}
+                    </p>
+                    <p
+                      v-if="usersStore.user.roles.includes('Desactivation')"
+                      id="toggle-valide"
+                      class="fr-hint-text"
+                    >
+                      Compte actif
+                    </p>
+                  </div>
+                  <DsfrButton
+                    v-if="props.user.editable && !isSameUser"
+                    :disabled="!canSubmit"
+                    @click.prevent="update"
+                    >Enregistrer les modifications
+                  </DsfrButton>
+                  <DsfrButton
+                    v-if="isSameUser"
+                    :disabled="!canSubmit"
+                    @click.prevent="updateMe"
+                    >Mettre à jour mes informations
+                  </DsfrButton>
+                  <DsfrButton
+                    v-if="!(props.user.editable || isSameUser)"
+                    @click.prevent="close"
+                    >Fermer
+                  </DsfrButton>
+                </div>
+              </div>
+              <div class="fr-messages-group" aria-live="assertive"></div>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+    <ValidationModal
+      modal-ref="modal-toggle-bo-user-actif"
+      name="modal-toggle-bo-user-actif"
+      :opened="popUpParams != null"
+      :title="
+        actifField.modelValue
+          ? 'Désactivation du compte ?'
+          : 'Activation du compte'
+      "
+      :on-close="closeModal"
+      :on-validate="popUpParams?.cb ?? (() => {})"
+      validation-label="Confirmer"
+    >
+      <p>{{ popUpParams.msg }}</p>
+      <p>Souhaitez vous poursuivre?</p>
+    </ValidationModal>
+  </div>
+</template>
+
+<script setup>
+import { formatDate } from "date-fns/format";
+import { DsfrButton, DsfrToggleSwitch } from "@gouvminint/vue-dsfr";
+import { ValidationModal } from "@vao/shared";
+import { defineProps } from "vue";
+
+const log = logger("pages/comptes/");
+const usersStore = useUserStore();
+
+const props = defineProps({ user: { type: Object, default: null } });
+
+definePageMeta({
+  middleware: ["is-connected", "check-role"],
+  roles: ["Compte"],
+});
+
+const config = useRuntimeConfig();
+
+const regionStore = useRegionStore();
+regionStore.fetch();
+
+const departementStore = useDepartementStore();
+departementStore.fetch();
+
+const userDepartements = computed(() => {
+  if (props.user.territoireCode === "FRA") {
+    return departementStore.departements;
+  }
+  const departementsByRegion = departementStore.departements.filter(
+    (d) => d.region === props.user.territoireCode,
+  );
+  if (departementsByRegion?.length) {
+    return departementsByRegion;
+  }
+  return (
+    departementStore.departements.filter(
+      (d) => d.value === props.user.territoireCode,
+    ) ?? []
+  );
+});
+
+const userRegions = computed(() => {
+  if (usersStore.user.territoireCode === "FRA") {
+    return regionStore.regions;
+  }
+  return (
+    regionStore.regions.filter(
+      (r) => r.value === usersStore.user.territoireCode,
+    ) ?? []
+  );
+});
+
+const roleOptions = [
+  { label: "Accès à la consultation et création de comptes", name: "Compte" },
+  //{ label: "Accès aux contrôles", name: "Controle" },
+  //{ label: "Accès aux agréments", name: "Agrement" },
+  {
+    label: "Accès en lecture aux déclarations de séjour",
+    name: "DemandeSejour_Lecture",
+  },
+  {
+    label: "Accès en lecture/écriture aux déclarations de séjour",
+    name: "DemandeSejour_Ecriture",
+  },
+  {
+    label: "Autorisé à désactiver les comptes",
+    name: "Desactivation",
+  },
+];
+
+const formStates = {
+  CREATION: 1,
+  EDITION: 2,
+  VALIDATED: 3,
+};
+
+let formStatus = ref(formStates.CREATION);
+
+const titreForm = computed(() => {
+  return !props.user?.id
+    ? "Création d'un nouvel utilisateur"
+    : isSameUser.value
+      ? "Modification de mon compte"
+      : props.user?.editable
+        ? "Modification d'un utilisateur"
+        : "Consultation d'un utilisateur";
+});
+
+const isFormDisabled = computed(() => {
+  return (props.user?.id && !props.user?.editable) || !actifField.modelValue;
+});
+
+const isSameUser = computed(() => {
+  return usersStore.user.id == props.user?.id;
+});
+
+let serviceCompetenceOptions = [];
+
+const emailField = reactive({
+  errorMessage: "",
+  modelValue: "",
+  isValid: false,
+});
+
+const nomField = reactive({
+  errorMessage: "",
+  modelValue: null,
+  isValid: false,
+});
+
+const prenomField = reactive({
+  errorMessage: "",
+  modelValue: null,
+  isValid: false,
+});
+
+const serviceCompetenceField = reactive({
+  errorMessage: "",
+  modelValue: null,
+  isValid: false,
+});
+
+const territoireField = reactive({
+  errorMessage: "",
+  modelValue: null,
+  isValid: false,
+});
+
+const roleUtilisateurField = reactive({
+  errorMessage: "",
+  modelValue: [],
+  isValid: false,
+});
+
+const actifField = reactive({
+  errorMessage: "",
+  modelValue: true,
+  isValid: true,
+});
+
+const displayInfos = {
+  CreationDoneWithSucces: {
+    title: "Le compte a été créé avec succès",
+    description:
+      "Un courriel a été envoyé à l'utilisateur afin qu'il procède à la validation de son compte Administration VAO.",
+    type: "success",
+  },
+  UpdateDoneWithSucces: {
+    title: "Le compte a été mis à jour avec succès",
+    description:
+      "Le compte que vous venez de modifier a été enregistré avec succès.",
+    type: "success",
+  },
+  UserAlreadyExists: {
+    title: "Une erreur est survenue",
+    description:
+      "Une erreur est survenue. L'utilisateur que vous tentez de créer existe déjà",
+    type: "error",
+  },
+  UserNotFound: {
+    title: "Utilisateur inexistant",
+    description:
+      "Vous tentez de mettre à jour un utilisateur qui semble avoir été supprimé",
+    type: "error",
+  },
+  UnexpectedError: {
+    title: "Une erreur est survenue",
+    description:
+      "Une erreur est survenue. Si vous pensez que cette adresse mail est déjà utilisée, indiquez à l'utilisateur d'utiliser la fonction “Mot de passe oublié”",
+    type: "error",
+  },
+};
+const displayType = ref("UnexpectedError");
+
+function checkValidEmail(email) {
+  emailField.modelValue = email;
+  emailField.isValid = !email || regex.emailRegex.test(email);
+  emailField.errorMessage =
+    !email || emailField.isValid ? "" : "Cet email semble incorrect";
+}
+
+function checkValidNom(n) {
+  nomField.modelValue = n;
+  nomField.isValid =
+    n !== null &&
+    regex.acceptedCharsRegex.test(n) &&
+    !regex.doubleSpacesRegex.test(n) &&
+    !regex.spaceFollowingDashRegex.test(n) &&
+    !regex.tripleDashRegex.test(n);
+  nomField.errorMessage =
+    !n || nomField.isValid ? "" : "Le nom contient des caractères incorrects";
+}
+
+function checkValidPrenom(p) {
+  prenomField.modelValue = p;
+  prenomField.isValid =
+    p !== null &&
+    regex.acceptedCharsRegex.test(p) &&
+    !regex.doubleSpacesRegex.test(p) &&
+    !regex.spaceFollowingDashRegex.test(p) &&
+    !regex.doubleDashRegex.test(p);
+  prenomField.errorMessage =
+    !p || prenomField.isValid
+      ? ""
+      : "Le prénom contient des caractères incorrects";
+}
+
+function checkValidServiceCompetence(p) {
+  log.d("checkValidServiceCompetence : p = ", p);
+  serviceCompetenceField.modelValue = p;
+  serviceCompetenceField.isValid = p !== null;
+  if (serviceCompetenceField.isValid === true && p === competence.NATIONALE)
+    territoireField.isValid = true;
+  else territoireField.isValid = false;
+  serviceCompetenceField.errorMessage =
+    !p || serviceCompetenceField.isValid
+      ? ""
+      : "La compétence du service doit obligatoirement être sélectionnée";
+}
+
+function checkValidTerritoire(p) {
+  territoireField.modelValue = p;
+  territoireField.isValid = p !== null;
+  territoireField.errorMessage =
+    !p || serviceCompetenceField.modelValue === competence.NATIONALE
+      ? ""
+      : serviceCompetenceField.modelValue === competence.DEPARTEMENTALE
+        ? "Le département du service doit obligatoirement être renseigné"
+        : serviceCompetenceField.modelValue === competence.REGIONALE
+          ? "La région du service doit obligatoirement être renseignée"
+          : "";
+}
+
+function checkValidRoleUtilisateur(p) {
+  roleUtilisateurField.modelValue = p;
+  roleUtilisateurField.isValid = p.length > 0;
+  roleUtilisateurField.errorMessage =
+    !p || roleUtilisateurField.isValid
+      ? ""
+      : "Au moins un rôle doit être affecté à l'utilisateur";
+}
+
+function checkValidDeleted(p) {
+  actifField.modelValue = p;
+  actifField.isValid = true;
+  actifField.errorMessage =
+    !p || actifField.isValid
+      ? ""
+      : "L'activation  doit obligatoirement avoir une valeur";
+}
+
+watch([() => serviceCompetenceField.modelValue], function () {
+  if (serviceCompetenceField.modelValue === competence.NATIONALE)
+    territoireField.modelValue = "FRA";
+  //    else
+  //        territoireField.modelValue = null;
+});
+
+onMounted(async () => {
+  log.i("Mounted - IN");
+  serviceCompetenceOptions = [];
+  if (isFormDisabled.value) {
+    serviceCompetenceOptions.push(serviceCompetenceNAT);
+    serviceCompetenceOptions.push(serviceCompetenceREG);
+  } else {
+    if (usersStore.user.serviceCompetent === competence.NATIONALE)
+      serviceCompetenceOptions.push(serviceCompetenceNAT);
+    if (
+      usersStore.user.serviceCompetent === competence.NATIONALE ||
+      usersStore.user.serviceCompetent === competence.REGIONALE
+    )
+      serviceCompetenceOptions.push(serviceCompetenceREG);
+  }
+  serviceCompetenceOptions.push(serviceCompetenceDEP);
+  // Mode Edition
+  if (props.user?.id) {
+    // Chargement des données utilisateur
+    formStatus = ref(formStates.EDITION);
+
+    // Chargement des données
+    actifField.modelValue = !props.user.deleted;
+    actifField.isValid = true;
+    emailField.modelValue = props.user.email;
+    emailField.isValid = true;
+    nomField.modelValue = props.user.nom;
+    nomField.isValid = true;
+    prenomField.modelValue = props.user.prenom;
+    prenomField.isValid = true;
+    // Sélection du service de compétence
+    if (props.user.territoireCode === "FRA")
+      serviceCompetenceField.modelValue = competence.NATIONALE;
+    else if (props.user.territoireParent === "FRA") {
+      serviceCompetenceField.modelValue = competence.REGIONALE;
+    } else {
+      serviceCompetenceField.modelValue = competence.DEPARTEMENTALE;
+    }
+    serviceCompetenceField.isValid = true;
+    territoireField.modelValue = props.user.territoireCode;
+    territoireField.isValid = true;
+    // Chargement des rôles
+    props.user.roles.forEach((role) => {
+      roleUtilisateurField.modelValue.push(role);
+    });
+    // Suppression du rôle "Autorisé à désactiver les comptes" si l'a pas le droit lui même de le faire
+    if (!usersStore.user.roles.includes("Desactivation")) {
+      roleOptions.pop();
+    }
+    roleUtilisateurField.isValid = true;
+  } else {
+    // Ecran en mode création
+    formStatus = ref(formStates.CREATION);
+    actifField.modelValue = true;
+  }
+});
+
+const canSubmit = computed(() => {
+  return (
+    emailField.isValid &&
+    nomField.isValid &&
+    prenomField.isValid &&
+    roleUtilisateurField.isValid &&
+    serviceCompetenceField.isValid &&
+    territoireField.isValid &&
+    actifField.isValid
+  );
+});
+
+async function post() {
+  formStatus.value = formStates.CREATION;
+
+  log.i("post - IN");
+  try {
+    displayType.value = null;
+    await $fetch(config.public.backendUrl + "/bo-user", {
+      credentials: "include",
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        email: emailField.modelValue,
+        nom: nomField.modelValue,
+        prenom: prenomField.modelValue,
+        roles: roleUtilisateurField.modelValue,
+        territoireCode: territoireField.modelValue,
+        deleted: actifField.modelValue,
+      }),
+    })
+      .then((response) => {
+        displayType.value = "CreationDoneWithSucces";
+        formStatus.value = formStates.VALIDATED;
+        log.d("post", { response });
+      })
+      .catch((error) => {
+        const body = error.data;
+        const codeError = body.name;
+
+        log.w("post", { body, codeError });
+        switch (codeError) {
+          default:
+            displayType.value = codeError;
+            formStatus.value = formStates.VALIDATED;
+            break;
+        }
+        formStatus.value = formStates.SUBMITTED;
+      });
+  } catch (error) {
+    log.w("post", { error });
+    displayType.value = "UnexpectedError";
+    formStatus.value = formStates.SUBMITTED;
+  } finally {
+    log.i("post - DONE");
+  }
+}
+async function close() {
+  navigateTo("/comptes/liste");
+}
+
+async function updateMe() {
+  formStatus.value = formStates.CREATION;
+
+  log.i("updateMe - IN");
+  try {
+    displayType.value = null;
+    await $fetch(config.public.backendUrl + "/bo-user/me", {
+      credentials: "include",
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        nom: nomField.modelValue,
+        prenom: prenomField.modelValue,
+      }),
+    })
+      .then((response) => {
+        displayType.value = "UpdateDoneWithSucces";
+        formStatus.value = formStates.VALIDATED;
+        usersStore.refreshProfile();
+        log.d("updateMe", { response });
+      })
+      .catch((error) => {
+        const body = error.data;
+        const codeError = body.name;
+
+        log.w("updateMe", { body, codeError });
+        switch (codeError) {
+          default:
+            displayType.value = codeError;
+            formStatus.value = formStates.VALIDATED;
+            break;
+        }
+        formStatus.value = formStates.SUBMITTED;
+      });
+  } catch (error) {
+    log.w("updateMe", { error });
+    displayType.value = "UnexpectedError";
+    formStatus.value = formStates.SUBMITTED;
+  } finally {
+    log.i("updateMe - DONE");
+  }
+}
+
+async function update() {
+  formStatus.value = formStates.CREATION;
+
+  log.i("update - IN");
+  try {
+    displayType.value = null;
+    await $fetch(config.public.backendUrl + "/bo-user/" + props.user.id, {
+      credentials: "include",
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        nom: nomField.modelValue,
+        prenom: prenomField.modelValue,
+        roles: roleUtilisateurField.modelValue,
+        territoireCode: territoireField.modelValue,
+        deleted: !actifField.modelValue,
+      }),
+    })
+      .then((response) => {
+        displayType.value = "UpdateDoneWithSucces";
+        formStatus.value = formStates.VALIDATED;
+        log.d("update", { response });
+      })
+      .catch((error) => {
+        const body = error.data;
+        const codeError = body.name;
+
+        log.w("update", { body, codeError });
+        switch (codeError) {
+          default:
+            displayType.value = codeError;
+            formStatus.value = formStates.VALIDATED;
+            break;
+        }
+        formStatus.value = formStates.SUBMITTED;
+      });
+  } catch (error) {
+    log.w("update", { error });
+    displayType.value = "UnexpectedError";
+    formStatus.value = formStates.SUBMITTED;
+  } finally {
+    log.i("update - DONE");
+  }
+}
+
+const popUpParams = ref(null);
+const closeModal = () => (popUpParams.value = null);
+const modalOpenCounter = ref(0);
+
+const openModal = (p) => {
+  modalOpenCounter.value++;
+  popUpParams.value = {
+    cb: () => {
+      checkValidDeleted(p);
+      closeModal();
+    },
+    msg: p
+      ? "Attention, vous vous apprêtez à réactiver ce compte. Voulez vous confirmer cette action?"
+      : "Attention, vous vous apprêtez à désactiver ce compte. Voulez vous confirmer cette action?",
+  };
+};
+</script>
\ No newline at end of file
diff --git a/packages/frontend-bo/src/layouts/default.vue b/packages/frontend-bo/src/layouts/default.vue
index 2acfdeb91..740219b3d 100644
--- a/packages/frontend-bo/src/layouts/default.vue
+++ b/packages/frontend-bo/src/layouts/default.vue
@@ -3,10 +3,9 @@ const navItems = useMenuNavItems();
 
 const log = logger("layouts/default");
 const userStore = useUserStore();
-
 const config = useRuntimeConfig();
 
-const header = reactive({
+const header = computed(() => ({
   dimension: { height: "80px" },
   logoText: ["Republique", "française"],
   quickLinks: [
@@ -20,10 +19,10 @@ const header = reactive({
     },
     {
       label: "Mon compte",
-      to: "/",
+      to: `/comptes/mon-compte`,
       icon: "ri-account-circle-line",
       iconRight: false,
-      class: computed(() => (userStore.isConnected ? "" : "fr-hidden")),
+      class: userStore.isConnected ? "" : "fr-hidden",
     },
     {
       label: "Se déconnecter",
@@ -31,10 +30,10 @@ const header = reactive({
       icon: "ri-logout-box-line",
       iconRight: false,
       button: true,
-      class: computed(() => (userStore.isConnected ? "" : "fr-hidden")),
+      class: userStore.isConnected ? "" : "fr-hidden",
     },
   ],
-});
+}));
 
 const homeTo = computed(() => {
   return userStore.isConnected ? "/" : "/connexion/";
diff --git a/packages/frontend-bo/src/pages/comptes/[[userId]].vue b/packages/frontend-bo/src/pages/comptes/[[userId]].vue
index 98df90d21..f7f65001e 100644
--- a/packages/frontend-bo/src/pages/comptes/[[userId]].vue
+++ b/packages/frontend-bo/src/pages/comptes/[[userId]].vue
@@ -1,275 +1,18 @@
 <template>
   <div class="fr-container">
     <DsfrBreadcrumb :links="links" />
-    <div>
-      <div>
-        <div
-          v-if="
-            formStatus === formStates.VALIDATED ||
-            formStatus === formStates.SUBMITTED
-          "
-          class="fr-grid-row fr-grid-row--center fr-my-5v fr-col-12"
-        >
-          <DsfrAlert
-            :role="
-              displayType === 'CreationDoneWithSucces' ? 'status' : 'alert'
-            "
-            :title="displayInfos[displayType].title"
-            :description="displayInfos[displayType].description"
-            :type="displayInfos[displayType].type"
-            :closeable="false"
-          />
-        </div>
-        <div v-else>
-          <form>
-            <div class="fr-fieldset fr-grid-row fr-grid-row--center fr-my-5v">
-              <h1
-                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
-              >
-                {{ titreForm }}
-              </h1>
-              <div
-                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
-              >
-                <div class="fr-input-group">
-                  <DsfrInputGroup
-                    :error-message="emailField.errorMessage"
-                    :model-value="emailField.modelValue"
-                    type="text"
-                    label="Adresse courriel"
-                    name="email"
-                    :disabled="formStatus === formStates.EDITION"
-                    :required="true"
-                    :label-visible="true"
-                    placeholder="Veuillez saisir votre email"
-                    :is-valid="emailField.isValid"
-                    @update:model-value="checkValidEmail"
-                  />
-                </div>
-              </div>
-
-              <div
-                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
-              >
-                <div class="fr-input-group">
-                  <DsfrInputGroup
-                    :error-message="nomField.errorMessage"
-                    :model-value="nomField.modelValue"
-                    type="text"
-                    label="Nom"
-                    name="nom"
-                    :disabled="isFormDisabled"
-                    :required="true"
-                    :label-visible="true"
-                    placeholder=""
-                    hint="Veuillez saisir votre nom d'usage"
-                    :is-valid="nomField.isValid"
-                    @update:model-value="checkValidNom"
-                  />
-                </div>
-              </div>
-              <div
-                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
-              >
-                <div class="fr-input-group">
-                  <DsfrInputGroup
-                    :error-message="prenomField.errorMessage"
-                    :model-value="prenomField.modelValue"
-                    type="text"
-                    label="Prénom"
-                    name="prenom"
-                    :disabled="isFormDisabled"
-                    :required="true"
-                    :label-visible="true"
-                    hint="Veuillez saisir votre prénom"
-                    placeholder=""
-                    :is-valid="prenomField.isValid"
-                    @update:model-value="checkValidPrenom"
-                  />
-                </div>
-              </div>
-              <div
-                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
-              >
-                <div class="fr-fieldset__element">
-                  <div class="fr-input-group fr-col-12">
-                    <DsfrRadioButtonSet
-                      name="competence"
-                      :disabled="isFormDisabled"
-                      legend="Type de compétence du service"
-                      :required="true"
-                      :model-value="serviceCompetenceField.modelValue"
-                      :options="serviceCompetenceOptions"
-                      :is-valid="serviceCompetenceField.isValid"
-                      :inline="true"
-                      @update:model-value="checkValidServiceCompetence"
-                    />
-                  </div>
-                </div>
-              </div>
-              <div
-                v-if="
-                  !serviceCompetenceField.modelValue ||
-                  serviceCompetenceField.modelValue != 'FRA'
-                "
-                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
-              >
-                <div class="fr-fieldset">
-                  <div class="fr-fieldset__element">
-                    <div class="fr-input-group fr-col-6">
-                      <DsfrSelect
-                        v-if="serviceCompetenceField.modelValue === 'DEP'"
-                        :model-value="territoireField.modelValue"
-                        name="departementTerritoire"
-                        :disabled="isFormDisabled"
-                        label="Département du service"
-                        :required="true"
-                        :options="userDepartements"
-                        :is-valid="territoireField.valid"
-                        @update:model-value="checkValidTerritoire"
-                      />
-
-                      <DsfrSelect
-                        v-if="serviceCompetenceField.modelValue === 'REG'"
-                        :model-value="territoireField.modelValue"
-                        name="regionTerritoire"
-                        :disabled="isFormDisabled"
-                        label="Région du service"
-                        :required="true"
-                        :options="userRegions"
-                        :is-valid="territoireField.valid"
-                        @update:model-value="checkValidTerritoire"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div
-                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
-              >
-                <DsfrCheckboxSet
-                  name="roleUtilisateurField"
-                  :disabled="isFormDisabled"
-                  legend="Rôle(s) associé(s) à l'utilisateur ?"
-                  :required="true"
-                  :model-value="roleUtilisateurField.modelValue"
-                  :options="roleOptions"
-                  :is-valid="roleUtilisateurField.isValid"
-                  :inline="false"
-                  :error-message="
-                    roleUtilisateurField.roleUtilisateurErrorMessage
-                  "
-                  @update:model-value="checkValidRoleUtilisateur"
-                />
-              </div>
-              <div
-                class="fr-fieldset__element fr-col-12 fr-col-sm-8 fr-col-md-8 fr-col-lg-8 fr-col-xl-8"
-              >
-                <div v-if="formStatus === formStates.CREATION">
-                  <DsfrButton :disabled="!canSubmit" @click.prevent="post"
-                    >Créer le compte
-                  </DsfrButton>
-                </div>
-                <div v-else>
-                  <div class="fr-fieldset__element">
-                    <DsfrToggleSwitch
-                      id="toggle-valide"
-                      :key="modalOpenCounter"
-                      :label="actifField.modelValue ? 'Activé' : 'Désactivé'"
-                      :model-value="actifField.modelValue"
-                      :disabled="
-                        !usersStore.user.roles.includes('Desactivation') ||
-                        !usersStore.userSelected ||
-                        !usersStore.userSelected.editable
-                      "
-                      aria-describedby="toggle-valide"
-                      @update:model-value="openModal"
-                    />
-                    <p
-                      v-if="
-                        !actifField.modelValue &&
-                        usersStore.userSelected.deleted_date
-                      "
-                    >
-                      Désactivé le
-                      {{
-                        formatDate(
-                          usersStore.userSelected.deleted_date,
-                          "dd/MM/yyyy",
-                        )
-                      }}
-                    </p>
-                    <p
-                      v-if="usersStore.user.roles.includes('Desactivation')"
-                      id="toggle-valide"
-                      class="fr-hint-text"
-                    >
-                      Compte actif
-                    </p>
-                  </div>
-                  <DsfrButton
-                    v-if="
-                      usersStore.userSelected &&
-                      usersStore.userSelected.editable
-                    "
-                    :disabled="!canSubmit"
-                    @click.prevent="update"
-                    >Enregistrer les modifications
-                  </DsfrButton>
-                  <DsfrButton
-                    v-if="
-                      usersStore.userSelected &&
-                      !usersStore.userSelected.editable
-                    "
-                    @click.prevent="close"
-                    >Fermer
-                  </DsfrButton>
-                </div>
-              </div>
-              <div class="fr-messages-group" aria-live="assertive"></div>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
-    <ValidationModal
-      modal-ref="modal-toggle-bo-user-actif"
-      name="modal-toggle-bo-user-actif"
-      :opened="popUpParams != null"
-      :title="
-        actifField.modelValue
-          ? 'Désactivation du compte ?'
-          : 'Activation du compte'
-      "
-      :on-close="closeModal"
-      :on-validate="popUpParams?.cb ?? (() => {})"
-      validation-label="Confirmer"
-    >
-      <p>{{ popUpParams.msg }}</p>
-      <p>Souhaitez vous poursuivre?</p>
-    </ValidationModal>
+    <Compte v-if="isCallDone" :user="selectedUser" />
   </div>
 </template>
 
 <script setup>
-import { formatDate } from "date-fns/format";
-import { DsfrButton, DsfrToggleSwitch } from "@gouvminint/vue-dsfr";
-import { ValidationModal } from "@vao/shared";
+import Compte from "~/components/user/Compte.vue";
 
 const route = useRoute();
-const log = logger("pages/comptes/[[userId]]");
+const log = logger("pages/comptes/");
 const usersStore = useUserStore();
-const currentUser = usersStore.user;
-const searchState = reactive({
-  id: null,
-  nom: null,
-  prenom: null,
-  territoireCode: null,
-  valide: true,
-  email: null,
-  deleted: false,
-  editable: false,
-});
+const selectedUser = computed(() => usersStore.userSelected);
+const isCallDone = ref(false);
 
 definePageMeta({
   middleware: ["is-connected", "check-role"],
@@ -292,428 +35,16 @@ const links = [
   },
 ];
 
-const config = useRuntimeConfig();
-
-const regionStore = useRegionStore();
-regionStore.fetch();
-
-const departementStore = useDepartementStore();
-departementStore.fetch();
-
-const userDepartements = computed(() => {
-  if (currentUser.territoireCode === "FRA") {
-    return departementStore.departements;
-  }
-  const departementsByRegion = departementStore.departements.filter(
-    (d) => d.region === currentUser.territoireCode,
-  );
-  if (departementsByRegion?.length) {
-    return departementsByRegion;
-  }
-  return (
-    departementStore.departements.filter(
-      (d) => d.value === currentUser.territoireCode,
-    ) ?? []
-  );
-});
-
-const userRegions = computed(() => {
-  if (currentUser.territoireCode === "FRA") {
-    return regionStore.regions;
-  }
-  return (
-    regionStore.regions.filter((r) => r.value === currentUser.territoireCode) ??
-    []
-  );
-});
-
-const roleOptions = [
-  { label: "Accès à la consultation et création de comptes", name: "Compte" },
-  //{ label: "Accès aux contrôles", name: "Controle" },
-  //{ label: "Accès aux agréments", name: "Agrement" },
-  {
-    label: "Accès en lecture aux déclarations de séjour",
-    name: "DemandeSejour_Lecture",
-  },
-  {
-    label: "Accès en lecture/écriture aux déclarations de séjour",
-    name: "DemandeSejour_Ecriture",
-  },
-  {
-    label: "Autorisé à désactiver les comptes",
-    name: "Desactivation",
-  },
-];
-
-const formStates = {
-  CREATION: 1,
-  EDITION: 2,
-  VALIDATED: 3,
-};
-
-let formStatus = ref(formStates.CREATION);
-
-const titreForm = computed(() => {
-  return !userId
-    ? "Création d'un nouvel utilisateur"
-    : usersStore.userSelected?.editable
-      ? "Modification d'un utilisateur"
-      : "Consultation d'un utilisateur";
-});
-
-const isFormDisabled = computed(() => {
-  return (
-    (userId && !usersStore.userSelected?.editable) || !actifField.modelValue
-  );
-});
-
-let serviceCompetenceOptions = [];
-
-const emailField = reactive({
-  errorMessage: "",
-  modelValue: "",
-  isValid: false,
-});
-
-const nomField = reactive({
-  errorMessage: "",
-  modelValue: null,
-  isValid: false,
-});
-
-const prenomField = reactive({
-  errorMessage: "",
-  modelValue: null,
-  isValid: false,
-});
-
-const serviceCompetenceField = reactive({
-  errorMessage: "",
-  modelValue: null,
-  isValid: false,
-});
-
-const territoireField = reactive({
-  errorMessage: "",
-  modelValue: null,
-  isValid: false,
-});
-
-const roleUtilisateurField = reactive({
-  errorMessage: "",
-  modelValue: [],
-  isValid: false,
-});
-
-const actifField = reactive({
-  errorMessage: "",
-  modelValue: true,
-  isValid: true,
-});
-
-const displayInfos = {
-  CreationDoneWithSucces: {
-    title: "Le compte a été créé avec succès",
-    description:
-      "Un courriel a été envoyé à l'utilisateur afin qu'il procède à la validation de son compte Administration VAO.",
-    type: "success",
-  },
-  UpdateDoneWithSucces: {
-    title: "Le compte a été mis à jour avec succès",
-    description:
-      "Le compte que vous venez de modifier a été enregistré avec succès.",
-    type: "success",
-  },
-  UserAlreadyExists: {
-    title: "Une erreur est survenue",
-    description:
-      "Une erreur est survenue. L'utilisateur que vous tentez de créer existe déjà",
-    type: "error",
-  },
-  UserNotFound: {
-    title: "Utilisateur inexistant",
-    description:
-      "Vous tentez de mettre à jour un utilisateur qui semble avoir été supprimé",
-    type: "error",
-  },
-  UnexpectedError: {
-    title: "Une erreur est survenue",
-    description:
-      "Une erreur est survenue. Si vous pensez que cette adresse mail est déjà utilisée, indiquez à l'utilisateur d'utiliser la fonction “Mot de passe oublié”",
-    type: "error",
-  },
-};
-const displayType = ref("UnexpectedError");
-
-function checkValidEmail(email) {
-  emailField.modelValue = email;
-  emailField.isValid = !email || regex.emailRegex.test(email);
-  emailField.errorMessage =
-    !email || emailField.isValid ? "" : "Cet email semble incorrect";
-}
-
-function checkValidNom(n) {
-  nomField.modelValue = n;
-  nomField.isValid =
-    n !== null &&
-    regex.acceptedCharsRegex.test(n) &&
-    !regex.doubleSpacesRegex.test(n) &&
-    !regex.spaceFollowingDashRegex.test(n) &&
-    !regex.tripleDashRegex.test(n);
-  nomField.errorMessage =
-    !n || nomField.isValid ? "" : "Le nom contient des caractères incorrects";
-}
-
-function checkValidPrenom(p) {
-  prenomField.modelValue = p;
-  prenomField.isValid =
-    p !== null &&
-    regex.acceptedCharsRegex.test(p) &&
-    !regex.doubleSpacesRegex.test(p) &&
-    !regex.spaceFollowingDashRegex.test(p) &&
-    !regex.doubleDashRegex.test(p);
-  prenomField.errorMessage =
-    !p || prenomField.isValid
-      ? ""
-      : "Le prénom contient des caractères incorrects";
-}
-
-function checkValidServiceCompetence(p) {
-  log.d("checkValidServiceCompetence : p = ", p);
-  serviceCompetenceField.modelValue = p;
-  serviceCompetenceField.isValid = p !== null;
-  if (serviceCompetenceField.isValid === true && p === competence.NATIONALE)
-    territoireField.isValid = true;
-  else territoireField.isValid = false;
-  serviceCompetenceField.errorMessage =
-    !p || serviceCompetenceField.isValid
-      ? ""
-      : "La compétence du service doit obligatoirement être sélectionnée";
-}
-
-function checkValidTerritoire(p) {
-  territoireField.modelValue = p;
-  territoireField.isValid = p !== null;
-  territoireField.errorMessage =
-    !p || serviceCompetenceField.modelValue === competence.NATIONALE
-      ? ""
-      : serviceCompetenceField.modelValue === competence.DEPARTEMENTALE
-        ? "Le département du service doit obligatoirement être renseigné"
-        : serviceCompetenceField.modelValue === competence.REGIONALE
-          ? "La région du service doit obligatoirement être renseignée"
-          : "";
-}
-
-function checkValidRoleUtilisateur(p) {
-  roleUtilisateurField.modelValue = p;
-  roleUtilisateurField.isValid = p.length > 0;
-  roleUtilisateurField.errorMessage =
-    !p || roleUtilisateurField.isValid
-      ? ""
-      : "Au moins un rôle doit être affecté à l'utilisateur";
-}
-
-function checkValidDeleted(p) {
-  actifField.modelValue = p;
-  actifField.isValid = true;
-  actifField.errorMessage =
-    !p || actifField.isValid
-      ? ""
-      : "L'activation  doit obligatoirement avoir une valeur";
-}
-
-watch([() => serviceCompetenceField.modelValue], function () {
-  if (serviceCompetenceField.modelValue === competence.NATIONALE)
-    territoireField.modelValue = "FRA";
-  //    else
-  //        territoireField.modelValue = null;
-});
-
 onMounted(async () => {
   log.i("Mounted - IN");
-  serviceCompetenceOptions = [];
-  if (usersStore.user.serviceCompetent === competence.NATIONALE)
-    serviceCompetenceOptions.push(serviceCompetenceNAT);
-  if (
-    usersStore.user.serviceCompetent === competence.NATIONALE ||
-    usersStore.user.serviceCompetent === competence.REGIONALE
-  )
-    serviceCompetenceOptions.push(serviceCompetenceREG);
-  serviceCompetenceOptions.push(serviceCompetenceDEP);
-
-  // Mode Edition
   if (userId) {
-    // Chargement des données utilisateur
-    formStatus = ref(formStates.EDITION);
-
-    searchState.id = userId;
     // Chargement des données à partir du store
     await usersStore.getUser(userId);
-    // Chargement des données
-    actifField.modelValue = !usersStore.userSelected.deleted;
-    actifField.isValid = true;
-    emailField.modelValue = usersStore.userSelected.email;
-    emailField.isValid = true;
-    nomField.modelValue = usersStore.userSelected.nom;
-    nomField.isValid = true;
-    prenomField.modelValue = usersStore.userSelected.prenom;
-    prenomField.isValid = true;
-    // Sélection du service de compétence
-    if (usersStore.userSelected.territoireCode === "FRA")
-      serviceCompetenceField.modelValue = competence.NATIONALE;
-    else if (usersStore.userSelected.territoireParent === "FRA") {
-      serviceCompetenceField.modelValue = competence.REGIONALE;
-    } else {
-      serviceCompetenceField.modelValue = competence.DEPARTEMENTALE;
-    }
-    serviceCompetenceField.isValid = true;
-    territoireField.modelValue = usersStore.userSelected.territoireCode;
-    territoireField.isValid = true;
-    // Chargement des rôles
-    usersStore.userSelected.roles.forEach((role) => {
-      roleUtilisateurField.modelValue.push(role);
-    });
-    // Suppression du rôle "Autorisé à désactiver les comptes" si l'a pas le droit lui même de le faire
-    if (!usersStore.user.roles.includes("Desactivation")) {
-      roleOptions.pop();
-    }
-    roleUtilisateurField.isValid = true;
+    isCallDone.value = true;
   } else {
-    // Ecran en mode création
-    formStatus = ref(formStates.CREATION);
-    actifField.modelValue = true;
+    usersStore.userSelected = {};
+    isCallDone.value = true;
   }
+  log.i("Mounted - DONE");
 });
-
-const canSubmit = computed(() => {
-  return (
-    emailField.isValid &&
-    nomField.isValid &&
-    prenomField.isValid &&
-    roleUtilisateurField.isValid &&
-    serviceCompetenceField.isValid &&
-    territoireField.isValid &&
-    actifField.isValid
-  );
-});
-
-async function post() {
-  formStatus.value = formStates.CREATION;
-
-  log.i("post - IN");
-  try {
-    displayType.value = null;
-    await $fetch(config.public.backendUrl + "/bo-user", {
-      credentials: "include",
-      method: "POST",
-      headers: {
-        "Content-Type": "application/json",
-      },
-      body: JSON.stringify({
-        email: emailField.modelValue,
-        nom: nomField.modelValue,
-        prenom: prenomField.modelValue,
-        roles: roleUtilisateurField.modelValue,
-        territoireCode: territoireField.modelValue,
-        deleted: actifField.modelValue,
-      }),
-    })
-      .then((response) => {
-        displayType.value = "CreationDoneWithSucces";
-        formStatus.value = formStates.VALIDATED;
-        log.d("post", { response });
-      })
-      .catch((error) => {
-        const body = error.data;
-        const codeError = body.name;
-
-        log.w("post", { body, codeError });
-        switch (codeError) {
-          default:
-            displayType.value = codeError;
-            formStatus.value = formStates.VALIDATED;
-            break;
-        }
-        formStatus.value = formStates.SUBMITTED;
-      });
-  } catch (error) {
-    log.w("post", { error });
-    displayType.value = "UnexpectedError";
-    formStatus.value = formStates.SUBMITTED;
-  } finally {
-    log.i("post - DONE");
-  }
-}
-async function close() {
-  navigateTo("/comptes/liste");
-}
-
-async function update() {
-  formStatus.value = formStates.CREATION;
-
-  log.i("update - IN");
-  try {
-    displayType.value = null;
-    await $fetch(
-      config.public.backendUrl + "/bo-user/" + usersStore.userSelected.id,
-      {
-        credentials: "include",
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          nom: nomField.modelValue,
-          prenom: prenomField.modelValue,
-          roles: roleUtilisateurField.modelValue,
-          territoireCode: territoireField.modelValue,
-          deleted: !actifField.modelValue,
-        }),
-      },
-    )
-      .then((response) => {
-        displayType.value = "UpdateDoneWithSucces";
-        formStatus.value = formStates.VALIDATED;
-        log.d("update", { response });
-      })
-      .catch((error) => {
-        const body = error.data;
-        const codeError = body.name;
-
-        log.w("update", { body, codeError });
-        switch (codeError) {
-          default:
-            displayType.value = codeError;
-            formStatus.value = formStates.VALIDATED;
-            break;
-        }
-        formStatus.value = formStates.SUBMITTED;
-      });
-  } catch (error) {
-    log.w("update", { error });
-    displayType.value = "UnexpectedError";
-    formStatus.value = formStates.SUBMITTED;
-  } finally {
-    log.i("update - DONE");
-  }
-}
-
-const popUpParams = ref(null);
-const closeModal = () => (popUpParams.value = null);
-const modalOpenCounter = ref(0);
-
-const openModal = (p) => {
-  modalOpenCounter.value++;
-  popUpParams.value = {
-    cb: () => {
-      checkValidDeleted(p);
-      closeModal();
-    },
-    msg: p
-      ? "Attention, vous vous apprêtez à réactiver ce compte. Voulez vous confirmer cette action?"
-      : "Attention, vous vous apprêtez à désactiver ce compte. Voulez vous confirmer cette action?",
-  };
-};
-</script>
-
-<style lang="scss" scoped></style>
+</script>
\ No newline at end of file
diff --git a/packages/frontend-bo/src/pages/comptes/mon-compte.vue b/packages/frontend-bo/src/pages/comptes/mon-compte.vue
new file mode 100644
index 000000000..e9b369be2
--- /dev/null
+++ b/packages/frontend-bo/src/pages/comptes/mon-compte.vue
@@ -0,0 +1,38 @@
+<template>
+  <div class="fr-container">
+    <DsfrBreadcrumb :links="links" />
+    <Compte v-if="isCallDone" :user="currentUser" />
+  </div>
+</template>
+
+<script setup>
+import Compte from "~/components/user/Compte.vue";
+
+const log = logger("pages/mon-compte/");
+const usersStore = useUserStore();
+const currentUser = computed(() => usersStore.user);
+
+const isCallDone = ref(false);
+
+definePageMeta({
+  middleware: ["is-connected"],
+});
+
+const links = [
+  {
+    to: "/",
+    text: "Accueil",
+  },
+  {
+    text: "Mon compte",
+  },
+];
+
+onMounted(async () => {
+  log.i("Mounted - IN");
+  isCallDone.value = true;
+  log.i("Mounted - DONE");
+});
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/packages/frontend-bo/src/stores/user.js b/packages/frontend-bo/src/stores/user.js
index a2e5dc619..22f917346 100644
--- a/packages/frontend-bo/src/stores/user.js
+++ b/packages/frontend-bo/src/stores/user.js
@@ -26,6 +26,12 @@ export const useUserStore = defineStore("user", {
         if (user) {
           log.i("refreshProfile - DONE");
           this.user = user;
+          this.user.serviceCompetent =
+            this.user.territoireCode === "FRA"
+              ? "NAT"
+              : /^"\d"+$/.test(user.territoireCode)
+                ? "DEP"
+                : "REG";
         }
       } catch (err) {
         log.w("refreshProfile - DONE with error", err);
@@ -116,7 +122,6 @@ export const useUserStore = defineStore("user", {
     async getUser(id) {
       log.i("getUser - IN", { id });
       try {
-        // Appel du back pour la liste des utilisateurs
         const user = await $fetchBackend("/bo-user/" + id, {
           credentials: "include",
           method: "GET",