diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
index a4f344a82..e000b6fac 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/Create.vue
@@ -43,6 +43,7 @@
       v-if="type === 'thirdparty'"
       :action="action"
       :query="query"
+      :parent="parent"
       ref="castThirdparty"
       @onThirdPartyCreated="onThirdPartyCreated"
       type=""
diff --git a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/CreateModal.vue b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/CreateModal.vue
index 5b92b6370..e55fe2314 100644
--- a/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/CreateModal.vue
+++ b/src/Bundle/ChillMainBundle/Resources/public/vuejs/OnTheFly/components/CreateModal.vue
@@ -53,6 +53,7 @@ defineExpose({ save });
             :allowedTypes="props.allowedTypes"
             :action="props.action"
             :query="props.query"
+            :parent="props.parent"
             @onPersonCreated="onPersonCreated"
             @onThirdPartyCreated="onThirdPartyCreated"
           ></Create>
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/types.ts b/src/Bundle/ChillThirdPartyBundle/Resources/public/types.ts
index e0ae41a5a..ddb097cb2 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/types.ts
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/types.ts
@@ -2,7 +2,7 @@ import {
   Address,
   Center,
   Civility,
-  DateTime,
+  DateTime, SetCivility,
   User,
 } from "ChillMainAssets/types";
 
@@ -15,6 +15,7 @@ export interface BaseThirdParty {
   acronym: string | null;
   active: boolean;
   address: Address | null;
+  contactDataAnonymous: boolean;
   createdAt: DateTime;
   createdBy: User | null;
   email: string | null;
@@ -22,6 +23,7 @@ export interface BaseThirdParty {
   id: number;
   nameCompany: string | null;
   telephone: string | null;
+  telephone2: string | null;
   updatedAt: DateTime | null;
   updatedBy: User | null;
 }
@@ -50,7 +52,7 @@ export interface ThirdpartyChild extends BaseThirdParty {
   kind: "child";
   civility: Civility | null;
   contactDataAnonymous: boolean;
-  parent: Thirdparty | null;
+  parent: ThirdpartyCompany;
   profession: string;
   firstname: string;
   /**
@@ -109,10 +111,15 @@ export interface ThirdpartyCategory {
   };
 }
 
+export interface SetThirdParty {
+  readonly type: "thirdparty";
+  id: number;
+}
+
 export interface ThirdPartyWrite {
   readonly type: "thirdparty";
   kind: ThirdPartyKind;
-  civility: Civility | null;
+  civility: SetCivility | null;
   profession: string;
   firstname: string;
   /**
@@ -126,4 +133,5 @@ export interface ThirdPartyWrite {
     address_id: number;
   }
   comment: string;
+  parent: SetThirdParty|null;
 }
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
index 3413861ae..c84fecbf4 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/Entity/ThirdPartyRenderBox.vue
@@ -5,7 +5,7 @@
         <div class="item-col">
           <div class="entity-label">
             <div :class="'denomination h' + options.hLevel">
-              <a v-if="this.options.addLink === true" href="#">
+              <a v-if="options.addLink === true" href="#">
                 <span class="name">{{ thirdparty.text }}</span>
               </a>
               <span class="name" v-else>{{ thirdparty.text }}</span>
@@ -27,7 +27,7 @@
               />
             </div>
 
-            <p v-if="this.options.addInfo === true" class="moreinfo" />
+            <p v-if="options.addInfo === true" class="moreinfo" />
           </div>
         </div>
 
@@ -44,13 +44,13 @@
                     <span>{{ getProfession[0] }}</span>
                   </p>
                 </li>
-                <li v-if="hasParent">
+                <li v-if="isThirdpartyChild(props.thirdparty)">
                   <i class="fa fa-li fa-hand-o-right" />
-                  <b class="me-2">{{ $t("child_of") }}</b>
+                  <b class="me-2">{{ trans(THIRDPARTY_MESSAGES_CHILD_OF)}}</b>
                   <on-the-fly
-                    :type="thirdparty.parent.type"
-                    :id="thirdparty.parent.id"
-                    :button-text="thirdparty.parent.text"
+                    :type="props.thirdparty.parent.type"
+                    :id="props.thirdparty.parent.id"
+                    :button-text="props.thirdparty.parent.text"
                     :display-badge="'true' === 'true'"
                     action="show"
                   />
@@ -128,65 +128,60 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from "vue";
 import AddressRenderBox from "ChillMainAssets/vuejs/_components/Entity/AddressRenderBox.vue";
 import Confidential from "ChillMainAssets/vuejs/_components/Confidential.vue";
 import BadgeEntity from "ChillMainAssets/vuejs/_components/BadgeEntity.vue";
+import {isThirdpartyChild, isThirdpartyCompany, Thirdparty} from "../../../types";
+import {localizeString} from "ChillMainAssets/lib/localizationHelper/localizationHelper";
+import OnTheFly from "ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue";
+import {
+  THIRDPARTY_MESSAGES_CHILD_OF,
+  trans
+} from "translator";
 
-export default {
-  name: "ThirdPartyRenderBox",
-  components: {
-    AddressRenderBox,
-    Confidential,
-    BadgeEntity,
-  },
-  // To avoid components recursively invoking eachother resolve OnTheFly component here
-  beforeCreate() {
-    this.$options.components.OnTheFly =
-      require("ChillMainAssets/vuejs/OnTheFly/components/OnTheFly").default;
-  },
-  i18n: {
-    messages: {
-      fr: {
-        children: "Personnes de contact: ",
-        child_of: "Contact de: ",
-      },
-    },
-  },
-  props: ["thirdparty", "options"],
-  computed: {
-    isMultiline: function () {
-      if (this.options.isMultiline) {
-        return this.options.isMultiline;
-      } else {
-        return false;
-      }
-    },
-    hasParent() {
-      return !(
-        this.thirdparty.parent === null || this.thirdparty.parent === undefined
-      );
-    },
-    getProfession() {
-      let profession = [];
-      if (this.hasParent && this.thirdparty.profession) {
-        profession.push(this.thirdparty.profession);
-        return profession;
-      }
+// Async to avoid recursive resolution issues
+/*
+const OnTheFly = defineAsyncComponent(() =>
+  import("ChillMainAssets/vuejs/OnTheFly/components/OnTheFly.vue")
+);
+ */
 
-      if (!this.hasParent && this.thirdparty.category) {
-        profession = this.thirdparty.category.map((category) => category.text);
-      }
+interface RenderOptions {
+  addInfo?: boolean;
+  addEntity?: boolean;
+  addId?: boolean;
+  addLink?: boolean;
+  hLevel?: number;
+  entityDisplayLong?: boolean;
+  isMultiline?: boolean;
+}
 
-      return profession;
-    },
-    /* TODO need backend normalizer to serve children without circular reference
-    hasChildren() {
-        //console.log(this.thirdparty.activeChildren.length > 0)
-        return false
-    } */
-  },
-};
+const props = defineProps<{ thirdparty: Thirdparty; options: RenderOptions }>();
+
+const isMultiline = computed<boolean>(() => props.options?.isMultiline ?? false);
+
+const hasParent = computed<boolean>(() => {
+  return isThirdpartyChild(props.thirdparty);
+});
+
+const getProfession = computed<string[]>(() => {
+  const t = props.thirdparty;
+  const prof: string[] = [];
+
+  if (!isThirdpartyCompany(t)) {
+    prof.push(t.profession);
+  }
+
+  if (!isThirdpartyChild(t)) {
+    for (const c of t.categories) {
+      prof.push(localizeString(c.name));
+    }
+  }
+
+  return prof;
+});
 </script>
 
 <style lang="scss">
diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdPartyEdit.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdPartyEdit.vue
index f6f2baef7..4fba5a137 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdPartyEdit.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdPartyEdit.vue
@@ -7,7 +7,7 @@
         <span class="chill-entity badge-thirdparty">{{ parent.text }}</span>
       </div>
     </div>
-    <div class="form-floating mb-3" v-else-if="kind !== 'child'">
+    <div class="form-floating mb-3" v-else-if="props.action !== 'addContact'">
       <div class="form-check">
         <input
           class="form-check-input mt-0"
@@ -46,13 +46,9 @@
         :options="{
           addInfo: true,
           addEntity: false,
-          addAltNames: true,
           addId: false,
           addLink: false,
-          addAge: false,
           hLevel: 4,
-          addCenter: false,
-          addNoData: true,
           isMultiline: false,
         }"
       />
@@ -64,7 +60,7 @@
           <select
             class="form-select form-select-lg"
             id="civility"
-            v-model="thirdParty.civility"
+            v-model="civility"
           >
             <option selected disabled :value="null">
               {{ trans(THIRDPARTY_MESSAGES_THIRDPARTY_CIVILITY) }}
@@ -72,7 +68,7 @@
             <option
               v-for="civility in civilities"
               :key="civility.id"
-              :value="civility"
+              :value="civility.id"
             >
               {{ localizeString(civility.name) }}
             </option>
@@ -210,7 +206,7 @@
       />
     </div>
 
-    <div v-if="parent">
+    <div v-if="props.action !== 'addContact'">
       <div class="input-group mb-3">
         <span class="input-group-text" id="comment"
           ><i class="fa fa-fw fa-pencil"
@@ -249,21 +245,30 @@ import {
   createPerson,
   getCivilities, WritePersonViolationMap,
 } from "ChillPersonAssets/vuejs/_api/OnTheFly";
-import {Thirdparty, ThirdPartyKind, ThirdPartyWrite} from "../../../types";
-import {Civility} from "ChillMainAssets/types";
+import {Thirdparty, ThirdpartyCompany, ThirdPartyKind, ThirdPartyWrite} from "../../../types";
+import {Civility, SetCivility} from "ChillMainAssets/types";
 import {isValidationException} from "ChillMainAssets/lib/api/apiMethods";
 
 
-
-interface ThirdPartyEditProps {
+interface ThirdPartyEditWriteProps {
   id?: number;
-  type?: string|null;
-  action: 'edit' | 'create' | 'addContact';
-  query?: string|null;
-  parent?: Thirdparty|null;
+  type?: 'thirdparty';
+  action: 'edit' | 'create'
+  query?: string;
+  parent?: null;
 }
 
-const props = withDefaults(defineProps<ThirdPartyEditProps>(), {type: null, query: null, parent: null});
+interface ThirdPartyAddContactProps {
+  id?: null;
+  type?: 'thirdparty';
+  action: 'addContact';
+  query?: "";
+  parent: ThirdpartyCompany;
+}
+
+type ThirdPartyEditProps = ThirdPartyAddContactProps | ThirdPartyEditWriteProps;
+
+const props = withDefaults(defineProps<ThirdPartyEditProps>(), {type: 'thirdparty', query: "", parent: null});
 
 const emit =
   defineEmits<(e: "onThirdPartyCreated", payload: { thirdParty: Thirdparty }) => void>();
@@ -282,6 +287,21 @@ const thirdParty = ref<ThirdPartyWrite>({
   telephone: "",
   telephone2: "",
   comment: "",
+  parent: null,
+});
+
+const civility = computed<number|null>({
+  get: () => {
+    if (thirdParty.value.civility !== null) {
+      return thirdParty.value.civility.id;
+    }
+
+    return null;
+  },
+  set: (value: number | null) => {
+    thirdParty.value.civility =
+      value !== null ? { id: value, type: "chill_main_civility" } : null;
+  },
 });
 
 const civilities = ref<Civility[]>([])
@@ -352,12 +372,12 @@ onMounted(() => {
   getCivilities().then((cv) => {
     civilities.value = cv;
   });
-  if (props.action !== "create") {
+  if (props.action === "edit") {
     loadData();
-  }
-  if (props.action === 'addContact') {
-    thirdParty.value.kind = 'child'
-    thirdParty.value.address = null
+  } else if (props.action === 'addContact') {
+    thirdParty.value.kind = 'child';
+    thirdParty.value.address = null;
+    thirdParty.value.parent = {id: props.parent.id, type: 'thirdparty'};
   }
 });
 
diff --git a/src/Bundle/ChillThirdPartyBundle/translations/messages.fr.yml b/src/Bundle/ChillThirdPartyBundle/translations/messages.fr.yml
index 3c5e312f0..8105ef972 100644
--- a/src/Bundle/ChillThirdPartyBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillThirdPartyBundle/translations/messages.fr.yml
@@ -169,7 +169,7 @@ thirdpartyMessages:
       comment: "Commentaire"
       profession: "Qualité"
       civility: "Civilité"
-    child_of: "Contact de: "
+    child_of: "Contact d'une institution"
     children: "Personnes de contact: "
 
 thirdparty_duplicate: