diff --git a/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor b/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor
new file mode 100644
index 0000000..6181c1f
--- /dev/null
+++ b/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor
@@ -0,0 +1,82 @@
+@using VeraxShield.modele.utilisateurs;
+@using Microsoft.AspNetCore.Components;
+@using VeraxShield.composants.modals;
+
+<DataGrid   TItem="Utilisateur"
+            Data="@Utilisateurs"
+            @bind-SelectedRow="@utilisateurSelectionne"
+            Responsive
+            ShowPager
+            ShowPageSizes
+            PagerPosition="DataGridPagerPosition.TopAndBottom"
+            PagerOptions="new(){ ButtonSize=Size.Small }"
+            OnUtilisateurSupprime="HandleUtilisateurSupprime">
+
+    <DataGridColumns>
+
+        <DataGridCommandColumn />
+
+         <DataGridColumn Field="@nameof(Utilisateur.Pseudo)" Caption="Pseudo" Sortable="false" />
+         <DataGridColumn Field="@nameof(Utilisateur.Prenom)" Caption="Prenom" Editable />
+         <DataGridColumn Field="@nameof(Utilisateur.Nom)" Caption="Nom" Editable />
+         <DataGridColumn Field="@nameof(Utilisateur.IsBan)" Caption="Banissement" Editable />
+
+        <DataGridColumn Field="@nameof(Utilisateur.Pseudo)" Caption="Gerer">
+        <DisplayTemplate>
+            <button type="button" class="btn btn-primary" @onclick="() => onClickBoutonSuppression(context.Pseudo)"><i class="fa fa-trash"></i> Supprimer</button>
+            <button type="button" class="btn btn-primary" @onclick="() => onClickBoutonModification(context.Pseudo)"><i class="fa fa-trash"></i> Modifier</button>
+        </DisplayTemplate>
+    </DataGridColumn>
+
+    </DataGridColumns>
+
+    <PageButtonTemplate>
+
+        <Span TextColor="TextColor.Success">
+            @context.PageNumber
+        </Span>
+    </PageButtonTemplate>
+
+    <NextPageButtonTemplate><Icon Name="IconName.StepForward" TextColor="TextColor.Success" /></NextPageButtonTemplate>
+    <PreviousPageButtonTemplate><Icon Name="IconName.StepBackward" TextColor="TextColor.Success" /></PreviousPageButtonTemplate>
+    <LastPageButtonTemplate><Icon Name="IconName.Forward" TextColor="TextColor.Success" /></LastPageButtonTemplate>
+    <FirstPageButtonTemplate><Icon Name="IconName.Backward" TextColor="TextColor.Success" /></FirstPageButtonTemplate>
+    <TotalItemsTemplate><Badge Color="Color.Success">@context.TotalItems total items</Badge></TotalItemsTemplate>
+    <TotalItemsShortTemplate><Badge Color="Color.Success">@context.TotalItems</Badge></TotalItemsShortTemplate>
+
+        <ItemsPerPageTemplate></ItemsPerPageTemplate>
+
+        <PageSelectorTemplate>
+
+            <Select TextColor="TextColor.Success" @bind-SelectedValue="@context.CurrentPage" Size="Size.Small">
+                @for (int i = context.FirstVisiblePage; i <= context.LastVisiblePage; ++i)
+                {
+                    var pageNumber = i;
+                    <SelectItem Value="@pageNumber">@pageNumber</SelectItem>
+                }
+            </Select>
+        </PageSelectorTemplate>
+
+        <PageSizesTemplate>
+            <Select TextColor="TextColor.Success" @bind-SelectedValue="@context.CurrentPageSize" Size="Size.Small">
+            @foreach (var curPageSize in context.PageSizes)
+            {
+                <SelectItem Value="@curPageSize">@curPageSize</SelectItem>
+            }
+            </Select>
+    </PageSizesTemplate>
+</DataGrid>
+
+<div>
+    <NavLink class="btn btn-primary" href="/utilisateurs/ajouter" Match="NavLinkMatch.All">
+        <i class="fa fa-plus"></i> Ajouter
+    </NavLink>
+</div>
+
+<div>
+    <ModalSuppressionUtilisateur
+        utilisateur="@utilisateurSelectionne"
+        @ref="Modal"
+        modalFerme="fermetureModal" />
+</div>
+
diff --git a/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor.cs b/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor.cs
new file mode 100644
index 0000000..bf3996e
--- /dev/null
+++ b/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor.cs
@@ -0,0 +1,82 @@
+using Microsoft.AspNetCore.Components;
+using VeraxShield.composants.formulaires.modeles;
+using VeraxShield.factories;
+using VeraxShield.modele.utilisateurs;
+using VeraxShield.services.UtilisateursDataService;
+using VeraxShield.composants.modals;
+
+namespace VeraxShield.composants.affichages.utilisateurs
+{
+    public partial class DatagridUtilisateurs
+    {
+        [Inject]
+		private IUtilisateursDataService utilisateursDataService { get; set; }
+
+		public List<Utilisateur> Utilisateurs { get; set; }
+
+		[Inject]
+		private NavigationManager NavigationManager { get; set; }
+
+		private Utilisateur? utilisateurSelectionne;
+
+		[Parameter]
+		public ModalSuppressionUtilisateur Modal {get; set;}
+
+		protected override async Task OnInitializedAsync()
+		{
+            //await this.utilisateursDataService.resetDataUtilisateurs();
+
+			this.utilisateurSelectionne = null;
+            this.Utilisateurs = await this.utilisateursDataService.getAllUtilisateurs();
+			await base.OnInitializedAsync();
+		}
+
+        private async Task HandleUtilisateurSupprime()
+        {
+            this.Utilisateurs = await this.utilisateursDataService.getAllUtilisateurs();
+            StateHasChanged(); // Actualiser la vue
+        }
+
+		public async Task fermetureModal(bool val) {
+
+			if (val) {
+				await this.supprimerUtilisateur(this.utilisateurSelectionne);
+			}
+		}
+
+		public async Task supprimerUtilisateur(Utilisateur u)
+		{
+			await this.utilisateursDataService.SupprimerUtilisateur(u);
+			this.Utilisateurs = await this.utilisateursDataService.getAllUtilisateurs();
+			
+			this.NavigationManager.NavigateTo("/utilisateurs/liste");
+		}
+
+		public async Task afficherModal()
+		{
+			if (this.Modal != null) {
+				await this.Modal.afficher();
+			}
+		}
+
+		public void modifierUtilisateur()
+		{
+			if (this.utilisateurSelectionne != null)
+			{
+				this.NavigationManager.NavigateTo("/utilisateurs/modifier/" + utilisateurSelectionne.Pseudo);
+			}
+		}
+
+		public async Task onClickBoutonSuppression(String Pseudo)
+		{
+			this.utilisateurSelectionne = await this.utilisateursDataService.getUtilisateurFromPseudo(Pseudo);
+			await this.afficherModal();
+		}
+
+		public async Task onClickBoutonModification(String Pseudo)
+		{
+			this.utilisateurSelectionne = await this.utilisateursDataService.getUtilisateurFromPseudo(Pseudo);
+			this.modifierUtilisateur();
+		}
+    }
+}
\ No newline at end of file
diff --git a/VeraxShield/VeraxShield/pages/_Imports.razor b/VeraxShield/VeraxShield/pages/_Imports.razor
index 03978f5..549c64c 100644
--- a/VeraxShield/VeraxShield/pages/_Imports.razor
+++ b/VeraxShield/VeraxShield/pages/_Imports.razor
@@ -1,3 +1,4 @@
 @using VeraxShield.composants
 @using VeraxShield.composants.modals
-@using VeraxShield.composants.formulaires
\ No newline at end of file
+@using VeraxShield.composants.formulaires
+@using VeraxShield.composants.affichages
\ No newline at end of file
diff --git a/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor b/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor
index 57c6276..5517f7e 100644
--- a/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor
+++ b/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor
@@ -1,85 +1,11 @@
-@using VeraxShield.modele.utilisateurs;
+@using VeraxShield.composants.affichages.utilisateurs;
 
 @page "/utilisateurs/liste"
 <h1>Utilisateurs de Verax</h1>
 
-<DataGrid   TItem="Utilisateur"
-            Data="@Utilisateurs"
-            @bind-SelectedRow="@utilisateurSelectionne"
-            Responsive
-            ShowPager
-            ShowPageSizes
-            PagerPosition="DataGridPagerPosition.TopAndBottom"
-            PagerOptions="new(){ ButtonSize=Size.Small }"
-            OnUtilisateurSupprime="HandleUtilisateurSupprime">
+<DatagridUtilisateurs/>
 
-    <DataGridColumns>
 
-        <DataGridCommandColumn />
-
-         <DataGridColumn Field="@nameof(Utilisateur.Pseudo)" Caption="Pseudo" Sortable="false" />
-         <DataGridColumn Field="@nameof(Utilisateur.Prenom)" Caption="Prenom" Editable />
-         <DataGridColumn Field="@nameof(Utilisateur.Nom)" Caption="Nom" Editable />
-         <DataGridColumn Field="@nameof(Utilisateur.IsBan)" Caption="Banissement" Editable />
-    </DataGridColumns>
-
-    <PageButtonTemplate>
-
-        <Span TextColor="TextColor.Success">
-            @context.PageNumber
-        </Span>
-    </PageButtonTemplate>
-
-    <NextPageButtonTemplate><Icon Name="IconName.StepForward" TextColor="TextColor.Success" /></NextPageButtonTemplate>
-    <PreviousPageButtonTemplate><Icon Name="IconName.StepBackward" TextColor="TextColor.Success" /></PreviousPageButtonTemplate>
-    <LastPageButtonTemplate><Icon Name="IconName.Forward" TextColor="TextColor.Success" /></LastPageButtonTemplate>
-    <FirstPageButtonTemplate><Icon Name="IconName.Backward" TextColor="TextColor.Success" /></FirstPageButtonTemplate>
-    <TotalItemsTemplate><Badge Color="Color.Success">@context.TotalItems total items</Badge></TotalItemsTemplate>
-    <TotalItemsShortTemplate><Badge Color="Color.Success">@context.TotalItems</Badge></TotalItemsShortTemplate>
-
-        <ItemsPerPageTemplate></ItemsPerPageTemplate>
-
-        <PageSelectorTemplate>
-
-            <Select TextColor="TextColor.Success" @bind-SelectedValue="@context.CurrentPage" Size="Size.Small">
-                @for (int i = context.FirstVisiblePage; i <= context.LastVisiblePage; ++i)
-                {
-                    var pageNumber = i;
-                    <SelectItem Value="@pageNumber">@pageNumber</SelectItem>
-                }
-            </Select>
-        </PageSelectorTemplate>
-
-        <PageSizesTemplate>
-            <Select TextColor="TextColor.Success" @bind-SelectedValue="@context.CurrentPageSize" Size="Size.Small">
-            @foreach (var curPageSize in context.PageSizes)
-            {
-                <SelectItem Value="@curPageSize">@curPageSize</SelectItem>
-            }
-            </Select>
-    </PageSizesTemplate>
-</DataGrid>
-
-<div>
-    <NavLink class="btn btn-primary" href="/utilisateurs/ajouter" Match="NavLinkMatch.All">
-        <i class="fa fa-plus"></i> Ajouter
-    </NavLink>
-</div>
-
-<div>
-    <Button Color="Color.Primary" Clicked="@modifierUtilisateur">Modifier</Button>
-</div>
-
-<div>
-    <Button Color="Color.Primary" Clicked="@afficherModal">Supprimer</Button>
-</div>
-
-<div>
-    <ModalSuppressionUtilisateur
-        @ref ="Modal"
-        utilisateur="@utilisateurSelectionne"
-        modalFerme="fermetureModal"/>
-</div>
 
 
 
diff --git a/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor.cs b/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor.cs
index 2016851..85400ca 100644
--- a/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor.cs
+++ b/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor.cs
@@ -7,62 +7,6 @@ namespace VeraxShield.pages.utilisateurs
 {
 	public partial class ListeUtilisateurs
 	{
-		[Inject]
-		private IUtilisateursDataService utilisateursDataService { get; set; }
-
-		public List<Utilisateur> Utilisateurs { get; set; }
-
-		[Inject]
-		private NavigationManager NavigationManager { get; set; }
-
-		private Utilisateur? utilisateurSelectionne;
-
-		[Parameter]
-		public ModalSuppressionUtilisateur Modal {get; set;}
-
-		protected override async Task OnInitializedAsync()
-		{
-            //await this.utilisateursDataService.resetDataUtilisateurs();
-
-			this.utilisateurSelectionne = null;
-            this.Utilisateurs = await this.utilisateursDataService.getAllUtilisateurs();
-			await base.OnInitializedAsync();
-		}
-
-        private async Task HandleUtilisateurSupprime()
-        {
-            this.Utilisateurs = await this.utilisateursDataService.getAllUtilisateurs();
-            StateHasChanged(); // Actualiser la vue
-        }
-
-		public async Task fermetureModal(bool val) {
-
-			if (val) {
-				await this.supprimerUtilisateur(this.utilisateurSelectionne);
-			}
-		}
-
-		public async Task supprimerUtilisateur(Utilisateur u)
-		{
-			await this.utilisateursDataService.SupprimerUtilisateur(u);
-			this.Utilisateurs = await this.utilisateursDataService.getAllUtilisateurs();
-			
-			this.NavigationManager.NavigateTo("/utilisateurs/liste");
-		}
-
-		public async Task afficherModal()
-		{
-			if (this.Modal != null) {
-				await this.Modal.afficher();
-			}
-		}
-
-		public void modifierUtilisateur()
-		{
-			if (this.utilisateurSelectionne != null)
-			{
-				this.NavigationManager.NavigateTo("/utilisateurs/modifier/" + utilisateurSelectionne.Pseudo);
-			}
-		}
+		
     }
 }