diff --git a/src/app/admin-test/admin-test.component.html b/src/app/admin-test/admin-test.component.html
index 1e4a7a5..3c0c408 100644
--- a/src/app/admin-test/admin-test.component.html
+++ b/src/app/admin-test/admin-test.component.html
@@ -42,9 +42,6 @@
             _ngcontent-ng-c3352625633=""
             class="flex align-items-center justify-content-center bg-blue-100 border-round"
             style="width: 2.5rem; height: 2.5rem">
-            <!-- <i
-              class="fal fa-gem position-absolute pos-right pos-bottom opacity-15 mb-n1 mr-n4"
-              style="font-size: 6rem"></i> -->
           </div>
         </div>
       </div>
diff --git a/src/app/admin-test/admin-test.component.scss b/src/app/admin-test/admin-test.component.scss
index 3e59ecb..aa0b226 100644
--- a/src/app/admin-test/admin-test.component.scss
+++ b/src/app/admin-test/admin-test.component.scss
@@ -135,7 +135,7 @@ mat-card-title{
       background-color: #f7e6ff;
     }
     .border-round {
-      border-radius: 10px;
+      border-radius: 0;
     }
     .p-3 {
       padding: 1rem;
diff --git a/src/app/assistances/assistance/view-service/view-service.component.html b/src/app/assistances/assistance/view-service/view-service.component.html
index a3212da..773eb0a 100644
--- a/src/app/assistances/assistance/view-service/view-service.component.html
+++ b/src/app/assistances/assistance/view-service/view-service.component.html
@@ -4,126 +4,115 @@
       <div class="row-fluid">
         <div class="span12">
           <div class="grid simple">
-            <div class="card">
-              <div class="card-title">
-                <div class="card-body m-3">
-                  <h4 class="mb-3">Liste des services</h4>
-                  <div class="page-title d-flex justify-content-between">
-                    <div class="col-m-5 text-right">
-                      <button
-                        class="btn btn-secondary m-5"
-                        style="border-radius: 15px">
-                        Exporter <i class="fa fa-download"></i>
-                      </button>
-                    </div>
-                    <a
-                      style="border-radius: 15px"
-                      [routerLink]="['/assistances/create-service']"
-                      class="btn btn-sl btn-success m-5">
-                      Nouveau
-                    </a>
+            <div class="card-title">
+              <div class="card-body m-3">
+                <h4 class="mb-3">Liste des services</h4>
+                <div class="page-title d-flex justify-content-between">
+                  <div class="col-m-5 text-right">
+                    <button
+                      class="btn btn-secondary m-5"
+                      style="border-radius: 15px">
+                      Exporter <i class="fa fa-download"></i>
+                    </button>
                   </div>
-                  <div
-                    class="example-container mat-elevation-z8"
-                    style="margin-top: 40px">
-                    <mat-form-field>
-                      <mat-label>Filter</mat-label>
-                      <input
-                        matInput
-                        (keyup)="applyFilter($event)"
-                        placeholder="Ex. ium"
-                        #input />
-                    </mat-form-field>
+                  <a
+                    style="border-radius: 15px"
+                    [routerLink]="['/assistances/create-service']"
+                    class="btn btn-sl btn-success m-5">
+                    Nouveau
+                  </a>
+                </div>
+                <div
+                  class="example-container mat-elevation-z8"
+                  style="margin-top: 40px">
+                  <mat-form-field>
+                    <mat-label>Filter</mat-label>
+                    <input
+                      matInput
+                      (keyup)="applyFilter($event)"
+                      placeholder="Ex. ium"
+                      #input />
+                  </mat-form-field>
 
-                    <mat-table
-                      [dataSource]="dataSource"
-                      class="mat-elevation-z8">
-                      <!-- Nom Column -->
-                      <ng-container matColumnDef="service_id">
-                        <mat-header-cell *matHeaderCellDef class="text"
-                          >ID</mat-header-cell
-                        >
-                        <mat-cell *matCellDef="let service">{{
-                          service.service_id
-                        }}</mat-cell>
-                      </ng-container>
+                  <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+                    <ng-container matColumnDef="service_id">
+                      <mat-header-cell *matHeaderCellDef class="text"
+                        >ID</mat-header-cell
+                      >
+                      <mat-cell *matCellDef="let service">{{
+                        service.service_id
+                      }}</mat-cell>
+                    </ng-container>
 
-                      <ng-container matColumnDef="nom_service">
-                        <mat-header-cell *matHeaderCellDef class="text"
-                          >Nom</mat-header-cell
-                        >
-                        <mat-cell *matCellDef="let service">{{
-                          service.nom_service
-                        }}</mat-cell>
-                      </ng-container>
+                    <ng-container matColumnDef="nom_service">
+                      <mat-header-cell *matHeaderCellDef class="text"
+                        >Nom</mat-header-cell
+                      >
+                      <mat-cell *matCellDef="let service">{{
+                        service.nom_service
+                      }}</mat-cell>
+                    </ng-container>
 
-                      <!-- Description Column -->
-                      <ng-container matColumnDef="description">
-                        <mat-header-cell *matHeaderCellDef class="text"
-                          >Description</mat-header-cell
-                        >
-                        <mat-cell *matCellDef="let service">{{
-                          service.description
-                        }}</mat-cell>
-                      </ng-container>
+                    <ng-container matColumnDef="description">
+                      <mat-header-cell *matHeaderCellDef class="text"
+                        >Description</mat-header-cell
+                      >
+                      <mat-cell *matCellDef="let service">{{
+                        service.description
+                      }}</mat-cell>
+                    </ng-container>
 
-                      <!-- Marchand Column -->
-                      <ng-container matColumnDef="marchand">
-                        <mat-header-cell *matHeaderCellDef class="text"
-                          >Marchand</mat-header-cell
-                        >
-                        <mat-cell *matCellDef="let service">{{
-                          service.marchand
-                        }}</mat-cell>
-                      </ng-container>
+                    <ng-container matColumnDef="marchand">
+                      <mat-header-cell *matHeaderCellDef class="text"
+                        >Marchand</mat-header-cell
+                      >
+                      <mat-cell *matCellDef="let service">{{
+                        service.marchand
+                      }}</mat-cell>
+                    </ng-container>
 
-                      <!-- Actions Column -->
-                      <ng-container matColumnDef="actions">
-                        <mat-header-cell *matHeaderCellDef class="text"
-                          >Actions</mat-header-cell
-                        >
-                        <mat-cell
-                          *matCellDef="let service"
-                          style="text-align: right">
-                          <a
-                            href="#"
-                            class="m-2"
-                            [routerLink]="[
-                              '/assistances/edit-service',
-                              service.service_id
-                            ]">
-                            <mat-icon style="color: green" title="Modifier"
-                              >edit</mat-icon
-                            >
-                          </a>
-                          <a
-                            href="#"
-                            class="m-2"
-                            (click)="onDelete(service.service_id)"
-                            [routerLink]="['/assistances/view-service']">
-                            <mat-icon style="color: red" title="Supprimer"
-                              >delete_sweep</mat-icon
-                            >
-                          </a>
-                        </mat-cell>
-                      </ng-container>
+                    <ng-container matColumnDef="actions">
+                      <mat-header-cell *matHeaderCellDef class="text"
+                        >Actions</mat-header-cell
+                      >
+                      <mat-cell
+                        *matCellDef="let service"
+                        style="text-align: right">
+                        <a
+                          href="#"
+                          class="m-2"
+                          [routerLink]="[
+                            '/assistances/edit-service',
+                            service.service_id
+                          ]">
+                          <mat-icon style="color: green" title="Modifier"
+                            >edit</mat-icon
+                          >
+                        </a>
+                        <a
+                          href="#"
+                          class="m-2"
+                          (click)="onDelete(service.service_id)"
+                          [routerLink]="['/assistances/view-service']">
+                          <mat-icon style="color: red" title="Supprimer"
+                            >delete_sweep</mat-icon
+                          >
+                        </a>
+                      </mat-cell>
+                    </ng-container>
 
-                      <mat-header-row
-                        *matHeaderRowDef="displayedColumns"></mat-header-row>
-                      <mat-row
-                        *matRowDef="
-                          let row;
-                          columns: displayedColumns
-                        "></mat-row>
-                    </mat-table>
+                    <mat-header-row
+                      *matHeaderRowDef="displayedColumns"></mat-header-row>
+                    <mat-row
+                      *matRowDef="let row; columns: displayedColumns"></mat-row>
+                  </mat-table>
 
-                    <mat-paginator
-                      #paginator
-                      [pageSize]="5"
-                      [pageSizeOptions]="[5, 10, 20]"
-                      [showFirstLastButtons]="true">
-                    </mat-paginator>
-                  </div>
+                  <mat-paginator
+                    #paginator
+                    [pageSize]="5"
+                    [pageSizeOptions]="[5, 10, 20]"
+                    [showFirstLastButtons]="true">
+                  </mat-paginator>
                 </div>
               </div>
             </div>
diff --git a/src/app/assistances/assistance/view-service/view-service.component.scss b/src/app/assistances/assistance/view-service/view-service.component.scss
index 3b7ec5e..e7df4dc 100644
--- a/src/app/assistances/assistance/view-service/view-service.component.scss
+++ b/src/app/assistances/assistance/view-service/view-service.component.scss
@@ -7,4 +7,13 @@
 
 .Ftext {
   font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
+}
+
+
+
+  .card {
+   
+    border-radius:0 !important;
+    --bs-card-bg: #ffffff61;
+    
 }
\ No newline at end of file
diff --git a/src/app/reversements/reversement/demande/demande.component.scss b/src/app/reversements/reversement/demande/demande.component.scss
index e69de29..6438d9d 100644
--- a/src/app/reversements/reversement/demande/demande.component.scss
+++ b/src/app/reversements/reversement/demande/demande.component.scss
@@ -0,0 +1,6 @@
+ .card {
+   
+    border-radius:0 !important;
+    --bs-card-bg: #ffffff61;
+    
+}
\ No newline at end of file
diff --git a/src/app/reversements/reversement/reversement/reversement.component.html b/src/app/reversements/reversement/reversement/reversement.component.html
index c0c8c67..f9153d8 100644
--- a/src/app/reversements/reversement/reversement/reversement.component.html
+++ b/src/app/reversements/reversement/reversement/reversement.component.html
@@ -1,87 +1,35 @@
 <!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
 <div class="page-title" style="margin-bottom: 10px">
   <h4>Reversements</h4>
-</div>
-<!-- <div class="row" style="margin-top: 40px">
-  <div class="col-md-3">
-    <label for="debut">De</label>
-    <input
-      type="date"
-      value="2024-04-16"
-      required=""
-      name="debut"
-      class="form-control form-control-sm" />
-  </div>
-  <div class="col-md-3">
-    <label for="fin">À</label>
-    <input
-      type="date"
-      value="2024-04-16"
-      required=""
-      name="fin"
-      class="form-control form-control-sm" />
-  </div>
-  <div class="col-md-2">
-    <label style="visibility: hidden">Recherche</label>
-    <div class="card-title">
-      <button class="btn btn-primary btn-sm">
-        Recherche <i class="fa fa-search"></i>
-      </button>
-    </div>
-  </div>
-</div> -->
-<div class="content sm-gutter">
-  <div class="row">
-    <div class="col-md-12 col-vlg-12 m-b-10">
-      <div class="row-fluid">
-        <div class="span12">
-          <div class="grid simple">
-            <div class="card">
-              <div class="card-title">
-                <div class="card-body m-3">
-                  <div class="row" style="margin: auto">
-                    <!-- <div class="col-md-2">
-                      <label for="operateurs">Opérateurs</label>
-                      <select
-                        class="form-control filtre"
-                        [(ngModel)]="selectedOperateur"
-                        id="operateurs"
-                        placeholder="operateur"
-                        style="width: 100%">
-                        <option
-                          *ngFor="let operateur of operateurs"
-                          [value]="operateur.code">
-                          {{ operateur.code }}
-                        </option>
-                      </select>
-                    </div> -->
-                    <!-- <div class="col-md-2">
-                      <label for="services">Services</label>
-                      <select class="form-control filtre" style="width: 100%">
-                        <option value="">Tout</option>
-                      </select>
-                    </div> -->
-                    <div class="col-md-3">
-                      <label for="debut">De</label>
-                      <input
-                        type="date"
-                        [(ngModel)]="startDate"
-                        required
-                        name="debut"
-                        class="form-control form-control-sm" />
-                    </div>
-                    <div class="col-md-3">
-                      <label for="fin">À</label>
-                      <input
-                        type="date"
-                        [(ngModel)]="endDate"
-                        required
-                        name="fin"
-                        class="form-control form-control-sm" />
-                    </div>
-                    <div class="col-md-2">
-                      <label style="visibility: hidden">Recherche</label>
-                      <div class="card-title">
+  <div class="content sm-gutter">
+    <div class="row justify-content-center">
+      <div class="col-md-12 col-vlg-12 m-b-10">
+        <div class="row-fluid">
+          <div class="span12">
+            <div class="grid simple">
+              <div class="card">
+                <div class="card-title">
+                  <div class="card-body m-3">
+                    <div class="row d-flex justify-content-center">
+                      <div class="col-md-3">
+                        <label for="debut">De</label>
+                        <input
+                          type="date"
+                          [(ngModel)]="startDate"
+                          required
+                          name="debut"
+                          class="form-control form-control-sm" />
+                      </div>
+                      <div class="col-md-3">
+                        <label for="fin">À</label>
+                        <input
+                          type="date"
+                          [(ngModel)]="endDate"
+                          required
+                          name="fin"
+                          class="form-control form-control-sm" />
+                      </div>
+                      <div class="col-md-2 d-flex align-items-end">
                         <button
                           style="border-radius: 15px"
                           class="btn btn-primary btn-sm"
@@ -99,85 +47,79 @@
       </div>
     </div>
   </div>
-</div>
-<div class="example-container mat-elevation-z8" style="margin-top: 40px">
-  <mat-form-field
-    style="
-      border: 1px;
-      border-radius: 5px;
-      background-color: rgba(158, 188, 212, 0.404);
-    ">
-    <mat-label>Filter</mat-label>
-    <input
-      matInput
-      (keyup)="applyFilter($event)"
-      placeholder="Ex. ium"
-      #input />
-  </mat-form-field>
-  <mat-table #table [dataSource]="dataSource">
-    <!-- <ng-container matColumnDef="numReversement">
-      <mat-header-cell *matHeaderCellDef class="bold-text">
-        N°REVERSEMENT
-      </mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        {{ element.numReversement }}
-      </mat-cell>
-    </ng-container> -->
 
-    <!-- Position Column -->
-    <ng-container matColumnDef="dateReversement">
-      <mat-header-cell *matHeaderCellDef class="bold-text">
-        Date reversement
-      </mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        {{ element.dateReversement }}
-      </mat-cell>
-    </ng-container>
+  <div class="example-container mat-elevation-z8" style="margin-top: 40px">
+    <mat-form-field
+      style="
+        border: 1px;
+        border-radius: 5px;
+        background-color: rgba(158, 188, 212, 0.404);
+      ">
+      <mat-label>Filter</mat-label>
+      <input
+        matInput
+        (keyup)="applyFilter($event)"
+        placeholder="Ex. ium"
+        #input />
+    </mat-form-field>
+    <mat-table #table [dataSource]="dataSource">
+      <!-- Position Column -->
+      <ng-container matColumnDef="dateReversement">
+        <mat-header-cell *matHeaderCellDef class="bold-text">
+          Date reversement
+        </mat-header-cell>
+        <mat-cell *matCellDef="let element">
+          {{ element.dateReversement }}
+        </mat-cell>
+      </ng-container>
 
-    <ng-container matColumnDef="dateDemande">
-      <mat-header-cell *matHeaderCellDef class="bold-text">
-        Date demande
-      </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.dateDemande }} </mat-cell>
-    </ng-container>
+      <ng-container matColumnDef="dateDemande">
+        <mat-header-cell *matHeaderCellDef class="bold-text">
+          Date demande
+        </mat-header-cell>
+        <mat-cell *matCellDef="let element">
+          {{ element.dateDemande }}
+        </mat-cell>
+      </ng-container>
 
-    <ng-container matColumnDef="montant">
-      <mat-header-cell *matHeaderCellDef class="bold-text">
-        Montant
-      </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.montant }} </mat-cell>
-    </ng-container>
+      <ng-container matColumnDef="montant">
+        <mat-header-cell *matHeaderCellDef class="bold-text">
+          Montant
+        </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{ element.montant }} </mat-cell>
+      </ng-container>
 
-    <!-- Name Column -->
-    <ng-container matColumnDef="moyenPaiement">
-      <mat-header-cell *matHeaderCellDef class="bold-text">
-        Moyen reversement
-      </mat-header-cell>
-      <mat-cell *matCellDef="let element">
-        {{ element.moyenPaiement }}
-      </mat-cell>
-    </ng-container>
+      <!-- Name Column -->
+      <ng-container matColumnDef="moyenPaiement">
+        <mat-header-cell *matHeaderCellDef class="bold-text">
+          Moyen reversement
+        </mat-header-cell>
+        <mat-cell *matCellDef="let element">
+          {{ element.moyenPaiement }}
+        </mat-cell>
+      </ng-container>
 
-    <!-- Weight Column -->
-    <ng-container matColumnDef="status">
-      <mat-header-cell *matHeaderCellDef class="bold-text">
-        Statuts
-      </mat-header-cell>
-      <mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
-    </ng-container>
+      <!-- Weight Column -->
+      <ng-container matColumnDef="status">
+        <mat-header-cell *matHeaderCellDef class="bold-text">
+          Statuts
+        </mat-header-cell>
+        <mat-cell *matCellDef="let element"> {{ element.status }} </mat-cell>
+      </ng-container>
 
-    <!-- Symbol Column -->
+      <!-- Symbol Column -->
 
-    <!-- Symbol Column -->
+      <!-- Symbol Column -->
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
+      <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+      <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+    </mat-table>
 
-  <mat-paginator
-    #paginator
-    [pageSize]="5"
-    [pageSizeOptions]="[5, 10, 20]"
-    [showFirstLastButtons]="true">
-  </mat-paginator>
+    <mat-paginator
+      #paginator
+      [pageSize]="5"
+      [pageSizeOptions]="[5, 10, 20]"
+      [showFirstLastButtons]="true">
+    </mat-paginator>
+  </div>
 </div>
diff --git a/src/app/reversements/reversement/reversement/reversement.component.scss b/src/app/reversements/reversement/reversement/reversement.component.scss
index f28cde5..4c44e91 100644
--- a/src/app/reversements/reversement/reversement/reversement.component.scss
+++ b/src/app/reversements/reversement/reversement/reversement.component.scss
@@ -8,7 +8,7 @@
 //   }
 
 .bold-text{
-    color:blue;
+  color:blue;
   font-weight: bold;
   font-size: 16px; /* Ajustez la taille de la police selon vos besoins */
 }
@@ -24,4 +24,13 @@
 
 .p-4{
   color: white;
+}
+
+
+
+  .card {
+   
+    border-radius:0 !important;
+    --bs-card-bg: #ffffff61;
+    
 }
\ No newline at end of file
diff --git a/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.html b/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.html
index 5a43b1a..7ecb649 100644
--- a/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.html
+++ b/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.html
@@ -20,7 +20,7 @@
   <h4>Paiements</h4>
 </div>
 
-<div class="content sm-gutter">
+<!-- <div class="content sm-gutter">
   <div class="row">
     <div class="col-md-12 col-vlg-12 m-b-10">
       <div class="row-fluid">
@@ -87,6 +87,76 @@
       </div>
     </div>
   </div>
+</div> -->
+<div class="content sm-gutter">
+  <div class="row">
+    <div class="col-md-12 col-vlg-12 m-b-10">
+      <div class="row-fluid">
+        <div class="span12">
+          <div class="grid simple">
+            <div class="card">
+              <div class="card-title">
+                <div class="card-body m-3">
+                  <div class="row" style="margin: auto">
+                    <div class="col-md-2">
+                      <label for="operateurs">Opérateurs</label>
+                      <!-- Add [(ngModel)]="selectedOperateur" to bind the selected value -->
+                      <select
+                        class="form-control filtre"
+                        id="operateurs"
+                        style="width: 100%"
+                        [(ngModel)]="selectedOperateur">
+                        <option
+                          *ngFor="let operateur of operateurs"
+                          [value]="operateur.code">
+                          {{ operateur.code }}
+                        </option>
+                      </select>
+                    </div>
+                    <div class="col-md-2">
+                      <label for="services">Services</label>
+                      <select class="form-control filtre" style="width: 100%">
+                        <option value="">Tout</option>
+                      </select>
+                    </div>
+                    <div class="col-md-3">
+                      <label for="debut">De</label>
+                      <input
+                        type="date"
+                        value="2024-04-16"
+                        required=""
+                        name="debut"
+                        class="form-control form-control-sm" />
+                    </div>
+                    <div class="col-md-3">
+                      <label for="fin">À</label>
+                      <input
+                        type="date"
+                        value="2024-04-16"
+                        required=""
+                        name="fin"
+                        class="form-control form-control-sm" />
+                    </div>
+                    <div class="col-md-2">
+                      <!-- Removed the hidden label -->
+                      <!-- Wrapped the button in a div with class card-title -->
+                      <div class="card-title">
+                        <button
+                          class="btn btn-primary btn-sm"
+                          style="border-radius: 15px; box-sizing: border-box">
+                          Recherche <i class="fa fa-search m-1"></i>
+                        </button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 
 <div class="example-container mat-elevation-z8" style="margin-top: 40px">
diff --git a/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.scss b/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.scss
index 18eb658..7883c80 100644
--- a/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.scss
+++ b/src/app/trafics/transactions/suivi-paiement/suivi-paiement.component.scss
@@ -33,4 +33,12 @@
   padding: 5px;
   background-color:rgb(211, 54, 42);
   border-radius:15px
+}
+
+
+ .card {
+   
+    border-radius:0 !important;
+    --bs-card-bg: #ffffff61;
+    
 }
\ No newline at end of file
diff --git a/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html b/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html
index 837211d..859eb68 100644
--- a/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html
+++ b/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.html
@@ -120,7 +120,7 @@
                         id="services"
                         [(ngModel)]="selectedService"
                         name="selectedService">
-                        <option value="">choisir un service</option>
+                        <option value="">choisir un ser</option>
                         <option
                           *ngFor="let service of services"
                           [ngValue]="service">
diff --git a/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.scss b/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.scss
index a00fb28..9ad4d8d 100644
--- a/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.scss
+++ b/src/app/trafics/transactions/suivi-transaction/suivi-transaction.component.scss
@@ -35,7 +35,12 @@ table {
   color: white;
 }
 
-
+  .card {
+   
+    border-radius:0 !important;
+    --bs-card-bg: #ffffff61;
+    
+}
 
 .success-status {
   color: rgb(255, 255, 255);
diff --git a/src/app/utilisateurs/view-user/view-user.component.html b/src/app/utilisateurs/view-user/view-user.component.html
index 25fb271..db2a0d3 100644
--- a/src/app/utilisateurs/view-user/view-user.component.html
+++ b/src/app/utilisateurs/view-user/view-user.component.html
@@ -1,199 +1,165 @@
-<!-- eslint-disable prettier/prettier -->
-<!-- eslint-disable @angular-eslint/template/label-has-associated-control -->
 <div class="content sm-gutter">
-  <div class="mb-4">
-    <h4>Liste des utilisateurs</h4>
-  </div>
-  <div class="col-md-2"></div>
   <div class="row">
     <div class="col-md-12 col-vlg-12 m-b-10">
       <div class="row-fluid">
         <div class="span12">
           <div class="grid simple">
-            <div class="card">
-              <div class="card-title">
-                <div class="card-body m-3">
-                  <div class="row" style="margin: auto">
-                    <div class="col-md-2">
-                      <label for="operateurs">Opérateurs</label>
-                      <select
-                        class="form-control filtre"
-                        [(ngModel)]="selectedOperateur"
-                        id="operateurs"
-                        placeholder="operateur"
-                        style="width: 100%">
-                        <option
-                          *ngFor="let operateur of operateurs"
-                          [value]="operateur.code">
-                          {{ operateur.code }}
-                        </option>
-                      </select>
-                    </div>
-                    <div class="col-md-2">
-                      <label for="services">Services</label>
-                      <select class="form-control filtre" style="width: 100%">
-                        <option value="">Tout</option>
-                      </select>
-                    </div>
-                    <div class="col-md-3">
-                      <label for="debut">De</label>
-                      <input
-                        type="date"
-                        [(ngModel)]="startDate"
-                        required
-                        name="debut"
-                        class="form-control form-control-sm" />
-                    </div>
-                    <div class="col-md-3">
-                      <label for="fin">À</label>
-                      <input
-                        type="date"
-                        [(ngModel)]="endDate"
-                        required
-                        name="fin"
-                        class="form-control form-control-sm" />
-                    </div>
-                    <div class="col-md-2">
-                      <label style="visibility: hidden">Recherche</label>
-                      <div class="card-title">
-                        <button
-                          style="border-radius: 15px"
-                          class="btn btn-primary btn-sm"
-                          (click)="onSearch()">
-                          Recherche <i class="fa fa-search m-1"></i>
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+            <div class="card-title"></div>
+            <div class="content sm-gutter">
+              <div class="mb-4">
+                <h4>Liste des utilisateurs</h4>
               </div>
+              <div class="col-md-2"></div>
             </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
 
-<div class="page-title d-flex justify-content-between">
-  <div class="col-m-5 text-right">
-    <button class="btn btn-secondary m-5" style="border-radius: 15px">
-      Exporter <i class="fa fa-download m-1"></i>
-    </button>
-  </div>
-  <a
-    style="border-radius: 15px"
-    [routerLink]="['/utilisateurs/create-users']"
-    class="btn btn-sl btn-success m-5">
-    Ajouter
-  </a>
-</div>
-<div class="example-container mat-elevation-z8" style="margin-top: 40px">
-  <!-- <mat-form-field>
-    <mat-label>Filter</mat-label>
-    <input
-      class="textFilter"
-      matInput
-      (keyup)="applyFilter($event)"
-      placeholder="Ex. ium"
-      #input />
-  </mat-form-field> -->
-  <mat-form-field>
-    <mat-label>Filter</mat-label>
-    <input
-      matInput
-      (keyup)="applyFilter($event)"
-      placeholder="Ex. ium"
-      #input />
-  </mat-form-field>
+            <div class="page-title d-flex justify-content-between">
+              <div class="col-m-5 text-right">
+                <button
+                  class="btn btn-secondary m-5"
+                  style="border-radius: 15px">
+                  Exporter <i class="fa fa-download m-1"></i>
+                </button>
+              </div>
+              <a
+                style="border-radius: 15px"
+                [routerLink]="['/utilisateurs/create-users']"
+                class="btn btn-sl btn-success m-5">
+                Ajouter
+              </a>
+            </div>
+            <div
+              class="example-container mat-elevation-z8"
+              style="margin-top: 40px">
+              <mat-form-field>
+                <mat-label>Filter</mat-label>
+                <input
+                  matInput
+                  (keyup)="applyFilter($event)"
+                  placeholder="Ex. ium"
+                  #input />
+              </mat-form-field>
 
-  <mat-table [dataSource]="dataSource" matSort>
-    <ng-container matColumnDef="id">
-      <mat-header-cell *matHeaderCellDef mat-sort-header class="bold-text"
-        >ID</mat-header-cell
-      >
-      <mat-cell *matCellDef="let user">{{ user.id }}</mat-cell>
-    </ng-container>
+              <mat-table [dataSource]="dataSource" matSort>
+                <ng-container matColumnDef="id">
+                  <mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    class="bold-text"
+                    >ID</mat-header-cell
+                  >
+                  <mat-cell *matCellDef="let user">{{ user.id }}</mat-cell>
+                </ng-container>
 
-    <ng-container matColumnDef="first_name">
-      <mat-header-cell *matHeaderCellDef mat-sort-header class="bold-text"
-        >Nom</mat-header-cell
-      >
-      <mat-cell *matCellDef="let user">{{ user.first_name }}</mat-cell>
-    </ng-container>
+                <ng-container matColumnDef="first_name">
+                  <mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    class="bold-text"
+                    >Nom</mat-header-cell
+                  >
+                  <mat-cell *matCellDef="let user">{{
+                    user.first_name
+                  }}</mat-cell>
+                </ng-container>
 
-    <ng-container matColumnDef="last_name">
-      <mat-header-cell *matHeaderCellDef mat-sort-header class="bold-text"
-        >Prénoms</mat-header-cell
-      >
-      <mat-cell *matCellDef="let user">{{ user.last_name }}</mat-cell>
-    </ng-container>
+                <ng-container matColumnDef="last_name">
+                  <mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    class="bold-text"
+                    >Prénoms</mat-header-cell
+                  >
+                  <mat-cell *matCellDef="let user">{{
+                    user.last_name
+                  }}</mat-cell>
+                </ng-container>
 
-    <ng-container matColumnDef="username">
-      <mat-header-cell *matHeaderCellDef mat-sort-header class="bold-text"
-        >Nom utilisateur</mat-header-cell
-      >
-      <mat-cell *matCellDef="let user">{{ user.username }}</mat-cell>
-    </ng-container>
+                <ng-container matColumnDef="username">
+                  <mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    class="bold-text"
+                    >Nom utilisateur</mat-header-cell
+                  >
+                  <mat-cell *matCellDef="let user">{{
+                    user.username
+                  }}</mat-cell>
+                </ng-container>
 
-    <ng-container matColumnDef="email">
-      <mat-header-cell *matHeaderCellDef mat-sort-header class="bold-text"
-        >Email</mat-header-cell
-      >
-      <mat-cell *matCellDef="let user">{{ user.email }}</mat-cell>
-    </ng-container>
+                <ng-container matColumnDef="email">
+                  <mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    class="bold-text"
+                    >Email</mat-header-cell
+                  >
+                  <mat-cell *matCellDef="let user">{{ user.email }}</mat-cell>
+                </ng-container>
 
-    <ng-container matColumnDef="role">
-      <mat-header-cell *matHeaderCellDef mat-sort-header class="bold-text"
-        >Rôle</mat-header-cell
-      >
-      <mat-cell *matCellDef="let user">{{ user.role }}</mat-cell>
-    </ng-container>
+                <ng-container matColumnDef="role">
+                  <mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    class="bold-text"
+                    >Rôle</mat-header-cell
+                  >
+                  <mat-cell *matCellDef="let user">{{ user.role }}</mat-cell>
+                </ng-container>
 
-    <ng-container matColumnDef="profile_photo">
-      <mat-header-cell *matHeaderCellDef mat-sort-header class="bold-text"
-        >Photo profil</mat-header-cell
-      >
-      <mat-cell *matCellDef="let user">
-        <img
-          [src]="user.profile_photo"
-          alt="Photo de profil"
-          width="50"
-          height="50" />
-      </mat-cell>
-    </ng-container>
+                <ng-container matColumnDef="profile_photo">
+                  <mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    class="bold-text"
+                    >Photo profil</mat-header-cell
+                  >
+                  <mat-cell *matCellDef="let user">
+                    <img
+                      [src]="user.profile_photo"
+                      alt="Photo de profil"
+                      width="50"
+                      height="50" />
+                  </mat-cell>
+                </ng-container>
 
-    <ng-container matColumnDef="actions">
-      <mat-header-cell *matHeaderCellDef mat-sort-header class="bold-text"
-        >Actions</mat-header-cell
-      >
-      <mat-cell *matCellDef="let user" style="text-align: right">
-        <a href="#" class="m-2" [routerLink]="['view-user']"
-          ><mat-icon style="color: blue" title="Voir"
-            >remove_red_eye</mat-icon
-          ></a
-        >
-        <a
-          href="#"
-          class="m-2"
-          [routerLink]="['/utilisateurs/edit-user', user.id]"
-          ><mat-icon style="color: green" title="Modifier">edit</mat-icon></a
-        >
-        <!-- <a
-          href="#"
-          class="m-2"
-          (click)="onDelete(user.id)"
-          [routerLink]="['/utilisateurs/view-user']">
-          <mat-icon style="color: red" title="Supprimer">delete_sweep</mat-icon>
-        </a> -->
-      </mat-cell>
-    </ng-container>
+                <ng-container matColumnDef="actions">
+                  <mat-header-cell
+                    *matHeaderCellDef
+                    mat-sort-header
+                    class="bold-text"
+                    >Actions</mat-header-cell
+                  >
+                  <mat-cell *matCellDef="let user" style="text-align: right">
+                    <a href="#" class="m-2" [routerLink]="['view-user']"
+                      ><mat-icon style="color: blue" title="Voir"
+                        >remove_red_eye</mat-icon
+                      ></a
+                    >
+                    <a
+                      href="#"
+                      class="m-2"
+                      [routerLink]="['/utilisateurs/edit-user', user.id]"
+                      ><mat-icon style="color: green" title="Modifier"
+                        >edit</mat-icon
+                      ></a
+                    >
+                  </mat-cell>
+                </ng-container>
 
-    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
-    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
-  </mat-table>
-  <mat-paginator
-    [pageSize]="5"
-    [pageSizeOptions]="[5, 10, 20, 40, 60, 70, 80, 90, 100]"
-    [showFirstLastButtons]="true"></mat-paginator>
+                <mat-header-row
+                  *matHeaderRowDef="displayedColumns"></mat-header-row>
+                <mat-row
+                  *matRowDef="let row; columns: displayedColumns"></mat-row>
+              </mat-table>
+              <mat-paginator
+                [pageSize]="5"
+                [pageSizeOptions]="[5, 10, 20, 40, 60, 70, 80, 90, 100]"
+                [showFirstLastButtons]="true"></mat-paginator>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
+<!-- </div> -->
diff --git a/src/app/utilisateurs/view-user/view-user.component.scss b/src/app/utilisateurs/view-user/view-user.component.scss
index e69de29..e102561 100644
--- a/src/app/utilisateurs/view-user/view-user.component.scss
+++ b/src/app/utilisateurs/view-user/view-user.component.scss
@@ -0,0 +1,7 @@
+
+  .card {
+   
+    border-radius:0 !important;
+    --bs-card-bg: #ffffff61;
+    
+}
\ No newline at end of file