diff --git a/front/app/api/auth/[...nextauth]/route.ts b/front/app/api/auth/[...nextauth]/route.ts
index e17af22..1c1187d 100644
--- a/front/app/api/auth/[...nextauth]/route.ts
+++ b/front/app/api/auth/[...nextauth]/route.ts
@@ -28,6 +28,7 @@ export const authOptions: NextAuthOptions = {
       // Au moment de la première connexion, sauvegarde de l'access token et du rôle dans le JWT
       if (account && profile) {
         token.accessToken = account.access_token;
+        token.refreshToken = account.refresh_token;
         token.first_name = profile.given_name;
         token.last_name = profile.family_name;
         token.username = profile.preferred_username;
@@ -48,6 +49,29 @@ export const authOptions: NextAuthOptions = {
   session: {
     strategy: "jwt",
   },
+  events: {
+    async signOut({ token }) {
+      try {
+        console.log("Déconnexion Keycloak");
+        console.log("Token", token);
+        const issuerUrl = process.env.KEYCLOAK_ISSUER!;
+        const logoutUrl = `${issuerUrl}/protocol/openid-connect/logout`;
+        await fetch(logoutUrl, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+          },
+          body: new URLSearchParams({
+            client_id: process.env.KEYCLOAK_CLIENT_ID!,
+            client_secret: process.env.KEYCLOAK_CLIENT_SECRET!,
+            refresh_token: token.refreshToken as string,
+          }),
+        });
+      } catch (error) {
+        console.error("Erreur lors de la déconnexion Keycloak:", error);
+      }
+    },
+  },
 };
 
 const handler = NextAuth(authOptions);
diff --git a/front/components/main-nav.tsx b/front/components/main-nav.tsx
index 4172030..5dbbca4 100644
--- a/front/components/main-nav.tsx
+++ b/front/components/main-nav.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import {
   Calendar,
   MessageSquare,
@@ -11,7 +11,7 @@ import {
 import Image from "next/image";
 import Link from "next/link";
 import { Sidebar } from "./sidebar";
-import { useSession } from "next-auth/react";
+import { useSession, signIn, signOut } from "next-auth/react";
 
 export function MainNav() {
   const [isSidebarOpen, setIsSidebarOpen] = useState(false);
@@ -83,12 +83,14 @@ export function MainNav() {
               </span>
             </div>
             <div className='cursor-pointer text-white/80 hover:text-white'>
-              <Link href='/api/auth/signout'>Logout</Link>
+              <span onClick={() => signOut()}>Logout</span>
             </div>
           </div>
         ) : (
           <div className='cursor-pointer text-white/80 hover:text-white'>
-            <Link href='/api/auth/signin'>Login</Link>
+            <span onClick={() => signIn("keycloak", { callbackUrl: "/" })}>
+              Login
+            </span>
           </div>
         )}
       </div>