diff --git a/apps/web/components/app-sidebar.tsx b/apps/web/components/app-sidebar.tsx
index 8e2944b..5cf51f4 100644
--- a/apps/web/components/app-sidebar.tsx
+++ b/apps/web/components/app-sidebar.tsx
@@ -27,6 +27,11 @@ import {
   SidebarSeparator,
   useSidebar,
 } from '@/components/ui/sidebar';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import { Text } from '@/components/ui/typography';
 import { useAuth } from '@/lib/auth-context';
 import { getInitials } from '@/lib/user-utils';
@@ -128,7 +133,7 @@ export function AppSidebar() {
         </SidebarMenu>
 
         {user && (
-          <div className="flex items-center gap-2 px-2 py-1 group-data-[collapsible=icon]:justify-center">
+          <div className="flex items-center gap-2 px-2 py-1 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:gap-1">
             <Avatar size="sm">
               <AvatarFallback>{getInitials(user.name)}</AvatarFallback>
             </Avatar>
@@ -140,16 +145,16 @@ export function AppSidebar() {
                 {user.email}
               </Text>
             </div>
-            <div className="flex shrink-0 items-center gap-0.5 group-data-[collapsible=icon]:hidden">
+            <div className="flex shrink-0 items-center gap-0.5 group-data-[collapsible=icon]:flex-col group-data-[collapsible=icon]:gap-1">
               <ModeToggle />
-              <Button
-                variant="ghost"
-                size="icon-xs"
-                onClick={handleLogout}
-                title="Se déconnecter"
-              >
-                <LogOutIcon />
-              </Button>
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Button variant="ghost" size="icon-sm" onClick={handleLogout}>
+                    <LogOutIcon />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="right">Se déconnecter</TooltipContent>
+              </Tooltip>
             </div>
           </div>
         )}
diff --git a/apps/web/components/mode-toggle.tsx b/apps/web/components/mode-toggle.tsx
index 99849f6..b423980 100644
--- a/apps/web/components/mode-toggle.tsx
+++ b/apps/web/components/mode-toggle.tsx
@@ -1,50 +1,31 @@
 'use client';
 
-import { MonitorIcon, MoonIcon, SunIcon } from 'lucide-react';
+import { MoonIcon, SunIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Button } from '@/components/ui/button';
 import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 
 export function ModeToggle() {
   const { setTheme, theme } = useTheme();
 
+  const handleToggle = () => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  };
+
   return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant="ghost" size="icon-sm" title="Changer le thème">
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <Button variant="ghost" size="icon-sm" onClick={handleToggle}>
           <SunIcon className="rotate-0 scale-100 transition-transform duration-200 ease-out dark:-rotate-90 dark:scale-0" />
           <MoonIcon className="absolute rotate-90 scale-0 transition-transform duration-200 ease-out dark:rotate-0 dark:scale-100" />
           <span className="sr-only">Changer le thème</span>
         </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')} className="gap-2">
-          <SunIcon />
-          Clair
-          {theme === 'light' && (
-            <span className="ml-auto size-1.5 rounded-full bg-primary" />
-          )}
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')} className="gap-2">
-          <MoonIcon />
-          Sombre
-          {theme === 'dark' && (
-            <span className="ml-auto size-1.5 rounded-full bg-primary" />
-          )}
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')} className="gap-2">
-          <MonitorIcon />
-          Système
-          {theme === 'system' && (
-            <span className="ml-auto size-1.5 rounded-full bg-primary" />
-          )}
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
+      </TooltipTrigger>
+      <TooltipContent side="right">Changer de thème</TooltipContent>
+    </Tooltip>
   );
 }