diff --git a/src/Bundle/ChillThirdPartyBundle/Resources/public/vue/_components/ThirdPartyRenderbox.vue b/src/Bundle/ChillThirdPartyBundle/Resources/public/vue/_components/ThirdPartyRenderbox.vue
new file mode 100644
index 000000000..9421d8b72
--- /dev/null
+++ b/src/Bundle/ChillThirdPartyBundle/Resources/public/vue/_components/ThirdPartyRenderbox.vue
@@ -0,0 +1,94 @@
+<template>
+
+    <div class="item-bloc">
+    <section class="chill-entity entity-person">
+    <!-- ENTIRE RENDER_BOX -->
+    <div class="item-row entity-bloc">
+
+        <!-- LABEL -->
+        <div  class="item-col">
+            <div class="entity-label">
+
+                <!-- NAME TAG -->
+                <!-- todo: make h class dynamic -->
+                <div class="denomination h3">
+                
+                    <!-- NAME IF ADD LINK AND PERMISSION GRANTED -->
+                    <!-- todo: change href -->
+                    <a v-if="this.options.addLink ==  true" href="#">
+                        <span class="name">{{ thirdparty.name }}</span>
+                    </a>
+                    <!-- WITHOUT LINK JUST NAME -->
+                    <span v-else class="name">{{ thirdparty.name }}</span>
+    
+                    <!-- IF ADD ENTITY OPTION -->
+                    <span v-if="this.options.addEntity ==  true" class="badge rounded-pill bg-secondary">{{ $t('renderbox.third_party') }}</span>
+                    <span v-if="this.options.addId ==  true" class="id-number" :title="'n° ' + thirdparty.id">{{ thirdparty.id }}</span>
+
+                </div>
+                <!-- END NAME TAG -->
+
+                <!-- EXTRA INFO -->
+                <p v-if="this.options.addInfo == true" class="moreinfo">
+                    <!-- todo: what to add here as extra info? -->
+                </p>
+            </div>
+        </div>
+        <!-- END LABEL -->
+
+        <!-- CONTACT INFO AND ACTIONS-->
+        <div class="item-col">
+            <ul class="list-content fa-ul">
+                <!-- ADDRESS -->
+                <li v-if="thirdparty.address" class="chill-entity entity-address">
+                    <i class="fa fa-fw fa-map-marker"></i>
+                    <show-address :address="thirdparty.address" :multiline="false"></show-address>
+                </li>
+                <!-- PHONENUMBER -->
+                <!-- todo: change href for phonenumbers -->
+                <li>
+                    <i class="fa fa-li fa-mobile"></i>
+                    <a v-if="this.thirdparty.telephone" :href="'tel: ' + thirdparty.telephone">{{ thirdparty.telephone }}</a>
+                    <span v-else class="chill-no-data-statement">{{ $t('renderbox.no_information') }}</span>
+                </li>
+                <li>
+                    <i class="fa fa-li fa-envelope-o"></i>
+                    <a v-if="this.thirdparty.telephone" :href="'mailto: ' + thirdparty.email">{{ thirdparty.email }}</a>
+                </li>
+                
+            </ul>
+            <!-- END ADDRESS AND PHONE NUMBER -->
+
+            <!-- ACTION BUTTONS -->
+            <slot name="record-actions"></slot>
+            <!-- END ACTIONS -->
+        </div>
+        <!-- END CONTACT INFO AND ACTIONS -->
+    </div>
+    </section>
+    </div>
+
+</template>
+
+<script>
+import ShowAddress from 'ChillMainAssets/vuejs/Address/components/ShowAddress.vue';
+
+export default {
+    name: "ThirdPartyRenderBox",
+    components: {
+        ThirdPartyRenderBox,
+        ShowAddress
+    },
+    props: ['thirdparty', 'options'], 
+}
+</script>
+
+<style>
+
+.lastname:before{
+    content: " "
+}
+
+</style>
+
+