diff --git a/front/MyINPulse-front/src/App.vue b/front/MyINPulse-front/src/App.vue
index d359e36..d7f23f6 100644
--- a/front/MyINPulse-front/src/App.vue
+++ b/front/MyINPulse-front/src/App.vue
@@ -4,9 +4,22 @@ import ErrorWrapper from "@/views/errorWrapper.vue";
 </script>
 
 <template>
-    <Header />
-    <ErrorWrapper />
-    <!--<RouterLink to="/">Home</RouterLink> | -->
-    <!--<RouterLink to="/canvas">Canvas</RouterLink> -->
-    <RouterView />
+  <Header />
+  <error-wrapper></error-wrapper>
+  <div id="main">
+      <ProjectComp 
+        v-for="(project, index) in projects" 
+        :key="index"
+        :projectName="project.name"
+        :listName="project.members"
+      />
+  </div>
+
+  <!-- this must used to open the canvas, in fact it's the "more info" button-->
+  <router-link to="/canvas">
+      <button>Voir Canvas</button>
+  </router-link>
+
+
+  <RouterView />
 </template>
diff --git a/front/MyINPulse-front/src/components/canvas/Lean-canvas.vue b/front/MyINPulse-front/src/components/canvas/Lean-canvas.vue
new file mode 100644
index 0000000..40b1b80
--- /dev/null
+++ b/front/MyINPulse-front/src/components/canvas/Lean-canvas.vue
@@ -0,0 +1,71 @@
+<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/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/services/Apis/Admin.ts b/front/MyINPulse-front/src/services/Apis/Admin.ts
index 6c9e300..4ca6231 100644
--- a/front/MyINPulse-front/src/services/Apis/Admin.ts
+++ b/front/MyINPulse-front/src/services/Apis/Admin.ts
@@ -1,6 +1,7 @@
 import { type AxiosError, type AxiosResponse } from "axios";
 import Report from "@/ApiClasses/Repport";
 import ProjectDecision from "@/ApiClasses/ProjectDecision";
+import UserAdmin from "@/ApiClasses/UserAdmin";
 import {
     axiosInstance,
     defaultApiErrorHandler,
@@ -297,6 +298,29 @@ function grantAdminRights(
         });
 }
 
+function createAdmin(
+    onSuccessHandler?: (response: AxiosResponse) => void,
+    onErrorHandler?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .post("/admin/create-account")
+        .then((response) => {
+            if (onSuccessHandler) {
+                onSuccessHandler(response);
+            } else {
+                defaultApiSuccessHandler(response);
+            }
+        })
+        .catch((error: AxiosError) => {
+            if (onErrorHandler) {
+                onErrorHandler(error);
+            } else {
+                defaultApiErrorHandler(error);
+            }
+        });
+}
+
+
 export {
     axiosInstance,
     //requestJoinProject, // Not yet implemented [cite: 4]
@@ -313,4 +337,5 @@ export {
     getUpcomingAppointments,
     removeProject,
     grantAdminRights,
+    createAdmin,
 };
diff --git a/front/MyINPulse-front/src/views/AdminMain.vue b/front/MyINPulse-front/src/views/AdminMain.vue
index 6b7b2be..dd2e23e 100644
--- a/front/MyINPulse-front/src/views/AdminMain.vue
+++ b/front/MyINPulse-front/src/views/AdminMain.vue
@@ -44,9 +44,10 @@ import ProjectComp from "../components/ProjectComponent.vue";
 import PendingProjectComponent from "@/components/PendingProjectComponent.vue";
 import AddProjectForm from "@/components/AddProjectForm.vue";
 import PendingRequestsManager from "@/components/PendingRequestsManager.vue";
-
+import { createAdmin } from "@/services/Apis/Admin";
 import Project from "@/ApiClasses/Project";
 import UserEntrepreneur from "@/ApiClasses/UserEntrepreneur";
+import UserAdmin from "@/ApiClasses/UserAdmin";
 //import AllEntrep from "../components/AllEntrep.vue";
 const projects = ref<
     {
@@ -69,6 +70,18 @@ const fallbackProjects = [
     },
 ];
 
+const createFirstAdmin = () => {
+    createAdmin(
+        (response) => {
+            console.log("Admin créé avec succès :", response.data);
+        },
+        (error) => {
+            console.error("Erreur lors de la création de l'admin :", error.message);
+        }
+    );
+};
+
+
 const fetchProjects = () => {
     getAdminProjects(
         (response: AxiosResponse) => {
@@ -122,6 +135,7 @@ const fetchProjects = () => {
 };
 
 onMounted(fetchProjects);
+onMounted(createFirstAdmin);
 
 const pendingProjects = ref<Project[]>([]);