diff --git a/client/src/components/sidebar.tsx b/client/src/components/sidebar.tsx
index bbabe38..8e1d9a7 100644
--- a/client/src/components/sidebar.tsx
+++ b/client/src/components/sidebar.tsx
@@ -1,15 +1,24 @@
-import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut } from "lucide-react";
+import { Home, PlusCircle, Calendar, Images, Users, Bot, Clock, Settings, Database, UserCog, LogOut, ChevronLeft, ChevronRight } from "lucide-react";
 import { Link, useLocation } from "wouter";
 import { useQuery, useMutation } from "@tanstack/react-query";
 import { apiRequest, queryClient } from "@/lib/queryClient";
 import { useToast } from "@/hooks/use-toast";
 import { Button } from "@/components/ui/button";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
+import { useState, useEffect } from "react";
 
 export default function Sidebar() {
   const [location] = useLocation();
   const [, setLocation] = useLocation();
   const { toast } = useToast();
+  const [isCollapsed, setIsCollapsed] = useState(() => {
+    const saved = localStorage.getItem('sidebar-collapsed');
+    return saved === 'true';
+  });
+
+  useEffect(() => {
+    localStorage.setItem('sidebar-collapsed', String(isCollapsed));
+  }, [isCollapsed]);
 
   const { data: session } = useQuery<{ id: string; username: string; role: string }>({
     queryKey: ["/api/auth/session"],
@@ -46,7 +55,7 @@ export default function Sidebar() {
   ];
 
   return (
-    <aside className="w-72 bg-sidebar border-r border-sidebar-border flex flex-col h-screen">
+    <aside className={`bg-sidebar border-r border-sidebar-border flex flex-col h-screen transition-all duration-300 ${isCollapsed ? 'w-20' : 'w-72'}`}>
       {/* Logo & Brand */}
       <div className="p-6 border-b border-sidebar-border">
         <div className="flex items-center gap-3">
@@ -55,10 +64,12 @@ export default function Sidebar() {
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
             </svg>
           </div>
-          <div>
-            <h1 className="text-xl font-bold gradient-text">Social Flow</h1>
-            <p className="text-xs text-muted-foreground">Automatisation sociale</p>
-          </div>
+          {!isCollapsed && (
+            <div>
+              <h1 className="text-xl font-bold gradient-text">Social Flow</h1>
+              <p className="text-xs text-muted-foreground">Automatisation sociale</p>
+            </div>
+          )}
         </div>
       </div>
 
@@ -70,15 +81,16 @@ export default function Sidebar() {
             const isActive = location === item.href;
             
             return (
-              <li key={item.href}>
+              <li key={item.href} className="relative group">
                 <Link 
                   href={item.href}
                   className={`
-                    group flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all relative
+                    flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all relative
                     ${isActive 
                       ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
                       : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                     }
+                    ${isCollapsed ? 'justify-center' : ''}
                   `}
                   data-testid={`link-${item.label.toLowerCase().replace(/\s+/g, '-')}`}
                 >
@@ -86,13 +98,22 @@ export default function Sidebar() {
                     <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
                   )}
                   <Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
-                  <span className="flex-1">{item.label}</span>
-                  {item.badge && (
-                    <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold gradient-primary text-white shadow-sm">
-                      {item.badge}
-                    </span>
+                  {!isCollapsed && (
+                    <>
+                      <span className="flex-1">{item.label}</span>
+                      {item.badge && (
+                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold gradient-primary text-white shadow-sm">
+                          {item.badge}
+                        </span>
+                      )}
+                    </>
                   )}
                 </Link>
+                {isCollapsed && (
+                  <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
+                    {item.label}
+                  </div>
+                )}
               </li>
             );
           })}
@@ -100,22 +121,25 @@ export default function Sidebar() {
 
         {/* Stats Section */}
         <div className="mt-8 pt-6 border-t border-sidebar-border">
-          <p className="text-xs font-semibold text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
+          {!isCollapsed && (
+            <p className="text-xs font-semibold text-muted-foreground mb-3 px-4 uppercase tracking-wider">Statistiques</p>
+          )}
           <ul className="space-y-1">
             {statsItems.map((item) => {
               const Icon = item.icon;
               const isActive = location === item.href;
               
               return (
-                <li key={item.href}>
+                <li key={item.href} className="relative group">
                   <Link 
                     href={item.href}
                     className={`
-                      group flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
+                      flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
                       ${isActive 
                         ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
                         : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                       }
+                      ${isCollapsed ? 'justify-center' : ''}
                     `}
                     data-testid={`link-${item.label.toLowerCase()}`}
                   >
@@ -123,8 +147,13 @@ export default function Sidebar() {
                       <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
                     )}
                     <Icon className={`w-5 h-5 ${isActive ? 'text-primary' : ''}`} />
-                    <span>{item.label}</span>
+                    {!isCollapsed && <span>{item.label}</span>}
                   </Link>
+                  {isCollapsed && (
+                    <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
+                      {item.label}
+                    </div>
+                  )}
                 </li>
               );
             })}
@@ -136,17 +165,20 @@ export default function Sidebar() {
       <div className="p-4 border-t border-sidebar-border space-y-2">
         {isAdmin && (
           <>
-            <div className="mb-2">
-              <p className="text-xs font-semibold text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
-            </div>
+            {!isCollapsed && (
+              <div className="mb-2">
+                <p className="text-xs font-semibold text-muted-foreground mb-2 px-4 uppercase tracking-wider">Administration</p>
+              </div>
+            )}
             <Link 
               href="/pages"
               className={`
-                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
+                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
                 ${location === "/pages"
                   ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
                   : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                 }
+                ${isCollapsed ? 'justify-center' : ''}
               `}
               data-testid="link-pages-gérées"
             >
@@ -154,16 +186,22 @@ export default function Sidebar() {
                 <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
               )}
               <Users className="w-5 h-5" />
-              <span>Pages gérées</span>
+              {!isCollapsed && <span>Pages gérées</span>}
+              {isCollapsed && (
+                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
+                  Pages gérées
+                </div>
+              )}
             </Link>
             <Link 
               href="/users"
               className={`
-                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
+                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
                 ${location === "/users"
                   ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
                   : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                 }
+                ${isCollapsed ? 'justify-center' : ''}
               `}
               data-testid="link-users"
             >
@@ -171,16 +209,22 @@ export default function Sidebar() {
                 <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
               )}
               <UserCog className="w-5 h-5" />
-              <span>Utilisateurs</span>
+              {!isCollapsed && <span>Utilisateurs</span>}
+              {isCollapsed && (
+                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
+                  Utilisateurs
+                </div>
+              )}
             </Link>
             <Link 
               href="/sql"
               className={`
-                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
+                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
                 ${location === "/sql"
                   ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
                   : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                 }
+                ${isCollapsed ? 'justify-center' : ''}
               `}
               data-testid="link-sql"
             >
@@ -188,16 +232,22 @@ export default function Sidebar() {
                 <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
               )}
               <Database className="w-5 h-5" />
-              <span>SQL</span>
+              {!isCollapsed && <span>SQL</span>}
+              {isCollapsed && (
+                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
+                  SQL
+                </div>
+              )}
             </Link>
             <Link 
               href="/settings"
               className={`
-                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative
+                flex items-center gap-3 px-4 py-3 rounded-xl transition-all relative group
                 ${location === "/settings"
                   ? 'bg-gradient-to-r from-primary/10 to-secondary/10 text-primary shadow-sm' 
                   : 'text-muted-foreground hover:bg-sidebar-accent hover:text-foreground'
                 }
+                ${isCollapsed ? 'justify-center' : ''}
               `}
               data-testid="link-settings"
             >
@@ -205,40 +255,61 @@ export default function Sidebar() {
                 <div className="absolute left-0 top-1/2 -translate-y-1/2 w-1 h-8 gradient-primary rounded-r-full" />
               )}
               <Settings className="w-5 h-5" />
-              <span>Paramètres</span>
+              {!isCollapsed && <span>Paramètres</span>}
+              {isCollapsed && (
+                <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50">
+                  Paramètres
+                </div>
+              )}
             </Link>
           </>
         )}
         
-        <div className="pt-2">
+        <div className="pt-2 relative group">
           <Button
             variant="ghost"
-            className="w-full justify-start text-muted-foreground hover:text-foreground hover:bg-sidebar-accent rounded-xl"
+            className={`w-full text-muted-foreground hover:text-foreground hover:bg-sidebar-accent rounded-xl ${isCollapsed ? 'justify-center px-0' : 'justify-start'}`}
             onClick={() => logoutMutation.mutate()}
             disabled={logoutMutation.isPending}
             data-testid="button-logout"
           >
-            <LogOut className="w-5 h-5 mr-3" />
-            {logoutMutation.isPending ? "Déconnexion..." : "Déconnexion"}
+            <LogOut className={`w-5 h-5 ${isCollapsed ? '' : 'mr-3'}`} />
+            {!isCollapsed && (logoutMutation.isPending ? "Déconnexion..." : "Déconnexion")}
           </Button>
+          {isCollapsed && (
+            <div className="absolute left-full ml-2 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg shadow-lg opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 top-0">
+              Déconnexion
+            </div>
+          )}
         </div>
         
         {/* User Profile Card */}
         {session && (
-          <div className="mt-4 p-4 bg-gradient-to-br from-primary/5 to-secondary/5 border border-primary/10 rounded-xl">
-            <div className="flex items-center gap-3">
+          <div className={`mt-4 bg-gradient-to-br from-primary/5 to-secondary/5 border border-primary/10 rounded-xl ${isCollapsed ? 'p-2' : 'p-4'}`}>
+            <div className={`flex items-center gap-3 ${isCollapsed ? 'justify-center' : ''}`}>
               <Avatar className="w-10 h-10 border-2 border-primary/20">
                 <AvatarFallback className="gradient-primary text-white font-semibold">
                   {session.username.substring(0, 2).toUpperCase()}
                 </AvatarFallback>
               </Avatar>
-              <div className="flex-1 min-w-0">
-                <p className="text-sm font-semibold truncate">{session.username}</p>
-                <p className="text-xs text-muted-foreground capitalize">{session.role}</p>
-              </div>
+              {!isCollapsed && (
+                <div className="flex-1 min-w-0">
+                  <p className="text-sm font-semibold truncate">{session.username}</p>
+                  <p className="text-xs text-muted-foreground capitalize">{session.role}</p>
+                </div>
+              )}
             </div>
           </div>
         )}
+        
+        {/* Toggle Button */}
+        <button
+          onClick={() => setIsCollapsed(!isCollapsed)}
+          className="mt-2 w-full flex items-center justify-center p-2 text-muted-foreground hover:text-primary hover:bg-sidebar-accent rounded-xl transition-all"
+          data-testid="button-toggle-sidebar"
+        >
+          {isCollapsed ? <ChevronRight className="w-5 h-5" /> : <ChevronLeft className="w-5 h-5" />}
+        </button>
       </div>
     </aside>
   );