diff --git a/front/MyINPulse-front/src/components/canvas/Header.vue b/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
similarity index 93%
rename from front/MyINPulse-front/src/components/canvas/Header.vue
rename to front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
index e860400..1063412 100644
--- a/front/MyINPulse-front/src/components/canvas/Header.vue
+++ b/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
@@ -1,6 +1,6 @@
 <template>
     <header>
-      <img src="@/assets/logo-inpulse.png" alt="INPulse Logo">
+      <img src="../icons/logo inpulse.png" alt="INPulse Logo">
       <div class="header-buttons">
         <div class="contact-menu">
           <button class="contact-button" @click="toggleDropdown">Contact</button>
diff --git a/front/MyINPulse-front/src/components/canvas/Lean-canvas.vue b/front/MyINPulse-front/src/components/canvas/Lean-canvas.vue
index 0141a17..40b1b80 100644
--- a/front/MyINPulse-front/src/components/canvas/Lean-canvas.vue
+++ b/front/MyINPulse-front/src/components/canvas/Lean-canvas.vue
@@ -1,42 +1,71 @@
 <template>
-    <div class="canvas">
-      <div class="row">
-        <Probleme />
-        <Segments />
-      </div>
-      <div class="row">
-        <Solution />
-        <Valeur />
-        <Canaux />
-      </div>
-      <div class="row">
-        <Couts />
-        <Revenus />
-      </div>
-      <div class="row">
-        <Indicateurs />
-        <Avantage />
-      </div>
-    </div>
-  </template>
-  
-  <script>
-  import Probleme from "./Probleme.vue";
-  import Segments from "./Segments.vue";
-  import Solution from "./Solution.vue";
-  import Valeur from "./Valeur.vue";
-  import Canaux from "./Canaux.vue";
-  import Revenus from "./Revenus.vue";
-  import Couts from "./Couts.vue";
-  import Indicateurs from "./Indicateurs.vue";
-  import Avantage from "./Avantage.vue";
-  
-  export default {
-    components: { Probleme, Segments, Solution, Valeur, Canaux, Revenus, Couts, Indicateurs, Avantage }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  
\ No newline at end of file
+  <div class="canvas">
+    <Probleme class="Probleme" />
+    <Segments class="Segments" />
+    <Valeur class="Valeur" />
+    <Solution class="Solution" />
+    <Avantage class="Avantage" />
+    <Canaux class="Canaux" />
+    <Indicateurs class="Indicateurs" />
+    <Couts class="Couts" />
+    <Revenus class="Revenus" />
+  </div>
+</template>
+
+<script>
+import Probleme from "./Probleme.vue";
+import Segments from "./Segments.vue";
+import Solution from "./Solution.vue";
+import Valeur from "./Valeur.vue";
+import Canaux from "./Canaux.vue";
+import Revenus from "./Revenus.vue";
+import Couts from "./Couts.vue";
+import Indicateurs from "./Indicateurs.vue";
+import Avantage from "./Avantage.vue";
+
+export default {
+  components: {
+    Probleme,
+    Segments,
+    Solution,
+    Valeur,
+    Canaux,
+    Revenus,
+    Couts,
+    Indicateurs,
+    Avantage
+  }
+};
+</script>
+
+<style scoped>
+.canvas {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  gap: 10px;
+  padding: 10px;
+}
+
+.Probleme { grid-column: 1 / 3; grid-row: 1 / 5; }
+.Segments { grid-column: 9 / 11; grid-row: 1 / 5; }
+.Valeur { grid-column: 5 / 7; grid-row: 1 / 5; }
+.Solution { grid-column: 3 / 5; grid-row: 1 / 3; }
+.Avantage { grid-column: 7 / 9; grid-row: 1 / 3; }
+.Canaux { grid-column: 7 / 9; grid-row: 3 / 5; }
+.Indicateurs { grid-column: 3 / 5; grid-row: 3 / 5; }
+.Couts { grid-column: 1 / 6; grid-row: 5 / 7; }
+.Revenus { grid-column: 6 / 11; grid-row: 5 / 7; }
+
+.expanded {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%; /* Remplit toute la zone sans dépassement */
+  height: 100%;
+  transition: all 0.3s ease;
+  z-index: 10;
+  background: white; /* S'assurer que le contenu s'affiche correctement */
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Optionnel : un petit effet visuel */
+}
+</style>
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/router/index.ts b/front/MyINPulse-front/src/router/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/front/MyINPulse-front/src/router/router.ts b/front/MyINPulse-front/src/router/router.ts
index 16f4939..d5dd6fd 100644
--- a/front/MyINPulse-front/src/router/router.ts
+++ b/front/MyINPulse-front/src/router/router.ts
@@ -12,7 +12,7 @@ const router = createRouter({
       component: () => import('../views/test.vue'),
     },
 
-      // route pour les canvas (made by adnane), in fact the two vue apps are separated for now
+      // route pour les canvas
     {
       path: '/canvas',
       name: 'canvas',
diff --git a/front/MyINPulse-front/src/views/CanvasView.vue b/front/MyINPulse-front/src/views/CanvasView.vue
index d87bd29..9da9aff 100644
--- a/front/MyINPulse-front/src/views/CanvasView.vue
+++ b/front/MyINPulse-front/src/views/CanvasView.vue
@@ -1,12 +1,12 @@
-<!-- src/views/CanvasView.vue -->
 <template>
-    <div>
-      <h1>Page Canvas</h1>
-      <LeanCanvas />
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import LeanCanvas from '@/components/canvas/Lean-canvas.vue';
-  </script>
-  
\ No newline at end of file
+  <div>
+    <HeaderCanvas />
+    <h1>Page Canvas</h1>
+    <LeanCanvas />
+  </div>
+</template>
+
+<script setup lang="ts">
+import LeanCanvas from '@/components/canvas/Lean-canvas.vue';
+import HeaderCanvas from '@/components/canvas/HeaderCanvas.vue'; 
+</script>