diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
index b8dced534..73c73973b 100644
--- a/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vuejs/_components/OnTheFly/ThirdParty.vue
@@ -1,20 +1,77 @@
 <template>
+<!-- !!!! DATA still hardcoded until endpoint is fixed -->
+
    <div v-if="action === 'show'">
-      show
-      thirdparty
-      {{ id }}
+      <div class="flex-table">
+         <third-party-render-box
+            :thirdparty="thirdparty"
+            :options="{
+               addInfo: true,
+               addEntity: false,
+               addAltNames: true,
+               addId: true,
+               addLink: false,
+               hLevel: 3,
+               addCenter: true,
+               addNoData: true,
+               isMultiline: true
+            }"
+         ></third-party-render-box>
+      </div>
    </div>
    <div v-else-if="action === 'edit' || action === 'create'">
-      {{ action }}
-      thirdparty 
-      {{ id }}
+      <div class="form-floating mb-3">
+         <input class="form-control form-control-lg" id="firstname" v-model="thirdparty.firstName" v-bind:placeholder="$t('thirdparty.firstname')" />
+         <label for="firstname">{{ $t('thirdparty.firstname') }}</label>
+      </div>
+
+      <div class="form-floating mb-3">
+         <input class="form-control form-control-lg" id="lastname" v-model="thirdparty.lastName" v-bind:placeholder="$t('thirdparty.lastname')" />
+         <label for="lastname">{{ $t('thirdparty.lastname') }}</label>
+      </div>
+
+      <div class="input-group mb-3">
+         <span class="input-group-text" id="email"><i class="fa fa-fw fa-envelope"></i></span>
+         <input class="form-control form-control-lg"
+            v-model="thirdparty.email"
+            v-bind:placeholder="$t('thirdparty.email')"
+            v-bind:aria-label="$t('thirdparty.email')"
+            aria-describedby="email" />
+      </div>
+
+      <div class="input-group mb-3">
+         <span class="input-group-text" id="phonenumber"><i class="fa fa-fw fa-phone"></i></span>
+         <input class="form-control form-control-lg"
+            v-model="thirdparty.telephone"
+            v-bind:placeholder="$t('thirdparty.phonenumber')"
+            v-bind:aria-label="$t('thirdparty.phonenumber')"
+            aria-describedby="phonenumber" />
+      </div>
+
    </div>
 </template>
 
 <script>
+import ThirdPartyRenderBox from '../Entity/ThirdPartyRenderBox.vue'
+
 export default {
    name: "OnTheFlyThirdParty",
-   props: ['id', 'type', 'action']
+   props: ['id', 'type', 'action'],
+   components: {
+      ThirdPartyRenderBox,
+   },
+   data: function() {
+      return {
+         thirdparty: {
+            text : "Bart Maes",
+            firstName : "Bart",
+            lastName : "Maes",
+            email : "bartmaes@gmail.com",
+            telephone : "0475 94 66 15",
+
+         }
+      }
+   }
 }
 // TODO move in ChillThirdpartyAssets
 </script>