diff --git a/packages/frontend/src/_common/model/usager/HISTORY_ACTIONS.const.ts b/packages/frontend/src/_common/model/usager/HISTORY_ACTIONS.const.ts
index 55c0b42614..b80f7af807 100644
--- a/packages/frontend/src/_common/model/usager/HISTORY_ACTIONS.const.ts
+++ b/packages/frontend/src/_common/model/usager/HISTORY_ACTIONS.const.ts
@@ -1,5 +1,14 @@
 export const HISTORY_ACTIONS = {
-  EDIT: "Modification",
-  DELETE: "Suppression",
-  CREATION: "Création",
+  EDIT: {
+    class: "orange-status",
+    label: "Modification",
+  },
+  DELETE: {
+    class: "red-status",
+    label: "Suppression",
+  },
+  CREATION: {
+    class: "green-status",
+    label: "Création",
+  },
 };
diff --git a/packages/frontend/src/app/modules/manage-usagers/components/column-informations/column-informations.component.html b/packages/frontend/src/app/modules/manage-usagers/components/column-informations/column-informations.component.html
index 81bd7a0581..7c50a14f23 100644
--- a/packages/frontend/src/app/modules/manage-usagers/components/column-informations/column-informations.component.html
+++ b/packages/frontend/src/app/modules/manage-usagers/components/column-informations/column-informations.component.html
@@ -64,7 +64,7 @@
   </ng-template>
 </div>
 
-<span *ngIf="usager.options.npai.actif" class="label-info label-danger">
+<span *ngIf="usager.options.npai.actif" class="label-info red-status">
   <span>Pli non distribuable</span>
 </span>
 
diff --git a/packages/frontend/src/app/modules/manage-usagers/components/manage-filters/manage-filters.component.html b/packages/frontend/src/app/modules/manage-usagers/components/manage-filters/manage-filters.component.html
index 21004072ca..bec9d934f7 100644
--- a/packages/frontend/src/app/modules/manage-usagers/components/manage-filters/manage-filters.component.html
+++ b/packages/frontend/src/app/modules/manage-usagers/components/manage-filters/manage-filters.component.html
@@ -294,14 +294,14 @@
                 <strong class="text-primary">dernier passage</strong>
               </ng-container>
               <fa-icon
-                *ngIf="filters.sortValue === 'ascending'"
+                *ngIf="filters.sortValue === 'asc'"
                 [icon]="['fas', 'sort-amount-up']"
                 aria-hidden="true"
                 class="ms-2"
               ></fa-icon>
 
               <fa-icon
-                *ngIf="filters.sortValue === 'descending'"
+                *ngIf="filters.sortValue === 'desc'"
                 [icon]="['fas', 'sort-amount-down']"
                 aria-hidden="true"
                 class="ms-2"
@@ -321,14 +321,13 @@
                   updateFilters.emit({
                     element: 'sortKey',
                     value: option.id,
-                    sortValue: 'ascending'
+                    sortValue: 'asc'
                   })
                 "
                 ngbDropdownItem
                 role="option"
                 [attr.aria-selected]="
-                  filters.sortKey === option.id &&
-                  filters.sortValue === 'ascending'
+                  filters.sortKey === option.id && filters.sortValue === 'asc'
                 "
               >
                 <fa-icon
@@ -345,14 +344,13 @@
                   updateFilters.emit({
                     element: 'sortKey',
                     value: option.id,
-                    sortValue: 'descending'
+                    sortValue: 'desc'
                   })
                 "
                 ngbDropdownItem
                 role="option"
                 [attr.aria-selected]="
-                  filters.sortKey === option.id &&
-                  filters.sortValue === 'descending'
+                  filters.sortKey === option.id && filters.sortValue === 'desc'
                 "
               >
                 <fa-icon
diff --git a/packages/frontend/src/app/modules/manage-usagers/components/manage-filters/manage-filters.component.spec.ts b/packages/frontend/src/app/modules/manage-usagers/components/manage-filters/manage-filters.component.spec.ts
index 59f618ec6f..cc33c65b04 100644
--- a/packages/frontend/src/app/modules/manage-usagers/components/manage-filters/manage-filters.component.spec.ts
+++ b/packages/frontend/src/app/modules/manage-usagers/components/manage-filters/manage-filters.component.spec.ts
@@ -28,7 +28,7 @@ describe("ManageFiltersComponent", () => {
       page: 0,
       passage: null,
       sortKey: "NAME",
-      sortValue: "ascending",
+      sortValue: "asc",
       statut: "VALIDE",
     };
 
diff --git a/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.spec.ts b/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.spec.ts
index 49b56fba16..72a0acc61e 100644
--- a/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.spec.ts
+++ b/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.spec.ts
@@ -54,7 +54,7 @@ describe("ManageUsagersPageComponent", () => {
       page: 0,
       passage: null,
       sortKey: "NAME",
-      sortValue: "ascending",
+      sortValue: "asc",
       statut: "VALIDE",
     });
   }));
diff --git a/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.ts b/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.ts
index a9c6311805..09a064f36f 100644
--- a/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.ts
+++ b/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-page/manage-usagers-page.component.ts
@@ -323,7 +323,7 @@ export class ManageUsagersPageComponent implements OnInit, OnDestroy {
     ) {
       const newValue = this.filters[element] === value ? null : value;
       this.filters[element] = newValue;
-      this.setSortKeyAndValue("NAME", "ascending");
+      this.setSortKeyAndValue("NAME", "asc");
     } else if (element === "statut") {
       if (this.filters[element] === value) {
         return;
@@ -351,12 +351,12 @@ export class ManageUsagersPageComponent implements OnInit, OnDestroy {
       // Tri issu des en-tête de tableau
       if (!sortValue) {
         const isCurrentSortKey = value === this.filters.sortKey;
-        const isAscendingSort = this.filters.sortValue === "ascending";
+        const isAscendingSort = this.filters.sortValue === "asc";
 
         if (isCurrentSortKey) {
-          sortValue = isAscendingSort ? "descending" : "ascending";
+          sortValue = isAscendingSort ? "desc" : "asc";
         } else {
-          sortValue = "ascending";
+          sortValue = "asc";
         }
       }
 
diff --git a/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-table/manage-usagers-table.html b/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-table/manage-usagers-table.html
index f51105bb79..f80bdb1365 100644
--- a/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-table/manage-usagers-table.html
+++ b/packages/frontend/src/app/modules/manage-usagers/components/manage-usagers-table/manage-usagers-table.html
@@ -214,13 +214,13 @@
       >
         <p
           *ngIf="usager.typeDom === 'RENOUVELLEMENT'"
-          class="m-0 label-info label-yellow"
+          class="m-0 label-info orange-status"
         >
           Renouvellement
         </p>
         <p
           *ngIf="usager.typeDom === 'PREMIERE_DOM'"
-          class="m-0 label-info label-grey"
+          class="m-0 label-info grey-status"
         >
           Première demande
         </p>
diff --git a/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/UsagersFilterCriteria.ts b/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/UsagersFilterCriteria.ts
index fca377873b..0d840176db 100644
--- a/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/UsagersFilterCriteria.ts
+++ b/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/UsagersFilterCriteria.ts
@@ -1,4 +1,4 @@
-export type UsagersFilterCriteriaSortValues = "ascending" | "descending";
+export type UsagersFilterCriteriaSortValues = "asc" | "desc";
 
 export type UsagersFilterCriteriaStatut =
   | "TOUS"
@@ -60,7 +60,7 @@ export class UsagersFilterCriteria {
     this.page = search?.page || 0;
 
     this.sortKey = search?.sortKey || "NAME";
-    this.sortValue = search?.sortValue || "ascending";
+    this.sortValue = search?.sortValue || "asc";
 
     // Ne pas trier par autre que les nom & ID si on est sur TOUS
     if (this.statut === "TOUS") {
diff --git a/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/services/usagersSorter.service.spec.ts b/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/services/usagersSorter.service.spec.ts
index 773ccd1859..f6a6b26940 100644
--- a/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/services/usagersSorter.service.spec.ts
+++ b/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/services/usagersSorter.service.spec.ts
@@ -77,7 +77,7 @@ const usagers = [
 it("usagersSorter NAME (nom, prenom)", () => {
   const results = usagersSorter.sortBy(usagers, {
     sortKey: "NAME",
-    sortValue: "ascending",
+    sortValue: "asc",
   });
   expect(results.length).toEqual(usagers.length);
   expect(results.map((x) => x.ref)).toEqual([3, 5, 4, 1, 2]);
@@ -86,7 +86,7 @@ it("usagersSorter NAME (nom, prenom)", () => {
 it("usagersSorter RADIE (usager.decision.dateFin)", () => {
   const results = usagersSorter.sortBy(usagers, {
     sortKey: "RADIE",
-    sortValue: "descending",
+    sortValue: "desc",
   });
   expect(results.length).toEqual(usagers.length);
   expect(results.map((x) => x.ref)).toEqual([2, 3, 5, 4, 1]); // null last
@@ -95,7 +95,7 @@ it("usagersSorter RADIE (usager.decision.dateFin)", () => {
 it("usagersSorter customRef asc", () => {
   const results = usagersSorter.sortBy(usagers, {
     sortKey: "ID",
-    sortValue: "ascending",
+    sortValue: "asc",
   });
   expect(results.length).toEqual(usagers.length);
   expect(results.map((x) => x.customRef)).toEqual([
@@ -110,7 +110,7 @@ it("usagersSorter customRef asc", () => {
 it("usagersSorter customRef desc", () => {
   const results = usagersSorter.sortBy(usagers, {
     sortKey: "ID",
-    sortValue: "descending",
+    sortValue: "desc",
   });
   expect(results.length).toEqual(usagers.length);
   expect(results.map((x) => x.customRef)).toEqual([
diff --git a/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/services/usagersSorter.service.ts b/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/services/usagersSorter.service.ts
index 5faf182f7d..55aeb86b71 100644
--- a/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/services/usagersSorter.service.ts
+++ b/packages/frontend/src/app/modules/manage-usagers/components/usager-filter/services/usagersSorter.service.ts
@@ -14,7 +14,7 @@ function sortBy(
     return usagers;
   }
 
-  const asc = sortValue !== "descending";
+  const asc = sortValue !== "desc";
 
   if (sortKey === "ID") {
     return sortUsagersByCustomRef(usagers, asc);
diff --git a/packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.html b/packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.html
similarity index 76%
rename from packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.html
rename to packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.html
index f75b83ec97..1daa056211 100644
--- a/packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.html
+++ b/packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.html
@@ -1,9 +1,9 @@
 <button
   type="button"
-  [ngClass]="sortKey === currentKey ? 'text-primary' : ''"
+  [ngClass]="sortKey === currentKey ? 'fw-bold text-primary' : ''"
   class="btn"
   [attr.aria-sort]="sortKey === currentKey ? sortValue : null"
-  (click)="sortArray.emit(sortKey)"
+  (click)="rotate()"
 >
   <span class="visually-hidden">Trier par</span>
   <span>{{ columnName }}</span>
@@ -11,7 +11,7 @@
     *ngIf="sortKey === currentKey"
     class="sort-selected ms-2"
     aria-hidden="true"
-    [icon]="sortValue === 'descending' ? faArrowDown : faArrowUp"
+    [icon]="sortValue === 'desc' ? faArrowDown : faArrowUp"
   ></fa-icon>
   <span *ngIf="sortKey === currentKey" class="visually-hidden">
     Colonne triée actuellement</span
diff --git a/packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.scss b/packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.scss
similarity index 68%
rename from packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.scss
rename to packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.scss
index 86d59dae26..0d978e85e8 100644
--- a/packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.scss
+++ b/packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.scss
@@ -2,5 +2,5 @@ button {
   padding: 0;
   width: 100%;
   text-align: left;
-  font-weight: bold;
+  color: var(--bs-primary);
 }
diff --git a/packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.spec.ts b/packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.spec.ts
similarity index 74%
rename from packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.spec.ts
rename to packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.spec.ts
index bcddd74e68..d77e7489a6 100644
--- a/packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.spec.ts
+++ b/packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.spec.ts
@@ -2,14 +2,16 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 
 import { TableHeadSortComponent } from "./table-head-sort.component";
 import { CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA } from "@angular/core";
+import { NgIf, NgClass } from "@angular/common";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
 
 describe("TableHeadSortComponent", () => {
   let component: TableHeadSortComponent;
   let fixture: ComponentFixture<TableHeadSortComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [TableHeadSortComponent],
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [NgIf, NgClass, FontAwesomeModule],
       schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
     }).compileComponents();
 
diff --git a/packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.ts b/packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.ts
new file mode 100644
index 0000000000..a3eed4c93c
--- /dev/null
+++ b/packages/frontend/src/app/modules/shared/components/table-head-sort/table-head-sort.component.ts
@@ -0,0 +1,48 @@
+import { Component, EventEmitter, Input, Output } from "@angular/core";
+import { UsagersFilterCriteriaSortValues } from "../../../manage-usagers/components/usager-filter";
+import {
+  faArrowDown,
+  faArrowUp,
+  faSort,
+} from "@fortawesome/free-solid-svg-icons";
+import { NgClass, NgIf } from "@angular/common";
+import { FontAwesomeModule } from "@fortawesome/angular-fontawesome";
+
+@Component({
+  selector: "app-table-head-sort",
+  templateUrl: "./table-head-sort.component.html",
+  styleUrls: ["./table-head-sort.component.scss"],
+  standalone: true,
+  imports: [NgIf, NgClass, FontAwesomeModule],
+})
+export class TableHeadSortComponent {
+  public readonly faArrowDown = faArrowDown;
+  public readonly faArrowUp = faArrowUp;
+  public readonly faSort = faSort;
+
+  @Input() public columnName: string;
+
+  @Input() public sortValue: UsagersFilterCriteriaSortValues;
+  @Output() public sortValueChange =
+    new EventEmitter<UsagersFilterCriteriaSortValues>();
+
+  @Input() public sortKey: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @Input() public currentKey: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @Output() public currentKeyChange = new EventEmitter<any>();
+
+  public rotate() {
+    const rotation: {
+      [key in UsagersFilterCriteriaSortValues]: UsagersFilterCriteriaSortValues;
+    } = {
+      asc: "desc",
+      desc: "asc",
+    };
+    if (this.currentKey === this.sortKey) {
+      this.sortValueChange.emit(rotation[this.sortValue]);
+    } else {
+      this.currentKeyChange.emit(this.sortKey);
+    }
+  }
+}
diff --git a/packages/frontend/src/app/modules/shared/pipes/index.ts b/packages/frontend/src/app/modules/shared/pipes/index.ts
index c85331d03c..5cbea7f5dd 100644
--- a/packages/frontend/src/app/modules/shared/pipes/index.ts
+++ b/packages/frontend/src/app/modules/shared/pipes/index.ts
@@ -1,4 +1,5 @@
 // @index('./*.pipe.ts', f => `export * from '${f.path}'`)
 export * from "./format-big-number.pipe";
 export * from "./nl2br.pipe";
+export * from "./sort-array.pipe";
 export * from "./usager-nom-complet.pipe";
diff --git a/packages/frontend/src/app/modules/shared/pipes/sort-array.pipe.ts b/packages/frontend/src/app/modules/shared/pipes/sort-array.pipe.ts
new file mode 100644
index 0000000000..896bce8e86
--- /dev/null
+++ b/packages/frontend/src/app/modules/shared/pipes/sort-array.pipe.ts
@@ -0,0 +1,36 @@
+import { Pipe, PipeTransform } from "@angular/core";
+
+@Pipe({
+  name: "sortArray",
+})
+export class SortArrayPipe implements PipeTransform {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  transform(array: any[], sortKey: any, sortValue: "asc" | "desc"): any[] {
+    if (!array || array.length <= 1) {
+      return array;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return array.sort((a: any, b: any) => {
+      const valA = a[sortKey];
+      const valB = b[sortKey];
+
+      if (valA === null) {
+        return -1;
+      }
+
+      let comparison = 0;
+      if (valA === valB) {
+        return 0;
+      } else if (typeof valA === "string") {
+        comparison = valA.localeCompare(valB);
+      } else if (typeof valA === "boolean") {
+        comparison = valA === valB ? 0 : valA ? -1 : 1;
+      } else if (valA instanceof Date) {
+        comparison = valB instanceof Date ? valA.getTime() - valB.getTime() : 1;
+      }
+
+      return sortValue === "asc" ? comparison : -comparison;
+    });
+  }
+}
diff --git a/packages/frontend/src/app/modules/shared/shared.module.ts b/packages/frontend/src/app/modules/shared/shared.module.ts
index 0deeb676a3..8b6909f8b7 100644
--- a/packages/frontend/src/app/modules/shared/shared.module.ts
+++ b/packages/frontend/src/app/modules/shared/shared.module.ts
@@ -12,6 +12,7 @@ import {
   UsagerNomCompletPipe,
   FormatBigNumberPipe,
   ReplaceLineBreaks,
+  SortArrayPipe,
 } from "./pipes";
 import { DisplayTableImageComponent } from "./components/display-table-image/display-table-image.component";
 import {
@@ -30,6 +31,8 @@ import {
     ReplaceLineBreaks,
     StrCapsAlphaDirective,
     DisplayTableImageComponent,
+
+    SortArrayPipe,
   ],
   exports: [
     ReplaceLineBreaks,
@@ -41,6 +44,8 @@ import {
     CustomToastrComponent,
     StrCapsAlphaDirective,
     DisplayTableImageComponent,
+
+    SortArrayPipe,
   ],
   imports: [CommonModule, FontAwesomeModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
diff --git a/packages/frontend/src/app/modules/stats/stats.module.ts b/packages/frontend/src/app/modules/stats/stats.module.ts
index db7f85d183..b929b7d916 100644
--- a/packages/frontend/src/app/modules/stats/stats.module.ts
+++ b/packages/frontend/src/app/modules/stats/stats.module.ts
@@ -41,7 +41,6 @@ import { CountUpModule } from "ngx-countup";
     ReactiveFormsModule,
     StatsRoutingModule,
   ],
-  providers: [],
   schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA],
 })
 export class StatsModule {}
diff --git a/packages/frontend/src/app/modules/usager-dossier/components/decision-refus-form/decision-refus-form.component.spec.ts b/packages/frontend/src/app/modules/usager-dossier/components/decision-refus-form/decision-refus-form.component.spec.ts
index 45d7278abd..639fe7f225 100644
--- a/packages/frontend/src/app/modules/usager-dossier/components/decision-refus-form/decision-refus-form.component.spec.ts
+++ b/packages/frontend/src/app/modules/usager-dossier/components/decision-refus-form/decision-refus-form.component.spec.ts
@@ -5,21 +5,16 @@ import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 
 import { RouterTestingModule } from "@angular/router/testing";
-import {
-  NgbDateParserFormatter,
-  NgbDatepickerI18n,
-  NgbModule,
-} from "@ng-bootstrap/ng-bootstrap";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 
 import { USAGER_ACTIF_MOCK } from "../../../../../_common/mocks/USAGER_ACTIF.mock";
-import { NgbDateCustomParserFormatter } from "../../../shared/services/date-formatter.service";
-import { CustomDatepickerI18n } from "../../../shared/services/date-french.service";
 import { SharedModule } from "../../../shared/shared.module";
 import { UsagerFormModel } from "../../../usager-shared/interfaces";
 
 import { DecisionRefusFormComponent } from "./decision-refus-form.component";
 import { StoreModule } from "@ngrx/store";
 import { _usagerReducer } from "../../../../shared";
+import { UsagerDossierModule } from "../../usager-dossier.module";
 
 describe("DecisionRefusFormComponent", () => {
   let component: DecisionRefusFormComponent;
@@ -35,17 +30,10 @@ describe("DecisionRefusFormComponent", () => {
         SharedModule,
         FormsModule,
         ReactiveFormsModule,
+        UsagerDossierModule,
         StoreModule.forRoot({ app: _usagerReducer }),
       ],
-      providers: [
-        NgbDateCustomParserFormatter,
-        { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
-        {
-          provide: NgbDateParserFormatter,
-          useClass: NgbDateCustomParserFormatter,
-        },
-        { provide: APP_BASE_HREF, useValue: "/" },
-      ],
+      providers: [{ provide: APP_BASE_HREF, useValue: "/" }],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   }));
diff --git a/packages/frontend/src/app/modules/usager-dossier/components/decision-valide-form/decision-valide-form.component.spec.ts b/packages/frontend/src/app/modules/usager-dossier/components/decision-valide-form/decision-valide-form.component.spec.ts
index e3cc865f55..dc9361a190 100644
--- a/packages/frontend/src/app/modules/usager-dossier/components/decision-valide-form/decision-valide-form.component.spec.ts
+++ b/packages/frontend/src/app/modules/usager-dossier/components/decision-valide-form/decision-valide-form.component.spec.ts
@@ -20,6 +20,7 @@ import { UsagerFormModel } from "../../../usager-shared/interfaces";
 import { DecisionValideFormComponent } from "./decision-valide-form.component";
 import { StoreModule } from "@ngrx/store";
 import { _usagerReducer } from "../../../../shared";
+import { UsagerDossierModule } from "../../usager-dossier.module";
 
 describe("DecisionValideFormComponent", () => {
   let component: DecisionValideFormComponent;
@@ -35,10 +36,10 @@ describe("DecisionValideFormComponent", () => {
         SharedModule,
         ReactiveFormsModule,
         FormsModule,
+        UsagerDossierModule,
         StoreModule.forRoot({ app: _usagerReducer }),
       ],
       providers: [
-        NgbDateCustomParserFormatter,
         { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
         {
           provide: NgbDateParserFormatter,
diff --git a/packages/frontend/src/app/modules/usager-dossier/components/step-decision/step-decision.component.ts b/packages/frontend/src/app/modules/usager-dossier/components/step-decision/step-decision.component.ts
index 60cea3d762..4fe223b183 100644
--- a/packages/frontend/src/app/modules/usager-dossier/components/step-decision/step-decision.component.ts
+++ b/packages/frontend/src/app/modules/usager-dossier/components/step-decision/step-decision.component.ts
@@ -27,7 +27,6 @@ import { CerfaDocType } from "@domifa/common";
 
 @Component({
   providers: [
-    NgbDateCustomParserFormatter,
     { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
     { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter },
   ],
diff --git a/packages/frontend/src/app/modules/usager-dossier/components/step-etat-civil/step-etat-civil.component.ts b/packages/frontend/src/app/modules/usager-dossier/components/step-etat-civil/step-etat-civil.component.ts
index 003c40857c..6bf244a6a9 100644
--- a/packages/frontend/src/app/modules/usager-dossier/components/step-etat-civil/step-etat-civil.component.ts
+++ b/packages/frontend/src/app/modules/usager-dossier/components/step-etat-civil/step-etat-civil.component.ts
@@ -25,7 +25,6 @@ import { UsagerFormModel } from "../../../usager-shared/interfaces";
 @Component({
   animations: [fadeInOut],
   providers: [
-    NgbDateCustomParserFormatter,
     { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
     { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter },
   ],
diff --git a/packages/frontend/src/app/modules/usager-dossier/components/step-rdv/step-rdv.component.spec.ts b/packages/frontend/src/app/modules/usager-dossier/components/step-rdv/step-rdv.component.spec.ts
index fa5f288c22..6e8fa8c4bc 100644
--- a/packages/frontend/src/app/modules/usager-dossier/components/step-rdv/step-rdv.component.spec.ts
+++ b/packages/frontend/src/app/modules/usager-dossier/components/step-rdv/step-rdv.component.spec.ts
@@ -13,6 +13,7 @@ import { UsagerFormModel } from "../../../usager-shared/interfaces";
 import { StepRdvComponent } from "./step-rdv.component";
 import { StoreModule } from "@ngrx/store";
 import { _usagerReducer } from "../../../../shared";
+import { UsagerDossierModule } from "../../usager-dossier.module";
 
 describe("StepRdvComponent", () => {
   let component: StepRdvComponent;
@@ -28,6 +29,7 @@ describe("StepRdvComponent", () => {
         SharedModule,
         ReactiveFormsModule,
         FormsModule,
+        UsagerDossierModule,
         StoreModule.forRoot({ app: _usagerReducer }),
       ],
       providers: [{ provide: APP_BASE_HREF, useValue: "/" }],
diff --git a/packages/frontend/src/app/modules/usager-dossier/components/step-rdv/step-rdv.component.ts b/packages/frontend/src/app/modules/usager-dossier/components/step-rdv/step-rdv.component.ts
index 84ff58f82c..1f6f52570f 100644
--- a/packages/frontend/src/app/modules/usager-dossier/components/step-rdv/step-rdv.component.ts
+++ b/packages/frontend/src/app/modules/usager-dossier/components/step-rdv/step-rdv.component.ts
@@ -8,11 +8,7 @@ import {
   Validators,
 } from "@angular/forms";
 import { ActivatedRoute, Router } from "@angular/router";
-import {
-  NgbDateParserFormatter,
-  NgbDatepickerI18n,
-  NgbDateStruct,
-} from "@ng-bootstrap/ng-bootstrap";
+import { NgbDateStruct } from "@ng-bootstrap/ng-bootstrap";
 
 import {
   UserStructure,
@@ -42,7 +38,6 @@ import { BaseUsagerDossierPageComponent } from "../base-usager-dossier-page/base
 import { UsagerFormModel } from "../../../usager-shared/interfaces";
 import {
   NgbDateCustomParserFormatter,
-  CustomDatepickerI18n,
   AuthService,
   CustomToastService,
 } from "../../../shared/services";
@@ -50,11 +45,7 @@ import { CerfaDocType } from "@domifa/common";
 
 @Component({
   animations: [fadeInOut],
-  providers: [
-    NgbDateCustomParserFormatter,
-    { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
-    { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter },
-  ],
+
   selector: "app-rdv",
   styleUrls: ["./step-rdv.component.css"],
   templateUrl: "./step-rdv.component.html",
diff --git a/packages/frontend/src/app/modules/usager-notes/components/profil-historique-notes/profil-historique-notes.component.html b/packages/frontend/src/app/modules/usager-notes/components/profil-historique-notes/profil-historique-notes.component.html
deleted file mode 100644
index 1128ab807f..0000000000
--- a/packages/frontend/src/app/modules/usager-notes/components/profil-historique-notes/profil-historique-notes.component.html
+++ /dev/null
@@ -1,55 +0,0 @@
-<h3>Historique des notes</h3>
-
-<div class="table-responsive">
-  <table *ngIf="notes.length > 0" class="table table-hover">
-    <caption class="visually-hidden">
-      Notes sur l'usager
-    </caption>
-    <thead>
-      <tr>
-        <th scope="col">Date</th>
-        <th scope="col">Message</th>
-        <th scope="col">Responsable</th>
-        <th scope="col">Statut</th>
-        <th scope="col" class="text-end">Actions</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr
-        *ngFor="let note of notes; let i = index"
-        [attr.aria-rowindex]="i + 1"
-      >
-        <td>
-          {{ note.createdAt | date : "dd MMMM yyyy à HH:mm" }}
-        </td>
-        <td>
-          <p class="fw-bold text-break">{{ note.message }}</p>
-        </td>
-        <td>{{ note.createdBy.userName }}</td>
-        <td>
-          <span
-            *ngIf="note.archivedAt"
-            class="badge badge-pill bg-warning text-dark"
-          >
-            Note archivée
-          </span>
-          <span class="badge badge-pill bg-primary" *ngIf="note.pinned">
-            Note épinglée
-          </span>
-        </td>
-        <td class="text-end">
-          <div *ngIf="me?.role !== 'facteur'" class="ms-3">
-            <app-usager-notes-actions
-              [usager]="usager"
-              [note]="note"
-              (getUsagerNotes)="getUsagerNotes()"
-            ></app-usager-notes-actions>
-          </div>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-<div *ngIf="notes.length === 0" class="alert alert-info">
-  <p>Aucune note enregistrée actuellement</p>
-</div>
diff --git a/packages/frontend/src/app/modules/usager-notes/usager-notes.module.ts b/packages/frontend/src/app/modules/usager-notes/usager-notes.module.ts
index 47d6041d24..b060cd9e68 100644
--- a/packages/frontend/src/app/modules/usager-notes/usager-notes.module.ts
+++ b/packages/frontend/src/app/modules/usager-notes/usager-notes.module.ts
@@ -4,7 +4,6 @@ import { CommonModule } from "@angular/common";
 import { BaseUsagerNotesComponent } from "./components/base-usager-notes/base-usager-notes.component";
 import { ProfilAddNoteFormComponent } from "./components/profil-add-note-form/profil-add-note-form.component";
 import { ProfilGeneralNotesComponent } from "./components/profil-general-notes/profil-general-notes.component";
-import { ProfilHistoriqueNotesComponent } from "./components/profil-historique-notes/profil-historique-notes.component";
 import { UsagerNotesActionsComponent } from "./components/usager-notes-actions/usager-notes-actions.component";
 import { SharedModule } from "../shared/shared.module";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
@@ -14,13 +13,11 @@ import { UsagerSharedModule } from "../usager-shared/usager-shared.module";
   declarations: [
     BaseUsagerNotesComponent,
     ProfilGeneralNotesComponent,
-    ProfilHistoriqueNotesComponent,
     ProfilAddNoteFormComponent,
     UsagerNotesActionsComponent,
   ],
   exports: [
     ProfilGeneralNotesComponent,
-    ProfilHistoriqueNotesComponent,
     ProfilAddNoteFormComponent,
     UsagerNotesActionsComponent,
   ],
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-procuration-courrier/profil-procuration-courrier-component.spec.ts b/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-procuration-courrier/profil-procuration-courrier-component.spec.ts
index 45a301e1ff..cd148dcd71 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-procuration-courrier/profil-procuration-courrier-component.spec.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-procuration-courrier/profil-procuration-courrier-component.spec.ts
@@ -5,7 +5,7 @@ import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
 import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { RouterTestingModule } from "@angular/router/testing";
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import { NgbDatepickerI18n, NgbModule } from "@ng-bootstrap/ng-bootstrap";
 
 import { USAGER_ACTIF_MOCK } from "../../../../../../_common/mocks/USAGER_ACTIF.mock";
 import { MATOMO_INJECTORS, _usagerReducer } from "../../../../../shared";
@@ -13,6 +13,11 @@ import { NotFoundComponent } from "../../../../general/components/errors/not-fou
 import { UsagerFormModel } from "../../../../usager-shared/interfaces";
 import { UsagersProfilProcurationCourrierComponent } from "./profil-procuration-courrier-component";
 import { StoreModule } from "@ngrx/store";
+import { SharedModule } from "../../../../shared/shared.module";
+import {
+  NgbDateCustomParserFormatter,
+  CustomDatepickerI18n,
+} from "../../../../shared/services";
 
 describe("UsagersProfilProcurationCourrierComponent", () => {
   let fixture: ComponentFixture<UsagersProfilProcurationCourrierComponent>;
@@ -27,14 +32,18 @@ describe("UsagersProfilProcurationCourrierComponent", () => {
         ]),
         CommonModule,
         StoreModule.forRoot({ app: _usagerReducer }),
-
         NgbModule,
         FormsModule,
         HttpClientTestingModule,
+        SharedModule,
         ReactiveFormsModule,
         ...MATOMO_INJECTORS,
       ],
-      providers: [{ provide: APP_BASE_HREF, useValue: "/" }],
+      providers: [
+        { provide: APP_BASE_HREF, useValue: "/" },
+        NgbDateCustomParserFormatter,
+        { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
+      ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
 
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-procuration-courrier/profil-procuration-courrier-component.ts b/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-procuration-courrier/profil-procuration-courrier-component.ts
index 4bb706c8e6..e1974ee38e 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-procuration-courrier/profil-procuration-courrier-component.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-procuration-courrier/profil-procuration-courrier-component.ts
@@ -19,8 +19,6 @@ import {
   Validators,
 } from "@angular/forms";
 import {
-  NgbDateParserFormatter,
-  NgbDatepickerI18n,
   NgbDateStruct,
   NgbModal,
   NgbModalRef,
@@ -43,17 +41,11 @@ import {
   formatDateToNgb,
 } from "../../../../../shared/bootstrap-util";
 
-import { CustomDatepickerI18n } from "../../../../shared/services/date-french.service";
 import { UsagerFormModel } from "../../../../usager-shared/interfaces";
 import { UsagerProcuration } from "../../../../usager-shared/interfaces/UsagerProcuration.interface";
 import { UsagerOptionsService } from "../../../services/usager-options.service";
 import { UsagerOptionsProcuration } from "@domifa/common";
 @Component({
-  providers: [
-    NgbDateCustomParserFormatter,
-    { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
-    { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter },
-  ],
   selector: "app-profil-procuration-courrier",
   templateUrl: "./profil-procuration-courrier.html",
 })
@@ -105,7 +97,6 @@ export class UsagersProfilProcurationCourrierComponent
     this.procurationsForm = this.formBuilder.group({
       procurations: this.formBuilder.array([]),
     });
-    this.initForm();
   }
 
   public get form(): UntypedFormArray {
@@ -116,11 +107,12 @@ export class UsagersProfilProcurationCourrierComponent
     this.submitted = false;
     this.loading = false;
     this.isFormVisible = false;
-    this.procurationsForm.reset();
+    this.form.clear();
   }
 
   public openForm() {
     this.isFormVisible = true;
+    this.initForm();
     this.changeFocus(0);
   }
 
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-transfert-courrier/profil-transfert-courrier-component.spec.ts b/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-transfert-courrier/profil-transfert-courrier-component.spec.ts
index 3d469e0f76..373025a277 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-transfert-courrier/profil-transfert-courrier-component.spec.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-transfert-courrier/profil-transfert-courrier-component.spec.ts
@@ -13,6 +13,7 @@ import { UsagerFormModel } from "../../../../usager-shared/interfaces";
 
 import { UsagersProfilTransfertCourrierComponent } from "./profil-transfert-courrier-component";
 import { StoreModule } from "@ngrx/store";
+import { UsagerProfilModule } from "../../../usager-profil.module";
 
 describe("UsagersProfilTransfertCourrierComponent", () => {
   let fixture: ComponentFixture<UsagersProfilTransfertCourrierComponent>;
@@ -29,6 +30,7 @@ describe("UsagersProfilTransfertCourrierComponent", () => {
         ...MATOMO_INJECTORS,
         StoreModule.forRoot({ app: _usagerReducer }),
         RouterTestingModule,
+        UsagerProfilModule,
       ],
       providers: [{ provide: APP_BASE_HREF, useValue: "/" }],
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-transfert-courrier/profil-transfert-courrier-component.ts b/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-transfert-courrier/profil-transfert-courrier-component.ts
index 87b3e7b996..b02a7464cd 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-transfert-courrier/profil-transfert-courrier-component.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/_courriers/profil-transfert-courrier/profil-transfert-courrier-component.ts
@@ -4,7 +4,6 @@ import {
   ElementRef,
   Input,
   OnDestroy,
-  OnInit,
   TemplateRef,
   ViewChild,
 } from "@angular/core";
@@ -15,13 +14,10 @@ import {
   Validators,
 } from "@angular/forms";
 import {
-  NgbDateParserFormatter,
-  NgbDatepickerI18n,
   NgbDateStruct,
   NgbModal,
   NgbModalRef,
 } from "@ng-bootstrap/ng-bootstrap";
-import { MatomoTracker } from "ngx-matomo-client";
 import { Subscription } from "rxjs";
 import {
   DEFAULT_MODAL_OPTIONS,
@@ -35,24 +31,16 @@ import {
 } from "../../../../../shared";
 import {
   NgbDateCustomParserFormatter,
-  CustomDatepickerI18n,
   CustomToastService,
 } from "../../../../shared/services";
 import { UsagerFormModel } from "../../../../usager-shared/interfaces";
 import { UsagerOptionsService } from "../../../services/usager-options.service";
 
 @Component({
-  providers: [
-    NgbDateCustomParserFormatter,
-    { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
-    { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter },
-  ],
   selector: "app-profil-transfert-courrier",
   templateUrl: "./profil-transfert-courrier.html",
 })
-export class UsagersProfilTransfertCourrierComponent
-  implements OnInit, OnDestroy
-{
+export class UsagersProfilTransfertCourrierComponent implements OnDestroy {
   @Input() public usager!: UsagerFormModel;
   @Input() public me!: UserStructure;
 
@@ -76,7 +64,6 @@ export class UsagersProfilTransfertCourrierComponent
     private readonly nbgDate: NgbDateCustomParserFormatter,
     private readonly toastService: CustomToastService,
     private readonly usagerOptionsService: UsagerOptionsService,
-    private readonly matomo: MatomoTracker,
     private readonly modalService: NgbModal,
     private readonly changeDetectorRef: ChangeDetectorRef
   ) {
@@ -86,10 +73,6 @@ export class UsagersProfilTransfertCourrierComponent
     this.minDateToday = minDateToday;
   }
 
-  public ngOnInit(): void {
-    this.initForm();
-  }
-
   public ngOnDestroy(): void {
     this.subscription.unsubscribe();
   }
@@ -177,8 +160,6 @@ export class UsagersProfilTransfertCourrierComponent
         .subscribe({
           next: () => {
             this.hideForm();
-            this.matomo.trackEvent("profil", "actions", "edit_transfert", 1);
-
             this.toastService.success("Transfert modifié avec succès");
           },
           error: () => {
@@ -215,7 +196,6 @@ export class UsagersProfilTransfertCourrierComponent
             this.hideForm();
             this.transfertForm.reset();
             this.submitted = false;
-            this.matomo.trackEvent("profil", "actions", "delete_transfert", 1);
           }, 500);
         },
         error: () => {
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/historique-table.scss b/packages/frontend/src/app/modules/usager-profil/components/_historiques/historique-table.scss
new file mode 100644
index 0000000000..8d28561788
--- /dev/null
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/historique-table.scss
@@ -0,0 +1,38 @@
+.table-history {
+  border-collapse: separate;
+  border-spacing: 0 7px;
+
+  tbody td {
+    vertical-align: middle;
+    font-style: normal;
+    padding: 0.5rem;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  tbody td:first-child {
+    border-radius: 10px 0 0 10px;
+    padding: 0 1rem;
+    width: 240px;
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
+  tbody td:last-child {
+    background-color: white;
+    border-radius: 0 10px 10px 0;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    padding-right: 1rem;
+  }
+
+  tbody tr {
+    background: #ffffff;
+    height: 50px;
+  }
+
+  thead th {
+    font-weight: 600;
+    color: #3150c0;
+    padding: 0.2rem 0.5rem;
+    border: none;
+  }
+}
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-courriers/profil-historique-courriers.component.html b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-courriers/profil-historique-courriers.component.html
index 5ccf99834a..b70833d6f2 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-courriers/profil-historique-courriers.component.html
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-courriers/profil-historique-courriers.component.html
@@ -1,6 +1,6 @@
 <h3>Historique des courriers</h3>
 <div *ngIf="interactions.length > 0" class="table-responsive">
-  <table class="table table-hover">
+  <table class="table-history table">
     <caption class="visually-hidden">
       Historique des courriers
     </caption>
@@ -8,6 +8,7 @@ <h3>Historique des courriers</h3>
       <tr>
         <th scope="col">Date</th>
         <th scope="col">Type d'interaction</th>
+        <th scope="col">Contenu</th>
         <th scope="col">Notifié par</th>
         <th scope="col" class="text-end d-print-none">Actions</th>
       </tr>
@@ -15,42 +16,25 @@ <h3>Historique des courriers</h3>
 
     <tbody>
       <ng-container *ngFor="let interaction of interactions; let i = index">
-        <tr
-          [attr.aria-rowindex]="i + 1"
-          [ngClass]="{
-            'fw-bold':
-              interaction.type === 'courrierOut' ||
-              interaction.type === 'recommandeOut' ||
-              interaction.type === 'colisOut'
-          }"
-        >
+        <tr [attr.aria-rowindex]="i + 1">
           <td>
             {{ interaction.dateInteraction | date : "dd MMMM yyyy à HH:mm" }}
           </td>
+          <td
+            [ngClass]="{
+              'fw-bold':
+                interaction.type === 'courrierOut' ||
+                interaction.type === 'recommandeOut' ||
+                interaction.type === 'colisOut'
+            }"
+          >
+            {{ interaction.label }}
+          </td>
           <td>
-            <div *ngIf="interaction.event === 'create'">
-              {{ interaction.label }}
-              <p
-                *ngIf="interaction.content"
-                [innerHTML]="interaction.content | nl2br"
-              ></p>
-            </div>
-            <div *ngIf="interaction.event === 'delete'">
-              <strong>{{ interaction.label }}</strong
-              ><br />
-              <span
-                *ngIf="interaction.content"
-                [innerHTML]="interaction.content | nl2br"
-              >
-              </span>
-              <br />
-              Interaction supprimée le
-              {{
-                interaction?.previousValue?.dateInteraction
-                  | date : "dd/MM/yyyy à HH:mm"
-              }}
-              par {{ interaction?.previousValue?.userName }}
-            </div>
+            <span
+              *ngIf="interaction.content"
+              [innerHTML]="interaction.content | nl2br"
+            ></span>
           </td>
           <td>{{ interaction.userName }}</td>
           <td class="text-end d-print-none">
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-courriers/profil-historique-courriers.component.ts b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-courriers/profil-historique-courriers.component.ts
index fb1dcd38b3..04b5841716 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-courriers/profil-historique-courriers.component.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-courriers/profil-historique-courriers.component.ts
@@ -8,7 +8,6 @@ import {
   ViewChild,
 } from "@angular/core";
 
-import { CustomToastService } from "src/app/modules/shared/services/custom-toast.service";
 import {
   DEFAULT_MODAL_OPTIONS,
   UserStructure,
@@ -20,10 +19,12 @@ import {
 import { InteractionService } from "../../../../usager-shared/services/interaction.service";
 import { Subscription } from "rxjs";
 import { InteractionEvent } from "@domifa/common";
+import { CustomToastService } from "../../../../shared/services";
 
 @Component({
   selector: "app-profil-historique-courriers",
   templateUrl: "./profil-historique-courriers.component.html",
+  styleUrls: ["../historique-table.scss"],
 })
 export class ProfilHistoriqueCourriersComponent implements OnInit, OnDestroy {
   @Input() public usager!: UsagerFormModel;
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-decisions/profil-historique-decisions.component.html b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-decisions/profil-historique-decisions.component.html
index 9ea71500d4..a4ef6f3df1 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-decisions/profil-historique-decisions.component.html
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-decisions/profil-historique-decisions.component.html
@@ -3,22 +3,30 @@ <h3>Historique des décisions</h3>
   <p>Aucun historique de décision n'est enregistré</p>
 </div>
 <div class="table-responsive" *ngIf="usager.historique.length > 0">
-  <table class="table table-hover">
+  <table class="table-history table">
     <caption class="visually-hidden">
       Historique des décisions
     </caption>
     <thead>
       <tr>
-        <th scope="col">Date</th>
+        <th scope="col">
+          <app-table-head-sort
+            sortKey="dateDecision"
+            [(sortValue)]="sortValue"
+            currentKey="dateDecision"
+            columnName="Date"
+          >
+          </app-table-head-sort>
+        </th>
         <th scope="col">Type de décision</th>
-        <th scope="col">Responsable</th>
+        <th scope="col">Notifié par</th>
         <th scope="col" class="text-end d-print-none">Actions</th>
       </tr>
     </thead>
     <tbody>
       <tr
         *ngFor="
-          let histo of usager.historique | orderByDate : 'desc';
+          let histo of usager.historique | sortArray : currentKey : sortValue;
           let i = index
         "
         [attr.aria-rowindex]="i + 1"
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-decisions/profil-historique-decisions.component.ts b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-decisions/profil-historique-decisions.component.ts
index 9778f8ef03..17a0ab955e 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-decisions/profil-historique-decisions.component.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-decisions/profil-historique-decisions.component.ts
@@ -1,15 +1,20 @@
 import { Component, Input } from "@angular/core";
 import { UsagerFormModel } from "../../../../usager-shared/interfaces";
 import { USAGER_DECISION_STATUT_LABELS_PROFIL } from "@domifa/common";
-import { UserStructure } from "../../../../../../_common/model";
+import { UsagerDecision, UserStructure } from "../../../../../../_common/model";
+import { UsagersFilterCriteriaSortValues } from "../../../../manage-usagers/components/usager-filter";
 
 @Component({
   selector: "app-profil-historique-decisions",
   templateUrl: "./profil-historique-decisions.component.html",
+  styleUrls: ["../historique-table.scss"],
 })
 export class ProfilHistoriqueDecisionsComponent {
   public readonly USAGER_DECISION_STATUT_LABELS_PROFIL =
     USAGER_DECISION_STATUT_LABELS_PROFIL;
   @Input() public me!: UserStructure;
   @Input() public usager!: UsagerFormModel;
+
+  public sortValue: UsagersFilterCriteriaSortValues = "desc";
+  public currentKey: keyof UsagerDecision = "dateDecision";
 }
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-notes/profil-historique-notes.component.html b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-notes/profil-historique-notes.component.html
new file mode 100644
index 0000000000..67654bfdbd
--- /dev/null
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-notes/profil-historique-notes.component.html
@@ -0,0 +1,63 @@
+<h3>Historique des notes</h3>
+
+<div class="table-responsive">
+  <table *ngIf="notes.length > 0" class="table-history table">
+    <caption class="visually-hidden">
+      Notes sur l'usager
+    </caption>
+    <thead>
+      <tr>
+        <th scope="col">
+          <app-table-head-sort
+            sortKey="createdAt"
+            [(sortValue)]="sortValue"
+            [(currentKey)]="currentKey"
+            columnName="Date"
+          >
+          </app-table-head-sort>
+        </th>
+        <th scope="col">Statut</th>
+        <th scope="col">Message</th>
+        <th scope="col">Notifié par</th>
+        <th scope="col" class="text-end">Actions</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        *ngFor="
+          let note of notes | sortArray : currentKey : sortValue;
+          let i = index
+        "
+        [attr.aria-rowindex]="i + 1"
+      >
+        <td>
+          {{ note.createdAt | date : "dd MMMM yyyy à HH:mm" }}
+        </td>
+        <td>
+          <span *ngIf="note.archivedAt" class="label-info orange-status">
+            Archivée
+          </span>
+          <span class="label-info green-status" *ngIf="note.pinned">
+            Épinglée
+          </span>
+        </td>
+        <td class="text-break">
+          {{ note.message }}
+        </td>
+        <td>{{ note.createdBy.userName }}</td>
+        <td class="text-end">
+          <app-usager-notes-actions
+            *ngIf="me?.role !== 'facteur'"
+            class="ms-3"
+            [usager]="usager"
+            [note]="note"
+            (getUsagerNotes)="getUsagerNotes()"
+          ></app-usager-notes-actions>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+<div *ngIf="notes.length === 0" class="alert alert-info">
+  <p>Aucune note enregistrée actuellement</p>
+</div>
diff --git a/packages/frontend/src/app/modules/usager-notes/components/profil-historique-notes/profil-historique-notes.component.spec.ts b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-notes/profil-historique-notes.component.spec.ts
similarity index 86%
rename from packages/frontend/src/app/modules/usager-notes/components/profil-historique-notes/profil-historique-notes.component.spec.ts
rename to packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-notes/profil-historique-notes.component.spec.ts
index 0f2be7ab16..54475ce282 100644
--- a/packages/frontend/src/app/modules/usager-notes/components/profil-historique-notes/profil-historique-notes.component.spec.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-notes/profil-historique-notes.component.spec.ts
@@ -5,12 +5,12 @@ import { ComponentFixture, TestBed } from "@angular/core/testing";
 import { RouterTestingModule } from "@angular/router/testing";
 import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 
-import { UsagerFormModel } from "../../../usager-shared/interfaces";
+import { UsagerFormModel } from "../../../../usager-shared/interfaces";
 
-import { USAGER_ACTIF_MOCK } from "../../../../../_common/mocks/USAGER_ACTIF.mock";
+import { USAGER_ACTIF_MOCK } from "../../../../../../_common/mocks/USAGER_ACTIF.mock";
 import { ProfilHistoriqueNotesComponent } from "./profil-historique-notes.component";
 import { StoreModule } from "@ngrx/store";
-import { _usagerReducer } from "../../../../shared";
+import { _usagerReducer } from "../../../../../shared";
 
 describe("ProfilHistoriqueNotesComponent", () => {
   let component: ProfilHistoriqueNotesComponent;
diff --git a/packages/frontend/src/app/modules/usager-notes/components/profil-historique-notes/profil-historique-notes.component.ts b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-notes/profil-historique-notes.component.ts
similarity index 53%
rename from packages/frontend/src/app/modules/usager-notes/components/profil-historique-notes/profil-historique-notes.component.ts
rename to packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-notes/profil-historique-notes.component.ts
index e2745ca2c4..0b9bf90ac0 100644
--- a/packages/frontend/src/app/modules/usager-notes/components/profil-historique-notes/profil-historique-notes.component.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-notes/profil-historique-notes.component.ts
@@ -1,19 +1,25 @@
 import { Component, Input } from "@angular/core";
-import { UsagerFormModel } from "../../../usager-shared/interfaces";
+import { UsagerFormModel } from "../../../../usager-shared/interfaces";
 import { NgbModal } from "@ng-bootstrap/ng-bootstrap";
-import { CustomToastService, AuthService } from "../../../shared/services";
-import { UsagerNotesService } from "../../services/usager-notes.service";
-import { BaseUsagerNotesComponent } from "../base-usager-notes/base-usager-notes.component";
-import { Order } from "../../../../../_common/model/pagination";
+import { CustomToastService, AuthService } from "../../../../shared/services";
+import { UsagerNotesService } from "../../../../usager-notes/services/usager-notes.service";
+import { BaseUsagerNotesComponent } from "../../../../usager-notes/components/base-usager-notes/base-usager-notes.component";
+import { Order } from "../../../../../../_common/model/pagination";
 import { Store } from "@ngrx/store";
+import { UsagersFilterCriteriaSortValues } from "../../../../manage-usagers/components/usager-filter";
+import { UsagerNote } from "../../../../../../_common/model";
 
 @Component({
   selector: "app-profil-historique-notes",
   templateUrl: "./profil-historique-notes.component.html",
+  styleUrls: ["../historique-table.scss"],
 })
 export class ProfilHistoriqueNotesComponent extends BaseUsagerNotesComponent {
   @Input() public usager!: UsagerFormModel;
 
+  public sortValue: UsagersFilterCriteriaSortValues = "desc";
+  public currentKey: keyof UsagerNote = "createdAt";
+
   constructor(
     protected readonly usagerNotesService: UsagerNotesService,
     protected readonly modalService: NgbModal,
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-procurations/profil-historique-procurations.component.html b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-procurations/profil-historique-procurations.component.html
index 6105f49d5e..fee4192f81 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-procurations/profil-historique-procurations.component.html
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-procurations/profil-historique-procurations.component.html
@@ -3,41 +3,65 @@ <h2>Historique des procurations</h2>
   <p>Aucun historique de procurations actuellement</p>
 </div>
 <div class="table-responsive" *ngIf="procurationHistory.length > 0">
-  <table *ngIf="procurationHistory.length > 0" class="table table-hover">
+  <table *ngIf="procurationHistory.length > 0" class="table table-history">
     <caption class="visually-hidden">
       Historique des procurations
     </caption>
     <thead>
       <tr>
-        <th scope="col">Date</th>
+        <th scope="col">
+          <app-table-head-sort
+            sortKey="createdAt"
+            [(sortValue)]="sortValue"
+            [(currentKey)]="currentKey"
+            columnName="Date"
+          >
+          </app-table-head-sort>
+        </th>
         <th scope="col">Action</th>
         <th scope="col">Nom prénom</th>
         <th scope="col">Date de naissance</th>
-        <th scope="col">Période de validité</th>
-        <th scope="col">Responsable</th>
+        <th scope="col">
+          <app-table-head-sort
+            sortKey="dateDebut"
+            [(sortValue)]="sortValue"
+            [(currentKey)]="currentKey"
+            columnName="Période de validité"
+          >
+          </app-table-head-sort>
+        </th>
+        <th scope="col">Notifié par</th>
       </tr>
     </thead>
     <tbody>
       <tr
-        *ngFor="let procu of procurationHistory; let i = index"
+        *ngFor="
+          let procuration of procurationHistory
+            | sortArray : currentKey : sortValue;
+          let i = index
+        "
         [attr.aria-rowindex]="i + 1"
       >
-        <td>{{ procu.createdAt | date : "dd/MM/yyyy à HH:mm" }}</td>
+        <td>{{ procuration.createdAt | date : "dd/MM/yyyy à HH:mm" }}</td>
         <td>
-          {{ HISTORY_ACTIONS[procu.action] }}
+          <span
+            [class]="'label-info ' + HISTORY_ACTIONS[procuration.action].class"
+          >
+            {{ HISTORY_ACTIONS[procuration.action].label }}
+          </span>
         </td>
-        <td>{{ procu.nom }} {{ procu.prenom }}</td>
-        <td>{{ procu.dateNaissance | date : "dd/MM/yyyy" || "" }}</td>
+        <td>{{ procuration.nom }} {{ procuration.prenom }}</td>
+        <td>{{ procuration.dateNaissance | date : "dd/MM/yyyy" || "" }}</td>
         <td>
-          <span *ngIf="procu.dateDebut === null">
-            {{ procu.dateFin | date : "dd/MM/yyyy" }}
+          <span *ngIf="procuration.dateDebut === null">
+            {{ procuration.dateFin | date : "dd/MM/yyyy" }}
           </span>
-          <span class="valeur" *ngIf="procu.dateDebut">
-            Du {{ procu.dateDebut | date : "dd/MM/yyyy" }} au
-            {{ procu.dateFin | date : "dd/MM/yyyy" }}
+          <span class="valeur" *ngIf="procuration.dateDebut">
+            Du {{ procuration.dateDebut | date : "dd/MM/yyyy" }} au
+            {{ procuration.dateFin | date : "dd/MM/yyyy" }}
           </span>
         </td>
-        <td>{{ procu.userName }}</td>
+        <td>{{ procuration.userName }}</td>
       </tr>
     </tbody>
   </table>
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-procurations/profil-historique-procurations.component.ts b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-procurations/profil-historique-procurations.component.ts
index 384f9e61d1..630040c7f1 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-procurations/profil-historique-procurations.component.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-procurations/profil-historique-procurations.component.ts
@@ -7,10 +7,12 @@ import {
 import { Subscription } from "rxjs";
 import { UsagerFormModel } from "../../../../usager-shared/interfaces";
 import { UsagerOptionsService } from "../../../services/usager-options.service";
+import { UsagersFilterCriteriaSortValues } from "../../../../manage-usagers/components/usager-filter";
 
 @Component({
   selector: "app-profil-historique-procurations",
   templateUrl: "./profil-historique-procurations.component.html",
+  styleUrls: ["../historique-table.scss"],
 })
 export class ProfilHistoriqueProcurationsComponent
   implements OnInit, OnDestroy
@@ -18,7 +20,6 @@ export class ProfilHistoriqueProcurationsComponent
   @Input() public usager!: UsagerFormModel;
   @Input() public me!: UserStructure;
   private subscription = new Subscription();
-
   public procurationHistory: UsagerOptionsHistory[];
   public readonly HISTORY_ACTIONS = HISTORY_ACTIONS;
 
@@ -26,6 +27,9 @@ export class ProfilHistoriqueProcurationsComponent
     this.procurationHistory = [];
   }
 
+  public sortValue: UsagersFilterCriteriaSortValues = "desc";
+  public currentKey: keyof UsagerOptionsHistory = "createdAt";
+
   public ngOnInit(): void {
     this.subscription.add(
       this.usagerOptionsService
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-sms/profil-historique-sms.component.css b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-sms/profil-historique-sms.component.css
deleted file mode 100644
index 93330696fc..0000000000
--- a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-sms/profil-historique-sms.component.css
+++ /dev/null
@@ -1,3 +0,0 @@
-td {
-  min-width: 160px;
-}
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-sms/profil-historique-sms.component.html b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-sms/profil-historique-sms.component.html
index ee59316c32..0039ebd5d7 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-sms/profil-historique-sms.component.html
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-sms/profil-historique-sms.component.html
@@ -9,7 +9,7 @@ <h3>Historique des envois de SMS</h3>
 </ul>
 
 <div class="table-responsive" *ngIf="messagesList?.length > 0">
-  <table class="table">
+  <table class="table-history table">
     <caption class="visually-hidden">
       Historique des SMS envoyés
     </caption>
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-sms/profil-historique-sms.component.ts b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-sms/profil-historique-sms.component.ts
index fbc15dc08e..93f6a86100 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-sms/profil-historique-sms.component.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-sms/profil-historique-sms.component.ts
@@ -10,8 +10,8 @@ import { UsagerProfilService } from "../../../services/usager-profil.service";
 
 @Component({
   selector: "app-profil-historique-sms",
+  styleUrls: ["../historique-table.scss"],
   templateUrl: "./profil-historique-sms.component.html",
-  styleUrls: ["./profil-historique-sms.component.css"],
 })
 export class ProfilHistoriqueSmsComponent implements OnInit, OnDestroy {
   @Input() public usager!: UsagerFormModel;
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-transferts/profil-historique-transferts.component.html b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-transferts/profil-historique-transferts.component.html
index 54cbc64370..86aa7e419b 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-transferts/profil-historique-transferts.component.html
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-transferts/profil-historique-transferts.component.html
@@ -3,28 +3,52 @@ <h3>Historique des transferts</h3>
   <p>Aucun historique de transferts de courriers actuellement</p>
 </div>
 <div class="table-responsive" *ngIf="transfertHistory.length > 0">
-  <table class="table table-hover">
+  <table class="table-history table">
     <caption class="visually-hidden">
       Historique des transferts
     </caption>
     <thead>
       <tr>
-        <th scope="col">Date</th>
+        <th scope="col">
+          <app-table-head-sort
+            sortKey="createdAt"
+            [(sortValue)]="sortValue"
+            [(currentKey)]="currentKey"
+            columnName="Date"
+          >
+          </app-table-head-sort>
+        </th>
         <th scope="col">Action</th>
         <th scope="col">Nom</th>
         <th scope="col">Adresse</th>
-        <th scope="col">Période de validité</th>
-        <th scope="col">Responsable</th>
+        <th scope="col">
+          <app-table-head-sort
+            sortKey="dateDebut"
+            [(sortValue)]="sortValue"
+            [(currentKey)]="currentKey"
+            columnName="Période de validité"
+          >
+          </app-table-head-sort>
+        </th>
+        <th scope="col">Notifié par</th>
       </tr>
     </thead>
     <tbody>
       <tr
-        *ngFor="let transfert of transfertHistory; let i = index"
+        *ngFor="
+          let transfert of transfertHistory
+            | sortArray : currentKey : sortValue;
+          let i = index
+        "
         [attr.aria-rowindex]="i + 1"
       >
         <td>{{ transfert.createdAt | date : "dd/MM/yyyy à HH:mm" }}</td>
         <td>
-          {{ HISTORY_ACTIONS[transfert.action] }}
+          <span
+            [class]="'label-info ' + HISTORY_ACTIONS[transfert.action].class"
+          >
+            {{ HISTORY_ACTIONS[transfert.action].label }}
+          </span>
         </td>
         <td>{{ transfert.nom }}</td>
         <td>{{ transfert.adresse }}</td>
diff --git a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-transferts/profil-historique-transferts.component.ts b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-transferts/profil-historique-transferts.component.ts
index e04dae3221..16539ce493 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-transferts/profil-historique-transferts.component.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/_historiques/profil-historique-transferts/profil-historique-transferts.component.ts
@@ -7,10 +7,12 @@ import {
 } from "../../../../../../_common/model";
 import { UsagerFormModel } from "../../../../usager-shared/interfaces";
 import { UsagerOptionsService } from "../../../services/usager-options.service";
+import { UsagersFilterCriteriaSortValues } from "../../../../manage-usagers/components/usager-filter";
 
 @Component({
   selector: "app-profil-historique-transferts",
   templateUrl: "./profil-historique-transferts.component.html",
+  styleUrls: ["../historique-table.scss"],
 })
 export class ProfilHistoriqueTransfertsComponent implements OnInit, OnDestroy {
   @Input() public usager!: UsagerFormModel;
@@ -20,6 +22,9 @@ export class ProfilHistoriqueTransfertsComponent implements OnInit, OnDestroy {
   public transfertHistory: UsagerOptionsHistory[];
   public readonly HISTORY_ACTIONS = HISTORY_ACTIONS;
 
+  public sortValue: UsagersFilterCriteriaSortValues = "desc";
+  public currentKey: keyof UsagerOptionsHistory = "createdAt";
+
   constructor(private readonly usagerOptionsService: UsagerOptionsService) {
     this.transfertHistory = [];
   }
diff --git a/packages/frontend/src/app/modules/usager-profil/components/pages/profil-general-section/profil-general-section.component.html b/packages/frontend/src/app/modules/usager-profil/components/pages/profil-general-section/profil-general-section.component.html
index e9f6f73af0..3c27a9e713 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/pages/profil-general-section/profil-general-section.component.html
+++ b/packages/frontend/src/app/modules/usager-profil/components/pages/profil-general-section/profil-general-section.component.html
@@ -302,14 +302,14 @@ <h2>Dossier</h2>
             <div class="col-6 my-1">
               <div
                 *ngIf="usager.typeDom === 'RENOUVELLEMENT'"
-                class="label-info label-yellow"
+                class="label-info orange-status"
               >
                 <span>Renouvellement</span>
               </div>
 
               <div
                 *ngIf="usager.typeDom === 'PREMIERE_DOM'"
-                class="label-info label-grey"
+                class="label-info grey-status"
               >
                 <span>Première demande</span>
               </div>
diff --git a/packages/frontend/src/app/modules/usager-profil/components/pages/profil-historique/profil-historique.component.html b/packages/frontend/src/app/modules/usager-profil/components/pages/profil-historique/profil-historique.component.html
index 9968602fa1..635f9a6d64 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/pages/profil-historique/profil-historique.component.html
+++ b/packages/frontend/src/app/modules/usager-profil/components/pages/profil-historique/profil-historique.component.html
@@ -33,7 +33,7 @@ <h2 id="tablist-1" class="d-print-none">Historiques</h2>
           role="tab"
           [attr.aria-controls]="'tab-' + section.id"
           [attr.tabindex]="currentSection === section.id ? null : -1"
-          class="btn me-1"
+          class="btn me-1 my-1"
           [ngClass]="
             currentSection === section.id
               ? 'btn-primary'
@@ -45,7 +45,7 @@ <h2 id="tablist-1" class="d-print-none">Historiques</h2>
           <span class="focus">{{ section.name }}</span>
         </button>
       </div>
-
+      <br />
       <div class="row">
         <div
           class="col-md-12"
diff --git a/packages/frontend/src/app/modules/usager-profil/components/pages/profil-historique/profil-historique.component.spec.ts b/packages/frontend/src/app/modules/usager-profil/components/pages/profil-historique/profil-historique.component.spec.ts
index 6efcb61f81..c7faf25d5c 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/pages/profil-historique/profil-historique.component.spec.ts
+++ b/packages/frontend/src/app/modules/usager-profil/components/pages/profil-historique/profil-historique.component.spec.ts
@@ -13,7 +13,7 @@ import { USER_STRUCTURE_MOCK } from "../../../../../../_common/mocks/USER_STRUCT
 import { UsagerFormModel } from "../../../../usager-shared/interfaces";
 import { StoreModule } from "@ngrx/store";
 import { _usagerReducer } from "../../../../../shared";
-import { OrderByDatePipe } from "../../../pipes/order-by-date.pipe";
+import { SortArrayPipe } from "../../../../shared/pipes/sort-array.pipe";
 
 describe("ProfilHistoriqueComponent", () => {
   let component: ProfilHistoriqueComponent;
@@ -21,7 +21,7 @@ describe("ProfilHistoriqueComponent", () => {
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [ProfilHistoriqueComponent, OrderByDatePipe],
+      declarations: [ProfilHistoriqueComponent, SortArrayPipe],
       imports: [
         FormsModule,
         HttpClientTestingModule,
diff --git a/packages/frontend/src/app/modules/usager-profil/components/profil-head/profil-head.component.html b/packages/frontend/src/app/modules/usager-profil/components/profil-head/profil-head.component.html
index 3274cb973c..dc51a25c4e 100644
--- a/packages/frontend/src/app/modules/usager-profil/components/profil-head/profil-head.component.html
+++ b/packages/frontend/src/app/modules/usager-profil/components/profil-head/profil-head.component.html
@@ -118,7 +118,7 @@ <h1 class="title m-0">
         [routerLink]="['/profil/general/' + usager.ref]"
         ariaCurrentWhenActive="page"
       >
-        <span class="statut-label"> Vue d'ensemble</span>
+        <span class="statut-label">Vue d'ensemble</span>
         <span class="visually-hidden" *ngIf="section === 'general'"
           >, onglet actif</span
         >
@@ -127,7 +127,7 @@ <h1 class="title m-0">
       <a
         [ngClass]="section === 'courrier' ? 'selected-section col' : 'col'"
         [routerLink]="['/profil/courriers/' + usager.ref]"
-        ><span class="statut-label"> Courriers</span>
+        ><span class="statut-label">Courriers</span>
         <span class="visually-hidden" *ngIf="section === 'courrier'"
           >, onglet actif</span
         >
diff --git a/packages/frontend/src/app/modules/usager-profil/pipes/order-by-date.pipe.ts b/packages/frontend/src/app/modules/usager-profil/pipes/order-by-date.pipe.ts
deleted file mode 100644
index 8d8809a0f0..0000000000
--- a/packages/frontend/src/app/modules/usager-profil/pipes/order-by-date.pipe.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Pipe, PipeTransform } from "@angular/core";
-
-@Pipe({
-  name: "orderByDate",
-})
-export class OrderByDatePipe implements PipeTransform {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  transform(array: any[], sortOrder: string): any[] {
-    if (!array || array.length <= 1) {
-      return array;
-    }
-
-    return array.sort((a, b) => {
-      const dateA = new Date(a.dateDecision);
-      const dateB = new Date(b.dateDecision);
-
-      if (sortOrder === "asc") {
-        return dateA.getTime() - dateB.getTime();
-      } else {
-        return dateB.getTime() - dateA.getTime();
-      }
-    });
-  }
-}
diff --git a/packages/frontend/src/app/modules/usager-profil/services/usager-options.service.ts b/packages/frontend/src/app/modules/usager-profil/services/usager-options.service.ts
index bf6efaf29a..1e0a0c672a 100644
--- a/packages/frontend/src/app/modules/usager-profil/services/usager-options.service.ts
+++ b/packages/frontend/src/app/modules/usager-profil/services/usager-options.service.ts
@@ -68,6 +68,7 @@ export class UsagerOptionsService {
       )
       .pipe(
         tap((newUsager: UsagerLight) => {
+          console.log(newUsager);
           this.store.dispatch(cacheManager.updateUsager({ usager: newUsager }));
         })
       );
diff --git a/packages/frontend/src/app/modules/usager-profil/usager-profil.module.ts b/packages/frontend/src/app/modules/usager-profil/usager-profil.module.ts
index 6e7f2cfad9..c199e3aebb 100644
--- a/packages/frontend/src/app/modules/usager-profil/usager-profil.module.ts
+++ b/packages/frontend/src/app/modules/usager-profil/usager-profil.module.ts
@@ -2,7 +2,11 @@ import { CommonModule } from "@angular/common";
 import { HttpClientModule } from "@angular/common/http";
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from "@angular/core";
 import { FormsModule, ReactiveFormsModule } from "@angular/forms";
-import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
+import {
+  NgbDateParserFormatter,
+  NgbDatepickerI18n,
+  NgbModule,
+} from "@ng-bootstrap/ng-bootstrap";
 
 import { SharedModule } from "../shared/shared.module";
 import { UsagerSharedModule } from "../usager-shared/usager-shared.module";
@@ -25,8 +29,13 @@ import { ProfilHistoriqueComponent } from "./components/pages/profil-historique/
 import { ProfilHistoriqueSmsComponent } from "./components/_historiques/profil-historique-sms/profil-historique-sms.component";
 import { ProfilHistoriqueProcurationsComponent } from "./components/_historiques/profil-historique-procurations/profil-historique-procurations.component";
 import { ProfilHistoriqueTransfertsComponent } from "./components/_historiques/profil-historique-transferts/profil-historique-transferts.component";
-import { OrderByDatePipe } from "./pipes/order-by-date.pipe";
 import { ProfilHistoriqueDecisionsComponent } from "./components/_historiques/profil-historique-decisions/profil-historique-decisions.component";
+import { ProfilHistoriqueNotesComponent } from "./components/_historiques/profil-historique-notes/profil-historique-notes.component";
+import { TableHeadSortComponent } from "../shared/components/table-head-sort/table-head-sort.component";
+import {
+  NgbDateCustomParserFormatter,
+  CustomDatepickerI18n,
+} from "../shared/services";
 
 @NgModule({
   declarations: [
@@ -36,12 +45,11 @@ import { ProfilHistoriqueDecisionsComponent } from "./components/_historiques/pr
     ProfilDossierComponent,
     ProfilHistoriqueComponent,
     ProfilHistoriqueSmsComponent,
-
+    ProfilHistoriqueNotesComponent,
     UsagersProfilTransfertCourrierComponent,
     UsagersProfilProcurationCourrierComponent,
     ProfilHistoriqueCourriersComponent,
     ProfilStructureDocsComponent,
-
     ProfilEditPortailUsagerPreferenceComponent,
     ProfilDocumentsSectionComponent,
     ProfilGeneralHistoriqueCourriersComponent,
@@ -49,7 +57,6 @@ import { ProfilHistoriqueDecisionsComponent } from "./components/_historiques/pr
     BaseUsagerProfilPageComponent,
     ProfilHistoriqueProcurationsComponent,
     ProfilHistoriqueTransfertsComponent,
-    OrderByDatePipe,
     ProfilHistoriqueDecisionsComponent,
   ],
   imports: [
@@ -63,6 +70,12 @@ import { ProfilHistoriqueDecisionsComponent } from "./components/_historiques/pr
     SharedModule,
     UsagerNotesModule,
     UsagerProfilRoutingModule,
+    TableHeadSortComponent,
+  ],
+  providers: [
+    NgbDateCustomParserFormatter,
+    { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
+    { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter },
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
diff --git a/packages/frontend/src/app/modules/usager-shared/components/decision-radiation-form/decision-radiation-form.component.spec.ts b/packages/frontend/src/app/modules/usager-shared/components/decision-radiation-form/decision-radiation-form.component.spec.ts
index 31bcef3f3a..8cb0ebdfa1 100644
--- a/packages/frontend/src/app/modules/usager-shared/components/decision-radiation-form/decision-radiation-form.component.spec.ts
+++ b/packages/frontend/src/app/modules/usager-shared/components/decision-radiation-form/decision-radiation-form.component.spec.ts
@@ -2,26 +2,19 @@ import { FormsModule, ReactiveFormsModule } from "@angular/forms";
 import { SharedModule } from "../../../shared/shared.module";
 import { ComponentFixture, TestBed, waitForAsync } from "@angular/core/testing";
 
-import { APP_BASE_HREF } from "@angular/common";
-
 import { HttpClientTestingModule } from "@angular/common/http/testing";
 import { CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
-import {
-  NgbDateParserFormatter,
-  NgbDatepickerI18n,
-  NgbModule,
-} from "@ng-bootstrap/ng-bootstrap";
+import { NgbModule } from "@ng-bootstrap/ng-bootstrap";
 
 import { DecisionRadiationFormComponent } from "./decision-radiation-form.component";
 
 import { RouterTestingModule } from "@angular/router/testing";
 
-import { NgbDateCustomParserFormatter } from "../../../shared/services/date-formatter.service";
-import { CustomDatepickerI18n } from "../../../shared/services/date-french.service";
 import { USAGER_ACTIF_MOCK } from "../../../../../_common/mocks/USAGER_ACTIF.mock";
 import { UsagerFormModel } from "../../interfaces";
 import { StoreModule } from "@ngrx/store";
 import { _usagerReducer } from "../../../../shared";
+import { UsagerDossierModule } from "../../../usager-dossier/usager-dossier.module";
 
 describe("RadiationFormComponent", () => {
   let component: DecisionRadiationFormComponent;
@@ -38,16 +31,9 @@ describe("RadiationFormComponent", () => {
         RouterTestingModule,
         SharedModule,
         StoreModule.forRoot({ app: _usagerReducer }),
+        UsagerDossierModule,
       ],
-      providers: [
-        NgbDateCustomParserFormatter,
-        { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
-        {
-          provide: NgbDateParserFormatter,
-          useClass: NgbDateCustomParserFormatter,
-        },
-        { provide: APP_BASE_HREF, useValue: "/" },
-      ],
+
       schemas: [CUSTOM_ELEMENTS_SCHEMA],
     }).compileComponents();
   }));
diff --git a/packages/frontend/src/app/modules/usager-shared/components/etat-civil-parent-form/etat-civil-parent-form.component.ts b/packages/frontend/src/app/modules/usager-shared/components/etat-civil-parent-form/etat-civil-parent-form.component.ts
index 2b84efef94..f82ef55098 100644
--- a/packages/frontend/src/app/modules/usager-shared/components/etat-civil-parent-form/etat-civil-parent-form.component.ts
+++ b/packages/frontend/src/app/modules/usager-shared/components/etat-civil-parent-form/etat-civil-parent-form.component.ts
@@ -62,7 +62,6 @@ import { LIEN_PARENTE_LABELS, UsagerAyantDroit } from "@domifa/common";
   selector: "app-etat-civil-parent-form",
   templateUrl: "./etat-civil-parent-form.component.html",
   providers: [
-    NgbDateCustomParserFormatter,
     { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
     { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter },
   ],
diff --git a/packages/frontend/src/app/modules/usager-shared/usager-shared.module.ts b/packages/frontend/src/app/modules/usager-shared/usager-shared.module.ts
index a2544fa3aa..35a8c92152 100644
--- a/packages/frontend/src/app/modules/usager-shared/usager-shared.module.ts
+++ b/packages/frontend/src/app/modules/usager-shared/usager-shared.module.ts
@@ -79,7 +79,6 @@ import { DisplayAyantsDroitsComponent } from "./components/display-ayants-droits
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   providers: [
-    NgbDateCustomParserFormatter,
     { provide: NgbDatepickerI18n, useClass: CustomDatepickerI18n },
     { provide: NgbDateParserFormatter, useClass: NgbDateCustomParserFormatter },
   ],
diff --git a/packages/frontend/src/app/modules/usager-shared/utils/getRdvInfos.service.ts b/packages/frontend/src/app/modules/usager-shared/utils/getRdvInfos.service.ts
index ff97f9a7f0..92a9f310ee 100644
--- a/packages/frontend/src/app/modules/usager-shared/utils/getRdvInfos.service.ts
+++ b/packages/frontend/src/app/modules/usager-shared/utils/getRdvInfos.service.ts
@@ -14,10 +14,9 @@ export const getRdvInfos = (usager?: Partial<UsagerLight>): UsagerRdvInfos => {
     return rdvDisplay;
   }
 
-  const dateRdv = new Date(usager.rdv.dateRdv);
-
-  // Rdv à venir
   if (usager.etapeDemande && usager.etapeDemande < ETAPE_ENTRETIEN) {
+    const dateRdv = new Date(usager.rdv.dateRdv);
+
     rdvDisplay.display = true;
     rdvDisplay.content = `${format(dateRdv, "dd MMMM yyyy", {
       locale: fr,
diff --git a/packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.ts b/packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.ts
deleted file mode 100644
index be506f0b02..0000000000
--- a/packages/frontend/src/app/modules/users/components/table-head-sort/table-head-sort.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Component, EventEmitter, Input, Output } from "@angular/core";
-import { UsagersFilterCriteriaSortValues } from "../../../manage-usagers/components/usager-filter";
-import {
-  faArrowDown,
-  faArrowUp,
-  faSort,
-} from "@fortawesome/free-solid-svg-icons";
-
-@Component({
-  selector: "app-table-head-sort",
-  templateUrl: "./table-head-sort.component.html",
-  styleUrls: ["./table-head-sort.component.scss"],
-})
-export class TableHeadSortComponent {
-  public readonly faArrowDown = faArrowDown;
-  public readonly faArrowUp = faArrowUp;
-  public readonly faSort = faSort;
-
-  @Input() public sortValue: UsagersFilterCriteriaSortValues;
-  @Input() public columnName: string;
-  @Input() public sortKey: string;
-  @Input() public currentKey: string;
-
-  @Output() public sortArray = new EventEmitter();
-}
diff --git a/packages/frontend/src/app/modules/users/components/user-profil/user-profil.component.html b/packages/frontend/src/app/modules/users/components/user-profil/user-profil.component.html
index 8be55594c8..682d1e83a9 100644
--- a/packages/frontend/src/app/modules/users/components/user-profil/user-profil.component.html
+++ b/packages/frontend/src/app/modules/users/components/user-profil/user-profil.component.html
@@ -18,9 +18,8 @@ <h2>Utilisateurs enregistrés: {{ users.length }} utilisateurs</h2>
               <th scope="col">
                 <app-table-head-sort
                   sortKey="nom"
-                  [sortValue]="sortValue"
-                  [currentKey]="currentKey"
-                  (sortArray)="sortArray($event)"
+                  [(sortValue)]="sortValue"
+                  [(currentKey)]="currentKey"
                   columnName="Nom prénom"
                 >
                 </app-table-head-sort>
@@ -28,9 +27,8 @@ <h2>Utilisateurs enregistrés: {{ users.length }} utilisateurs</h2>
               <th scope="col">
                 <app-table-head-sort
                   sortKey="email"
-                  [sortValue]="sortValue"
-                  [currentKey]="currentKey"
-                  (sortArray)="sortArray($event)"
+                  [(sortValue)]="sortValue"
+                  [(currentKey)]="currentKey"
                   columnName="Email"
                 >
                 </app-table-head-sort>
@@ -38,9 +36,8 @@ <h2>Utilisateurs enregistrés: {{ users.length }} utilisateurs</h2>
               <th scope="col">
                 <app-table-head-sort
                   sortKey="createdAt"
-                  [sortValue]="sortValue"
-                  [currentKey]="currentKey"
-                  (sortArray)="sortArray($event)"
+                  [(sortValue)]="sortValue"
+                  [(currentKey)]="currentKey"
                   columnName="Date d'inscription"
                 >
                 </app-table-head-sort>
@@ -48,9 +45,8 @@ <h2>Utilisateurs enregistrés: {{ users.length }} utilisateurs</h2>
               <th scope="col">
                 <app-table-head-sort
                   sortKey="lastLogin"
-                  [sortValue]="sortValue"
-                  [currentKey]="currentKey"
-                  (sortArray)="sortArray($event)"
+                  [(sortValue)]="sortValue"
+                  [(currentKey)]="currentKey"
                   columnName="Statut"
                 >
                 </app-table-head-sort>
@@ -58,19 +54,22 @@ <h2>Utilisateurs enregistrés: {{ users.length }} utilisateurs</h2>
               <th scope="col">
                 <app-table-head-sort
                   sortKey="role"
-                  [sortValue]="sortValue"
-                  [currentKey]="currentKey"
-                  (sortArray)="sortArray($event)"
+                  [(sortValue)]="sortValue"
+                  [(currentKey)]="currentKey"
                   columnName="Rôle"
                 >
                 </app-table-head-sort>
               </th>
-              <th scope="col">Supprimer</th>
+              <th scope="col" *ngIf="me.role === 'admin'">Supprimer</th>
             </tr>
           </thead>
           <tbody>
             <tr
-              *ngFor="let user of users; let i = index; trackBy: userIdTrackBy"
+              *ngFor="
+                let user of users | sortArray : currentKey : sortValue;
+                let i = index;
+                trackBy: userIdTrackBy
+              "
               [attr.aria-rowindex]="i + 1"
             >
               <td class="fw-bold">{{ user.nom }} {{ user.prenom }}</td>
@@ -87,6 +86,9 @@ <h2>Utilisateurs enregistrés: {{ users.length }} utilisateurs</h2>
                 </p>
               </td>
               <td>
+                <ng-container *ngIf="me.role !== 'admin'">{{
+                  USER_ROLES_LABELS[user.role]
+                }}</ng-container>
                 <ng-container
                   *ngIf="me.role === 'admin' && me.uuid !== user.uuid"
                 >
@@ -108,7 +110,7 @@ <h2>Utilisateurs enregistrés: {{ users.length }} utilisateurs</h2>
                   </select>
                 </ng-container>
               </td>
-              <td>
+              <td *ngIf="me.role === 'admin'">
                 <button
                   type="button"
                   *ngIf="me.role === 'admin' && me.uuid !== user.uuid"
diff --git a/packages/frontend/src/app/modules/users/components/user-profil/user-profil.component.ts b/packages/frontend/src/app/modules/users/components/user-profil/user-profil.component.ts
index 45369acfc0..e38817e947 100644
--- a/packages/frontend/src/app/modules/users/components/user-profil/user-profil.component.ts
+++ b/packages/frontend/src/app/modules/users/components/user-profil/user-profil.component.ts
@@ -31,6 +31,12 @@ export class UserProfilComponent implements OnInit, OnDestroy {
   public currentKey: keyof UserStructureProfile;
   private subscription = new Subscription();
 
+  public readonly USER_ROLES_LABELS: { [key in UserStructureRole]: string } = {
+    admin: "Administrateur",
+    responsable: "Gestionnaire",
+    simple: "Instructeur",
+    facteur: "Facteur",
+  };
   constructor(
     private readonly authService: AuthService,
     private readonly userService: UsersService,
@@ -39,7 +45,7 @@ export class UserProfilComponent implements OnInit, OnDestroy {
     private readonly titleService: Title
   ) {
     this.users = [];
-    this.sortValue = "ascending";
+    this.sortValue = "asc";
     this.currentKey = "nom";
     this.loading = false;
     this.selectedUser = null;
@@ -123,39 +129,6 @@ export class UserProfilComponent implements OnInit, OnDestroy {
     );
   }
 
-  public sortArray(key: keyof UserStructureProfile) {
-    this.currentKey = key;
-    if (key === this.currentKey) {
-      this.sortValue =
-        this.sortValue === "ascending" ? "descending" : "ascending";
-    } else {
-      this.sortValue = "ascending";
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    this.users.sort((a: any, b: any) => {
-      const valA = a[this.currentKey];
-
-      const valB = b[this.currentKey];
-
-      if (valA === null) {
-        return -1;
-      }
-
-      let comparison = 0;
-      if (valA === valB) {
-        return 0;
-      } else if (typeof valA === "string") {
-        comparison = valA.localeCompare(valB);
-      } else if (typeof valA === "boolean") {
-        comparison = valA === valB ? 0 : valA ? -1 : 1;
-      } else if (valA instanceof Date) {
-        comparison = valB instanceof Date ? valA.getTime() - valB.getTime() : 1;
-      }
-
-      return this.sortValue === "ascending" ? comparison : -comparison;
-    });
-  }
-
   public userIdTrackBy(_index: number, user: UserStructureProfile) {
     return user.uuid;
   }
diff --git a/packages/frontend/src/app/modules/users/users.module.ts b/packages/frontend/src/app/modules/users/users.module.ts
index 568d5c81da..5f203c24dd 100644
--- a/packages/frontend/src/app/modules/users/users.module.ts
+++ b/packages/frontend/src/app/modules/users/users.module.ts
@@ -13,7 +13,7 @@ import { EditUserComponent } from "./components/edit-user/edit-user.component";
 import { SharedModule } from "../shared/shared.module";
 import { UsersRoutingModule } from "./users-routing.module";
 import { UserStructurePasswordFormComponent } from "./components/user-structure-password-form/user-structure-password-form.component";
-import { TableHeadSortComponent } from "./components/table-head-sort/table-head-sort.component";
+import { TableHeadSortComponent } from "../shared/components/table-head-sort/table-head-sort.component";
 
 @NgModule({
   declarations: [
@@ -22,10 +22,10 @@ import { TableHeadSortComponent } from "./components/table-head-sort/table-head-
     RegisterUserAdminComponent,
     EditUserComponent,
     UserStructurePasswordFormComponent,
-    TableHeadSortComponent,
   ],
   exports: [UserStructurePasswordFormComponent],
   imports: [
+    TableHeadSortComponent,
     FormsModule,
     HttpClientModule,
     NgbModule,
diff --git a/packages/frontend/src/assets/css/main.scss b/packages/frontend/src/assets/css/main.scss
index 1778e1b330..0d1f87cf1c 100644
--- a/packages/frontend/src/assets/css/main.scss
+++ b/packages/frontend/src/assets/css/main.scss
@@ -321,26 +321,11 @@ legend {
   display: block;
 }
 
-.label-danger {
-  background-color: #ffe5dd;
-  color: #b51515;
-}
-
-.label-actif {
-  background-color: #ecf9a2;
-  color: black;
-}
-
 .label-green {
   background-color: #d4f4ed;
   color: black;
 }
 
-.label-yellow {
-  background-color: #feedd1;
-  color: black;
-}
-
 .label-procuration {
   background-color: #ffdaf7;
   color: black;
@@ -351,11 +336,6 @@ legend {
   color: black;
 }
 
-.label-grey {
-  background-color: #efefef;
-  color: black;
-}
-
 .doc-icon {
   padding: 0.4rem 1.2rem;
   font-size: 2rem;