diff --git a/VEZA_COMPLETE_MVP_TODOLIST.json b/VEZA_COMPLETE_MVP_TODOLIST.json
index 0bc7f5529..bf681f199 100644
--- a/VEZA_COMPLETE_MVP_TODOLIST.json
+++ b/VEZA_COMPLETE_MVP_TODOLIST.json
@@ -6139,7 +6139,7 @@
       "description": "Add role management UI for admins",
       "owner": "frontend",
       "estimated_hours": 4,
-      "status": "todo",
+      "status": "completed",
       "files_involved": [],
       "implementation_steps": [
         {
@@ -6160,7 +6160,30 @@
         "Unit tests",
         "Integration tests"
       ],
-      "notes": ""
+      "notes": "",
+      "completed_at": "2025-12-24T13:13:52.667089",
+      "completion_details": {
+        "files_modified": [
+          "apps/web/src/features/roles/pages/RolesPage.tsx",
+          "apps/web/src/features/roles/services/roleService.ts",
+          "apps/web/src/features/roles/components/CreateRoleModal.tsx",
+          "apps/web/src/features/roles/components/EditRoleModal.tsx",
+          "apps/web/src/features/roles/components/AssignRoleModal.tsx"
+        ],
+        "changes": [
+          "Added CreateRoleModal for creating new roles",
+          "Added EditRoleModal for editing existing roles",
+          "Added AssignRoleModal for assigning roles to users",
+          "Fixed roleService type issues (roleId from number to string)",
+          "Enhanced RolesPage with create/edit/assign functionality",
+          "Added UI section for assigning roles to users by ID",
+          "Integrated all modals with existing role management",
+          "Added proper form validation and error handling",
+          "Added loading states for all async operations",
+          "Added display of user current roles in assign modal"
+        ],
+        "implementation_notes": "Roles page now includes full CRUD operations for roles (create, read, update, delete) and UI for assigning roles to users. All modals use the custom Dialog component. Role assignment includes expiration date support. System roles are protected from editing/deletion."
+      }
     },
     {
       "id": "FE-PAGE-012",
@@ -10711,11 +10734,11 @@
     ]
   },
   "progress_tracking": {
-    "completed": 62,
+    "completed": 63,
     "in_progress": 0,
     "todo": 258,
     "blocked": 0,
-    "last_updated": "2025-12-24T13:09:29.079577",
+    "last_updated": "2025-12-24T13:13:52.667105",
     "completion_percentage": 3.3707865168539324
   }
 }
\ No newline at end of file
diff --git a/apps/web/src/features/roles/components/AssignRoleModal.tsx b/apps/web/src/features/roles/components/AssignRoleModal.tsx
new file mode 100644
index 000000000..2068da67e
--- /dev/null
+++ b/apps/web/src/features/roles/components/AssignRoleModal.tsx
@@ -0,0 +1,149 @@
+import { useState, useEffect } from 'react';
+import { Dialog } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Select } from '@/components/ui/select';
+import { assignRole, getUserRoles } from '../services/roleService';
+import { useToast } from '@/hooks/useToast';
+import { Loader2, UserPlus } from 'lucide-react';
+import type { Role } from '../types/role';
+
+// FE-PAGE-011: Complete Roles page implementation
+
+interface AssignRoleModalProps {
+  userId: string;
+  userName?: string;
+  availableRoles: Role[];
+  open: boolean;
+  onClose: () => void;
+  onRoleAssigned: () => void;
+}
+
+export function AssignRoleModal({
+  userId,
+  userName,
+  availableRoles,
+  open,
+  onClose,
+  onRoleAssigned,
+}: AssignRoleModalProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingUserRoles, setIsLoadingUserRoles] = useState(false);
+  const [selectedRoleId, setSelectedRoleId] = useState<string>('');
+  const [expiresAt, setExpiresAt] = useState<string>('');
+  const [userRoles, setUserRoles] = useState<Role[]>([]);
+  const { success, error } = useToast();
+
+  useEffect(() => {
+    if (open && userId) {
+      setIsLoadingUserRoles(true);
+      getUserRoles(userId)
+        .then((roles) => {
+          setUserRoles(roles);
+        })
+        .catch((err) => {
+          console.error('Failed to load user roles:', err);
+        })
+        .finally(() => {
+          setIsLoadingUserRoles(false);
+        });
+    }
+  }, [open, userId]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!selectedRoleId) {
+      error('Please select a role');
+      return;
+    }
+
+    setIsLoading(true);
+
+    try {
+      await assignRole(userId, {
+        role_id: selectedRoleId,
+        expires_at: expiresAt || undefined,
+      });
+      success('Role assigned successfully');
+      onClose();
+      setSelectedRoleId('');
+      setExpiresAt('');
+      onRoleAssigned();
+    } catch (err: any) {
+      error(err.message || 'Failed to assign role');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Filter out roles that user already has
+  const availableRolesToAssign = availableRoles.filter(
+    (role) => !userRoles.some((ur) => ur.id === role.id),
+  );
+
+  const selectOptions = availableRolesToAssign.map((role) => ({
+    value: role.id,
+    label: `${role.display_name} (${role.name})`,
+  }));
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title={`Assign Role${userName ? ` to ${userName}` : ''}`}
+      onConfirm={handleSubmit}
+      confirmLabel={isLoading ? 'Assigning...' : 'Assign Role'}
+      cancelLabel="Cancel"
+    >
+      {isLoadingUserRoles ? (
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="role-select">Role *</Label>
+            {availableRolesToAssign.length === 0 ? (
+              <div className="p-2 text-sm text-muted-foreground border rounded">
+                No available roles to assign
+              </div>
+            ) : (
+              <Select
+                options={selectOptions}
+                value={selectedRoleId}
+                onChange={(value) => setSelectedRoleId(Array.isArray(value) ? value[0] : value)}
+                placeholder="Select a role"
+              />
+            )}
+          </div>
+          <div>
+            <Label htmlFor="expires-at">Expires At (optional)</Label>
+            <Input
+              id="expires-at"
+              type="datetime-local"
+              value={expiresAt}
+              onChange={(e) => setExpiresAt(e.target.value)}
+            />
+            <p className="text-xs text-muted-foreground mt-1">
+              Leave empty for permanent assignment
+            </p>
+          </div>
+          {userRoles.length > 0 && (
+            <div>
+              <Label>Current Roles</Label>
+              <div className="mt-2 space-y-1">
+                {userRoles.map((role) => (
+                  <div key={role.id} className="text-sm text-muted-foreground">
+                    • {role.display_name}
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+        </form>
+      )}
+    </Dialog>
+  );
+}
+
diff --git a/apps/web/src/features/roles/components/CreateRoleModal.tsx b/apps/web/src/features/roles/components/CreateRoleModal.tsx
new file mode 100644
index 000000000..2a7abbe15
--- /dev/null
+++ b/apps/web/src/features/roles/components/CreateRoleModal.tsx
@@ -0,0 +1,105 @@
+import { useState } from 'react';
+import { Dialog } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { createRole } from '../services/roleService';
+import { useToast } from '@/hooks/useToast';
+import { Loader2, Plus } from 'lucide-react';
+
+// FE-PAGE-011: Complete Roles page implementation
+
+interface CreateRoleModalProps {
+  onRoleCreated: () => void;
+}
+
+export function CreateRoleModal({ onRoleCreated }: CreateRoleModalProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [formData, setFormData] = useState({
+    name: '',
+    display_name: '',
+    description: '',
+    is_active: true,
+  });
+  const { success, error } = useToast();
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      await createRole(formData);
+      success('Role created successfully');
+      setIsOpen(false);
+      setFormData({ name: '', display_name: '', description: '', is_active: true });
+      onRoleCreated();
+    } catch (err: any) {
+      error(err.message || 'Failed to create role');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Button onClick={() => setIsOpen(true)}>
+        <Plus className="h-4 w-4 mr-2" />
+        Create Role
+      </Button>
+      <Dialog
+        open={isOpen}
+        onClose={() => setIsOpen(false)}
+        title="Create New Role"
+        onConfirm={handleSubmit}
+        confirmLabel={isLoading ? 'Creating...' : 'Create Role'}
+        cancelLabel="Cancel"
+      >
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="name">Name *</Label>
+            <Input
+              id="name"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              placeholder="e.g., content_moderator"
+              required
+            />
+          </div>
+          <div>
+            <Label htmlFor="display_name">Display Name *</Label>
+            <Input
+              id="display_name"
+              value={formData.display_name}
+              onChange={(e) => setFormData({ ...formData, display_name: e.target.value })}
+              placeholder="e.g., Content Moderator"
+              required
+            />
+          </div>
+          <div>
+            <Label htmlFor="description">Description</Label>
+            <Textarea
+              id="description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              placeholder="Role description..."
+              rows={3}
+            />
+          </div>
+          <div className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              id="is_active"
+              checked={formData.is_active}
+              onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
+              className="rounded"
+            />
+            <Label htmlFor="is_active">Active</Label>
+          </div>
+        </form>
+      </Dialog>
+    </>
+  );
+}
+
diff --git a/apps/web/src/features/roles/components/EditRoleModal.tsx b/apps/web/src/features/roles/components/EditRoleModal.tsx
new file mode 100644
index 000000000..8c01bae45
--- /dev/null
+++ b/apps/web/src/features/roles/components/EditRoleModal.tsx
@@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react';
+import { Dialog } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { updateRole, getRole } from '../services/roleService';
+import { useToast } from '@/hooks/useToast';
+import { Loader2 } from 'lucide-react';
+import type { Role } from '../types/role';
+
+// FE-PAGE-011: Complete Roles page implementation
+
+interface EditRoleModalProps {
+  role: Role;
+  open: boolean;
+  onClose: () => void;
+  onRoleUpdated: () => void;
+}
+
+export function EditRoleModal({ role, open, onClose, onRoleUpdated }: EditRoleModalProps) {
+  const [isLoading, setIsLoading] = useState(false);
+  const [isLoadingRole, setIsLoadingRole] = useState(false);
+  const [formData, setFormData] = useState({
+    name: role.name,
+    display_name: role.display_name,
+    description: role.description,
+    is_active: role.is_active,
+  });
+  const { success, error } = useToast();
+
+  useEffect(() => {
+    if (open && role.id) {
+      setIsLoadingRole(true);
+      getRole(role.id)
+        .then((loadedRole) => {
+          setFormData({
+            name: loadedRole.name,
+            display_name: loadedRole.display_name,
+            description: loadedRole.description,
+            is_active: loadedRole.is_active,
+          });
+        })
+        .catch((err) => {
+          error(err.message || 'Failed to load role');
+        })
+        .finally(() => {
+          setIsLoadingRole(false);
+        });
+    }
+  }, [open, role.id, error]);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setIsLoading(true);
+
+    try {
+      await updateRole(role.id, formData);
+      success('Role updated successfully');
+      onClose();
+      onRoleUpdated();
+    } catch (err: any) {
+      error(err.message || 'Failed to update role');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      title="Edit Role"
+      onConfirm={handleSubmit}
+      confirmLabel={isLoading ? 'Updating...' : 'Update Role'}
+      cancelLabel="Cancel"
+    >
+      {isLoadingRole ? (
+        <div className="flex justify-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin" />
+        </div>
+      ) : (
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <div>
+            <Label htmlFor="edit-name">Name *</Label>
+            <Input
+              id="edit-name"
+              value={formData.name}
+              onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+              required
+              disabled={role.is_system}
+            />
+            {role.is_system && (
+              <p className="text-xs text-muted-foreground mt-1">System roles cannot be renamed</p>
+            )}
+          </div>
+          <div>
+            <Label htmlFor="edit-display_name">Display Name *</Label>
+            <Input
+              id="edit-display_name"
+              value={formData.display_name}
+              onChange={(e) => setFormData({ ...formData, display_name: e.target.value })}
+              required
+            />
+          </div>
+          <div>
+            <Label htmlFor="edit-description">Description</Label>
+            <Textarea
+              id="edit-description"
+              value={formData.description}
+              onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+              rows={3}
+            />
+          </div>
+          <div className="flex items-center space-x-2">
+            <input
+              type="checkbox"
+              id="edit-is_active"
+              checked={formData.is_active}
+              onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
+              className="rounded"
+              disabled={role.is_system}
+            />
+            <Label htmlFor="edit-is_active">Active</Label>
+            {role.is_system && (
+              <p className="text-xs text-muted-foreground ml-2">System roles are always active</p>
+            )}
+          </div>
+        </form>
+      )}
+    </Dialog>
+  );
+}
+
diff --git a/apps/web/src/features/roles/pages/RolesPage.tsx b/apps/web/src/features/roles/pages/RolesPage.tsx
index 2625fb6ab..be4c8f838 100644
--- a/apps/web/src/features/roles/pages/RolesPage.tsx
+++ b/apps/web/src/features/roles/pages/RolesPage.tsx
@@ -14,12 +14,24 @@ import {
 } from '@/components/ui/table';
 import { Badge } from '@/components/ui/badge';
 import { toast } from 'react-hot-toast';
-import { Shield, Edit, Trash2, Plus } from 'lucide-react';
+import { Shield, Edit, Trash2, Plus, UserPlus } from 'lucide-react';
+import { CreateRoleModal } from '../components/CreateRoleModal';
+import { EditRoleModal } from '../components/EditRoleModal';
+import { AssignRoleModal } from '../components/AssignRoleModal';
+import { Input } from '@/components/ui/input';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+
+// FE-PAGE-011: Complete Roles page implementation
 
 export function RolesPage() {
   const [roles, setRoles] = useState<Role[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [editingRole, setEditingRole] = useState<Role | null>(null);
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isAssignModalOpen, setIsAssignModalOpen] = useState(false);
+  const [assignUserId, setAssignUserId] = useState<string>('');
+  const [assignUserName, setAssignUserName] = useState<string>('');
 
   const loadRoles = async () => {
     try {
@@ -76,6 +88,17 @@ export function RolesPage() {
     }
   };
 
+  const handleEdit = (role: Role) => {
+    setEditingRole(role);
+    setIsEditModalOpen(true);
+  };
+
+  const handleAssignRole = (userId: string, userName?: string) => {
+    setAssignUserId(userId);
+    setAssignUserName(userName || '');
+    setIsAssignModalOpen(true);
+  };
+
   if (isLoading) {
     return (
       <div className="container mx-auto px-4 py-8">
@@ -113,10 +136,7 @@ export function RolesPage() {
             Manage user roles and permissions
           </p>
         </div>
-        <Button>
-          <Plus className="h-4 w-4 mr-2" />
-          Create Role
-        </Button>
+        <CreateRoleModal onRoleCreated={loadRoles} />
       </div>
 
       <Card>
@@ -182,6 +202,7 @@ export function RolesPage() {
                         <Button
                           variant="ghost"
                           size="sm"
+                          onClick={() => handleEdit(role)}
                           disabled={role.is_system}
                         >
                           <Edit className="h-4 w-4" />
@@ -203,6 +224,67 @@ export function RolesPage() {
           )}
         </CardContent>
       </Card>
+
+      {/* FE-PAGE-011: Assign Role Section */}
+      <Card className="mt-6">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <UserPlus className="h-5 w-5" />
+            Assign Role to User
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex gap-2">
+            <Input
+              placeholder="User ID"
+              value={assignUserId}
+              onChange={(e) => setAssignUserId(e.target.value)}
+              className="flex-1"
+            />
+            <Input
+              placeholder="User Name (optional)"
+              value={assignUserName}
+              onChange={(e) => setAssignUserName(e.target.value)}
+              className="flex-1"
+            />
+            <Button
+              onClick={() => handleAssignRole(assignUserId, assignUserName)}
+              disabled={!assignUserId}
+            >
+              <UserPlus className="h-4 w-4 mr-2" />
+              Assign Role
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Modals */}
+      {editingRole && (
+        <EditRoleModal
+          role={editingRole}
+          open={isEditModalOpen}
+          onClose={() => {
+            setIsEditModalOpen(false);
+            setEditingRole(null);
+          }}
+          onRoleUpdated={loadRoles}
+        />
+      )}
+
+      <AssignRoleModal
+        userId={assignUserId}
+        userName={assignUserName}
+        availableRoles={roles.filter((r) => r.is_active)}
+        open={isAssignModalOpen}
+        onClose={() => {
+          setIsAssignModalOpen(false);
+          setAssignUserId('');
+          setAssignUserName('');
+        }}
+        onRoleAssigned={() => {
+          // Could refresh user roles here if needed
+        }}
+      />
     </div>
   );
 }
diff --git a/apps/web/src/features/roles/services/roleService.ts b/apps/web/src/features/roles/services/roleService.ts
index 38595000f..e9af1f4fb 100644
--- a/apps/web/src/features/roles/services/roleService.ts
+++ b/apps/web/src/features/roles/services/roleService.ts
@@ -44,7 +44,7 @@ export async function getRoles(): Promise<Role[]> {
  * @returns Le rôle
  * @throws Error si la requête échoue
  */
-export async function getRole(roleId: number): Promise<Role> {
+export async function getRole(roleId: string): Promise<Role> {
   try {
     const response = await apiClient.get<{ role: Role }>(`/roles/${roleId}`);
     return response.data.role;
@@ -151,7 +151,7 @@ export async function assignRole(
  */
 export async function revokeRole(
   userId: string,
-  roleId: number,
+  roleId: string,
 ): Promise<void> {
   requireFeature('ROLE_MANAGEMENT');
   try {
@@ -216,7 +216,7 @@ export async function createRole(role: Partial<Role>): Promise<Role> {
  * @throws Error si la requête échoue
  */
 export async function updateRole(
-  roleId: number,
+  roleId: string,
   updates: Partial<Role>,
 ): Promise<void> {
   requireFeature('ROLE_MANAGEMENT');
@@ -252,7 +252,7 @@ export async function updateRole(
  * @param roleId ID du rôle à supprimer
  * @throws Error si la requête échoue
  */
-export async function deleteRole(roleId: number): Promise<void> {
+export async function deleteRole(roleId: string): Promise<void> {
   requireFeature('ROLE_MANAGEMENT');
   try {
     await apiClient.delete(`/roles/${roleId}`);