diff --git a/front/MyINPulse-front/src/App.vue b/front/MyINPulse-front/src/App.vue
index 72b8407..a42626d 100644
--- a/front/MyINPulse-front/src/App.vue
+++ b/front/MyINPulse-front/src/App.vue
@@ -3,7 +3,7 @@ import { RouterLink, RouterView } from 'vue-router'
 import HelloWorld from './components/HelloWorld.vue'
 import Header from './components/Header.vue';
 import ProjectComp from './components/Project-comp.vue';
-import CanvasView from './components/canvas/Lean-canvas.vue';
+import CanvasView from './components/canvas/LeanCanvas.vue';
 import ErrorWrapper from "@/views/errorWrapper.vue";
 </script>
 
diff --git a/front/MyINPulse-front/src/components/canvas/Avantage.vue b/front/MyINPulse-front/src/components/canvas/Avantage.vue
deleted file mode 100644
index 59532ce..0000000
--- a/front/MyINPulse-front/src/components/canvas/Avantage.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>9. Avantage déloyal</h3>
-        <p>Ce qui ne peut pas être facilement copié ou acheté</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/canvas/Canaux.vue b/front/MyINPulse-front/src/components/canvas/Canaux.vue
deleted file mode 100644
index 6aee546..0000000
--- a/front/MyINPulse-front/src/components/canvas/Canaux.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>5. Canaux</h3>
-        <p>Chemins d'accès aux clients</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/canvas/CanvasItem.vue b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
new file mode 100644
index 0000000..120f255
--- /dev/null
+++ b/front/MyINPulse-front/src/components/canvas/CanvasItem.vue
@@ -0,0 +1,56 @@
+<template>
+    <div :class="['cell', { expanded }]" @click="toggleExpand">
+      <h3>{{ title }}</h3>
+      <p>{{ description }}</p>
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    props: {
+      title: String,
+      description: String
+    },
+    data() {
+      return {
+        expanded: false
+      };
+    },
+    methods: {
+      toggleExpand() {
+        this.expanded = !this.expanded;
+      }
+    }
+  };
+  </script>
+  
+  <style scoped>
+  @import "@/components/canvas/style-project.css";
+  
+	.cell {
+		display: flex;
+		flex-direction: column; /* Pour empiler le titre et la description */
+		align-items: center; /* Centre horizontalement */
+		justify-content: center; /* Centre verticalement */
+		text-align: center; /* Centre le texte */
+		transition: all 0.3s ease;
+		cursor: pointer;
+	}
+
+
+	.expanded {
+    position: fixed;
+  	top: 0;
+  	left: 0;
+  	width: 100%;
+  	height: 100%;
+  	background: white;
+  	z-index: 10;
+  	display: flex;
+  	align-items: center;
+  	justify-content: center;
+  	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+	}
+
+  </style>
+  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/canvas/Couts.vue b/front/MyINPulse-front/src/components/canvas/Couts.vue
deleted file mode 100644
index c232d3f..0000000
--- a/front/MyINPulse-front/src/components/canvas/Couts.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>7. Structure des coûts</h3>
-        <p>Coûts d'acquisition, distribution, hébergement, employés...</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/canvas/Header.vue b/front/MyINPulse-front/src/components/canvas/Header.vue
deleted file mode 100644
index e860400..0000000
--- a/front/MyINPulse-front/src/components/canvas/Header.vue
+++ /dev/null
@@ -1,37 +0,0 @@
-<template>
-    <header>
-      <img src="@/assets/logo-inpulse.png" alt="INPulse Logo">
-      <div class="header-buttons">
-        <div class="contact-menu">
-          <button class="contact-button" @click="toggleDropdown">Contact</button>
-          <div class="contact-dropdown" v-show="isDropdownOpen">
-            <button>Contact All</button>
-            <button>Contact Person 1</button>
-            <button>Contact Person 2</button>
-            <button>Contact Person 3</button>
-          </div>
-          <div class="return"><a href="/">return to list project</a></div>
-        </div>
-      </div>
-    </header>
-  </template>
-  
-  <script>
-  export default {
-    data() {
-      return {
-        isDropdownOpen: false
-      };
-    },
-    methods: {
-      toggleDropdown() {
-        this.isDropdownOpen = !this.isDropdownOpen;
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue b/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
new file mode 100644
index 0000000..565ef2f
--- /dev/null
+++ b/front/MyINPulse-front/src/components/canvas/HeaderCanvas.vue
@@ -0,0 +1,36 @@
+<template>
+  <header>
+    <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>
+        <div class="contact-dropdown" v-show="isDropdownOpen">
+          <button>Contact All</button>
+          <button>Contact Person 1</button>
+          <button>Contact Person 2</button>
+          <button>Contact Person 3</button>
+        </div>
+        <div class="return"><a href="/">return to list project</a></div>
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      isDropdownOpen: false
+    };
+  },
+  methods: {
+    toggleDropdown() {
+      this.isDropdownOpen = !this.isDropdownOpen;
+    }
+  }
+};
+</script>
+
+<style scoped>
+@import "@/components/canvas/style-project.css";
+</style>
diff --git a/front/MyINPulse-front/src/components/canvas/Indicateurs.vue b/front/MyINPulse-front/src/components/canvas/Indicateurs.vue
deleted file mode 100644
index 0fd6d1a..0000000
--- a/front/MyINPulse-front/src/components/canvas/Indicateurs.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>8. Indicateurs clés</h3>
-        <p>Activités clés que vous souhaitez évaluer</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/canvas/Lean-canvas.vue b/front/MyINPulse-front/src/components/canvas/Lean-canvas.vue
deleted file mode 100644
index 40b1b80..0000000
--- a/front/MyINPulse-front/src/components/canvas/Lean-canvas.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-  <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/components/canvas/LeanCanvas.vue b/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
new file mode 100644
index 0000000..355ff27
--- /dev/null
+++ b/front/MyINPulse-front/src/components/canvas/LeanCanvas.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="LeanCanvas">
+    <CanvasItem
+      v-for="(item, index) in items"
+      :key="index"
+      :title="item.title"
+      :description="item.description"
+      :class="item.class"
+    />
+  </div>
+</template>
+
+<script>
+import CanvasItem from "./CanvasItem.vue";
+
+export default {
+  components: {
+    CanvasItem
+  },
+  data() {
+    return {
+      items: [
+        { title: "1. Problème",
+          description: "3 problèmes essentiels à résoudre pour le client",
+          class: "Probleme"
+        },
+        { title: "2. Segments",
+          description: "Les segments de clientèle visés",
+          class: "Segments"
+        },
+        { title: "3. Valeur",
+          description: "La proposition de valeur",
+          class: "Valeur"
+        },
+        { title: "4. Solution",
+          description: "Les solutions proposées",
+          class: "Solution"
+        },
+        { title: "5. Avantage",
+          description: "Les avantages concurrentiels",
+          class: "Avantage"
+        },
+        { title: "6. Canaux",
+          description: "Les canaux de distribution",
+          class: "Canaux"
+        },
+        { title: "7. Indicateurs",
+          description: "Les indicateurs clés de performance",
+          class: "Indicateurs"
+        },
+        { title: "8. Coûts",
+          description: "Les coûts associés",
+          class: "Couts"
+        },
+        { title: "9. Revenus",
+          description: "Les sources de revenus",
+          class: "Revenus"
+        }
+      ]
+    };
+  }
+};
+</script>
+
+<style scoped>
+
+.LeanCanvas {
+  display: grid;
+  grid-template-columns: repeat(10, 1fr);
+  grid-template-rows: repeat(6, 1fr);
+  gap: 10px;
+  padding: 10px;
+  max-width: 1200px;
+  margin: 20px auto;
+  border: 2px dashed #d33;
+  background-color: #fff; 
+  position: relative;
+  height: 80vh;
+  overflow: auto;
+}
+
+.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; }
+
+</style>
diff --git a/front/MyINPulse-front/src/components/canvas/Probleme.vue b/front/MyINPulse-front/src/components/canvas/Probleme.vue
deleted file mode 100644
index d36b983..0000000
--- a/front/MyINPulse-front/src/components/canvas/Probleme.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-      <h3>1. Problème</h3>
-      <p>3 problèmes essentiels à résoudre pour le client</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/canvas/Revenus.vue b/front/MyINPulse-front/src/components/canvas/Revenus.vue
deleted file mode 100644
index 0b8b57e..0000000
--- a/front/MyINPulse-front/src/components/canvas/Revenus.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>6. Sources de revenus</h3>
-        <p>Modèle de revenus, durée, revenus espérés, marge espérée</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/canvas/Segments.vue b/front/MyINPulse-front/src/components/canvas/Segments.vue
deleted file mode 100644
index 76eaba5..0000000
--- a/front/MyINPulse-front/src/components/canvas/Segments.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>2. Segments de clients</h3>
-        <p>Clients cibles</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/canvas/Solution.vue b/front/MyINPulse-front/src/components/canvas/Solution.vue
deleted file mode 100644
index b3d5a05..0000000
--- a/front/MyINPulse-front/src/components/canvas/Solution.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>4. Solution</h3>
-        <p>3 fonctionnalités essentielles pour le client</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/canvas/Valeur.vue b/front/MyINPulse-front/src/components/canvas/Valeur.vue
deleted file mode 100644
index d577863..0000000
--- a/front/MyINPulse-front/src/components/canvas/Valeur.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>3. Proposition de valeur unique</h3>
-        <p>Message simple, clair et persuasif expliquant en quoi votre produit est différent et mérite d'être acheté</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/canvas/style-project.css b/front/MyINPulse-front/src/components/canvas/style-project.css
index 7761d40..4369b49 100644
--- a/front/MyINPulse-front/src/components/canvas/style-project.css
+++ b/front/MyINPulse-front/src/components/canvas/style-project.css
@@ -58,14 +58,8 @@ body {
 
   h1 img {
     height: 80px;
-  }
-
-  .canvas {
-    max-width: 1200px;
-    margin: 20px auto;
-    padding: 20px;
-    border: 2px dashed #d33;
-    background-color: #fff;
+    margin: 40px;
+    text-align: center;
   }
 
   .row {
@@ -117,11 +111,6 @@ body {
     position: relative;
   }
 
-  .expanded {
-    transform: scale(1.2); /* L'élément reste agrandi */
-    transition: transform 0.3s ease; /* Animation fluide */
-  }
-
   .contact-button, .return {
     padding: 10px 15px;
     border: none;
diff --git a/front/MyINPulse-front/src/views/CanvasView.vue b/front/MyINPulse-front/src/views/CanvasView.vue
index d87bd29..0c17286 100644
--- a/front/MyINPulse-front/src/views/CanvasView.vue
+++ b/front/MyINPulse-front/src/views/CanvasView.vue
@@ -1,5 +1,10 @@
 <!-- src/views/CanvasView.vue -->
 <template>
+    <div>
+      <header>
+        <HeaderCanvas />
+      </header>
+    </div>
     <div>
       <h1>Page Canvas</h1>
       <LeanCanvas />
@@ -7,6 +12,7 @@
   </template>
   
   <script setup lang="ts">
-  import LeanCanvas from '@/components/canvas/Lean-canvas.vue';
+  import HeaderCanvas from '../components/canvas/HeaderCanvas.vue';
+  import LeanCanvas from '../components/canvas/LeanCanvas.vue';
   </script>
   
\ No newline at end of file