diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
index 0bcd1ecbb..5fdabec3a 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
@@ -5,7 +5,7 @@ import {
     UserGroup,
     UserGroupOrUser
 } from "../../../../ChillMainBundle/Resources/public/types";
-import {Person} from "../../../../ChillPersonBundle/Resources/public/types";
+import { Person } from "../../../../ChillPersonBundle/Resources/public/types";
 
 export interface Motive {
     type: "ticket_motive"
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
index 9568dd95e..77acc57d1 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -20,12 +20,10 @@ import { Motive, Ticket } from '../../types';
 import TicketSelectorComponent from './components/TicketSelectorComponent.vue';
 import TicketHistoryListComponent from './components/TicketHistoryListComponent.vue';
 import ActionToolbarComponent from './components/ActionToolbarComponent.vue';
-import BannerComponent from './components/BannerComponent.vue';
 
 export default defineComponent({
     name: 'App',
     components: {
-        BannerComponent,
         TicketSelectorComponent,
         TicketHistoryListComponent,
         ActionToolbarComponent
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
index 2c5fc284d..70dad6480 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/ActionToolbarComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="sticky-bottom">
+    <div class="fixed-bottom">
         <div class="footer-ticket-details">
             <div class="tab-content">
                 <div v-if="activeTab === 'commentaire'" class="p-2">
@@ -102,7 +102,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" scoped>
-div.sticky-bottom {
+div.fixed-bottom {
     div.footer-ticket-main {
         background: none repeat scroll 0 0 #CABB9F;
     }
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
deleted file mode 100644
index 31c2f9f63..000000000
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/components/BannerComponent.vue
+++ /dev/null
@@ -1,65 +0,0 @@
-<template>
-    <div class="banner banner-ticket ">
-        <div id="header-ticket-main" class="header-name">
-            <div class="container-xxl text-primary">
-                <div class="row">
-                    <div class="col-md-6 ps-md-5 ps-xxl-0 ">
-                        <h2>
-                            # {{ ticket.externalRef }}
-                        </h2>
-                        <h1>
-                            {{ ticket.currentMotive ? ticket.currentMotive.label.fr : 'Aucun motif' }}
-                        </h1>
-                    </div>
-
-                    <div class="col-md-6">
-                        <div class="float-end">
-                            <h1><span class="badge text-bg-chill-green text-white">Ouvert</span></h1>
-                            <h3 class="fst-italic">Depuis</h3>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div id="header-ticket-details" class="header-details">
-            <div class="container-xxl">
-                <div class="row justify-content-between">
-                    <div class="col-md-4 col-sm-12">
-                        <h3 class="text-primary">Patient concerné</h3>
-                        <h2><span class="badge text-bg-light" v-for="person in ticket.currentPersons"> {{ person.text
-                                }}</span></h2>
-                    </div>
-                    <div class="col-md-4 col-sm-12">
-                        <h3 class="text-primary">Appelant</h3>
-                        <h2><span class="badge text-bg-light" v-for="person in ticket.currentPersons"> {{ person.text
-                                }}</span></h2>
-
-                    </div>
-                    <div class="col-md-4 col-sm-12">
-                        <h3 class="text-primary">Intervenant</h3>
-                        <h2><span class="badge text-bg-light" v-for="person in ticket.currentPersons"> {{ person.text
-                                }}</span></h2>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script lang="ts">
-import { PropType, defineComponent } from 'vue';
-import { Ticket } from '../../../types';
-
-export default defineComponent({
-    name: 'BannerComponent',
-    props: {
-        ticket: {
-            type: Object as PropType<Ticket>,
-            required: true,
-        },
-    },
-    setup() {
-        return {}
-    }
-});
-</script>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
index f7263b387..73e56209a 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
+++ b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
@@ -1,24 +1,60 @@
-<div class="banner banner-ticket">
-    <div id="header-ticket-main" class="header-name">
-        <div class="container-xxl">
-            <div class="row">
-                <div class="col-md-6 ps-md-5 ps-xxl-0">
-                    TODO
-                </div>
+<div class="banner banner-ticket ">
+	<div id="header-ticket-main" class="header-name">
+		<div class="container-xxl text-primary">
+			<div class="row">
+				<div class="col-md-6 ps-md-5 ps-xxl-0 ">
+					<h2>
+						#{{ ticket.getExternalRef() }}
+					</h2>
+					<h1>
+						{{ticket.getMotive()}}
+					</h1>
+				</div>
 
-                <div class="col-md-6">
-                    TODO
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="header-ticket-details" class="header-details">
-        <div class="container-xxl">
-            <div class="row justify-content-between">
-                <div class="col-md-12 ps-md-5 ps-xxl-0 container">
-                    <p>TODO</p>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
+				<div class="col-md-6">
+					<div class="float-end">
+						<h1>
+							<span class="badge text-bg-chill-green text-white">{{'open' | trans}}</span>
+						</h1>
+						<h3 class="fst-italic">{{'since' | trans}}</h3>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div id="header-ticket-details" class="header-details">
+		<div class="container-xxl">
+			<div class="row justify-content-between">
+				<div class="col-md-4 col-sm-12">
+					<h3 class="text-primary">{{'concerned_patient' | trans}}</h3>
+					<h2>
+						{% for person in ticket.getPersons()  %}
+							<span class="badge text-bg-light" v-for="person in ticket.currentPersons">
+								{{ person.firstName }}
+								{{ person.lastName }}
+							</span>
+						{% endfor %}
+					</h2>
+				</div>
+				<div class="col-md-4 col-sm-12">
+					<h3 class="text-primary">{{'caller' | trans}}</h3>
+					<h2></h2>
+				</div>
+				<div class="col-md-4 col-sm-12">
+					<h3 class="text-primary">{{'speaker' | trans}}</h3>
+					<h2>
+						{% for addressee in ticket.getCurrentAddressee() %}
+							<span class="badge text-bg-light" v-for="person in ticket.currentPersons">
+								{% if addressee.type=='chill_main_user_group'  %}
+									{{ addressee.label.fr }}
+								{% else %}
+									{{ addressee.username }}
+								{% endif %
+							</span>
+						{% endfor %}
+							</h2>
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
diff --git a/src/Bundle/ChillTicketBundle/translations/messages.fr.yaml b/src/Bundle/ChillTicketBundle/translations/messages.fr.yaml
new file mode 100644
index 000000000..6f2c57afa
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/translations/messages.fr.yaml
@@ -0,0 +1,5 @@
+concerned_patient: Patient concerné
+caller: Appelant
+speaker: Intervenant
+open: Ouvert
+since: Depuis