diff --git a/components/admin/ChallengeManagement.tsx b/components/admin/ChallengeManagement.tsx
index 98542a6..d9717a4 100644
--- a/components/admin/ChallengeManagement.tsx
+++ b/components/admin/ChallengeManagement.tsx
@@ -9,7 +9,7 @@ import {
   adminCancelChallenge,
   reactivateChallenge,
 } from "@/actions/admin/challenges";
-import { Button, Card, Input, Textarea, Alert } from "@/components/ui";
+import { Button, Card, Input, Textarea, Alert, Modal, CloseButton } from "@/components/ui";
 import { Avatar } from "@/components/ui";
 
 interface Challenge {
@@ -417,23 +417,29 @@ export default function ChallengeManagement() {
 
       {/* Modal de validation */}
       {selectedChallenge && (
-        <div
-          className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
-          onClick={() => {
+        <Modal
+          isOpen={!!selectedChallenge}
+          onClose={() => {
             setSelectedChallenge(null);
             setWinnerId("");
             setAdminComment("");
           }}
+          size="lg"
         >
-          <Card
-            variant="dark"
-            className="max-w-2xl w-full max-h-[90vh] overflow-y-auto"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="p-6">
-              <h2 className="text-2xl font-bold text-pixel-gold mb-4">
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-2xl font-bold text-pixel-gold">
                 Désigner le gagnant
               </h2>
+              <CloseButton
+                onClick={() => {
+                  setSelectedChallenge(null);
+                  setWinnerId("");
+                  setAdminComment("");
+                }}
+                size="lg"
+              />
+            </div>
 
               <div className="mb-6">
                 <h3 className="text-lg font-bold text-gray-300 mb-2">
@@ -544,31 +550,37 @@ export default function ChallengeManagement() {
                   Annuler
                 </Button>
               </div>
-            </div>
-          </Card>
-        </div>
+          </div>
+        </Modal>
       )}
 
       {/* Modal d'édition */}
       {editingChallenge && (
-        <div
-          className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm"
-          onClick={() => {
+        <Modal
+          isOpen={!!editingChallenge}
+          onClose={() => {
             setEditingChallenge(null);
             setEditTitle("");
             setEditDescription("");
             setEditPointsReward(0);
           }}
+          size="lg"
         >
-          <Card
-            variant="dark"
-            className="max-w-2xl w-full max-h-[90vh] overflow-y-auto"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="p-6">
-              <h2 className="text-2xl font-bold text-pixel-gold mb-4">
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-2xl font-bold text-pixel-gold">
                 Modifier le défi
               </h2>
+              <CloseButton
+                onClick={() => {
+                  setEditingChallenge(null);
+                  setEditTitle("");
+                  setEditDescription("");
+                  setEditPointsReward(0);
+                }}
+                size="lg"
+              />
+            </div>
 
               <div className="space-y-4">
                 <Input
@@ -631,9 +643,8 @@ export default function ChallengeManagement() {
                   </Button>
                 </div>
               </div>
-            </div>
-          </Card>
-        </div>
+          </div>
+        </Modal>
       )}
     </div>
   );
diff --git a/components/admin/EventManagement.tsx b/components/admin/EventManagement.tsx
index 5276322..80e8649 100644
--- a/components/admin/EventManagement.tsx
+++ b/components/admin/EventManagement.tsx
@@ -3,7 +3,15 @@
 import { useState, useEffect, useTransition } from "react";
 import { calculateEventStatus } from "@/lib/eventStatus";
 import { createEvent, updateEvent, deleteEvent } from "@/actions/admin/events";
-import { Input, Textarea, Button, Card, Badge } from "@/components/ui";
+import {
+  Input,
+  Textarea,
+  Button,
+  Card,
+  Badge,
+  Modal,
+  CloseButton,
+} from "@/components/ui";
 
 interface Event {
   id: string;
@@ -221,116 +229,126 @@ export default function EventManagement() {
         )}
       </div>
 
+      {/* Modal de création/édition */}
       {(isCreating || editingEvent) && (
-        <Card variant="default" className="p-3 sm:p-4 mb-4">
-          <h4 className="text-pixel-gold font-bold mb-4 text-base sm:text-lg break-words">
-            {isCreating ? "Créer un événement" : "Modifier l'événement"}
-          </h4>
-          <div className="space-y-4">
-            <Input
-              type="date"
-              label="Date"
-              value={formData.date}
-              onChange={(e) =>
-                setFormData({ ...formData, date: e.target.value })
-              }
-              className="text-xs sm:text-sm px-3 py-2"
-            />
-            <Input
-              type="text"
-              label="Nom"
-              value={formData.name}
-              onChange={(e) =>
-                setFormData({ ...formData, name: e.target.value })
-              }
-              placeholder="Nom de l'événement"
-              className="text-xs sm:text-sm px-3 py-2"
-            />
-            <Textarea
-              label="Description"
-              value={formData.description}
-              onChange={(e) =>
-                setFormData({ ...formData, description: e.target.value })
-              }
-              placeholder="Description de l'événement"
-              rows={4}
-              className="text-xs sm:text-sm px-3 py-2"
-            />
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <div>
-                <label className="block text-xs sm:text-sm text-gray-300 mb-1">
-                  Type
-                </label>
-                <select
-                  value={formData.type}
+        <Modal
+          isOpen={isCreating || !!editingEvent}
+          onClose={handleCancel}
+          size="lg"
+        >
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
+                {isCreating ? "Créer un événement" : "Modifier l'événement"}
+              </h4>
+              <CloseButton onClick={handleCancel} size="lg" />
+            </div>
+            <div className="space-y-4">
+              <Input
+                type="date"
+                label="Date"
+                value={formData.date}
+                onChange={(e) =>
+                  setFormData({ ...formData, date: e.target.value })
+                }
+                className="text-xs sm:text-sm px-3 py-2"
+              />
+              <Input
+                type="text"
+                label="Nom"
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
+                placeholder="Nom de l'événement"
+                className="text-xs sm:text-sm px-3 py-2"
+              />
+              <Textarea
+                label="Description"
+                value={formData.description}
+                onChange={(e) =>
+                  setFormData({ ...formData, description: e.target.value })
+                }
+                placeholder="Description de l'événement"
+                rows={4}
+                className="text-xs sm:text-sm px-3 py-2"
+              />
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div>
+                  <label className="block text-xs sm:text-sm text-gray-300 mb-1">
+                    Type
+                  </label>
+                  <select
+                    value={formData.type}
+                    onChange={(e) =>
+                      setFormData({
+                        ...formData,
+                        type: e.target.value as Event["type"],
+                      })
+                    }
+                    className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
+                  >
+                    {eventTypes.map((type) => (
+                      <option key={type} value={type}>
+                        {getEventTypeLabel(type)}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                <Input
+                  type="text"
+                  label="Salle"
+                  value={formData.room || ""}
+                  onChange={(e) =>
+                    setFormData({ ...formData, room: e.target.value })
+                  }
+                  placeholder="Ex: Nautilus"
+                  className="text-xs sm:text-sm px-3 py-2"
+                />
+                <Input
+                  type="text"
+                  label="Heure"
+                  value={formData.time || ""}
+                  onChange={(e) =>
+                    setFormData({ ...formData, time: e.target.value })
+                  }
+                  placeholder="Ex: 11h-12h"
+                  className="text-xs sm:text-sm px-3 py-2"
+                />
+                <Input
+                  type="number"
+                  label="Places max"
+                  value={formData.maxPlaces || ""}
                   onChange={(e) =>
                     setFormData({
                       ...formData,
-                      type: e.target.value as Event["type"],
+                      maxPlaces: e.target.value
+                        ? parseInt(e.target.value)
+                        : undefined,
                     })
                   }
-                  className="w-full px-3 py-2 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm"
+                  placeholder="Ex: 25"
+                  className="text-xs sm:text-sm px-3 py-2"
+                />
+              </div>
+              <div className="flex flex-col sm:flex-row gap-2">
+                <Button
+                  onClick={handleSave}
+                  variant="success"
+                  size="md"
+                  disabled={saving}
                 >
-                  {eventTypes.map((type) => (
-                    <option key={type} value={type}>
-                      {getEventTypeLabel(type)}
-                    </option>
-                  ))}
-                </select>
+                  {saving ? "Enregistrement..." : "Enregistrer"}
+                </Button>
+                <Button onClick={handleCancel} variant="secondary" size="md">
+                  Annuler
+                </Button>
               </div>
             </div>
-            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
-              <Input
-                type="text"
-                label="Salle"
-                value={formData.room || ""}
-                onChange={(e) =>
-                  setFormData({ ...formData, room: e.target.value })
-                }
-                placeholder="Ex: Nautilus"
-                className="text-xs sm:text-sm px-3 py-2"
-              />
-              <Input
-                type="text"
-                label="Heure"
-                value={formData.time || ""}
-                onChange={(e) =>
-                  setFormData({ ...formData, time: e.target.value })
-                }
-                placeholder="Ex: 11h-12h"
-                className="text-xs sm:text-sm px-3 py-2"
-              />
-              <Input
-                type="number"
-                label="Places max"
-                value={formData.maxPlaces || ""}
-                onChange={(e) =>
-                  setFormData({
-                    ...formData,
-                    maxPlaces: e.target.value
-                      ? parseInt(e.target.value)
-                      : undefined,
-                  })
-                }
-                placeholder="Ex: 25"
-                className="text-xs sm:text-sm px-3 py-2"
-              />
-            </div>
-            <div className="flex flex-col sm:flex-row gap-2">
-              <Button
-                onClick={handleSave}
-                variant="success"
-                size="md"
-                disabled={saving}
-              >
-                {saving ? "Enregistrement..." : "Enregistrer"}
-              </Button>
-              <Button onClick={handleCancel} variant="secondary" size="md">
-                Annuler
-              </Button>
-            </div>
           </div>
-        </Card>
+        </Modal>
       )}
 
       {events.length === 0 ? (
diff --git a/components/admin/UserManagement.tsx b/components/admin/UserManagement.tsx
index 227208f..31e629d 100644
--- a/components/admin/UserManagement.tsx
+++ b/components/admin/UserManagement.tsx
@@ -1,7 +1,14 @@
 "use client";
 
 import { useState, useEffect, useTransition } from "react";
-import { Avatar, Input, Button, Card } from "@/components/ui";
+import {
+  Avatar,
+  Input,
+  Button,
+  Card,
+  Modal,
+  CloseButton,
+} from "@/components/ui";
 import { updateUser, deleteUser } from "@/actions/admin/users";
 
 interface User {
@@ -159,6 +166,25 @@ export default function UserManagement() {
     return num.toLocaleString("en-US");
   };
 
+  // Trouver l'utilisateur en cours d'édition pour les previews
+  const currentEditingUserData = editingUser
+    ? users.find((u) => u.id === editingUser.userId)
+    : null;
+  const previewHp =
+    currentEditingUserData && editingUser
+      ? Math.max(
+          0,
+          Math.min(
+            currentEditingUserData.maxHp,
+            currentEditingUserData.hp + editingUser.hpDelta
+          )
+        )
+      : 0;
+  const previewXp =
+    currentEditingUserData && editingUser
+      ? Math.max(0, currentEditingUserData.xp + editingUser.xpDelta)
+      : 0;
+
   if (loading) {
     return <div className="text-center text-gray-400 py-8">Chargement...</div>;
   }
@@ -171,26 +197,14 @@ export default function UserManagement() {
         </div>
       ) : (
         users.map((user) => {
-          const isEditing = editingUser?.userId === user.id;
-          const previewHp = isEditing
-            ? Math.max(0, Math.min(user.maxHp, user.hp + editingUser.hpDelta))
-            : user.hp;
-          const previewXp = isEditing
-            ? Math.max(0, user.xp + editingUser.xpDelta)
-            : user.xp;
-          const displayAvatar = isEditing ? editingUser.avatar : user.avatar;
-          const displayUsername = isEditing
-            ? editingUser.username || user.username
-            : user.username;
-
           return (
             <Card key={user.id} variant="default" className="p-3 sm:p-4">
               <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 mb-2">
                 <div className="flex gap-2 sm:gap-3 items-center flex-1 min-w-0">
                   {/* Avatar */}
                   <Avatar
-                    src={displayAvatar}
-                    username={displayUsername}
+                    src={user.avatar}
+                    username={user.username}
                     size="sm"
                     className="flex-shrink-0"
                     borderClassName="border-2 border-pixel-gold/50"
@@ -198,7 +212,7 @@ export default function UserManagement() {
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-1.5 sm:gap-2 flex-wrap">
                       <h3 className="text-pixel-gold font-bold text-sm sm:text-base break-words">
-                        {displayUsername}
+                        {user.username}
                       </h3>
                       <span className="text-[10px] sm:text-xs text-gray-500 whitespace-nowrap">
                         Niveau {user.level}
@@ -221,535 +235,542 @@ export default function UserManagement() {
                     </p>
                   </div>
                 </div>
-                {!isEditing && (
-                  <div className="flex gap-2 flex-shrink-0 sm:ml-2">
-                    <button
-                      onClick={() => handleEdit(user)}
-                      className="px-2 sm:px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition whitespace-nowrap"
-                    >
-                      Modifier
-                    </button>
-                    <button
-                      onClick={() => handleDelete(user.id)}
-                      disabled={deletingUserId === user.id}
-                      className="px-2 sm:px-3 py-1.5 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-red-900/30 transition disabled:opacity-50 whitespace-nowrap"
-                    >
-                      {deletingUserId === user.id
-                        ? "Suppression..."
-                        : "Supprimer"}
-                    </button>
-                  </div>
-                )}
+                <div className="flex gap-2 flex-shrink-0 sm:ml-2">
+                  <button
+                    onClick={() => handleEdit(user)}
+                    className="px-2 sm:px-3 py-1.5 border border-pixel-gold/50 bg-black/60 text-white uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-pixel-gold/10 transition whitespace-nowrap"
+                  >
+                    Modifier
+                  </button>
+                  <button
+                    onClick={() => handleDelete(user.id)}
+                    disabled={deletingUserId === user.id}
+                    className="px-2 sm:px-3 py-1.5 border border-red-500/50 bg-red-900/20 text-red-400 uppercase text-[10px] sm:text-xs tracking-widest rounded hover:bg-red-900/30 transition disabled:opacity-50 whitespace-nowrap"
+                  >
+                    {deletingUserId === user.id
+                      ? "Suppression..."
+                      : "Supprimer"}
+                  </button>
+                </div>
               </div>
 
-              {isEditing ? (
-                <div className="space-y-4">
-                  {/* Username Section */}
-                  <Input
-                    type="text"
-                    label="Nom d'utilisateur"
-                    value={editingUser.username || ""}
-                    onChange={(e) =>
-                      setEditingUser({
-                        ...editingUser,
-                        username: e.target.value,
-                      })
-                    }
-                    placeholder="Nom d'utilisateur"
-                    className="text-xs sm:text-sm px-2 sm:px-3 py-1"
-                  />
-
-                  {/* Avatar Section */}
-                  <div className="flex flex-col items-center gap-3">
-                    <label className="block text-xs sm:text-sm text-gray-300 mb-2">
-                      Avatar
-                    </label>
-
-                    {/* Preview */}
-                    <div className="relative">
-                      <Avatar
-                        src={editingUser.avatar}
-                        username={editingUser.username || user.username}
-                        size="lg"
-                        borderClassName="border-2 border-pixel-gold/50"
-                      />
-                      {uploadingAvatar === user.id && (
-                        <div className="absolute inset-0 bg-black/60 flex items-center justify-center rounded-full">
-                          <div className="text-pixel-gold text-xs">
-                            Upload...
-                          </div>
-                        </div>
-                      )}
-                    </div>
-
-                    {/* Avatars par défaut */}
-                    <div className="flex flex-col items-center gap-2 w-full">
-                      <label className="block text-pixel-gold text-[10px] sm:text-xs uppercase tracking-widest">
-                        Avatars par défaut
-                      </label>
-                      <div className="flex flex-wrap gap-2 justify-center">
-                        {[
-                          "/avatar-1.jpg",
-                          "/avatar-2.jpg",
-                          "/avatar-3.jpg",
-                          "/avatar-4.jpg",
-                          "/avatar-5.jpg",
-                          "/avatar-6.jpg",
-                        ].map((defaultAvatar) => (
-                          <button
-                            key={defaultAvatar}
-                            type="button"
-                            onClick={() =>
-                              setEditingUser({
-                                ...editingUser,
-                                avatar: defaultAvatar,
-                              })
-                            }
-                            className={`w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 overflow-hidden transition ${
-                              editingUser.avatar === defaultAvatar
-                                ? "border-pixel-gold scale-110"
-                                : "border-pixel-gold/30 hover:border-pixel-gold/50"
-                            }`}
-                          >
-                            <img
-                              src={defaultAvatar}
-                              alt="Avatar par défaut"
-                              className="w-full h-full object-cover"
-                            />
-                          </button>
-                        ))}
-                      </div>
-                    </div>
-
-                    {/* Custom Upload */}
-                    <div>
-                      <input
-                        type="file"
-                        accept="image/*"
-                        onChange={async (e) => {
-                          const file = e.target.files?.[0];
-                          if (!file) return;
-
-                          setUploadingAvatar(user.id);
-                          try {
-                            const formData = new FormData();
-                            formData.append("file", file);
-
-                            const response = await fetch(
-                              "/api/admin/avatars/upload",
-                              {
-                                method: "POST",
-                                body: formData,
-                              }
-                            );
-
-                            if (response.ok) {
-                              const data = await response.json();
-                              setEditingUser({
-                                ...editingUser,
-                                avatar: data.url,
-                              });
-                            } else {
-                              alert("Erreur lors de l'upload de l'image");
-                            }
-                          } catch (error) {
-                            console.error("Error uploading image:", error);
-                            alert("Erreur lors de l'upload de l'image");
-                          } finally {
-                            setUploadingAvatar(null);
-                            if (e.target) {
-                              e.target.value = "";
-                            }
-                          }
-                        }}
-                        className="hidden"
-                        id={`avatar-upload-${user.id}`}
-                      />
-                      <label htmlFor={`avatar-upload-${user.id}`}>
-                        <Button
-                          variant="primary"
-                          size="sm"
-                          as="span"
-                          className="cursor-pointer"
-                        >
-                          {uploadingAvatar === user.id
-                            ? "Upload en cours..."
-                            : "Upload un avatar custom"}
-                        </Button>
-                      </label>
-                    </div>
+              {/* Affichage des stats */}
+              <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 text-[10px] sm:text-xs">
+                <div className="flex-1">
+                  <div className="flex justify-between items-center mb-0.5">
+                    <span className="text-gray-400">HP</span>
+                    <span className="text-gray-400">
+                      {user.hp}/{user.maxHp}
+                    </span>
                   </div>
-
-                  {/* HP Section */}
-                  <div>
-                    <div className="flex justify-between items-center mb-2">
-                      <label className="text-xs sm:text-sm text-gray-300">
-                        Points de Vie (HP)
-                      </label>
-                      <span className="text-[10px] sm:text-xs text-gray-400">
-                        {previewHp} / {user.maxHp}
-                      </span>
-                    </div>
-                    <div className="flex gap-1 sm:gap-2 flex-wrap">
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            hpDelta: editingUser.hpDelta - 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -100
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            hpDelta: editingUser.hpDelta - 10,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -10
-                      </button>
-                      <input
-                        type="number"
-                        value={editingUser.hpDelta || 0}
-                        onChange={(e) =>
-                          setEditingUser({
-                            ...editingUser,
-                            hpDelta: parseInt(e.target.value) || 0,
-                          })
-                        }
-                        className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
-                      />
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            hpDelta: editingUser.hpDelta + 10,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +10
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            hpDelta: editingUser.hpDelta + 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +100
-                      </button>
-                    </div>
-                    <div className="mt-2 h-2 bg-black/60 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-gradient-to-r from-red-600 to-green-500 transition-all duration-300"
-                        style={{
-                          width: `${Math.min(
-                            100,
-                            (previewHp / user.maxHp) * 100
-                          )}%`,
-                        }}
-                      />
-                    </div>
-                  </div>
-
-                  {/* XP Section */}
-                  <div>
-                    <div className="flex justify-between items-center mb-2">
-                      <label className="text-xs sm:text-sm text-gray-300">
-                        Expérience (XP)
-                      </label>
-                      <span className="text-[10px] sm:text-xs text-gray-400">
-                        {formatNumber(previewXp)} / {formatNumber(user.maxXp)}
-                      </span>
-                    </div>
-                    <div className="flex gap-1 sm:gap-2 flex-wrap">
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            xpDelta: editingUser.xpDelta - 1000,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -1000
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            xpDelta: editingUser.xpDelta - 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -100
-                      </button>
-                      <input
-                        type="number"
-                        value={editingUser.xpDelta || 0}
-                        onChange={(e) =>
-                          setEditingUser({
-                            ...editingUser,
-                            xpDelta: parseInt(e.target.value) || 0,
-                          })
-                        }
-                        className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
-                      />
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            xpDelta: editingUser.xpDelta + 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +100
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            xpDelta: editingUser.xpDelta + 1000,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +1000
-                      </button>
-                    </div>
-                    <div className="mt-2 h-2 bg-black/60 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-gradient-to-r from-blue-600 to-purple-500 transition-all duration-300"
-                        style={{
-                          width: `${Math.min(
-                            100,
-                            (previewXp / user.maxXp) * 100
-                          )}%`,
-                        }}
-                      />
-                    </div>
-                  </div>
-
-                  {/* Score Section */}
-                  <div>
-                    <label className="block text-xs sm:text-sm text-gray-300 mb-2">
-                      Score
-                    </label>
-                    <div className="flex gap-1 sm:gap-2 flex-wrap">
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            score: (editingUser.score || 0) - 1000,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -1000
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            score: (editingUser.score || 0) - 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -100
-                      </button>
-                      <input
-                        type="number"
-                        value={editingUser.score ?? 0}
-                        onChange={(e) =>
-                          setEditingUser({
-                            ...editingUser,
-                            score: parseInt(e.target.value) || 0,
-                          })
-                        }
-                        className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
-                      />
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            score: (editingUser.score || 0) + 100,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +100
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            score: (editingUser.score || 0) + 1000,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +1000
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Level Section */}
-                  <div>
-                    <label className="block text-xs sm:text-sm text-gray-300 mb-2">
-                      Niveau
-                    </label>
-                    <div className="flex gap-1 sm:gap-2">
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            level: Math.max(1, (editingUser.level || 1) - 1),
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
-                      >
-                        -1
-                      </button>
-                      <input
-                        type="number"
-                        min="1"
-                        value={editingUser.level ?? 1}
-                        onChange={(e) =>
-                          setEditingUser({
-                            ...editingUser,
-                            level: Math.max(1, parseInt(e.target.value) || 1),
-                          })
-                        }
-                        className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
-                      />
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            level: (editingUser.level || 1) + 1,
-                          })
-                        }
-                        className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
-                      >
-                        +1
-                      </button>
-                    </div>
-                  </div>
-
-                  {/* Role Section */}
-                  <div>
-                    <label className="block text-xs sm:text-sm text-gray-300 mb-2">
-                      Rôle
-                    </label>
-                    <div className="flex gap-2">
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            role: "USER",
-                          })
-                        }
-                        className={`flex-1 px-3 sm:px-4 py-2 border rounded text-[10px] sm:text-xs uppercase tracking-widest transition ${
-                          editingUser.role === "USER"
-                            ? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
-                            : "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
-                        }`}
-                      >
-                        USER
-                      </button>
-                      <button
-                        onClick={() =>
-                          setEditingUser({
-                            ...editingUser,
-                            role: "ADMIN",
-                          })
-                        }
-                        className={`flex-1 px-3 sm:px-4 py-2 border rounded text-[10px] sm:text-xs uppercase tracking-widest transition ${
-                          editingUser.role === "ADMIN"
-                            ? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
-                            : "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
-                        }`}
-                      >
-                        ADMIN
-                      </button>
-                    </div>
-                  </div>
-
-                  <div className="flex flex-col sm:flex-row gap-2 pt-2">
-                    <Button
-                      onClick={handleSave}
-                      variant="success"
-                      size="md"
-                      disabled={saving}
-                    >
-                      {saving ? "Enregistrement..." : "Enregistrer"}
-                    </Button>
-                    <Button
-                      onClick={handleCancel}
-                      variant="secondary"
-                      size="md"
-                    >
-                      Annuler
-                    </Button>
+                  <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-gradient-to-r from-red-600 to-green-500"
+                      style={{
+                        width: `${Math.min(
+                          100,
+                          (user.hp / user.maxHp) * 100
+                        )}%`,
+                      }}
+                    />
                   </div>
                 </div>
-              ) : (
-                <div className="flex flex-col sm:flex-row gap-3 sm:gap-4 text-[10px] sm:text-xs">
-                  <div className="flex-1">
-                    <div className="flex justify-between items-center mb-0.5">
-                      <span className="text-gray-400">HP</span>
-                      <span className="text-gray-400">
-                        {user.hp}/{user.maxHp}
-                      </span>
-                    </div>
-                    <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-gradient-to-r from-red-600 to-green-500"
-                        style={{
-                          width: `${Math.min(
-                            100,
-                            (user.hp / user.maxHp) * 100
-                          )}%`,
-                        }}
-                      />
-                    </div>
+                <div className="flex-1">
+                  <div className="flex justify-between items-center mb-0.5">
+                    <span className="text-gray-400">XP</span>
+                    <span className="text-gray-400">
+                      {formatNumber(user.xp)}/{formatNumber(user.maxXp)}
+                    </span>
                   </div>
-                  <div className="flex-1">
-                    <div className="flex justify-between items-center mb-0.5">
-                      <span className="text-gray-400">XP</span>
-                      <span className="text-gray-400">
-                        {formatNumber(user.xp)}/{formatNumber(user.maxXp)}
-                      </span>
-                    </div>
-                    <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
-                      <div
-                        className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
-                        style={{
-                          width: `${Math.min(
-                            100,
-                            (user.xp / user.maxXp) * 100
-                          )}%`,
-                        }}
-                      />
-                    </div>
+                  <div className="h-1.5 bg-black/60 rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-gradient-to-r from-blue-600 to-purple-500"
+                      style={{
+                        width: `${Math.min(
+                          100,
+                          (user.xp / user.maxXp) * 100
+                        )}%`,
+                      }}
+                    />
                   </div>
                 </div>
-              )}
+              </div>
             </Card>
           );
         })
       )}
+
+      {/* Modal d'édition */}
+      {editingUser && currentEditingUserData && (
+        <Modal isOpen={!!editingUser} onClose={handleCancel} size="lg">
+          <div className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <h4 className="text-pixel-gold font-bold text-base sm:text-lg break-words">
+                Modifier l&apos;utilisateur
+              </h4>
+              <CloseButton onClick={handleCancel} size="lg" />
+            </div>
+            <div className="space-y-4">
+              {/* Username Section */}
+              <Input
+                type="text"
+                label="Nom d'utilisateur"
+                value={editingUser.username || ""}
+                onChange={(e) =>
+                  setEditingUser({
+                    ...editingUser,
+                    username: e.target.value,
+                  })
+                }
+                placeholder="Nom d'utilisateur"
+                className="text-xs sm:text-sm px-2 sm:px-3 py-1"
+              />
+
+              {/* Avatar Section */}
+              <div className="flex flex-col items-center gap-3">
+                <label className="block text-xs sm:text-sm text-gray-300 mb-2">
+                  Avatar
+                </label>
+
+                {/* Preview */}
+                <div className="relative">
+                  <Avatar
+                    src={editingUser.avatar}
+                    username={
+                      editingUser.username || currentEditingUserData.username
+                    }
+                    size="lg"
+                    borderClassName="border-2 border-pixel-gold/50"
+                  />
+                  {uploadingAvatar === editingUser.userId && (
+                    <div className="absolute inset-0 bg-black/60 flex items-center justify-center rounded-full">
+                      <div className="text-pixel-gold text-xs">Upload...</div>
+                    </div>
+                  )}
+                </div>
+
+                {/* Avatars par défaut */}
+                <div className="flex flex-col items-center gap-2 w-full">
+                  <label className="block text-pixel-gold text-[10px] sm:text-xs uppercase tracking-widest">
+                    Avatars par défaut
+                  </label>
+                  <div className="flex flex-wrap gap-2 justify-center">
+                    {[
+                      "/avatar-1.jpg",
+                      "/avatar-2.jpg",
+                      "/avatar-3.jpg",
+                      "/avatar-4.jpg",
+                      "/avatar-5.jpg",
+                      "/avatar-6.jpg",
+                    ].map((defaultAvatar) => (
+                      <button
+                        key={defaultAvatar}
+                        type="button"
+                        onClick={() =>
+                          setEditingUser({
+                            ...editingUser,
+                            avatar: defaultAvatar,
+                          })
+                        }
+                        className={`w-12 h-12 sm:w-14 sm:h-14 rounded-full border-2 overflow-hidden transition ${
+                          editingUser.avatar === defaultAvatar
+                            ? "border-pixel-gold scale-110"
+                            : "border-pixel-gold/30 hover:border-pixel-gold/50"
+                        }`}
+                      >
+                        <img
+                          src={defaultAvatar}
+                          alt="Avatar par défaut"
+                          className="w-full h-full object-cover"
+                        />
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Custom Upload */}
+                <div>
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={async (e) => {
+                      const file = e.target.files?.[0];
+                      if (!file) return;
+
+                      setUploadingAvatar(editingUser.userId);
+                      try {
+                        const formData = new FormData();
+                        formData.append("file", file);
+
+                        const response = await fetch(
+                          "/api/admin/avatars/upload",
+                          {
+                            method: "POST",
+                            body: formData,
+                          }
+                        );
+
+                        if (response.ok) {
+                          const data = await response.json();
+                          setEditingUser({
+                            ...editingUser,
+                            avatar: data.url,
+                          });
+                        } else {
+                          alert("Erreur lors de l'upload de l'image");
+                        }
+                      } catch (error) {
+                        console.error("Error uploading image:", error);
+                        alert("Erreur lors de l'upload de l'image");
+                      } finally {
+                        setUploadingAvatar(null);
+                        if (e.target) {
+                          e.target.value = "";
+                        }
+                      }
+                    }}
+                    className="hidden"
+                    id={`avatar-upload-${editingUser.userId}`}
+                  />
+                  <label htmlFor={`avatar-upload-${editingUser.userId}`}>
+                    <Button
+                      variant="primary"
+                      size="sm"
+                      as="span"
+                      className="cursor-pointer"
+                    >
+                      {uploadingAvatar === editingUser.userId
+                        ? "Upload en cours..."
+                        : "Upload un avatar custom"}
+                    </Button>
+                  </label>
+                </div>
+              </div>
+
+              {/* HP Section */}
+              <div>
+                <div className="flex justify-between items-center mb-2">
+                  <label className="text-xs sm:text-sm text-gray-300">
+                    Points de Vie (HP)
+                  </label>
+                  <span className="text-[10px] sm:text-xs text-gray-400">
+                    {previewHp} / {currentEditingUserData.maxHp}
+                  </span>
+                </div>
+                <div className="flex gap-1 sm:gap-2 flex-wrap">
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        hpDelta: editingUser.hpDelta - 100,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
+                  >
+                    -100
+                  </button>
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        hpDelta: editingUser.hpDelta - 10,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
+                  >
+                    -10
+                  </button>
+                  <input
+                    type="number"
+                    value={editingUser.hpDelta || 0}
+                    onChange={(e) =>
+                      setEditingUser({
+                        ...editingUser,
+                        hpDelta: parseInt(e.target.value) || 0,
+                      })
+                    }
+                    className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
+                  />
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        hpDelta: editingUser.hpDelta + 10,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
+                  >
+                    +10
+                  </button>
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        hpDelta: editingUser.hpDelta + 100,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
+                  >
+                    +100
+                  </button>
+                </div>
+                <div className="mt-2 h-2 bg-black/60 rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-gradient-to-r from-red-600 to-green-500 transition-all duration-300"
+                    style={{
+                      width: `${Math.min(
+                        100,
+                        (previewHp / currentEditingUserData.maxHp) * 100
+                      )}%`,
+                    }}
+                  />
+                </div>
+              </div>
+
+              {/* XP Section */}
+              <div>
+                <div className="flex justify-between items-center mb-2">
+                  <label className="text-xs sm:text-sm text-gray-300">
+                    Expérience (XP)
+                  </label>
+                  <span className="text-[10px] sm:text-xs text-gray-400">
+                    {formatNumber(previewXp)} /{" "}
+                    {formatNumber(currentEditingUserData.maxXp)}
+                  </span>
+                </div>
+                <div className="flex gap-1 sm:gap-2 flex-wrap">
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        xpDelta: editingUser.xpDelta - 1000,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
+                  >
+                    -1000
+                  </button>
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        xpDelta: editingUser.xpDelta - 100,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
+                  >
+                    -100
+                  </button>
+                  <input
+                    type="number"
+                    value={editingUser.xpDelta || 0}
+                    onChange={(e) =>
+                      setEditingUser({
+                        ...editingUser,
+                        xpDelta: parseInt(e.target.value) || 0,
+                      })
+                    }
+                    className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
+                  />
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        xpDelta: editingUser.xpDelta + 100,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
+                  >
+                    +100
+                  </button>
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        xpDelta: editingUser.xpDelta + 1000,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
+                  >
+                    +1000
+                  </button>
+                </div>
+                <div className="mt-2 h-2 bg-black/60 rounded-full overflow-hidden">
+                  <div
+                    className="h-full bg-gradient-to-r from-blue-600 to-purple-500 transition-all duration-300"
+                    style={{
+                      width: `${Math.min(
+                        100,
+                        (previewXp / currentEditingUserData.maxXp) * 100
+                      )}%`,
+                    }}
+                  />
+                </div>
+              </div>
+
+              {/* Score Section */}
+              <div>
+                <label className="block text-xs sm:text-sm text-gray-300 mb-2">
+                  Score
+                </label>
+                <div className="flex gap-1 sm:gap-2 flex-wrap">
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        score: (editingUser.score || 0) - 1000,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
+                  >
+                    -1000
+                  </button>
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        score: (editingUser.score || 0) - 100,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
+                  >
+                    -100
+                  </button>
+                  <input
+                    type="number"
+                    value={editingUser.score ?? 0}
+                    onChange={(e) =>
+                      setEditingUser({
+                        ...editingUser,
+                        score: parseInt(e.target.value) || 0,
+                      })
+                    }
+                    className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
+                  />
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        score: (editingUser.score || 0) + 100,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
+                  >
+                    +100
+                  </button>
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        score: (editingUser.score || 0) + 1000,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
+                  >
+                    +1000
+                  </button>
+                </div>
+              </div>
+
+              {/* Level Section */}
+              <div>
+                <label className="block text-xs sm:text-sm text-gray-300 mb-2">
+                  Niveau
+                </label>
+                <div className="flex gap-1 sm:gap-2">
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        level: Math.max(1, (editingUser.level || 1) - 1),
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-red-500/50 bg-red-900/20 text-red-400 text-[10px] sm:text-xs rounded hover:bg-red-900/30 transition flex-shrink-0"
+                  >
+                    -1
+                  </button>
+                  <input
+                    type="number"
+                    min="1"
+                    value={editingUser.level ?? 1}
+                    onChange={(e) =>
+                      setEditingUser({
+                        ...editingUser,
+                        level: Math.max(1, parseInt(e.target.value) || 1),
+                      })
+                    }
+                    className="flex-1 min-w-[60px] px-2 sm:px-3 py-1 bg-black/60 border border-pixel-gold/30 rounded text-white text-xs sm:text-sm text-center"
+                  />
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        level: (editingUser.level || 1) + 1,
+                      })
+                    }
+                    className="px-2 sm:px-3 py-1 border border-green-500/50 bg-green-900/20 text-green-400 text-[10px] sm:text-xs rounded hover:bg-green-900/30 transition flex-shrink-0"
+                  >
+                    +1
+                  </button>
+                </div>
+              </div>
+
+              {/* Role Section */}
+              <div>
+                <label className="block text-xs sm:text-sm text-gray-300 mb-2">
+                  Rôle
+                </label>
+                <div className="flex gap-2">
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        role: "USER",
+                      })
+                    }
+                    className={`flex-1 px-3 sm:px-4 py-2 border rounded text-[10px] sm:text-xs uppercase tracking-widest transition ${
+                      editingUser.role === "USER"
+                        ? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
+                        : "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
+                    }`}
+                  >
+                    USER
+                  </button>
+                  <button
+                    onClick={() =>
+                      setEditingUser({
+                        ...editingUser,
+                        role: "ADMIN",
+                      })
+                    }
+                    className={`flex-1 px-3 sm:px-4 py-2 border rounded text-[10px] sm:text-xs uppercase tracking-widest transition ${
+                      editingUser.role === "ADMIN"
+                        ? "border-pixel-gold bg-pixel-gold/20 text-pixel-gold"
+                        : "border-gray-600/50 bg-gray-900/20 text-gray-400 hover:bg-gray-900/30"
+                    }`}
+                  >
+                    ADMIN
+                  </button>
+                </div>
+              </div>
+
+              <div className="flex flex-col sm:flex-row gap-2 pt-2">
+                <Button
+                  onClick={handleSave}
+                  variant="success"
+                  size="md"
+                  disabled={saving}
+                >
+                  {saving ? "Enregistrement..." : "Enregistrer"}
+                </Button>
+                <Button onClick={handleCancel} variant="secondary" size="md">
+                  Annuler
+                </Button>
+              </div>
+            </div>
+          </div>
+        </Modal>
+      )}
     </div>
   );
 }
diff --git a/components/ui/Modal.tsx b/components/ui/Modal.tsx
index 99b06ae..635a7ee 100644
--- a/components/ui/Modal.tsx
+++ b/components/ui/Modal.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { ReactNode, useEffect } from "react";
+import { createPortal } from "react-dom";
 
 interface ModalProps {
   isOpen: boolean;
@@ -37,7 +38,7 @@ export default function Modal({
 
   if (!isOpen) return null;
 
-  return (
+  const modalContent = (
     <div
       className="fixed inset-0 z-[200] flex items-center justify-center p-4 backdrop-blur-sm"
       style={{
@@ -59,4 +60,11 @@ export default function Modal({
       </div>
     </div>
   );
+
+  // Utiliser un portal pour rendre le modal directement dans le body
+  if (typeof window !== "undefined") {
+    return createPortal(modalContent, document.body);
+  }
+
+  return null;
 }