diff --git a/CONVENTIONS.md b/CONVENTIONS.md
index f1892e244..0fe76a135 100644
--- a/CONVENTIONS.md
+++ b/CONVENTIONS.md
@@ -55,7 +55,7 @@ Arborescence:
     - person
     - personvendee
     - household_edit_metadata
-        - index.js
+        - index.ts
 ```
 
 ## Organisation des feuilles de styles
diff --git a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
index 8a64c9543..9587fbecf 100644
--- a/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
+++ b/src/Bundle/ChillMainBundle/Resources/views/layout.html.twig
@@ -68,35 +68,37 @@
                     </div>
                 {% endif %}
 
-                {% block content %}
-                    <div class="col-8 main_search">
-                        {% if app.user.isAbsent %}
-                            <div class="d-flex flex-row mb-5 alert alert-warning" role="alert">
-                                <p class="m-2">{{'absence.You are marked as being absent'|trans }}</p>
-                                <span class="ms-auto">
-                                    <a class="btn btn-remove" title="Modifier" href="{{ path('chill_main_user_absence_index') }}">{{ 'absence.Unset absence'|trans }}</a>
-                                </span>
-                            </div>
-                        {% endif %}
-                        <h2>{{ 'Search'|trans }}</h2>
+                {% block wrapping_content %}
+                    {% block content %}
+                        <div class="col-8 main_search">
+                            {% if app.user.isAbsent %}
+                                <div class="d-flex flex-row mb-5 alert alert-warning" role="alert">
+                                    <p class="m-2">{{'absence.You are marked as being absent'|trans }}</p>
+                                    <span class="ms-auto">
+                                        <a class="btn btn-remove" title="Modifier" href="{{ path('chill_main_user_absence_index') }}">{{ 'absence.Unset absence'|trans }}</a>
+                                    </span>
+                                </div>
+                            {% endif %}
+                            <h2>{{ 'Search'|trans }}</h2>
 
-                        <form action="{{ path('chill_main_search') }}" method="get">
-                            <input class="form-control form-control-lg" name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" />
-                            <div class="text-center">
-                                <button type="submit" class="btn btn-lg btn-warning mt-3">
-                                    <i class="fa fa-fw fa-search"></i> {{ 'Search'|trans }}
-                                </button>
-                                <a class="btn btn-lg btn-misc mt-3" href="{{ path('chill_main_advanced_search_list') }}">
-                                    <i class="fa fa-fw fa-search"></i> {{ 'Advanced search'|trans }}
-                                </a>
-                            </div>
-                        </form>
-                    </div>
+                            <form action="{{ path('chill_main_search') }}" method="get">
+                                <input class="form-control form-control-lg" name="q" type="search" placeholder="{{ 'Search persons, ...'|trans }}" />
+                                <div class="text-center">
+                                    <button type="submit" class="btn btn-lg btn-warning mt-3">
+                                        <i class="fa fa-fw fa-search"></i> {{ 'Search'|trans }}
+                                    </button>
+                                    <a class="btn btn-lg btn-misc mt-3" href="{{ path('chill_main_advanced_search_list') }}">
+                                        <i class="fa fa-fw fa-search"></i> {{ 'Advanced search'|trans }}
+                                    </a>
+                                </div>
+                            </form>
+                        </div>
 
-                    {#  DISABLED {{  chill_widget('homepage', {} ) }} #}
+                        {#  DISABLED {{  chill_widget('homepage', {} ) }} #}
 
-                    {% include '@ChillMain/Homepage/index.html.twig' %}
+                        {% include '@ChillMain/Homepage/index.html.twig' %}
 
+                    {% endblock %}
                 {% endblock %}
 
             </div>
diff --git a/src/Bundle/ChillTicketBundle/chill.webpack.config.js b/src/Bundle/ChillTicketBundle/chill.webpack.config.js
index 5f40de9f2..213b81c97 100644
--- a/src/Bundle/ChillTicketBundle/chill.webpack.config.js
+++ b/src/Bundle/ChillTicketBundle/chill.webpack.config.js
@@ -1,4 +1,4 @@
-// this file loads all assets from the Chill person bundle
 module.exports = function(encore, entries) {
-    encore.addEntry('ticket_app', __dirname + '/src/Resources/public/vuejs/TicketApp/index.ts');
+    encore.addEntry('mod_ticket', __dirname + '/src/Resources/public/module/ticket/index.ts');
+    encore.addEntry('vue_ticket_app', __dirname + '/src/Resources/public/vuejs/TicketApp/index.ts');
 };
diff --git a/src/Bundle/ChillTicketBundle/src/Controller/EditTicketController.php b/src/Bundle/ChillTicketBundle/src/Controller/EditTicketController.php
index a51c3a4a8..6f8ab2a2b 100644
--- a/src/Bundle/ChillTicketBundle/src/Controller/EditTicketController.php
+++ b/src/Bundle/ChillTicketBundle/src/Controller/EditTicketController.php
@@ -14,13 +14,22 @@ namespace Chill\TicketBundle\Controller;
 use Chill\TicketBundle\Entity\Ticket;
 use Symfony\Component\HttpFoundation\Response;
 use Symfony\Component\Routing\Annotation\Route;
+use Twig\Environment;
 
 class EditTicketController
 {
+    public function __construct(
+        private Environment $templating,
+    ) {}
+
     #[Route('/{_locale}/ticket/ticket/{id}/edit', name: 'chill_ticket_ticket_edit')]
     public function __invoke(
         Ticket $ticket
     ): Response {
-        return new Response('ok');
+        return new Response(
+            $this->templating->render(
+                '@ChillTicket/Ticket/edit.html.twig',
+            )
+        );
     }
 }
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/module/ticket/banner.scss b/src/Bundle/ChillTicketBundle/src/Resources/public/module/ticket/banner.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/module/ticket/index.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/module/ticket/index.ts
new file mode 100644
index 000000000..2361e49da
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/module/ticket/index.ts
@@ -0,0 +1 @@
+import './banner.scss';
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
index e69de29bb..7302f2485 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/types.ts
@@ -0,0 +1,3 @@
+export interface Ticket {
+    id: number
+}
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
new file mode 100644
index 000000000..89210e057
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/App.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+<p>{{ $t('hello', {'name': 'Boris'})}}</p>
+</template>
+
+<style scoped lang="scss">
+
+</style>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts
new file mode 100644
index 000000000..4065765f3
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/i18n/messages.ts
@@ -0,0 +1,5 @@
+export const messages = {
+    fr: {
+        hello: "Bonjour {name}"
+    }
+};
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
index e69de29bb..bad5fb9ac 100644
--- a/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
+++ b/src/Bundle/ChillTicketBundle/src/Resources/public/vuejs/TicketApp/index.ts
@@ -0,0 +1,17 @@
+import {createApp} from "vue";
+import { _createI18n } from "../../../../../../ChillMainBundle/Resources/public/vuejs/_js/i18n";
+import VueToast from 'vue-toast-notification';
+import 'vue-toast-notification/dist/theme-sugar.css';
+import {messages} from "./i18n/messages";
+import App from './App.vue';
+
+const i18n = _createI18n(messages)
+
+const _app = createApp({
+        template: '<app></app>',
+    })
+    .use(i18n)
+    .use(VueToast)
+    .component('app', App)
+    .mount('#ticketRoot');
+
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
new file mode 100644
index 000000000..f7263b387
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/views/Banner/banner.html.twig
@@ -0,0 +1,24 @@
+<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="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>
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/views/Ticket/edit.html.twig b/src/Bundle/ChillTicketBundle/src/Resources/views/Ticket/edit.html.twig
new file mode 100644
index 000000000..a8e38d86a
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/views/Ticket/edit.html.twig
@@ -0,0 +1,15 @@
+{% extends '@ChillTicket/layout.html.twig' %}
+
+{% block css %}
+    {{ parent() }}
+    {{ encore_entry_link_tags('vue_ticket_app') }}
+{% endblock %}
+
+{% block js %}
+    {{ parent() }}
+    {{ encore_entry_script_tags('vue_ticket_app') }}
+{% endblock %}
+
+{% block content %}
+    <div id="ticketRoot"></div>
+{% endblock %}
diff --git a/src/Bundle/ChillTicketBundle/src/Resources/views/layout.html.twig b/src/Bundle/ChillTicketBundle/src/Resources/views/layout.html.twig
new file mode 100644
index 000000000..12fb443d4
--- /dev/null
+++ b/src/Bundle/ChillTicketBundle/src/Resources/views/layout.html.twig
@@ -0,0 +1,14 @@
+{% extends '@ChillMain/layout.html.twig' %}
+
+
+{% block top_banner %}
+    {{ include('@ChillTicket/Banner/banner.html.twig') }}
+{% endblock %}
+
+{% block wrapping_content %}
+    <div class="row">
+        <div class="col-md-8 col-sm-12">
+            {% block content %}{% endblock %}
+        </div>
+    </div>
+{% endblock %}