diff --git a/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor b/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor
index b3891c4..8b2fcbb 100644
--- a/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor
+++ b/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor
@@ -2,6 +2,10 @@
 @using Microsoft.AspNetCore.Components;
 @using VeraxShield.composants.modals;
 
+<head>
+    <link rel="stylesheet" href="css/composants/affichages/utilisateurs/datagridUtilisateurs.css">
+</head>
+
 <DataGrid   TItem="Utilisateur"
             Data="@Utilisateurs"
             @bind-SelectedRow="@utilisateurSelectionne"
@@ -19,7 +23,8 @@
          <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.IsBan)" Caption="Banissement" Editable >
+         
 
             <DisplayTemplate>
                 @if (context.IsBan)
@@ -33,11 +38,13 @@
 
             </DisplayTemplate>
         </DataGridColumn>
+        <DataGridColumn Field="@nameof(Utilisateur.Role)" Caption="role" Editable />
+        <DataGridColumn Field="@nameof(Utilisateur.Mail)" Caption="mail" 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-edit"></i> Modifier</button>
+            <button type="button" class="btn btn-primary editButton" @onclick="() => onClickBoutonSuppression(context.Pseudo)"><i class="fa fa-trash"></i> </button>
+            <button type="button" class="btn btn-primary editButton" @onclick="() => onClickBoutonModification(context.Pseudo)"><i class="fa fa-edit"></i> </button>
         </DisplayTemplate>
     </DataGridColumn>
 
@@ -45,18 +52,21 @@
 
     <PageButtonTemplate>
 
-        <Span TextColor="TextColor.Success">
+        <Span class="darkBlue">
             @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>
-
+	<NextPageButtonTemplate><Icon Name="IconName.StepForward" class="darkBlue" /></NextPageButtonTemplate>
+    <PreviousPageButtonTemplate><Icon Name="IconName.StepBackward" class="darkBlue" /></PreviousPageButtonTemplate>
+    <LastPageButtonTemplate><Icon Name="IconName.Forward" class="darkBlue" /></LastPageButtonTemplate>
+    <FirstPageButtonTemplate><Icon Name="IconName.Backward" class="darkBlue" /></FirstPageButtonTemplate>
+    <TotalItemsTemplate><Badge class="darkBlue">@context.TotalItems utilisateurs</Badge></TotalItemsTemplate>
+    <TotalItemsShortTemplate><Badge class="darkBlue">@context.TotalItems</Badge></TotalItemsShortTemplate>
+    <ButtonRowTemplate>
+            <Button Class="editButton biggest" Clicked="boutonclick">+</Button>
+    </ButtonRowTemplate>
+    
         <ItemsPerPageTemplate></ItemsPerPageTemplate>
 
         <PageSelectorTemplate>
@@ -71,7 +81,7 @@
         </PageSelectorTemplate>
 
         <PageSizesTemplate>
-            <Select TextColor="TextColor.Success" @bind-SelectedValue="@context.CurrentPageSize" Size="Size.Small">
+        <Select class="darkBlue" @bind-SelectedValue="@context.CurrentPageSize" Size="Size.Small">
             @foreach (var curPageSize in context.PageSizes)
             {
                 <SelectItem Value="@curPageSize">@curPageSize</SelectItem>
@@ -80,12 +90,6 @@
     </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"
diff --git a/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor.cs b/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor.cs
index bf3996e..8f4e90e 100644
--- a/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor.cs
+++ b/VeraxShield/VeraxShield/composants/affichages/utilisateurs/DatagridUtilisateurs.razor.cs
@@ -78,5 +78,10 @@ namespace VeraxShield.composants.affichages.utilisateurs
 			this.utilisateurSelectionne = await this.utilisateursDataService.getUtilisateurFromPseudo(Pseudo);
 			this.modifierUtilisateur();
 		}
+
+		public async Task boutonclick()
+		{
+			NavigationManager.NavigateTo("/utilisateurs/ajouter");
+		}
     }
 }
\ No newline at end of file
diff --git a/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor b/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor
index 060d0f7..9cc8e48 100644
--- a/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor
+++ b/VeraxShield/VeraxShield/pages/utilisateurs/ListeUtilisateurs.razor
@@ -4,9 +4,22 @@
 @page "/utilisateurs/liste"
 @attribute [Authorize(Roles = "admin, modo")]
 
-<h1>Utilisateurs de Verax</h1>
+<head>
+    <link rel="stylesheet" href="css/pages/utilisateurs/listeUtilisateurs.css">
+</head
+
+<body
+	<div class="center-box lightBlueBG">
+		<h1> Utilisateurs de Verax</h1>
+		<p class="margin10">Vous retrouverez ici les utilisateurs de Verax ainsi que les actions associées </p>
+	</div>
+	
+	<div class="dataGrid"><DatagridUtilisateurs/></div>
+	
+
+</body>
+
 
-<DatagridUtilisateurs/>
 
 
 
diff --git a/VeraxShield/VeraxShield/wwwroot/css/composants/affichages/utilisateurs/datagridUtilisateurs.css b/VeraxShield/VeraxShield/wwwroot/css/composants/affichages/utilisateurs/datagridUtilisateurs.css
new file mode 100644
index 0000000..b35a74c
--- /dev/null
+++ b/VeraxShield/VeraxShield/wwwroot/css/composants/affichages/utilisateurs/datagridUtilisateurs.css
@@ -0,0 +1,16 @@
+﻿.darkBlue {
+    color: #053679;
+}
+
+.editButton {
+    background-color: #053679;
+    border: none;
+    color: white;
+}
+
+.biggest{
+    font-weight: bold;
+    font-size:120%;
+}
+
+
diff --git a/VeraxShield/VeraxShield/wwwroot/css/pages/utilisateurs/listeUtilisateurs.css b/VeraxShield/VeraxShield/wwwroot/css/pages/utilisateurs/listeUtilisateurs.css
new file mode 100644
index 0000000..bd50371
--- /dev/null
+++ b/VeraxShield/VeraxShield/wwwroot/css/pages/utilisateurs/listeUtilisateurs.css
@@ -0,0 +1,27 @@
+﻿.h1{
+    text-align:center;
+    margin: 50px;
+}
+
+.margin10{
+    margin: 10px;
+}
+
+.center-box {
+    padding: 20px;
+    margin: 20px auto;
+    text-align: center;
+    border-radius: 10px;
+    background-color: #afc1db;
+    width: 80%;
+}
+
+.dataGrid {
+    margin: 10px auto;
+    width: 80%;
+}
+
+.btn:hover {
+    background-color: #afc1db;
+    color: #053679;
+}
\ No newline at end of file
