diff --git a/frontend/src/components/features/EmotionChart.tsx b/frontend/src/components/features/EmotionChart.tsx
index a824a51..800c199 100644
--- a/frontend/src/components/features/EmotionChart.tsx
+++ b/frontend/src/components/features/EmotionChart.tsx
@@ -12,8 +12,6 @@ import {
   PieChart,
   Pie,
   Cell,
-  LineChart,
-  Line,
   Legend,
 } from 'recharts';
 import type { ValueType, NameType } from 'recharts/types/component/DefaultTooltipContent';
@@ -90,10 +88,10 @@ export default function EmotionChart({ data, type = 'repartition' }: EmotionChar
     return (
       <div style={{ width: '100%', height: '20rem' }}>
         <ResponsiveContainer width="100%" height={320}>
-          <LineChart data={lineData}>
+          <BarChart data={lineData}>
             <CartesianGrid strokeDasharray="3 3" style={{ opacity: 0.3 }} />
             <XAxis dataKey="date" tick={{ fontSize: 12 }} />
-            <YAxis tick={{ fontSize: 12 }} />
+            <YAxis tick={{ fontSize: 12 }} allowDecimals={false} />
             <Tooltip
               contentStyle={{
                 backgroundColor: 'rgba(255,255,255,0.95)',
@@ -104,17 +102,14 @@ export default function EmotionChart({ data, type = 'repartition' }: EmotionChar
             />
             <Legend />
             {data.evolution.emotions.map((emotion) => (
-              <Line
+              <Bar
                 key={emotion.nom}
-                type="monotone"
                 dataKey={emotion.nom}
-                stroke={emotion.couleur}
-                strokeWidth={2}
-                dot={{ fill: emotion.couleur, r: 4 }}
-                activeDot={{ r: 6 }}
+                stackId="emotions"
+                fill={emotion.couleur}
               />
             ))}
-          </LineChart>
+          </BarChart>
         </ResponsiveContainer>
       </div>
     );
diff --git a/frontend/src/components/layout/Header.tsx b/frontend/src/components/layout/Header.tsx
index d5d1646..7dc5517 100644
--- a/frontend/src/components/layout/Header.tsx
+++ b/frontend/src/components/layout/Header.tsx
@@ -1,8 +1,10 @@
 "use client";
 
+import { useState } from "react";
 import Link from "next/link";
-import { usePathname } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import { useAuthStore } from "@/lib/auth-store";
+import ConfirmDialog from "@/components/ui/ConfirmDialog";
 
 interface NavLink {
   href: string;
@@ -11,9 +13,17 @@ interface NavLink {
 
 export default function Header() {
   const pathname = usePathname();
+  const router = useRouter();
   const { user, token, logout } = useAuthStore();
   const isAuthenticated = !!token;
   const isAdmin = user?.role?.nom === "administrateur";
+  const [showLogoutConfirm, setShowLogoutConfirm] = useState(false);
+
+  const handleLogout = async () => {
+    setShowLogoutConfirm(false);
+    await logout();
+    router.push("/connexion");
+  };
 
   const navLinks: NavLink[] = [
     { href: "/", label: "Accueil" },
@@ -83,7 +93,7 @@ export default function Header() {
                       <li>
                         <button
                           className="fr-btn fr-icon-logout-box-r-line"
-                          onClick={() => logout()}
+                          onClick={() => setShowLogoutConfirm(true)}
                         >
                           Déconnexion
                         </button>
@@ -155,6 +165,15 @@ export default function Header() {
           </nav>
         </div>
       </div>
+      <ConfirmDialog
+        isOpen={showLogoutConfirm}
+        title="Déconnexion"
+        message="Voulez-vous vraiment vous déconnecter de votre compte CESIZen ?"
+        confirmLabel="Se déconnecter"
+        cancelLabel="Annuler"
+        onConfirm={handleLogout}
+        onClose={() => setShowLogoutConfirm(false)}
+      />
     </header>
   );
 }