diff --git a/apps/backoffice/app/(app)/layout.tsx b/apps/backoffice/app/(app)/layout.tsx
index 7079910..3647508 100644
--- a/apps/backoffice/app/(app)/layout.tsx
+++ b/apps/backoffice/app/(app)/layout.tsx
@@ -93,7 +93,9 @@ export default async function AppLayout({ children }: { children: ReactNode }) {
                 <Icon name="settings" size="md" />
               </Link>
               <ThemeToggle />
-              <LogoutButton />
+              <div className="hidden md:block">
+                <LogoutButton />
+              </div>
               <MobileNav
                 navItems={[
                   { href: "/", label: t("nav.dashboard"), icon: "dashboard" },
diff --git a/apps/backoffice/app/components/MobileNav.tsx b/apps/backoffice/app/components/MobileNav.tsx
index 560fe21..e743b70 100644
--- a/apps/backoffice/app/components/MobileNav.tsx
+++ b/apps/backoffice/app/components/MobileNav.tsx
@@ -3,6 +3,7 @@
 import { useState, useEffect, useTransition } from "react";
 import { createPortal } from "react-dom";
 import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { NavIcon } from "./ui";
 import { useTranslation } from "../../lib/i18n/context";
 import type { UserDto } from "@/lib/api";
@@ -32,10 +33,17 @@ export function MobileNav({ navItems, users, activeUserId, setActiveUserAction }
   setActiveUserAction: (formData: FormData) => Promise<void>;
 }) {
   const { t } = useTranslation();
+  const router = useRouter();
   const [isOpen, setIsOpen] = useState(false);
   const [mounted, setMounted] = useState(false);
   const [, startTransition] = useTransition();
 
+  async function handleLogout() {
+    await fetch("/api/auth/logout", { method: "POST" });
+    router.push("/login");
+    router.refresh();
+  }
+
   function select(userId: string | null) {
     startTransition(async () => {
       const fd = new FormData();
@@ -128,6 +136,17 @@ export function MobileNav({ navItems, users, activeUserId, setActiveUserAction }
                 <NavIcon name="settings" />
                 <span className="font-medium">{t("nav.settings")}</span>
               </Link>
+              <button
+                onClick={() => { setIsOpen(false); handleLogout(); }}
+                className="w-full flex items-center gap-3 px-3 py-3 rounded-lg text-muted-foreground hover:text-foreground hover:bg-accent transition-colors duration-200 active:scale-[0.98]"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="shrink-0">
+                  <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
+                  <polyline points="16 17 21 12 16 7" />
+                  <line x1="21" y1="12" x2="9" y2="12" />
+                </svg>
+                <span className="font-medium">{t("auth.logout")}</span>
+              </button>
             </div>
           </div>
         </nav>
diff --git a/apps/backoffice/lib/i18n/en.ts b/apps/backoffice/lib/i18n/en.ts
index 414ea32..40d03a4 100644
--- a/apps/backoffice/lib/i18n/en.ts
+++ b/apps/backoffice/lib/i18n/en.ts
@@ -1,6 +1,9 @@
 import type { TranslationKey } from "./fr";
 
 const en: Record<TranslationKey, string> = {
+  // Auth
+  "auth.logout": "Log out",
+
   // Navigation
   "nav.dashboard": "Dashboard",
   "nav.books": "Books",
diff --git a/apps/backoffice/lib/i18n/fr.ts b/apps/backoffice/lib/i18n/fr.ts
index f455473..08f1c6b 100644
--- a/apps/backoffice/lib/i18n/fr.ts
+++ b/apps/backoffice/lib/i18n/fr.ts
@@ -1,4 +1,7 @@
 const fr = {
+  // Auth
+  "auth.logout": "Se déconnecter",
+
   // Navigation
   "nav.dashboard": "Tableau de bord",
   "nav.books": "Livres",