diff --git a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
index 9c2ad2bfb..da31c1b47 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
+++ b/src/Bundle/ChillDocStoreBundle/Resources/public/vuejs/DocumentSignature/App.vue
@@ -9,23 +9,41 @@
       </template>
     </modal>
   </teleport>
-  <div>
-    <button :disabled="!userSignatureZones" @click="confirm_sign">
-      Confirmer la signature
-    </button>
-    <button :disabled="!userSignatureZones" @click="undo_sign">
-      Supprimer la signature
-    </button>
+  <div class="col-12">
+
+    <div class="row justify-content-center">
+      <div class="col-3">
+        <button class="btn btn-primary" :disabled="!userSignatureZones" @click="confirm_sign">
+          Confirmer la signature
+        </button>
+      </div>
+      <div class="col-3">
+        <button class="btn btn-primary" :disabled="!userSignatureZones" @click="undo_sign">
+          Supprimer la signature
+        </button>
+      </div>
+    </div>
+
+    <div class="row justify-content-center">
+      <div class="col-2">
+        <button class="btn btn-light" @click="turn_signature(-1)">Zone de signature précédente</button>
+      </div>
+      <div class="col-2">
+        <button class="btn btn-light" @click="turn_signature(1)">Zone de signature suivante</button>
+      </div>
+    </div>
+
+    <div class="row justify-content-center" v-if="pageCount > 1">
+      <div class="col-3">
+        <button class="btn btn-light" :disabled="page <= 1" @click="turn_page(-1)">❮</button>
+          {{ page }} / {{ pageCount }}
+        <button class="btn btn-light" :disabled="page >= pageCount" @click="turn_page(1)">❯</button>
+      </div>
+    </div>
   </div>
-  <div v-if="pageCount > 1">
-    <button :disabled="page <= 1" @click="turn_page(-1)">❮</button>
-    {{ page }} / {{ pageCount }}
-    <button :disabled="page >= pageCount" @click="turn_page(1)">❯</button>
+  <div class="col-12">
+    <canvas id="canvas" style="width:100%"></canvas>
   </div>
-  <div>
-    <button @click="go_next_signature()">Voir les zones de signature</button>
-  </div>
-  <canvas id="canvas"></canvas>
 </template>
 
 <script setup lang="ts">
@@ -180,8 +198,7 @@ const turn_page = async (upOrDown: number) => {
   setTimeout(() => add_zones(page.value), 200);
 };
 
-const go_next_signature = async () => {
-  open()
+const turn_signature = async (upOrDown: number) => {
   let currentZone = signature.zones[zone.value];
   if (currentZone) {
     page.value = currentZone.page;
@@ -189,12 +206,13 @@ const go_next_signature = async () => {
     setTimeout(() => add_zones(page.value), 200);
   }
   if (zone.value < signature.zones.length - 1) {
-    zone.value = zone.value + 1;
+    zone.value = zone.value + upOrDown;
   } else {
     zone.value = 0;
   }
 };
 
+
 const draw_zone = (
   zone: SignatureZone,
   ctx: CanvasRenderingContext2D,
@@ -262,6 +280,9 @@ const undo_sign = async () => {
 download_and_open();
 </script>
 
-<style lang="scss">
+<style scoped lang="scss">
+canvas {
+  width: 100%;
+}
 </style>
 
diff --git a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
index 9c2017184..431de25b7 100644
--- a/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
+++ b/src/Bundle/ChillDocStoreBundle/Resources/views/PersonDocument/signature.html.twig
@@ -1,107 +1,84 @@
-{% extends "@ChillPerson/Person/layout.html.twig"  %}
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="shortcut icon" href="{{ asset('build/images/favicon.ico') }}" type="image/x-icon">
+    <title>Signature</title>
 
-{% set activeRouteKey = '' %}
+    {{ encore_entry_link_tags('mod_bootstrap') }}
 
-{% import "@ChillDocStore/Macro/macro.html.twig" as m %}
-{% import "@ChillDocStore/Macro/macro_mimeicon.html.twig" as mm %}
+</head>
 
-{% block title %}{{ 'Detail of document of %name%'|trans({ '%name%': person|chill_entity_render_string } ) }}{% endblock %}
+<body>
 
-{% block js %}
-    {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
-    <script type="text/javascript">
-        const signature = {
-        id: 1,
-        //   // storedObject: {
-        //   //   filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
-        //   //   keyInfos: {
-        //   //     alg: "A256CBC",
-        //   //     ext: true,
-        //   //     k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
-        //   //     key_ops: ["encrypt", "decrypt"],
-        //   //     kty: "oct",
-        //   //   },
-        //   //   iv: [
-        //   //     50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
-        //   //   ],
-        //   // },
-        storedObject: {
-            filename: "U2HmWk5MGkUW1vHRA5sMEMkW9fyf",
-            keyInfos: {
-            alg: "A256CBC",
-            ext: true,
-            k: "3GmJ8UBck3WhpmdoQy7cGQho0J9k9Rxhn23UIhqvpVY",
-            key_ops: ["encrypt", "decrypt"],
-            kty: "oct",
+    {% block js %}
+        {{ encore_entry_script_tags('mod_document_action_buttons_group') }}
+        <script type="text/javascript">
+            const signature = {
+            id: 1,
+            //   // storedObject: {
+            //   //   filename: "gj72nCYsiuysZwZMTMVv5mhqmJdA",
+            //   //   keyInfos: {
+            //   //     alg: "A256CBC",
+            //   //     ext: true,
+            //   //     k: "WwEuXQqv5sJFzAM6P5q7Ecvbl2MiA9mE_MTQ1fAhVsY",
+            //   //     key_ops: ["encrypt", "decrypt"],
+            //   //     kty: "oct",
+            //   //   },
+            //   //   iv: [
+            //   //     50, 124, 210, 52, 177, 145, 165, 156, 90, 186, 155, 252, 241, 54, 194, 79,
+            //   //   ],
+            //   // },
+            storedObject: {
+                filename: "U2HmWk5MGkUW1vHRA5sMEMkW9fyf",
+                keyInfos: {
+                alg: "A256CBC",
+                ext: true,
+                k: "3GmJ8UBck3WhpmdoQy7cGQho0J9k9Rxhn23UIhqvpVY",
+                key_ops: ["encrypt", "decrypt"],
+                kty: "oct",
+                },
+                iv: [
+                254, 171, 69, 203, 89, 3, 202, 29, 187, 200, 19, 146, 201, 253, 79, 169,
+                ],
             },
-            iv: [
-            254, 171, 69, 203, 89, 3, 202, 29, 187, 200, 19, 146, 201, 253, 79, 169,
+            zones: [
+                {
+                page: 1,
+                pageWidth: 210,
+                pageHeight: 297,
+                x: 21, //from top-left corner
+                y: 50,
+                width: 80,
+                height: 50,
+                },
+                {
+                page: 3,
+                pageWidth: 210,
+                pageHeight: 297,
+                x: 60, //from top-left corner
+                y: 20,
+                width: 80,
+                height: 50,
+                },
             ],
-        },
-        zones: [
-            {
-            page: 1,
-            pageWidth: 210,
-            pageHeight: 297,
-            x: 21, //from top-left corner
-            y: 50,
-            width: 80,
-            height: 50,
-            },
-            {
-            page: 3,
-            pageWidth: 210,
-            pageHeight: 297,
-            x: 60, //from top-left corner
-            y: 20,
-            width: 80,
-            height: 50,
-            },
-        ],
-        };
-        window.signature = signature;
-    </script>
-    {{ encore_entry_script_tags('vue_document_signature') }}
-{% endblock %}
+            };
+            window.signature = signature;
+        </script>
+        {{ encore_entry_script_tags('vue_document_signature') }}
+    {% endblock %}
 
-{% block css %}
-    {{ encore_entry_link_tags('mod_document_action_buttons_group') }}
-{% endblock %}
-
-{% block content %}
-    <h1>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h1>
-
-    {{ mm.mimeIcon(document.object.type) }}
-
-    <dl class="chill_view_data">
-        <dt>{{ 'Title'|trans }}</dt>
-        <dd>{{ document.title }}</dd>
-    </dl>
-
-    <div id="document-signature"></div>
-
-    <ul class="record_actions sticky-form-buttons">
-        <li class="cancel">
-            <a href="{{ chill_return_path_or('chill_docstore_generic-doc_by-person_index', {'id': person.id}) }}" class="btn btn-cancel">
-                {{ 'Back to the list' | trans }}
-            </a>
-        </li>
-
-        {% if is_granted('CHILL_PERSON_DOCUMENT_DELETE', document) %}
-            <li class="delete">
-                <a href="{{ chill_return_path_or('chill_docstore_person_document_delete', {'person': person.id, 'id': document.id}) }}" class="btn btn-delete"></a>
-            </li>
-        {% endif %}
-
-        <li>
-            {{ document.object|chill_document_button_group(document.title, is_granted('CHILL_PERSON_DOCUMENT_UPDATE', document)) }}
-        </li>
-
-        {% if is_granted('CHILL_PERSON_DOCUMENT_UPDATE', document) %}
-            <li>
-                <a href="{{ path('person_document_edit', {'id': document.id, 'person': person.id}) }}" class="btn btn-edit">
-                    {{ 'Edit' | trans }}
-                </a>
-            </li>
-        {% endif %}
-{% endblock %}
+    <div class="content" id="content">
+        <div class="container-xxl">
+            <div class="row">
+               <div class="col-xs-12 col-md-12 col-lg-9 my-5 m-auto">
+                   <h1>{{ 'Document %title%' | trans({ '%title%': document.title }) }}</h1>
+                   <div class="row" id="document-signature"></div>
+               </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>
