diff --git a/front/MyINPulse-front/package-lock.json b/front/MyINPulse-front/package-lock.json
index 1c03aec..2840ddb 100644
--- a/front/MyINPulse-front/package-lock.json
+++ b/front/MyINPulse-front/package-lock.json
@@ -8,13 +8,9 @@
       "name": "my-vue-app",
       "version": "0.0.0",
       "dependencies": {
-        "@auth0/auth0-vue": "^2.4.0",
-        "@dsb-norge/vue-keycloak-js": "^3.0.1",
         "axios": "^1.7.9",
         "cors": "^2.8.5",
         "keycloak-js": "^26.1.0",
-        "oidc-client-ts": "^3.1.0",
-        "oidc-spa": "^6.0.7",
         "pinia": "^2.3.1",
         "pinia-plugin-persistedstate": "^4.2.0",
         "vue": "^3.5.13",
@@ -54,28 +50,6 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
-    "node_modules/@auth0/auth0-spa-js": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/@auth0/auth0-spa-js/-/auth0-spa-js-2.1.3.tgz",
-      "integrity": "sha512-NMTBNuuG4g3rame1aCnNS5qFYIzsTUV5qTFPRfTyYFS1feS6jsCBR+eTq9YkxCp1yuoM2UIcjunPaoPl77U9xQ=="
-    },
-    "node_modules/@auth0/auth0-vue": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/@auth0/auth0-vue/-/auth0-vue-2.4.0.tgz",
-      "integrity": "sha512-12iLvojP8Pvxqu2Abxzksp0HqlSovGiAUhWrppnOaJP02MZEBQo+c/IwM6VbM0edNk+eqqjX5u96iw5peaCPSg==",
-      "dependencies": {
-        "@auth0/auth0-spa-js": "^2.1.3",
-        "vue": "^3.2.41"
-      },
-      "peerDependencies": {
-        "vue-router": "^4.0.12"
-      },
-      "peerDependenciesMeta": {
-        "vue-router": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@babel/code-frame": {
       "version": "7.26.2",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
@@ -489,22 +463,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@dsb-norge/vue-keycloak-js": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@dsb-norge/vue-keycloak-js/-/vue-keycloak-js-3.0.1.tgz",
-      "integrity": "sha512-uJ4deVw4Vyp2FrG0JjYAy8NE6zIlIIl/92mQDlSGH+9kc758hBdrCdZSD3aVzv/Lwh07tpOXsx4jXzbVQkPfkA==",
-      "dependencies": {
-        "keycloak-js": "26.0.7"
-      },
-      "peerDependencies": {
-        "vue": ">=3.0.0"
-      }
-    },
-    "node_modules/@dsb-norge/vue-keycloak-js/node_modules/keycloak-js": {
-      "version": "26.0.7",
-      "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-26.0.7.tgz",
-      "integrity": "sha512-vKCk1ISMiouYRLjMzi5fKp58RnYxKEBS29BoDgVfYwVW94IXchj9jLqBvIet31VD1v79l3WaWT+WMX7fH8O4wA=="
-    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.24.2",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.24.2.tgz",
@@ -2639,14 +2597,6 @@
         "graceful-fs": "^4.1.6"
       }
     },
-    "node_modules/jwt-decode": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
-      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/keycloak-js": {
       "version": "26.1.0",
       "resolved": "https://registry.npmjs.org/keycloak-js/-/keycloak-js-26.1.0.tgz",
@@ -2982,34 +2932,6 @@
       "resolved": "https://registry.npmjs.org/ohash/-/ohash-1.1.4.tgz",
       "integrity": "sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g=="
     },
-    "node_modules/oidc-client-ts": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.1.0.tgz",
-      "integrity": "sha512-IDopEXjiwjkmJLYZo6BTlvwOtnlSniWZkKZoXforC/oLZHC9wkIxd25Kwtmo5yKFMMVcsp3JY6bhcNJqdYk8+g==",
-      "dependencies": {
-        "jwt-decode": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/oidc-spa": {
-      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/oidc-spa/-/oidc-spa-6.0.7.tgz",
-      "integrity": "sha512-2N/mGou2RVyFcpD2dyKWpDkCeDbSwqFg7U1o6y4WiL62EbEa7QHWgM0GlU9mWzt1r2dXJQZYrqbL07AVVv/juQ==",
-      "peerDependencies": {
-        "@types/react": "*",
-        "react": "*"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/open": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/open/-/open-10.1.0.tgz",
diff --git a/front/MyINPulse-front/src/App.vue b/front/MyINPulse-front/src/App.vue
index 0364853..71701b5 100644
--- a/front/MyINPulse-front/src/App.vue
+++ b/front/MyINPulse-front/src/App.vue
@@ -1,11 +1,48 @@
 <script setup lang="ts">
 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';
 </script>
 
 <template>
   <RouterView />
+  <Header />
+  <div id="main">
+      <ProjectComp 
+        v-for="(project, index) in projects" 
+        :key="index"
+        :projectName="project.name"
+      />
+    </div>
 </template>
 
 <style scoped>
 </style>
+
+<script lang="ts">
+export default {
+  name: 'App',
+  components: {
+    Header,
+    ProjectComp,
+  },
+  data() {
+    return {
+      projects: [
+        {
+          name: 'Projet Alpha',
+          //link: './project-alpha.html',
+          //members: ['Alice', 'Bob', 'Charlie'],
+        },
+        {
+          name: 'Projet Beta',
+          //link: './project-beta.html',
+          //members: ['David', 'Eve', 'Frank'],
+        },
+      ],
+    };
+  },
+};
+
+</script>
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/Header.vue b/front/MyINPulse-front/src/components/Header.vue
new file mode 100644
index 0000000..cac4595
--- /dev/null
+++ b/front/MyINPulse-front/src/components/Header.vue
@@ -0,0 +1,26 @@
+<template>
+    <header>
+      <img src="./icons/logo inpulse.png" alt="INPulse" />
+    </header>
+  </template>
+  
+  <script lang="ts">
+  export default {
+    name: 'Header',
+  };
+  </script>
+  
+  <style scoped>
+  header img {
+    width: 100px;
+  }
+
+  header{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 20px;
+    background-color: #fff;
+    border-bottom: 2px solid #ddd;
+  }
+  </style>
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/Project-comp.vue b/front/MyINPulse-front/src/components/Project-comp.vue
new file mode 100644
index 0000000..3e060bb
--- /dev/null
+++ b/front/MyINPulse-front/src/components/Project-comp.vue
@@ -0,0 +1,18 @@
+<template>
+    <div class="project">
+        <div class="project-header">
+            <h2>{{ projectName }}</h2>
+        </div>
+
+    </div>
+</template>
+
+
+<script lang="ts">
+export default {
+    name: 'Project',
+    props: {
+        projectName: String,
+    }
+}
+</script>
\ No newline at end of file
diff --git a/front/MyINPulse-front/src/components/icons/logo inpulse.png b/front/MyINPulse-front/src/components/icons/logo inpulse.png
new file mode 100644
index 0000000..e5a30ee
Binary files /dev/null and b/front/MyINPulse-front/src/components/icons/logo inpulse.png differ
diff --git a/front/MyINPulse-front/src/main.ts b/front/MyINPulse-front/src/main.ts
index 28c0359..e33d5c1 100644
--- a/front/MyINPulse-front/src/main.ts
+++ b/front/MyINPulse-front/src/main.ts
@@ -25,6 +25,7 @@ keycloakService.CallInit(() => {
 
 })
 
+createApp(App).mount('#app');
 
 // TODO: fix the comment
 /*