diff --git a/front/MyINPulse-front/src/components/HeaderComponent.vue b/front/MyINPulse-front/src/components/HeaderComponent.vue
index d26e6ca..7b35023 100644
--- a/front/MyINPulse-front/src/components/HeaderComponent.vue
+++ b/front/MyINPulse-front/src/components/HeaderComponent.vue
@@ -1,5 +1,5 @@
 <template>
-    <header>
+    <header class="header">
         <a
             href="https://www.bordeaux-inp.fr/fr/lincubateur-bordeaux-inpulse"
             target="_blank"
@@ -11,26 +11,57 @@
                 class="logo"
             />
         </a>
+
+        <div class="header-actions">
+            <button class="logout" @click="store.logout">Logout</button>
+        </div>
     </header>
 </template>
 
-<script lang="ts">
-export default {
-    name: "HeaderComponent",
-};
+<script setup lang="ts">
+import { store } from "@/main.ts";
 </script>
 
 <style scoped>
-header img {
-    width: 100px;
-}
+@import "@/components/canvas/style-project.css";
 
-header {
+.header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 10px 20px;
-    background-color: #fff;
-    border-bottom: 2px solid #ddd;
+    padding: 15px 30px;
+    background-color: #f9f9f9;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
+
+.logo {
+    height: 50px;
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    position: relative;
+}
+
+
+.logout {
+    background-color: #009cde;
+    color: white;
+    border: none;
+    padding: 10px 15px;
+    cursor: pointer;
+    font-size: 14px;
+    border-radius: 5px;
+    text-decoration: none;
+    transition: background-color 0.2s ease;
+    font-family: Arial, sans-serif;
+}
+
+.logout:hover {
+    background-color: #007bad;
+}
+
+
 </style>