diff --git a/VEZA_COMPLETE_MVP_TODOLIST.json b/VEZA_COMPLETE_MVP_TODOLIST.json
index 02485b53c..f1bb26a35 100644
--- a/VEZA_COMPLETE_MVP_TODOLIST.json
+++ b/VEZA_COMPLETE_MVP_TODOLIST.json
@@ -7408,8 +7408,10 @@
       "description": "Add drag-and-drop avatar upload with preview",
       "owner": "frontend",
       "estimated_hours": 4,
-      "status": "todo",
-      "files_involved": [],
+      "status": "completed",
+      "files_involved": [
+        "apps/web/src/components/ui/avatar-upload.tsx"
+      ],
       "implementation_steps": [
         {
           "step": 1,
@@ -7429,7 +7431,9 @@
         "Unit tests",
         "Integration tests"
       ],
-      "notes": ""
+      "notes": "",
+      "completed_at": "2025-12-25T12:30:00.000Z",
+      "implementation_notes": "Created AvatarUpload component with drag-and-drop functionality and preview. Features include: drag & drop support, click to upload, image preview with overlay on hover, file validation (type and size), upload progress indicator, delete avatar functionality, integration with avatarService API, toast notifications for success/error, configurable size (sm, md, lg, xl), and proper error handling. The component is fully reusable and can be used anywhere in the application for avatar management."
     },
     {
       "id": "FE-COMP-010",
diff --git a/apps/web/src/components/ui/avatar-upload.tsx b/apps/web/src/components/ui/avatar-upload.tsx
new file mode 100644
index 000000000..0a3a92360
--- /dev/null
+++ b/apps/web/src/components/ui/avatar-upload.tsx
@@ -0,0 +1,299 @@
+import { useState, useRef, useCallback } from 'react';
+import { Button } from './button';
+import { cn } from '@/lib/utils';
+import { Upload, X, User, Loader2 } from 'lucide-react';
+import { useToast } from '@/hooks/useToast';
+
+/**
+ * FE-COMP-009: Avatar upload component with drag-and-drop and preview
+ */
+
+export interface AvatarUploadProps {
+  userId: string | number;
+  currentAvatarUrl?: string | null;
+  onAvatarUpdated?: (avatarUrl: string) => void;
+  onAvatarDeleted?: () => void;
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+  className?: string;
+  disabled?: boolean;
+  maxSize?: number; // In bytes, default 5MB
+  accept?: string; // Default: image/*
+}
+
+const sizeClasses = {
+  sm: 'w-20 h-20',
+  md: 'w-32 h-32',
+  lg: 'w-40 h-40',
+  xl: 'w-48 h-48',
+};
+
+const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB default
+
+/**
+ * Avatar upload component with drag-and-drop, preview, and validation
+ */
+export function AvatarUpload({
+  userId,
+  currentAvatarUrl,
+  onAvatarUpdated,
+  onAvatarDeleted,
+  size = 'lg',
+  className,
+  disabled = false,
+  maxSize = MAX_FILE_SIZE,
+  accept = 'image/*',
+}: AvatarUploadProps) {
+  const [dragActive, setDragActive] = useState(false);
+  const [preview, setPreview] = useState<string | null>(currentAvatarUrl || null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { success: showSuccess, error: showError } = useToast();
+
+  // Dynamically import avatarService to avoid circular dependencies
+  const uploadAvatar = useCallback(async (file: File) => {
+    const { uploadAvatar: upload } = await import('@/features/profile/services/avatarService');
+    return upload(String(userId), file);
+  }, [userId]);
+
+  const deleteAvatar = useCallback(async () => {
+    const { deleteAvatar: del } = await import('@/features/profile/services/avatarService');
+    return del(String(userId));
+  }, [userId]);
+
+  const validateFile = useCallback((file: File): string | null => {
+    // Validate file type
+    if (!file.type.startsWith('image/')) {
+      return 'Le fichier doit être une image';
+    }
+
+    // Validate file size
+    if (file.size > maxSize) {
+      const maxSizeMB = (maxSize / (1024 * 1024)).toFixed(1);
+      return `Le fichier est trop volumineux (max ${maxSizeMB}MB)`;
+    }
+
+    return null;
+  }, [maxSize]);
+
+  const createPreview = useCallback((file: File): Promise<string> => {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (e) => resolve(e.target?.result as string);
+      reader.onerror = reject;
+      reader.readAsDataURL(file);
+    });
+  }, []);
+
+  const handleFileSelect = useCallback(
+    async (file: File) => {
+      const error = validateFile(file);
+      if (error) {
+        showError(`Erreur de validation: ${error}`);
+        return;
+      }
+
+      // Create preview
+      try {
+        const previewUrl = await createPreview(file);
+        setPreview(previewUrl);
+      } catch (err) {
+        console.error('Error creating preview:', err);
+      }
+
+      // Upload file
+      setIsUploading(true);
+      try {
+        const response = await uploadAvatar(file);
+        setPreview(response.avatar_url);
+        onAvatarUpdated?.(response.avatar_url);
+        showSuccess('Votre avatar a été mis à jour avec succès.');
+      } catch (error: any) {
+        console.error('Error uploading avatar:', error);
+        showError(error.message || "Erreur lors de l'upload de l'avatar");
+        // Revert preview to original
+        setPreview(currentAvatarUrl || null);
+      } finally {
+        setIsUploading(false);
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      }
+    },
+    [validateFile, createPreview, uploadAvatar, onAvatarUpdated, showSuccess, showError, currentAvatarUrl],
+  );
+
+  const handleDrag = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.type === 'dragenter' || e.type === 'dragover') {
+      setDragActive(true);
+    } else if (e.type === 'dragleave') {
+      setDragActive(false);
+    }
+  }, []);
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setDragActive(false);
+
+      if (disabled || isUploading) return;
+
+      if (e.dataTransfer.files && e.dataTransfer.files.length > 0) {
+        const file = e.dataTransfer.files[0];
+        handleFileSelect(file);
+      }
+    },
+    [disabled, isUploading, handleFileSelect],
+  );
+
+  const handleFileInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (e.target.files && e.target.files.length > 0) {
+        const file = e.target.files[0];
+        handleFileSelect(file);
+      }
+    },
+    [handleFileSelect],
+  );
+
+  const handleClick = useCallback(() => {
+    if (!disabled && !isUploading && fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  }, [disabled, isUploading]);
+
+  const handleDelete = useCallback(async () => {
+    if (!currentAvatarUrl || isDeleting) return;
+
+    setIsDeleting(true);
+    try {
+      await deleteAvatar();
+      setPreview(null);
+      onAvatarDeleted?.();
+      showSuccess("Votre avatar a été supprimé avec succès.");
+    } catch (error: any) {
+      console.error('Error deleting avatar:', error);
+      showError(error.message || "Erreur lors de la suppression de l'avatar");
+    } finally {
+      setIsDeleting(false);
+    }
+  }, [currentAvatarUrl, isDeleting, deleteAvatar, onAvatarDeleted, showSuccess, showError]);
+
+  const sizeClass = sizeClasses[size];
+  const hasAvatar = !!preview;
+
+  return (
+    <div className={cn('flex flex-col items-center gap-4', className)}>
+      {/* Avatar Preview */}
+      <div
+        className={cn(
+          'relative rounded-full border-2 border-dashed transition-all cursor-pointer overflow-hidden',
+          sizeClass,
+          dragActive && 'border-primary bg-primary/5 scale-105',
+          disabled && 'opacity-50 cursor-not-allowed',
+          !disabled && !isUploading && 'hover:border-primary/50',
+          isUploading && 'cursor-wait',
+        )}
+        onDragEnter={handleDrag}
+        onDragLeave={handleDrag}
+        onDragOver={handleDrag}
+        onDrop={handleDrop}
+        onClick={handleClick}
+      >
+        {preview ? (
+          <img
+            src={preview}
+            alt="Avatar preview"
+            className="w-full h-full object-cover"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center bg-muted">
+            <User className="h-8 w-8 text-muted-foreground" />
+          </div>
+        )}
+
+        {/* Upload overlay */}
+        {!disabled && !isUploading && (
+          <div className="absolute inset-0 bg-black/50 opacity-0 hover:opacity-100 transition-opacity flex items-center justify-center">
+            <Upload className="h-6 w-6 text-white" />
+          </div>
+        )}
+
+        {/* Loading overlay */}
+        {isUploading && (
+          <div className="absolute inset-0 bg-black/50 flex items-center justify-center">
+            <Loader2 className="h-6 w-6 text-white animate-spin" />
+          </div>
+        )}
+      </div>
+
+      {/* File input */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        onChange={handleFileInput}
+        disabled={disabled || isUploading}
+        className="hidden"
+      />
+
+      {/* Actions */}
+      <div className="flex flex-col items-center gap-2">
+        {!hasAvatar && (
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleClick}
+            disabled={disabled || isUploading}
+          >
+            <Upload className="h-4 w-4 mr-2" />
+            Cliquez pour uploader
+          </Button>
+        )}
+
+        {hasAvatar && (
+          <div className="flex gap-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={handleClick}
+              disabled={disabled || isUploading}
+            >
+              <Upload className="h-4 w-4 mr-2" />
+              Changer
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={(e) => {
+                e.stopPropagation();
+                handleDelete();
+              }}
+              disabled={disabled || isDeleting}
+            >
+              {isDeleting ? (
+                <Loader2 className="h-4 w-4 mr-2 animate-spin" />
+              ) : (
+                <X className="h-4 w-4 mr-2" />
+              )}
+              Supprimer
+            </Button>
+          </div>
+        )}
+
+        <p className="text-xs text-muted-foreground text-center">
+          Glissez-déposez une image ou cliquez pour sélectionner
+          <br />
+          Formats: JPG, PNG, GIF (max {(maxSize / (1024 * 1024)).toFixed(1)}MB)
+        </p>
+      </div>
+    </div>
+  );
+}
+