diff --git a/src/features/admin/components/AdminHeader.js b/src/features/admin/components/AdminHeader.js
index aaee011..d039bfb 100644
--- a/src/features/admin/components/AdminHeader.js
+++ b/src/features/admin/components/AdminHeader.js
@@ -1,20 +1,19 @@
 'use client';
 
-import React from 'react';
-import { Menu, Transition } from '@headlessui/react';
 import { Fragment } from 'react';
+import { Menu, MenuButton, MenuItem, MenuItems, Transition } from '@headlessui/react';
 import { ChevronDownIcon } from '@zen/core/shared/icons';
 import { useRouter } from 'next/navigation';
-import ThemeToggle from './ThemeToggle';
+import { useTheme, getThemeIcon } from '@zen/core/themes';
 
 const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, appName = 'ZEN' }) => {
     const router = useRouter();
-    
+
     const getImageUrl = (imageKey) => {
         if (!imageKey) return null;
         return `/zen/api/storage/${imageKey}`;
     };
-    
+
     const handleLogout = async () => {
         try {
             if (onLogout) {
@@ -44,14 +43,18 @@ const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, ap
             .slice(0, 2);
     };
 
-    const quickLinks = [];
+    const { theme, toggle, systemIsDark } = useTheme();
+    const ThemeIcon = getThemeIcon(theme, systemIsDark);
+    const themeLabel = theme === 'light' ? 'Mode clair' : theme === 'dark' ? 'Mode sombre' : 'Thème système';
 
+    const quickLinks = [];
+    const imageUrl = getImageUrl(user?.image);
     const userInitials = getUserInitials(user?.name);
 
     return (
         <header className="bg-white dark:bg-black border-b border-neutral-200 dark:border-neutral-800/70 sticky top-0 z-30 h-14 flex items-center w-full">
             <div className="flex items-center justify-between lg:justify-end px-4 lg:px-6 py-2 w-full">
-                {/* Left section - Mobile menu button + Logo (hidden on desktop) */}
+                {/* Left section — Mobile menu button + Logo */}
                 <div className="flex items-center space-x-3 lg:hidden">
                     <button
                         onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
@@ -65,10 +68,9 @@ const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, ap
                     <h1 className="text-neutral-900 dark:text-white font-semibold text-lg">{appName}</h1>
                 </div>
 
-                {/* Right Section - Theme Toggle + Quick Links + Profile */}
-                <div className="flex items-center space-x-3 sm:space-x-4">
-                    {/* Quick Links - Hidden on very small screens */}
-                    <nav className="hidden sm:flex items-center space-x-4 lg:space-x-6">
+                {/* Right section — Quick links + Profile */}
+                <div className="flex items-center gap-3 sm:gap-4">
+                    <nav className="hidden sm:flex items-center gap-4 lg:gap-6">
                         {quickLinks.map((link) => (
                             <a
                                 key={link.name}
@@ -80,129 +82,124 @@ const AdminHeader = ({ isMobileMenuOpen, setIsMobileMenuOpen, user, onLogout, ap
                         ))}
                     </nav>
 
-                    {/* Theme Toggle */}
-                    <ThemeToggle />
-
                     {/* User Profile Menu */}
                     <Menu as="div" className="relative">
-                        <Menu.Button className="cursor-pointer flex items-center space-x-2 sm:space-x-3 px-2 sm:px-3 py-2 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-800/50 transition-all duration-200 group ui-open:bg-neutral-100 dark:ui-open:bg-neutral-800/50 outline-none">
-                            {/* Avatar for desktop - hidden on mobile */}
-                            <div className="hidden sm:flex items-center space-x-3">
-                                {getImageUrl(user?.image) && (
-                                    <img
-                                        src={getImageUrl(user.image)}
-                                        alt={user?.name || 'User'}
-                                        className="w-8 h-8 rounded-lg object-cover"
-                                    />
-                                )}
-                                <div className="text-left">
-                                    <p className="text-sm font-medium text-neutral-900 dark:text-white">{user?.name || 'User'}</p>
+                        <MenuButton className="cursor-pointer flex items-center gap-2.5 px-2.5 py-1.5 rounded-xl hover:bg-black/5 dark:hover:bg-white/5 transition-colors duration-200 outline-none group">
+                            {/* Avatar */}
+                            {imageUrl ? (
+                                <img
+                                    src={imageUrl}
+                                    alt={user?.name || 'User'}
+                                    className="w-7 h-7 rounded-lg object-cover shrink-0"
+                                />
+                            ) : (
+                                <div className="w-7 h-7 rounded-lg bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center shrink-0">
+                                    <span className="text-xs font-medium text-neutral-600 dark:text-neutral-300">{userInitials}</span>
                                 </div>
-                            </div>
-                            {/* Avatar for mobile - visible on mobile only */}
-                            <div className="sm:hidden">
-                                {getImageUrl(user?.image) && (
-                                    <img
-                                        src={getImageUrl(user.image)}
-                                        alt={user?.name || 'User'}
-                                        className="w-8 h-8 rounded-lg object-cover"
-                                    />
-                                )}
-                            </div>
-                            <ChevronDownIcon className="h-4 w-4 text-neutral-400 transition-transform duration-200 ui-open:rotate-180" />
-                        </Menu.Button>
+                            )}
+                            {/* Name — desktop only */}
+                            <span className="hidden sm:block text-sm font-medium text-neutral-900 dark:text-white">
+                                {user?.name || 'User'}
+                            </span>
+                            <ChevronDownIcon className="w-3.5 h-3.5 shrink-0 text-neutral-400 dark:text-neutral-600 transition-transform duration-200 group-data-open:rotate-180" />
+                        </MenuButton>
 
                         <Transition
                             as={Fragment}
-                            enter="transition ease-out duration-200"
-                            enterFrom="opacity-0 -translate-y-2"
+                            enter="transition ease-out duration-150"
+                            enterFrom="opacity-0 translate-y-1"
                             enterTo="opacity-100 translate-y-0"
-                            leave="transition ease-in duration-150"
+                            leave="transition ease-in duration-100"
                             leaveFrom="opacity-100 translate-y-0"
-                            leaveTo="opacity-0 -translate-y-2"
+                            leaveTo="opacity-0 translate-y-1"
                         >
-                            <Menu.Items className="absolute right-0 mt-2 w-56 sm:w-64 bg-white dark:bg-neutral-900/95 backdrop-blur-sm border border-neutral-200 dark:border-neutral-700/50 rounded-xl shadow-xl z-50 outline-none">
-                                <div className="p-4 border-b border-neutral-200 dark:border-neutral-700/50">
-                                    <div className="flex items-center space-x-3">
-                                        {getImageUrl(user?.image) && (
-                                            <img
-                                                src={getImageUrl(user.image)}
-                                                alt={user?.name || 'User'}
-                                                className="w-10 h-10 rounded-lg object-cover"
-                                            />
-                                        )}
-                                        <div>
-                                            <p className="text-sm font-medium text-neutral-900 dark:text-white">{user?.name || 'User'}</p>
-                                            <p className="text-xs text-neutral-400">{user?.email || 'email@example.com'}</p>
+                            <MenuItems className="absolute right-0 mt-2 w-56 sm:w-64 outline-none rounded-xl border border-black/8 dark:border-white/8 bg-neutral-50 dark:bg-black shadow-lg overflow-hidden z-50">
+                                {/* User info */}
+                                <div className="px-3 pt-3 pb-2 flex items-center gap-3">
+                                    {imageUrl ? (
+                                        <img
+                                            src={imageUrl}
+                                            alt={user?.name || 'User'}
+                                            className="w-9 h-9 rounded-lg object-cover shrink-0"
+                                        />
+                                    ) : (
+                                        <div className="w-9 h-9 rounded-lg bg-neutral-200 dark:bg-neutral-800 flex items-center justify-center shrink-0">
+                                            <span className="text-sm font-medium text-neutral-600 dark:text-neutral-300">{userInitials}</span>
                                         </div>
+                                    )}
+                                    <div className="min-w-0">
+                                        <p className="text-sm font-medium text-neutral-900 dark:text-white truncate leading-tight">
+                                            {user?.name || user?.email || 'User'}
+                                        </p>
+                                        {user?.name && (
+                                            <p className="text-xs text-neutral-400 dark:text-neutral-500 truncate leading-tight mt-0.5">
+                                                {user.email}
+                                            </p>
+                                        )}
                                     </div>
                                 </div>
-                                
-                                {/* Quick Links for mobile */}
-                                {quickLinks.length > 0 && (
-                                    <div className="sm:hidden py-2 border-b border-neutral-200 dark:border-neutral-700/50">
-                                        {quickLinks.map((link) => (
-                                            <Menu.Item key={link.name}>
-                                                {({ active }) => (
-                                                    <a 
-                                                        href={link.href} 
-                                                        className={`flex items-center px-4 py-3 text-sm transition-all duration-200 ${
-                                                            active 
-                                                                ? 'bg-neutral-100 dark:bg-neutral-800/50 text-neutral-900 dark:text-white' 
-                                                                : 'text-neutral-600 dark:text-neutral-300'
-                                                        }`}
+
+                                <div className="p-1.5 flex flex-col gap-0.5">
+                                    {/* Quick links — mobile only */}
+                                    {quickLinks.length > 0 && (
+                                        <>
+                                            {quickLinks.map((link) => (
+                                                <MenuItem key={link.name}>
+                                                    <a
+                                                        href={link.href}
+                                                        className="sm:hidden flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 data-focus:bg-neutral-100 dark:data-focus:bg-white/5 data-focus:text-neutral-900 dark:data-focus:text-white"
                                                     >
-                                                        <svg className="mr-3 h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                                        <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                                         </svg>
                                                         {link.name}
                                                     </a>
-                                                )}
-                                            </Menu.Item>
-                                        ))}
-                                    </div>
-                                )}
-                                
-                                <div className="py-2">
-                                    <Menu.Item>
-                                        {({ active }) => (
-                                            <a 
-                                                href="/admin/profile" 
-                                                className={`flex items-center px-4 py-3 text-sm transition-all duration-200 group ${
-                                                    active 
-                                                        ? 'bg-neutral-100 dark:bg-neutral-800/50 text-neutral-900 dark:text-white' 
-                                                        : 'text-neutral-600 dark:text-neutral-300'
-                                                }`}
-                                            >
-                                                <svg className="mr-3 h-4 w-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
-                                                </svg>
-                                                Mon profil
-                                            </a>
-                                        )}
-                                    </Menu.Item>
-                                    
-                                    <div className="border-t border-neutral-200 dark:border-neutral-700/50 mt-2 pt-2">
-                                        <Menu.Item>
-                                            {({ active }) => (
-                                                <button 
-                                                    onClick={handleLogout}
-                                                    className={`w-full flex items-center px-4 py-3 text-sm transition-all duration-200 group text-left ${
-                                                        active 
-                                                            ? 'bg-red-500/10 text-red-300' 
-                                                            : 'text-red-400'
-                                                    }`}
-                                                >
-                                                    <svg className="mr-3 h-4 w-4 group-hover:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
-                                                    </svg>
-                                                    Se déconnecter
-                                                </button>
-                                            )}
-                                        </Menu.Item>
-                                    </div>
+                                                </MenuItem>
+                                            ))}
+                                            <div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
+                                        </>
+                                    )}
+
+                                    {/* Profile */}
+                                    <MenuItem>
+                                        <a
+                                            href="/admin/profile"
+                                            className="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 data-focus:bg-violet-50 dark:data-focus:bg-violet-500/10 data-focus:text-violet-500 dark:data-focus:text-violet-400"
+                                        >
+                                            <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                                            </svg>
+                                            Mon profil
+                                        </a>
+                                    </MenuItem>
+
+                                    {/* Theme */}
+                                    <MenuItem>
+                                        <button
+                                            onClick={toggle}
+                                            className="cursor-pointer w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 data-focus:bg-amber-50 dark:data-focus:bg-amber-500/10 data-focus:text-amber-500 dark:data-focus:text-amber-400"
+                                        >
+                                            <ThemeIcon className="w-4 h-4 shrink-0" />
+                                            {themeLabel}
+                                        </button>
+                                    </MenuItem>
+
+                                    <div className="h-px bg-black/6 dark:bg-white/6 my-0.5" />
+
+                                    {/* Logout */}
+                                    <MenuItem>
+                                        <button
+                                            onClick={handleLogout}
+                                            className="cursor-pointer w-full flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm text-neutral-500 dark:text-neutral-400 transition-colors duration-150 text-left data-focus:bg-red-50 dark:data-focus:bg-red-500/10 data-focus:text-red-500 dark:data-focus:text-red-400"
+                                        >
+                                            <svg className="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.75} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+                                            </svg>
+                                            Se déconnecter
+                                        </button>
+                                    </MenuItem>
                                 </div>
-                            </Menu.Items>
+                            </MenuItems>
                         </Transition>
                     </Menu>
                 </div>