diff --git a/.gitignore b/.gitignore
index 0dc6ff06f..0b48d09ae 100644
--- a/.gitignore
+++ b/.gitignore
@@ -42,6 +42,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+.nx
 
 # System Files
 .DS_Store
diff --git a/angular.json b/angular.json
index 443835830..b0a96f2e5 100644
--- a/angular.json
+++ b/angular.json
@@ -406,8 +406,19 @@
                 "output": "/assets/"
               }
             ],
-            "styles": [],
-            "scripts": []
+            "styles": [
+              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
+              "node_modules/primeng/resources/primeng.min.css",
+              "node_modules/primeicons/primeicons.css",
+              "node_modules/primeflex/primeflex.min.css"
+            ],
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
diff --git a/package-lock.json b/package-lock.json
index e21ae42de..f2edf09c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,12 +38,11 @@
         "issn": "^1.0.6",
         "js-generate-password": "^0.1.9",
         "lodash-es": "^4.17.21",
-        "luxon": "^3.4.0",
+        "luxon": "^3.5.0",
         "marked": "^10.0.0",
         "moment": "^2.30.1",
         "ngx-bootstrap": "^12.0.0",
         "ngx-spinner": "^16.0.0",
-        "ngx-toastr": "^18.0.0",
         "primeflex": "^3.3.1",
         "primeicons": "^6.0.1",
         "primeng": "^17.14.1",
@@ -75,6 +74,7 @@
         "karma-jasmine-html-reporter": "~2.1.0",
         "karma-spec-reporter": "0.0.36",
         "ng-packagr": "^17.1.1",
+        "primelocale": "^1.0.3",
         "typescript": "~5.3.3"
       }
     },
@@ -10923,9 +10923,9 @@
       }
     },
     "node_modules/luxon": {
-      "version": "3.4.4",
-      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.4.4.tgz",
-      "integrity": "sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz",
+      "integrity": "sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==",
       "engines": {
         "node": ">=12"
       }
@@ -11612,6 +11612,7 @@
       "version": "18.0.0",
       "resolved": "https://registry.npmjs.org/ngx-toastr/-/ngx-toastr-18.0.0.tgz",
       "integrity": "sha512-jZ3rOG6kygl8ittY8OltIMSo47P1VStuS01igm3MZXK6InJwHVvxU7wDHI/HGMlXSyNvWncyOuFHnnMEAifsew==",
+      "peer": true,
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -12914,17 +12915,27 @@
       "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
       "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
     },
+    "node_modules/primelocale": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/primelocale/-/primelocale-1.0.3.tgz",
+      "integrity": "sha512-a0VuhQLgUge4IJG2RKpMJSDYHuYIAd2kcqQy/quyx8UyM1/m7Uvt9hFKoFL0QAbZZyHIVHobVmGWAOJN8d7COQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0.0",
+        "npm": ">=6.0.0"
+      }
+    },
     "node_modules/primeng": {
-      "version": "17.16.1",
-      "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.16.1.tgz",
-      "integrity": "sha512-bNCUxdXgT4ikOG/aKA2PW9FCFnD/EtB+fLoGLuQXAGB1PJU72x5c0yQoGFDQcAgx78o3d/4LjZOdOPYwovN9Lg==",
+      "version": "17.18.10",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-17.18.10.tgz",
+      "integrity": "sha512-P3UskInOZ7qYICxSYvf0K8nUEb7DmndiXmyvLGU1wch+XcVWmVs4FZsWKNfdvK7TUdxxYj8WW44nodNV/epr3A==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
       "peerDependencies": {
-        "@angular/common": "^17.0.0",
-        "@angular/core": "^17.0.0",
-        "@angular/forms": "^17.0.0",
+        "@angular/common": "^17.0.0 || ^18.0.0",
+        "@angular/core": "^17.0.0 || ^18.0.0",
+        "@angular/forms": "^17.0.0 || ^18.0.0",
         "rxjs": "^6.0.0 || ^7.8.1",
         "zone.js": "~0.14.0"
       }
diff --git a/package.json b/package.json
index d0ac0f1ff..733e09f3d 100644
--- a/package.json
+++ b/package.json
@@ -96,12 +96,11 @@
     "issn": "^1.0.6",
     "js-generate-password": "^0.1.9",
     "lodash-es": "^4.17.21",
-    "luxon": "^3.4.0",
+    "luxon": "^3.5.0",
     "marked": "^10.0.0",
     "moment": "^2.30.1",
     "ngx-bootstrap": "^12.0.0",
     "ngx-spinner": "^16.0.0",
-    "ngx-toastr": "^18.0.0",
     "primeflex": "^3.3.1",
     "primeicons": "^6.0.1",
     "primeng": "^17.14.1",
@@ -133,6 +132,7 @@
     "karma-jasmine-html-reporter": "~2.1.0",
     "karma-spec-reporter": "0.0.36",
     "ng-packagr": "^17.1.1",
+    "primelocale": "^1.0.3",
     "typescript": "~5.3.3"
   },
   "files": [
diff --git a/projects/admin/src/app/acquisition/acquisition.module.ts b/projects/admin/src/app/acquisition/acquisition.module.ts
index 926c038d2..d328e8017 100644
--- a/projects/admin/src/app/acquisition/acquisition.module.ts
+++ b/projects/admin/src/app/acquisition/acquisition.module.ts
@@ -19,12 +19,14 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { FormlyModule, FORMLY_CONFIG } from '@ngx-formly/core';
+import { FORMLY_CONFIG, FormlyModule } from '@ngx-formly/core';
+import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
 import { TranslateService } from '@ngx-translate/core';
 import { ApiService, CoreModule, RecordModule } from '@rero/ng-core';
+import { SharedModule } from '@rero/shared';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { PopoverModule } from 'ngx-bootstrap/popover';
-import { TabsModule } from 'ngx-bootstrap/tabs';
+import { PreviewEmailModule } from '../shared/preview-email/preview-email.module';
+import { PrimengImportModule } from '../shared/primeng-import/primeng-import.module';
 import { AcquisitionRoutingModule } from './acquisition-routing.module';
 import { AcqAccountApiService } from './api/acq-account-api.service';
 import { AcqOrderApiService } from './api/acq-order-api.service';
@@ -39,29 +41,26 @@ import { OrderBriefViewComponent } from './components/order/order-brief-view/ord
 import { OrderDetailViewComponent } from './components/order/order-detail-view/order-detail-view.component';
 import { OrderLineComponent } from './components/order/order-detail-view/order-line/order-line.component';
 import { OrderLinesComponent } from './components/order/order-detail-view/order-lines/order-lines.component';
+import { OrderEmailFormComponent } from './components/order/order-email-form/order-email-form.component';
+import { OrderSummaryComponent } from './components/order/order-summary/order-summary.component';
+import { ReceiptDetailViewComponent } from './components/receipt/receipt-detail-view/receipt-detail-view.component';
 import { OrderReceipt } from './components/receipt/receipt-form/order-receipt';
 import { OrderReceiptForm } from './components/receipt/receipt-form/order-receipt-form';
 import { OrderReceiptViewComponent } from './components/receipt/receipt-form/order-receipt-view.component';
-import { OrderSummaryComponent } from './components/order/order-summary/order-summary.component';
 import { ReceiptListComponent } from './components/receipt/receipt-list/receipt-list.component';
+import { ReceiptSummaryComponent } from './components/receipt/receipt-summary/receipt-summary.component';
 import { registerFormlyExtension } from './formly/extension';
 import { FieldDocumentBriefViewTypeComponent } from './formly/type/field-document-brief-view.type';
 import { FieldRefTypeComponent } from './formly/type/field-ref.type';
 import { RepeatTypeComponent } from './formly/type/repeat-section.type';
 import { SelectAccountComponent } from './formly/type/select-account/select-account.component';
 import { InputNoLabelWrapperComponent } from './formly/wrapper/input-no-label.wrapper';
+import { AccountAvailableAmountPipe } from './pipes/account-available-amount.pipe';
 import { NegativeAmountPipe } from './pipes/negative-amount.pipe';
-import { ReceiptSummaryComponent } from './components/receipt/receipt-summary/receipt-summary.component';
-import { ReceiptDetailViewComponent } from './components/receipt/receipt-detail-view/receipt-detail-view.component';
 import { NoteBadgeColorPipe } from './pipes/note-badge-color.pipe';
-import { AccountAvailableAmountPipe } from './pipes/account-available-amount.pipe';
-import { ReceptionDatesPipe } from './pipes/reception-dates.pipe';
 import { PreviewContentPipe } from './pipes/preview-content.pipe';
 import { ReceiptLineTotalAmountPipe } from './pipes/receipt-line-total-amount.pipe';
-import { PermissionsService, SharedModule } from '@rero/shared';
-import { OrderEmailFormComponent } from './components/order/order-email-form/order-email-form.component';
-import { PreviewEmailModule } from '../shared/preview-email/preview-email.module';
-import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
+import { ReceptionDatesPipe } from './pipes/reception-dates.pipe';
 
 @NgModule({
   declarations: [
@@ -96,7 +95,6 @@ import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
   ],
   imports: [
     BsDropdownModule.forRoot(),
-    PopoverModule.forRoot(),
     CommonModule,
     AcquisitionRoutingModule,
     FormlyModule,
@@ -114,10 +112,10 @@ import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
       ]
     }),
     RecordModule,
-    TabsModule,
     CoreModule,
     SharedModule,
-    PreviewEmailModule
+    PreviewEmailModule,
+    PrimengImportModule
   ],
   providers: [
     { provide: FORMLY_CONFIG, multi: true, useFactory: registerFormlyExtension, deps: [TranslateService] },
diff --git a/projects/admin/src/app/acquisition/api/acq-account-api.service.ts b/projects/admin/src/app/acquisition/api/acq-account-api.service.ts
index e60a23353..fd9179f99 100644
--- a/projects/admin/src/app/acquisition/api/acq-account-api.service.ts
+++ b/projects/admin/src/app/acquisition/api/acq-account-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -17,7 +17,7 @@
  */
 
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { Error } from '@rero/ng-core/lib/error/error';
 import { Observable } from 'rxjs';
@@ -29,6 +29,9 @@ import { IAcqAccount } from '../classes/account';
 })
 export class AcqAccountApiService {
 
+  private httpClient: HttpClient = inject(HttpClient);
+  private recordService: RecordService = inject(RecordService);
+
   // SERVICES ATTRIBUTES ======================================================
   /** The resource name of acquisition account */
   resourceName = 'acq_accounts';
@@ -57,17 +60,6 @@ export class AcqAccountApiService {
     remaining_balance: this.allocatedAmountDefaultData
   };
 
-  // SERVICE CONSTRUCTORS =====================================================
-  /**
-   * Constructor
-   * @param _http: HttpClient
-   * @param _recordService - RecordService
-   */
-  constructor(
-    private _http: HttpClient,
-    private _recordService: RecordService
-  ) {}
-
   // SERVICES FUNCTIONS =======================================================
 
   /**
@@ -76,10 +68,10 @@ export class AcqAccountApiService {
    * @returns the corresponding account
    */
   getAccount(accountPid: string): Observable<IAcqAccount> {
-    return this._recordService
+    return this.recordService
       .getRecords(this.resourceName, `pid:${accountPid}`, 1, 1)
       .pipe(
-        map((result: Record) => this._recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+        map((result: Record) => this.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
         map((hits: any[]) => hits.map((hit: any) => ({...this.accountDefaultData, ...hit.metadata}) )),
         map((hits: IAcqAccount[]) => hits.find(Boolean))  // Get first element of array if exists
       );
@@ -103,10 +95,10 @@ export class AcqAccountApiService {
     }
     const query = defaultQueryParams.join(' AND ');
     options = { ...{sort: 'name'}, ...options };  // add some default params
-    return this._recordService
+    return this.recordService
       .getRecords(this.resourceName, query, 1, RecordService.MAX_REST_RESULTS_SIZE, undefined, undefined, undefined, options.sort)
       .pipe(
-        map((result: Record) => this._recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+        map((result: Record) => this.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
         map((hits: any[]) => hits.map(hit => ({...this.accountDefaultData, ...hit.metadata}) ))
       );
   }
@@ -117,7 +109,7 @@ export class AcqAccountApiService {
    * @return The observable on delete REST call.
    */
   delete(pid: string): Observable<void | Error> {
-    return this._recordService.delete(this.resourceName, pid);
+    return this.recordService.delete(this.resourceName, pid);
   }
 
   /**
@@ -133,6 +125,6 @@ export class AcqAccountApiService {
       .set('source', sourcePid)
       .set('target', targetPid)
       .set('amount', amount.toString());
-    return this._http.get<any>(apiUrl, { params });
+    return this.httpClient.get<any>(apiUrl, { params });
   }
 }
diff --git a/projects/admin/src/app/acquisition/api/acq-budget-api.service.ts b/projects/admin/src/app/acquisition/api/acq-budget-api.service.ts
index 9cc003f79..a91e09504 100644
--- a/projects/admin/src/app/acquisition/api/acq-budget-api.service.ts
+++ b/projects/admin/src/app/acquisition/api/acq-budget-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,33 +15,25 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { AcqAccountApiService } from './acq-account-api.service';
 import { IAcqAccount } from '../classes/account';
 import { AcqBudget } from '../classes/budget';
+import { AcqAccountApiService } from './acq-account-api.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AcqBudgetApiService {
 
+  private recordService: RecordService = inject(RecordService);
+  private acqAccountApiService: AcqAccountApiService = inject(AcqAccountApiService);
+
   /** The resource name of acquisition budget */
   resourceName = 'budgets';
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   * @param _acqAccountApiService - AcqAccountApiService
-   */
-  constructor(
-    private _recordService: RecordService,
-    private _acqAccountApiService: AcqAccountApiService
-  ) { }
-
-
   /**
    * Get the budget corresponding to filters.
    * @param query: query to apply to find records
@@ -49,9 +41,9 @@ export class AcqBudgetApiService {
    */
   getBudgets(query?: string): Observable<AcqBudget[]> {
     query = query || '';
-    return this._recordService.getRecords(this.resourceName, query, 1, RecordService.MAX_REST_RESULTS_SIZE)
+    return this.recordService.getRecords(this.resourceName, query, 1, RecordService.MAX_REST_RESULTS_SIZE)
       .pipe(
-        map((result: Record) => this._recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+        map((result: Record) => this.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
         map((hits: any[]) => hits.map((hit: any) => new AcqBudget(hit.metadata)))
       );
   }
@@ -62,11 +54,11 @@ export class AcqBudgetApiService {
    * @return An observable with the total amount for this budget.
    */
   getBudgetTotalAmount(budgetPid: string): Observable<number> {
-    return this._recordService
+    return this.recordService
       .getRecords('acq_accounts', `budget.pid:${budgetPid} AND depth:0`, 1, RecordService.MAX_REST_RESULTS_SIZE)
       .pipe(
-        map((result: Record) => this._recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
-        map((hits: any[]) => hits.map((hit: any) => ({...this._acqAccountApiService.accountDefaultData, ...hit.metadata}) )),
+        map((result: Record) => this.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+        map((hits: any[]) => hits.map((hit: any) => ({...this.acqAccountApiService.accountDefaultData, ...hit.metadata}) )),
         map((accounts: IAcqAccount[]) => accounts.reduce((total, acc) => total + acc.allocated_amount, 0))
       );
   }
diff --git a/projects/admin/src/app/acquisition/api/acq-order-api.service.ts b/projects/admin/src/app/acquisition/api/acq-order-api.service.ts
index 8b74d4dad..1e53074f0 100644
--- a/projects/admin/src/app/acquisition/api/acq-order-api.service.ts
+++ b/projects/admin/src/app/acquisition/api/acq-order-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
+import { IPreview } from '@app/admin/shared/preview-email/IPreviewInterface';
 import { ApiService, Record, RecordService, RecordUiService } from '@rero/ng-core';
 import { BaseApi } from '@rero/shared';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
@@ -31,13 +32,17 @@ import {
   IAcqOrder,
   IAcqOrderLine
 } from '../classes/order';
-import { IPreview } from '@app/admin/shared/preview-email/IPreviewInterface';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AcqOrderApiService extends BaseApi {
 
+  private httpClient: HttpClient = inject(HttpClient);
+  private recordService: RecordService = inject(RecordService);
+  private recordUiService: RecordUiService = inject(RecordUiService);
+  private apiService: ApiService = inject(ApiService);
+
   // SERVICES ATTRIBUTES ======================================================
   /** Default values */
   public readonly orderDefaultData = {
@@ -68,23 +73,6 @@ export class AcqOrderApiService extends BaseApi {
   /** expose _deletedOrderLineSubject$ in 'readonly' mode */
   get deletedOrderLineSubject$(): Observable<IAcqOrderLine> { return this._deletedOrderLineSubject$.asObservable(); }
 
-  // CONSTRUCTOR ==============================================================
-  /**
-   * Constructor
-   * @param _http - HttpClient
-   * @param _recordService - RecordService
-   * @param _recordUiService - RecordUiService
-   * @param _apiService - ApiService
-   */
-  constructor(
-    private _http: HttpClient,
-    private _recordService: RecordService,
-    private _recordUiService: RecordUiService,
-    private _apiService: ApiService
-  ) {
-    super();
-  }
-
   // SERVICE PUBLIC FUNCTIONS =================================================
   /**
    * Load an order from this pid
@@ -92,7 +80,7 @@ export class AcqOrderApiService extends BaseApi {
    * @return: the corresponding AcqOrder
    */
   getOrder(orderPid: string): Observable<IAcqOrder> {
-    return this._recordService.getRecord('acq_orders', orderPid, 0, BaseApi.reroJsonheaders).pipe(
+    return this.recordService.getRecord('acq_orders', orderPid, 0, BaseApi.reroJsonheaders).pipe(
         map(data => ({...this.orderDefaultData, ...data.metadata}) )
       );
   }
@@ -103,7 +91,7 @@ export class AcqOrderApiService extends BaseApi {
    */
   getOrderPreview(orderPid: string): Observable<IPreview> {
     const apiUrl = `/api/acq_order/${orderPid}/acquisition_order/preview`;
-    return this._http.get<any>(apiUrl);
+    return this.httpClient.get<any>(apiUrl);
   }
 
   /**
@@ -113,7 +101,7 @@ export class AcqOrderApiService extends BaseApi {
    */
   sendOrder(orderPid: string, emails: AcqAddressRecipient[]): Observable<Notification> {
     const apiUrl = `/api/acq_order/${orderPid}/send_order`;
-    return this._http.post<any>(apiUrl, {emails}).pipe(
+    return this.httpClient.post<any>(apiUrl, {emails}).pipe(
       map((data: any) => new Notification(data.data))
     );
   }
@@ -121,7 +109,7 @@ export class AcqOrderApiService extends BaseApi {
   getOrderHistory(orderPid: string) {
     // check if orderPid is already present into the previously loaded history items.
     // If YES :: not needed to reload the history, just update the `current` attribute of history items
-    const orderRef = new URL(this._apiService.getRefEndpoint('acq_orders', orderPid));
+    const orderRef = new URL(this.apiService.getRefEndpoint('acq_orders', orderPid));
     const idx = this._acqOrderHistory.findIndex(item => item.$ref === orderRef.toString());
     if (idx !== -1) {
       if (!this._acqOrderHistory[idx].current) {
@@ -132,7 +120,7 @@ export class AcqOrderApiService extends BaseApi {
     } else {
       // If NO :: Load the acquisition order history
       const apiUrl = `/api/acq_order/${orderPid}/history`;
-      this._http
+      this.httpClient
         .get<AcqOrderHistoryVersionResponseInterface[]>(apiUrl)
         .subscribe(versions => {
           versions.map(version => version.current = version.$ref === orderRef.toString());
@@ -153,10 +141,10 @@ export class AcqOrderApiService extends BaseApi {
     if (extraQuery) {
       query += ` ${extraQuery}`;
     }
-    return this._recordService
+    return this.recordService
       .getRecords('acq_order_lines', query, 1, RecordService.MAX_REST_RESULTS_SIZE, undefined, undefined, undefined, 'priority')
       .pipe(
-        map((result: Record) => this._recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+        map((result: Record) => this.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
         map((hits: any[]) => hits.map(hit => ({...this.orderDefaultData, ...hit.metadata}) ))
       );
   }
@@ -168,7 +156,7 @@ export class AcqOrderApiService extends BaseApi {
    * @param orderLine: the order line to delete
    */
   deleteOrderLine(orderLine: IAcqOrderLine): void {
-    this._recordUiService
+    this.recordUiService
       .deleteRecord('acq_order_lines', orderLine.pid)
       .subscribe((success: boolean) => {
           if (success) {
diff --git a/projects/admin/src/app/acquisition/api/acq-receipt-api.service.ts b/projects/admin/src/app/acquisition/api/acq-receipt-api.service.ts
index 7142e3a2f..671f3de7f 100644
--- a/projects/admin/src/app/acquisition/api/acq-receipt-api.service.ts
+++ b/projects/admin/src/app/acquisition/api/acq-receipt-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,12 +16,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Record, RecordService, RecordUiService } from '@rero/ng-core';
+import { BaseApi } from '@rero/shared';
 import { Observable, of, Subject } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
-import { BaseApi } from '@rero/shared';
 import { IAcqReceipt, IAcqReceiptLine } from '../classes/receipt';
 import { AcqResponseReceiptLineStatus, ICreateLineMessage, IResponseReceiptLine } from '../components/receipt/receipt-form/order-receipt';
 
@@ -30,6 +30,11 @@ import { AcqResponseReceiptLineStatus, ICreateLineMessage, IResponseReceiptLine
 })
 export class AcqReceiptApiService {
 
+  private apiService: RecordService = inject(RecordService);
+  private recordUiService: RecordUiService = inject(RecordUiService);
+  private httpClient: HttpClient = inject(HttpClient);
+  private translateService: TranslateService = inject(TranslateService);
+
   // SERVICES ATTRIBUTES ======================================================
   /** The resource name for an acquisition receipt */
   readonly resourceName = 'acq_receipts';
@@ -63,21 +68,6 @@ export class AcqReceiptApiService {
   get deletedReceiptSubject$(): Observable<IAcqReceipt> { return this._deletedReceiptSubject$.asObservable(); }
   get deletedReceiptLineSubject$(): Observable<IAcqReceiptLine> { return this._deletedReceiptLineSubject$.asObservable(); }
 
-  // CONSTRUCTOR ==============================================================
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   * @param _recordUiService - RecordUiService
-   * @param _http - HttpClient
-   * @param _translateService - TranslateService
-   */
-  constructor(
-    private _recordService: RecordService,
-    private _recordUiService: RecordUiService,
-    private _http: HttpClient,
-    private _translateService: TranslateService
-  ) {}
-
   // READ/LIST FUNCTIONS ======================================================
   /**
    * Get acquisition receipt record.
@@ -85,7 +75,7 @@ export class AcqReceiptApiService {
    * @returns ElasticSearch response for this receipt or null if error occurred.
    */
   getReceipt(pid: string): Observable<IAcqReceipt> {
-    return this._recordService
+    return this.apiService
       .getRecord(this.resourceName, pid, 1, BaseApi.reroJsonheaders)
       .pipe(
         map(data => ({...this.receiptDefaultData, ...data.metadata}) )
@@ -103,10 +93,10 @@ export class AcqReceiptApiService {
     sort?: string
   }): Observable<IAcqReceipt[]> {
     options = {...this._defaultRecordOptions, ...options};  // add some default params
-    return this._recordService
+    return this.apiService
       .getRecords(this.resourceName, query, 1, RecordService.MAX_REST_RESULTS_SIZE, undefined, undefined, options.headers, options.sort)
       .pipe(
-        map((result: Record) => this._recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+        map((result: Record) => this.apiService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
         map((hits: any[]) => hits.map(hit => ({...this.receiptDefaultData, ...hit.metadata}) ))
       );
   }
@@ -127,11 +117,11 @@ export class AcqReceiptApiService {
    */
   getReceiptLines(receiptPid: string): Observable<IAcqReceiptLine[]> {
     const query = `acq_receipt.pid:${receiptPid}`;
-    return this._recordService
+    return this.apiService
       .getRecords('acq_receipt_lines', query, 1, RecordService.MAX_REST_RESULTS_SIZE,
                   undefined, undefined, BaseApi.reroJsonheaders, 'receipt_date')
       .pipe(
-        map((result: Record) => this._recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+        map((result: Record) => this.apiService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
         map((hits: any[]) => hits.map(hit => ({...this.receiptLineDefaultData, ...hit.metadata}) ))
       );
   }
@@ -143,7 +133,7 @@ export class AcqReceiptApiService {
    * @returns created receipt data if success or null if failed
    */
   createReceipt(record: any): Observable<IAcqReceipt> {
-    return this._recordService
+    return this.apiService
       .create(this.resourceName, record)
       .pipe(
         map((data: any) => ({...this.receiptDefaultData, ...data.metadata}) )
@@ -157,9 +147,9 @@ export class AcqReceiptApiService {
    * @returns the list of performed data. Each line has a status to specify if the creation was well done.
    */
   createReceiptLines(receiptPid: string, lines: IAcqReceiptLine[]): Observable<ICreateLineMessage> {
-    const generalErrorMessage = this._translateService.instant('Error proceeding receipt lines creation');
+    const generalErrorMessage = this.translateService.instant('Error proceeding receipt lines creation');
     const url = `/api/acq_receipt/${receiptPid}/lines`;
-    return this._http
+    return this.httpClient
       .post<any>(url, lines)
       .pipe(
         map((response: IResponseReceiptLine) => response.response),
@@ -186,7 +176,7 @@ export class AcqReceiptApiService {
    * @returns the API response with receipt data or null if operation failed.
    */
   updateReceipt(receiptPid: string, record: any): Observable<any|null> {
-    return this._recordService
+    return this.apiService
       .update(this.resourceName, receiptPid, record)
       .pipe(
         map((response: any) => ({ ...this.receiptDefaultData, ...response.metadata}) )
@@ -200,7 +190,7 @@ export class AcqReceiptApiService {
    * @param receipt - the receipt to delete
    */
   delete(receipt: IAcqReceipt): void {
-    this._recordUiService
+    this.recordUiService
       .deleteRecord(this.resourceName, receipt.pid)
       .subscribe((success: boolean) => {
           if (success) {
@@ -216,7 +206,7 @@ export class AcqReceiptApiService {
    * @param receiptLine - the receipt line to delete
    */
   deleteReceiptLine(receiptLine: IAcqReceiptLine): void {
-    this._recordUiService
+    this.recordUiService
       .deleteRecord('acq_receipt_lines', receiptLine.pid)
       .subscribe((success: boolean) => {
         if (success) {
diff --git a/projects/admin/src/app/acquisition/classes/budget.ts b/projects/admin/src/app/acquisition/classes/budget.ts
index 0c011c347..d617bb039 100644
--- a/projects/admin/src/app/acquisition/classes/budget.ts
+++ b/projects/admin/src/app/acquisition/classes/budget.ts
@@ -18,7 +18,6 @@
 
 /* tslint:disable */
 // required as json properties is not lowerCamelCase
-
 import { ObjectReference } from '@rero/shared';
 
 /** Wrapping class to describe an AcqAccount */
@@ -35,7 +34,7 @@ export class AcqBudget {
    * Constructor
    * @param obj - the JSON parsed object to load.
    */
-  constructor(obj?: any){
+  constructor(obj?: any) {
     Object.assign(this, obj);
   }
 }
diff --git a/projects/admin/src/app/acquisition/classes/order.ts b/projects/admin/src/app/acquisition/classes/order.ts
index b2d2bb25b..fee577dfb 100644
--- a/projects/admin/src/app/acquisition/classes/order.ts
+++ b/projects/admin/src/app/acquisition/classes/order.ts
@@ -126,7 +126,7 @@ export class AcqOrderHistoryVersion {
    * Constructor
    * @param obj - the JSON parsed object to load.
    */
-  constructor(obj?: any){
+  constructor(obj?: any) {
     Object.assign(this, obj);
     this.active = obj.current;
     this.pid = extractIdOnRef(obj.$ref);
diff --git a/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.html b/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.html
index 40a4a6050..f582933fd 100644
--- a/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.html
+++ b/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.html
@@ -60,22 +60,27 @@
     <!-- ACTION BUTTONS -->
     <div class="col-1 pr-0 text-right">
       @if (permissions.update.can) {
-        <button type="button" class="btn btn-outline-primary btn-sm"
-                [routerLink]="['/records', 'acq_accounts', 'edit', account.pid]">
-          <i class="fa fa-pencil"></i>
-        </button>
+        <p-button
+          icon="fa fa-pencil"
+          [outlined]="true"
+          [routerLink]="['/records', 'acq_accounts', 'edit', account.pid]"
+        />
       }
       @if (permissions.delete.can) {
-        <button type="button" class="btn btn-outline-danger btn-sm ml-1" (click)="delete()">
-          <i class="fa fa-trash"></i>
-        </button>
+        <p-button icon="fa fa-trash" severity="danger" [outlined]="true" (onClick)="delete()" styleClass="ml-1" />
       } @else {
-        <button type="button" class="btn btn-sm btn-outline-danger disabled ml-1"
-                title="{{ 'Delete' | translate}}"
-                [popover]="tolTemplate" triggers="mouseenter:mouseleave">
-          <i class="fa fa-trash"></i>
-        </button>
-        <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
+        <p-button
+          icon="fa fa-trash"
+          severity="danger"
+          [outlined]="true"
+          [title]="'Delete' | translate"
+          [pTooltip]="tooltipContent"
+          tooltipPosition="top"
+          styleClass="text-red-200 ml-1"
+        />
+        <ng-template #tooltipContent>
+          <span [innerHTML]="deleteInfoMessage"></span>
+        </ng-template>
       }
     </div>
   </div>
diff --git a/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.ts b/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.ts
index 1483f293f..178465629 100644
--- a/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/account/account-brief-view/account-brief-view.component.ts
@@ -16,15 +16,16 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { UserService } from '@rero/shared';
-import { ToastrService } from 'ngx-toastr';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { RecordPermissions } from '@app/admin/classes/permissions';
 import { OrganisationService } from '@app/admin/service/organisation.service';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
-import { IAcqAccount } from '../../../classes/account';
+import { TranslateService } from '@ngx-translate/core';
+import { CONFIG } from '@rero/ng-core';
+import { UserService } from '@rero/shared';
+import { MessageService } from 'primeng/api';
 import { AcqAccountApiService } from '../../../api/acq-account-api.service';
+import { IAcqAccount } from '../../../classes/account';
 
 @Component({
   selector: 'admin-account-brief-view',
@@ -33,6 +34,13 @@ import { AcqAccountApiService } from '../../../api/acq-account-api.service';
 })
 export class AccountBriefViewComponent implements OnInit {
 
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private accountApiService: AcqAccountApiService = inject(AcqAccountApiService);
+  private translateService: TranslateService = inject(TranslateService);
+  private userService: UserService = inject(UserService);
+  private messageService = inject(MessageService);
+
   // COMPONENT ATTRIBUTES ========================================================
   /** the account to display */
   @Input() account: IAcqAccount = null;
@@ -66,25 +74,6 @@ export class AccountBriefViewComponent implements OnInit {
     return this.recordPermissionService.generateDeleteMessage(this.permissions.delete.reasons);
   }
 
-  // CONSTRUCTOR & HOOKS ========================================================
-  /**
-   * Constructor
-   * @param recordPermissionService - RecordPermissionService
-   * @param organisationService - OrganisationService
-   * @param accountApiService - AcqAccountApiService
-   * @param toastrService - ToastrService
-   * @param translateService - TranslateService
-   * @param userService - UserService
-   */
-  constructor(
-    private recordPermissionService: RecordPermissionService,
-    private organisationService: OrganisationService,
-    private accountApiService: AcqAccountApiService,
-    private toastrService: ToastrService,
-    private translateService: TranslateService,
-    private userService: UserService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     if (this.account) {
@@ -108,7 +97,12 @@ export class AccountBriefViewComponent implements OnInit {
     this.accountApiService
       .delete(this.account.pid)
       .subscribe(() => {
-        this.toastrService.success(this.translateService.instant('Account deleted'));
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('Account'),
+          detail: this.translateService.instant('Account deleted'),
+          life: CONFIG.MESSAGE_LIFE
+        });
         this.deleteAccount.emit(this.account);
       });
   }
diff --git a/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.html b/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.html
index 5245cadff..a104e2290 100644
--- a/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.html
+++ b/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.html
@@ -22,32 +22,27 @@
   }
   <h1 class="mb-3">{{ account.name }}</h1>
   <!-- Account general information's -->
-  <div class="card my-2">
-    <h6 class="card-header" translate>Details</h6>
-    <div class="card-body">
-      <dl class="row">
-        <dt class="col-3 label-title" translate>Account number</dt>
-        <dd class="col-9">{{ account.number }}</dd>
-        <dt class="col-3 label-title" translate>Budget</dt>
-        <dd class="col-9">{{ account.budget.pid | getRecord: 'budgets': 'field': 'name' | async }}</dd>
-        <dt class="col-3 label-title" translate>Library</dt>
-        <dd class="col-9">{{ account.library.pid | getRecord: 'libraries': 'field': 'name' | async }}</dd>
-        @if (account.parent) {
-          <dt class="col-3 label-title" translate>Parent account</dt>
-          <dd class="col-9">
-            <a [routerLink]="['/', 'records', 'acq_accounts', 'detail', account.parent.pid]">
-              {{ account.parent.pid | getRecord: 'acq_accounts': 'field': 'name' | async }}
-            </a>
-          </dd>
-        }
-      </dl>
-    </div>
-  </div>
+  <p-card [header]="'Details'|translate" styleClass="mb-3">
+    <dl class="row">
+      <dt class="col-3 label-title" translate>Account number</dt>
+      <dd class="col-9">{{ account.number }}</dd>
+      <dt class="col-3 label-title" translate>Budget</dt>
+      <dd class="col-9">{{ account.budget.pid | getRecord: 'budgets': 'field': 'name' | async }}</dd>
+      <dt class="col-3 label-title" translate>Library</dt>
+      <dd class="col-9">{{ account.library.pid | getRecord: 'libraries': 'field': 'name' | async }}</dd>
+      @if (account.parent) {
+        <dt class="col-3 label-title" translate>Parent account</dt>
+        <dd class="col-9">
+          <a [routerLink]="['/', 'records', 'acq_accounts', 'detail', account.parent.pid]">
+            {{ account.parent.pid | getRecord: 'acq_accounts': 'field': 'name' | async }}
+          </a>
+        </dd>
+      }
+    </dl>
+  </p-card>
 
   <!-- Account accounting information's -->
-  <div class="card my-2 accounting-infos">
-    <h6 class="card-header" translate>Accounting informations</h6>
-    <div class="card-body">
+  <p-card class="accounting-infos" [header]="'Accounting informations'|translate">
       <table class="table table-sm">
         <tbody>
         <tr>
@@ -115,6 +110,5 @@ <h6 class="card-header" translate>Accounting informations</h6>
         </tr>
         </tbody>
       </table>
-    </div>
-  </div>
+  </p-card>
 }
diff --git a/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.ts b/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.ts
index 59dcd5f38..39cc44c86 100644
--- a/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/account/account-detail-view/account-detail-view.component.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Observable } from 'rxjs';
 import { OrganisationService } from '../../../../service/organisation.service';
@@ -30,6 +30,9 @@ import { IAcqAccount } from '../../../classes/account';
 })
 export class AccountDetailViewComponent implements OnInit, DetailRecord {
 
+  private acqAccountApiService: AcqAccountApiService = inject(AcqAccountApiService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+
   // COMPONENT ATTRIBUTES =======================================================
   /** Observable resolving record data */
   record$: Observable<any>;
@@ -44,22 +47,10 @@ export class AccountDetailViewComponent implements OnInit, DetailRecord {
     return this.organisationService.organisation;
   }
 
-  // CONSTRUCTOR & HOOKS ========================================================
-  /**
-   * Constructor
-   * @param acqAccountApiService - AcqAccountApiService
-   * @param organisationService - OrganisationService
-   */
-  constructor(
-    private acqAccountApiService: AcqAccountApiService,
-    private organisationService: OrganisationService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     this.record$.subscribe((data: any) => {
       this.esRecord$ = this.acqAccountApiService.getAccount(data.metadata.pid);
     });
   }
-
 }
diff --git a/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.html b/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.html
index 7b79144a2..4c9229bfd 100644
--- a/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.html
+++ b/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.html
@@ -20,33 +20,33 @@
     <h1 translate>Acquisition accounts</h1>
     <div class="ml-auto">
       <!-- ADD BUTTON -->
-      <a [routerLink]="['/', 'records', 'acq_accounts', 'new']"
-          [queryParams]="{ budget: organisation.current_budget_pid }"
-          [permissions]="permissions.ACAC_CREATE"
-          class="btn btn-sm btn-primary"
-      >
-        <i class="fa fa-plus"></i> {{ 'Add' | translate }}
-      </a>
+      <p-button
+        icon="fa fa-plus"
+        [label]="'Add'|translate"
+        [routerLink]="['/', 'records', 'acq_accounts', 'new']"
+        [queryParams]="{ budget: organisation.current_budget_pid }"
+        [permissions]="permissions.ACAC_CREATE"
+      />
       <!-- END ADD BUTTON -->
       <!-- EXPORT BUTTON -->
       <ng-core-export-button
         [exportOptions]="exportOptions"
-        [cssClass]="'btn btn-sm btn-outline-primary mr-2 ml-2'">
-      </ng-core-export-button>
+      />
       <!-- END EXPORT BUTTON -->
       <!-- TRANSFER BUTTON -->
-      <a [routerLink]="['/', 'acquisition', 'accounts', 'transfer']"
-          [permissions]="permissions.ACAC_TRANSFER"
-          class="btn btn-sm btn-outline-primary"
-      >
-        <i class="fa fa-exchange"></i> {{ 'Transfer funds' | translate }} &hellip;
-      </a>
+      <p-button
+        icon="fa fa-exchange"
+        [outlined]="true"
+        [label]="'Transfer funds'|translate"
+        [routerLink]="['/', 'acquisition', 'accounts', 'transfer']"
+        [permissions]="permissions.ACAC_TRANSFER"
+      />
       <!-- END TRANSFER BUTTON -->
     </div>
   </header>
 
   <section class="mt-3">
-    <div class="row p-1 mb-2 bg-dark rounded text-light">
+    <div class="grid p-1 mb-2 bg-blue-900 text-light">
       <div class="col-6"></div>
       <div class="col-1 text-right" translate>Amount</div>
       <div class="col-1 text-right" translate>Available</div>
diff --git a/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.ts b/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.ts
index 404f262ba..a62d350f3 100644
--- a/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.ts
+++ b/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.ts
@@ -15,15 +15,15 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnInit } from '@angular/core';
-import { IPermissions, PERMISSIONS, UserService } from '@rero/shared';
-import { OrganisationService } from '@app/admin/service/organisation.service';
-import { IAcqAccount } from '@app/admin/acquisition/classes/account';
+import { HttpParams } from '@angular/common/http';
+import { Component, inject, OnInit } from '@angular/core';
 import { AcqAccountApiService } from '@app/admin/acquisition/api/acq-account-api.service';
-import { ApiService, RecordService } from '@rero/ng-core';
-import { TranslateService } from '@ngx-translate/core';
+import { IAcqAccount } from '@app/admin/acquisition/classes/account';
 import { exportFormats } from '@app/admin/acquisition/routes/accounts-route';
-import { HttpParams } from '@angular/common/http';
+import { OrganisationService } from '@app/admin/service/organisation.service';
+import { TranslateService } from '@ngx-translate/core';
+import { ApiService, RecordService } from '@rero/ng-core';
+import { IPermissions, PERMISSIONS, UserService } from '@rero/shared';
 
 @Component({
   selector: 'admin-account-list',
@@ -31,6 +31,12 @@ import { HttpParams } from '@angular/common/http';
 })
 export class AccountListComponent implements OnInit {
 
+  private userService: UserService = inject(UserService);
+  private acqAccountApiService: AcqAccountApiService = inject(AcqAccountApiService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private apiService: ApiService = inject(ApiService);
+  private translateService: TranslateService = inject(TranslateService);
+
   // COMPONENT ATTRIBUTES =======================================================
   /** Root account to display */
   rootAccounts: IAcqAccount[] = [];
@@ -65,23 +71,6 @@ export class AccountListComponent implements OnInit {
       );
   }
 
-  // CONSTRUCTOR & HOOKS ========================================================
-  /**
-   * Constructor
-   * @param userService: UserService
-   * @param acqAccountApiService: AcqAccountApiService
-   * @param organisationService: OrganisationService
-   * @param apiService: ApiService
-   * @param translateService: TranslateService
-   */
-  constructor(
-    private userService: UserService,
-    private acqAccountApiService: AcqAccountApiService,
-    private organisationService: OrganisationService,
-    private apiService: ApiService,
-    private translateService: TranslateService,
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     this._libraryPid = this.userService.user.currentLibrary;
diff --git a/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.html b/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.html
index c85c79d6d..6a75c6584 100644
--- a/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.html
+++ b/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.html
@@ -16,9 +16,9 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (accountsToDisplay && organisation) {
-  <div class="container">
-    <h1 translate>Fund transfer</h1>
-    <form [formGroup]="form" (ngSubmit)="submit()">
+  <h1 translate>Fund transfer</h1>
+  <div class="grid">
+    <form class="w-full" [formGroup]="form" (ngSubmit)="submit()">
       @if (budgets.length > 1) {
         <select class="form-control" (change)="selectBudget($event)">
           @for (budgetPid of budgets; track budgetPid) {
@@ -28,6 +28,85 @@ <h1 translate>Fund transfer</h1>
           }
         </select>
       }
+        <div class="card-header row p-1 mb-2 bg-dark text-light">
+          <div class="col-1 text-center" translate>Source</div>
+          <div class="col-6"></div>
+          <div class="col-2 text-right" translate>Amount</div>
+          <div class="col-2 text-right" translate>Available</div>
+          <div class="col-1 text-center" translate>Target</div>
+        </div>
+        <div class="card-text mb-3">
+          @if (accountsToDisplay.length > 0) {
+            @for (account of accountsToDisplay; track account) {
+              <div class="row account my-2">
+                <div class="col-1 text-center">
+                  <input type="radio"
+                          name="source"
+                          value="{{ account.pid }}"
+                          (click)="selectAccount('source', account)"
+                          [disabled]="form.get('target').value && form.get('target').value.pid === account.pid"
+                  />
+                </div>
+                <div class="col-6 account-name depth-padding-{{ account.depth }}">
+                  <a [routerLink]="getDetailUrl(account)">{{ account.name }}</a>
+                </div>
+                <div class="col-2 amount">
+                  {{ account.allocated_amount | currency: organisation.default_currency }}
+                </div>
+                <div class="col-2 amount" [class]="{
+                  'text-success': account.remaining_balance.self > 0,
+                  'text-muted': account.remaining_balance.self === 0,
+                  'text-warning': account.remaining_balance.self < 0
+                }">
+                  {{ account.remaining_balance.self | currency: organisation.default_currency }}
+                </div>
+                <div class="col-1 text-center">
+                  <input type="radio" name="target"
+                          value="{{ account.pid }}"
+                          (click)="selectAccount('target', account)"
+                          [disabled]="form.get('source').value && form.get('source').value.pid === account.pid"
+                  />
+                </div>
+              </div>
+            }
+          } @else {
+            {{ 'No account available' | translate }}
+          }
+        </div>
+        <div class="card-footer row form-group mb-0">
+          <label for="amount" class="col-1 col-form-label">Amount</label>
+          <div class="input-group col-6">
+            <div class="input-group-prepend">
+              <div class="input-group-text">{{ currencySymbol }}</div>
+            </div>
+            <input type="number" class="form-control" id="amount" formControlName="amount"
+                   [class]="{'is-invalid': checkInput('amount')}"/>
+            @if (checkInput('amount')) {
+              <div class="ml-2 block pt-2">
+                @if (form.get('amount').hasError('required')) {
+                  <small class="text-danger" translate>
+                    This field is required.
+                  </small>
+                }
+                @if (form.get('amount').hasError('min')) {
+                  <small class="text-danger">
+                    {{ 'Minimum amount is' | translate }} {{ form.get('amount').errors.min.min }}.
+                  </small>
+                }
+                @if (form.get('amount').hasError('max')) {
+                  <small class="text-danger">
+                    {{ 'Maximum amount is' | translate }} {{ form.get('amount').errors.max.max }}.
+                  </small>
+                }
+              </div>
+            }
+          </div>
+          <div class="col text-right">
+            <p-button class="mr-2" type="reset" [label]="'Cancel'|translate" severity="danger" [outlined]="true" />
+            <p-button type="submit" [label]="'Transfer'|translate" [disabled]="form.invalid" />
+          </div>
+        </div>
+      <!--
       <div class="card container mt-3">
         <div class="card-header row p-1 mb-2 bg-dark text-light">
           <div class="col-1 text-center" translate>Source</div>
@@ -108,6 +187,7 @@ <h1 translate>Fund transfer</h1>
           </div>
         </div>
       </div>
+    -->
     </form>
   </div>
 }
diff --git a/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.ts b/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.ts
index 8b800f5ab..50bc4c540 100644
--- a/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.ts
+++ b/projects/admin/src/app/acquisition/components/account/account-transfer/account-transfer.component.ts
@@ -17,13 +17,14 @@
  */
 
 import { getCurrencySymbol } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
 import { OrganisationService } from '@app/admin/service/organisation.service';
 import { TranslateService } from '@ngx-translate/core';
+import { CONFIG } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
 import { AcqAccountApiService } from '../../../api/acq-account-api.service';
 import { IAcqAccount } from '../../../classes/account';
 import { orderAccountsAsTree } from '../../../utils/account';
@@ -35,6 +36,14 @@ import { orderAccountsAsTree } from '../../../utils/account';
 })
 export class AccountTransferComponent implements OnInit {
 
+  private acqAccountApiService: AcqAccountApiService = inject(AcqAccountApiService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private formBuilder: UntypedFormBuilder = inject(UntypedFormBuilder);
+  private translateService: TranslateService = inject(TranslateService);
+  private router: Router = inject(Router);
+  private userService: UserService = inject(UserService);
+  private messageService = inject(MessageService);
+
   // COMPONENT ATTRIBUTES =======================================================
   /** the accounts available for transfer */
   accountsToDisplay: IAcqAccount[] = [];
@@ -60,25 +69,7 @@ export class AccountTransferComponent implements OnInit {
   }
 
   // CONSTRUCTOR & HOOKS ========================================================
-  /**
-   * Constructor
-   * @param acqAccountApiService - AcqAccountApiService
-   * @param organisationService - OrganisationService
-   * @param formBuilder - FormBuilder,
-   * @param toastrService - ToastrService,
-   * @param translateService - TranslateService
-   * @param router - Router
-   * @param userService - UserService
-   */
-  constructor(
-    private acqAccountApiService: AcqAccountApiService,
-    private organisationService: OrganisationService,
-    private formBuilder: UntypedFormBuilder,
-    private toastrService: ToastrService,
-    private translateService: TranslateService,
-    private router: Router,
-    private userService: UserService
-  ) {
+  constructor() {
     this.form = this.formBuilder.group({
       source: [undefined, Validators.required],
       target: [undefined, Validators.required],
@@ -123,13 +114,24 @@ export class AccountTransferComponent implements OnInit {
   submit(): void {
     this.acqAccountApiService
       .transferFunds(this.form.value.source.pid, this.form.value.target.pid, this.form.value.amount)
-      .subscribe(
-        () => {
-          this.toastrService.success(this.translateService.instant('Fund transfer successful!'));
+      .subscribe({
+        next: () => {
+          this.messageService.add({
+            severity: 'success',
+            summary: this.translateService.instant('Account'),
+            detail: this.translateService.instant('Fund transfer successful!'),
+            life: CONFIG.MESSAGE_LIFE
+          });
           this.router.navigate(['/', 'acquisition', 'accounts']);
         },
-        (err) => { this.toastrService.error(this.translateService.instant(err.error.message)); }
-      );
+        error: (err) => this.messageService.add({
+          severity: 'error',
+          summary: this.translateService.instant('Account'),
+          detail:this.translateService.instant(err.error.message),
+          sticky: true,
+          closable: true
+        }),
+    });
   }
 
   /**
diff --git a/projects/admin/src/app/acquisition/components/budget/budget-brief-view/budgets-brief-view.component.ts b/projects/admin/src/app/acquisition/components/budget/budget-brief-view/budgets-brief-view.component.ts
index 4126e8e3e..26c7ac9c2 100644
--- a/projects/admin/src/app/acquisition/components/budget/budget-brief-view/budgets-brief-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/budget/budget-brief-view/budgets-brief-view.component.ts
@@ -16,14 +16,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { ResultItem } from '@rero/ng-core';
 
 @Component({
   selector: 'admin-budgets-brief-view',
   template: `
-  <h5 class="card-title mb-0 rero-ils-person">
+  <h5 class="mb-0">
     <i
       class="fa fa-circle mr-2"
       [title]="title"
@@ -36,6 +36,8 @@ import { ResultItem } from '@rero/ng-core';
 })
 export class BudgetsBriefViewComponent implements ResultItem {
 
+  private translateService: TranslateService = inject(TranslateService);
+
   /** The record to display */
   @Input() record: any;
   /** The record type */
@@ -43,17 +45,11 @@ export class BudgetsBriefViewComponent implements ResultItem {
   /** The URL to the detail view of the record */
   @Input() detailUrl: { link: string, external: boolean };
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  public constructor(private translateService: TranslateService) {}
-
   /**
    * Status of the budget on bullet title
    * @returns string - status
    */
-  get title() {
+  get title(): string {
     return this.record.metadata.is_active
       ? this.translateService.instant('Active')
       : this.translateService.instant('Inactive');
diff --git a/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.html b/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.html
index 4d40162c9..828ae0132 100644
--- a/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.html
+++ b/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.html
@@ -18,13 +18,18 @@
 @if (record$ | async; as record) {
   <!-- ROLLOVER INFO -->
   @if (!record.metadata.is_active) {
-    <div class="fiscal-year-closed" translate>Fiscal year closed</div>
+    <p-messages
+      [value]="[{ severity: 'warn', detail:'Fiscal year closed'|translate }]"
+      [closable]="false"
+      [enableService]="false"
+      showTransitionOptions="0ms"
+    />
   }
-  <header>
+  <header class="mb-3">
     <h1>{{ record.metadata.name }}</h1>
   </header>
   <section>
-    <dl class="row">
+    <dl class="grid">
       <dt class="col-3 label-title">Total</dt>
       <dd class="col-9">{{ totalAmount | currency:currencyCode:'symbol' }}</dd>
     </dl>
diff --git a/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.ts b/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.ts
index 0f4f11b30..d3c487610 100644
--- a/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/budget/budget-detail-view/budget-detail-view.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { OrganisationService } from '@app/admin/service/organisation.service';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Observable, Subscription } from 'rxjs';
@@ -28,6 +28,9 @@ import { AcqBudgetApiService } from '../../../api/acq-budget-api.service';
 })
 export class BudgetDetailViewComponent implements DetailRecord, OnInit, OnDestroy {
 
+  private budgetApiService: AcqBudgetApiService = inject(AcqBudgetApiService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Record observable */
   record$: Observable<any>;
@@ -45,17 +48,6 @@ export class BudgetDetailViewComponent implements DetailRecord, OnInit, OnDestro
     return this.organisationService.organisation.default_currency;
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param budgetApiService - AcqBudgetApiService
-   * @param organisationService - OrganisationService
-   */
-  constructor(
-    private budgetApiService: AcqBudgetApiService,
-    private organisationService: OrganisationService
-  ) {}
-
   /** OnInit hook */
   ngOnInit() {
     this._subscriptions.add(
diff --git a/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.ts b/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.ts
index ba56274fd..6d272357a 100644
--- a/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.ts
+++ b/projects/admin/src/app/acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { getCurrencySymbol } from '@angular/common';
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
 import { IAcqAccount } from '@app/admin/acquisition/classes/account';
 import { OrganisationService } from '@app/admin/service/organisation.service';
 import { FieldType } from '@ngx-formly/core';
@@ -32,6 +32,12 @@ import { orderAccountsAsTree } from '../../../../utils/account';
 })
 export class SelectAccountEditorWidgetComponent extends FieldType implements OnInit {
 
+  private acqAccountApiService: AcqAccountApiService = inject(AcqAccountApiService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private apiService: ApiService = inject(ApiService);
+  private userService: UserService = inject(UserService);
+  private changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);
+
   // COMPONENT ATTRIBUTES =======================================================
   /** accounts list */
   accountList: IAcqAccount[] = [];
@@ -49,24 +55,6 @@ export class SelectAccountEditorWidgetComponent extends FieldType implements OnI
     return getCurrencySymbol(this.organisation.default_currency, 'wide');
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param acqAccountApiService - AcqAccountApiService
-   * @param organisationService - OrganisationService
-   * @param apiService - ApiService
-   * @param userService - UserService
-   */
-  constructor(
-    private acqAccountApiService: AcqAccountApiService,
-    private organisationService: OrganisationService,
-    private apiService: ApiService,
-    private userService: UserService,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {
-    super();
-  }
-
   /** OnInit hook */
   ngOnInit(): void {
     const libraryPid = this.userService.user.currentLibrary;
diff --git a/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.html b/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.html
index 630369169..14f4f9766 100644
--- a/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.html
@@ -16,7 +16,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (order) {
-  <article class="row order-brief-view">
+  <article class="grid order-brief-view">
     <div class="col-9 pl-0">
       <h5 class="m-0"><a [routerLink]="[detailUrl.link]">{{ order.reference }}</a></h5>
       <ng-container *ngVar="order.notes | notesFilter: [noteType.STAFF_NOTE] as notes">
diff --git a/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.ts b/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.ts
index 88372b165..b8110ebd4 100644
--- a/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-brief-view/order-brief-view.component.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { ResultItem } from '@rero/ng-core';
 import { AcqOrderApiService } from '../../../api/acq-order-api.service';
 import { AcqNoteType } from '../../../classes/common';
@@ -29,6 +29,8 @@ import { AcqOrderStatus, IAcqOrder } from '../../../classes/order';
 })
 export class OrderBriefViewComponent implements ResultItem, OnInit {
 
+  private acqOrderApiService: AcqOrderApiService = inject(AcqOrderApiService);
+
   // COMPONENTS ATTRIBUTES ====================================================
   /** the record to display */
   @Input() record: any;
@@ -79,13 +81,6 @@ export class OrderBriefViewComponent implements ResultItem, OnInit {
     return (this.order.account_statement.expenditure.quantity > 0);
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * constructor
-   * @param acqOrderApiService - AcqOrderApiService
-   */
-  constructor(private acqOrderApiService: AcqOrderApiService) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     const metadata = {...this.acqOrderApiService.orderDefaultData, ...this.record.metadata};
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.html b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.html
index f3bfd5b1b..d566d9896 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.html
@@ -34,7 +34,12 @@
   <div class="container-fluid mt-2" [class.rollovered]="!order.is_current_budget">
     <!-- ROLLOVER INFO -->
     @if (!order.is_current_budget) {
-      <div class="fiscal-year-closed" translate>Fiscal year closed</div>
+      <p-messages
+        [value]="[{ severity: 'warn', detail:'Fiscal year closed'|translate }]"
+        [closable]="false"
+        [enableService]="false"
+        showTransitionOptions="0ms"
+      />
     }
 
     <h1 class="mb-3">{{ order.reference }}</h1>
@@ -52,9 +57,8 @@ <h1 class="mb-3">{{ order.reference }}</h1>
       }
     </admin-order-summary>
 
-    <tabset #orderTabs>
-      <!-- ORDER DETAIL VIEW -->
-      <tab heading="{{ 'Order' | translate }}">
+    <p-tabView>
+      <p-tabPanel [header]="'Order'|translate">
         <!-- ORDER LINES -->
         @if (isPermissionsLoaded) {
           <admin-order-lines class="row" [order]="order" [recordPermissions]="recordPermissions"></admin-order-lines>
@@ -90,16 +94,14 @@ <h5 class="m-0">
             </div>
           </div>
         }
-      </tab>
-      <!-- RECEIPTS DETAIL VIEW -->
-      <tab heading="{{ 'Reception' | translate }}" [disabled]="!canViewReceipts">
+      </p-tabPanel>
+      <p-tabPanel [header]="'Reception'|translate" [disabled]="!canViewReceipts">
         @if (isPermissionsLoaded) {
           <admin-receipt-list class="row" [order]="order" [recordPermissions]="recordPermissions"></admin-receipt-list>
         }
-      </tab>
-      <!-- HISTORY -->
+      </p-tabPanel>
       @if (historyVersions && historyVersions.length > 1) {
-        <tab heading="{{ 'History' | translate }}">
+        <p-tabPanel [header]="'History'|translate">
           <p-timeline [value]="historyVersions">
             <ng-template pTemplate="marker" let-event>
               <div [class.p-timeline-event-marker-current]="event.active" class="p-timeline-event-marker"></div>
@@ -109,8 +111,8 @@ <h5 class="m-0">
               <small>{{ event.description }}</small>
             </ng-template>
           </p-timeline>
-        </tab>
+        </p-tabPanel>
       }
-    </tabset>
+    </p-tabView>
   </div>
 }
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.ts b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.ts
index 5296ea787..9c1c4d7e9 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-detail-view.component.ts
@@ -16,18 +16,19 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { ViewportScroller } from '@angular/common';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { AcqOrderApiService } from '@app/admin/acquisition/api/acq-order-api.service';
 import { RecordPermissions } from '@app/admin/classes/permissions';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { CurrentLibraryPermissionValidator } from '@app/admin/utils/permissions';
+import { extractIdOnRef } from '@rero/ng-core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
-import { BsModalService } from 'ngx-bootstrap/modal';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Observable, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AcqOrderHistoryVersion, AcqOrderHistoryVersionResponseInterface, AcqOrderStatus, IAcqOrder } from '../../../classes/order';
 import { OrderEmailFormComponent } from '../order-email-form/order-email-form.component';
-import { extractIdOnRef } from '@rero/ng-core';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'admin-acquisition-order-detail-view',
@@ -36,6 +37,13 @@ import { extractIdOnRef } from '@rero/ng-core';
 })
 export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy {
 
+  private dialogService: DialogService = inject(DialogService);
+  private scroller: ViewportScroller = inject(ViewportScroller);
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+  private acqOrderService: AcqOrderApiService = inject(AcqOrderApiService);
+  private permissionValidator: CurrentLibraryPermissionValidator = inject(CurrentLibraryPermissionValidator);
+  private translateService: TranslateService = inject(TranslateService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Observable resolving record data */
   record$: Observable<any>;
@@ -57,6 +65,8 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
   /** all component subscription */
   private subscriptions = new Subscription();
 
+  modalRef: DynamicDialogRef | undefined;
+
   // GETTER & SETTER ==========================================================
   /** Determine if the order could be "placed/ordered" */
   get canPlaceOrder(): boolean {
@@ -68,24 +78,8 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
     return this.order.status !== AcqOrderStatus.PENDING;
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /** Constructor
-   * @param scroller - ViewportScroller
-   * @param modalService - BsModalService
-   * @param recordPermissionService - RecordPermissionService
-   * @param permissionValidator - CurrentLibraryPermissionValidator
-   * @param acqOrderService - AcqOrderApiService
-   */
-  constructor(
-    private scroller: ViewportScroller,
-    private modalService: BsModalService,
-    private recordPermissionService: RecordPermissionService,
-    private acqOrderService: AcqOrderApiService,
-    private permissionValidator: CurrentLibraryPermissionValidator
-  ) { }
-
   /** OnInit hook */
-  ngOnInit() {
+  ngOnInit(): void {
     this.subscriptions.add(this.record$.subscribe(
       (record: any) => {
         this.order = record.metadata;
@@ -130,19 +124,17 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
    * Open a modal dialog to allow user to validate the order.
    * If the user submit the form (and submitting is success), then update the order to get the updated data.
    */
-  placeOrderDialog() {
-    const modalRef = this.modalService.show(OrderEmailFormComponent, {
-      ignoreBackdropClick: true,
-      keyboard: true,
-      class: 'modal-xl',
-      initialState: {
+  placeOrderDialog(): void {
+    this.modalRef = this.dialogService.open(OrderEmailFormComponent, {
+      header: this.translateService.instant('Place order'),
+      width: '60vw',
+      dismissableMask: true,
+      data: {
         order: this.order
       }
     });
-    // Event to allow the closing of the dialog
-    modalRef.content.closeDialog.subscribe((close: boolean) => modalRef.hide());
-    modalRef.content.recordChange.subscribe((order: IAcqOrder) => {
-      if (this.order.pid === order.pid) {
+    this.modalRef.onClose.subscribe((order?: IAcqOrder) => {
+      if (order && this.order.pid === order.pid) {
         if (order.vendor.$ref) {
           order.vendor.pid = extractIdOnRef(order.vendor.$ref);
         }
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.html b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.html
index 1db0795ae..6065289b7 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.html
@@ -18,11 +18,14 @@
 <div class="row order-line">
   @if (orderLine && account) {
     <div class="col-9 d-flex" [ngClass]="{'order-cancelled': orderLine.status === orderLineStatus.CANCELLED}">
-      <button type="button" class="btn-show-more"
-              [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
-              (click)="isCollapsed = !isCollapsed"
-              [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
-      </button>
+      <p-button
+        icon="fa {{ isCollapsed ? 'fa-angle-right' : 'fa-angle-down' }}"
+        [rounded]="true"
+        [outlined]="true"
+        (onClick)="isCollapsed = !isCollapsed"
+        [attr.aria-expanded]="!isCollapsed"
+        aria-controls="collapse"
+      />
       <div class="d-flex align-items-start flex-column w-100">
         <div class="d-flex w-100">
           <i class="fa status"
@@ -99,23 +102,21 @@
     <div class="col-1 pl-0 text-right">
       @if (recordPermissions) {
         <shared-action-button
-          [title]="'Edit' | translate"
-          [class]="'btn-outline-primary mr-1'"
+          icon="fa fa-pencil"
+          [title]="'Edit'|translate"
+          class="mr-1"
           [disabled]="!recordPermissions.update.can"
-          [url]="['/records', 'acq_order_lines', 'edit', orderLine.pid]"
+          [routerLink]="['/records', 'acq_order_lines', 'edit', orderLine.pid]"
           [message]="editInfoMessage"
-        >
-          <i class="fa fa-pencil"></i>
-        </shared-action-button>
+        />
         <shared-action-button
-          [title]="'Delete' | translate"
-          [class]="'btn-outline-danger'"
+          icon="fa fa-trash"
+          [title]="'Delete'|translate"
+          severity="danger"
           [disabled]="!recordPermissions.delete.can"
           [message]="deleteInfoMessage"
           (btnClick)="deleteOrderLine()"
-        >
-          <i class="fa fa-trash"></i>
-        </shared-action-button>
+        />
       } @else {
         &nbsp;
       }
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.ts b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.ts
index aa2d654e6..b3da7f3e3 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-line/order-line.component.ts
@@ -15,12 +15,12 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { RecordPermissions } from '@app/admin/classes/permissions';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { CurrentLibraryPermissionValidator } from '@app/admin/utils/permissions';
 import { RecordService } from '@rero/ng-core';
-import { Subscription, forkJoin } from 'rxjs';
+import { forkJoin, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AcqOrderApiService } from '../../../../api/acq-order-api.service';
 import { AcqOrderLineStatus, IAcqOrderLine } from '../../../../classes/order';
@@ -33,6 +33,11 @@ import { AcqOrderLineStatus, IAcqOrderLine } from '../../../../classes/order';
 })
 export class OrderLineComponent implements OnInit, OnDestroy {
 
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+  private recordService: RecordService = inject(RecordService);
+  private acqOrderApiService: AcqOrderApiService = inject(AcqOrderApiService);
+  private permissionValidator: CurrentLibraryPermissionValidator = inject(CurrentLibraryPermissionValidator);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** order line */
   @Input() orderLine: IAcqOrderLine;
@@ -67,20 +72,6 @@ export class OrderLineComponent implements OnInit, OnDestroy {
       : null;
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /** Constructor
-   * @param recordPermissionService - RecordPermissionService
-   * @param recordService - RecordService
-   * @param acqOrderApiService - AcqOrderApiService
-   * @param permissionValidator - CurrentLibraryPermissionValidator
-   */
-  constructor(
-    private recordPermissionService: RecordPermissionService,
-    private recordService: RecordService,
-    private acqOrderApiService: AcqOrderApiService,
-    private permissionValidator: CurrentLibraryPermissionValidator
-  ) { }
-
   /** OnInit hook */
   ngOnInit() {
     const account$ = this.recordService.getRecord('acq_accounts', this.orderLine.acq_account.pid);
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.html b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.html
index da3d87af3..6be406878 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.html
@@ -21,18 +21,25 @@ <h5 class="col-8" translate>Order lines</h5>
     <div class="col-4 text-right">
       @if (recordPermissions) {
         @if (recordPermissions.update.can) {
-          <a class="btn btn-sm btn-outline-primary"
+          <p-button
+            icon="fa fa-plus-square-o"
+            [label]="'Add'|translate"
+            [outlined]="true"
             [routerLink]="['/', 'records', 'acq_order_lines', 'new']"
             [queryParams]="{ order: order.pid }"
-          >
-            <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
-          </a>
+          />
         } @else {
-          <button type="button" class="btn btn-sm btn-outline-primary disabled"
-                  [popover]="tolTemplate" triggers="mouseenter:mouseleave">
-            <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
-          </button>
-          <ng-template #tolTemplate><div [innerHtml]="createInfoMessage | nl2br"></div></ng-template>
+          <p-button
+            icon="fa fa-plus-square-o"
+            [label]="'Add'|translate"
+            [outlined]="true"
+            [pTooltip]="tooltipContent"
+            tooltipPosition="top"
+            styleClass="text-blue-200"
+          />
+          <ng-template #tooltipContent>
+            <span [innerHTML]="createInfoMessage | nl2br"></span>
+          </ng-template>
         }
       } @else {
         &nbsp;
diff --git a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.ts b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.ts
index 5fbe2d04d..ea863ee14 100644
--- a/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-detail-view/order-lines/order-lines.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Component, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { RecordPermissions } from '@app/admin/classes/permissions';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { Subscription } from 'rxjs';
@@ -28,6 +28,9 @@ import { IAcqOrder, IAcqOrderLine } from '../../../../classes/order';
 })
 export class OrderLinesComponent implements OnInit, OnChanges, OnDestroy {
 
+  private acqOrderApiService: AcqOrderApiService = inject(AcqOrderApiService);
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+
   // COMPONENTS ATTRIBUTES ====================================================
   /** Acquisition order pid */
   @Input() order: IAcqOrder;
@@ -48,17 +51,6 @@ export class OrderLinesComponent implements OnInit, OnChanges, OnDestroy {
     return this.recordPermissionService.generateTooltipMessage(this.recordPermissions.update.reasons, 'create');
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param acqOrderApiService - AcqOrderApiService
-   * @param recordPermissionService - RecordPermissionService
-   */
-  constructor(
-    private acqOrderApiService: AcqOrderApiService,
-    private recordPermissionService: RecordPermissionService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     this.loadOrderLines();
diff --git a/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.html b/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.html
index d345597f4..85982686e 100644
--- a/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.html
@@ -23,10 +23,9 @@
     [preview]="response.preview"
     [previewPosition]="'bottom'"
     [prePopulateRecipients]="suggestions.recipients"
-    (closeDialog)="closeEmailDialog()"
+    (closeDialog)="closeDialog()"
     (data)="confirmOrder($event)"
   >
-    <ng-container title>{{ 'Place order' | translate }}</ng-container>
     <ng-container headerMessage>
       <p translate>You're about to send the order.</p>
     </ng-container>
diff --git a/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.ts b/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.ts
index e45fa253e..78a5ad407 100644
--- a/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.ts
@@ -15,14 +15,16 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { AcqOrderApiService } from '@app/admin/acquisition/api/acq-order-api.service';
 import { IAcqOrder } from '@app/admin/acquisition/classes/order';
 import { Notification } from '@app/admin/classes/notification';
 import { IPreview, ITypeEmail } from '@app/admin/shared/preview-email/IPreviewInterface';
 import { Tools } from '@app/admin/shared/preview-email/utils/tools';
 import { TranslateService } from '@ngx-translate/core';
-import { ToastrService } from 'ngx-toastr';
+import { CONFIG } from '@rero/ng-core';
+import { MessageService } from 'primeng/api';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -31,15 +33,15 @@ import { Subscription } from 'rxjs';
 })
 export class OrderEmailFormComponent implements OnInit, OnDestroy {
 
+  private messageService: MessageService = inject(MessageService);
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private acqOrderApiService: AcqOrderApiService = inject(AcqOrderApiService);
+  private translateService: TranslateService = inject(TranslateService);
+
   /** the related order */
   @Input() order: IAcqOrder;
 
-  /** Closing event for the modal dialog */
-  @Output() closeDialog = new EventEmitter<boolean>(false);
-
-  /** Reload data event to enable detection of data loading */
-  @Output() recordChange = new EventEmitter<any>();
-
   /** Available recipient types */
   emailTypes = ['to', 'cc', 'bcc', 'reply_to'];
 
@@ -55,20 +57,9 @@ export class OrderEmailFormComponent implements OnInit, OnDestroy {
   /** all component subscription */
   private subscriptions = new Subscription();
 
-  /**
-   * Constructor
-   * @param acqOrderApiService - AcqOrderApiService
-   * @param toastrService - ToastrService
-   * @param translateService - TranslateService
-   */
-  constructor(
-    private acqOrderApiService: AcqOrderApiService,
-    private toastrService: ToastrService,
-    private translateService: TranslateService
-  ) { }
-
   /** onInit hook */
   ngOnInit(): void {
+    this.order = this.dynamicDialogConfig.data.order;
     this.subscriptions.add(this.acqOrderApiService
       .getOrderPreview(this.order.pid)
       .subscribe((response: IPreview) => {
@@ -90,40 +81,41 @@ export class OrderEmailFormComponent implements OnInit, OnDestroy {
   confirmOrder(recipients: ITypeEmail[]): void {
     this.acqOrderApiService
       .sendOrder(this.order.pid, recipients)
-      .subscribe(
-        (notification: Notification) => {
+      .subscribe({
+        next: (notification: Notification) => {
           if (notification.notification_sent) {
-            this.toastrService.success(
-              this.translateService.instant('order has been sent'),
-              this.translateService.instant('Order sent')
-            );
+            this.messageService.add({
+              severity: 'success',
+              summary: this.translateService.instant('Order sent'),
+              detail: this.translateService.instant('order has been sent'),
+              life: CONFIG.MESSAGE_LIFE
+            });
           } else {
-            this.toastrService.warning(
-              this.translateService.instant('order not yet send'),
-              this.translateService.instant('Order delayed'),
-              { disableTimeOut: true, closeButton: true }
-            );
+            this.messageService.add({
+              severity: 'warn',
+              summary: this.translateService.instant('Order delayed'),
+              detail:  this.translateService.instant('order not yet send'),
+              life: CONFIG.MESSAGE_LIFE
+            });
           }
-          this.closeEmailDialog();
           this.acqOrderApiService
             .getOrder(this.order.pid)
-            .subscribe((order: IAcqOrder) => this.recordChange.next(order));
+            .subscribe((order: IAcqOrder) => this.closeDialog(order));
         },
-        (error: any) => {
-          this.toastrService.error(
-            error.error.message,
-            this.translateService.instant('Error when placing an order !'),
-            { disableTimeOut: true, closeButton: true }
-          );
-       });
+        error: (error: any) => {
+          this.messageService.add({
+            severity: 'error',
+            summary: this.translateService.instant('Error when placing an order !'),
+            detail: error.error.message,
+            sticky: true,
+            closable: true
+          });
+      }
+    });
   }
 
-  /**
-   * Close email dialog
-   * Send the event to trigger the closing of the dialog
-   * from the child to the parent
-   */
-  closeEmailDialog(): void {
-    this.closeDialog.emit(true);
+  /**  Close email dialog */
+  closeDialog(data?: IAcqOrder): void {
+    this.dynamicDialogRef.close(data);
   }
 }
diff --git a/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.html b/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.html
index c7f6332d3..4081d298e 100644
--- a/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.html
+++ b/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.html
@@ -16,7 +16,7 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (order) {
-  <section class="my-3 row border rounded bg-white">
+  <section class="my-3 grid border rounded bg-white">
     <div class="col-8">
       <dl class="row my-2">
         <!-- VENDOR -->
diff --git a/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.ts b/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.ts
index 49a52f281..00e03bd7e 100644
--- a/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.ts
+++ b/projects/admin/src/app/acquisition/components/order/order-summary/order-summary.component.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { AcqOrderApiService } from '../../../api/acq-order-api.service';
 import { AcqReceiptApiService } from '../../../api/acq-receipt-api.service';
@@ -30,6 +30,9 @@ import { IAcqReceipt } from '../../../classes/receipt';
 })
 export class OrderSummaryComponent implements OnInit, OnDestroy {
 
+  private acqOrderApiService: AcqOrderApiService = inject(AcqOrderApiService);
+  private acqReceiptApiService: AcqReceiptApiService = inject(AcqReceiptApiService);
+
   // COMPONENTS ATTRIBUTES ====================================================
   @Input() order: IAcqOrder;
 
@@ -39,18 +42,6 @@ export class OrderSummaryComponent implements OnInit, OnDestroy {
   /** all component subscription */
   private subscriptions = new Subscription();
 
-  // CONSTRUCTOR & HOOKS ======================================================
-
-  /**
-   * Constructor
-   * @param acqOrderApiService - AcqOrderApiService
-   * @param acqReceiptApiService - AcqReceiptApiService
-   */
-  constructor(
-    private acqOrderApiService: AcqOrderApiService,
-    private acqReceiptApiService: AcqReceiptApiService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     // Subscription when an order line is deleted
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.html b/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.html
index 78530ec98..433fbfa1c 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.html
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.html
@@ -66,23 +66,21 @@ <h1 class="mb-3">{{ receipt.reference }}</h1>
               <div class="col-1 actions text-right">
                 @if (permissions) {
                   <shared-action-button
+                    icon="fa fa-pencil"
                     [title]="'Edit' | translate"
-                    [class]="'btn-outline-primary mr-1'"
+                    class="mr-1"
                     [disabled]="!permissions.update.can"
-                    [url]="['/records', 'acq_receipt_lines', 'edit', line.pid]"
+                    [routerLink]="['/records', 'acq_receipt_lines', 'edit', line.pid]"
                     [message]="editInfoMessage"
-                  >
-                    <i class="fa fa-pencil"></i>
-                  </shared-action-button>
+                  />
                   <shared-action-button
+                    icon="fa fa-trash"
                     [title]="'Delete' | translate"
-                    [class]="'btn-outline-danger'"
+                    severity="danger"
                     [disabled]="!permissions.delete.can"
                     [message]="deleteInfoMessage"
                     (btnClick)="deleteReceiptLine(line)"
-                  >
-                    <i class="fa fa-trash"></i>
-                  </shared-action-button>
+                  />
                 }
               </div>
             } @else {
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.ts
index a4648a5d1..5335e6d6d 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-detail-view/receipt-detail-view.component.ts
@@ -15,9 +15,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
-import { Observable, Subscription, forkJoin } from 'rxjs';
+import { forkJoin, Observable, Subscription } from 'rxjs';
 import { RecordPermissions } from '../../../../classes/permissions';
 import { RecordPermissionService } from '../../../../service/record-permission.service';
 import { CurrentLibraryPermissionValidator } from '../../../../utils/permissions';
@@ -31,6 +31,10 @@ import { IAcqReceipt, IAcqReceiptLine } from '../../../classes/receipt';
 })
 export class ReceiptDetailViewComponent implements OnInit, OnDestroy, DetailRecord {
 
+  private acqReceiptApiService: AcqReceiptApiService = inject(AcqReceiptApiService);
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+  private currentLibraryPermissionValidator: CurrentLibraryPermissionValidator = inject(CurrentLibraryPermissionValidator);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Observable resolving record data */
   record$: Observable<any>;
@@ -63,19 +67,6 @@ export class ReceiptDetailViewComponent implements OnInit, OnDestroy, DetailReco
     }
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param acqReceiptApiService - AcqReceiptApiService
-   * @param recordPermissionService - RecordPermissionService
-   * @param currentLibraryPermissionValidator - CurrentLibraryPermissionValidator
-   */
-  constructor(
-    private acqReceiptApiService: AcqReceiptApiService,
-    private recordPermissionService: RecordPermissionService,
-    private currentLibraryPermissionValidator: CurrentLibraryPermissionValidator
-  ) { }
-
   /** OnInit hook */
   ngOnInit() {
     this.record$.subscribe((record: any) => {
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-form.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-form.ts
index 299258d11..3182ca738 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-form.ts
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-form.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { ApiService, extractIdOnRef } from '@rero/ng-core';
@@ -42,6 +42,11 @@ function lineAction($event: Event, action: string, fields: any): void {
 })
 export class OrderReceiptForm {
 
+  private acqOrderApiService: AcqOrderApiService = inject(AcqOrderApiService);
+  private acqAccountApiService: AcqAccountApiService = inject(AcqAccountApiService);
+  private apiService: ApiService = inject(ApiService);
+  private orderReceipt: OrderReceipt = inject(OrderReceipt);
+
   /** Order Record */
   private orderRecord: any;
 
@@ -51,20 +56,6 @@ export class OrderReceiptForm {
   /** Form fields config */
   private config: any;
 
-  /**
-   * Constructor
-   * @param acqOrderApiService - AcqOrderApiService
-   * @param acqAccountApiService - AcqAccountApiService
-   * @param apiService - ApiService
-   * @param orderReceipt - OrderReceipt
-   */
-  constructor(
-    private acqOrderApiService: AcqOrderApiService,
-    private acqAccountApiService: AcqAccountApiService,
-    private apiService: ApiService,
-    private orderReceipt: OrderReceipt
-  ) {}
-
   /**
    * Set model
    * @param model - IReceiptModel
@@ -194,7 +185,7 @@ export class OrderReceiptForm {
       },
       {
         key: 'receiptDate',
-        type: 'datepicker',
+        type: 'datePicker',
         props: {
           type: 'date',
           label: _('Reception date'),
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.ts
index 4b7afd3fe..17e0a6976 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.ts
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-view.component.ts
@@ -14,12 +14,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
-import { ToastrService } from 'ngx-toastr';
+import { CONFIG } from '@rero/ng-core';
+import { MessageService } from 'primeng/api';
 import { finalize, tap } from 'rxjs/operators';
 import { AcqReceiptApiService } from '../../../api/acq-receipt-api.service';
 import { IAcqReceipt } from '../../../classes/receipt';
@@ -33,6 +34,14 @@ import { OrderReceiptForm } from './order-receipt-form';
 })
 export class OrderReceiptViewComponent implements OnInit {
 
+  private route: ActivatedRoute = inject(ActivatedRoute);
+  private router: Router = inject(Router);
+  private orderReceipt: OrderReceipt = inject(OrderReceipt);
+  private acqReceiptApiService: AcqReceiptApiService = inject(AcqReceiptApiService);
+  private translateService: TranslateService = inject(TranslateService);
+  private orderReceiptForm: OrderReceiptForm = inject(OrderReceiptForm);
+  private messageService = inject(MessageService);
+
   // COMPONENTS ATTRIBUTES ====================================================
   /** order pid */
   orderPid: string;
@@ -68,27 +77,6 @@ export class OrderReceiptViewComponent implements OnInit {
     return this._fields;
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param route - ActivatedRoute
-   * @param router - Router
-   * @param orderReceipt - OrderReceipt
-   * @param acqReceiptApiService - AcqReceiptApiService
-   * @param toastrService - ToastrService
-   * @param translateService - TranslateService
-   * @param orderReceiptForm - OrderReceiptForm
-   */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private orderReceipt: OrderReceipt,
-    private acqReceiptApiService: AcqReceiptApiService,
-    private toastrService: ToastrService,
-    private translateService: TranslateService,
-    private orderReceiptForm: OrderReceiptForm
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this.orderPid = this.route.snapshot.paramMap.get('pid');
@@ -112,15 +100,16 @@ export class OrderReceiptViewComponent implements OnInit {
       : this.acqReceiptApiService.updateReceipt(record.pid, record);
     receiptApi$
       .pipe(finalize(() => this.orderSend = false))
-      .subscribe(
-        (receipt: IAcqReceipt) => this.createLinesAndMessage(model, receipt),
-        (err) => {
-          this.toastrService.error(
-            err.title, this.translateService.instant('Receipt'),
-            { disableTimeOut: true, closeButton: true }
-          );
-        }
-      );
+      .subscribe({
+        next: (receipt: IAcqReceipt) => this.createLinesAndMessage(model, receipt),
+        error: (err) => this.messageService.add({
+          severity: 'error',
+          summary: this.translateService.instant('Receipt'),
+          detail: err.title,
+          sticky: true,
+          closable: true
+        })
+      });
   }
 
   // COMPONENT PRIVATE FUNCTIONS ==============================================
@@ -165,24 +154,30 @@ export class OrderReceiptViewComponent implements OnInit {
         .createReceiptLines(model.pid, lines)
         .subscribe((result: ICreateLineMessage) => {
           if (result.success) {
-            this.toastrService.success(
-              this.translateService.instant('Receipt operations were successful'),
-              this.translateService.instant('Receipt')
-            );
+            this.messageService.add({
+              severity: 'success',
+              summary: this.translateService.instant('Receipt'),
+              detail: this.translateService.instant('Receipt operations were successful'),
+              life: CONFIG.MESSAGE_LIFE
+            });
           } else {
-            this.toastrService.error(
-              this.translateService.instant(result.messages),
-              this.translateService.instant('Receipt'),
-              {disableTimeOut: true, closeButton: true}
-            );
+            this.messageService.add({
+              severity: 'error',
+              summary: this.translateService.instant('Receipt'),
+              detail: this.translateService.instant(result.messages),
+              sticky: true,
+              closable: true
+            });
           }
           this.redirectToOrder();
         });
     } else {
-      this.toastrService.success(
-        this.translateService.instant('Receipt operations were successful'),
-        this.translateService.instant('Receipt')
-      );
+      this.messageService.add({
+        severity: 'success',
+        summary: this.translateService.instant('Receipt'),
+        detail: this.translateService.instant('Receipt operations were successful'),
+        life: CONFIG.MESSAGE_LIFE
+      });
       this.redirectToOrder();
     }
   }
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt.ts
index e5fb569ad..302760057 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt.ts
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ApiService } from '@rero/ng-core';
 import moment from 'moment';
 import { IAcqNote } from '../../../classes/common';
@@ -73,9 +73,7 @@ export interface ICreateLineMessage {
 })
 export class OrderReceipt {
 
-  constructor(
-    private _apiService: ApiService
-  ) {}
+  private apiService: ApiService = inject(ApiService);
 
   /** Model */
   get model(): IAcqReceiptModel {
@@ -119,9 +117,9 @@ export class OrderReceipt {
     return {
       pid: record.pid,
       $schema: record.$schema,
-      acq_order: { $ref: this._apiService.getRefEndpoint('acq_orders', record.acq_order.pid) },
-      library: { $ref: this._apiService.getRefEndpoint('libraries', record.library.pid) },
-      organisation: { $ref: this._apiService.getRefEndpoint('organisation', record.organisation.pid) },
+      acq_order: { $ref: this.apiService.getRefEndpoint('acq_orders', record.acq_order.pid) },
+      library: { $ref: this.apiService.getRefEndpoint('libraries', record.library.pid) },
+      organisation: { $ref: this.apiService.getRefEndpoint('organisation', record.organisation.pid) },
       reference: record.reference,
       exchange_rate: record.exchange_rate,
       amount_adjustments: record.amount_adjustments,
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.html b/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.html
index fc7fff347..47aa79a11 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.html
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.html
@@ -24,17 +24,24 @@ <h5 class="col-8 m-0">
     <div class="col-4 text-right">
       @if (recordPermissions) {
         @if (recordPermissions.create.can) {
-          <a class="btn btn-sm btn-outline-primary"
+          <p-button
+            icon="fa fa-plus-square-o"
+            [label]="'Add'|translate"
+            [outlined]="true"
             [routerLink]="['/', 'acquisition', 'acq_orders', order.pid, 'receive']"
-          >
-            <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
-          </a>
+          />
         } @else {
-          <button type="button" class="btn btn-sm btn-outline-primary disabled"
-                  [popover]="tolTemplate" triggers="mouseenter:mouseleave">
-            <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
-          </button>
-          <ng-template #tolTemplate><div [innerHtml]="createInfoMessage | nl2br"></div></ng-template>
+          <p-button
+            icon="fa fa-plus-square-o"
+            [label]="'Add'|translate"
+            [outlined]="true"
+            [pTooltip]="tooltipContent"
+            tooltipPosition="top"
+            styleClass="text-blue-200"
+          />
+          <ng-template #tooltipContent>
+            <span [innerHTML]="createInfoMessage | nl2br"></span>
+          </ng-template>
         }
       } @else {
         &nbsp;
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.ts
index e04877868..d270bbf36 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.ts
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-list/receipt-list.component.ts
@@ -15,11 +15,11 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { Component, inject, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
 import { RecordPermissions } from '@app/admin/classes/permissions';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { CurrentLibraryPermissionValidator } from '@app/admin/utils/permissions';
-import { Subscription, of } from 'rxjs';
+import { of, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AcqReceiptApiService } from '../../../api/acq-receipt-api.service';
 import { IAcqOrder } from '../../../classes/order';
@@ -32,6 +32,11 @@ import { ReceivedOrderPermissionValidator } from '../../../utils/permissions';
 })
 export class ReceiptListComponent implements OnInit, OnChanges, OnDestroy {
 
+  private acqReceiptApiService: AcqReceiptApiService = inject(AcqReceiptApiService);
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+  private currentLibraryPermissionValidator: CurrentLibraryPermissionValidator = inject(CurrentLibraryPermissionValidator);
+  private receivedOrderPermissionValidator: ReceivedOrderPermissionValidator = inject(ReceivedOrderPermissionValidator);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** the order for which we want to display receipts */
   @Input() order: IAcqOrder;
@@ -60,21 +65,6 @@ export class ReceiptListComponent implements OnInit, OnChanges, OnDestroy {
     return (this.receipts) ? this.receipts.length : 0;
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param acqReceiptApiService - AcqReceiptApiService
-   * @param recordPermissionService - RecordPermissionService
-   * @param currentLibraryPermissionValidator - CurrentLibraryPermissionValidator
-   * @param receivedOrderPermissionValidator - ReceivedOrderPermissionValidator
-   */
-  constructor(
-    private acqReceiptApiService: AcqReceiptApiService,
-    private recordPermissionService: RecordPermissionService,
-    private currentLibraryPermissionValidator: CurrentLibraryPermissionValidator,
-    private receivedOrderPermissionValidator: ReceivedOrderPermissionValidator
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     this._loadPermissions();
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.html b/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.html
index 525d70e8d..16651da53 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.html
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.html
@@ -112,33 +112,31 @@
       <div class="col-2 actions-column pl-0 text-right">
         <!-- CONTINUE BUTTON -->
         <shared-action-button
+          icon="fa fa-forward"
+          [label]="'Resume' | translate"
           [title]="'Resume' | translate"
-          [class]="'btn-outline-primary mr-1'"
+          class="mr-1"
           [disabled]="!recordPermissions.create.can"
-          [url]="['/', 'acquisition', 'acq_orders', receipt.acq_order.pid, 'receive']"
+          [routerLink]="['/', 'acquisition', 'acq_orders', receipt.acq_order.pid, 'receive']"
           [queryParams]="{ receipt: receipt.pid }"
           [message]="resumeInfoMessage"
-        >
-          <i class="fa fa-forward"></i> {{ 'Resume' | translate }}
-        </shared-action-button>
+        />
         <shared-action-button
+          icon="fa fa-pencil"
           [title]="'Edit' | translate"
-          [class]="'btn-outline-primary mr-1'"
+          class="mr-1"
           [disabled]="!recordPermissions.update.can"
-          [url]="['/records', 'acq_receipts', 'edit', receipt.pid]"
+          [routerLink]="['/records', 'acq_receipts', 'edit', receipt.pid]"
           [message]="editInfoMessage"
-        >
-          <i class="fa fa-pencil"></i>
-        </shared-action-button>
+        />
         <shared-action-button
+          icon="fa fa-trash"
           [title]="'Delete' | translate"
-          [class]="'btn-outline-danger'"
+          severity="danger"
           [disabled]="!recordPermissions.delete.can"
           [message]="deleteInfoMessage"
           (btnClick)="deleteReceipt()"
-        >
-          <i class="fa fa-trash"></i>
-        </shared-action-button>
+        />
       </div>
     }
   } @else {
diff --git a/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.ts
index 5398c509d..0cf6ee51d 100644
--- a/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.ts
+++ b/projects/admin/src/app/acquisition/components/receipt/receipt-summary/receipt-summary.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { RecordPermissions } from '@app/admin/classes/permissions';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { CurrentLibraryPermissionValidator } from '@app/admin/utils/permissions';
@@ -32,6 +32,12 @@ import { ReceivedOrderPermissionValidator } from '../../../utils/permissions';
 })
 export class ReceiptSummaryComponent implements OnInit {
 
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+  private acqReceiptApiService: AcqReceiptApiService = inject(AcqReceiptApiService);
+  private acqOrderApiService: AcqOrderApiService = inject(AcqOrderApiService);
+  private currentLibraryPermissionValidator: CurrentLibraryPermissionValidator = inject(CurrentLibraryPermissionValidator);
+  private receivedOrderPermissionValidator: ReceivedOrderPermissionValidator = inject(ReceivedOrderPermissionValidator);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** The receipt pid to load */
   @Input() receiptPid: string;
@@ -66,23 +72,6 @@ export class ReceiptSummaryComponent implements OnInit {
       : '';
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param recordPermissionService - RecordPermissionService
-   * @param acqReceiptApiService - AcqReceiptApiService
-   * @param acqOrderApiService - AcqOrderApiService
-   * @param currentLibraryPermissionValidator - CurrentLibraryPermissionValidator
-   * @param receivedOrderPermissionValidator - ReceivedOrderPermissionValidator
-   */
-  constructor(
-    private recordPermissionService: RecordPermissionService,
-    private acqReceiptApiService: AcqReceiptApiService,
-    private acqOrderApiService: AcqOrderApiService,
-    private currentLibraryPermissionValidator: CurrentLibraryPermissionValidator,
-    private receivedOrderPermissionValidator: ReceivedOrderPermissionValidator
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     if (!this.collapsable){
diff --git a/projects/admin/src/app/acquisition/formly/type/field-document-brief-view.type.ts b/projects/admin/src/app/acquisition/formly/type/field-document-brief-view.type.ts
index 7d0408c0e..52b1dab9b 100644
--- a/projects/admin/src/app/acquisition/formly/type/field-document-brief-view.type.ts
+++ b/projects/admin/src/app/acquisition/formly/type/field-document-brief-view.type.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
 import { FieldType } from '@ngx-formly/core';
 import { RecordService } from '@rero/ng-core';
 
@@ -30,21 +30,12 @@ import { RecordService } from '@rero/ng-core';
 })
 export class FieldDocumentBriefViewTypeComponent extends FieldType implements OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+  private changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);
+
   /** record */
   record: any;
 
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param changeDetectorRef - ChangeDetectorRef
-   */
-  constructor(
-    private recordService: RecordService,
-    private changeDetectorRef: ChangeDetectorRef
-  ) {
-    super();
-  }
-
   /** OnInit hook */
   ngOnInit(): void {
     this.recordService
diff --git a/projects/admin/src/app/acquisition/formly/type/field-ref.type.ts b/projects/admin/src/app/acquisition/formly/type/field-ref.type.ts
index e9d49db25..d86001b1e 100644
--- a/projects/admin/src/app/acquisition/formly/type/field-ref.type.ts
+++ b/projects/admin/src/app/acquisition/formly/type/field-ref.type.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
 import { FieldType } from '@ngx-formly/core';
 import { RecordService } from '@rero/ng-core';
 
@@ -28,18 +28,12 @@ import { RecordService } from '@rero/ng-core';
 })
 export class FieldRefTypeComponent extends FieldType implements OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+  private ref: ChangeDetectorRef = inject(ChangeDetectorRef);
+
   /** value */
   value: string;
 
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param ref - ChangeDetectorRef
-   */
-  constructor(private recordService: RecordService, private ref: ChangeDetectorRef) {
-    super();
-  }
-
   /** OnInit hook */
   ngOnInit(): void {
     this.recordService.getRecords(this.props.resource, `pid:${this.model[this.props.resourceKey]}`)
diff --git a/projects/admin/src/app/acquisition/formly/type/repeat-section.type.ts b/projects/admin/src/app/acquisition/formly/type/repeat-section.type.ts
index 9cbeb42ac..c44184c87 100644
--- a/projects/admin/src/app/acquisition/formly/type/repeat-section.type.ts
+++ b/projects/admin/src/app/acquisition/formly/type/repeat-section.type.ts
@@ -20,6 +20,74 @@ import { FieldArrayType } from '@ngx-formly/core';
 @Component({
   selector: 'admin-formly-repeat-section',
   template: `
+    <p-card>
+      <ng-template pTemplate="header">
+        @if (field.props.label || field.props.addButton) {
+          <label class="col" [ngClass]="field.props.className">
+            @if (field.props.label) {
+              <span>{{ field.props.label|translate }}</span>
+            }
+            @if (field.props.addButton) {
+              <button type="button"
+                      class="btn btn-link text-secondary btn-sm ng-star-inserted"
+                      (click)="add()">
+                <i class="fa fa-clone"></i>
+              </button>
+            }
+            @if (field.props.selectUnselect) {
+              <div class="ml-3 d-inline font-weight-normal">
+                <a class="mr-1" (click)="field.props.selectUnselect($event, 'select', field.fieldGroup)" translate>
+                  Select all
+                </a>
+                |
+                <a class="ml-1" (click)="field.props.selectUnselect($event, 'unselect', field.fieldGroup)" translate>
+                  Deselect all
+                </a>
+              </div>
+            }
+          </label>
+        }
+      </ng-template>
+      @if (field.fieldGroup.length > 0) {
+        <div class="card-body">
+          <div class="row">
+            <div [ngClass]="field.props.trashButton ? 'col-11': 'col-12'">
+              <div class="row">
+                @for (field of field.fieldGroup[0].fieldGroup; track field) {
+                  @if (field.className) {
+                    <div class="{{ field.props.headerClassName }}">
+                      {{ field.props.label|translate }}
+                      @if (field.props.required) {
+                        &nbsp;*
+                      }
+                    </div>
+                  }
+                }
+              </div>
+            </div>
+          </div>
+          @for (f of field.fieldGroup; track f; let i = $index) {
+            <div class="row" [ngClass]="{ 'bg-light': i % 2 }">
+              @if (f.fieldGroup.length > 0) {
+                <formly-field class="col" [field]="f"></formly-field>
+                @if (field.props.trashButton) {
+                  <div class="col-1 d-flex align-items-center">
+                    @if (showTrash) {
+                      <button class="btn btn-link text-secondary btn-sm" type="button" (click)="remove(i)">
+                        <i class="fa fa-trash"></i>
+                      </button>
+                    } @else {
+                      &nbsp;
+                    }
+                  </div>
+                }
+              }
+            </div>
+          }
+        </div>
+      }
+    </p-card>
+    <!--
     <div class="card my-2">
       <div class="card-header">
         @if (field.props.label || field.props.addButton) {
@@ -87,6 +155,7 @@ import { FieldArrayType } from '@ngx-formly/core';
         </div>
       }
     </div>
+    -->
   `
 })
 export class RepeatTypeComponent extends FieldArrayType {
diff --git a/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.ts b/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.ts
index f18c9d44c..be5c20722 100644
--- a/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.ts
+++ b/projects/admin/src/app/acquisition/formly/type/select-account/select-account.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
 import { IAcqAccount } from '@app/admin/acquisition/classes/account';
 import { FieldType } from '@ngx-formly/core';
 import { ApiService } from '@rero/ng-core';
@@ -27,6 +27,9 @@ import { ApiService } from '@rero/ng-core';
 })
 export class SelectAccountComponent extends FieldType implements OnInit {
 
+  private changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);
+  private apiService: ApiService = inject(ApiService);
+
   /** accounts list */
   accountList: IAcqAccount[] = [];
   /** the selected account */
@@ -34,17 +37,6 @@ export class SelectAccountComponent extends FieldType implements OnInit {
   /** currency */
   currency: string;
 
-  /**
-   * Constructor
-   * @param changeDetectorRef - ChangeDetectorRef
-   * @param apiService - ApiService
-   */
-  constructor(
-    private changeDetectorRef: ChangeDetectorRef,
-    private apiService: ApiService) {
-    super();
-  }
-
   /** OnInit Hook */
   ngOnInit() {
     this.props.options.forEach((option: any) => this.accountList.push(option));
diff --git a/projects/admin/src/app/acquisition/routes/accounts-route.ts b/projects/admin/src/app/acquisition/routes/accounts-route.ts
index 8af7a7508..792df312a 100644
--- a/projects/admin/src/app/acquisition/routes/accounts-route.ts
+++ b/projects/admin/src/app/acquisition/routes/accounts-route.ts
@@ -57,7 +57,7 @@ export class AccountsRoute extends BaseRoute implements RouteInterface {
             key: this.name,
             label: _('Acquisition account'),
             detailComponent: AccountDetailViewComponent,
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             preCreateRecord: (data: any) => this._addDefaultInformation(data),
             redirectUrl: () => of('/acquisition/accounts'),
             formFieldMap: (field: FormlyFieldConfig, jsonSchema: JSONSchema7): FormlyFieldConfig => {
@@ -79,12 +79,12 @@ export class AccountsRoute extends BaseRoute implements RouteInterface {
    * @return the enrich data
    */
   private _addDefaultInformation(data: any): any {
-    const { user } = this._routeToolService.userService;
+    const { user } = this.routeToolService.userService;
     data.library = {
-      $ref: this._routeToolService.apiService.getRefEndpoint('libraries', user.currentLibrary)
+      $ref: this.routeToolService.apiService.getRefEndpoint('libraries', user.currentLibrary)
     };
     data.budget = {
-      $ref: this._routeToolService.apiService.getRefEndpoint('budgets', this._routeToolService.getRouteQueryParam('budget'))
+      $ref: this.routeToolService.apiService.getRefEndpoint('budgets', this.routeToolService.getRouteQueryParam('budget'))
     };
     return data;
   }
@@ -95,7 +95,7 @@ export class AccountsRoute extends BaseRoute implements RouteInterface {
    * @return The updated configuration.
    */
   private _amountSymbol(field: FormlyFieldConfig): FormlyFieldConfig {
-    const service = this._routeToolService.getInjectorToken(OrganisationService);
+    const service = this.routeToolService.getInjectorToken(OrganisationService);
     if (service.organisation) {
       field.props.addonLeft = [
         getCurrencySymbol(service.organisation.default_currency, 'wide')
diff --git a/projects/admin/src/app/acquisition/routes/budgets-route.ts b/projects/admin/src/app/acquisition/routes/budgets-route.ts
index 6d503367e..1b228731c 100644
--- a/projects/admin/src/app/acquisition/routes/budgets-route.ts
+++ b/projects/admin/src/app/acquisition/routes/budgets-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2022 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021-2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,11 +15,11 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { BaseRoute } from '@app/admin/routes/base-route';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { DetailComponent, RecordSearchPageComponent, RouteInterface } from '@rero/ng-core';
 import { PERMISSIONS, PERMISSION_OPERATOR } from '@rero/shared';
-import { BaseRoute } from '@app/admin/routes/base-route';
-import { CanAccessGuard, CAN_ACCESS_ACTIONS } from '../../guard/can-access.guard';
+import { CAN_ACCESS_ACTIONS, CanAccessGuard } from '../../guard/can-access.guard';
 import { PermissionGuard } from '../../guard/permission.guard';
 import { BudgetsBriefViewComponent } from '../components/budget/budget-brief-view/budgets-brief-view.component';
 import { BudgetDetailViewComponent } from '../components/budget/budget-detail-view/budget-detail-view.component';
diff --git a/projects/admin/src/app/acquisition/routes/guards/abstract-can-add.guard.ts b/projects/admin/src/app/acquisition/routes/guards/abstract-can-add.guard.ts
index 94e402d70..a9e8f17f9 100644
--- a/projects/admin/src/app/acquisition/routes/guards/abstract-can-add.guard.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/abstract-can-add.guard.ts
@@ -14,6 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { inject } from '@angular/core';
 import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { RecordService } from '@rero/ng-core';
 import { BaseApi } from '@rero/shared';
@@ -22,15 +23,8 @@ import { catchError, map } from 'rxjs/operators';
 
 export abstract class AbstractCanAddGuard {
 
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param router - Router
-   */
-   protected constructor(
-    protected recordService: RecordService,
-    protected router: Router
-  ) {}
+  protected recordService: RecordService = inject(RecordService);
+  protected router: Router = inject(Router);
 
   /**
    * Allow to access to the resource
diff --git a/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.spec.ts b/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.spec.ts
index d08cfc889..0ee6f21e4 100644
--- a/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.spec.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,11 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { Router, RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { ErrorPageComponent } from '../../../error/error-page/error-page.component';
 import { CanAddAccountGuard } from './can-add-account.guard';
@@ -40,7 +38,7 @@ describe('CanAddAccountGuard', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule.withRoutes(routes),
+        RouterModule.forRoot(routes),
         HttpClientTestingModule,
         TranslateModule.forRoot()
       ]
diff --git a/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.ts b/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.ts
index 09aed693d..35fd4b596 100644
--- a/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/can-add-account.guard.ts
@@ -15,8 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Router } from '@angular/router';
-import { RecordService } from '@rero/ng-core';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { AbstractCanAddGuard } from './abstract-can-add.guard';
 
@@ -25,18 +24,6 @@ import { AbstractCanAddGuard } from './abstract-can-add.guard';
 })
 export class CanAddAccountGuard extends AbstractCanAddGuard  {
 
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param router - Router
-   */
-   constructor(
-    recordService: RecordService,
-    router: Router
-  ) {
-    super(recordService, router);
-  }
-
   /**
    * Allow the loading if the budget pid is present and check
    * if the record is in current fiscal year
diff --git a/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.spec.ts b/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.spec.ts
index f9ca75002..cf091ecca 100644
--- a/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.spec.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,18 +14,16 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Router, RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { CoreModule, RecordService } from '@rero/ng-core';
-import { ErrorPageComponent } from '../../../error/error-page/error-page.component';
-
 import { cloneDeep } from 'lodash-es';
-import { CanAddOrderLineGuard } from './can-add-order-line.guard';
 import { of, throwError } from 'rxjs';
-import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { ErrorPageComponent } from '../../../error/error-page/error-page.component';
+import { CanAddOrderLineGuard } from './can-add-order-line.guard';
 
 describe('CanAddOrderLineGuard', () => {
   let guard: CanAddOrderLineGuard;
@@ -61,7 +59,7 @@ describe('CanAddOrderLineGuard', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule.withRoutes(routes),
+        RouterModule.forRoot(routes),
         HttpClientTestingModule,
         TranslateModule.forRoot(),
         CoreModule
diff --git a/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.ts b/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.ts
index fc419e6db..586c09b88 100644
--- a/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/can-add-order-line.guard.ts
@@ -15,8 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, Router } from '@angular/router';
-import { RecordService } from '@rero/ng-core';
+import { ActivatedRouteSnapshot } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { AbstractCanAddGuard } from './abstract-can-add.guard';
 
@@ -25,18 +24,6 @@ import { AbstractCanAddGuard } from './abstract-can-add.guard';
 })
 export class CanAddOrderLineGuard extends AbstractCanAddGuard  {
 
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param router - Router
-   */
-   constructor(
-    recordService: RecordService,
-    router: Router
-  ) {
-    super(recordService, router);
-  }
-
   /**
    * Allow the loading if the order pid is present and check
    * if the record is in current fiscal year
diff --git a/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.spec.ts b/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.spec.ts
index 242955093..0957e3c6a 100644
--- a/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.spec.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,8 +17,7 @@
 
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Router, RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { CoreModule } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
@@ -105,7 +104,7 @@ describe('CanOrderReceiptGuard', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule.withRoutes(routes),
+        RouterModule.forRoot(routes),
         HttpClientTestingModule,
         TranslateModule.forRoot(),
         CoreModule
diff --git a/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.ts b/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.ts
index acaaecd60..4c4c661cf 100644
--- a/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/can-order-receipt.guard.ts
@@ -14,11 +14,11 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { extractIdOnRef } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
-import { Observable, combineLatest, of } from 'rxjs';
+import { combineLatest, Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { AcqOrderApiService } from '../../api/acq-order-api.service';
 import { AcqReceiptApiService } from '../../api/acq-receipt-api.service';
@@ -30,19 +30,10 @@ import { IAcqReceipt } from '../../classes/receipt';
 })
 export class CanOrderReceiptGuard  {
 
-  /**
-   * Constructor
-   * @param acqOrderApiService - AcqOrderApiService
-   * @param acqReceiptApiService - AcqReceiptApiService
-   * @param router - Router
-   * @param userService - UserService
-   */
-  constructor(
-    private acqOrderApiService: AcqOrderApiService,
-    private acqReceiptApiService: AcqReceiptApiService,
-    private router: Router,
-    private userService: UserService
-  ) {}
+  private acqOrderApiService: AcqOrderApiService = inject(AcqOrderApiService);
+  private acqReceiptApiService: AcqReceiptApiService = inject(AcqReceiptApiService);
+  private router: Router = inject(Router);
+  private userService: UserService = inject(UserService);
 
   /**
    * Can activate
diff --git a/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.spec.ts b/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.spec.ts
index 8f596871a..7fb90fbee 100644
--- a/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.spec.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,8 +16,7 @@
  */
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Router, RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { CoreModule, RecordService } from '@rero/ng-core';
 import { cloneDeep } from 'lodash-es';
@@ -65,7 +64,7 @@ describe('IsBudgetActiveGuard', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule.withRoutes(routes),
+        RouterModule.forRoot(routes),
         HttpClientTestingModule,
         TranslateModule.forRoot(),
         CoreModule
diff --git a/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.ts b/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.ts
index 565003807..230f4e0a4 100644
--- a/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.ts
+++ b/projects/admin/src/app/acquisition/routes/guards/is-budget-active.guard.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { RecordService } from '@rero/ng-core';
 import { BaseApi } from '@rero/shared';
@@ -26,15 +26,8 @@ import { map } from 'rxjs/operators';
 })
 export class IsBudgetActiveGuard  {
 
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param router - Router
-   */
-  constructor(
-    private recordService: RecordService,
-    private router: Router
-  ) {}
+  private recordService: RecordService = inject(RecordService);
+  private router: Router = inject(Router);
 
   /**
    * Can activate
diff --git a/projects/admin/src/app/acquisition/routes/order-lines-route.ts b/projects/admin/src/app/acquisition/routes/order-lines-route.ts
index 7b514ea66..f4a790be6 100644
--- a/projects/admin/src/app/acquisition/routes/order-lines-route.ts
+++ b/projects/admin/src/app/acquisition/routes/order-lines-route.ts
@@ -52,8 +52,8 @@ export class OrderLinesRoute extends BaseRoute implements RouteInterface {
             editorSettings: {
               longMode: true,
             },
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.ACOL_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType, true),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.ACOL_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType, true),
             preCreateRecord: (data: any) => this._addDefaultInformation(data),
             preUpdateRecord: (data: any) => this.fieldsToRemoved(data, ['is_current_budget']),
             redirectUrl: (record: any) => this.redirectUrl(record.metadata.acq_order, '/records/acq_orders/detail'),
@@ -77,7 +77,7 @@ export class OrderLinesRoute extends BaseRoute implements RouteInterface {
    */
   private _addDefaultInformation(data: any): any {
     data.acq_order = {
-      $ref: this._routeToolService.apiService.getRefEndpoint('acq_orders', this._routeToolService.getRouteQueryParam('order'))
+      $ref: this.routeToolService.apiService.getRefEndpoint('acq_orders', this.routeToolService.getRouteQueryParam('order'))
     };
     return data;
   }
@@ -90,7 +90,7 @@ export class OrderLinesRoute extends BaseRoute implements RouteInterface {
   private _amountSymbol(field: FormlyFieldConfig): FormlyFieldConfig {
     // TODO :: This isn't the organisation currency that we need to use, it's the order related vendor currency
     //         But how to retrieve the order from here ??? and how get quickly currency to use into
-    const service = this._routeToolService.getInjectorToken(OrganisationService);
+    const service = this.routeToolService.getInjectorToken(OrganisationService);
     field.props.addonLeft = [
       getCurrencySymbol(service.organisation.default_currency, 'wide')
     ];
diff --git a/projects/admin/src/app/acquisition/routes/orders-route.ts b/projects/admin/src/app/acquisition/routes/orders-route.ts
index b9d62fd73..a94b06e93 100644
--- a/projects/admin/src/app/acquisition/routes/orders-route.ts
+++ b/projects/admin/src/app/acquisition/routes/orders-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -53,11 +53,11 @@ export class OrdersRoute extends BaseRoute implements RouteInterface {
             searchFilters: [
               this.expertSearchFilter()
             ],
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.ACOR_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType, true),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.ACOR_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType, true),
             preCreateRecord: (data: any) => this._addDefaultInformation(data),
             preUpdateRecord: (data: any) => this._cleanRecord(data),
-            aggregations: (aggregations: any) => this._routeToolService.aggregationFilter(aggregations),
+            aggregations: (aggregations: any) => this.routeToolService.aggregationFilter(aggregations),
             aggregationsExpand: [
               'library',
               'order_date',
@@ -112,7 +112,7 @@ export class OrdersRoute extends BaseRoute implements RouteInterface {
               {
                 label: 'CSV',
                 format: 'csv',
-                endpoint: this._routeToolService.apiService.getExportEndpointByType(this.recordType),
+                endpoint: this.routeToolService.apiService.getExportEndpointByType(this.recordType),
                 disableMaxRestResultsSize: true,
               },
             ],
@@ -128,12 +128,12 @@ export class OrdersRoute extends BaseRoute implements RouteInterface {
    * @return: the enrich data
    */
   private _addDefaultInformation(data: any): any {
-    const user = this._routeToolService.userService.user;
+    const user = this.routeToolService.userService.user;
     data.organisation = {
-      $ref: this._routeToolService.apiService.getRefEndpoint('organisations', user.currentOrganisation)
+      $ref: this.routeToolService.apiService.getRefEndpoint('organisations', user.currentOrganisation)
     };
     data.library = {
-      $ref: this._routeToolService.apiService.getRefEndpoint('libraries', user.currentLibrary)
+      $ref: this.routeToolService.apiService.getRefEndpoint('libraries', user.currentLibrary)
     };
     return data;
   }
diff --git a/projects/admin/src/app/acquisition/routes/receipt-lines-route.ts b/projects/admin/src/app/acquisition/routes/receipt-lines-route.ts
index 3f022de87..d1a0b29ca 100644
--- a/projects/admin/src/app/acquisition/routes/receipt-lines-route.ts
+++ b/projects/admin/src/app/acquisition/routes/receipt-lines-route.ts
@@ -48,9 +48,9 @@ export class ReceiptLinesRoute extends BaseRoute implements RouteInterface {
             editorSettings: {
               longMode: true,
             },
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.ACRL_CREATE) }),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.ACRL_CREATE) }),
             preUpdateRecord: (data: any) => this.fieldsToRemoved(data, ['is_current_budget']),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType, true),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType, true),
             redirectUrl: (record: any) => this.redirectUrl(record.metadata.acq_receipt, '/records/acq_receipts/detail'),
             formFieldMap: (field: FormlyFieldConfig, jsonSchema: JSONSchema7): FormlyFieldConfig => {
               const formWidget = jsonSchema.widget;
@@ -74,7 +74,7 @@ export class ReceiptLinesRoute extends BaseRoute implements RouteInterface {
   private _amountSymbol(field: FormlyFieldConfig): FormlyFieldConfig {
     // TODO :: This isn't the organisation currency that we need to use, it's the order related vendor currency
     //         But how to retrieve the order from here ??? and how get quickly currency to use into
-    const service = this._routeToolService.getInjectorToken(OrganisationService);
+    const service = this.routeToolService.getInjectorToken(OrganisationService);
     field.props.addonLeft = [
       getCurrencySymbol(service.organisation.default_currency, 'wide')
     ];
diff --git a/projects/admin/src/app/acquisition/routes/receipts-route.ts b/projects/admin/src/app/acquisition/routes/receipts-route.ts
index 1a07f2c88..55d440b84 100644
--- a/projects/admin/src/app/acquisition/routes/receipts-route.ts
+++ b/projects/admin/src/app/acquisition/routes/receipts-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -53,8 +53,8 @@ export class ReceiptsRoute extends BaseRoute implements RouteInterface {
               this.expertSearchFilter()
             ],
             preUpdateRecord: (data: any) => this._cleanRecord(data),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType, true),
-            aggregations: (aggregations: any) => this._routeToolService.aggregationFilter(aggregations),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType, true),
+            aggregations: (aggregations: any) => this.routeToolService.aggregationFilter(aggregations),
             aggregationsBucketSize: 10,
             itemHeaders: {
               Accept: 'application/rero+json, application/json'
diff --git a/projects/admin/src/app/api/circulation-policy-api.service.ts b/projects/admin/src/app/api/circulation-policy-api.service.ts
index 93a9c0b76..b03e0d08e 100644
--- a/projects/admin/src/app/api/circulation-policy-api.service.ts
+++ b/projects/admin/src/app/api/circulation-policy-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -24,11 +24,7 @@ import { map } from 'rxjs/operators';
 })
 export class CirculationPolicyApiService {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) {}
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Get All
@@ -37,7 +33,7 @@ export class CirculationPolicyApiService {
    */
   getAll(excludedPid?: string): Observable<any[]> {
     const query = excludedPid ? `NOT pid:${excludedPid}` : '';
-    return this._recordService
+    return this.recordService
       .getRecords('circ_policies', query, 1, RecordService.MAX_REST_RESULTS_SIZE)
       .pipe(map((response: Record) => response.hits.hits));
   }
diff --git a/projects/admin/src/app/api/document-api.service.ts b/projects/admin/src/app/api/document-api.service.ts
index acc792da7..82ae12960 100644
--- a/projects/admin/src/app/api/document-api.service.ts
+++ b/projects/admin/src/app/api/document-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { IAvailability, IAvailabilityService } from '@rero/shared';
 import { Observable } from 'rxjs';
@@ -29,28 +29,20 @@ import { IAdvancedSearchConfig } from '../record/search-view/document-advanced-s
 })
 export class DocumentApiService implements IAvailabilityService {
 
+  private recordService: RecordService = inject(RecordService);
+  private httpClient: HttpClient = inject(HttpClient);
+  private appConfigService: AppConfigService = inject(AppConfigService);
+
   /** Resource name */
   readonly RESOURCE_NAME = 'documents';
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   * @param _httpClient - HttpClient
-   * @param _appConfigService - AppConfigService
-   */
-  constructor(
-    private _recordService: RecordService,
-    private _httpClient: HttpClient,
-    private _appConfigService: AppConfigService
-  ) { }
-
   /**
    * Get count of linked document(s) from current document (partOf)
    * @param documentPid - document pid
    * @returns Observable<int>
    */
   getLinkedDocumentsCount(documentPid: string): Observable<number> {
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       this.RESOURCE_NAME, `partOf.document.pid:${documentPid}`, 1, 1
     ).pipe(map((result: Record) => result.hits.total.value));
   }
@@ -61,8 +53,8 @@ export class DocumentApiService implements IAvailabilityService {
    * @returns Observable of availability data
    */
   getAvailability(pid: string): Observable<IAvailability> {
-    const url = `${this._appConfigService.apiEndpointPrefix}/document/${pid}/availability`;
-    return this._httpClient.get<IAvailability>(url);
+    const url = `${this.appConfigService.apiEndpointPrefix}/document/${pid}/availability`;
+    return this.httpClient.get<IAvailability>(url);
   }
 
   /**
@@ -70,7 +62,7 @@ export class DocumentApiService implements IAvailabilityService {
    * @returns The advanced Search config
    */
   getAdvancedSearchConfig(): Observable<IAdvancedSearchConfig> {
-    const url = `${this._appConfigService.apiEndpointPrefix}/document/advanced-search-config`;
-    return this._httpClient.get<IAdvancedSearchConfig>(url);
+    const url = `${this.appConfigService.apiEndpointPrefix}/document/advanced-search-config`;
+    return this.httpClient.get<IAdvancedSearchConfig>(url);
   }
 }
diff --git a/projects/admin/src/app/api/holdings-api.service.ts b/projects/admin/src/app/api/holdings-api.service.ts
index 327169904..032d95de5 100644
--- a/projects/admin/src/app/api/holdings-api.service.ts
+++ b/projects/admin/src/app/api/holdings-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { BaseApi } from '@rero/shared';
 import { Observable } from 'rxjs';
@@ -25,18 +25,14 @@ import { map } from 'rxjs/operators';
 })
 export class HoldingsApiService {
 
-  /** Ressource name */
+  private recordService: RecordService = inject(RecordService);
+
+  /** Resource name */
   readonly RESOURCE_NAME = 'holdings';
 
   /** Items per page */
   readonly ITEMS_PER_PAGE = 10;
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) { }
-
   /**
    *
    * @param documentPid - Document pid
@@ -56,7 +52,7 @@ export class HoldingsApiService {
     order: string = 'organisation_library_location'
   ): Observable<any> {
     const query = this._queryOrganisation(documentPid, organisationPid, isCurrentOrganisation);
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       this.RESOURCE_NAME, query, page, itemsPerPage, undefined, undefined, BaseApi.reroJsonheaders, order).pipe(
       map((result: Record) => result.hits.hits)
     );
@@ -71,8 +67,8 @@ export class HoldingsApiService {
    */
   getHoldingsCount(documentPid: string, organisationPid: string, isCurrentOrganisation: boolean = true): Observable<number> {
     const query = this._queryOrganisation(documentPid, organisationPid, isCurrentOrganisation);
-    return this._recordService.getRecords(this.RESOURCE_NAME, query, 1, 1).pipe(
-      map((result: Record) => this._recordService.totalHits(result.hits.total))
+    return this.recordService.getRecords(this.RESOURCE_NAME, query, 1, 1).pipe(
+      map((result: Record) => this.recordService.totalHits(result.hits.total))
     );
   }
 
diff --git a/projects/admin/src/app/api/ill-request-api.service.ts b/projects/admin/src/app/api/ill-request-api.service.ts
index 279c81e23..b764b3f92 100644
--- a/projects/admin/src/app/api/ill-request-api.service.ts
+++ b/projects/admin/src/app/api/ill-request-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,29 +15,22 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
+import { BaseApi } from '@rero/shared';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { ILLRequestStatus } from '../classes/ill-request';
-import { BaseApi } from '@rero/shared';
 
 @Injectable({
   providedIn: 'root'
 })
 export class IllRequestApiService extends BaseApi {
 
+  private recordService: RecordService = inject(RecordService);
+
   /** Resource name */
   readonly RESOURCE_NAME = 'ill_requests';
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) {
-    super();
-  }
-
   /**
    * Get ills requests with pending status by patron pid
    * @param patronPid - The patron pid
@@ -50,7 +43,7 @@ export class IllRequestApiService extends BaseApi {
     sort: string = '-created'
   ): Observable<Record | Error> {
     const query = `patron.pid:${patronPid}`;
-    return this._recordService
+    return this.recordService
       .getRecords(this.RESOURCE_NAME, query , 1, RecordService.MAX_REST_RESULTS_SIZE,
                   undefined, filters, BaseApi.reroJsonheaders, sort)
       .pipe(map((result: Record) => result.hits.hits));
diff --git a/projects/admin/src/app/api/import-source-api.service.ts b/projects/admin/src/app/api/import-source-api.service.ts
index eeec6045c..959000d1b 100644
--- a/projects/admin/src/app/api/import-source-api.service.ts
+++ b/projects/admin/src/app/api/import-source-api.service.ts
@@ -1,7 +1,7 @@
 /*
  * RERO ILS UI
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
- * Copyright (C) 2021 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,7 +17,7 @@
  */
 
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { ExternalSourceSetting } from '../classes/external-source';
@@ -27,20 +27,14 @@ import { ExternalSourceSetting } from '../classes/external-source';
 })
 export class ImportSourceApiService {
 
-  /**
-   * Constructor
-   * @param _httpClient - HttpClient
-   */
-  constructor(
-    private _httpClient: HttpClient
-  ) { }
+  private httpClient: HttpClient = inject(HttpClient);
 
   /**
    * Get the configuration entrypoint for external sources
    * @return: an Observable on external sources list
    */
   getSources(): Observable<Array<ExternalSourceSetting>> {
-    return this._httpClient
+    return this.httpClient
       .get('/api/imports/config/')
       .pipe(
         map((sources: any[]) => sources.map(data => new ExternalSourceSetting(data))),
diff --git a/projects/admin/src/app/api/item-api.service.ts b/projects/admin/src/app/api/item-api.service.ts
index 561b8e606..3bf292c4f 100644
--- a/projects/admin/src/app/api/item-api.service.ts
+++ b/projects/admin/src/app/api/item-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ApiService, Error, RecordService } from '@rero/ng-core';
 import { IAvailability, IAvailabilityService } from '@rero/shared';
 import { Observable, of } from 'rxjs';
@@ -29,32 +29,22 @@ import { ITypeEmail } from '../shared/preview-email/IPreviewInterface';
 })
 export class ItemApiService implements IAvailabilityService {
 
+  private appConfigService: AppConfigService = inject(AppConfigService);
+  private apiService: ApiService = inject(ApiService);
+  private recordService: RecordService = inject(RecordService);
+  private httpClient: HttpClient = inject(HttpClient);
+
   // SERVICE ATTRIBUTES =======================================================
   /** resource name */
   static readonly RESOURCE_NAME = 'items';
 
   /** http client options */
-  private _httpOptions = {
+  private httpClientOptions = {
     headers: new HttpHeaders({
       'Content-Type':  'application/json'
     })
   };
 
-  // CONSTRUCTOR ==============================================================
-  /**
-   * Constructor
-   * @param _appConfigService: AppConfigService
-   * @param _apiService - ApiService
-   * @param _recordService - RecordService
-   * @param _http - HttpClient
-   */
-  constructor(
-    private _appConfigService: AppConfigService,
-    private _apiService: ApiService,
-    private _recordService: RecordService,
-    private _http: HttpClient
-  ){ }
-
   // SERVICE FUNCTIONS ========================================================
   /**
    * Get an Item through the REST-API
@@ -63,7 +53,7 @@ export class ItemApiService implements IAvailabilityService {
    * @returns: an `Observable` on REST-API item metadata result
    */
   getItem(pid: string, resolve: boolean = false): Observable<any> {
-    return this._recordService
+    return this.recordService
       .getRecord(ItemApiService.RESOURCE_NAME, pid, resolve ? 1 : 0)
       .pipe(
         map((result: any) => result.metadata)
@@ -76,8 +66,8 @@ export class ItemApiService implements IAvailabilityService {
    * @param newLocationPid: the new owning location pid
    */
   updateLocation(item: any, newLocationPid: string): Observable<Object | Error> {
-    item.location.$ref = this._apiService.getRefEndpoint('locations', newLocationPid);
-    return this._recordService.update(ItemApiService.RESOURCE_NAME, item.pid, item);
+    item.location.$ref = this.apiService.getRefEndpoint('locations', newLocationPid);
+    return this.recordService.update(ItemApiService.RESOURCE_NAME, item.pid, item);
   }
 
   /**
@@ -86,7 +76,7 @@ export class ItemApiService implements IAvailabilityService {
    * @returns Observable of the stats of item
    */
   getStatsByItemPid(itemPid: string): Observable<any> {
-    return this._http.get<any>(`${this._appConfigService.apiEndpointPrefix}/item/${itemPid}/stats`);
+    return this.httpClient.get<any>(`${this.appConfigService.apiEndpointPrefix}/item/${itemPid}/stats`);
   }
 
   /**
@@ -95,9 +85,9 @@ export class ItemApiService implements IAvailabilityService {
    * @returns Observable of the Preview of a claim and suggested email addresses.
    */
   getPreviewByItemPid(itemPid: string): Observable<any> {
-    return this._http.get<any>(
-      `${this._appConfigService.apiEndpointPrefix}/item/${itemPid}/issue/claims/preview`,
-      this._httpOptions
+    return this.httpClient.get<any>(
+      `${this.appConfigService.apiEndpointPrefix}/item/${itemPid}/issue/claims/preview`,
+      this.httpClientOptions
     ).pipe(catchError((err: any) => of({ error: err.error.message })));
   }
 
@@ -108,8 +98,8 @@ export class ItemApiService implements IAvailabilityService {
    * @returns Observable with boolean
    */
   addClaimIssue(itemPid: string, recipients: ITypeEmail[]): Observable<boolean> {
-    const apiUrl = `${this._appConfigService.apiEndpointPrefix}/item/${itemPid}/issue/claims`;
-    return this._http.post(apiUrl, {recipients}).pipe(
+    const apiUrl = `${this.appConfigService.apiEndpointPrefix}/item/${itemPid}/issue/claims`;
+    return this.httpClient.post(apiUrl, {recipients}).pipe(
       map((_: unknown) => true),
       catchError(() => of(false))
     );
@@ -121,7 +111,7 @@ export class ItemApiService implements IAvailabilityService {
    * @returns Observable of availability data
    */
   getAvailability(pid: string): Observable<IAvailability> {
-    const url = `${this._appConfigService.apiEndpointPrefix}/item/${pid}/availability?more_info=1`;
-    return this._http.get<IAvailability>(url);
+    const url = `${this.appConfigService.apiEndpointPrefix}/item/${pid}/availability?more_info=1`;
+    return this.httpClient.get<IAvailability>(url);
   }
 }
diff --git a/projects/admin/src/app/api/item-type-api.service.ts b/projects/admin/src/app/api/item-type-api.service.ts
index e032de28b..bd79ec9d2 100644
--- a/projects/admin/src/app/api/item-type-api.service.ts
+++ b/projects/admin/src/app/api/item-type-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { map } from 'rxjs/operators';
 
@@ -23,18 +23,14 @@ import { map } from 'rxjs/operators';
 })
 export class ItemTypeApiService {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) {}
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Get All
    * @return Observable, array of records
    */
   getAll() {
-    return this._recordService
+    return this.recordService
       .getRecords('item_types', '', 1, RecordService.MAX_REST_RESULTS_SIZE)
       .pipe(map((response: Record) => response.hits.hits));
   }
diff --git a/projects/admin/src/app/api/library-api.service.ts b/projects/admin/src/app/api/library-api.service.ts
index 9684918d2..ebb4f13dd 100644
--- a/projects/admin/src/app/api/library-api.service.ts
+++ b/projects/admin/src/app/api/library-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import moment from 'moment';
 import { Observable } from 'rxjs';
@@ -27,15 +27,8 @@ import { map } from 'rxjs/operators';
 })
 export class LibraryApiService {
 
-  /**
-   * constructor
-   * @param http - HttpClient
-   * @param recordService - RecordService
-   */
-  constructor(
-    private http: HttpClient,
-    private recordService: RecordService
-  ) { }
+  private http: HttpClient = inject(HttpClient);
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Get library by pid
diff --git a/projects/admin/src/app/api/loan-api.service.ts b/projects/admin/src/app/api/loan-api.service.ts
index 4e127477c..038c1c702 100644
--- a/projects/admin/src/app/api/loan-api.service.ts
+++ b/projects/admin/src/app/api/loan-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { LoanOverduePreview } from '../classes/loans';
 
@@ -24,14 +24,7 @@ import { LoanOverduePreview } from '../classes/loans';
 })
 export class LoanApiService {
 
-  /**
-   * Constructor
-   * @param _http - HttpClient
-   */
-  constructor(
-    private _http: HttpClient
-  ) {}
-
+  private httpClient: HttpClient = inject(HttpClient);
 
   /**
    * Get the preview overdue fees related to a specific loan
@@ -39,6 +32,6 @@ export class LoanApiService {
    */
   getPreviewOverdue(loanPid: string): Observable<LoanOverduePreview> {
     const url = `/api/loan/${loanPid}/overdue/preview`;
-    return this._http.get<LoanOverduePreview>(url);
+    return this.httpClient.get<LoanOverduePreview>(url);
   }
 }
diff --git a/projects/admin/src/app/api/local-field-api.service.ts b/projects/admin/src/app/api/local-field-api.service.ts
index 142580c00..8493f1c86 100644
--- a/projects/admin/src/app/api/local-field-api.service.ts
+++ b/projects/admin/src/app/api/local-field-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService, RecordUiService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -25,14 +25,8 @@ import { map } from 'rxjs/operators';
 })
 export class LocalFieldApiService {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(
-    private _recordService: RecordService,
-    private _recordUiService: RecordUiService
-  ) { }
+  private recordService: RecordService = inject(RecordService);
+  private recordUiService: RecordUiService = inject(RecordUiService);
 
   /**
    * Get Local field for current resource and organisation user
@@ -44,11 +38,11 @@ export class LocalFieldApiService {
   getByResourceTypeAndResourcePidAndOrganisationId(resourceType: string, resourcePid: string, organisationPid: string): Observable<any> {
     const query = `parent.type:${resourceType} AND parent.pid:${resourcePid} AND organisation.pid:${organisationPid}`;
 
-    return this._recordService
+    return this.recordService
       .getRecords('local_fields', query, 1, 1)
       .pipe(
         map((result: Record) => {
-          return this._recordService.totalHits(result.hits.total) === 0
+          return this.recordService.totalHits(result.hits.total) === 0
             ? {}
             : result.hits.hits[0];
         })
@@ -61,6 +55,6 @@ export class LocalFieldApiService {
    * @return Observable
    */
   delete(resourcePid: string) {
-    return this._recordUiService.deleteRecord('local_fields', resourcePid);
+    return this.recordUiService.deleteRecord('local_fields', resourcePid);
   }
 }
diff --git a/projects/admin/src/app/api/notification-api.service.ts b/projects/admin/src/app/api/notification-api.service.ts
index 57b35022b..40b088d2d 100644
--- a/projects/admin/src/app/api/notification-api.service.ts
+++ b/projects/admin/src/app/api/notification-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
+ * Copyright (C) 2023-2024 RERO
  * Copyright (C) 2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { BaseApi } from '@rero/shared';
 import { map } from 'rxjs/operators';
@@ -25,19 +25,13 @@ import { map } from 'rxjs/operators';
 })
 export class NotificationApiService extends BaseApi {
 
+  private recordService: RecordService = inject(RecordService);
+
   /** Resource name */
   readonly RESOURCE_NAME = 'notifications';
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) {
-    super();
-  }
-
   getNotificationByPid(pid: string): any {
-    return this._recordService.getRecord(this.RESOURCE_NAME, pid).pipe(
+    return this.recordService.getRecord(this.RESOURCE_NAME, pid).pipe(
       map((result: any) => result.metadata)
     );
   }
diff --git a/projects/admin/src/app/api/operation-logs-api.service.ts b/projects/admin/src/app/api/operation-logs-api.service.ts
index d0b5dbff6..4eca6a7ac 100644
--- a/projects/admin/src/app/api/operation-logs-api.service.ts
+++ b/projects/admin/src/app/api/operation-logs-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { Error } from '@rero/ng-core/lib/error/error';
 import { BaseApi } from '@rero/shared';
@@ -28,13 +28,7 @@ import { map } from 'rxjs/operators';
 })
 export class OperationLogsApiService extends BaseApi {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) {
-    super();
-  }
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Get Operation logs by resource type and resource pid
@@ -50,7 +44,7 @@ export class OperationLogsApiService extends BaseApi {
     resourceType: string, resourcePid: string, action: 'create'|'update',
     page: number, itemPerPage = 5, sort = 'mostrecent'): Observable<Record | Error> {
     const query = `record.type:${resourceType} AND record.value:${resourcePid} AND operation:${action}`;
-    return this._recordService.getRecords('operation_logs', query, page, itemPerPage, undefined, undefined, BaseApi.reroJsonheaders, sort);
+    return this.recordService.getRecords('operation_logs', query, page, itemPerPage, undefined, undefined, BaseApi.reroJsonheaders, sort);
   }
 
   /**
@@ -84,7 +78,7 @@ export class OperationLogsApiService extends BaseApi {
       });
       query.push(`(${typeFilters.join(' OR ')})`);
     }
-    return this._recordService.getRecords('operation_logs', query.join(' AND '), page, itemPerPage, undefined, undefined, undefined, sort);
+    return this.recordService.getRecords('operation_logs', query.join(' AND '), page, itemPerPage, undefined, undefined, undefined, sort);
   }
 
   /**
@@ -97,7 +91,7 @@ export class OperationLogsApiService extends BaseApi {
    getCheckInHistory(patronPid: string, page: number, itemsPerPage: number = 10): Observable<Record | Error> {
     const date = moment().subtract(6, 'months').utc().format('YYYY-MM-DDTHH:mm:ss');
     const query = `_exists_:loan AND record.type:loan AND loan.patron.pid:${patronPid} AND loan.trigger:checkin AND date:[${date} TO *]`;
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       'operation_logs', query, page, itemsPerPage, undefined, undefined, BaseApi.reroJsonheaders, 'mostrecent');
   }
 
@@ -109,9 +103,9 @@ export class OperationLogsApiService extends BaseApi {
    */
   getHistoryByLoanPid(loanPid: string, type: string = 'checkin'): Observable<Record | Error> {
     const query = `_exists_:loan AND loan.pid:${loanPid} AND loan.trigger:${type} AND record.type:loan`;
-    return this._recordService.getRecords('operation_logs', query, 1, 1, undefined, undefined, BaseApi.reroJsonheaders)
+    return this.recordService.getRecords('operation_logs', query, 1, 1, undefined, undefined, BaseApi.reroJsonheaders)
       .pipe(map((result: any) => {
-        return this._recordService.totalHits(result.hits.total) === 1
+        return this.recordService.totalHits(result.hits.total) === 1
           ? result.hits.hits[0]
           : {};
       }));
diff --git a/projects/admin/src/app/api/organisation-api.service.ts b/projects/admin/src/app/api/organisation-api.service.ts
index 501f2205c..63b28a512 100644
--- a/projects/admin/src/app/api/organisation-api.service.ts
+++ b/projects/admin/src/app/api/organisation-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -25,11 +25,7 @@ import { map } from 'rxjs/operators';
 })
 export class OrganisationApiService {
 
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   */
-  constructor(private recordService: RecordService) { }
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Get Organisation by pid
diff --git a/projects/admin/src/app/api/patron-transaction-api.service.ts b/projects/admin/src/app/api/patron-transaction-api.service.ts
index de3106b2a..5205a52ec 100644
--- a/projects/admin/src/app/api/patron-transaction-api.service.ts
+++ b/projects/admin/src/app/api/patron-transaction-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022-2023 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ApiService, Record, RecordService } from '@rero/ng-core';
 import { Observable, map } from 'rxjs';
 import { FeeFormModel } from '../circulation/patron/patron-transactions/patron-fee/patron-fee.component';
@@ -25,22 +25,16 @@ import { FeeFormModel } from '../circulation/patron/patron-transactions/patron-f
 })
 export class PatronTransactionApiService {
 
-  /**
-   * Constructor
-   * @param _httpClient - HttpClient
-   */
-  constructor(
-    private _httpClient: HttpClient,
-    private _apiService: ApiService,
-    private recordService: RecordService
-  ) {}
+  private httpClient: HttpClient = inject(HttpClient);
+  private apiService: ApiService = inject(ApiService);
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Add fee
    * @return Observable, array of records
    */
   addFee(model: FeeFormModel): Observable<Object> {
-    return this._httpClient.post(this._apiService.getEndpointByType('patron_transactions/'), model);
+    return this.httpClient.post(this.apiService.getEndpointByType('patron_transactions/'), model);
   }
 
   getActiveFeesByItemPid(itemPid: string): any {
diff --git a/projects/admin/src/app/api/patron-type-api.service.ts b/projects/admin/src/app/api/patron-type-api.service.ts
index 911e72917..3ce6de05d 100644
--- a/projects/admin/src/app/api/patron-type-api.service.ts
+++ b/projects/admin/src/app/api/patron-type-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -24,18 +24,14 @@ import { map } from 'rxjs/operators';
 })
 export class PatronTypeApiService {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) {}
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Get All
    * @return Observable, array of records
    */
   getAll(): Observable<any[]> {
-    return this._recordService
+    return this.recordService
       .getRecords('patron_types', '', 1, RecordService.MAX_REST_RESULTS_SIZE)
       .pipe(map((response: Record) => response.hits.hits));
   }
diff --git a/projects/admin/src/app/api/permission-api.service.ts b/projects/admin/src/app/api/permission-api.service.ts
index 11097bb6c..05718b7e4 100644
--- a/projects/admin/src/app/api/permission-api.service.ts
+++ b/projects/admin/src/app/api/permission-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,34 +15,31 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
 })
 export class PermissionApiService {
-  /**
-   * Constructor
-   * @param _http - HttpClient
-   */
-  constructor(private _http: HttpClient) {}
+
+  private httpClient: HttpClient = inject(HttpClient);
 
   /**
    * Get All Permissions by role
    * @return Observable, array of IRolePermission
    */
    getAllPermissionsByRole(): Observable<IRolePermission> {
-    return this._http.get<IRolePermission>('/api/permissions/by_role');
+    return this.httpClient.get<IRolePermission>('/api/permissions/by_role');
   }
 
   /**
    *
-   * @param pid - Partron pid
+   * @param pid - Patron pid
    * @returns Observable, array of permissions
    */
   getUserPermissions(pid: string): Observable<IPatronPermission[]> {
-    return this._http.get<any>(`/api/permissions/by_patron/${pid}`);
+    return this.httpClient.get<any>(`/api/permissions/by_patron/${pid}`);
   }
 }
 
diff --git a/projects/admin/src/app/app-routing.module.ts b/projects/admin/src/app/app-routing.module.ts
index 41657ed72..ec2a91085 100644
--- a/projects/admin/src/app/app-routing.module.ts
+++ b/projects/admin/src/app/app-routing.module.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,14 +14,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { FrontpageComponent } from './widgets/frontpage/frontpage.component';
-import { RouteService } from './routes/route.service';
-import { PermissionDetailViewComponent } from './record/detail-view/permission-detail-view/permission-detail-view.component';
 import { PERMISSIONS } from '@rero/shared';
 import { PermissionGuard } from './guard/permission.guard';
+import { PermissionDetailViewComponent } from './record/detail-view/permission-detail-view/permission-detail-view.component';
+import { RouteService } from './routes/route.service';
+import { FrontpageComponent } from './widgets/frontpage/frontpage.component';
 
 const routes: Routes = [
   {
@@ -47,11 +46,7 @@ const routes: Routes = [
 })
 export class AppRoutingModule {
 
-  /**
-   * Constructor
-   * @param _routeService - RouteService
-   */
-  constructor(private _routeService: RouteService) {
-    this._routeService.initializeRoutes();
+  constructor(private routeService: RouteService) {
+    this.routeService.initializeRoutes();
   }
 }
diff --git a/projects/admin/src/app/app.component.html b/projects/admin/src/app/app.component.html
index e33e3310a..ca03c8421 100644
--- a/projects/admin/src/app/app.component.html
+++ b/projects/admin/src/app/app.component.html
@@ -20,12 +20,33 @@
 </ngx-spinner>
 @if (user) {
   <header>
+    <div id="header-search" class="flex bg-dark w-full">
+      <div class="flex">
+        <a [routerLink]="['/']" class="navbar-brand pr-2 text-sm" id="homepage-logo">
+          <img class="logo" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAjMAAAEwCAYAAABCLvDxAAACAWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6YXV4PSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wL2F1eC8iCiAgICB4bWxuczpleGlmRVg9Imh0dHA6Ly9jaXBhLmpwL2V4aWYvMS4wLyIKICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICBhdXg6TGVucz0iIgogICBleGlmRVg6TGVuc01vZGVsPSIiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjMwNCIKICAgdGlmZjpJbWFnZVdpZHRoPSI1NjMiLz4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz7a1B+XAAABgmlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kctLQkEUhz/NMEwxqEWLFhLZSqMHSG2ClLAgQswgq43efARql3uNkLZB26AgatNrUX9BbYPWQVAUQQTtWhe1Kbmdq4IReYYz55vfzDnMnAFrLKfkdVs/5AtFLRoOeubi8x77Cw6cuPBiSyi6OhaJTNHQPu+xmPHWb9ZqfO5fa11K6QpYWoRHFVUrCk8IT60VVZN3hDuUbGJJ+EzYp8kFhe9MPVnlV5MzVf42WYtFQ2BtE/ZkfnHyFytZLS8sL6cnn1tVavcxX+JMFWZnJHaLd6ETJUwQD5OMEyLAACMyB/AzSJ+saJDfX8mfZkVyFZlVSmgskyFLEZ+oq1I9JTEtekpGjpLZ/7991dNDg9XqziA0PxvGuxfs21DeMoyvI8MoH0PTE1wW6vkrhzD8IfpWXes5APcGnF/VteQuXGxC56Oa0BIVqUncmk7D2ym44tB+A46Fas9q+5w8QGxdvuoa9vahV867F38AFCFnwJeX+MYAAAAJcEhZcwAALiMAAC4jAXilP3YAACAASURBVHic7d13mB1V4cbx79lsGiSBEGJo0olDCXWA0Beli4AIIgLCABYULCjiTxEpihVEsYHoINIFEbAgIoQW2iSUQDIQAkgooaQXSNvz+2MmkCy72d17595z5t738zz3SUJ2Z15ImPveM2fOMYg0gSBOLgdOquBbbS9/77I0Ck+p4DwiIlKhVtcBRDxnevF7E4Gv1zCLiIh0osV1AJEG8Q5wVBqFC1wHERFpNiozIsX4chqFT7kOISLSjFRmRKp3PXC56xAiIs1KZUakOs8Dn0ujcGUThUVEpIZUZkQqt5hsnswc10FERJqZyoxI5U5PozBxHUJEpNmpzIhU5rw0Cn/lOoSIiKjMiFTiYuAc1yFERCSjMiPSO5eT3V7ShF8REU+ozIj03PXAF1RkRET8ojIj0jN/B45Lo3Cp6yAiIrIilRmR7t0FHJlG4WLXQURE5P1UZkRW7lbg0DQK33EdREREOqcyI9K1HwIfT6NwnusgIiLStVbXAUQ8tBA4KY3Cq10HERGR7qnMiKxoGnBYGoUPuw4iIiI9ozIj8p7xZPNjXnYdREREek5zZkQyfwH2UJERESkflRlpdrOAE8l2v17gOoyIiPSebjNJM/sL8OU0Cqe5DiIiIpVTmZFm9CrwxTQKb3EdREREqqfbTNJsLgW2UJEREWkcGpmRZvEssFcahfe6DiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiFTOuA5RJECcGGAIM7eS1GjAfeH35VxqF89ykbV5BnPQFRgCD8teqHV6DgIHAQrI/s3n5j8v/fAbZn5+td36R7uR/xzu7Dg0FBgBvsuK16I00Cpe6Sdu8gjgZAgxjxetQx5/3ARbQ+XVoPjAHXYu6pTLThSBO+gCbA2H+2hHYBujfy0MtAF4FHgHuB+4DJqZR2F5c2uYTxMkawCbAxsu9lv16PbILRLUWAM8DzwFT8h+fAyanUfi/Ao4v0q0gTlbjvWvQsuvRBr08jAWmA5OBB8iuQ/enUTijwKhNJ3+fWJ/3X4OWvYYWdKqFwP/IrkPPd3zpQ7PKzLvyUZetgU8BuwPbA6vU6HQzeO+C8gddUFYuiJNWYFtgN2DX/LWe01AwjezP7978NUGfnKQIQZwMBA7JXzsCm1Kba7UFJpH9Pf5HGoW31eAcDSWIkzV57xq0K1mxHOg0VPbn+CwwdrnXpGa7HjV9mQniZAPg08AxwJYOIoxOo/BhB+f1VhAnqwB781552ZHaFcuizCAbeRsD/FUjN9Ib+Sf8j5Bdhz4ODK5zhHFpFIZ1Pqf3gjjZBPgw2XVoN2Azt4l6bAbwEFmxuQ8Ym0bhEreRassEceJjG78njcKf1erg+ZvlccCxZKMwLqnMAEGcDAYOBj4BHIj/5WVlLNnI29XADRp5614QJx8FvuA6Rye+mkbhlFodPIiTrYCTyUaER9TqPD2gMpML4mRz4Ij8tbXjOEWZDtwC3Aj8N43CRY7zFK6V7A3EN3NqcdAgTvqRXTi+C6xVi3NIzwVxsjrZUPoRwH70fj6SrwxZSd4d+EUQJ7eTFZtb0yh8x2kyf22En9eic2px0CBONgXOIysxTT9C7loQJ9uQfZA6gmyuZKMZBpyYv2blgxg3Af9ulGtSq+sA9ZAP4X4aOJfsoikOBXHyEeA04CCgr+M4tdaP9+Y/vBXEyc+BX6VRWJPCLn4L4mRd4GyyN5WmuP76Kv8wdRLwecpz+6gIq5PdmTgOmBfEyQ3AL9MofMJtrOo09P9M+aTeQ4Af4GY+jOTySY3HAl8GtnIcx5U1yf4unhHEySXAxboF1RyCOBkKfBs4lezRaXEkiJMPkV2Hjid7PLqZDSIfsQniZAzwC7IR5NI9bduwZSZ/nPF3ZMO44kgQJ+sBXwI+SzbUKdkno+8CXwvi5LfAhWkUvu44k9RIECd7A1cB67jO0syCONkf+ApwALq115m2/PVCECe/InvSdrbTRL3QkGUmiJPRwLXAho6jNK0gTjYCzgeOokH/nhVgEHAGcEoQJ2cBl5TxE5F0Ll9S4FzgW0CL4zhNK4iTT5LNfWrEuTC1sBFwIXBuECeXAj9Io3Cm40zdaqg3mSBOWoAzyd5Ei1g0TXopH04/i2w4vZ/jOGUxCLgYOCaIk8+lUfi460BSnSBONgSuAXZxHKVpBXGyG/AzYLTrLCU1CPg62S2o75PN9fP2KaiG+bQQxMnawB3ABajI1F0QJ/2COPka2Qq5p6MiU4kdgUeDOPlJvnyAlFAQJ0cCj6Mi40QQJ5sGcXIT2bpPKjLVG0o2UjMpiJOjXIfpSkOUmXzhu/vJFp2SOsuHcScBFwFrOI5Tdq1kt56eCuLkw67DSO8EcXIqcD3ZXm1SR0GcDAvi5JfAROBw13ka0MbAdUGcPJiPenml9GUmn5txD9l/aKmjIE4+GMTJnWQXb/33L9ZGwB1BnJzhOoj0TD4yeQmaXFp3QZx8imxJ/9No/OUeXBsN3B/EyR/yxU69UOoyE8TJZmT74vR20zWpUhAnxwET0GhYLfUBfhLEybW67eS3IE6+RTYyKXUUxMkaQZxcR/bAh0aF6+tE4MkgTvZ0HQRKXGaCOAnIRmRcbzjYVII4WTOIkxuBK9FQer18ChibTyoVzwRxcjbwQ9c5mk0QJweQfaDydh5HE9gQuDuIk58FceJ0BfdSlpl8ROYeYG3XWZpJECcfA54iW/Zb6msbIMlXTxZPBHHyXbLHr6VOgjhZNV+f6V9o7R4ftJA99TQuiJNtXYYolXy4/SbgA66zNIsgTvrmF49bcbsZXrMbBvwriJNDXQeRd8u9ikwd5RtzPoafm5I2uy2BR/K5Y3VXqjKTb0/wG2CU6yzNIl835t/o4uGLvsBfgjg5xHWQZpY/ePAnNNm3boI4ORAYS3Pto1Q2fYGLgjj5fRAndZ2IXaoyQ7Yp2PGuQzSLfGffh4C9XWeRFSwrND7uMt3w8rkBfyFbf0PqIIiT04DbAG+enpGVOhm4Pd/Msy5KU2aCONkO+JXrHM0iiJO9gIeBka6zSKf6ATcFcfJR10Ga0MXADq5DNIMgTvrkm7L+Ei2GWjYfBh4K4mSTepysFGUmb3c3Ak5nSzeLIE5OIFtNWY86+m1ZoTnQdZBmEcTJMeiWa13ka5jcRrY1ipTTh4CHgzjZo9YnKkWZIXvsUYuy1UEQJ98BYrQdQVn0J7vltJXrII0uiJM1gV+7ztEM8v/W9wMq6uU3DLgziJOP1/Ik3peZIE62BD7nOkczCOLkG8D3XeeQXlsVuLme96eb1LlobaWay/8e3wFs7TqLFKYf2VYIB9XqBN6XGbJdT8uQs9SCOPkS8FPXOaRimwJX5U/8ScGCONkcfaiqufzW0u3Adq6zSOGW3RavyVpZXpeEfIXHA1znaHRBnJxItqeMlNtHgXNch2hQPyXbBFRqJF9D7B/Azq6zSM0MAG4N4mT3og/sbZkJ4qSVbFRGaiiIk6OB36P1MhrFd7UGTbGCONmHrChKjeSPu98C1HyiqDi3CvDPIE52KvKg3pYZsjVltnQdopEFcXIY2R5LPv89kN4xwJ+DONHmq8VoAS50HaKR5R9cbwT2cZ1F6mYw2To02xR1QF/fxA4Bfu46RCML4mQUcDWNPXQ+F3gJeBZ4DXjbbZy6GQL81nWIBnELmohaaz8FtABk8xkK3BLEybAiDubrG9kg1wEaWRAnqwF/JRvuK7PZwKRjF85fuMFaq/Vde/jgAfvstkmPFzO784Ep415/a947L785Z3HcZ2BfYCMaZ/PSA4M4OSqNwutdBym5Rvn74KUgTo4Cvuo6hzizAXBNECcHplHYXs2BfC0zUiP50y5/Jnv6pWwWARMPnzNr1gVf2efdLRbOqvBgXRWf317zyL2/WNjSh/KXm18EcfLvNApnuQ4i0lEQJ1sAf3CdQ5zbDziPyi/lgMpMM/oO8DHXIXpp3M83GmIPbBu5I8AFNT7ZKZ/eac/lf332r+4ec8OqgwPKt2P4CLIh/M+6DiKyvCBOhpCNDq/qOot44dtBnDycRuFtlR7A1zkzUgNBnOxHtvBXWTyaRqFJozBcVmRcOO/UvdvSKFzr1H5L7gNedJWjQifVYylxkV66gmypexF478GFiu8YqMw0iSBO1geuwf8/cws8lJeYQh/dq9apx4zeM43Cjc77QP+HgEmu8/SQAS4N4kSb9IkXgjg5A6jp0vZSSqsBfw3iZGAl36zbTM3jMrI9Mnz2VBqFo1yH6M4nPzpqF4B/3/Pso195fs56wFqOI3Vnc+AYssfwRZzJV1Juxi1TFgxrbZm6bv/W2UNa+ywZ3K9l6eDWPu2r9e9Da4thzqKlzFm01MxdvLRl7uL21pmLl64yddHStRdbO9x18DobRbbw55m9/UaVmSaQL4y3v+sc3bg3jcK9XIfojf33ym59BXGSAD1+isqRs4I4uTqNwqWug0hzyh8+uJTG38R28RYD+z75sQ2HzotGr99WxAFvfXLa/Xf9b2b7f6cvCJqg4JwexMlVaRRO6M03qcx07XVgYv7jnPw1d7mf9yGbYLlW/uPyPx/iIG+ngjgZit9r9sz/7hp9nzjm0G1KVWSWl0ZheObP/zPmltWH7oG/t/E2A44GrnIdRHplCdk6SZOBWax4DZoLzCcbnu/sOjQC6Fv/yF06kcZd4XfBjoP7TzjqQ8OXHjxqrd1SstnNRTlk67VWWP7/rNufHfPP1+duvKDdfrDA0/iiFbgsiJPdevO4tspMZjJwF/BU/no6jcI3Kz1Yfs9vBNkEt52B0fmPa1Qftdd+jL9P4TyfRuEmx7hOUYAff23ftrsffH78KemM9QBfPzmdFcTJtRqd8dYiYAyQ8N616Jk0ChdVesAgTtYA1gG2J7sOjSYbyq/rtT+Ikw/QYBvZthgza4/VBjx96ce33B0gJVvzoh6+f8DItmU///FdU+7+2yuz15u5pL2My210ZTTwBeA3Pf0GE8SJrV0eb7UDY4FbgVvTKHym1ifMh1g35b0LymhgG2C3NAofrtE5dwPuw899lx71bYJvUYI4eQYY6TpHF45No/Bq1yE6CuLkVJpzs9PpZJsr3grckUbh3FqfMP+wFfLeh6zRwLQ0CsManvMqsnlbpTeoT8tLyWe293K7kBNumjD2oTkLd3GdoyCzgc3TKHytJ1/cbGXmNeCXwB+qGXkpSr5LrE2jsPBl9oM46Qs8hp/7W5Viom81gjiZhp8jYimwZbWrbRatCcvMf8j2fLrTh5GyIE6GplE4s0bH3ofs37fUWoyZ++VNh43/wu4btrnO0p09rxo/6Y3F7YHrHAX4SxqFn+zJFzZLmXmabAfua9MoXOg6TD0EcXI6fm6QNzWNwvVdh6iHIE7m4+eWEYenUXiz6xDLa5Iysxi4DvhZGoVPug5TD/mSABPxd6SyJ9r3HbbK2EsO2aJU831ufOzV+8594rUPNcCE4X3SKPxvd1/U6HNmppHt+3FDGoXNUNqAd4eRv+k6RydmNkuRAbhgnYETvv3q2zvh322+kwCvykwTuBX4chqF/3MdpM6OpsRFZuP+rU/+89PbbpO6DlKBI7ZbZw+A8+6YPOaaV2aPBvo7jlSp7wHdlhlfn7yoliWbOLR5GoXXN1ORyX0O/25xLEqj0MUEaGcO33/L0Z96e+69rnN04oAgTsq851SZvEw2EnZosxWZIE5ayLZPKZ0WY2alUWj++eltt3GdpVpn77dZWxqFAzYb0PqY6ywV2iOIk26fdm3EMvM82aTaLzXjBntBnPTHw1GZM4e0POo6gwvnfHHvNuAB1zk66AMc5zpEE7gM2MK3W3p1dCRQunkb/VvMaxNP2GGo6xxFu+3obbfffbWBvl2Leurs7r6g0crM3cBOaRQ+6DqIQyeRPYrpk0ejT2y/e/df1pjSKNydbD0Qn0SuAzSwxcDn0yj8fD2eTvJR/vRmVbsguzC0teW5J47fwbfrZ2EuP3zL3Y9aZ8g9rnNU4MNBnOy6si9opDLza2D/NAqnuw7iSv4EU6+Xga6xRY36CHZv7P/mW4nrDB0EQZw0yiOcPnmLbMLiZa6DOHYYsJXrEL2xcf/WJx88bvvNXOeotXP3H9n2jQ8Nv4dsOkaZfHdlv9koZeZ7aRSemkbhYtdBHDsB8GqC7Z6vTGvmUbJ3/eKbB7QBNXn0tQoanSnWm8AuaRT6OE+q3lb6xuObHQb1f6gR5sf01Mm7btCWRmEL2UKNZXFAECc7dvWbjVBm/gyc7zqEJ85wHaCDNy876+A21yF8cfTb83x7HPeoIE4GuA7RIBYCh6VR+JzrIK4FcbIvsJ3rHD110PBV7736yFFNOUqZRmH/FmPKdCu0y/mgZS8zDwCfbcKnld4nX+3XqyHSrwxor/nKymXyvS+2tZEtF+CLITTuXjn1dmIahWNdh/DE8a4D9NRBw1e996KDNy/tvnBFmHjCDkMozwjNIfl+g+9T5jLzPPDxZlkErwc+4zpAB+kpR++kN8oOTumz+FnXGTo4wHWABnB+GoXXuA7hgyBOBgEfd52jJ4a1tqTNXmSW+UYw/CHXGXqoH3BUZ79R1jIzGzjYhy0JfJA/jt2jJZ/r5f9W6zPDdQYffeUzu+wFOF++fjn7uw5QcteTLeolmSPwc9XrFbQYM++B47bf3HUOX5y8ywZ7bTuo3yOuc/RQpx/cy1hmlgJHplE4yXUQjxwCrO46xHLmH3/4dru5DuGxp10HWM6WQZys5zpEST0EnKDb3CvwbYS4UxNP2GGw6wy+ue7IrXdepcW86jpHD+wSxMn7dggvY5n5XhqFpd+0rGC+XUDKutJkXRwxb7ZvTzVpdKb35pLd5n7HdRBfBHGyPtDmOkd39hu2yn2uM/hq/PE7rAsscZ2jB973nle2MvMKcJHrED4J4mQ4ns17uHTzNQa5zuCz75/2kTbXGTrw6u9PSfw0jUKfJnP74Fj824dsBUNbWyb/8pAt9nSdw2enbbpmGVYJPjZfmPFdZSsz56RR+LbrEJ75FH5tGPrqXqM3Ls1jmQ759Ea4T767sfTMNPShqjPHug7QjfkPHrd9aTe9rJcv7bFh2+ar9PVtkc+ONgJWWFW+TGUmBa5wHcJDB7kOsLx933hzsusMJeHTeiSrA6HrECVyXhqFvm1P4VQQJxsCXk+o/eyGQ5tyf7hK3HzUNjuSbcvhswOX/0WZysz/pVFYhnt5dRPESSsd2qlrl5x5YJvrDGXw/bUG+jSaBiozPTUZ+L3rEB7a23WAlWkxZt7X997E64y+2XvowIddZ+jGCn+eZSkzDwK3uA7hoR0Bn+anvOY6QFkcceCWvq04uq3rACXxHX2o6pTXReFT6wwZ5zpD2fz2sC33ANpd51iJMF/XCChPmfmWHn/slG8XkJdcB5CKqcx0L0mj8C+uQ3jKt2vR8t4+e7/N2lyHKKPRQ/r7PDrTynIrmJehzDwD6FG6znl1ATl8ziw9pto7Pv332iq/bSld0+2lTuRrfni7VtHHRwwqy2Jw3rniE6N2dZ2hG+++B5ahzFyvUZn3C+KkH+DVwnRt223g0y2vMnjLdYDlDAAC1yE8tgS4yXUIT3n1oaqDRT88KGhzHaLMtl61n88Tp8tVZlwH8NTOwEDXIZa3356baRJp78xyHaADPVLftf+mUTjddQhPtbkO0JV9h63i822SUrjhk1vv5DrDSmwXxMkQ8L/MPJVG4UTXITzl2wZpr7gOUELzXAfoQPNmunaD6wAea3MdoAv2Ei2QV4hN+rc+7jpDF/qQz5vxvczoAtK1Ua4DdDDVdYASWuQ6QAcqM51bDNzsOoSPgjhZA1jHdY7ODGtt0ZpXBTlyk2FzXGdYiVHg18qxndEtpq55t5Ll1bc8PtZ1hjI5f8YS35Z+9+7vlCfuSKPQt/20fLGZ6wBd2XfEoNfKsC5/GZyw8wf3CuLE17mrI8HvMjM1jcJnXYfwmG8XkdHnz9DyGyW3VhAnfdIoXOo6iGfudB3AY94W4HP2G9nmOkMjWaXFvLqg3fo4CjcS/L7NpEWOuhDEybrAqq5zSMNpBUa4DuGh8a4DeMzXMqM9/Aq26+oDp7jO0AXvy8xjrgN4zNcLiJSft+uFOGLRtWhlvLwWBQP76sGRgv3qUG8nUw8P4mR1n8uMPg11zcsLiDQElZkVPZdG4VzXITzm5bXooPVX8+1JwUbh6/YGI1VmysnLC4g0BJWZFek6tHK+zd0D4HO7btjmOkMjWrtvyzOuM3TB2zIzE21auDJeXkCkIazrOoBnJrgO4KsgTtbBw7l7fY15w3WGRrXvWoNfd52hC96WmTe1hcFK+TijXBqDRmZW5NOWE77x8jq0yYDWl11naFTf3mczX7euWNvXMjPDdQDPaQ8kqRWVmRVpC4OueXkdGt6/VU8yNZ9BKjPl5OVFRBrCGq4DeEbXoq55eR0aMbCvFrxqPt6WGZ+XTvaBlxcRaQgDXAfwjK5FXfPyOrTuoH6uI0j9eVtmfH38yxdeXkSkIXi1E7sHNHeva4NdB+jMiEH9fF7ZvhH4OPI12NcyI10I4mQg2U6hIrWgMiM95eWHqsO3XWd31xkaWV9jfLz16u3IjHTNywuINAyVGekpXYua0JA+ZpbrDJ1QmSkhL4d2pWFozoz0lK5FTWh43z4+roit20wltIrrANLQTBAnKjTSE7oWNaE1+7W+4zpDJ1ZVmSmfxa4DSMPTrSbpiQWuA0j9zVu61McJ1otUZspHG6hJranMSE/MdB1A6m/GonYf50rNVZkpH5UZqTXdZpKe8PGpFqmxGUvbh7jO0Il5KjPlozIjtabrgvSERmaa0Lyl7T6uEq4yUzZpFC4FfJyAJSLNxcuRmSsennqP6wwNzrud0tFtptLS6IyIuOblyMy0eQu1gnzz0chMSanMiIhrXo7MvDp/kVZIbz4qMyWlMiMirnk5MvPGwiXaabL5qMyU1JuuA4hI05uNh5sCT31nyWquMzSqP/k7H2mmykw5Pec6gIg0tzQKLeDdPj3Tl7SPdJ2hUd3x0qz+rjN0YYrKTDlNdh1ARAQ/583ofa1GHpu/aHPXGbrwrP7Qy0llRkR84GOZ4bRbJ97rOkMjarfWxwXzAJ71cY8F6Z6PZWYR2jeqUXg3D0K89TSwk+sQHT0w8+2NXWdoNBfePeXu37/o5Zzvd4CXVGbKaQpgAeM6yHIuSaPwG65DiEhdPQJErkN0tKDdrus6Q6P5z2tzh7nO0IUpaRS26zZTCaVR+A7wsuscHYSuA4hI3T3sOkBXPH7yppReXLjE2/kyoIlSZebbrabtgjjxaaRIRGpvAvC26xCd+ddLM7X7e7F8vZOjMlNyT7kO0MEQQI9EijSRNAqXAONd5+jMk/MX+zqSUDqn/32Sz6Ncz4DKTJnd5zpAJ3ZwHUBE6u4R1wE6027toOvHvaKnmgpw+1sLtnOdYSXGgspMmfn4P6nmzYg0H2/nzfz06dc3cJ2h7C4aM+XudmsHu87RhdfSKNTITJmlUfgGMMl1jg40MiPSfLwcmQGYt7R9/dsmTLvfdY4yu/zFWVu7zrASdy/7icpMuY1xHaCD7YI40d8pkSaSRuELeLxf3AWPvzrCdYayumzsi2ParV3DdY6VGLPsJ3rjKTffJmUNBvZ1HUJE6s7b0ZmZS9o3dZ2hrC55dnrgOkM3NDLTIHwrMwCfcx1AROrO23kzAHteNX6i6wxlc/WjU+9ZbK3Po1ovp1H47qbLKjMllkbhNPJn7D1ySBAna7kOISJ19W/XAVbmjcXteky7ly6c+IbvW0LcvfwvVGbK7++uA3TQCpzoOoSI1E8ahY+Qr/fhq72vGu/b2lzeuurRqfcsaLfruc7RjbuW/4XKTPld7TpAJ07WasAiTedK1wFW5rXF7Vv+4M7JY1znKIPvP/X6jq4zdGMh8Lfl/4HKTMmlUTgeSF3n6GAjYD/XIUSkrv6M5zuu/3nq7D1dZ/DdzleOfw7wfSuI29IonLX8P1CZaQw+js5oIrBIE0mjcCr+LRfRkRl1xThvHyN37Yu3PH3f7KXtm7jO0QPvGwVUmWkM17gO0InDgjjZ2XUIEamrP7kO0J3F1q75sWsf93I/KZdufXLa/XfNeHt31zl64E3gXx3/ocpMA0ij8HngQdc5OmgBLg/ipK/rICJSNzcB812H6M7kd5Zsd9GYKWNc5/DJt8a/sq3rDD10Xb7B6QpUZhqHj7eatgL+z3UIEamPNArnkxUa7132wswyjELUxW5/Hp+2W7uq6xw91OlEc5WZxnEdsMB1iE58J4gTrfEg0jy8fqppOX1GXTHuDdchXDvuxgkPTl/S/iHXOXpoUhqFSWe/oTLTINIonA78wXWOTvQju92kR7VFmsPdwFTXIXpisbXDt7hi3BzXOVz56DWPP/bo3IWjXefohd909RsqM43lp8Bi1yE6sSvwRdchRKT20ihsB/7oOkdPtVs7OIiTha5z1Nsufx7/zJSFS8oyTwZgGnB5V7+pMtNA8kcjfZw7A/CTIE52cx1CROri58B01yF6oV8QJ+3xQy+NcR2kHrb/07iXZy5pH+k6Ry/9NI3Cd7r6TZWZxvMj/Fy4ahXgn0GchK6DiEhtpVE4G/iB6xy9ZH486Y29zr2jsVcJ3uKKcdMXtNt1XefopTeB363sC1RmGkwahc8Af3WdowtDgH8HcTLKdRARqblfAy+4DtFb174ye6/P3/z0/a5z1EIQJ/PbrV3DdY4KXJhG4UofcFGZaUw/dB1gJdYA/hPESVlmz4tIBdIoXASc5TpHJe6Z9fZuO185vnRFrCsn//XpB4I4sWQj5GUzg6wYr5TKTAPK92vydXQGYARwZxAnG7oOIiI1dS1QytV2Zy9t3zCIE3v4dU90+ihwGVx495QxqPOCnQAAEN9JREFUQZzMv3/227u6zlKFi9MonNfdF6nMNK6v4ee6M8usB9wTxEmZ/ycTkZVIo9AC33SdoxoT3168QxAni//vn+kY11l6Y/s/jXvl9y/O3ItyjsYs8yrwi558ocpMg0qj8CXgfNc5urE+cG8QJ+cGcdLqOoyIFC+Nwv8C/3ado0qtN78+b68trhg3/cpHpt7jOszKHHDN408EcWIXtNt1XGcpwJfTKOzROkAqM43tQiB1HaIbfYCzgfuDOCnDbq0i0nvfxM+nLHul3do1Lnj69T13vnL8lIvveX6M6zzL3DZh2gNH/+XJh4I4WfriwiVbu85TkNvSKOzx1hgqMw0sjcLFwJdc5+ihnYHHgzg50XUQESlWGoVPAle5zlGU2UvbN/7d8zP2CuLE7nzl+Ck/uHPy3fXOcG3y8r2HXfdEEsTJojOSl3d9bN6inWmc9/T5wKm9+QaTz3D2zTVpFB7jOkSjCOLkWuBTrnP0wj+A89IofMR1EKmPIE4Gkj2675vpne3QK70XxEk/YFCdTjcBqPttllVazKv7D1918g8PCtpqcfzfj/3fmJtenLnGiwuXbEnjFJfOfCONwgt78w0qM00giJN1gKeB1V1n6aV7ybZo+Ec+kVBEpFtBnLwMOF0YrsWY+Wu2mpdGrtJ/5hZrDFh8etsmbb35/j8+9NKYp96abybPXTj4pUVL117YbteqUVTfPA6EaRQu7c03qcw0iSBODgNudp2jQhOBnwFX52tXiIh0yYcyIxVZAuyaRuGjvf3GRh6mkuWkUfg34GLXOSq0BdnGdS8EcXJRECcfC+LEx1sSIiJSuTMrKTIAehy2uXwT2IVssm0ZrUO2fs7XgKVBnIwD7spfD3S33LWIiHjrhjQKL6r0m1VmmkgahYuDODkKeAwY6jpPlfoAO+WvbwGLgjiZBLxBtinZ+15pFDbkfisiIiU3ETipmgOozDSZNAr/F8TJ8cAtgHGdp0D9gG26+ZpG+vcVEWkEc4HDe7JlwcpozkwTSqPwNuBHrnOIiEjTOyGNwmeqPYjKTPP6DnCF6xAiItK0fpRGYSGbIqvMNKl83ZaTyW43iYiI1NPvgW8XdTCVmSaWL0r0KWCM4ygiItI8rgK+UORiqCozTS6NwneAQ4HxrrOIiEjDu5FsnkyhG4+qzAj5FusHAM+6ziIiIg3r78Cne7tVQU+ozAgAaRS+CexFtgaNiIhIke4EjkijcHEtDq4yI+9Ko3AaWaG5w3UWERFpGDcDh6ZRuLBWJ1CZkRWkUTgXOBi40nUWEREpvZ8An6j1djNaAVjeJx8GPD7febawR+dERKRpLAZOSaPwD/U4mUZmpEtpFH4HOAUofLKWiIg0rJnA/vUqMqAyI91Io/B3QBvwkuMoIiLiv+eA0WkU3l3Pk6rMSLfy3aa3BW5ynUVERLx1LbBTGoV1X+ZDc2akR9IonAkcEcTJ54GfAwMdRxIRET/MIJsfc4OrABqZkV5Jo/BSIAQmuM4iIiLO3Q6McllkQGVGKpBG4URgJ+AHQM3WDRAREW/NB76YRuGBaRS+6jqMyoxUJI3Cd9IoPAvYErjNdR4REamb24Ht0ij8resgy2jOjFQljcIpwCFBnBwIXAyMdBxJRKSw3ZhlBU8AZ6RR+B/XQTrSyIwUIo3CfwGjgDOBeY7jiEhz+wgQky3cJtV7BTgR2N7HIgMqM1KgNAoXpVH4E2AT4AJgluNIItKE0ih8No3CE4FNgV8D7ziOVFbzgLOBkWkUxmkUtrsO1BWVGSlcGoVv5KsHb0A2UvOa40gi0oTSKHwpjcJTgY2An6FR4556HTgH2CSNwvNrva9SEUwQJz7eW7wmjcJjXIeQYgRx0h84HjiD7JOSE2kUGlfnFqkla+2XgQ9UeZinjTHXFpHHV0GcrAF8FTgNWN1xHB+NB34BXJdG4SLXYXpDZUbqJoiTFuAQ4DPAR4F+9Ty/yow0KmvtJCCo8jB/NcZ8oog8vgviZAjwReAkHH7A8sRS4G/Axflq76Wkp5mkbvL7rX8D/hbEyVDgk8CxwG6AioaI1EUahXOAHwE/CuJkG+BI4AjgQ06D1dc4si1qrk6jsPR776nMiBP59giXApcGcbIRcAxwNLCF02Ai0lTSKHyC7JHjs4I42Yqs1BxJ412LLPAwcCNwUxqFL7qNUywTxMkOrkN0YkYahS+4DiH1F8TJemSPVS57rVPUsXWbSRqVbjMVL4iTzXmv2IxyHKdSC4CHgFuAv6ZR+LLjPDWji7t4Lb+gLCs2uwAjKj2Wyow0KpWZ2griZANgB2C75V6FfdAq0FRgbP56AHgijcIlbiPVhy7uUipBnKxJtoXCstdW+Y/DuvtelRlpVCoz9RfEyQfISs22vFdwNqM+76tzgCnA8/mP44CxjTzy0h1d3KUhBHEyAlgfGA6s2eHH4cCwNAp3d5dQpHZUZvwQxMkgsg9Xw8ke/e7uNZTsqc75y73mdfj1HLIRl2Xl5fk0CqfX7V9KRESkHqy1k2z1bnL97yFSKT3NJCJSA9ZaA4wGdspfOwJDgAR4FHgEuNcYM99ZSBEREZHOWGs/aK29swejIS9Ya9sKOJ9GZqSpaW8mEZECWWuPByaQPYHXnQ2Bu6y1P7fWDqhpMJEGpjIjIlIQa+0ZwBXAar34NkO2X9Df81tTItJLKjMiIgWw1m4BnF/FIT4CnFJQHJGmojIjIlIla20fshGZ/lUe6ifW2o2qTyTSXFRmRESqdxLZ00rVWhX4WQHHEWkqKjMiItVrK/BYexV4LJGmoDIjIlK9IjfsHaZbTSK9ozIjIlIFa+0Qsj15ihQWfDyRhqYyIyJSnU0ofp+7TQs+nkhDU5kREanOs0B7wcecVPDxRBqayoyISBXyvZXSgg87ruDjiTQ0lRkRkeoVWT7eMMZMLfB4Ig1PZUZEpHp3FXisuws8lkhTUJkREanelcD9BRxnNvD1Ao4j0lRUZkREqmSMaQciYEGVh/qaMeaVAiKJNBWVGRGRAhhjngPOqOIQtxlj4qLyiDQTlRkRkYIYY34DHApM68W3LQa+Bxxek1AiIiIivWWtHWatvdZ27wlr7XYFnG9SD87VnZuK+HcXcaHVdQARkUZjjJkOHG2t/Q7Z1gQh2f5NQ8ge4x4HJMAEY8wSZ0FFGoTKjIhIjRhjngeeB25wnUWkkWnOjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJo2mhQRkbqy1q4L7AKsDayVvwYDs4Dp+est4DVgnDHmLUdRpSRUZkREpOastdsBhwMHA9v28nufAx4CHgTGGmMeLz6hlJnKjIhIAay1XwI+UuVhZhhjTi4ijy+staOAC8hKTKU2zV/H5sdMgcuBP2nURkREpCDW2j/a6r1a4bknFXDumwr+7zHUWvsna+3SArJ1ZaG19jpr7d5FZpfy0QRgEREplLV2JNltoc9Q2/eZfsBRwF3W2pustSNqeC7xmMqMiIgUxlr7YbIiM7LOpz4ceNpae3SdzyseUJkREZFCWGt3AP4BDHUUYRhwTT5Ko/e3JqI/bBERqZq1dk3gr8AA11mAScaYdtchpH5UZkREpCr5KMi1wPquswD3A99zHULqS2VGRESqdTSwj+sQwAzg08aYpa6DSH2pzIiISMWstX2As13nyJ1ojJnqOoTUn8qMiIhU49PU/8mlzvzSGHOL6xDihlYAFhGRapxe4LHmAxOAl4D1gI3I9m/qznjgjAJzSMmozIiISEWstWvTy32WujAXOBf4hTFmSYdzbAUcn7+Gd/G9RxljFhWQQ0pKt5lERKRS+xdwjNlAaIy5sGORATDGPGWMOQPYHOjsNtIXjDHPFZBDSkxlRkREKlVEmTnBGPNsd19kjJlujDkM+AKwIP/HfzTGXFNABik5lRkREalUWOX3TzPG/K0332CMuRTYnmxdm9OqPL80CM2ZERGRSlW7seP9lXyTMeYZsqeoRACNzIiISAWstQOAwVUepm8RWURUZkREpBLVjsoA7JyXIpGqqMyIiEglVi3gGGuRPZItUhWVGRERqcT0go7zTWvtNdba1Qo6njQhlRkREanEdMAWdKyjgcettXsWdDxpMiozIiLSa/kCd0WNzgBsCNxjrX3QWnuctbZ/gceWBqcyIyIilXq4BsccDVwJTLXW/tBau0ENziENRmVGREQqdWcNjz0c+BbwvLX2Vmvt/tZaU8PzSYmpzIiISKX+VYdztAAfA24HnrHWnmKt1fo0sgKVGRERqUi+Eu8/6njKzYDfkJWa4621fep4bvGYyoyIiFTjPAfn3Ai4Aphgrf2Eg/OLZ1RmRESkYsaYR4DLHJ1+c+BGa+2l1lrtNdjEVGZERKRaXwbGOTz/54B/auG95qUyIyIiVTHGLAQOBsY6jLEvMNZau6HDDOKIyoyIiFTNGDMNaAN+6zDGFsBD1toPOswgDqjMiIhIIYwxi40xXwROAhY6ijECuMpaq/e3JqI/bBERKZQx5o/ATsDfHUXYEzjd0bnFAZUZEREpnDHmSWPMx4AQN6XmTGvtQAfnFQdUZkREpGaMMeOWKzV/AZbU6dRrAifW6VzimMqMiIjUXF5qPkm24N0FwFt1OO0X6nAO8YDKjIiI1I0x5mVjzHeADwIR8FgNT7eVtXZ4DY8vnlCZERGRujPGvGOMucIYsz2wB7W7BdVWg2OKZ1RmRETEKWPM/fktqFHAcwUffpeCjyceUpkREREvGGNSYGfg7gIPu1aBxxJPqcyIiIg3jDEzgP2B2ws65LCCjiMeU5kRERGvGGMWA2cAtoDDrVnAMcRzKjMiIuIdY8xTwJQCDqX3uSagP2QREamatXagtfa0gg87uYBjvFbAMcRzKjMiIlKE3wK/tNZeWOAx1y7gGK8UcAzxnMqMiIhUxVp7MnB8/svTrbU/L+CYA4Atqz0O8GoBxxDPqcyIiEjFrLXbAZd0+MdftdbebK0dWsWh9wD6VvH9y6jMNAGVGRERqYi1dnXgRmBAJ799GPC4tXa3Co47GPhdlfGWeaSg44jHVGZERKTXrLUG+BOw8Uq+bH3gHmvtr6y1G/XwuAOBP3Rz3J6aYoyp5d5P4gmVGRERqcQ3gUN68HV9gC8Bk62111trd7HW9uvsC621hwKTgCMLynhjQccRz7W6DiAiIuVirW0DftDLb+sDfDJ/LbXWvgCkwBtAAGwFDCkwJqjMNA2VGRER6TFr7drAdWTlpFJ9gE3zV608YYxJanh88YhuM4mISI9Ya1vJiswI11m6YYFTXYeQ+lGZERGRnvoasKfrED3wZ2PM/a5DSP2ozIiISE/9ARjnOkQ3ZpNNTpYmojIjIiI9YoyZAXwEeMh1li4sAT5jjHnddRCpL5UZERHpMWPMbGA/4D7XWTpoB443xtzqOojUn8qMiIj0ijFmLnAAcJfrLMs5xRhzjesQ4obKjIiI9JoxZgFwEHAOsNBhlDnAccaYyxxmEMdUZkREpCLGmIXGmHOBUcB/HES4D9jGGHOVg3OLR1RmRESkKsaYycaY/YCjgdfqcMo5wLeANmPMi3U4n3hOZUZEpBjtZIu1VfNqL+G532WMuY5sa4IzgPHVHq8T/wNOB9YzxvzYGFN1ZhEREZEuWWtHWmvPttZOspV73Vp7g7X2KGttNVsoSAMzrgOIiEjjs9ZuA2wPfLCTVwvwJvBW/uMbwCPAGGPMRCeBpVT+H8FnJPsOxe1OAAAAAElFTkSuQmCC" alt="RERO ILS" />
+        </a>
+      </div>
+      <div class="flex w-full">
+        <shared-remote-search class="w-full" />
+      </div>
+    </div>
     @if (user.hasAdminUiAccess) {
-      <admin-menu></admin-menu>
+      <admin-menu-app />
     }
   </header>
   @if (user.hasAdminUiAccess) {
     <div class="container-fluid px-5">
+      <p-toast>
+        <ng-template let-message pTemplate="message">
+          <div class="flex flex-column align-items-start" style="flex: 1">
+            <div class="font-medium text-lg my-3 text-900">
+              {{ message.summary }}
+            </div>
+            <p [innerHtml]="message.detail"></p>
+          </div>
+        </ng-template>
+      </p-toast>
+      <p-confirmDialog />
       <router-outlet></router-outlet>
     </div>
   } @else {
diff --git a/projects/admin/src/app/app.component.scss b/projects/admin/src/app/app.component.scss
index b92d61eea..aabf5d6c2 100644
--- a/projects/admin/src/app/app.component.scss
+++ b/projects/admin/src/app/app.component.scss
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,6 +14,10 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-.logo {
-  max-height: 40px !important;
+ #header-search {
+  padding: 0.5rem 2rem;
+}
+
+ #header-search img {
+  max-height: 40px!important;
 }
diff --git a/projects/admin/src/app/app.component.ts b/projects/admin/src/app/app.component.ts
index 0e9ac84e6..f14388f68 100644
--- a/projects/admin/src/app/app.component.ts
+++ b/projects/admin/src/app/app.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,11 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { AfterViewInit, Component, OnInit } from '@angular/core';
+import { AfterViewInit, Component, inject, OnInit } from '@angular/core';
 import { HotkeysService } from '@ngneat/hotkeys';
 import { User, UserService } from '@rero/shared';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { NgxSpinnerService } from 'ngx-spinner';
+import { DialogService } from 'primeng/dynamicdialog';
 import { KeyboardShortcutsService } from './service/keyboard-shortcuts.service';
 import { CustomShortcutHelpComponent } from './widgets/custom-shortcut-help/custom-shortcut-help.component';
 
@@ -30,38 +29,25 @@ import { CustomShortcutHelpComponent } from './widgets/custom-shortcut-help/cust
 })
 export class AppComponent implements OnInit, AfterViewInit {
 
+  private userService: UserService = inject(UserService);
+  private keyboardShortcutsService: KeyboardShortcutsService = inject(KeyboardShortcutsService);
+  private hotKeysService: HotkeysService = inject(HotkeysService);
+  private dialogService: DialogService = inject(DialogService);
+
   /** user */
   get user(): User {
-    return this._userService.user;
+    return this.userService.user;
   }
 
-  /**
-   * Constructor
-   * @param _userService - UserService
-   * @param _spinner - NgxSpinnerService
-   * @param _keyboardShortcutsService - KeyboardShortcutsService
-   * @param _hotKeysService - HotkeysService,
-   * @param _modalService - BsModalService
-   */
-  constructor(
-    private _userService: UserService,
-    private _spinner: NgxSpinnerService,
-    private _keyboardShortcutsService: KeyboardShortcutsService,
-    private _hotKeysService: HotkeysService,
-    private _modalService: BsModalService
-  ) {}
-
   /** Init hook */
   ngOnInit() {
-    this._spinner.show();
-    this._keyboardShortcutsService.initializeShortcuts();
-    this._spinner.hide();
+    this.keyboardShortcutsService.initializeShortcuts();
   }
 
   /** AfterViewInit hook */
   ngAfterViewInit() {
-    this._hotKeysService.registerHelpModal(() => {
-      this._modalService.show(CustomShortcutHelpComponent);
+    this.hotKeysService.registerHelpModal(() => {
+      this.dialogService.open(CustomShortcutHelpComponent, {})
     });
   }
 }
diff --git a/projects/admin/src/app/app.module.ts b/projects/admin/src/app/app.module.ts
index 5012b2770..69de42648 100644
--- a/projects/admin/src/app/app.module.ts
+++ b/projects/admin/src/app/app.module.ts
@@ -26,38 +26,29 @@ import { PrimengImportModule } from '@app/admin/shared/primeng-import/primeng-im
 import { HotkeysModule, HotkeysService } from '@ngneat/hotkeys';
 import { FormlyModule } from '@ngx-formly/core';
 import { FormlyFieldSelect } from '@ngx-formly/primeng/select';
-import { FileUploadModule } from 'primeng/fileupload';
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
-import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import {
   BucketNameService as CoreBucketNameService,
   CoreConfigService,
   RecordHandleErrorService as CoreRecordHandleErrorService,
-  FilesService,
-  LocalStorageService,
-  RecordModule, RemoteTypeaheadService,
-  TranslateLoader, TranslateService, TruncateTextPipe
+  NgCoreTranslateService,
+  RecordModule, RemoteAutocompleteService,
+  TranslateLoader, TruncateTextPipe
 } from '@rero/ng-core';
-import { ItemHoldingsCallNumberPipe, MainTitlePipe, SharedModule, UserService } from '@rero/shared';
+import { AppSettingsService, ItemHoldingsCallNumberPipe, MainTitlePipe, SharedModule, UserService } from '@rero/shared';
 import { NgxChartsModule } from '@swimlane/ngx-charts';
-import { CollapseModule } from 'ngx-bootstrap/collapse';
-import { BsDatepickerModule, BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
-import { PopoverModule } from 'ngx-bootstrap/popover';
-import { TabsModule } from 'ngx-bootstrap/tabs';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
+import { FileUploadModule } from 'primeng/fileupload';
+import { MenubarModule } from 'primeng/menubar';
 import { TableModule } from "primeng/table";
+import { Observable } from 'rxjs';
 import {
   SelectAccountEditorWidgetComponent
 } from './acquisition/components/editor/widget/select-account-editor-widget/select-account-editor-widget.component';
 import { ReceivedOrderPermissionValidator } from './acquisition/utils/permissions';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
-import { DocumentsTypeahead } from './classes/typeahead/documents-typeahead';
-import { ItemsTypeahead } from './classes/typeahead/items-typeahead';
-import { MefTypeahead } from './classes/typeahead/mef-typeahead';
-import { PatronsTypeahead } from './classes/typeahead/patrons-typeahead';
 import { IssueEmailComponent } from './components/issues/issue-email/issue-email.component';
 import { ItemSwitchLocationStandaloneComponent } from './components/items/switch-location/item-switch-location-standalone/item-switch-location-standalone.component';
 import { ItemSwitchLocationComponent } from './components/items/switch-location/item-switch-location/item-switch-location.component';
@@ -65,15 +56,10 @@ import { TabOrderDirective } from './directives/tab-order.directive';
 import { ErrorPageComponent } from './error/error-page/error-page.component';
 import { NoCacheHeaderInterceptor } from './interceptor/no-cache-header.interceptor';
 import { UserCurrentLibraryInterceptor } from './interceptor/user-current-library.interceptor';
+import { MenuAppComponent } from './menu/menu-app/menu-app.component';
 import { MenuDashboardComponent } from './menu/menu-dashboard/menu-dashboard.component';
-import { MenuLanguageComponent } from './menu/menu-language/menu-language.component';
-import { MenuMobileComponent } from './menu/menu-mobile/menu-mobile.component';
-import { SubMenuComponent } from './menu/menu-mobile/sub-menu/sub-menu.component';
-import { MenuSwitchLibraryComponent } from './menu/menu-switch-library/menu-switch-library.component';
-import { MenuUserServicesComponent } from './menu/menu-user-services/menu-user-services.component';
+import { MenuDisplayComponent } from './menu/menu-display/menu-display.component';
 import { MenuUserComponent } from './menu/menu-user/menu-user.component';
-import { MenuComponent } from './menu/menu.component';
-import { LibrarySwitchService } from './menu/service/library-switch.service';
 import { CountryCodeTranslatePipe } from './pipe/country-code-translate.pipe';
 import { DocumentProvisionActivityPipe } from './pipe/document-provision-activity.pipe';
 import { ItemInCollectionPipe } from './pipe/item-in-collection.pipe';
@@ -127,6 +113,7 @@ import { DocumentDetailViewComponent } from './record/detail-view/document-detai
 import { DocumentDetailComponent } from './record/detail-view/document-detail-view/document-detail/document-detail.component';
 import { EntitiesRelatedComponent } from './record/detail-view/document-detail-view/entities-related/entities-related.component';
 import { FilesCollectionsComponent } from './record/detail-view/document-detail-view/files-collections/files-collections.component';
+import { UploadFilesComponent } from './record/detail-view/document-detail-view/files-collections/upload-files/upload-files.component';
 import { HoldingDetailComponent } from './record/detail-view/document-detail-view/holding-detail/holding-detail.component';
 import {
   HoldingOrganisationComponent
@@ -189,14 +176,17 @@ import { ReportsListComponent } from './record/detail-view/statistics-cfg-detail
 import { StatisticsCfgDetailViewComponent } from './record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component';
 import { TemplateDetailViewComponent } from './record/detail-view/template-detail-view/template-detail-view.component';
 import { VendorDetailViewComponent } from './record/detail-view/vendor-detail-view/vendor-detail-view.component';
+import { AddEntityLocalFormComponent } from './record/editor/formly/primeng/entity-autocomplete/add-entity-local-form/add-entity-local-form.component';
+import { remoteAutocompleteToken } from './record/editor/formly/primeng/remote-autocomplete/remote-autocomplete-factory.service';
+import { DocumentsRemoteService } from './record/editor/formly/primeng/remote-autocomplete/remote/documents-remote.service';
+import { ItemsRemoteService } from './record/editor/formly/primeng/remote-autocomplete/remote/items-remote.service';
+import { MefRemoteService } from './record/editor/formly/primeng/remote-autocomplete/remote/mef-remote.service';
+import { PatronsRemoteService } from './record/editor/formly/primeng/remote-autocomplete/remote/patrons-remote.service';
 import { FieldCustomInputTypeComponent } from './record/editor/type/field-custom.type';
 import { RepeatTypeComponent } from './record/editor/type/repeat-section.type';
 import { IdentifiedbyValueComponent } from './record/editor/wrappers/identifiedby-value.component';
-import { UserIdComponent } from './record/editor/wrappers/user-id/user-id.component';
+import { UserIdComponent } from './record/editor/wrappers/user-id.component';
 import { CipoPatronTypeItemTypeComponent } from './record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component';
-import { AddEntityLocalFormComponent } from './record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component';
-import { AddEntityLocalComponent } from './record/formly/type/entity-typeahead/add-entity-local.component';
-import { EntityTypeaheadComponent } from './record/formly/type/entity-typeahead/entity-typeahead.component';
 import { OperationLogsDialogComponent } from './record/operation-logs/operation-logs-dialog/operation-logs-dialog.component';
 import { OperationLogsComponent } from './record/operation-logs/operation-logs.component';
 import { DocumentAdvancedSearchFormComponent } from './record/search-view/document-advanced-search-form/document-advanced-search-form.component';
@@ -211,18 +201,17 @@ import { AppInitializerService } from './service/app-initializer.service';
 import { BucketNameService } from './service/bucket-name.service';
 import { OrganisationService } from './service/organisation.service';
 import { RecordHandleErrorService } from './service/record.handle-error.service';
-import { ResourcesFilesService } from './service/resources-files.service';
-import { TypeaheadFactoryService, typeaheadToken } from './service/typeahead-factory.service';
-import { UiRemoteTypeaheadService } from './service/ui-remote-typeahead.service';
 import { PreviewEmailModule } from './shared/preview-email/preview-email.module';
 import { CurrentLibraryPermissionValidator } from './utils/permissions';
 import { CustomShortcutHelpComponent } from './widgets/custom-shortcut-help/custom-shortcut-help.component';
 import { FrontpageComponent } from './widgets/frontpage/frontpage.component';
-import { UploadFilesComponent } from './record/detail-view/document-detail-view/files-collections/upload-files/upload-files.component';
+
+import { EntityAutocompleteComponent } from './record/editor/formly/primeng/entity-autocomplete/entity-autocomplete.component';
+import { RemoteAutocompleteService as UiRemoteAutocompleteService } from './record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.service';
 
 /** Init application factory */
-export function appInitFactory(appInitializerService: AppInitializerService): () => Promise<any> {
-  return () => appInitializerService.load().toPromise();
+export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
+  return () => appInitializerService.load();
 }
 
 @NgModule({
@@ -239,7 +228,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     ItemTypeDetailViewComponent,
     LibrariesBriefViewComponent,
     LibraryComponent,
-    MenuComponent,
     PatronsBriefViewComponent,
     PatronTypesBriefViewComponent,
     PatronTypesDetailViewComponent,
@@ -289,14 +277,8 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     IllRequestDetailViewComponent,
     CustomShortcutHelpComponent,
     HoldingItemNoteComponent,
-    MenuSwitchLibraryComponent,
     LocalFieldComponent,
-    MenuUserServicesComponent,
-    MenuLanguageComponent,
-    MenuUserComponent,
     MenuDashboardComponent,
-    MenuMobileComponent,
-    SubMenuComponent,
     HoldingItemTemporaryItemTypeComponent,
     OperationLogsComponent,
     HoldingSharedViewComponent,
@@ -339,7 +321,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     ItemSwitchLocationStandaloneComponent,
     ItemSwitchLocationComponent,
     IssueEmailComponent,
-    EntityTypeaheadComponent,
     RemoteEntitiesDetailViewComponent,
     RemoteEntitiesOrganisationDetailViewComponent,
     EntitiesLocalDetailViewComponent,
@@ -350,7 +331,7 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     LocalPlaceDetailViewComponent,
     LocalWorkDetailViewComponent,
     RemoteTopicDetailViewComponent,
-    AddEntityLocalComponent,
+    AddEntityLocalFormComponent,
     AddEntityLocalFormComponent,
     StatisticsCfgBriefViewComponent,
     StatisticsCfgDetailViewComponent,
@@ -367,32 +348,31 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     LocalPageDetailComponent,
     RemotePageDetailComponent,
     ItemFeesComponent,
-    UploadFilesComponent
+    UploadFilesComponent,
+    MenuAppComponent,
+    MenuUserComponent,
+    MenuDisplayComponent,
+    EntityAutocompleteComponent,
   ],
   imports: [
     AppRoutingModule,
     BrowserAnimationsModule,
     BrowserModule,
-    BsDatepickerModule.forRoot(),
     BsDropdownModule.forRoot(),
     NgxChartsModule,
-    CollapseModule.forRoot(),
     FormsModule,
     HttpClientModule,
     ReactiveFormsModule,
     RecordModule,
-    TabsModule.forRoot(),
     TableModule,
-    TooltipModule.forRoot(),
-    PopoverModule.forRoot(),
     FormlyModule.forRoot({
       types: [
         { name: "cipo-pt-it", component: CipoPatronTypeItemTypeComponent },
         { name: "account-select", component: SelectAccountEditorWidgetComponent },
-        { name: "entityTypeahead", component: EntityTypeaheadComponent },
-        {name: 'repeat', component: RepeatTypeComponent},
-        {name: 'select-formly', component: FormlyFieldSelect },
-        {name: 'custom-field', component: FieldCustomInputTypeComponent }
+        { name: 'repeat', component: RepeatTypeComponent},
+        { name: 'select-formly', component: FormlyFieldSelect },
+        { name: 'custom-field', component: FieldCustomInputTypeComponent },
+        { name: 'entity-autocomplete', component: EntityAutocompleteComponent }
       ],
       wrappers: [
         { name: "user-id", component: UserIdComponent },
@@ -406,13 +386,13 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
         deps: [CoreConfigService, HttpClient],
       },
     }),
-    TypeaheadModule,
     HotkeysModule,
     SharedModule,
     LoadingBarHttpClientModule,
     PrimengImportModule,
     PreviewEmailModule,
-    FileUploadModule
+    FileUploadModule,
+    MenubarModule
   ],
   providers: [
     {
@@ -426,12 +406,10 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
       deps: [
         AppInitializerService,
         UserService,
-        AppConfigService,
-        TranslateService,
         OrganisationService,
-        LocalStorageService,
-        LibrarySwitchService,
-        TypeaheadFactoryService,
+        AppSettingsService,
+        AppConfigService,
+        TranslateService
       ],
       multi: true,
     },
@@ -445,28 +423,23 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
       useClass: UserCurrentLibraryInterceptor,
       multi: true,
     },
-    { provide: RemoteTypeaheadService, useExisting: UiRemoteTypeaheadService },
-    // Use the "multi" parameter to allow the recovery of several services in the injector.
-    { provide: typeaheadToken, useExisting: DocumentsTypeahead, multi: true },
-    { provide: typeaheadToken, useExisting: ItemsTypeahead, multi: true },
-    { provide: typeaheadToken, useExisting: MefTypeahead, multi: true },
-    { provide: typeaheadToken, useExisting: PatronsTypeahead, multi: true },
+    { provide: TranslateService, useExisting: NgCoreTranslateService },
+
+    { provide: RemoteAutocompleteService, useExisting: UiRemoteAutocompleteService },
+    { provide: remoteAutocompleteToken, useExisting: DocumentsRemoteService, multi: true },
+    { provide: remoteAutocompleteToken, useExisting: ItemsRemoteService, multi: true },
+    { provide: remoteAutocompleteToken, useExisting: MefRemoteService, multi: true },
+    { provide: remoteAutocompleteToken, useExisting: PatronsRemoteService, multi: true },
     {
       provide: CoreConfigService,
       useClass: AppConfigService,
     },
     {
       provide: LOCALE_ID,
-      useFactory: (translate: TranslateService) => translate.currentLanguage,
+      useFactory: (translate: TranslateService) => translate.currentLang,
       deps: [TranslateService],
     },
-    BsLocaleService,
-    MefTypeahead,
-    DocumentsTypeahead,
-    ItemsTypeahead,
-    PatronsTypeahead,
     MainTitlePipe,
-    MefTypeahead,
     TruncateTextPipe,
     CurrentLibraryPermissionValidator,
     ReceivedOrderPermissionValidator,
@@ -481,7 +454,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     CountryCodeTranslatePipe,
     { provide: CoreBucketNameService, useClass: BucketNameService },
     { provide: CoreRecordHandleErrorService, useClass: RecordHandleErrorService },
-    { provide: FilesService, useClass: ResourcesFilesService },
   ],
   bootstrap: [AppComponent],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
diff --git a/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.html b/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.html
index e9387b453..409f78995 100644
--- a/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.html
+++ b/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021 RERO
+  Copyright (C) 2021-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,28 +14,16 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="modal show d-block" role="dialog" (window:keypress)="checkinItemOnEnterKey($event)">
-  <div class="modal-dialog modal-dialog-centered" role="checkin">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" translate>Circulation action</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true" data-dismiss="modal" (click)="closeModal()">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body">
-        <div class="font-weight-bold" translate>
-         One item and one patron were found.
-        </div>
-      </div>
-      <div class="modal-footer">
-        <button id="action-patron" type="button" class="btn btn-outline-primary" (click)="setAction('patron')">
-          <i class="fa fa-user mr-1"></i> {{ 'Patron account' | translate }}
-        </button>
-        <button id="action-item" type="button" class="btn btn-primary" (click)="setAction('item')">
-          <i class="fa fa-file-o mr-1"></i> {{ 'Checkin the item' | translate }}
-        </button>
-      </div>
-    </div>
+<div (window:keypress)="checkinItemOnEnterKey($event)">
+  <div class="font-weight-bold" translate>
+    One item and one patron were found.
   </div>
 </div>
+<div>
+  <button id="action-patron" type="button" class="btn btn-outline-primary" (click)="setAction('patron')">
+    <i class="fa fa-user mr-1"></i> {{ 'Patron account' | translate }}
+  </button>
+  <button id="action-item" type="button" class="btn btn-primary" (click)="setAction('item')">
+    <i class="fa fa-file-o mr-1"></i> {{ 'Checkin the item' | translate }}
+  </button>
+</div>
diff --git a/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.ts b/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.ts
index 9389f9e13..6e236f853 100644
--- a/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.ts
+++ b/projects/admin/src/app/circulation/checkin/checkin-action/checkin-action.component.ts
@@ -14,8 +14,8 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component } from '@angular/core';
-import { BsModalService } from 'ngx-bootstrap/modal';
+import { Component, inject } from '@angular/core';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
 
 @Component({
   selector: 'admin-checkin-action',
@@ -23,22 +23,18 @@ import { BsModalService } from 'ngx-bootstrap/modal';
 })
 export class CheckinActionComponent {
 
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+
   /** Checkin action */
   public action: 'patron' | 'item';
 
-  /**
-   * Constructor
-   * @param modalService - BsModalService
-   */
-  constructor(private modalService: BsModalService) { }
-
   /**
    * Set checkin action selected by user
    * @param action - string
    */
   setAction(action: 'patron' | 'item') {
     this.action = action;
-    this.closeModal();
+    this.dynamicDialogRef.close(action);
   }
 
   checkinItemOnEnterKey(event: any) {
@@ -49,6 +45,6 @@ export class CheckinActionComponent {
 
   /** Close modal box */
   closeModal() {
-    this.modalService.hide();
+    this.dynamicDialogRef.close();
   }
 }
diff --git a/projects/admin/src/app/circulation/checkin/checkin.component.ts b/projects/admin/src/app/circulation/checkin/checkin.component.ts
index d507dd168..90b497cbb 100644
--- a/projects/admin/src/app/circulation/checkin/checkin.component.ts
+++ b/projects/admin/src/app/circulation/checkin/checkin.component.ts
@@ -15,14 +15,14 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
-import { Record, RecordService } from '@rero/ng-core';
+import { CONFIG, Record, RecordService } from '@rero/ng-core';
 import { ItemStatus, User, UserService } from '@rero/shared';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { forkJoin } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { Item, ItemAction, ItemNoteType } from '../../classes/items';
@@ -35,13 +35,23 @@ import { CheckinActionComponent } from './checkin-action/checkin-action.componen
   templateUrl: './checkin.component.html'
 })
 export class CheckinComponent implements OnInit {
+
+  private messageService: MessageService = inject(MessageService);
+  private dialogService: DialogService = inject(DialogService);
+  private userService: UserService = inject(UserService);
+  private recordService: RecordService = inject(RecordService);
+  private itemsService: ItemsService = inject(ItemsService);
+  private router: Router = inject(Router);
+  private translate: TranslateService = inject(TranslateService);
+  private patronService: PatronService = inject(PatronService);
+
   public placeholder = _('Please enter a patron card number or an item barcode.');
   public searchText = '';
   public patronInfo: User;
   public barcode: string;
   currentLibraryPid: string;
 
-  private _loggedUser: User;
+  private loggedUser: User;
 
   items = [];
 
@@ -54,33 +64,12 @@ export class CheckinComponent implements OnInit {
   /** current called item */
   private item: any;
 
-  /** Constructor
-   * @param userService: UserService
-   * @param recordService: RecordService
-   * @param itemsService: ItemsService
-   * @param router: Router
-   * @param translate: TranslateService
-   * @param toastService: ToastrService
-   * @param patronService: PatronService
-   * @param modalService: BsModalService
-   */
-  constructor(
-    private userService: UserService,
-    private recordService: RecordService,
-    private itemsService: ItemsService,
-    private router: Router,
-    private translate: TranslateService,
-    private toastService: ToastrService,
-    private patronService: PatronService,
-    private modalService: BsModalService
-  ) {}
-
   ngOnInit() {
-    this._loggedUser = this.userService.user;
+    this.loggedUser = this.userService.user;
     this.patronService.currentPatron$.subscribe(
       patron => this.patronInfo = patron
     );
-    this.currentLibraryPid = this._loggedUser.currentLibrary;
+    this.currentLibraryPid = this.loggedUser.currentLibrary;
     this.patronInfo = null;
     this.barcode = null;
   }
@@ -102,29 +91,36 @@ export class CheckinComponent implements OnInit {
   checkin(itemBarcode: string) {
     this.searchInputFocus = false;
     this.searchInputDisabled = true;
-    this.itemsService.checkin(itemBarcode, this._loggedUser.currentLibrary).subscribe(
-      item => {
+    this.itemsService.checkin(itemBarcode, this.loggedUser.currentLibrary).subscribe({
+      next: (item) => {
         // TODO: remove this when policy will be in place
-        if (item === null || item.location.organisation.pid !== this._loggedUser.currentOrganisation) {
-          this.toastService.error(
-            this.translate.instant('Item or patron not found!'),
-            this.translate.instant('Checkin')
-          );
+        if (item === null || item.location.organisation.pid !== this.loggedUser.currentOrganisation) {
+          this.messageService.add({
+            severity: 'error',
+            summary: this.translate.instant('Checkin'),
+            detail: this.translate.instant('Item or patron not found!'),
+            sticky: true,
+            closable: true
+          });
           this._resetSearchInput();
           return;
         }
         if (item.hasRequests) {
-          this.toastService.warning(
-            this.translate.instant('The item contains requests'),
-            this.translate.instant('Checkin')
-          );
+          this.messageService.add({
+            severity: 'warn',
+            summary: this.translate.instant('Checkin'),
+            detail: this.translate.instant('The item contains requests'),
+            life: CONFIG.MESSAGE_LIFE
+          });
         }
         switch (item.actionDone) {
           case ItemAction.return_missing:
-            this.toastService.warning(
-              this.translate.instant('The item has been returned from missing'),
-              this.translate.instant('Checkin')
-            );
+            this.messageService.add({
+              severity: 'warn',
+              summary: this.translate.instant('Checkin'),
+              detail: this.translate.instant('The item has been returned from missing'),
+              life: CONFIG.MESSAGE_LIFE
+            });
             break;
           case ItemAction.checkin:
             this.displayCirculationInformation(item, ItemNoteType.CHECKIN);
@@ -133,10 +129,12 @@ export class CheckinComponent implements OnInit {
             }
             if (item.status === ItemStatus.IN_TRANSIT) {
               const destination = item.loan.item_destination.library_name;
-              this.toastService.warning(
-                this.translate.instant('The item is in transit to {{ destination }}', {destination}),
-                this.translate.instant('Checkin')
-              );
+              this.messageService.add({
+                severity: 'warn',
+                summary: this.translate.instant('Checkin'),
+                detail: this.translate.instant('The item is in transit to {{ destination }}', {destination}),
+                life: CONFIG.MESSAGE_LIFE
+              });
             }
             break;
           case ItemAction.receive:
@@ -148,7 +146,7 @@ export class CheckinComponent implements OnInit {
         this.items.unshift(item);
         this._resetSearchInput();
       },
-      error => {
+      error: (error) => {
         if (this.item && this.items.findIndex(i => i.barcode === this.item.barcode) === -1) {
           // Reload item to have data up to date.
           this.itemsService.getItem(this.item.barcode).subscribe((item: any) => {
@@ -162,12 +160,12 @@ export class CheckinComponent implements OnInit {
             });
             this.items.unshift(item);
             // If no action could be done by the '/item/checkin' api, an error will be raised.
-            // catch this error to display it as a toastr message.
+            // catch this error to display it as a Toast message.
             this._checkinErrorManagement(error, item);
           });
         }
       }
-    );
+    });
   }
 
   /**
@@ -179,15 +177,15 @@ export class CheckinComponent implements OnInit {
       this.barcode = barcode;
       this.patronService
         .getPatron(barcode)
-        .subscribe(
-          () => {},
-          (error) => {
-            this.toastService.error(
-              error.message,
-              this.translate.instant('Checkin')
-            );
-          }
-        );
+        .subscribe({
+          error: (error) => this.messageService.add({
+            severity: 'error',
+            summary: this.translate.instant('Checkin'),
+            detail: error.message,
+            sticky: true,
+            closable: true
+          })
+      });
     } else {
       this.patronInfo = null;
       this.barcode = null;
@@ -199,7 +197,7 @@ export class CheckinComponent implements OnInit {
    */
   getPatronOrItem(barcode: string) {
     this.item = undefined;
-    const loggerOrg = this._loggedUser.currentOrganisation;
+    const loggerOrg = this.loggedUser.currentOrganisation;
     const query = `patron.barcode:${barcode} AND organisation.pid:${loggerOrg}`;
     const patronQuery = this.recordService
       .getRecords('patrons', query, 1, 1, [])
@@ -208,66 +206,78 @@ export class CheckinComponent implements OnInit {
       .getRecords('items', `barcode:${barcode}`, 1, 1, [])
       .pipe(map((result: Record) => result.hits));
     forkJoin([patronQuery, itemQuery])
-    .subscribe(([patron, item]: any[]) => {
-      if (patron.total.value === 0 && item.total.value === 0) {
-        this.toastService.warning(
-          this.translate.instant('Patron not found!'),
-          this.translate.instant('Checkin')
-        );
-      }
-      if (patron.total.value > 1 && item.total.value === 0) {
-        this.toastService.warning(
-          this.translate.instant('Found more than one patron.'),
-          this.translate.instant('Checkin')
-        );
-      }
-      if (patron.total.value === 1 && item.total.value === 1) {
-        const modalRef: BsModalRef = this.modalService.show(CheckinActionComponent, {
-          ignoreBackdropClick: true,
-          keyboard: true
-        });
-        modalRef.onHidden.subscribe(() => {
-          switch (modalRef.content.action) {
-            case 'patron':
-              this.router.navigate(
-                ['/circulation', 'patron', barcode, 'loan']
-              );
-              break;
-            case 'item':
-              this.checkin(barcode);
-              break;
-            default:
+    .subscribe({
+      next: ([patron, item]: any[]) => {
+        if (patron.total.value === 0 && item.total.value === 0) {
+          this.messageService.add({
+            severity: 'warn',
+            summary: this.translate.instant('Checkin'),
+            detail: this.translate.instant('Patron not found!'),
+            life: CONFIG.MESSAGE_LIFE
+          });
+        }
+        if (patron.total.value > 1 && item.total.value === 0) {
+          this.messageService.add({
+            severity: 'warn',
+            summary: this.translate.instant('Checkin'),
+            detail: this.translate.instant('Found more than one patron.'),
+            life: CONFIG.MESSAGE_LIFE
+          });
+        }
+        if (patron.total.value === 1 && item.total.value === 1) {
+          const ref: DynamicDialogRef = this.dialogService.open(CheckinActionComponent, {
+            header: this.translate.instant('Circulation action'),
+            width: '50vw',
+          })
+          ref.onClose.subscribe((action: string) => {
+            if (action) {
+              switch (action) {
+                case 'patron':
+                  this.router.navigate(
+                    ['/circulation', 'patron', barcode, 'loan']
+                  );
+                  break;
+                case 'item':
+                  this.checkin(barcode);
+                  break;
+                default:
+                  this._resetSearchInput();
+                  break;
+              }
+            }
+          });
+        } else if (item.total.value === 1) {
+            this.item = item.hits[0].metadata;
+            // Check if the item is already into the item list. If it happens,
+            // just notify the user and clear the form.
+            if (this.items.find(it => it.barcode === barcode)) {
+              this.messageService.add({
+                severity: 'warn',
+                summary: this.translate.instant('Checkin'),
+                detail: this.translate.instant('The item is already in the list.'),
+                life: CONFIG.MESSAGE_LIFE
+              });
               this._resetSearchInput();
-              break;
-          }
-        });
-      } else if (item.total.value === 1) {
-          this.item = item.hits[0].metadata;
-          // Check if the item is already into the item list. If it happens,
-          // just notify the user and clear the form.
-          if (this.items.find(it => it.barcode === barcode)) {
-            this.toastService.warning(
-              this.translate.instant('The item is already in the list.'),
-              this.translate.instant('Checkin')
+            } else {
+              this.checkin(barcode);
+            }
+        } else if (patron.total.value === 1) {
+            this.router.navigate(
+              ['/circulation', 'patron', barcode, 'loan']
             );
-            this._resetSearchInput();
-          } else {
-            this.checkin(barcode);
-          }
-      } else if (patron.total.value === 1) {
-          this.router.navigate(
-            ['/circulation', 'patron', barcode, 'loan']
-          );
-      }
-    },
-    error => this.toastService.error(
-        error.message,
-        this.translate.instant('Checkin')
-      )
-    );
+        }
+      },
+      error: (error) => this.messageService.add({
+        severity: 'error',
+        summary: this.translate.instant('Checkin'),
+        detail: error.message,
+        sticky: true,
+        closable: true
+      })
+    });
   }
 
-  /** display a circulation infos about an item as a permanent toastr message
+  /** display a circulation infos about an item as a permanent Toast message
    * @param item: the item
    * @param noteType: the note type to display
    */
@@ -288,27 +298,23 @@ export class CheckinComponent implements OnInit {
       }
     }
     if (message.length > 0) {
-      this.toastService.warning(
-        message.join(),
-        this.translate.instant('Checkin'),
-        {
-          enableHtml: true,
-          closeButton: true,    // add a close button to the toastr message
-          disableTimeOut: true, // permanent toastr message (until click on 'close' button)
-          tapToDismiss: false   // toastr message only close when click on the 'close' button.
-        }
-      );
+      this.messageService.add({
+        severity: 'warn',
+        summary: this.translate.instant('Checkin'),
+        detail: message.join(),
+        life: CONFIG.MESSAGE_LIFE
+      });
     }
   }
 
 
-  /** create the most relevant message concerning a checkin operation error and display it as a toastr
+  /** create the most relevant message concerning a checkin operation error and display it as a Toast
    *
    * @param error: the raised error
    * @param item: the current item
    */
   private _checkinErrorManagement(error: any, item: Item) {
-    // get the error message from the raised error. This will be the toastr message core.
+    // get the error message from the raised error. This will be the Toast message core.
     let message = (error.hasOwnProperty('error') && error.error.hasOwnProperty('status'))
       ? error.error.status.replace(/^error:/, '').trim()
       : error.message;
@@ -329,16 +335,12 @@ export class CheckinComponent implements OnInit {
         message += `<br />${additionalMessage}`;
       }
     }
-    this.toastService.warning(
-      message,
-      this.translate.instant('Checkin'),
-      {
-        enableHtml: true,
-        closeButton: true,
-        disableTimeOut: true,
-        tapToDismiss: false
-      }
-    );
+    this.messageService.add({
+      severity: 'warn',
+      summary: this.translate.instant('Checkin'),
+      detail: message,
+      life: CONFIG.MESSAGE_LIFE
+    });
     this._resetSearchInput();
   }
 
@@ -360,10 +362,13 @@ export class CheckinComponent implements OnInit {
 
   hasFees(event: boolean) {
     if (event) {
-      this.toastService.error(
-        this.translate.instant('The item has fees'),
-        this.translate.instant('Checkin')
-      );
+      this.messageService.add({
+        severity: 'error',
+        summary: this.translate.instant('Checkin'),
+        detail: this.translate.instant('The item has fees'),
+        sticky: true,
+        closable: true
+      });
     }
   }
 
diff --git a/projects/admin/src/app/circulation/circulation.module.ts b/projects/admin/src/app/circulation/circulation.module.ts
index db6063381..6052f46e7 100644
--- a/projects/admin/src/app/circulation/circulation.module.ts
+++ b/projects/admin/src/app/circulation/circulation.module.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,17 +14,18 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-
-import { CommonModule } from '@angular/common';
+import { CommonModule, CurrencyPipe } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormlyModule } from '@ngx-formly/core';
 import { RecordModule } from '@rero/ng-core';
 import { SharedModule } from '@rero/shared';
-import { CollapseModule } from 'ngx-bootstrap/collapse';
-import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
-import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
+import { ButtonModule } from 'primeng/button';
+import { DynamicDialogModule } from 'primeng/dynamicdialog';
+import { MenuModule } from 'primeng/menu';
+import { RippleModule } from 'primeng/ripple';
+import { TabMenuModule } from 'primeng/tabmenu';
+import { TagModule } from 'primeng/tag';
 import { JournalVolumePipe } from 'projects/public-search/src/app/pipe/journal-volume.pipe';
 import { CheckinActionComponent } from './checkin/checkin-action/checkin-action.component';
 import { CheckinComponent } from './checkin/checkin.component';
@@ -42,6 +43,7 @@ import { HistoryLogComponent } from './patron/history/history-log/history-log.co
 import { HistoryComponent } from './patron/history/history.component';
 import { IllRequestItemComponent } from './patron/ill-request/ill-request-item/ill-request-item.component';
 import { IllRequestComponent } from './patron/ill-request/ill-request.component';
+import { CirculationSettingsComponent } from './patron/loan/circulation-settings/circulation-settings.component';
 import { FixedDateFormComponent } from './patron/loan/fixed-date-form/fixed-date-form.component';
 import { LoanComponent } from './patron/loan/loan.component';
 import { MainComponent } from './patron/main/main.component';
@@ -102,19 +104,26 @@ import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
         CancelRequestButtonComponent,
         IllRequestComponent,
         IllRequestItemComponent,
-        JournalVolumePipe
+        JournalVolumePipe,
+        CirculationSettingsComponent
     ],
     imports: [
-        BsDropdownModule.forRoot(),
-        BsDatepickerModule.forRoot(),
         CirculationRoutingModule,
-        CollapseModule.forRoot(),
         CommonModule,
         FormsModule,
         FormlyModule,
         ReactiveFormsModule,
         RecordModule,
-        SharedModule
+        SharedModule,
+        MenuModule,
+        DynamicDialogModule,
+        TagModule,
+        ButtonModule,
+        TabMenuModule,
+        RippleModule
+    ],
+    providers: [
+      CurrencyPipe
     ]
 })
 export class CirculationModule { }
diff --git a/projects/admin/src/app/circulation/item/item.component.html b/projects/admin/src/app/circulation/item/item.component.html
index ed3ee0ce3..b4d8f691a 100644
--- a/projects/admin/src/app/circulation/item/item.component.html
+++ b/projects/admin/src/app/circulation/item/item.component.html
@@ -25,23 +25,21 @@
     <!-- ACTION BUTTONS -->
     <div class="actions">
       @if (patron) {
-        <button class="btn btn-sm btn-outline-secondary"
-                [disabled]="!item.actions.includes(itemAction.extend_loan)"
-                [attr.id]="item.barcode | idAttribute:{prefix: 'item', suffix: 'renew-button'}"
-                (click)="extendLoanClick($event)" >
-          <i class="fa fa-refresh pr-1"></i>
-          {{ 'Renew' | translate }}
-        </button>
+        <p-button
+          icon="fa fa-refresh pr-1"
+          [label]="'Renew'|translate"
+          severity="secondary"
+          [outlined]="true"
+          [disabled]="!item.actions.includes(itemAction.extend_loan)"
+          [id]="item.barcode | idAttribute:{prefix: 'item', suffix: 'renew-button'}"
+          (onClick)="extendLoanClick($event)"
+        />
       }
     </div>
     <!-- BARCODE -->
     <div name="barcode" class="col-2 d-flex">
       @if (!item.actions || item.loan || totalAmountOfFee || item.pending_loans || notifications$) {
-        <button type="button" class="btn-show-more"
-                [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
-                (click)="isCollapsed = !isCollapsed"
-                [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
-        </button>
+        <shared-open-close-button [collapsed]="isCollapsed" (status)="isCollapsed = $event" />
       }
       <div>
         <a [routerLink]="['/records','items','detail', item.pid]">{{ item.barcode }}</a>
@@ -124,22 +122,22 @@
           <!-- RENEWALS, FEES, REQUESTS -->
           <li>
             @if (isCollapsed && item.loan && item.loan.extension_count && (!item.actionDone || item.actionDone !== itemAction.checkin)) {
-              <span title="{{ 'Renewals' | translate }}" class="badge badge-secondary font-weight-normal mr-1">
-                {{ item.loan.extension_count }} <i class="fa fa-refresh"></i>
-              </span>
+              <p-tag [title]="'Renewals'|translate" severity="secondary" styleClass="mr-1">
+                {{ item.loan.extension_count }} <i class="fa fa-refresh ml-1"></i>
+              </p-tag>
             }
             @if (isCollapsed && totalAmountOfFee > 0) {
-              <span title="{{ 'Fees' | translate }}" class="badge badge-warning font-weight-normal mr-1">
+              <p-tag [title]="'Fees'|translate" severity="warning" styleClass="mr-1">
                 {{ totalAmountOfFee | currency: organisation.default_currency }}
-              </span>
+              </p-tag>
             }
             @if (isCollapsed && item.pending_loans && item.pending_loans.length) {
-              <span title="{{ 'Requests' | translate }}" class="badge badge-secondary font-weight-normal mr-1">
+              <p-tag [title]="'Requests'|translate" severity="secondary" styleClass="mr-1">
                 <i class="fa fa-shopping-basket pr-1"></i>
                 <a class="text-white" [routerLink]="['/circulation', 'patron', item.pending_loans[0].patron.barcode, 'loan']">
                   {{ item.pending_loans[0].patron.name }}
                 </a>
-              </span>
+              </p-tag>
             }
           </li>
         </ul>
@@ -172,7 +170,7 @@
     <!-- COLLAPSED DETAILS -->
     @if (!isCollapsed) {
       <div name="collapsed-details" class="col-12 mt-2">
-        <dl class="row">
+        <dl class="grid">
           <dt class="offset-1 col-sm-3 col-md-2 col-lg-1 label-title" translate>Call number</dt>
           <dd class="col-sm-8 col-md-9 col-lg-10">
             <shared-inherited-call-number [item]="item"></shared-inherited-call-number>
@@ -199,10 +197,10 @@
           @if (item.loan && item.loan.extension_count) {
             <dt class="offset-1 col-sm-3 col-md-2 col-lg-1 label-title" translate>Renewals</dt>
             <dd name="renewals" class="col-sm-8 col-md-9 col-lg-10">
-              <span class="badge badge-secondary">
+              <p-tag severity="secondary" styleClass="mr-1">
                 {{ item.loan.extension_count }}
-                <i class="fa fa-refresh"></i>
-              </span>
+                <i class="fa fa-refresh ml-1"></i>
+              </p-tag>
             </dd>
           }
           @if (item.loan && item.actionDone === 'checkin' && item?.loan?.last_end_date) {
@@ -214,9 +212,9 @@
           @if (item.loan && totalAmountOfFee > 0) {
             <dt class="offset-1 col-sm-3 col-md-getTransitLocationPid2 col-lg-1 label-title" translate>Fees</dt>
             <dd name="fees" class="col-sm-8 col-md-9 col-lg-10">
-              <span class="badge badge-warning font-weight-normal">
+              <p-tag severity="warning" styleClass="mr-1">
                 {{ totalAmountOfFee | currency: organisation.default_currency }}
-              </span>
+              </p-tag>
             </dd>
           }
           @if (item.loan && notifications$ | async; as notifications) {
@@ -245,14 +243,16 @@
             <dt class="offset-1 col-sm-3 col-md-2 col-lg-1 label-title" translate>Requests</dt>
             <dd name="request-for"class="col-sm-8 col-md-9 col-lg-10">
               @if (item.pending_loans.length > 1) {
-                <span class="badge badge-info">{{ item.pending_loans.length }}</span>
+                <p-tag severity="info" styleClass="mr-1">
+                  {{ item.pending_loans.length }}
+                </p-tag>
                 <i class="fa fa-long-arrow-right px-2"></i>
               }
               @for (request of item.pending_loans; track request) {
-                <span class="badge badge-secondary font-weight-normal mr-2">
+                <p-tag severity="secondary" styleClass="mr-1">
                   <i class="fa fa-shopping-basket pr-1"></i>
                   <a class="text-white" [routerLink]="['/circulation', 'patron', request.patron.barcode, 'loan']">{{ request.patron.name }}</a>
-                </span>
+                </p-tag>
               }
             </dd>
           }
diff --git a/projects/admin/src/app/circulation/item/item.component.ts b/projects/admin/src/app/circulation/item/item.component.ts
index 9f21cbf28..f2bc990cb 100644
--- a/projects/admin/src/app/circulation/item/item.component.ts
+++ b/projects/admin/src/app/circulation/item/item.component.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { PatronTransactionService } from '@app/admin/circulation/services/patron-transaction.service';
 import { Organisation } from '@app/admin/classes/core';
 import { Item, ItemAction, ItemNote, ItemNoteType } from '@app/admin/classes/items';
@@ -35,6 +35,13 @@ import { map } from 'rxjs/operators';
 })
 export class ItemComponent implements OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private patronTransactionService: PatronTransactionService = inject(PatronTransactionService);
+  private itemService: ItemsService = inject(ItemsService);
+  private permissionsService: PermissionsService = inject(PermissionsService);
+  private userService: UserService = inject(UserService);
+
   NOTEAPI =  ItemNoteType.API;
 
   // COMPONENT ATTRIBUTES ====================================================
@@ -81,26 +88,6 @@ export class ItemComponent implements OnInit {
     return this.permissionsService.canAccessDebugMode();
   }
 
-
-  // CONSTRUCTOR & HOOKS ====================================================
-  /**
-   * Constructor
-   * @param recordService - Record Service
-   * @param organisationService - Organisation Service
-   * @param patronTransactionService - Patron transaction Service
-   * @param itemService - Item Service
-   * @param permissionsService - PermissionsService
-   * @param userService - UserService
-   */
-  constructor(
-    private recordService: RecordService,
-    private organisationService: OrganisationService,
-    private patronTransactionService: PatronTransactionService,
-    private itemService: ItemsService,
-    private permissionsService: PermissionsService,
-    private userService: UserService
-  ) {  }
-
   /** OnInit hook */
   ngOnInit() {
     this.loan = (this.item && this.item.loan) ? new Loan(this.item.loan) : null;
diff --git a/projects/admin/src/app/circulation/items-list/items-list.component.html b/projects/admin/src/app/circulation/items-list/items-list.component.html
index ee2109eb7..6e58e63a3 100644
--- a/projects/admin/src/app/circulation/items-list/items-list.component.html
+++ b/projects/admin/src/app/circulation/items-list/items-list.component.html
@@ -21,25 +21,22 @@
 }
 @if ((checkedOutItems && checkedOutItems.length > 0) || (checkedInItems && checkedInItems.length > 0)) {
   <!-- HEADER -->
-  <div class="row mb-1 d-flex align-items-center bg-dark text-white rounded p-1">
+  <div class="grid mb-1 d-flex align-items-center bg-dark text-white rounded p-1">
     <div class="col-2" >
-      <button type="button" class="btn-show-more"
-              [ngClass]="{'btn-expanded': !allCollapsed, 'btn-collapsed': allCollapsed}"
-              (click)="allCollapsed = !allCollapsed"
-              [attr.aria-expanded]="!allCollapsed" aria-controls="collapse">
-      </button>
+      <shared-open-close-button (status)="allCollapsed = $event" />
       {{ 'Items' | translate }}
     </div>
     <div class="col-6" translate>Document</div>
     <div class="col-3" translate>Circulation info</div>
     <div class="col-1">
       @if (patron) {
-        <button class="btn btn-primary float-right btn-sm my-1"
-                (click)="extendAllLoansClick()"
-                [disabled]="loansToExtend.length < 1"
-                id="renew-all-button"
-                translate
-        >Renew all</button>
+        <p-button
+          id="renew-all-button"
+          [label]="'Renew all'|translate"
+          [disabled]="loansToExtend.length < 1"
+          styleClass="float-right my-1"
+          (onClick)="extendAllLoansClick()"
+        />
       }
     </div>
   </div>
diff --git a/projects/admin/src/app/circulation/main-request/main-request.component.ts b/projects/admin/src/app/circulation/main-request/main-request.component.ts
index 90abb35ef..12893940c 100644
--- a/projects/admin/src/app/circulation/main-request/main-request.component.ts
+++ b/projects/admin/src/app/circulation/main-request/main-request.component.ts
@@ -14,12 +14,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
+import { CONFIG } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
 import moment from 'moment';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
 import { interval, Subscription } from 'rxjs';
 import { ItemsService } from '../../service/items.service';
 
@@ -29,6 +30,11 @@ import { ItemsService } from '../../service/items.service';
 })
 export class MainRequestComponent implements OnInit, OnDestroy {
 
+  private userService: UserService = inject(UserService);
+  private itemsService: ItemsService = inject(ItemsService);
+  private translateService: TranslateService = inject(TranslateService);
+  private messageService = inject(MessageService);
+
   // COMPONENT ATTRIBUTES ==================================================================
   /** options used for auto-refresh select box */
   public refreshOptions = [
@@ -74,21 +80,6 @@ export class MainRequestComponent implements OnInit, OnDestroy {
   /** the sort criteria used */
   private sortCriteria = this.sortingCriteria[1].value;
 
-
-  // COMPONENT CONSTRUCTOR ===========================================================
-  /** Constructor
-   * @param userService: User Service
-   * @param itemsService: Items Service
-   * @param translateService: Translate Service
-   * @param toastService: Toastr Service
-   */
-  constructor(
-    private userService: UserService,
-    private itemsService: ItemsService,
-    private translateService: TranslateService,
-    private toastService: ToastrService,
-  ) {}
-
   /** OnInit hook */
   ngOnInit() {
     const { user } = this.userService;
@@ -182,10 +173,12 @@ export class MainRequestComponent implements OnInit, OnDestroy {
     this.searchText = searchText;
     const item = this.items.find(currItem => currItem.barcode === searchText);
     if (item === undefined) {
-      this.toastService.warning(
-        this.translateService.instant('No request corresponding to the given item has been found.'),
-        this.translateService.instant('request')
-      );
+      this.messageService.add({
+        severity: 'warn',
+        summary: this.translateService.instant('request'),
+        detail: this.translateService.instant('No request corresponding to the given item has been found.'),
+        life: CONFIG.MESSAGE_LIFE
+      });
       this._resetSearchInput();
     } else {
       /*const items = this.items;
@@ -193,10 +186,12 @@ export class MainRequestComponent implements OnInit, OnDestroy {
       this.itemsService.doValidateRequest(item, this.libraryPid).subscribe(
         newItem => {
           this._sortingRequestedLoans(this.items.map(currItem => (currItem.pid === newItem.pid) ? newItem : currItem));
-          this.toastService.warning(
-            this.translateService.instant('The item is ').concat(this.translateService.instant(newItem.status)),
-            this.translateService.instant('request')
-          );
+          this.messageService.add({
+            severity: 'warn',
+            summary: this.translateService.instant('request'),
+            detail: this.translateService.instant('The item is ').concat(this.translateService.instant(newItem.status)),
+            life: CONFIG.MESSAGE_LIFE
+          });
           this._resetSearchInput();
         }
       );
diff --git a/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.ts b/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.ts
index c0a4b9bc5..1cac3d87b 100644
--- a/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.ts
+++ b/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { LoanState } from '@app/admin/classes/loans';
 import { RecordService } from '@rero/ng-core';
 
@@ -26,6 +26,8 @@ import { RecordService } from '@rero/ng-core';
 })
 export class RequestedItemComponent implements OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+
   // COMPONENT ATTRIBUTES ====================================================
 
   // Input/Output attributes
@@ -44,13 +46,6 @@ export class RequestedItemComponent implements OnInit {
   /** reference to LoanState class :: To use LoanState into template */
   LoanState = LoanState;
 
-  // CONSTRUCTOR & HOOKS ====================================================
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   */
-  constructor(private recordService: RecordService) {}
-
   /** OnInit hook */
   ngOnInit() {
     if (this.item) {
diff --git a/projects/admin/src/app/circulation/patron/cancel-request-button.component.ts b/projects/admin/src/app/circulation/patron/cancel-request-button.component.ts
index 43a86b155..531a307ac 100644
--- a/projects/admin/src/app/circulation/patron/cancel-request-button.component.ts
+++ b/projects/admin/src/app/circulation/patron/cancel-request-button.component.ts
@@ -14,12 +14,12 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
 import { LoanService } from '@app/admin/service/loan.service';
 import { TranslateService } from '@ngx-translate/core';
+import { CONFIG } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
 
 @Component({
   selector: 'admin-cancel-request-button',
@@ -27,7 +27,7 @@ import { ToastrService } from 'ngx-toastr';
   @if (canCancelRequest()) {
     <button type="button"
             class="btn btn-outline-danger btn-sm"
-            (click)="showCancelRequestDialog()"
+            (click)="showCancelRequestDialog($event)"
             name="cancel">
       <i class="fa fa-trash-o" aria-hidden="true"></i>
     </button>
@@ -43,26 +43,17 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class CancelRequestButtonComponent {
 
+  loanService: LoanService = inject(LoanService);
+  userService: UserService = inject(UserService);
+  translateService: TranslateService = inject(TranslateService);
+  messageService: MessageService = inject(MessageService);
+
   /** Loan record */
   @Input() loan: any;
 
   /** Informs parent component to remove request when it is cancelled */
   @Output() cancelRequestEvent = new EventEmitter<any>();
 
-  /**
-   * Constructor
-   * @param loanService - LoanService
-   * @param userService - UserService
-   * @param translateService - TranslateService
-   * @param toastrService - ToastrService
-   */
-  public constructor(
-    private loanService: LoanService,
-    private userService: UserService,
-    private translateService: TranslateService,
-    private toastrService: ToastrService
-  ) {}
-
   /**
    * Can cancel a loan request
    * @returns true if it is possible to cancel a loan
@@ -72,27 +63,26 @@ export class CancelRequestButtonComponent {
   }
 
   /** Show a confirmation dialog box for cancel request. */
-  showCancelRequestDialog(): void {
-    this.loanService.cancelRequestDialog().subscribe((confirm: boolean) => {
-      if (confirm) {
-        this.loanService.cancelLoan(
-          this.loan.metadata.item.pid,
-          this.loan.metadata.pid,
-          this.userService.user.currentLibrary
-        ).subscribe((item: any) => {
-          let message = this.translateService.instant("The request has been cancelled.");
-          if (item?.pending_loans?.length > 0) {
-            message += "<br>";
-            message += this.translateService.instant("The item contains requests.");
-          }
-          this.toastrService.warning(
-            message,
-            this.translateService.instant('Request'),
-            { enableHtml: true }
-          );
-          this.cancelRequestEvent.emit(this.loan.id);
+  showCancelRequestDialog(event: Event): void {
+    this.loanService.cancelRequestDialog(event, () => {
+      this.loanService.cancelLoan(
+        this.loan.metadata.item.pid,
+        this.loan.metadata.pid,
+        this.userService.user.currentLibrary
+      ).subscribe((item: any) => {
+        let message = this.translateService.instant("The request has been cancelled.");
+        if (item?.pending_loans?.length > 0) {
+          message += "<br>";
+          message += this.translateService.instant("The item contains requests.");
+        }
+        this.messageService.add({
+          severity: 'warn',
+          summary: this.translateService.instant('Request'),
+          detail: message,
+          life: CONFIG.MESSAGE_LIFE
         });
-      }
+        this.cancelRequestEvent.emit(this.loan.id);
+      });
     });
   }
 }
diff --git a/projects/admin/src/app/circulation/patron/card/card.component.ts b/projects/admin/src/app/circulation/patron/card/card.component.ts
index 59fceb236..f1bd94e0d 100644
--- a/projects/admin/src/app/circulation/patron/card/card.component.ts
+++ b/projects/admin/src/app/circulation/patron/card/card.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,10 +14,10 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import moment from 'moment';
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
 import { getBootstrapLevel } from '../../../utils/utils';
 import { CirculationService } from '../../services/circulation.service';
+import { DateTime } from 'luxon';
 
 @Component({
   selector: 'admin-circulation-patron-detailed',
@@ -26,6 +26,8 @@ import { CirculationService } from '../../services/circulation.service';
 })
 export class CardComponent {
 
+  private circulationService: CirculationService = inject(CirculationService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** the patron */
   @Input() patron: any;
@@ -53,35 +55,26 @@ export class CardComponent {
   /** Get the patron age */
   get patronAge(): number {
     if (this.patron && this.patron.birth_date) {
-      return moment().diff(this.patron.birth_date, 'years');
+      const birthDate = DateTime.fromISO(this.patron.birth_date);
+      return Math.floor(DateTime.now().diff(birthDate, 'years').years);
     }
   }
 
   /** Defined if it's the birthday of the patron */
   get isBirthday(): boolean {
     if (this.patron && this.patron.birth_date) {
-      const today = moment().format('YYYY-MM-DD');
-      const age = moment(today).diff(this.patron.birth_date, 'years', true);
-      return age % 1 === 0;
+      const today = DateTime.fromISO(DateTime.now().toFormat('yyyy-M-d'));
+      const birthDate = DateTime.fromISO(this.patron.birth_date);
+      return today.diff(birthDate, 'years').years % 1 === 0;
     }
     return false;
   }
 
   /** Get the circulation messages about the loaded patron if exists */
   get circulationMessages(): Array<{type: string, content: string}> {
-    return (this.circulationService.hasOwnProperty('circulationInformations'))
-      ? this.circulationService.circulationInformations.messages
-      : [];
+    return this.circulationService.messages();
   }
 
-  // CONSTRUCTOR ==============================================================
-  /**
-   * constructor
-   * @param circulationService - CirculationService
-   */
-  constructor(private circulationService: CirculationService) {}
-
-
   // COMPONENT FUNCTIONS ======================================================
   /** Clear current patron */
   clear(): void {
diff --git a/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.html b/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.html
index 3a2080068..8e105c0bf 100644
--- a/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.html
+++ b/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.html
@@ -15,24 +15,15 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (form) {
-  <div class="modal show d-block" role="dialog">
-    <div class="modal-dialog modal-dialog-centered" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" translate>Update Patron Password</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true" data-dismiss="modal" (click)="closeModal()">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body">
-          <form [formGroup]="form" (ngSubmit)="submit(patron, model)">
-            <formly-form [form]="form" [fields]="formFields" [model]="model"></formly-form>
-            <div class="text-right">
-              <button id="change-password-submit-button" class="btn btn-primary" [disabled]="!form.valid" translate>Submit</button>
-            </div>
-          </form>
-        </div>
-      </div>
-    </div>
+<form [formGroup]="form" (ngSubmit)="submit(patron, model)">
+  <formly-form [form]="form" [fields]="formFields" [model]="model"></formly-form>
+  <div class="text-right">
+    <p-button
+      type="submit"
+      id="change-password-submit-button"
+      [label]="'Submit'|translate"
+      [disabled]="!form.valid"
+    />
   </div>
+</form>
 }
diff --git a/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.spec.ts b/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.spec.ts
index e01229fbf..eb3254590 100644
--- a/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.spec.ts
+++ b/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -18,7 +18,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
 import { CirculationModule } from '../../circulation.module';
 import { ChangePasswordFormComponent } from './change-password-form.component';
 
@@ -35,7 +34,6 @@ describe('ChangePasswordFormComponent', () => {
         CirculationModule
       ],
       providers: [
-        BsModalRef
       ]
     })
       .compileComponents();
diff --git a/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.ts b/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.ts
index 0a246896c..26fcabf94 100644
--- a/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.ts
+++ b/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.ts
@@ -15,13 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
+import { CONFIG } from '@rero/ng-core';
 import { User, UserApiService } from '@rero/shared';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
 @Component({
   selector: 'admin-change-password-form',
@@ -29,6 +30,12 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class ChangePasswordFormComponent implements OnInit {
 
+  private messageService: MessageService = inject(MessageService);
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
+  private translateService: TranslateService = inject(TranslateService);
+  private userApiService: UserApiService = inject(UserApiService);
+
   /** patron to change the password */
   patron: User;
 
@@ -41,65 +48,48 @@ export class ChangePasswordFormComponent implements OnInit {
   /** form fields */
   formFields: FormlyFieldConfig[];
 
-  /**
-   * Constructor
-   * @param modalService - BsModalService
-   * @param bsModalRef - BsModalRef
-   * @param translateService - TranslateService
-   * @param toastr - ToastrService
-   * @param userApiService - UserApiService
-   */
-  constructor(
-    private modalService: BsModalService,
-    private bsModalRef: BsModalRef,
-    private translateService: TranslateService,
-    private toastr: ToastrService,
-    private userApiService: UserApiService
-  ) { }
-
-  /**
-   * Component initialization.
-   */
   ngOnInit() {
-    const initialState: any = this.modalService.config.initialState;
-    if (!initialState.hasOwnProperty('patron')) {
+    this.patron = this.dynamicDialogConfig.data.patron;
+    if (!this.patron) {
       this.closeModal();
     }
-    this.patron = initialState.patron;
-    this._initForm();
+    this.initForm();
   }
 
   /**
    * Submit form
+   * @param patron - Object
    * @param model - Object
    */
-  submit(patron, model) {
-    this.userApiService.changePassword(patron.username, model.password).subscribe(
-      () => {
-        this.toastr.success(
-          this.translateService.instant('The patron password has been changed.'),
-        );
+  submit(patron: any, model: any) {
+    this.userApiService.changePassword(patron.username, model.password).subscribe({
+      next: () => {
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('Patron'),
+          detail: this.translateService.instant('The patron password has been changed.'),
+          life: CONFIG.MESSAGE_LIFE
+        });
         this.closeModal();
       },
-      (resp) => {
+      error: (resp) => {
         let error = this.translateService.instant('An error has occurred.');
         if (resp.error && resp.error.message) {
           error = `${error}: (${resp.error.message})`;
         }
-        this.toastr.error(
-          error,
-          this.translateService.instant('Update Patron Password'),
-          { disableTimeOut: true }
-        );
+        this.messageService.add({
+          severity: 'error',
+          summary: this.translateService.instant('Patron'),
+          detail: `${this.translateService.instant('Update Patron Password')}.<br/>${error}`,
+          sticky: true,
+          closable: true
+        });
         this.closeModal();
       }
-    );
+    });
   }
 
-  /**
-   * Initialize formly form.
-   */
-  private _initForm() {
+  private initForm() {
     if (this.patron) {
       this.formFields = [
         {
@@ -121,11 +111,7 @@ export class ChangePasswordFormComponent implements OnInit {
     }
   }
 
-  /**
-   * Close modal dialog
-   * @param event - Event
-   */
   closeModal() {
-    this.bsModalRef.hide();
+    this.dynamicDialogRef.close();
   }
 }
diff --git a/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.ts b/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.ts
index 3e29c4e8f..9987dcc62 100644
--- a/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.ts
+++ b/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { OperationLogsApiService } from '@app/admin/api/operation-logs-api.service';
 import { ProvisionActivityType } from '@rero/shared';
 
@@ -25,6 +25,8 @@ import { ProvisionActivityType } from '@rero/shared';
 })
 export class HistoryLogComponent {
 
+  private operationLogsApiService: OperationLogsApiService = inject(OperationLogsApiService);
+
   /** Log to display */
   @Input() log: any;
 
@@ -37,16 +39,10 @@ export class HistoryLogComponent {
   /** Checkout record operation logs */
   checkout: any = null;
 
-  /**
-   * Constructor
-   * @param operationLogsApiService - OperationLogsApiService
-   */
-  constructor(private _operationLogsApiService: OperationLogsApiService) {}
-
   /** Load checkout */
   loadCheckout() {
     if (this.checkout === null) {
-      this._operationLogsApiService
+      this.operationLogsApiService
         .getHistoryByLoanPid(this.log.metadata.loan.pid, 'checkout')
         .subscribe((log: any) => {
           this.checkout = log;
diff --git a/projects/admin/src/app/circulation/patron/history/history.component.ts b/projects/admin/src/app/circulation/patron/history/history.component.ts
index db719bfc7..f9a3870c0 100644
--- a/projects/admin/src/app/circulation/patron/history/history.component.ts
+++ b/projects/admin/src/app/circulation/patron/history/history.component.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
@@ -28,19 +28,12 @@ import { PatronService } from '../../../service/patron.service';
 })
 export class HistoryComponent implements OnInit {
 
+  private patronService: PatronService = inject(PatronService);
+  private operationLogsApiService: OperationLogsApiService = inject(OperationLogsApiService);
+
   /** History logs */
   historyLogs$: Observable<any>;
 
-  /**
-   * Constructor
-   * @param patronService - PatronService
-   * @param operationLogsApiService - OperationLogsApiService
-   */
-  constructor(
-    private patronService: PatronService,
-    private operationLogsApiService: OperationLogsApiService
-  ) {}
-
   /** OnInit hook */
   ngOnInit() {
     this.historyLogs$ = this.patronService.currentPatron$.pipe(
diff --git a/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.ts b/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.ts
index 7e9a8d4bf..1905e734e 100644
--- a/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.ts
+++ b/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.ts
@@ -15,10 +15,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { IllRequestsService } from '@app/admin/service/ill-requests.service';
 
-
 @Component({
   selector: 'admin-ill-request-item',
   templateUrl: './ill-request-item.component.html',
@@ -26,19 +25,14 @@ import { IllRequestsService } from '@app/admin/service/ill-requests.service';
 })
 export class IllRequestItemComponent {
 
+  private illRequestService: IllRequestsService = inject(IllRequestsService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** ILL record. */
   @Input() record: any;
   /** Is detail is collapsed. */
   isCollapsed: boolean = true;
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param illRequestService - IllRequestsService
-   */
-  constructor(private illRequestService: IllRequestsService) {}
-
   // COMPONENT FUNCTIONS ======================================================
   /** get the bootstrap color to apply on the request status badge */
   badgeColor(status: string): string {
diff --git a/projects/admin/src/app/circulation/patron/ill-request/ill-request.component.ts b/projects/admin/src/app/circulation/patron/ill-request/ill-request.component.ts
index 16d661358..97496036a 100644
--- a/projects/admin/src/app/circulation/patron/ill-request/ill-request.component.ts
+++ b/projects/admin/src/app/circulation/patron/ill-request/ill-request.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { IllRequestApiService } from '@app/admin/api/ill-request-api.service';
 import { PatronService } from '@app/admin/service/patron.service';
 import { Observable, of } from 'rxjs';
@@ -27,21 +27,13 @@ import { switchMap } from 'rxjs/operators';
 })
 export class IllRequestComponent implements OnInit {
 
+  private illRequestApiService: IllRequestApiService = inject(IllRequestApiService);
+  private patronService: PatronService = inject(PatronService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Ill records observable */
   illRequests$: Observable<any>;
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param illRequestApiService - IllRequestApiService
-   * @param patronService - PatronService
-   */
-  constructor(
-    private illRequestApiService: IllRequestApiService,
-    private patronService: PatronService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     this.illRequests$ = this.patronService.currentPatron$.pipe(
diff --git a/projects/public-search/src/app/search-bar/search-bar.component.html b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.html
similarity index 68%
rename from projects/public-search/src/app/search-bar/search-bar.component.html
rename to projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.html
index 704966bd3..46200504a 100644
--- a/projects/public-search/src/app/search-bar/search-bar.component.html
+++ b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020 RERO
+  Copyright (C) 2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,12 +14,5 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-core-autocomplete
-    [recordTypes]="recordTypes"
-    [typeaheadOptionsLimit]="typeaheadOptionsLimit"
-    [action]="action"
-    [internalRouting]="false"
-    [size]="size"
-    [placeholder]="placeholder"
-    class="flex-grow-1">
-</ng-core-autocomplete>
+<p-menu #menu [model]="items" [popup]="true" />
+<p-button [outlined]="true" (onClick)="menu.toggle($event)" icon="fa fa-cog" styleClass="text-color-secondary" />
diff --git a/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.spec.ts b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.spec.ts
new file mode 100644
index 000000000..f0a910331
--- /dev/null
+++ b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.spec.ts
@@ -0,0 +1,38 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { CirculationSettingsComponent } from './circulation-settings.component';
+
+describe('CirculationSettingsComponent', () => {
+  let component: CirculationSettingsComponent;
+  let fixture: ComponentFixture<CirculationSettingsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CirculationSettingsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(CirculationSettingsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.ts b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.ts
new file mode 100644
index 000000000..a267a1731
--- /dev/null
+++ b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.ts
@@ -0,0 +1,108 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Component, inject, OnInit } from '@angular/core';
+import { LoanFixedDateService } from '@app/admin/circulation/services/loan-fixed-date.service';
+import { TranslateService } from '@ngx-translate/core';
+import { DateTranslatePipe } from '@rero/ng-core';
+import { MenuItem } from 'primeng/api';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { FixedDateFormComponent } from '../fixed-date-form/fixed-date-form.component';
+import { CirculationSettingsService, ICirculationSetting } from './circulation-settings.service';
+
+@Component({
+  selector: 'admin-circulation-settings',
+  templateUrl: './circulation-settings.component.html'
+})
+export class CirculationSettingsComponent implements OnInit {
+
+  private translateService: TranslateService = inject(TranslateService);
+  private dialogService: DialogService = inject(DialogService);
+  private loanFixedDateService: LoanFixedDateService = inject(LoanFixedDateService);
+  private dateTranslatePipe: DateTranslatePipe = inject(DateTranslatePipe);
+  private circulationSettingsService: CirculationSettingsService = inject(CirculationSettingsService);
+
+  items: MenuItem[] = [];
+
+  dialogRef: DynamicDialogRef | undefined;
+
+  ngOnInit(): void {
+    this.items = [
+      {
+        label: this.translateService.instant('Check-out for a fix date'),
+        code: 'fix-date',
+        command: () => this.openFixedEndDateDialog()
+      },
+      {
+        label: this.translateService.instant('Override blockings'),
+        code: 'override',
+        command: () => this.overrideBlocking()
+      }
+    ];
+
+    // Assignment of end date if present in locale storage
+    const fixedDateValue = this.loanFixedDateService.get();
+    if (fixedDateValue) {
+      this.setCheckoutDateSetting(new Date(fixedDateValue), true);
+    }
+  }
+
+  private openFixedEndDateDialog(): void {
+    this.dialogRef = this.dialogService.open(FixedDateFormComponent, {
+      header: this.translateService.instant('Choose a due date'),
+      width: '30vw',
+      height: '600px'
+    });
+    this.dialogRef.onClose.subscribe((result?: any) => {
+      if (result && 'action' in result && result.action === 'submit') {
+        const date = this.setCheckoutDateSetting(result.content.endDate, result.content.remember);
+        if (result.content.remember) {
+          this.loanFixedDateService.set(date);
+        }
+      }
+    });
+  }
+
+  private overrideBlocking(): void {
+    this._setCheckoutSetting({
+      key: 'overrideBlocking',
+      label: this.translateService.instant('Override blockings'),
+      value: true
+    });
+  }
+
+  private setCheckoutDateSetting(endDate: Date, remember: boolean): string {
+    endDate.setHours(23,59);
+    const formattedDate = this.dateTranslatePipe.transform(endDate, 'shortDate');
+    const setting = {
+      key: 'endDate',
+      label: this.translateService.instant('Active chosen due date: {{ endDate }}', {endDate: formattedDate}),
+      value: endDate.toISOString(),
+      extra: {
+        remember,
+        severity: remember ? 'success' : 'warning'
+      }
+    };
+    this._setCheckoutSetting(setting);
+
+    return setting.value;
+  }
+
+  private _setCheckoutSetting(setting: ICirculationSetting) {
+    this.circulationSettingsService.remove(setting.key);
+    this.circulationSettingsService.add(setting);
+  }
+}
diff --git a/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.service.spec.ts b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.service.spec.ts
new file mode 100644
index 000000000..f5b6ab80c
--- /dev/null
+++ b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.service.spec.ts
@@ -0,0 +1,31 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { TestBed } from '@angular/core/testing';
+import { CirculationSettingsService } from './circulation-settings.service';
+
+describe('CirculationSettingsServiceService', () => {
+  let service: CirculationSettingsService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(CirculationSettingsService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.service.ts b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.service.ts
new file mode 100644
index 000000000..48fa80adb
--- /dev/null
+++ b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.service.ts
@@ -0,0 +1,53 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { inject, Injectable } from '@angular/core';
+import { LoanFixedDateService } from '@app/admin/circulation/services/loan-fixed-date.service';
+
+export interface ICirculationSetting {
+  key: string;    /** the setting internal key */
+  label: string;  /** the setting label to display to user */
+  value: any;     /** the setting value */
+  extra?: any;     /** extra element for customization */
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class CirculationSettingsService {
+
+  private loanFixedDateService: LoanFixedDateService = inject(LoanFixedDateService);
+
+  private checkoutCirculationSettings: ICirculationSetting[] = [];
+
+  add(circulationSetting: ICirculationSetting): void {
+    this.checkoutCirculationSettings.push(circulationSetting);
+  }
+
+  getSettings(): ICirculationSetting[] {
+    return this.checkoutCirculationSettings;
+  }
+
+  remove(key: string): ICirculationSetting | ICirculationSetting[] | null {
+    const idx = this.checkoutCirculationSettings.findIndex(setting => setting.key === key);
+    if (idx >= 0) {
+      if (key === 'endDate' && this.checkoutCirculationSettings[idx].extra.remember) {
+        this.loanFixedDateService.remove();
+      }
+      return this.checkoutCirculationSettings.splice(idx, 1);
+    }
+  }
+}
diff --git a/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.html b/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.html
index bf2f97969..49c5a129c 100644
--- a/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.html
+++ b/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.html
@@ -1,5 +1,5 @@
 <!--
-  RERO angular core
+  RERO ILS UI
   Copyright (C) 2020-2024 RERO
   Copyright (C) 2020-2023 UCLouvain
 
@@ -15,50 +15,41 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
 <form [formGroup]="formGroup" (ngSubmit)="onSubmitForm()">
-  <div class="modal-header">
-    <h5 class="modal-title" translate>Choose a due date</h5>
-    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-      <span aria-hidden="true" data-dismiss="modal" (click)="closeModal()">&times;</span>
-    </button>
+  <div class="form-group">
+    <p-calendar
+      id="end-date"
+      formControlName="endDate"
+      [showIcon]="true"
+      [iconDisplay]="'input'"
+      firstDayOfWeek="1"
+      [ngClass]="{'is-invalid': formGroup.controls.endDate.touched && formGroup.controls.endDate.invalid}"
+      [readonlyInput]="true"
+      [disabledDays]="disabledDays"
+      [minDate]="today"
+    />
+    @if (formGroup.controls.endDate.valid || !formGroup.controls.endDate.touched) {
+      <small class="form-text text-warning">
+        <i class="fa fa-exclamation-triangle pr-1"></i>
+        {{ 'This date will override the circulation policy behavior' | translate }}
+      </small>
+    }
+    @if (formGroup.controls.endDate.touched && formGroup.controls.endDate.hasError('required')) {
+      <ng-container [ngTemplateOutlet]="errorMessage"
+                    [ngTemplateOutletContext]="{message: 'The field is required' | translate}">
+      </ng-container>
+    }
+    @if (formGroup.controls.endDate.touched && formGroup.controls.endDate.hasError('minimum-date')) {
+      <ng-container [ngTemplateOutlet]="errorMessage"
+                    [ngTemplateOutletContext]="{message: 'Selected date cannot be in the past.' | translate}">
+      </ng-container>
+    }
   </div>
-  <div class="modal-body">
-    <div class="form-group">
-      <div class="input-group">
-        <div class="input-group-prepend">
-          <i class="fa fa-calendar input-group-text"></i>
-        </div>
-        <input type="text" class="form-control"
-               [ngClass]="{'is-invalid': formGroup.controls.endDate.touched && formGroup.controls.endDate.invalid}"
-               id="end-date" formControlName="endDate" aria-describedby="endDateHelp"
-               bsDatepicker required autocomplete="off"
-               [bsConfig]="bsConfig"
-        >
-      </div>
-      @if (formGroup.controls.endDate.valid || !formGroup.controls.endDate.touched) {
-        <small class="form-text text-warning">
-          <i class="fa fa-exclamation-triangle pr-1"></i>
-          {{ 'This date will override the circulation policy behavior' | translate }}
-        </small>
-      }
-      @if (formGroup.controls.endDate.touched && formGroup.controls.endDate.hasError('required')) {
-        <ng-container [ngTemplateOutlet]="errorMessage"
-                      [ngTemplateOutletContext]="{message: 'The field is required' | translate}">
-        </ng-container>
-      }
-      @if (formGroup.controls.endDate.touched && formGroup.controls.endDate.hasError('minimum-date')) {
-        <ng-container [ngTemplateOutlet]="errorMessage"
-                      [ngTemplateOutletContext]="{message: 'Selected date cannot be in the past.' | translate}">
-        </ng-container>
-      }
-    </div>
-    <div class="form-group form-check">
-      <input type="checkbox" class="form-check-input" id="remember" formControlName="remember">
-      <label class="form-check-label" for="remember" translate>Remember this date in current session</label>
-    </div>
-    {{ formGroup.controls.endDate['errorMessages'] | json }}
+  <div class="form-group form-check">
+    <input type="checkbox" class="form-check-input" id="remember" formControlName="remember">
+    <label class="form-check-label" for="remember" translate>Remember this date in current session</label>
   </div>
+  {{ formGroup.controls.endDate['errorMessages'] | json }}
   <div class="modal-footer">
     <button type="button" class="btn btn-outline-danger" (click)="closeModal()" translate>Cancel</button>
     <button type="submit" class="btn btn-primary" [disabled]="this.formGroup.invalid" translate>Apply</button>
diff --git a/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.spec.ts b/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.spec.ts
index 900ec99af..f39ade1e5 100644
--- a/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.spec.ts
+++ b/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.spec.ts
@@ -17,10 +17,9 @@
 
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { LOCALE_ID } from '@angular/core';
-import { async, ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { SharedModule } from '@rero/shared';
-import { BsModalRef } from 'ngx-bootstrap/modal';
 import { CirculationModule } from '../../../circulation.module';
 
 import { FixedDateFormComponent } from './fixed-date-form.component';
@@ -38,7 +37,6 @@ describe('FixedDateFormComponent', () => {
         HttpClientTestingModule,
       ],
       providers: [
-        BsModalRef,
         { provide: LOCALE_ID, useValue: 'en-US' }
       ]
     })
diff --git a/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.ts b/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.ts
index e62d00361..13ab3c87d 100644
--- a/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.ts
+++ b/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
+ * Copyright (C) 2020-2024 RERO
  * Copyright (C) 2020-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,21 +15,15 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { formatDate } from '@angular/common';
-import { Component, EventEmitter, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Library } from '@app/admin/classes/library';
 import { DateValidators } from '@app/admin/utils/validators';
 import { TranslateService } from '@ngx-translate/core';
 import { RecordService } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
-import moment from 'moment';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
-import { BsModalRef } from 'ngx-bootstrap/modal';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Subscription } from 'rxjs';
-import { CirculationService } from '../../../services/circulation.service';
-
 
 @Component({
   selector: 'admin-fixed-date-form',
@@ -37,6 +31,11 @@ import { CirculationService } from '../../../services/circulation.service';
 })
 export class FixedDateFormComponent implements OnInit, OnDestroy {
 
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private translateService: TranslateService = inject(TranslateService);
+  private userService: UserService = inject(UserService);
+  private recordService: RecordService = inject(RecordService);
+
   /** the date format to used */
   static DATE_FORMAT = 'YYYY-MM-DD';
 
@@ -52,57 +51,24 @@ export class FixedDateFormComponent implements OnInit, OnDestroy {
     ]),
     remember: new FormControl(false)
   });
-  /** main datepicker configuration */
-  bsConfig = {
-    showWeekNumbers: false,
-    containerClass: 'theme-dark-blue',
-    dateInputFormat: FixedDateFormComponent.DATE_FORMAT,
-    minDate: moment().toDate(),
-    daysDisabled: [],
-    datesDisabled: []
-  };
-  /** fixed date emitter */
-  onSubmit = new EventEmitter();
-
-  /** component subscriptions */
-  private subscription = new Subscription();
 
+  disabledDays: number[] = [];
 
-  // CONSTRUCTOR & HOOKS =====================================
-  /**
-   * Constructor
-   * @param localeService - BsLocaleService
-   * @param bsModalRef - BsModalRef
-   * @param translateService - TranslateService,
-   * @param userService - UserService
-   * @param recordService - RecordService
-   * @param circulationService - CirculationService
-   */
-  constructor(
-    private localeService: BsLocaleService,
-    protected bsModalRef: BsModalRef,
-    private translateService: TranslateService,
-    private userService: UserService,
-    private recordService: RecordService,
-    private circulationService: CirculationService
-  ) { }
+  today: Date = new Date();
 
+  /** component subscriptions */
+  private subscription = new Subscription();
 
   /** OnInit hook */
   ngOnInit(): void {
-    this.localeService.use(this.translateService.currentLang);
     if (this.userService.user) {
       this.recordService.getRecord('libraries', this.userService.user.currentLibrary, 1).subscribe(
         (data: any) => {
           const library = new Library(data.metadata);
-          this.bsConfig.daysDisabled = library.closedDays;
+          this.disabledDays = library.closedDays;
         }
       );
-      this.subscription.add(this.circulationService.currentLibraryClosedDates$.subscribe(
-        data => this.bsConfig.datesDisabled = data
-      ));
     }
-    this._initValueChange();
   }
 
   /** OnDestroy hook */
@@ -113,34 +79,14 @@ export class FixedDateFormComponent implements OnInit, OnDestroy {
   // FUNCTIONS =================================================
   /** Submit form hook */
   onSubmitForm() {
-    this.onSubmit.emit({
+    this.dynamicDialogRef.close({
       action: 'submit',
       content: this.formGroup.value
     });
-    this.bsModalRef.hide();
   }
 
   /** Close the modal dialog box */
   closeModal() {
-    this.bsModalRef.hide();
-  }
-
-  /** Init value change on field */
-  private _initValueChange() {
-    const endDateField = this.formGroup.get('endDate');
-    endDateField.valueChanges.subscribe(isoDate => {
-      let patchDate: any = null;
-      if (isoDate != null) {
-        try {
-          const date = new Date(isoDate);
-          patchDate = formatDate(date, 'yyyy-MM-dd', this.translateService.currentLang);
-        } catch {
-          patchDate = undefined;
-        }
-      }
-      if (endDateField.value !== patchDate) {
-        endDateField.patchValue(patchDate);
-      }
-    });
+    this.dynamicDialogRef.close();
   }
 }
diff --git a/projects/admin/src/app/circulation/patron/loan/loan.component.html b/projects/admin/src/app/circulation/patron/loan/loan.component.html
index a3896edac..18dc7de79 100644
--- a/projects/admin/src/app/circulation/patron/loan/loan.component.html
+++ b/projects/admin/src/app/circulation/patron/loan/loan.component.html
@@ -14,7 +14,6 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
 <section class="content">
   <div class="row mb-4">
     <div class="col-12 col-md-6">
@@ -29,32 +28,16 @@
           ></ng-core-search-input>
         </div>
         <div class="col-sm-2 col-md-1 align-self-end pl-1">
-          <!-- circulation special-settings -->
-          <div class="btn-group" dropdown>
-            <button id="circulation-settings-button" dropdownToggle type="button"
-                    class="btn btn-outline-secondary dropdown-toggle px-2"
-                    aria-controls="dropdown-basic">
-              <i class="fa fa-cog"></i> <span class="caret"></span>
-            </button>
-            <ul id="circulation-settings-dropdown" *dropdownMenu class="dropdown-menu"
-                role="menu" aria-labelledby="button-basic">
-              <li role="menuitem">
-                <a class="dropdown-item" (click)="openFixedEndDateDialog()" translate>Check-out for a fix date</a>
-                <a class="dropdown-item" (click)="overrideBlocking()" translate>Override blockings</a>
-              </li>
-            </ul>
-          </div>
+          <admin-circulation-settings />
         </div>
       </div>
       @if (checkoutSettings) {
         <div class="row col mt-1">
           @for (setting of checkoutSettings; track setting) {
-            <span class="badge px-2 py-0 mr-2" [ngClass]="setting.extra?.class || 'badge-warning'">
+            <p-tag [severity]="setting.extra?.severity || 'warning'">
               {{ setting.label }}
-              <button class="btn btn-small p-0 ml-1" (click)="removeCheckoutSettings(setting.key)">
-                <i class="fa fa-times-circle"></i>
-              </button>
-            </span>
+              <i class="fa fa-times-circle ml-2" (click)="removeCheckoutSettings(setting.key)"></i>
+            </p-tag>
           }
         </div>
       }
diff --git a/projects/admin/src/app/circulation/patron/loan/loan.component.ts b/projects/admin/src/app/circulation/patron/loan/loan.component.ts
index 12361b699..68d102297 100644
--- a/projects/admin/src/app/circulation/patron/loan/loan.component.ts
+++ b/projects/admin/src/app/circulation/patron/loan/loan.component.ts
@@ -14,30 +14,19 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { Item, ItemAction, ItemNoteType } from '@app/admin/classes/items';
 import { ItemsService } from '@app/admin/service/items.service';
 import { PatronService } from '@app/admin/service/patron.service';
 import { TranslateService } from '@ngx-translate/core';
-import { DateTranslatePipe } from '@rero/ng-core';
+import { CONFIG, DateTranslatePipe } from '@rero/ng-core';
 import { ItemStatus, UserService } from '@rero/shared';
-import moment from 'moment';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
-import { ToastrService } from 'ngx-toastr';
-import { Subscription, forkJoin } from 'rxjs';
+import { MessageService } from 'primeng/api';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { forkJoin, Subscription } from 'rxjs';
 import { CirculationService } from '../../services/circulation.service';
 import { LoanFixedDateService } from '../../services/loan-fixed-date.service';
-import { FixedDateFormComponent } from './fixed-date-form/fixed-date-form.component';
-
-/** Interface to declare a special circulation settings */
-export interface CirculationSetting {
-  key: string;    /** the setting internal key */
-  label: string;  /** the setting label to display to user */
-  value: any;     /** the setting value */
-  extra?: any;     /** extra element for customization */
-}
-
+import { CirculationSettingsService, ICirculationSetting } from './circulation-settings/circulation-settings.service';
 
 @Component({
   selector: 'admin-loan',
@@ -46,6 +35,16 @@ export interface CirculationSetting {
 })
 export class LoanComponent implements OnInit, OnDestroy {
 
+  private itemsService: ItemsService = inject(ItemsService);
+  private translateService: TranslateService = inject(TranslateService);
+  private patronService: PatronService = inject(PatronService);
+  private userService: UserService = inject(UserService);
+  private circulationService: CirculationService = inject(CirculationService);
+  private messageService: MessageService = inject(MessageService);
+  private circulationSettingsService: CirculationSettingsService = inject(CirculationSettingsService);
+
+  dialogRef: DynamicDialogRef | undefined;
+
   // COMPONENT ATTRIBUTES ============================================
   /** Search text (barcode) entered in search input */
   public searchText = '';
@@ -68,24 +67,11 @@ export class LoanComponent implements OnInit, OnDestroy {
   private subscription = new Subscription();
   /** checkout list sort criteria */
   private sortCriteria = '-transaction_date';
-  /** modal reference */
-  private modalRef: BsModalRef;
-  /** checkout circulation special settings */
-  private checkoutCirculationSettings: CirculationSetting[] = [];
 
   // GETTER & SETTER ================================================
   /** Return the circulation special settings */
-  get checkoutSettings(): CirculationSetting[] | null {
-    return this.checkoutCirculationSettings;
-  }
-
-  /**
-   *  Add/Replace a circulation special setting
-   *  @param setting: the circulation setting
-   */
-  private _setCheckoutSetting(setting: CirculationSetting) {
-    this.removeCheckoutSettings(setting.key);
-    this.checkoutCirculationSettings.push(setting);
+  get checkoutSettings(): ICirculationSetting[] | null {
+    return this.circulationSettingsService.getSettings();
   }
 
   /**
@@ -94,52 +80,16 @@ export class LoanComponent implements OnInit, OnDestroy {
    * @return the value of the setting. null if key isn't found
    */
   private _getCheckoutSetting(key: string): any | null {
-    const setting = this.checkoutCirculationSettings.find(element => element.key === key);
+    const setting = this.circulationSettingsService.getSettings().find(element => element.key === key);
     return (setting !== undefined)
       ? setting.value
       : null;
   }
 
-  /**
-   * Remove a circulation special setting
-   * @param key: the circulation setting key to remove
-   * @return the circulation setting removed or null if the setting is not found
-   */
-  removeCheckoutSettings(key: string): CirculationSetting | CirculationSetting[] | null {
-    const idx = this.checkoutCirculationSettings.findIndex(setting => setting.key === key);
-    if (idx >= 0) {
-      if (key === 'endDate' && this.checkoutCirculationSettings[idx].extra.remember) {
-        this.loanFixedDateService.remove();
-      }
-      return this.checkoutCirculationSettings.splice(idx, 1);
-    }
+  removeCheckoutSettings(key: string): void {
+    this.circulationSettingsService.remove(key);
   }
 
-  // CONSTRUCTOR & HOOKS ============================================
-  /**
-   * Constructor
-   * @param itemsService - Items Service
-   * @param translateService - Translate Service
-   * @param toastService - Toastr Service
-   * @param patronService - Patron Service
-   * @param userService - UserService
-   * @param modalService - BsModalService
-   * @param dateTranslatePipe - DateTranslatePipe
-   * @param circulationService - CirculationService
-   * @param loanFixedDateService - LoanFixedDateService
-   */
-  constructor(
-    private itemsService: ItemsService,
-    private translateService: TranslateService,
-    private toastService: ToastrService,
-    private patronService: PatronService,
-    private userService: UserService,
-    private modalService: BsModalService,
-    private dateTranslatePipe: DateTranslatePipe,
-    private circulationService: CirculationService,
-    private loanFixedDateService: LoanFixedDateService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this.subscription.add(this.patronService.currentPatron$.subscribe((patron: any) => {
@@ -147,8 +97,8 @@ export class LoanComponent implements OnInit, OnDestroy {
       if (patron) {
         const loanedItems$ = this.patronService.getItems(patron.pid, this.sortCriteria);
         const pickupItems$ = this.patronService.getItemsPickup(patron.pid);
-        forkJoin([loanedItems$, pickupItems$]).subscribe(
-          ([loanedItems, pickupItems]) => {
+        forkJoin([loanedItems$, pickupItems$]).subscribe({
+          next: ([loanedItems, pickupItems]) => {
             // loanedItems is an array of brief item data (pid, barcode). For each one, we need to
             // call the detail item service to get full data about it
             loanedItems.map((item: any) => item.loading = true);
@@ -161,17 +111,13 @@ export class LoanComponent implements OnInit, OnDestroy {
             // we need to know which items are ready to pickup to decrement the counter if a checkout
             // operation is done on one of this items.
             this.pickupItems = pickupItems;
-          }, error => {}
-        );
+          },
+          error: error => {}
+        });
       }
     }));
     this.currentLibraryPid = this.userService.user.currentLibrary;
     this.searchInputFocus = true;
-    // Assignment of end date if present in locale storage
-    const fixedDateValue = this.loanFixedDateService.get();
-    if (fixedDateValue) {
-      this.setCheckoutDateSetting(fixedDateValue, true);
-    }
   }
 
   /** OnDestroy hook */
@@ -204,40 +150,53 @@ export class LoanComponent implements OnInit, OnDestroy {
       item.currentAction = ItemAction.checkin;
       this.applyItems([item]);
       if (item.pending_loans) {
-        this.toastService.warning(
-          this.translateService.instant('The item has a request'),
-          this.translateService.instant('Checkin')
-        );
+        this.messageService.add({
+          severity: 'warn',
+          summary: this.translateService.instant('Checkin'),
+          detail: this.translateService.instant('The item has a request'),
+          life: CONFIG.MESSAGE_LIFE
+        });
       }
       if (item.status === ItemStatus.IN_TRANSIT) {
         const destination = item.loan.item_destination.library_name;
-        this.toastService.warning(
-          this.translateService.instant('The item is in transit to {{ destination }}', {destination}),
-          this.translateService.instant('Checkin')
-        );
+        this.messageService.add({
+          severity: 'warn',
+          summary: this.translateService.instant('Checkin'),
+          detail: this.translateService.instant('The item is in transit to {{ destination }}', {destination}),
+          life: CONFIG.MESSAGE_LIFE
+        });
       }
     } else {
-      this.itemsService.getItem(barcode, this.patron.pid).subscribe(
-        newItem => {
+      this.itemsService.getItem(barcode, this.patron.pid).subscribe({
+        next: (newItem) => {
           if (newItem === null) {
-            this.toastService.error(
-              this.translateService.instant('Item not found'),
-              this.translateService.instant('Checkout')
-            );
+            this.messageService.add({
+              severity: 'error',
+              summary: this.translateService.instant('Checkout'),
+              detail: this.translateService.instant('Item not found'),
+              sticky: true,
+              closable: true
+            });
             this._resetSearchInput();
           } else {
             if (newItem.status === ItemStatus.ON_LOAN) {
-              this.toastService.error(
-                this.translateService.instant('Checkout impossible: the item is already on loan for another patron'),
-                this.translateService.instant('Checkout')
-              );
+              this.messageService.add({
+                severity: 'error',
+                summary: this.translateService.instant('Checkout'),
+                detail: this.translateService.instant('Checkout impossible: the item is already on loan for another patron'),
+                sticky: true,
+                closable: true
+              });
               this._resetSearchInput();
             } else {
               if (newItem.pending_loans && newItem.pending_loans[0].patron_pid !== this.patron.pid) {
-                this.toastService.error(
-                  this.translateService.instant('Checkout impossible: the item is requested by another patron'),
-                  this.translateService.instant('Checkout')
-                );
+                this.messageService.add({
+                  severity: 'error',
+                  summary: this.translateService.instant('Checkout'),
+                  detail: this.translateService.instant('Checkout impossible: the item is requested by another patron'),
+                  sticky: true,
+                  closable: true
+                });
                 this._resetSearchInput();
               } else {
                 newItem.currentAction = ItemAction.checkout;
@@ -246,14 +205,17 @@ export class LoanComponent implements OnInit, OnDestroy {
             }
           }
         },
-        error => {
-          this.toastService.error(
-            this.translateService.instant(error.message),
-            this.translateService.instant('Checkout')
-          );
+        error: (error) => {
+          this.messageService.add({
+            severity: 'error',
+            summary: this.translateService.instant('Checkout'),
+            detail: this.translateService.instant(error.message),
+            sticky: true,
+            closable: true
+          });
           this._resetSearchInput();
         }
-      );
+      });
     }
   }
 
@@ -267,7 +229,7 @@ export class LoanComponent implements OnInit, OnDestroy {
       if (item.currentAction !== ItemAction.no) {
         const additionalParams = {};
         if (item.currentAction === ItemAction.checkout) {
-          this.checkoutCirculationSettings.map(setting => additionalParams[setting.key] = setting.value);
+          this.circulationSettingsService.getSettings().map(setting => additionalParams[setting.key] = setting.value);
         }
         observables.push(
           this.itemsService.doAction(
@@ -292,13 +254,15 @@ export class LoanComponent implements OnInit, OnDestroy {
               // display a toast message if the item goes in transit...
               if (newItem.status === ItemStatus.IN_TRANSIT) {
                 const destination = newItem.loan.item_destination.library_name;
-                this.toastService.warning(
-                  this.translateService.instant('The item is in transit to {{ destination }}', {destination}),
-                  this.translateService.instant('Checkin')
-                );
+                this.messageService.add({
+                  severity: 'warn',
+                  summary: this.translateService.instant('Checkin'),
+                  detail: this.translateService.instant('The item is in transit to {{ destination }}', {destination}),
+                  life: CONFIG.MESSAGE_LIFE
+                });
               }
-              this.circulationService.decrementCirculationStatistic('loans');
-              this.circulationService.incrementCirculationStatistic('history');
+              this.circulationService.statisticsDecrease('loans');
+              this.circulationService.statisticsIncrease('history');
               break;
             }
             case ItemAction.checkout: {
@@ -306,12 +270,12 @@ export class LoanComponent implements OnInit, OnDestroy {
               this.displayCirculationInformation(ItemAction.checkout, newItem, ItemNoteType.CHECKOUT);
               this.checkedOutItems.unshift(newItem);
               this.checkedInItems = this.checkedInItems.filter(currItem => currItem.pid !== newItem.pid);
-              this.circulationService.incrementCirculationStatistic('loans');
+              this.circulationService.statisticsIncrease('loans');
               // check if items was ready to pickup. if yes, then we need to decrement the counter
               const idx = this.pickupItems.findIndex(item => item.metadata.item.pid === newItem.pid);
               if (idx > -1) {
                 this.pickupItems.splice(idx, 1);
-                this.circulationService.decrementCirculationStatistic('pickup');
+                this.circulationService.statisticsIncrease('pickup');
               }
               break;
             }
@@ -339,17 +303,21 @@ export class LoanComponent implements OnInit, OnDestroy {
             message = splittedData[1].trim();
             message = message.charAt(0).toUpperCase() + message.slice(1);
           }
-          this.toastService.error(
-            message,
-            title,
-            {disableTimeOut: true, closeButton: true, enableHtml: true}
-          );
+          this.messageService.add({
+            severity: 'error',
+            summary: title,
+            detail: message,
+            sticky: true,
+            closable: true
+          });
         } else {
-          this.toastService.error(
-            this.translateService.instant('An error occurred on the server: ') + errorMessage,
-            this.translateService.instant('Circulation'),
-            {disableTimeOut: true, closeButton: true, enableHtml: true}
-          );
+          this.messageService.add({
+            severity: 'error',
+            summary: this.translateService.instant('Circulation'),
+            detail: this.translateService.instant('An error occurred on the server: ') + errorMessage,
+            sticky: true,
+            closable: true
+          });
         }
         this._resetSearchInput();
       }
@@ -357,7 +325,7 @@ export class LoanComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * display a circulation note about an item as a permanent toastr message
+   * display a circulation note about an item as a permanent toast message
    * @param action: the current action
    * @param item: the item
    * @param noteType: the note type to display
@@ -379,16 +347,12 @@ export class LoanComponent implements OnInit, OnDestroy {
       }
     }
     if (message.length > 0) {
-      this.toastService.warning(
-        message.join(),
-        this.translateService.instant('Checkin'),
-        {
-          enableHtml: true,
-          closeButton: true,    // add a close button to the toastr message
-          disableTimeOut: true, // permanent toastr message (until click on 'close' button)
-          tapToDismiss: false   // toastr message only close when click on the 'close' button.
-        }
-      );
+      this.messageService.add({
+        severity: 'warn',
+        summary: this.translateService.instant('Checkin'),
+        detail: message.join(),
+        life: CONFIG.MESSAGE_LIFE
+      });
     }
   }
 
@@ -409,7 +373,7 @@ export class LoanComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Display a warning toastr message if transaction end_date is not the same as the user selected end_date.
+   * Display a warning toast message if transaction end_date is not the same as the user selected end_date.
    * The backend will check if the selected end_date is an opening day ; if not then it will automatically
    * update the selected date to the next open day.
    * @param item: the item (with loan data included)
@@ -424,10 +388,12 @@ export class LoanComponent implements OnInit, OnDestroy {
         settingEndDate.getMonth() !== loanEndDate.getMonth() ||
         settingEndDate.getDate() !== loanEndDate.getDate()
       ) {
-        this.toastService.warning(
-          this.translateService.instant('The due date has been set to the next business day, since the selected day is closed.'),
-          this.translateService.instant('Checkout')
-        );
+        this.messageService.add({
+          severity: 'warn',
+          summary: this.translateService.instant('Checkout'),
+          detail: this.translateService.instant('The due date has been set to the next business day, since the selected day is closed.'),
+          life: CONFIG.MESSAGE_LIFE
+        });
       }
     }
   }
@@ -438,10 +404,13 @@ export class LoanComponent implements OnInit, OnDestroy {
    */
   hasFees(event: boolean): void {
     if (event) {
-      this.toastService.error(
-        this.translateService.instant('The item has fees'),
-        this.translateService.instant('Checkin')
-      );
+      this.messageService.add({
+        severity: 'error',
+        summary: this.translateService.instant('Checkin'),
+        detail: this.translateService.instant('The item has fees'),
+        sticky: true,
+        closable: true
+      });
     }
   }
 
@@ -472,60 +441,6 @@ export class LoanComponent implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * Open a modal dialog form allowing to user to choose a fixed end-date.
-   * Subscribe to modal onHide event to get data entered by user and perform job if needed.
-   */
-  openFixedEndDateDialog(): void {
-    this.modalRef = this.modalService.show(FixedDateFormComponent, {
-        ignoreBackdropClick: true,
-        keyboard: true
-    });
-    this.modalRef.content.onSubmit.subscribe(result => {
-      if ('action' in result && result.action === 'submit') {
-        const date = this.setCheckoutDateSetting(result.content.endDate, result.content.remember);
-        if (result.content.remember) {
-          this.loanFixedDateService.set(date);
-        }
-      }
-    });
-  }
-
-  /**
-   * Save setting for end date
-   * @param endDate - Date in string format
-   * @param remember - Hold value (Boolean format)
-   * @returns End date in string format
-   */
-  setCheckoutDateSetting(endDate: string, remember: boolean): string {
-    const checkoutEndDate = moment(endDate, FixedDateFormComponent.DATE_FORMAT).toDate().setHours(23, 59);
-    const formattedDate = this.dateTranslatePipe.transform(checkoutEndDate, 'shortDate');
-    const setting = {
-      key: 'endDate',
-      label: this.translateService.instant('Active chosen due date: {{ endDate }}', {endDate: formattedDate}),
-      value: new Date(checkoutEndDate).toISOString(),
-      extra: {
-        remember,
-        class: 'badge-' + (remember ? 'success' : 'warning')
-      }
-    };
-    this._setCheckoutSetting(setting);
-
-    return setting.value;
-  }
-
-  /**
-   * Allow to specify that all checkout circulation should be operate without taking
-   * care of any possible blocking restrictions (Cipo, PatronTypes restriction, patron blocking, ...)
-   */
-  overrideBlocking(): void {
-    this._setCheckoutSetting({
-      key: 'overrideBlocking',
-      label: this.translateService.instant('Override blockings'),
-      value: true
-    });
-  }
-
   /** Reset search input */
   private _resetSearchInput(): void {
     setTimeout(() => {
diff --git a/projects/admin/src/app/circulation/patron/main/main.component.html b/projects/admin/src/app/circulation/patron/main/main.component.html
index 4a5d949e3..dd461a2f7 100644
--- a/projects/admin/src/app/circulation/patron/main/main.component.html
+++ b/projects/admin/src/app/circulation/patron/main/main.component.html
@@ -25,100 +25,29 @@
   </div>
 
   <div class="col">
-    <ul class="nav nav-tabs">
-      <li class="nav-item" *ngVar="getCirculationStatistics('loans') as statLoan">
-        <a
-          id="checkin-checkout-tab"
-          class="nav-link"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="{exact: true}"
-          [routerLink]="['/circulation', 'patron', barcode, 'loan']">
-          {{ 'On loan' | translate }}
-          @if (statLoan > 0) {
-            <span class="badge badge-info font-weight-normal">{{ statLoan }}</span>
+    <p-tabMenu [model]="items" [activeItem]="activeItem" (activeItemChange)="onActiveItemChange($event)">
+      <ng-template pTemplate="item" let-item>
+        <a pRipple class="p-menuitem-link">
+          <span class="mr-2">{{ item.label }}</span>
+          @if (item.tag?.statistics && item.tag?.statistics()[item.id] && item.tag?.statistics()[item.id] > 0) {
+            <p-tag [severity]="item.tag.severity || 'info'" [value]="item.tag.statistics()[item.id] || 0"/>
           }
         </a>
-      </li>
-      <li class="nav-item" *ngVar="getCirculationStatistics('pickup') as statPickup">
-        <a
-          id="pick-up-tab"
-          class="nav-link"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="{exact: true}"
-          [routerLink]="['/circulation', 'patron', barcode, 'pickup']">
-          {{ 'To pick up' | translate }}
-          @if (statPickup > 0) {
-            <span class="badge badge-info font-weight-normal">{{ statPickup }}</span>
-          }
-        </a>
-      </li>
-      <li class="nav-item" *ngVar="getCirculationStatistics('pending') as statPending">
-        <a
-          id="pending-tab"
-          class="nav-link"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="{exact: true}"
-          [routerLink]="['/circulation', 'patron', barcode, 'pending']">
-          {{ 'Pending' | translate }}
-          @if (statPending > 0) {
-            <span class="badge badge-info font-weight-normal">{{ statPending }}</span>
-          }
-        </a>
-      </li>
-      <li class="nav-item" *ngVar="getCirculationStatistics('ill') as statIll">
-        <a
-          id="ill-tab"
-          class="nav-link"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="{exact: true}"
-          [routerLink]="['/circulation', 'patron', barcode, 'ill']">
-          {{ 'Interlibrary loan' | translate }}
-          @if (statIll > 0) {
-            <span class="badge badge-info font-weight-normal">{{ statIll }}</span>
-          }
-        </a>
-      </li>
-      <li class="nav-item">
-        <a
-          id="profile-tab"
-          class="nav-link"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="{exact: true}"
-          [routerLink]="['/circulation', 'patron', barcode, 'profile']"
-          translate
-        >Profile</a>
-      </li>
-      <li class="nav-item">
-        <a
-          id="fees-tab"
-          class="nav-link"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="{exact: true}"
-          [routerLink]="['/circulation', 'patron', barcode, 'fees']">
-          {{ 'Fees' | translate }}
-          @if (feesTotalAmount > 0) {
-            <span class="badge badge-warning font-weight-normal">
-              {{ feesTotalAmount | currency: organisation.default_currency }}
-            </span>
-          }
-        </a>
-      </li>
-      @if (patron.keep_history) {
-        <li class="nav-item">
-          <a
-            id="history-tab"
-            class="nav-link"
-            routerLinkActive="active"
-            [routerLinkActiveOptions]="{exact: true}"
-            [routerLink]="['/circulation', 'patron', barcode, 'history']">
-            {{ 'History' | translate }}
-            <span class="badge badge-info font-weight-normal">{{ historyCount }}</span>
-          </a>
-        </li>
-      }
-    </ul>
+      </ng-template>
+    </p-tabMenu>
     <div class="mt-4">
       <router-outlet></router-outlet>
     </div>
   </div>
+  <p-toast>
+    <ng-template let-message pTemplate="message">
+      <div class="flex flex-column align-items-start" style="flex: 1">
+        <div class="font-medium text-lg my-3 text-900">
+          {{ message.summary }}
+        </div>
+        <p [innerHtml]="message.detail"></p>
+      </div>
+    </ng-template>
+  </p-toast>
+  <p-confirmDialog />
 }
diff --git a/projects/admin/src/app/circulation/patron/main/main.component.ts b/projects/admin/src/app/circulation/patron/main/main.component.ts
index 8e1f4e6ba..aa99e8a55 100644
--- a/projects/admin/src/app/circulation/patron/main/main.component.ts
+++ b/projects/admin/src/app/circulation/patron/main/main.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { LoanState } from '@app/admin/classes/loans';
 import { OrganisationService } from '@app/admin/service/organisation.service';
@@ -26,6 +26,8 @@ import { Subscription } from 'rxjs';
 import { OperationLogsApiService } from '../../../api/operation-logs-api.service';
 import { CirculationService } from '../../services/circulation.service';
 import { PatronTransactionService } from '../../services/patron-transaction.service';
+import { MenuItem } from 'primeng/api';
+import { CurrencyPipe } from '@angular/common';
 
 @Component({
   selector: 'admin-main',
@@ -33,6 +35,18 @@ import { PatronTransactionService } from '../../services/patron-transaction.serv
 })
 export class MainComponent implements OnInit, OnDestroy {
 
+  private route: ActivatedRoute = inject(ActivatedRoute);
+  private router: Router = inject(Router);
+  private patronService: PatronService = inject(PatronService);
+  private patronTransactionService: PatronTransactionService = inject(PatronTransactionService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private hotKeysService: HotkeysService = inject(HotkeysService);
+  private translateService: TranslateService = inject(TranslateService);
+  private circulationService: CirculationService = inject(CirculationService);
+  private operationLogsApiService: OperationLogsApiService = inject(OperationLogsApiService);
+  private recordService: RecordService = inject(RecordService);
+  private currencyPipe: CurrencyPipe = inject(CurrencyPipe);
+
   // COMPONENT ATTRIBUTES ====================================================
   /** shortcuts for patron tabs */
   private _shortcuts = [
@@ -98,6 +112,9 @@ export class MainComponent implements OnInit, OnDestroy {
 
   historyCount = 0;
 
+  items: MenuItem[] | undefined;
+
+  activeItem: MenuItem | undefined;
 
   // GETTER & SETTER ====================================================
   /**
@@ -108,32 +125,6 @@ export class MainComponent implements OnInit, OnDestroy {
     return this.organisationService.organisation;
   }
 
-  // CONSTRUCTOR & HOOKS ====================================================
-  /**
-   * Constructor
-   * @param route - ActivatedRoute
-   * @param router - Router
-   * @param patronService - PatronService
-   * @param patronTransactionService - PatronTransactionService
-   * @param organisationService - OrganisationService
-   * @param hotKeysService - HotkeysService
-   * @param translateService - TranslateService
-   * @param circulationService - CirculationService
-   * @param recordService: RecordService
-   */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router,
-    private patronService: PatronService,
-    private patronTransactionService: PatronTransactionService,
-    private organisationService: OrganisationService,
-    private hotKeysService: HotkeysService,
-    private translateService: TranslateService,
-    private circulationService: CirculationService,
-    private operationLogsApiService: OperationLogsApiService,
-    private recordService: RecordService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     /** load patron if the barcode changes */
@@ -144,6 +135,12 @@ export class MainComponent implements OnInit, OnDestroy {
     });
   }
 
+  onActiveItemChange(event: MenuItem): void {
+    if (event) {
+      this.router.navigate(event.routerLink);
+    }
+  }
+
   /** OnDestroy hook */
   ngOnDestroy(): void {
     this._unregisterShortcuts();
@@ -187,6 +184,7 @@ export class MainComponent implements OnInit, OnDestroy {
               this.feesTotalAmount = (total > 0) ? total : 0;
             }
           );
+          this.initializeMenu();
         });
       }
     });
@@ -217,17 +215,6 @@ export class MainComponent implements OnInit, OnDestroy {
     }
   }
 
-  /**
-   * Find and return a circulation statistic.
-   * @param type: the type of circulation statistics to find.
-   */
-  getCirculationStatistics(type: string): number {
-    const stats = this.circulationService?.circulationInformations?.statistics;
-    return stats && type in stats
-      ? stats[type]
-      : 0;
-  }
-
   /**
    * Parse statistics from API into corresponding tab statistic.
    * @param data: a dictionary of loan state/value
@@ -237,23 +224,89 @@ export class MainComponent implements OnInit, OnDestroy {
       switch (key) {
         case LoanState[LoanState.PENDING]:
         case LoanState[LoanState.ITEM_IN_TRANSIT_FOR_PICKUP]:
-          this.circulationService.incrementCirculationStatistic('pending', Number(data[key]));
+          this.circulationService.statisticsIncrease('pending', Number(data[key]));
           break;
         case LoanState[LoanState.ITEM_AT_DESK]:
-          this.circulationService.incrementCirculationStatistic('pickup',  Number(data[key]));
+          this.circulationService.statisticsIncrease('pickup',  Number(data[key]));
           break;
         case LoanState[LoanState.ITEM_ON_LOAN]:
-          this.circulationService.incrementCirculationStatistic('loans',  Number(data[key]));
+          this.circulationService.statisticsIncrease('loan',  Number(data[key]));
           break;
         case LoanState[LoanState.CANCELLED]:
         case LoanState[LoanState.ITEM_IN_TRANSIT_TO_HOUSE]:
         case LoanState[LoanState.ITEM_RETURNED]:
-          this.circulationService.incrementCirculationStatistic('history',  Number(data[key]));
+          this.circulationService.statisticsIncrease('history',  Number(data[key]));
           break;
         case 'ill_requests':
-          this.circulationService.incrementCirculationStatistic('ill', Number(data[key]));
+          this.circulationService.statisticsIncrease('ill', Number(data[key]));
           break;
       }
     }
   }
+
+  private initializeMenu(): void {
+    this.items = [
+      {
+        id: 'loan',
+        label: this.translateService.instant('On loan'),
+        routerLink: ['/circulation', 'patron', this.barcode, 'loan'],
+        tag: {
+          severity: 'info',
+          statistics: this.circulationService.statistics
+        }
+      },
+      {
+        id: 'pickup',
+        label: this.translateService.instant('To pick up'),
+        routerLink: ['/circulation', 'patron', this.barcode, 'pickup'],
+        tag: {
+          severity: 'info',
+          statistics: this.circulationService.statistics
+        }
+      },
+      {
+        id: 'pending',
+        label: this.translateService.instant('Pending'),
+        routerLink: ['/circulation', 'patron', this.barcode, 'pending'],
+        tag: {
+          severity: 'info',
+          statistics: this.circulationService.statistics
+        }
+      },
+      {
+        id: 'ill',
+        label: this.translateService.instant('Interlibrary loan'),
+        routerLink: ['/circulation', 'patron', this.barcode, 'ill'],
+        tag: {
+          severity: 'info',
+          statistics: this.circulationService.statistics
+        }
+      },
+      {
+        id: 'profile',
+        label: this.translateService.instant('Profile'),
+        routerLink: ['/circulation', 'patron', this.barcode, 'profile']
+      },
+      {
+        id: 'fees',
+        label: this.translateService.instant('Fees'),
+        routerLink: ['/circulation', 'patron', this.barcode, 'fees'],
+        tag: {
+          severity: 'info',
+          value: this.currencyPipe.transform(this.feesTotalAmount, this.organisation.default_currency)
+        }
+      }
+    ];
+    if (this.patron.keep_history) {
+      this.items.push({
+        id: 'history',
+        label: this.translateService.instant('History'),
+        routerLink: ['/circulation', 'patron', this.barcode, 'history']
+      });
+    }
+
+    // Active the active tab
+    const index = this.items.findIndex((item) => item.id === this.router.url.split('/').pop());
+    this.activeItem = this.items[index];
+  }
 }
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/overdue-transaction/overdue-transaction.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/overdue-transaction/overdue-transaction.component.ts
index d967c7369..8bef393fe 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/overdue-transaction/overdue-transaction.component.ts
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/overdue-transaction/overdue-transaction.component.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { Item } from '@app/admin/classes/items';
 import { Loan, LoanOverduePreview } from '@app/admin/classes/loans';
 import { PatronTransactionEvent, PatronTransactionEventType } from '@app/admin/classes/patron-transaction';
@@ -29,6 +29,9 @@ import { forkJoin } from 'rxjs';
 })
 export class OverdueTransactionComponent implements OnInit {
 
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private recordService: RecordService = inject(RecordService);
+
   // COMPONENT ATTRIBUTES ====================================================
   /** the overdue preview to display */
   @Input() transaction: {loan: Loan, fees: LoanOverduePreview};
@@ -47,17 +50,6 @@ export class OverdueTransactionComponent implements OnInit {
     return this.organisationService.organisation;
   }
 
-  // CONSTRUCTOR & HOOKS =====================================================
-  /**
-   * constructor
-   * @param organisationService - OrganisationService
-   * @param recordService - RecordService
-   */
-  constructor(
-    private organisationService: OrganisationService,
-    private recordService: RecordService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     const itemRecord$ = this.recordService.getRecord('items', this.transaction.loan.item_pid.value);
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-fee/patron-fee.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-fee/patron-fee.component.ts
index a7c833f33..d911e7bcb 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-fee/patron-fee.component.ts
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-fee/patron-fee.component.ts
@@ -15,15 +15,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { getCurrencySymbol } from '@angular/common';
-import { Component, EventEmitter, Input, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
-import { ApiService, RecordService } from '@rero/ng-core';
+import { ApiService, CONFIG, RecordService } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
 import { DateTime } from 'luxon';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { PatronTransactionApiService } from 'projects/admin/src/app/api/patron-transaction-api.service';
 import { OrganisationService } from 'projects/admin/src/app/service/organisation.service';
 
@@ -34,11 +34,17 @@ import { OrganisationService } from 'projects/admin/src/app/service/organisation
 })
 export class PatronFeeComponent implements OnInit {
 
+  private messageService = inject(MessageService);
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private recordService: RecordService = inject(RecordService);
+  private translateService: TranslateService = inject(TranslateService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private userService: UserService = inject(UserService);
+  private patronTransactionApiService: PatronTransactionApiService = inject(PatronTransactionApiService);
+  private apiService: ApiService = inject(ApiService);
+
   // COMPONENT ATTRIBUTES =====================================================
-  /** Patron pid */
-  @Input() patronPid: string;
-  /** Organisation pid */
-  @Input() organisationPid: string;
 
   /** form */
   form: FormGroup = new FormGroup({});
@@ -46,37 +52,20 @@ export class PatronFeeComponent implements OnInit {
   formFields: FormlyFieldConfig[];
   /** model */
   model: FeeFormModel;
-  /** On submit event */
-  onSubmit: EventEmitter<any> = new EventEmitter();
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param bsModalRef - BsModalRef
-   * @param toastr - ToastrService
-   * @param translateService - TranslateService
-   * @param organisationService - OrganisationService
-   * @param userService - UserService
-   * @param patronTransactionApiService - PatronTransactionApiService
-   * @param apiService - ApiService
-   */
-  constructor(
-    private recordService: RecordService,
-    private bsModalRef: BsModalRef,
-    private toastr: ToastrService,
-    private translateService: TranslateService,
-    private organisationService: OrganisationService,
-    private userService: UserService,
-    private patronTransactionApiService: PatronTransactionApiService,
-    private apiService: ApiService
-  ) { }
+  patronPid: string | undefined;
+  organisationPid: string | undefined;
 
+  // HOOKS ======================================================
   /** OnInit Hook */
   ngOnInit(): void {
-    if (!this.patronPid) {
+    const data: any = this.dynamicDialogConfig.data;
+    if (!data || !data.patronPid || data.organisationPid) {
       this.closeModal();
     }
+    this.patronPid = data.patronPid;
+    this.organisationPid = data.organisationPid;
+
     const librarySchema$ = this.recordService.getSchemaForm('patron_transactions');
     librarySchema$.subscribe((schema: any) => {
       this._initForm(schema.schema.properties);
@@ -92,28 +81,29 @@ export class PatronFeeComponent implements OnInit {
     if (model.creation_date instanceof Date) {
       model.creation_date = DateTime.fromObject(model.creation_date).toISO();
     }
-    this.patronTransactionApiService.addFee(model).subscribe(
-      () => {
-        this.onSubmit.next('submit');
+    this.patronTransactionApiService.addFee(model).subscribe({
+      next: () => {
         this.closeModal();
-        this.toastr.success(
-          this.translateService.instant('Added a new fee.'),
-          this.translateService.instant('Patron transaction')
-        );
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('Patron transaction'),
+          detail: this.translateService.instant('Added a new fee.'),
+          life: CONFIG.MESSAGE_LIFE
+        });
       },
-      () => {
-        this.toastr.error(
-          this.translateService.instant('An error has occurred. Please try again.'),
-          this.translateService.instant('Patron transaction'),
-          { disableTimeOut: true }
-        );
-      }
-    );
+      error: () => this.messageService.add({
+        severity: 'error',
+        summary: this.translateService.instant('Patron transaction'),
+        detail: this.translateService.instant('An error has occurred. Please try again.'),
+        sticky: true,
+        closable: true
+      })
+    });
   }
 
   /** Close modal box */
   closeModal(): void {
-    this.bsModalRef.hide();
+    this.dynamicDialogRef.close();
   }
 
   /** Init form model */
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.ts
index f256ce80c..4613a6bca 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.ts
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.ts
@@ -15,14 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { getCurrencySymbol } from '@angular/common';
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { PatronTransactionService } from '@app/admin/circulation/services/patron-transaction.service';
+import { PatronTransaction } from '@app/admin/classes/patron-transaction';
+import { OrganisationService } from '@app/admin/service/organisation.service';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
-import { OrganisationService } from '@app/admin/service/organisation.service';
-import { PatronTransaction } from '@app/admin/classes/patron-transaction';
-import { PatronTransactionService } from '@app/admin/circulation/services/patron-transaction.service';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
 
 @Component({
@@ -31,6 +31,12 @@ import { PatronTransactionService } from '@app/admin/circulation/services/patron
 })
 export class PatronTransactionEventFormComponent implements OnInit {
 
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private translateService: TranslateService = inject(TranslateService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private patronTransactionService: PatronTransactionService = inject(PatronTransactionService);
+
   /** the transactions to perform with this form */
   transactions: Array<PatronTransaction>;
 
@@ -49,19 +55,11 @@ export class PatronTransactionEventFormComponent implements OnInit {
   /** model of the form */
   model: FormModel;
 
-  constructor(
-    private modalService: BsModalService,
-    private translateService: TranslateService,
-    protected organisationService: OrganisationService,
-    protected bsModalRef: BsModalRef,
-    private patronTransactionService: PatronTransactionService
-  ) { }
-
   ngOnInit() {
-    const initialState: any = this.modalService.config.initialState;
-    this.transactions = initialState.transactions;
-    this.action = initialState.action;
-    this._mode = initialState.mode;
+    const data: any = this.dynamicDialogConfig.data;
+    this.transactions = data.transactions;
+    this.action = data.action;
+    this._mode = data.mode;
     this._initForm();
   }
 
@@ -171,7 +169,7 @@ export class PatronTransactionEventFormComponent implements OnInit {
    * Allow to close the modal dialog box
    */
   closeModal() {
-    this.bsModalRef.hide();
+    this.dynamicDialogRef.close();
   }
 
   /** Get current organisation
@@ -211,7 +209,7 @@ export class PatronTransactionEventFormComponent implements OnInit {
         this.patronTransactionService.cancelPatronTransaction(transaction, formValues.amount, formValues.comment);
       }
     }
-    this.bsModalRef.hide();
+    this.dynamicDialogRef.close();
   }
 }
 
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.ts
index 00ace14b0..84f07b5ea 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.ts
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { OrganisationService } from '@app/admin/service/organisation.service';
 import { PatronTransactionEvent, PatronTransactionEventType } from '@app/admin/classes/patron-transaction';
@@ -25,6 +25,9 @@ import { PatronTransactionEvent, PatronTransactionEventType } from '@app/admin/c
 })
 export class PatronTransactionEventComponent {
 
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private translateService: TranslateService = inject(TranslateService);
+
   /** the event ot display */
   @Input() event: PatronTransactionEvent;
 
@@ -34,16 +37,6 @@ export class PatronTransactionEventComponent {
   /** store a reference to enum to use in html template */
   patronTransactionEventType = PatronTransactionEventType;
 
-  /**
-   * Constructor
-   * @param organisationService - OrganisationService
-   * @param translateService - TranslateService
-   */
-  constructor(
-    private organisationService: OrganisationService,
-    private translateService: TranslateService
-  ) { }
-
   /** Get current organisation
    *  @return: current organisation
    */
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/overdue-transaction-detail/overdue-transaction-detail.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/overdue-transaction-detail/overdue-transaction-detail.component.ts
index 1076c392c..6a2a275f6 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/overdue-transaction-detail/overdue-transaction-detail.component.ts
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/overdue-transaction-detail/overdue-transaction-detail.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { Item } from '@app/admin/classes/items';
 import { PatronTransaction } from '@app/admin/classes/patron-transaction';
 import { RecordService } from '@rero/ng-core';
@@ -27,17 +27,13 @@ import { map, mergeMap } from 'rxjs/operators';
 })
 export class OverdueTransactionDetailComponent implements OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+
   /** Patron transaction */
   @Input() transaction: PatronTransaction;
   /** item linked to this transaction if transaction linked to a loan */
   item: Item;
 
-  /**
-   * constructor
-   * @param recordService - RecordService
-   */
-  constructor(private recordService: RecordService) { }
-
   /** Load item information's if the transaction is linked to a loan */
   ngOnInit(): void {
     if (this.transaction && this.transaction.loan && this.transaction.loan.pid) {
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.ts
index d415412e7..32f15c023 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.ts
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.ts
@@ -15,15 +15,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { PatronTransactionService } from '@app/admin/circulation/services/patron-transaction.service';
 import { PatronTransaction, PatronTransactionEventType, PatronTransactionStatus } from '@app/admin/classes/patron-transaction';
 import { OrganisationService } from '@app/admin/service/organisation.service';
-import { BsModalService } from 'ngx-bootstrap/modal';
 import {
   PatronTransactionEventFormComponent
 } from '../patron-transaction-event-form/patron-transaction-event-form.component';
+import { DialogService } from 'primeng/dynamicdialog';
 
 
 @Component({
@@ -32,6 +32,11 @@ import {
 })
 export class PatronTransactionComponent implements OnInit {
 
+  private dialogService: DialogService = inject(DialogService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private patronTransactionService: PatronTransactionService = inject(PatronTransactionService);
+  private router: ActivatedRoute = inject(ActivatedRoute);
+
   // COMPONENT ATTRIBUTES ============================================
   /** Patron transaction */
   @Input() transaction: PatronTransaction;
@@ -68,23 +73,9 @@ export class PatronTransactionComponent implements OnInit {
   get organisation() {
     return this.organisationService.organisation;
   }
-  // CONSTRUCTOR & HOOKS ============================================
-  /**
-   * Constructor
-   * @param organisationService - OrganisationService
-   * @param patronTransactionService - PatronTransactionService
-   * @param modalService - BsModalService
-   * @param router - ActivatedRoute
-   */
-  constructor(
-    private organisationService: OrganisationService,
-    private patronTransactionService: PatronTransactionService,
-    private modalService: BsModalService,
-    private router: ActivatedRoute
-  ) {}
-
+  // HOOKS ============================================
   /** OnInit hook */
-  ngOnInit() {
+  ngOnInit(): void {
     if (this.transaction) {
       // Open the current event if the url parameter match with transaction pid
       if (this.router.snapshot.queryParams.event === this.transaction.pid) {
@@ -94,13 +85,12 @@ export class PatronTransactionComponent implements OnInit {
     }
   }
 
-
   // COMPONENT FUNCTIONS ========================================================
 
   /** Check if the transaction contains a 'dispute' linked event
    *  @return: True if transaction is still open and contains a 'dispute' event; False otherwise
    */
-  public isDisputed() {
+  public isDisputed(): boolean {
     return (this.transaction.status === PatronTransactionStatus.OPEN)
       ? this.transaction.events.some( e => e.type === PatronTransactionEventType.DISPUTE)
       : false;
@@ -111,12 +101,13 @@ export class PatronTransactionComponent implements OnInit {
    * @param action: the action to execute (pay, dispute, resolve)
    * @param model: if action == 'pay', if we pay a part or the total amount of the transaction ('part'|'full')
    */
-  patronTransactionAction(action: string, mode?: string) {
-    const initialState = {
-      action,
-      mode,
-      transactions: [this.transaction]
-    };
-    this.modalService.show(PatronTransactionEventFormComponent, {initialState});
+  patronTransactionAction(action: string, mode?: string): void {
+    this.dialogService.open(PatronTransactionEventFormComponent, {
+      data: {
+        action,
+        mode,
+        transactions: [this.transaction]
+      }
+    })
   }
 }
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.ts
index d37767535..b069e8e3b 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.ts
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.ts
@@ -15,15 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { Loan, LoanOverduePreview } from '@app/admin/classes/loans';
 import { PatronTransaction, PatronTransactionStatus } from '@app/admin/classes/patron-transaction';
 import { OrganisationService } from '@app/admin/service/organisation.service';
 import { PatronService } from '@app/admin/service/patron.service';
 import { UserService } from '@rero/shared';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Subscription } from 'rxjs';
-import { first } from 'rxjs/operators';
 import { PatronTransactionService } from '../../services/patron-transaction.service';
 import { PatronFeeComponent } from './patron-fee/patron-fee.component';
 import { PatronTransactionEventFormComponent } from './patron-transaction-event-form/patron-transaction-event-form.component';
@@ -35,29 +34,35 @@ import { PatronTransactionEventFormComponent } from './patron-transaction-event-
 })
 export class PatronTransactionsComponent implements OnInit, OnDestroy {
 
+  private dialogService: DialogService = inject(DialogService);
+  private patronService: PatronService = inject(PatronService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private patronTransactionService: PatronTransactionService = inject(PatronTransactionService);
+  private userService: UserService = inject(UserService);
+
+  private dynamicDialogRef: DynamicDialogRef | undefined;
+
   // COMPONENTS ATTRIBUTES ===============================================================
   /** all tab reference array */
   tabs = {
     engagedFees: {
       isOpen: true,  // open by default
-      transactions: [] as Array<PatronTransaction>,
+      transactions: [] as PatronTransaction[],
       totalAmount: 0
     },
     overduePreviewFees: {
       isOpen: false,
-      transactions: [] as Array<{fees: LoanOverduePreview, loan: Loan}>,
+      transactions: [] as {fees: LoanOverduePreview, loan: Loan}[],
       totalAmount: 0
     },
     historyFees: {
       isOpen: false,
-      transactions: null as Array<PatronTransaction>
+      transactions: null as PatronTransaction[]
     }
   };
 
   /** Current patron */
   private patron: any = undefined;
-  /** Modal used for manual fee */
-  private modalRef: BsModalRef;
   /** Component subscriptions */
   private subscriptions = new Subscription();
 
@@ -67,7 +72,7 @@ export class PatronTransactionsComponent implements OnInit, OnDestroy {
    * Get current organisation
    * @return current organisation
    */
-  get organisation() {
+  get organisation(): any {
     return this.organisationService.organisation;
   }
 
@@ -75,31 +80,15 @@ export class PatronTransactionsComponent implements OnInit, OnDestroy {
    * Get engaged fees related to the current user library
    * @return the list of corresponding transactions.
    */
-  get myLibraryEngagedFees(): Array<PatronTransaction> {
+  get myLibraryEngagedFees(): PatronTransaction[] {
     const libraryPID = this.userService.user.currentLibrary;
     return this.tabs.engagedFees.transactions.filter(t => t.library != null && t.library.pid === libraryPID);
   }
 
 
   // CONSTRUCTOR & HOOKS ==================================================================
-  /**
-   * constructor
-   * @param patronService - PatronService
-   * @param organisationService - OrganisationService
-   * @param patronTransactionService - PatronTransactionService
-   * @param modalService - BsModalService
-   * @param userService - UserService
-   */
-  constructor(
-    private patronService: PatronService,
-    private organisationService: OrganisationService,
-    private patronTransactionService: PatronTransactionService,
-    private modalService: BsModalService,
-    private userService: UserService
-  ) {}
-
   /** OnInit hook */
-  ngOnInit() {
+  ngOnInit(): void {
     this.patronService.currentPatron$.subscribe((patron: any) => {
       if (patron) {
         this.patron = patron;
@@ -126,13 +115,13 @@ export class PatronTransactionsComponent implements OnInit, OnDestroy {
   }
 
   /** OnDestroy hook */
-  ngOnDestroy() {
+  ngOnDestroy(): void {
     this.subscriptions.unsubscribe();
   }
 
   // COMPONENT FUNCTIONS ==================================================================
   /** load all PatronTransactions for the patron without 'status' restriction */
-  loadFeesHistory() {
+  loadFeesHistory(): void {
     if (this.patron && this.tabs.historyFees.transactions === null) {
       this.patronTransactionService
         .patronTransactionsByPatron$(this.patron.pid, undefined, PatronTransactionStatus.CLOSED.toString())
@@ -143,23 +132,25 @@ export class PatronTransactionsComponent implements OnInit, OnDestroy {
   }
 
   /** Allow to pay the total of each pending patron transactions */
-  payAllTransactions() {
-    const initialState = {
-      action: 'pay',
-      mode: 'full',
-      transactions: this.tabs.engagedFees.transactions
-    };
-    this.modalService.show(PatronTransactionEventFormComponent, {initialState});
+  payAllTransactions(): void {
+    this.dialogService.open(PatronTransactionEventFormComponent, {
+      data: {
+        action: 'pay',
+        mode: 'full',
+        transactions: this.tabs.engagedFees.transactions
+      }
+    })
   }
 
   /** Allow to pay the total of each pending patron transactions */
-  payAllTransactionsInMyLibrary() {
-    const initialState = {
-      action: 'pay',
-      mode: 'full',
-      transactions: this.myLibraryEngagedFees
-    };
-    this.modalService.show(PatronTransactionEventFormComponent, {initialState});
+  payAllTransactionsInMyLibrary(): void {
+    this.dialogService.open(PatronTransactionEventFormComponent, {
+      data: {
+        action: 'pay',
+        mode: 'full',
+        transactions: this.myLibraryEngagedFees
+      }
+    })
   }
 
   /**
@@ -167,7 +158,7 @@ export class PatronTransactionsComponent implements OnInit, OnDestroy {
    * All other tabs will be hidden.
    * @param tabToOpen: the tab to open
    */
-  openTab(tabToOpen): void {
+  openTab(tabToOpen: any): void {
     for (const entry of Object.values(this.tabs)) {
       entry.isOpen = tabToOpen === entry;
     }
@@ -175,18 +166,15 @@ export class PatronTransactionsComponent implements OnInit, OnDestroy {
 
   /** Opening a modal to manually add a fee. */
   addFee(): void {
-    this.modalRef = this.modalService.show(PatronFeeComponent, {
-        ignoreBackdropClick: true,
-        initialState: {
-          patronPid: this.patron.pid,
-          organisationPid: this.patron.organisation.pid
-        }
+    this.dynamicDialogRef = this.dialogService.open(PatronFeeComponent, {
+      dismissableMask: true,
+      data: {
+        patronPid: this.patron.pid,
+        organisationPid: this.patron.organisation.pid
       }
-    );
+    })
     this.subscriptions.add(
-      this.modalRef.content.onSubmit
-        .pipe(first())
-        .subscribe(() => this.reloadEngagedFees())
+      this.dynamicDialogRef.onClose.subscribe(() => this.reloadEngagedFees())
     );
   }
 
diff --git a/projects/admin/src/app/circulation/patron/pending/pending-item/pending-item.component.html b/projects/admin/src/app/circulation/patron/pending/pending-item/pending-item.component.html
index 82d3e5e55..e4816c869 100644
--- a/projects/admin/src/app/circulation/patron/pending/pending-item/pending-item.component.html
+++ b/projects/admin/src/app/circulation/patron/pending/pending-item/pending-item.component.html
@@ -17,13 +17,8 @@
 @if (item && document) {
   <!-- FIRST ROW : barcode, title, availability, action button -->
   <div class="col-2">
-    <button type="button" class="btn-show-more"
-            (click)="isCollapsed = !isCollapsed"
-            [attr.aria-expanded]="!isCollapsed"
-            aria-controls="collapse">
-      <i [ngClass]="{ 'fa-caret-down': !isCollapsed, 'fa-caret-right': isCollapsed }" class="fa" aria-hidden="true"></i>
-    </button>
-    <a [routerLink]="['/records', 'items', 'detail', item.pid]">{{ item.barcode }}</a>
+    <shared-open-close-button (status)="isCollapsed = $event" />
+    <a class="ml-1" [routerLink]="['/records', 'items', 'detail', item.pid]">{{ item.barcode }}</a>
   </div>
   <div class="col-5">
     @if (document.title | mainTitle; as title) {
@@ -41,11 +36,13 @@
   <!-- SECOND ROW: item detail -->
   @if (!isCollapsed) {
     <div class="col-12">
-      <dl class="row">
+      <dl class="grid">
         <!-- position into queue -->
         <dt class="offset-1 col-1 label-title" translate>Position</dt>
         <dd class="col-10">
-          <span class="badge badge-info">{{ loan.metadata.rank }} / {{ item.current_pending_requests }}</span>
+          <p-tag severity="info">
+            {{ loan.metadata.rank }} / {{ item.current_pending_requests }}
+          </p-tag>
         </dd>
         <!-- item location -->
         @if (item.location.pid | getRecord: 'locations' | async; as location) {
diff --git a/projects/admin/src/app/circulation/patron/pending/pending-item/pending-item.component.ts b/projects/admin/src/app/circulation/patron/pending/pending-item/pending-item.component.ts
index 71c92d74e..b32dbd2a1 100644
--- a/projects/admin/src/app/circulation/patron/pending/pending-item/pending-item.component.ts
+++ b/projects/admin/src/app/circulation/patron/pending/pending-item/pending-item.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { forkJoin } from 'rxjs';
 import { ItemsService } from '../../../../service/items.service';
@@ -25,6 +25,9 @@ import { ItemsService } from '../../../../service/items.service';
 })
 export class PendingItemComponent implements OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+  private itemService: ItemsService = inject(ItemsService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Loan */
   @Input() loan = undefined;
@@ -36,18 +39,6 @@ export class PendingItemComponent implements OnInit {
   /** detail is collapsed */
   isCollapsed = true;
 
-
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param itemService - ItemService
-   */
-  constructor(
-    private recordService: RecordService,
-    private itemService: ItemsService
-  ) { }
-
   /** OnInit hook */
   ngOnInit() {
     if (this.loan) {
diff --git a/projects/admin/src/app/circulation/patron/pending/pending.component.html b/projects/admin/src/app/circulation/patron/pending/pending.component.html
index c21b56dfb..7ddc78996 100644
--- a/projects/admin/src/app/circulation/patron/pending/pending.component.html
+++ b/projects/admin/src/app/circulation/patron/pending/pending.component.html
@@ -18,7 +18,7 @@
   @if (loans && loans.length > 0) {
     <div>
       <!-- HEADER -->
-      <div class="row p-2 mb-1 bg-dark rounded text-light">
+      <div class="grid p-2 mb-1 bg-dark rounded text-light">
         <div class="col-2" translate>Item</div>
         <div class="col-5" translate>Title</div>
         <div class="col-2" translate>Request date</div>
diff --git a/projects/admin/src/app/circulation/patron/pending/pending.component.ts b/projects/admin/src/app/circulation/patron/pending/pending.component.ts
index d2ea2cde3..18ca2ca79 100644
--- a/projects/admin/src/app/circulation/patron/pending/pending.component.ts
+++ b/projects/admin/src/app/circulation/patron/pending/pending.component.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { PatronService } from '../../../service/patron.service';
 import { CirculationService } from '../../services/circulation.service';
 
@@ -25,19 +25,12 @@ import { CirculationService } from '../../services/circulation.service';
 })
 export class PendingComponent implements OnInit {
 
+  private patronService: PatronService = inject(PatronService);
+  private circulationService: CirculationService = inject(CirculationService);
+
   /** Array of loans */
   loans: [];
 
-  /**
-   * Constructor
-   * @param patronService - PatronService
-   * @param circulationService - CirculationService
-   */
-  constructor(
-    private patronService: PatronService,
-    private circulationService: CirculationService
-  ) {}
-
   /**
    * Init
    */
@@ -61,6 +54,7 @@ export class PendingComponent implements OnInit {
     const index = this.loans.findIndex((element: any) => element.id == loanId);
     this.loans.splice(index, 1);
     // Update count on tab
-    this.circulationService.circulationInformations.statistics['pending'] -= 1;
+    this.circulationService.statisticsDecrease('pending', 1);
+    //this.circulationService.circulationInformations.statistics['pending'] -= 1;
   }
 }
diff --git a/projects/admin/src/app/circulation/patron/pickup/pickup-item/pickup-item.component.ts b/projects/admin/src/app/circulation/patron/pickup/pickup-item/pickup-item.component.ts
index a6fa59cd6..88fc8a171 100644
--- a/projects/admin/src/app/circulation/patron/pickup/pickup-item/pickup-item.component.ts
+++ b/projects/admin/src/app/circulation/patron/pickup/pickup-item/pickup-item.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { forkJoin } from 'rxjs';
 import { ItemsService } from '../../../../service/items.service';
@@ -25,6 +25,9 @@ import { ItemsService } from '../../../../service/items.service';
 })
 export class PickupItemComponent implements OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+  private itemService: ItemsService = inject(ItemsService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Loan */
   @Input() loan = undefined;
@@ -34,17 +37,6 @@ export class PickupItemComponent implements OnInit {
   item = undefined;
   document = undefined;
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param recordService - RecordService,
-   * @param itemService - ItemService
-   */
-  constructor(
-    private recordService: RecordService,
-    private itemService: ItemsService
-  ) { }
-
   /** OnInit hook */
   ngOnInit() {
     if (this.loan) {
diff --git a/projects/admin/src/app/circulation/patron/pickup/pickup.component.ts b/projects/admin/src/app/circulation/patron/pickup/pickup.component.ts
index aca22a55d..fd254e435 100644
--- a/projects/admin/src/app/circulation/patron/pickup/pickup.component.ts
+++ b/projects/admin/src/app/circulation/patron/pickup/pickup.component.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { PatronService } from '../../../service/patron.service';
 import { CirculationService } from '../../services/circulation.service';
 
@@ -25,19 +25,12 @@ import { CirculationService } from '../../services/circulation.service';
 })
 export class PickupComponent implements OnInit {
 
+  private patronService: PatronService = inject(PatronService);
+  private circulationService: CirculationService = inject(CirculationService);
+
   /** Loans */
   loans: [];
 
-  /**
-   * Constructor
-   * @param patronService - PatronService
-   * @param circulationService - CirculationService
-   */
-  constructor(
-    private patronService: PatronService,
-    private circulationService: CirculationService
-  ) { }
-
   /** OnInit hook */
   ngOnInit() {
     this.patronService.currentPatron$.subscribe((patron: any) => {
@@ -59,6 +52,6 @@ export class PickupComponent implements OnInit {
     const index = this.loans.findIndex((element: any) => element.id == loanId);
     this.loans.splice(index, 1);
     // Update count on tab
-    this.circulationService.circulationInformations.statistics['pickup'] -= 1;
+    this.circulationService.statisticsDecrease('pickup', 1);
   }
 }
diff --git a/projects/admin/src/app/circulation/patron/profile/profile.component.ts b/projects/admin/src/app/circulation/patron/profile/profile.component.ts
index 0b945f92a..7f035d573 100644
--- a/projects/admin/src/app/circulation/patron/profile/profile.component.ts
+++ b/projects/admin/src/app/circulation/patron/profile/profile.component.ts
@@ -14,12 +14,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { BsModalService } from 'ngx-bootstrap/modal';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { DialogService } from 'primeng/dynamicdialog';
 import { Subscription } from 'rxjs';
 import { PatronService } from '../../../service/patron.service';
 import { RecordPermissionService } from '../../../service/record-permission.service';
 import { ChangePasswordFormComponent } from '../change-password-form/change-password-form.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'admin-profile',
@@ -27,6 +28,11 @@ import { ChangePasswordFormComponent } from '../change-password-form/change-pass
 })
 export class ProfileComponent implements OnInit, OnDestroy {
 
+  private dialogService: DialogService = inject(DialogService);
+  private patronService: PatronService = inject(PatronService);
+  private recordPermission: RecordPermissionService = inject(RecordPermissionService);
+  private translateService: TranslateService = inject(TranslateService);
+
   /** Current patron */
   currentPatron$: any;
 
@@ -36,19 +42,6 @@ export class ProfileComponent implements OnInit, OnDestroy {
   /** Patron permission */
   private permissions: any;
 
-  /**
-   * Constructor
-   * @param patronService - PatronService
-   * @param modalService - BsModalService
-   * @param recordPermission - RecordPermissionService
-   */
-  constructor(
-    private patronService: PatronService,
-    private modalService: BsModalService,
-    private recordPermission: RecordPermissionService
-  ) {
-  }
-
   /**
    * Component initialization.
    */
@@ -85,9 +78,11 @@ export class ProfileComponent implements OnInit, OnDestroy {
    * @param patron - Patron the patron to update the password.
    */
   updatePatronPassword(patron) {
-    const initialState = {
-      patron
-    };
-    this.modalService.show(ChangePasswordFormComponent, { initialState });
+    this.dialogService.open(ChangePasswordFormComponent, {
+      header: this.translateService.instant('Update Patron Password'),
+      data: {
+        patron
+      }
+    })
   }
 }
diff --git a/projects/admin/src/app/circulation/pipe/get-loan-cipo.pipe.ts b/projects/admin/src/app/circulation/pipe/get-loan-cipo.pipe.ts
index 77eafbbc6..675426412 100644
--- a/projects/admin/src/app/circulation/pipe/get-loan-cipo.pipe.ts
+++ b/projects/admin/src/app/circulation/pipe/get-loan-cipo.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { Observable } from 'rxjs';
 import { CircPolicy } from '../../classes/circ-policy';
 import { Loan } from '../../classes/loans';
@@ -26,13 +26,7 @@ import { LoanService } from '../../service/loan.service';
 })
 export class GetLoanCipoPipe implements PipeTransform {
 
-  /**
-   * Constructor
-   * @param _loanService - LoanService
-   */
-  constructor(
-    private _loanService: LoanService
-  ){ }
+  private loanService: LoanService = inject(LoanService);
 
   /**
    * Search an return the circulation policy related to a loan.
@@ -40,7 +34,7 @@ export class GetLoanCipoPipe implements PipeTransform {
    * @returns Observable on the related CircPolicy
    */
   transform(loan: Loan): Observable<CircPolicy> {
-    return this._loanService.getCirculationPolicy(loan.pid);
+    return this.loanService.getCirculationPolicy(loan.pid);
   }
 
 }
diff --git a/projects/admin/src/app/circulation/services/circulation.service.ts b/projects/admin/src/app/circulation/services/circulation.service.ts
index 31b7cae15..7d9653f86 100644
--- a/projects/admin/src/app/circulation/services/circulation.service.ts
+++ b/projects/admin/src/app/circulation/services/circulation.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,81 +14,44 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
-import moment from 'moment';
-import { BehaviorSubject } from 'rxjs';
+import { Injectable, signal, WritableSignal } from '@angular/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class CirculationService {
-  /** Observable on current library closed dates */
-  currentLibraryClosedDates$: BehaviorSubject<Array<moment>> = new BehaviorSubject([]);
 
-  /** Circulation informations with messages and statistics */
-  circulationInformations: {
-    messages: Array<{type: string, content: string}>,
-    statistics: any;
-  };
+  messages: WritableSignal<{type: string, content: string}[]> = signal([]);
+  statistics: WritableSignal<{[key: string]: number}> = signal({});
 
-  /** Array of current library closed dates */
-  private _currentLibraryClosedDates: Array<moment> = [];
-
-  /** Get closed dates of the user current library */
-  get currentLibraryClosedDates(): Array<moment> {
-    return this._currentLibraryClosedDates;
-  }
-
-  /** Set closed dates of the user current library */
-  set currentLibraryClosedDates(closedDates: Array<moment>) {
-    this._currentLibraryClosedDates = closedDates;
-    this.currentLibraryClosedDates$.next(closedDates);
-  }
-
-  /**
-   * Increment a circulation statistic for this user.
-   * @param type - string: the statistic type (pending, request, loans, ...)
-   * @param idx - number: the number to increment.
-   * @return the new statistic counter
-   */
-  incrementCirculationStatistic(type: string, idx: number = 1): number {
-    this.circulationInformations = this.circulationInformations || {messages: [], statistics: {}};
-    this.circulationInformations.statistics[type] = (this.circulationInformations.statistics[type] || 0) + idx;
-    return this.circulationInformations.statistics[type];
+  statisticsIncrease(type: string, increment: number = 1): void {
+    let stats = this.statistics();
+    if (!(type in stats)) {
+      stats = { ...stats, [type]: 0 };
+    }
+    stats[type] += increment;
+    this.statistics.set(stats);
   }
 
-  /**
-   * Decrement a circulation statistic for this user.
-   * @param type - string: the statistic type (pending, request, loans, ...)
-   * @param idx - number: the number to decrement.
-   * @return the new statistic counter
-   */
-  decrementCirculationStatistic(type: string, idx: number = 1): number {
-    this.circulationInformations = this.circulationInformations || {messages: [], statistics: {}};
-    if (!(type in this.circulationInformations.statistics)) {
-      return 0;
+  statisticsDecrease(type: string, decrement: number = 1): void {
+    const stats = this.statistics();
+    if (!(type in stats)) {
+      throw new Error(`The statistical "${type}" key doesn't exist`);
+    }
+    if (stats[type] < decrement) {
+      throw new Error(`The decrease value of "${type}" is greater than the statistical value`);
     }
-    const newStat = this.circulationInformations.statistics[type] - idx;
-    this.circulationInformations.statistics[type] = (newStat > 0)
-      ? newStat
-      : 0;
-    return this.circulationInformations.statistics[type];
+    stats[type] -= decrement;
+    this.statistics.set(stats);
   }
 
-  /**
-   * Append a circulation message for this user.
-   * @param message: the message to append
-   */
   addCirculationMessage(message: {type: string, content: string}): void {
-    this.circulationInformations = this.circulationInformations || {messages: [], statistics: {}};
-    this.circulationInformations.messages.push(message);
+    this.messages.set([...this.messages(), message]);
   }
 
   /** Clear statistics */
   clear(): void {
-    this.circulationInformations = {
-      messages: [],
-      statistics: {}
-    };
+    this.messages.set([]);
+    this.statistics.set({});
   }
 }
diff --git a/projects/admin/src/app/circulation/services/loan-fixed-date.service.ts b/projects/admin/src/app/circulation/services/loan-fixed-date.service.ts
index 66d5a9319..f9178ba36 100644
--- a/projects/admin/src/app/circulation/services/loan-fixed-date.service.ts
+++ b/projects/admin/src/app/circulation/services/loan-fixed-date.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
+ * Copyright (C) 2023-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,8 +14,8 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
-import { LibrarySwitchService } from '@app/admin/menu/service/library-switch.service';
+import { inject, Injectable } from '@angular/core';
+import { LibraryService } from '@app/admin/menu/service/library.service';
 import { MenuService } from '@app/admin/menu/service/menu.service';
 import { LocalStorageService } from '@rero/ng-core';
 
@@ -24,23 +24,17 @@ import { LocalStorageService } from '@rero/ng-core';
 })
 export class LoanFixedDateService {
 
+  private localeStorageService: LocalStorageService = inject(LocalStorageService);
+  private libraryService: LibraryService = inject(LibraryService);
+  private menuService: MenuService = inject(MenuService);
+
   /** The key to local Storage */
   private _dueDateKey: string = 'due_date_remember';
 
   /** Expiration 12 hours (definition in seconds) */
   private _keyExpiration: number = 43200;
 
-  /**
-   * Constructor
-   * @param _localeStorageService - LocalStorageService
-   * @param _librarySwitchService - LibrarySwitchService
-   * @param _menuService - MenuService
-   */
-  constructor(
-    private _localeStorageService: LocalStorageService,
-    private _librarySwitchService: LibrarySwitchService,
-    private _menuService: MenuService
-  ) {
+  constructor() {
     this.init();
   }
 
@@ -49,7 +43,7 @@ export class LoanFixedDateService {
    * @returns true if the value exists
    */
   hasValue(): boolean {
-    return this._localeStorageService.has(this._dueDateKey);
+    return this.localeStorageService.has(this._dueDateKey);
   }
 
   /**
@@ -57,20 +51,20 @@ export class LoanFixedDateService {
    * @param value - Date in string format
    */
   set(value: string): void {
-    this._localeStorageService.set(this._dueDateKey, value);
+    this.localeStorageService.set(this._dueDateKey, value);
   }
 
   /**
    * Getting the date from locale storage
    * @returns The date in string format or null
    */
-  get(): string | null {
+  get(): Date | null {
     // We have a value in local storage
-    if (this._localeStorageService.has(this._dueDateKey)) {
-      if (this._localeStorageService.isExpired(this._dueDateKey, this._keyExpiration)) {
+    if (this.localeStorageService.has(this._dueDateKey)) {
+      if (this.localeStorageService.isExpired(this._dueDateKey, this._keyExpiration)) {
         this.remove();
       } else {
-        const endDate = this._localeStorageService.get(this._dueDateKey);
+        const endDate = this.localeStorageService.get(this._dueDateKey);
         // We compare the retrieved date with today's date
         const endDay = new Date(new Date(endDate).toDateString()).getTime();
         const now = new Date(new Date().toDateString()).getTime();
@@ -87,7 +81,7 @@ export class LoanFixedDateService {
    * Remove value in locale storage
    */
   remove(): void {
-    this._localeStorageService.remove(this._dueDateKey);
+    this.localeStorageService.remove(this._dueDateKey);
   }
 
   /**
@@ -96,8 +90,8 @@ export class LoanFixedDateService {
    */
   init(): void {
     // We delete the stored value if we change library
-    this._librarySwitchService.librarySwitch$.subscribe(() => this.remove());
+    this.libraryService.switch$.subscribe(() => this.remove());
     // Delete locale storage on logout
-    this._menuService.logout$.subscribe(() => this.remove());
+    this.menuService.logout$.subscribe(() => this.remove());
   }
 }
diff --git a/projects/admin/src/app/circulation/services/patron-transaction.service.ts b/projects/admin/src/app/circulation/services/patron-transaction.service.ts
index f000a3399..7c54e9814 100644
--- a/projects/admin/src/app/circulation/services/patron-transaction.service.ts
+++ b/projects/admin/src/app/circulation/services/patron-transaction.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,39 +14,37 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { Record, RecordService } from '@rero/ng-core';
-import { ToastrService } from 'ngx-toastr';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { UserService } from '@rero/shared';
-import { RouteToolService } from '@app/admin/routes/route-tool.service';
+import { inject, Injectable } from '@angular/core';
 import {
   PatronTransaction,
   PatronTransactionEvent,
   PatronTransactionEventType,
   PatronTransactionStatus
 } from '@app/admin/classes/patron-transaction';
+import { RouteToolService } from '@app/admin/routes/route-tool.service';
+import { TranslateService } from '@ngx-translate/core';
+import { CONFIG, Record, RecordService } from '@rero/ng-core';
+import { UserService } from '@rero/shared';
+import { MessageService } from 'primeng/api';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 @Injectable({
   providedIn: 'root'
 })
 export class PatronTransactionService {
 
+  private recordService: RecordService = inject(RecordService);
+  private userService: UserService = inject(UserService);
+  private routeToolService: RouteToolService = inject(RouteToolService);
+  private translateService: TranslateService = inject(TranslateService);
+  private messageService = inject(MessageService);
+
   /** subject containing current loaded PatronTransactions */
   patronTransactionsSubject$: BehaviorSubject<Array<PatronTransaction>> = new BehaviorSubject([]);
   /** subject emitting accounting transaction about patron fees */
   patronFeesOperationSubject$: Subject<number> = new Subject();
 
-  constructor(
-    private _recordService: RecordService,
-    private _userService: UserService,
-    private _routeToolService: RouteToolService,
-    private _toastService: ToastrService,
-    private _translateService: TranslateService
-  ) { }
-
   /**
    * Allow to build the query to send through the API to retrieve desired data
    * @param patronPid - the patron pid
@@ -79,7 +77,7 @@ export class PatronTransactionService {
    * @returns an observable of `PatronTransaction` corresponding to criteria
    */
   private _loadPatronTransactions(query: string, sort: string = '-creation_date'): Observable<Array<PatronTransaction>> {
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       'patron_transactions',
       query,
       1,
@@ -90,7 +88,7 @@ export class PatronTransactionService {
       sort
     ).pipe(
       map((data: Record) => data.hits),
-      map(hits => this._recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
+      map(hits => this.recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
       map(hits => hits.map( hit => new PatronTransaction(hit.metadata)))
     );
   }
@@ -104,9 +102,9 @@ export class PatronTransactionService {
    */
   patronTransactionsByLoan$(loanPid: string, type?: string, status?: string): Observable<Array<PatronTransaction>> {
     const query = this._buildQuery(undefined, loanPid, type, status);
-    return this._recordService.getRecords('patron_transactions', query, 1, RecordService.MAX_REST_RESULTS_SIZE).pipe(
+    return this.recordService.getRecords('patron_transactions', query, 1, RecordService.MAX_REST_RESULTS_SIZE).pipe(
       map((data: Record) => data.hits),
-      map(hits => this._recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
+      map(hits => this.recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
       map(hits => hits.map( hit => new PatronTransaction(hit.metadata)))
     );
   }
@@ -141,9 +139,9 @@ export class PatronTransactionService {
    */
   loadTransactionHistory(transaction: PatronTransaction) {
     const query = `parent.pid:${transaction.pid}`;
-    this._recordService.getRecords('patron_transaction_events', query, 1, RecordService.MAX_REST_RESULTS_SIZE).pipe(
+    this.recordService.getRecords('patron_transaction_events', query, 1, RecordService.MAX_REST_RESULTS_SIZE).pipe(
       map((data: Record) => data.hits),
-      map(hits => this._recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
+      map(hits => this.recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
       map(hits => hits.map(hit => new PatronTransactionEvent(hit.metadata)))
     ).subscribe(events => transaction.events = events);
   }
@@ -172,16 +170,16 @@ export class PatronTransactionService {
    * @returns An object with `parent`, `operator` and `library` fields fill with current context
    */
   private _buildTransactionEventsSkeleton(transaction: PatronTransaction): any {
-    const currentUser = this._userService.user;
+    const currentUser = this.userService.user;
     return {
       parent: {
-        $ref: this._routeToolService.apiService.getRefEndpoint('patron_transactions', transaction.pid)
+        $ref: this.routeToolService.apiService.getRefEndpoint('patron_transactions', transaction.pid)
       },
       operator: {
-        $ref: this._routeToolService.apiService.getRefEndpoint('patrons', currentUser.patronLibrarian.pid)
+        $ref: this.routeToolService.apiService.getRefEndpoint('patrons', currentUser.patronLibrarian.pid)
       },
       library: {
-        $ref: this._routeToolService.apiService.getRefEndpoint('libraries', currentUser.currentLibrary)
+        $ref: this.routeToolService.apiService.getRefEndpoint('libraries', currentUser.currentLibrary)
       }
     };
   }
@@ -234,23 +232,30 @@ export class PatronTransactionService {
    * @param affectedPatron - the user pid affected by this new transaction event
    */
   private _createTransactionEvent(record: any, affectedPatron: string) {
-    this._recordService.create('patron_transaction_events', record).subscribe(
+    this.recordService.create('patron_transaction_events', record).subscribe(
       () => {
         this.emitPatronTransactionByPatron(affectedPatron, undefined, 'open');
-        const translateType = this._translateService.instant(record.type);
-        this._toastService.success(this._translateService.instant('{{ type }} registered', {type: translateType}));
+        const translateType = this.translateService.instant(record.type);
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('Patron'),
+          detail: this.translateService.instant('{{ type }} registered', {type: translateType}),
+          life: CONFIG.MESSAGE_LIFE
+        });
       },
       (error) => {
         const errorMessage = (error.hasOwnProperty('message') && error.message().hasOwnProperty('message'))
           ? error.message.message
           : 'Server error :: ' + (error.title || error.toString());
         const message = '[' + error.status + ' - ' + error.statusText + '] ' + errorMessage;
-        const translateType = this._translateService.instant(record.type);
-        this._toastService.error(
-          message,
-          this._translateService.instant('{{ type }} creation failed!', { type: translateType }),
-          {disableTimeOut: true, closeButton: true, enableHtml: true}
-        );
+        const translateType = this.translateService.instant(record.type);
+        this.messageService.add({
+          severity: 'error',
+          summary: this.translateService.instant('{{ type }} creation failed!', { type: translateType }),
+          detail: message,
+          sticky: true,
+          closable: true
+        });
       }
     );
   }
diff --git a/projects/admin/src/app/classes/typeahead/ITypeahead-interface.ts b/projects/admin/src/app/classes/typeahead/ITypeahead-interface.ts
deleted file mode 100644
index 59221e492..000000000
--- a/projects/admin/src/app/classes/typeahead/ITypeahead-interface.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { SuggestionMetadata } from '@rero/ng-core';
-import { Observable } from 'rxjs';
-
-export interface ITypeahead {
-
-  /**
-   * Get name of typeahead
-   * @returns string, name of typeahead
-   */
-  getName(): string;
-
-  /**
-   * Convert the input value (i.e. $ref url) into a template html code.
-   * @param options - remote typeahead options
-   * @param value - formControl value i.e. $ref value
-   * @returns Observable of string - html template representation of the value.
-   */
-  getValueAsHTML(options: any, value: string): Observable<string>;
-
-  /**
-   * Get the suggestions list given a search query.
-   * @param options - remote typeahead options
-   * @param query - search query to retrieve the suggestions list
-   * @param numberOfSuggestions - the max number of suggestion to return
-   * @returns - an observable of the list of suggestions.
-   */
-  getSuggestions(options: any, query: string, numberOfSuggestions: number): Observable<Array<SuggestionMetadata | string>>;
-}
diff --git a/projects/admin/src/app/classes/typeahead/documents-typeahead.ts b/projects/admin/src/app/classes/typeahead/documents-typeahead.ts
deleted file mode 100644
index 7388fd786..000000000
--- a/projects/admin/src/app/classes/typeahead/documents-typeahead.ts
+++ /dev/null
@@ -1,181 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
- * Copyright (C) 2020-2023 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { APP_BASE_HREF } from '@angular/common';
-import { Inject, Injectable } from '@angular/core';
-import { ApiService, RecordService, SuggestionMetadata } from '@rero/ng-core';
-import { MainTitlePipe } from '@rero/shared';
-import { Observable, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
-import { ITypeahead } from './ITypeahead-interface';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class DocumentsTypeahead implements ITypeahead {
-
-  /** Maximum length of the suggestion */
-  maxLengthSuggestion = 100;
-
-  /**
-   * Constructor
-   * @param _apiService - ApiService
-   * @param _recordService - RecordService
-   * @param _mainTitlePipe - MainTitlePipe
-   */
-  constructor(
-    private _apiService: ApiService,
-    private _recordService: RecordService,
-    private _mainTitlePipe: MainTitlePipe,
-    @Inject(APP_BASE_HREF) private _baseHref
-  ) { }
-
-  /** Get name of typeahead */
-  getName() {
-    return 'documents';
-  }
-
-  /**
-   * Convert the input value (i.e. $ref url) into a template html code.
-   * @param options - remote typeahead options
-   * @param value - formControl value i.e. $ref value
-   * @returns Observable of string - html template representation of the value.
-   */
-  getValueAsHTML(options: any, value: string): Observable<string> {
-    const url = value.split('/');
-    const pid = url.pop();
-
-    return this._recordService
-      .getRecord(options.type, pid, 1)
-      .pipe(
-        map((data: any) =>
-          `<span class="bg-light p-2"><strong>${this._mainTitlePipe.transform(data.metadata.title)}</strong></span>`
-        )
-      );
-  }
-
-  /**
-   * Get the suggestions list given a search query.
-   * @param options - remote typeahead options
-   * @param query - search query to retrieve the suggestions list
-   * @param numberOfSuggestions - the max number of suggestion to return
-   * @returns - an observable of the list of suggestions.
-   */
-  getSuggestions(options: any, query: string, numberOfSuggestions: number): Observable<Array<SuggestionMetadata | string>> {
-    if (!query) {
-      return of([]);
-    }
-
-    let queryString = `((autocomplete_title:${query})^2 OR ${query})`;
-    if (options.filter) {
-      queryString += ` AND ${options.filter}`;
-    }
-    return this._recordService
-      .getRecords(
-        'documents',
-        queryString,
-        1,
-        numberOfSuggestions
-      ).pipe(
-        map((results: any) => {
-          const documents = [];
-          if (!results) {
-            return [];
-          }
-          results.hits.hits.map((hit: any) => {
-            documents.push(this._getDocumentRef(hit.metadata));
-          });
-          return documents;
-        }),
-        catchError(e => {
-          switch (e.status) {
-            case 400:
-              return of([]);
-            default:
-              throw e;
-          }
-        })
-      );
-  }
-
-  /**
-   * Returns label and $ref.
-   *
-   * @param metadata - the meta data.
-   * @return Metadata - the label, $ref.
-   */
-  private _getDocumentRef(metadata: any): SuggestionMetadata {
-    let text = this._mainTitlePipe.transform(metadata.title);
-
-    // Truncate text if the length of text great than maxLengthSuggestion
-    if (text.length > this.maxLengthSuggestion) {
-      text = text.slice(0, this.maxLengthSuggestion) + '…';
-    }
-
-    // Process identifiedBy
-    if ('identifiedBy' in metadata) {
-      const ids = [];
-      const identifiers = this._extractIdentifier(metadata.identifiedBy);
-      const keys = Object.keys(identifiers);
-      keys.forEach((key: string) => {
-        ids.push(`${key}: ${identifiers[key].join(', ')}`);
-      });
-      text += `<br><small>${ids.join(' / ')}</small>`;
-    }
-    // remove last trailing slash
-    const baseHref = this._baseHref.replace(/\/$/, '');
-    return {
-      label: text,
-      value: this._apiService.getRefEndpoint('documents', metadata.pid),
-      externalLink: `${baseHref}/records/documents/detail/${metadata.pid}`
-    };
-  }
-
-  /**
-   * Extract specific identifiers from identifiedBy field
-   * @param identifiers - the identifiedBy field from document metadata
-   * @returns The list of identifier types and values for each of them.
-   */
-  private _extractIdentifier(identifiers: any) {
-    const availableIdentifiers = {
-      'bf:Ean': 'ISBN',
-      'bf:Isbn': 'ISBN',
-      'bf:Issn': 'ISSN',
-      'bf:IssnL': 'ISSN'
-    };
-    const keys = Object.keys(availableIdentifiers);
-    const result: Record<string, any> = {};
-    identifiers
-      .filter((identifier: any) => keys.includes(identifier.type))
-      .forEach((element: any) => {
-        let data = element.value;
-        const key = availableIdentifiers[element.type];
-        if (!(key in result)) {
-          result[key] = new Set();
-        }
-        if ('qualifier' in element) {
-          data += ` (${element.qualifier})`;
-        }
-        result[key].add(data);
-      });
-    for (const [key, value] of Object.entries(result)) {
-      result[key] = Array.from(value);  // convert set to list
-    }
-    return result;
-  }
-}
diff --git a/projects/admin/src/app/classes/typeahead/items-typeahead.ts b/projects/admin/src/app/classes/typeahead/items-typeahead.ts
deleted file mode 100644
index 02c1f397e..000000000
--- a/projects/admin/src/app/classes/typeahead/items-typeahead.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { ApiService, RecordService, SuggestionMetadata, TruncateTextPipe } from '@rero/ng-core';
-import { MainTitlePipe } from '@rero/shared';
-import { from, Observable, of } from 'rxjs';
-import { map, mergeMap, switchMap, toArray } from 'rxjs/operators';
-import { ITypeahead } from './ITypeahead-interface';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class ItemsTypeahead implements ITypeahead {
-
-  /** Maximum length of the suggestion */
-  maxLengthSuggestion = 100;
-
-  /**
-   * Constructor
-   * @param _apiService - ApiService
-   * @param _recordService - RecordService
-   * @param _mainTitlePipe - MainTitlePie
-   * @param _truncateTextPipe - TruncateTextPipe
-   * @param _translateService - TranslateService
-   */
-  constructor(
-    private _apiService: ApiService,
-    private _recordService: RecordService,
-    private _mainTitlePipe: MainTitlePipe,
-    private _truncateTextPipe: TruncateTextPipe,
-    private _translateService: TranslateService
-  ) { }
-
-  /** Get name of typeahead */
-  getName() {
-    return 'items';
-  }
-
-  /**
-   * Convert the input value (i.e. $ref url) into a template html code.
-   * @param options - remote typeahead options
-   * @param value - formControl value i.e. $ref value
-   * @returns Observable of string - html template representation of the value.
-   */
-  getValueAsHTML(options: any, value: string): Observable<string> {
-    const url = value.split('/');
-    const pid = url.pop();
-
-    return this._recordService.getRecord(options.type, pid, 1)
-    .pipe(
-      switchMap((record: any) => {
-        return this._recordService.getRecord('documents', record.metadata.document. pid)
-        .pipe(
-          map((document: any | Error) =>
-            `<span class="pt-0">
-              <span class="font-weight-bold">${this._mainTitlePipe.transform(document.metadata.title)}</span><br>
-              <strong>${this._translateService.instant('Barcode')}</strong>: ${record.metadata.barcode}
-             </span>`
-          )
-        );
-      })
-    );
-  }
-
-  /**
-   * Convert the input value (i.e. $ref url) into a template html code.
-   * @param options - remote typeahead options
-   * @param value - formControl value i.e. $ref value
-   * @returns Observable of string - html template representation of the value.
-   */
-  getSuggestions(options: any, query: string, numberOfSuggestions: number): Observable<Array<SuggestionMetadata | string>> {
-    if (!query) {
-      return of([]);
-    }
-
-    const documentObs = (documentPid: string) => {
-      return this._recordService.getRecord('documents', documentPid).pipe(
-        map((doc: any) => doc.metadata)
-      );
-    };
-
-    return this._recordService.getRecords(
-      options.type,
-      `autocomplete_barcode:${query}`,
-      1,
-      numberOfSuggestions
-    ).pipe(
-      mergeMap((result: any) => {
-        return from(result.hits.hits).pipe(
-          mergeMap((item: any) =>
-            documentObs(item.metadata.document.pid).pipe(
-              map(doc => {
-                return {
-                  label: [
-                    this._truncateTextPipe.transform(
-                      this._mainTitlePipe.transform(doc.title),
-                      10,
-                      '…'
-                    ),
-                    item.metadata.barcode
-                  ].join('<br>'),
-                  value: this._apiService.getRefEndpoint('items', item.metadata.pid)
-                };
-              }),
-            )
-          ),
-          toArray()
-        );
-      })
-    );
-  }
-}
diff --git a/projects/admin/src/app/classes/typeahead/patrons-typeahead.ts b/projects/admin/src/app/classes/typeahead/patrons-typeahead.ts
deleted file mode 100644
index 5c7664c70..000000000
--- a/projects/admin/src/app/classes/typeahead/patrons-typeahead.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
- * Copyright (C) 2020-2023 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Injectable } from '@angular/core';
-import { ApiService, RecordService, SuggestionMetadata } from '@rero/ng-core';
-import { Observable, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
-import { PatronService } from '../../service/patron.service';
-import { ITypeahead } from './ITypeahead-interface';
-
-@Injectable()
-export class PatronsTypeahead implements ITypeahead {
-
-  /**
-   * Constructor
-   * @param _apiService - ApiService
-   * @param _recordService - RecordService
-   * @param _patronService - PatronService
-   */
-  constructor(
-    private _apiService: ApiService,
-    private _recordService: RecordService,
-    private _patronService: PatronService
-  ) { }
-
-  /** Get name of typeahead */
-  getName() {
-    return 'patrons';
-  }
-
-  /**
-   * Convert the input value (i.e. $ref url) into a template html code.
-   * @param options - remote typeahead options
-   * @param value - formControl value i.e. $ref value
-   * @returns Observable of string - html template representation of the value.
-   */
-  getValueAsHTML(options: any, value: string): Observable<string> {
-    const url = value.split('/');
-    const pid = url.pop();
-
-    return this._recordService
-      .getRecord(options.type, pid, 1)
-      .pipe(
-        map((data: any) =>
-          `<span class="bg-light p-2"><strong>${this._patronService.getFormattedName(data.metadata)}</strong></span>`
-        )
-      );
-  }
-
-  /**
-   * Get the suggestions list given a search query.
-   * @param options - remote typeahead options
-   * @param query - search query to retrieve the suggestions list
-   * @param numberOfSuggestions - the max number of suggestion to return
-   * @returns - an observable of the list of suggestions.
-   */
-  getSuggestions(options: any, query: string, numberOfSuggestions: number): Observable<Array<SuggestionMetadata | string>> {
-    if (!query) {
-      return of([]);
-    }
-    return this._recordService
-      .getRecords(
-        'patrons',
-        `${query}`,
-        1,
-        numberOfSuggestions
-      ).pipe(
-        map((results: any) => {
-          const patrons = [];
-          if (results) {
-            results.hits.hits.map((hit: any) => {
-              patrons.push(this._getPatronsRef(hit.metadata, query));
-            });
-          }
-          return patrons;
-        }),
-        catchError(e => {
-          switch (e.status) {
-            case 400:
-              return of([]);
-            default:
-              throw e;
-          }
-        })
-      );
-  }
-
-  /**
-   * Returns label and $ref.
-   * @param metadata - the meta data.
-   * @param query - search query term.
-   * @return Metadata - the label, $ref.
-   */
-  private _getPatronsRef(metadata: any, query: string): SuggestionMetadata {
-    return {
-      label: this._patronService.getFormattedName(metadata),
-      value: this._apiService.getRefEndpoint('patrons', metadata.pid)
-    };
-  }
-}
diff --git a/projects/admin/src/app/components/issues/issue-email/issue-email.component.html b/projects/admin/src/app/components/issues/issue-email/issue-email.component.html
index 606313cd8..a3117b72e 100644
--- a/projects/admin/src/app/components/issues/issue-email/issue-email.component.html
+++ b/projects/admin/src/app/components/issues/issue-email/issue-email.component.html
@@ -15,7 +15,7 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-@if (response) {
+@if (response?.error) {
   <admin-preview-email
     [emails]="suggestions.emails"
     [emailTypes]="emailTypes"
@@ -23,10 +23,9 @@
     [preview]="response.preview"
     [previewPosition]="'bottom'"
     [prePopulateRecipients]="suggestions.recipients"
-    (closeDialog)="closeEmailDialog()"
+    (closeDialog)="closeDialog()"
     (data)="confirmIssue($event)"
   >
-    <ng-container title>{{ 'Claim' | translate }}</ng-container>
     <ng-container headerMessage>
       <p translate>You're about to send the claim.</p>
     </ng-container>
diff --git a/projects/admin/src/app/components/issues/issue-email/issue-email.component.ts b/projects/admin/src/app/components/issues/issue-email/issue-email.component.ts
index cdf0d30c1..b458b673e 100644
--- a/projects/admin/src/app/components/issues/issue-email/issue-email.component.ts
+++ b/projects/admin/src/app/components/issues/issue-email/issue-email.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
+ * Copyright (C) 2023-2024 RERO
  * Copyright (C) 2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,13 +15,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { ItemApiService } from '@app/admin/api/item-api.service';
 import { ITypeEmail } from '@app/admin/shared/preview-email/IPreviewInterface';
 import { Tools } from '@app/admin/shared/preview-email/utils/tools';
-import { TranslateService } from '@ngx-translate/core';
-import { RecordService } from '@rero/ng-core';
-import { ToastrService } from 'ngx-toastr';
+import { CONFIG, NgCoreTranslateService, RecordService } from '@rero/ng-core';
+import { MessageService } from 'primeng/api';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
 @Component({
   selector: 'admin-issue-email',
@@ -29,14 +29,14 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class IssueEmailComponent implements OnInit {
 
-  /** Item */
-  @Input() record: any;
+  private messageService: MessageService = inject(MessageService);
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private itemApiService: ItemApiService = inject(ItemApiService);
+  private translateService: NgCoreTranslateService = inject(NgCoreTranslateService);
+  private recordService: RecordService = inject(RecordService);
 
-  /** Closing event for the modal dialog */
-  @Output() closeDialog = new EventEmitter<boolean>(false);
-
-  /** Reload data event to enable detection of data loading */
-  @Output() recordChange = new EventEmitter<any>();
+  record: any;
 
   /** Available recipient types */
   emailTypes = ['to', 'cc', 'bcc', 'reply_to'];
@@ -50,65 +50,61 @@ export class IssueEmailComponent implements OnInit {
   /** Previewing the message body for the email */
   response: any;
 
-  /**
-   * Constructor
-   * @param _itemApiService - ItemApiService
-   * @param _toastrService - ToastrService
-   * @param _translateService - TranslateService
-   * @param _recordService - RecordService
-   */
-  constructor(
-    private _itemApiService: ItemApiService,
-    private _toastrService: ToastrService,
-    private _translateService: TranslateService,
-    private _recordService: RecordService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
-    this._itemApiService.getPreviewByItemPid(this.record.metadata.pid)
-      .subscribe((response: any) => {
-        if (response.error) {
-          this._toastrService.error(
-            this._translateService.instant(`An error has occurred.<br><em>Error: ${response.error}</em>`),
-          this._translateService.instant('Claim'),
-          { enableHtml: true, disableTimeOut: true }
-          );
-          this.closeEmailDialog();
-        } else {
-          this.suggestions = Tools.processRecipientSuggestions(response.recipient_suggestions);
-          this.response = response;
-        }
+    this.record = this.dynamicDialogConfig.data.record;
+    this.itemApiService.getPreviewByItemPid(this.record.metadata.pid)
+      .subscribe({
+        next: (response: any) => {
+          if (response.error) {
+            this.closeDialog(this.record);
+            this.messageService.add({
+              severity: 'error',
+              summary: this.translateService.instant('Claim'),
+              detail: this.translateService.instant(`An error has occurred.<br><em>Error: ${response.error}</em>`),
+              sticky: true,
+              closable: true
+            });
+          } else {
+            this.suggestions = Tools.processRecipientSuggestions(response.recipient_suggestions);
+            this.response = response;
+          }
+        },
+        error: () => this.messageService.add({
+          severity: 'error',
+          summary: this.translateService.instant('Claim'),
+          detail: this.translateService.instant('An error has occurred'),
+          sticky: true,
+          closable: true
+        })
       });
   }
 
   confirmIssue(recipients: ITypeEmail[]): void {
-    this._itemApiService.addClaimIssue(this.record.metadata.pid, recipients).subscribe((result: boolean) => {
+    this.itemApiService.addClaimIssue(this.record.metadata.pid, recipients).subscribe((result: boolean) => {
       if (result) {
-        this._toastrService.success(
-          this._translateService.instant('A new claim has been created.'),
-          this._translateService.instant('Claim')
-        );
-        this.closeEmailDialog();
-        this._recordService
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('Claim'),
+          detail: this.translateService.instant('A new claim has been created.'),
+          life: CONFIG.MESSAGE_LIFE
+        });
+        this.recordService
           .getRecord('items', this.record.metadata.pid, 1, {Accept: 'application/rero+json'})
-          .subscribe((record: any) => this.recordChange.emit(record));
+          .subscribe((record: any) => this.closeDialog(record));
       } else {
-        this._toastrService.error(
-          this._translateService.instant('An error has occurred. Please try again.'),
-          this._translateService.instant('Claim'),
-          { disableTimeOut: true }
-        );
+        this.messageService.add({
+          severity: 'error',
+          summary: this.translateService.instant('Claim'),
+          detail: this.translateService.instant('An error has occurred. Please try again.'),
+          sticky: true,
+          closable: true
+        });
       }
     })
   }
 
-  /**
-   * Close email dialog
-   * Send the event to trigger the closing of the dialog
-   * from the child to the parent
-   */
-  closeEmailDialog(): void {
-    this.closeDialog.emit(true);
+  closeDialog(record?: any): void {
+    this.dynamicDialogRef.close(record);
   }
 }
diff --git a/projects/admin/src/app/components/items/switch-location/item-switch-location-standalone/item-switch-location-standalone.component.ts b/projects/admin/src/app/components/items/switch-location/item-switch-location-standalone/item-switch-location-standalone.component.ts
index 768721878..ac8dc05fc 100644
--- a/projects/admin/src/app/components/items/switch-location/item-switch-location-standalone/item-switch-location-standalone.component.ts
+++ b/projects/admin/src/app/components/items/switch-location/item-switch-location-standalone/item-switch-location-standalone.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
 import { ItemApiService } from '@app/admin/api/item-api.service';
 import { extractIdOnRef } from '@rero/ng-core';
@@ -28,32 +28,21 @@ import { switchMap } from 'rxjs/operators';
 })
 export class ItemSwitchLocationStandaloneComponent implements OnInit {
 
+  private activeRoute: ActivatedRoute = inject(ActivatedRoute);
+  private itemService: ItemApiService = inject(ItemApiService);
+  private router: Router = inject(Router);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** the managed item */
   item: any | undefined = undefined;
 
-
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param _activeRoute - ActivatedRoute
-   * @param _itemService - ItemApiService
-   * @param _router - Router
-   */
-  constructor(
-    private _activeRoute: ActivatedRoute,
-    private _itemService: ItemApiService,
-    private _router: Router
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
-    this._activeRoute.paramMap
-      .pipe(switchMap((params: ParamMap) => this._itemService.getItem(params.get('pid'))))
+    this.activeRoute.paramMap
+      .pipe(switchMap((params: ParamMap) => this.itemService.getItem(params.get('pid'))))
       .subscribe((record: any) => this.item = record)
   }
 
-
   // COMPONENT FUNCTIONS ======================================================
   /** Fired when the item is updated */
   updatedItem(item: any): void {
@@ -64,7 +53,7 @@ export class ItemSwitchLocationStandaloneComponent implements OnInit {
   // COMPONENT PRIVATE FUNCTIONS ==============================================
   /** redirect the application to the document detailed page related to the item */
   private _redirect(): void {
-    this._router.navigate(['/', 'records', 'documents', 'detail', extractIdOnRef(this.item.document.$ref)]);
+    this.router.navigate(['/', 'records', 'documents', 'detail', extractIdOnRef(this.item.document.$ref)]);
   }
 
 }
diff --git a/projects/admin/src/app/components/items/switch-location/item-switch-location/item-switch-location.component.ts b/projects/admin/src/app/components/items/switch-location/item-switch-location/item-switch-location.component.ts
index e8b2d8376..f8906753b 100644
--- a/projects/admin/src/app/components/items/switch-location/item-switch-location/item-switch-location.component.ts
+++ b/projects/admin/src/app/components/items/switch-location/item-switch-location/item-switch-location.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,16 +16,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { ItemApiService } from '@app/admin/api/item-api.service';
 import { LocationService } from '@app/admin/service/location.service';
 import { TranslateService } from '@ngx-translate/core';
+import { Error, extractIdOnRef } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
-import { ToastrService } from 'ngx-toastr';
-import { SelectItem, SelectItemGroup } from 'primeng/api';
+import { MessageService, SelectItem, SelectItemGroup } from 'primeng/api';
 import { finalize, map } from 'rxjs/operators';
-import { extractIdOnRef, Error } from '@rero/ng-core';
 
 @Component({
   selector: 'admin-item-switch-location',
@@ -34,6 +33,13 @@ import { extractIdOnRef, Error } from '@rero/ng-core';
 })
 export class ItemSwitchLocationComponent implements OnInit {
 
+  private formBuilder: UntypedFormBuilder = inject(UntypedFormBuilder);
+  private itemApiService: ItemApiService = inject(ItemApiService);
+  private locationService: LocationService = inject(LocationService);
+  private translateService: TranslateService = inject(TranslateService);
+  private userService: UserService = inject(UserService);
+  private messageService = inject(MessageService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** the item to manage */
   @Input() item: any = undefined;
@@ -48,34 +54,16 @@ export class ItemSwitchLocationComponent implements OnInit {
   options: SelectItemGroup[] = [];
   initialLocation: SelectItem[] = [];
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param _formBuilder - UntypedFormBuilder
-   * @param _itemApiService - ItemApiService
-   * @param _locationService - LocationService
-   * @param _toastrService - ToastrService
-   * @param _translateService - TranslateService
-   * @param _userService - UserService
-   */
-  constructor(
-    private _formBuilder: UntypedFormBuilder,
-    private _itemApiService: ItemApiService,
-    private _locationService: LocationService,
-    private _toastrService: ToastrService,
-    private _translateService: TranslateService,
-    private _userService: UserService,
-  ) {
-    this.form = this._formBuilder.group({
+  constructor() {
+    this.form = this.formBuilder.group({
       target: [undefined, Validators.required],
     });
   }
 
-
   /** OnInit hook */
   ngOnInit(): void {
-    const libraryPids = this._userService.user.patronLibrarian.libraries.map(lib => lib.pid);
-    this._locationService
+    const libraryPids = this.userService.user.patronLibrarian.libraries.map(lib => lib.pid);
+    this.locationService
       .getLocationsByLibraries$(libraryPids)
       .pipe(
         map(locations => locations.map(loc => loc.metadata))
@@ -109,21 +97,23 @@ export class ItemSwitchLocationComponent implements OnInit {
    *    processed, emit the item with updated information.
    */
   submit(): void {
-    this._itemApiService
+    this.itemApiService
       .updateLocation(this.item, this.form.value.target)
       .pipe(
         finalize(() => this.itemChange.emit(this.item))
       )
-      .subscribe(
-        (item: any) => this.item = item.metadata,
-        (err: Error) => {
-          this._toastrService.error(
-            err.title, this._translateService.instant('Locations'),
-            { disableTimeOut: true, closeButton: true }
-          );
+      .subscribe({
+        next: (item: any) => this.item = item.metadata,
+        error: (err: Error) => {
+          this.messageService.add({
+            severity: 'error',
+            summary: this.translateService.instant('Locations'),
+            detail: err.title,
+            sticky: true,
+            closable: true
+          });
         }
-      );
-
+      });
   }
 
   /** Handle form cancel click
diff --git a/projects/admin/src/app/directives/tab-order.directive.ts b/projects/admin/src/app/directives/tab-order.directive.ts
index f838490dc..312ef0033 100644
--- a/projects/admin/src/app/directives/tab-order.directive.ts
+++ b/projects/admin/src/app/directives/tab-order.directive.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  * Copyright (C) 2020 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -18,7 +18,7 @@
 
 // Credit :: https://github.com/valor-software/ngx-bootstrap/issues/823#issuecomment-514976712
 
-import { Directive, Input, OnChanges } from '@angular/core';
+import { Directive, inject, Input, OnChanges } from '@angular/core';
 import { TabDirective } from 'ngx-bootstrap/tabs';
 
 @Directive({
@@ -27,18 +27,13 @@ import { TabDirective } from 'ngx-bootstrap/tabs';
 })
 export class TabOrderDirective implements OnChanges {
 
-  @Input() tabOrder = 0;
+  private tab: TabDirective = inject(TabDirective);
 
-  /** constructor
-   *  @param _tab: TabDirective
-   */
-  constructor(
-    private _tab: TabDirective
-  ) { }
+  @Input() tabOrder = 0;
 
   /** hook OnChanges */
   ngOnChanges() {
-    (this._tab as any).__tabOrder = +this.tabOrder;
-    this._tab.tabset.tabs.sort((a: any, b: any) => a.__tabOrder - b.__tabOrder);
+    (this.tab as any).__tabOrder = +this.tabOrder;
+    this.tab.tabset.tabs.sort((a: any, b: any) => a.__tabOrder - b.__tabOrder);
   }
 }
diff --git a/projects/admin/src/app/error/error-page/error-page.component.ts b/projects/admin/src/app/error/error-page/error-page.component.ts
index e55bb5cd2..37b6a401f 100644
--- a/projects/admin/src/app/error/error-page/error-page.component.ts
+++ b/projects/admin/src/app/error/error-page/error-page.component.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { map } from 'rxjs/operators';
@@ -36,6 +36,8 @@ import { map } from 'rxjs/operators';
 
 export class ErrorPageComponent implements OnInit {
 
+  private route: ActivatedRoute = inject(ActivatedRoute);
+
   /** the status code to display. By default 404 : Page not found */
   statusCode = 404;
   /** All messages alt to be managed by this component. Available for each error are :
@@ -78,10 +80,8 @@ export class ErrorPageComponent implements OnInit {
     }
   };
 
-  constructor(private _route: ActivatedRoute) { }
-
   ngOnInit() {
-    this._route.params.pipe(
+    this.route.params.pipe(
       map(params => params.status_code || 404),  // check for status_code parameter from ActivatedRoute
       map(code => /^\d+$/.test(code) ? parseInt(code, 10) : 404),  // try to parse status code to integer
       map(code => code in this.messages ? code : 404)  // check if http code definition exists
diff --git a/projects/admin/src/app/guard/acq-order-line.guard.ts b/projects/admin/src/app/guard/acq-order-line.guard.ts
index 7dd181fe9..01667f0a8 100644
--- a/projects/admin/src/app/guard/acq-order-line.guard.ts
+++ b/projects/admin/src/app/guard/acq-order-line.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,9 +15,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot } from '@angular/router';
-import { extractIdOnRef } from '@rero/ng-core';
+import { extractIdOnRef, RecordService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { LibraryGuard } from './library.guard';
@@ -27,6 +27,8 @@ import { LibraryGuard } from './library.guard';
 })
 export class AcqOrderLineGuard extends LibraryGuard {
 
+  private recordService: RecordService = inject(RecordService);
+
   /**
    * Return the library linked to an acquisition order number.
    * @param route: the current URL route
@@ -37,7 +39,7 @@ export class AcqOrderLineGuard extends LibraryGuard {
     if (orderPid === undefined) {
        orderPid = route.params.pid;
     }
-    return this._recordService.getRecord('acq_orders', orderPid).pipe(
+    return this.recordService.getRecord('acq_orders', orderPid).pipe(
       map(data => data.metadata || {}),
       map(metadata => metadata.library || {}),
       map(library => extractIdOnRef(library.$ref))
diff --git a/projects/admin/src/app/guard/can-access.guard.spec.ts b/projects/admin/src/app/guard/can-access.guard.spec.ts
index 808e9553a..5cbeeb64f 100644
--- a/projects/admin/src/app/guard/can-access.guard.spec.ts
+++ b/projects/admin/src/app/guard/can-access.guard.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2022 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,8 +16,7 @@
  */
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Router, RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { UserService } from '@rero/shared';
 import { cloneDeep } from 'lodash-es';
@@ -25,7 +24,7 @@ import { userTestingService } from 'projects/admin/tests/utils';
 import { of } from 'rxjs';
 import { ErrorPageComponent } from '../error/error-page/error-page.component';
 import { RecordPermissionService } from '../service/record-permission.service';
-import { CanAccessGuard, CAN_ACCESS_ACTIONS } from './can-access.guard';
+import { CAN_ACCESS_ACTIONS, CanAccessGuard } from './can-access.guard';
 
 
 describe('CanAccessGuard', () => {
@@ -74,7 +73,7 @@ describe('CanAccessGuard', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule.withRoutes(routes),
+        RouterModule.forRoot(routes),
         HttpClientTestingModule,
         TranslateModule.forRoot()
       ],
diff --git a/projects/admin/src/app/guard/can-access.guard.ts b/projects/admin/src/app/guard/can-access.guard.ts
index 0627b8c02..b29a49a8d 100644
--- a/projects/admin/src/app/guard/can-access.guard.ts
+++ b/projects/admin/src/app/guard/can-access.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2022 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { Observable, of } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -26,21 +26,14 @@ import { RecordPermissionService } from '../service/record-permission.service';
 })
 export class CanAccessGuard  {
 
+  private permissionService: RecordPermissionService = inject(RecordPermissionService);
+  private router: Router = inject(Router);
+
   private _mandatoryParams = [
     'type',
     'pid'
   ];
 
-  /**
-   * Constructor
-   * @param _permissionService - RecordPermissionService
-   * @param _router - Router
-   */
-  constructor(
-    private _permissionService: RecordPermissionService,
-    private _router: Router
-  ) { }
-
   /**
    * Can activate
    * @param route - ActivatedRouteSnapshot
@@ -53,14 +46,14 @@ export class CanAccessGuard  {
       || !(Object.values(CAN_ACCESS_ACTIONS).includes(route.data.action))
       || !(this._mandatoryParams.every((param: string) => param in route.params))
     ) {
-      this._router.navigate(['/errors/400'], { skipLocationChange: true });
+      this.router.navigate(['/errors/400'], { skipLocationChange: true });
       return of(false);
     }
 
-    return this._permissionService.getPermission(route.params.type, route.params.pid).pipe(
+    return this.permissionService.getPermission(route.params.type, route.params.pid).pipe(
       map((permission: RecordPermissions) => {
         if (!permission[route.data.action].can) {
-          this._router.navigate(['/errors/403'], { skipLocationChange: true });
+          this.router.navigate(['/errors/403'], { skipLocationChange: true });
           return false;
         }
         return true;
diff --git a/projects/admin/src/app/guard/can-add-local-fields.guard.spec.ts b/projects/admin/src/app/guard/can-add-local-fields.guard.spec.ts
index 6626e79f7..ee1e127ee 100644
--- a/projects/admin/src/app/guard/can-add-local-fields.guard.spec.ts
+++ b/projects/admin/src/app/guard/can-add-local-fields.guard.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,13 +17,11 @@
 
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Router, RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { CoreModule } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
 import { cloneDeep } from 'lodash-es';
-import { BsModalService } from 'ngx-bootstrap/modal';
 import { userTestingService } from 'projects/admin/tests/utils';
 import { of } from 'rxjs';
 import { LocalFieldApiService } from '../api/local-field-api.service';
@@ -51,13 +49,12 @@ describe('CanAddLocalFieldsGuard', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule.withRoutes(routes),
+        RouterModule.forRoot(routes),
         HttpClientTestingModule,
         TranslateModule.forRoot(),
         CoreModule
       ],
       providers: [
-        BsModalService,
         { provide: UserService, useValue: userTestingService }
       ]
     });
diff --git a/projects/admin/src/app/guard/can-add-local-fields.guard.ts b/projects/admin/src/app/guard/can-add-local-fields.guard.ts
index b70e64da4..302454f31 100644
--- a/projects/admin/src/app/guard/can-add-local-fields.guard.ts
+++ b/projects/admin/src/app/guard/can-add-local-fields.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { UserService } from '@rero/shared';
 import { Observable, of } from 'rxjs';
@@ -26,6 +26,11 @@ import { LocalFieldApiService } from '../api/local-field-api.service';
   providedIn: 'root'
 })
 export class CanAddLocalFieldsGuard  {
+
+  private userService: UserService = inject(UserService);
+  private localFieldsApiService: LocalFieldApiService = inject(LocalFieldApiService);
+  private router: Router = inject(Router);
+
   /**
    * This guards allows to control the existence of the resource
    * for the current organization. If a record exists, it blocks
@@ -39,18 +44,6 @@ export class CanAddLocalFieldsGuard  {
     items: 'item'
   };
 
-  /**
-   * Constructor
-   * @param _userService - UserService
-   * @param _localFieldsApiService - LocalFieldApiService
-   * @param _router - Router
-   */
-  constructor(
-    private _userService: UserService,
-    private _localFieldsApiService: LocalFieldApiService,
-    private _router: Router
-  ) {}
-
   /**
    * Can activate
    * @param next - ActivatedRouteSnapshot
@@ -61,16 +54,16 @@ export class CanAddLocalFieldsGuard  {
     const params = next.queryParams;
     if (params.type && params.ref) {
       const type = this._translateType(params.type);
-      return this._localFieldsApiService.getByResourceTypeAndResourcePidAndOrganisationId(
+      return this.localFieldsApiService.getByResourceTypeAndResourcePidAndOrganisationId(
         type,
         params.ref,
-        this._userService.user.currentOrganisation
+        this.userService.user.currentOrganisation
       ).pipe(map(record => {
         // False if the record metadata exists.
         return !!!(record.metadata);
       }));
     } else {
-      this._router.navigate(['/errors/400'], { skipLocationChange: true });
+      this.router.navigate(['/errors/400'], { skipLocationChange: true });
       return of(false);
     }
   }
@@ -85,6 +78,6 @@ export class CanAddLocalFieldsGuard  {
     if (type in this._types) {
       return this._types[type];
     }
-    this._router.navigate(['/errors/400'], { skipLocationChange: true });
+    this.router.navigate(['/errors/400'], { skipLocationChange: true });
   }
 }
diff --git a/projects/admin/src/app/guard/item-access.guard.ts b/projects/admin/src/app/guard/item-access.guard.ts
index f5c7ca4aa..20f4b6108 100644
--- a/projects/admin/src/app/guard/item-access.guard.ts
+++ b/projects/admin/src/app/guard/item-access.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,16 +14,15 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { extractIdOnRef, RecordService } from '@rero/ng-core';
+import { CONFIG, extractIdOnRef, RecordService } from '@rero/ng-core';
 import { Record } from '@rero/ng-core/lib/record/record';
-import { ToastrService } from 'ngx-toastr';
+import { UserService } from '@rero/shared';
+import { MessageService } from 'primeng/api';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { UserService } from '@rero/shared';
 
 
 @Injectable({
@@ -31,21 +30,11 @@ import { UserService } from '@rero/shared';
 })
 export class ItemAccessGuard implements CanActivate {
 
-  /**
-   * Constructor
-   * @param _router - Router
-   * @param _userService - UserService
-   * @param _recordService - RecordService
-   * @param _toastr - ToastrService
-   * @param _translateService - TranslateService
-   */
-  constructor(
-    private _router: Router,
-    private _userService: UserService,
-    private _recordService: RecordService,
-    private _toastr: ToastrService,
-    private _translateService: TranslateService
-  ) {}
+  private router: Router = inject(Router);
+  private userService: UserService = inject(UserService);
+  private recordService: RecordService = inject(RecordService);
+  private translateService: TranslateService = inject(TranslateService);
+  private messageService: MessageService = inject(MessageService);
 
   /**
    * Item Access control
@@ -57,46 +46,54 @@ export class ItemAccessGuard implements CanActivate {
     next: ActivatedRouteSnapshot,
     state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
       const itemPid = next.params.pid;
-      this._recordService.getRecord('items', itemPid).pipe(
+      this.recordService.getRecord('items', itemPid).pipe(
         map((data: any) => data.metadata),
         map(data => extractIdOnRef(data.holding.$ref))
       )
-      .subscribe(holdingPid => {
+      .subscribe({
+        next: (holdingPid) => {
         const query = `pid:${holdingPid}`;
-        this._recordService.getRecords('holdings', query, 1, 1).pipe(
-          map((result: Record) => this._recordService.totalHits(result.hits.total) === 0
+        this.recordService.getRecords('holdings', query, 1, 1).pipe(
+          map((result: Record) => this.recordService.totalHits(result.hits.total) === 0
             ? null
             : result.hits.hits[0]
           ),
         ).subscribe(data => {
           if (null === data) {
-            this._toastr.warning(
-              this._translateService.instant('Access denied'),
-              this._translateService.instant('item')
-            );
+            this.messageService.add({
+              severity: 'warn',
+              summary: this.translateService.instant('item'),
+              detail: this.translateService.instant('Access denied'),
+              life: CONFIG.MESSAGE_LIFE
+            });
             // Redirect to homepage
-            this._router.navigate(['/']);
+            this.router.navigate(['/']);
           }
-          const userCurrentLibrary = this._userService.user.currentLibrary;
+          const userCurrentLibrary = this.userService.user.currentLibrary;
           if (userCurrentLibrary !== data.metadata.library.pid) {
-            this._toastr.warning(
-              this._translateService.instant('Access denied'),
-              this._translateService.instant('item')
-            );
+            this.messageService.add({
+              severity: 'warn',
+              summary: this.translateService.instant('item'),
+              detail: this.translateService.instant('Access denied'),
+              life: CONFIG.MESSAGE_LIFE
+            });
             // Redirect to homepage
-            this._router.navigate(['/']);
+            this.router.navigate(['/']);
           }
         });
       },
-        () => {
-          this._toastr.warning(
-            this._translateService.instant('Item not found'),
-            this._translateService.instant('item')
-          );
+        error: () => {
+          this.messageService.add({
+            severity: 'warn',
+            summary: this.translateService.instant('item'),
+            detail: this.translateService.instant('Item not found'),
+            life: CONFIG.MESSAGE_LIFE
+          });
           // Redirect to homepage on error
-          this._router.navigate(['/']);
+          this.router.navigate(['/']);
         }
-      );
+      });
+
       return true;
   }
 }
diff --git a/projects/admin/src/app/guard/library.guard.spec.ts b/projects/admin/src/app/guard/library.guard.spec.ts
index f6b28ce01..b407c49ab 100644
--- a/projects/admin/src/app/guard/library.guard.spec.ts
+++ b/projects/admin/src/app/guard/library.guard.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,14 +17,13 @@
 
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Router, RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
 import { UserService } from '@rero/shared';
+import { cloneDeep } from 'lodash-es';
 import { userTestingService } from 'projects/admin/tests/utils';
 import { ErrorPageComponent } from '../error/error-page/error-page.component';
 import { LibraryGuard } from './library.guard';
-import { cloneDeep } from 'lodash-es';
-import { Router } from '@angular/router';
 
 
 describe('LibraryGuard', () => {
@@ -44,7 +43,7 @@ describe('LibraryGuard', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule.withRoutes(routes),
+        RouterModule.forRoot(routes),
         HttpClientTestingModule,
         TranslateModule.forRoot()
       ],
diff --git a/projects/admin/src/app/guard/library.guard.ts b/projects/admin/src/app/guard/library.guard.ts
index e921f688e..95e0b2457 100644
--- a/projects/admin/src/app/guard/library.guard.ts
+++ b/projects/admin/src/app/guard/library.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,9 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Router } from '@angular/router';
-import { RecordService } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
 import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
@@ -27,33 +26,24 @@ import { catchError, map } from 'rxjs/operators';
 })
 export class LibraryGuard  {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   * @param _userService - UserService
-   * @param _router - Router
-   */
-  constructor(
-    protected _recordService: RecordService,
-    protected _userService: UserService,
-    protected _router: Router
-  ) {}
+  protected userService: UserService = inject(UserService);
+  protected router: Router = inject(Router);
 
   /**
    * Check if the current logged user is linked to the same library than the desired resource.
    * If access is denied --> 403 : forbidden
-   * If error occcured --> 500 : Internal server error
+   * If error occurred --> 500 : Internal server error
    */
   canActivate(next: ActivatedRouteSnapshot): Observable<boolean> {
     return this.getOwningLibrary$(next).pipe(
       map((owningLibrary: string) => {
-        if (owningLibrary !== this._userService.user.currentLibrary) {
-          this._router.navigate(['/errors/403'], { skipLocationChange: true });
+        if (owningLibrary !== this.userService.user.currentLibrary) {
+          this.router.navigate(['/errors/403'], { skipLocationChange: true });
           return false;
         }
         return true;
       }),
-      catchError(() => this._router.navigate(['/errors/500'], { skipLocationChange: true }))
+      catchError(() => this.router.navigate(['/errors/500'], { skipLocationChange: true }))
     );
   }
 
diff --git a/projects/admin/src/app/guard/permission.guard.spec.ts b/projects/admin/src/app/guard/permission.guard.spec.ts
index f2ca251eb..1205c765a 100644
--- a/projects/admin/src/app/guard/permission.guard.spec.ts
+++ b/projects/admin/src/app/guard/permission.guard.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,10 +16,9 @@
  */
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { Router, RouterModule } from '@angular/router';
 import { TranslateModule } from '@ngx-translate/core';
-import { PERMISSIONS, PermissionsService, PERMISSION_OPERATOR } from '@rero/shared';
+import { PERMISSION_OPERATOR, PERMISSIONS, PermissionsService } from '@rero/shared';
 import { cloneDeep } from 'lodash-es';
 import { ErrorPageComponent } from 'projects/admin/src/app/error/error-page/error-page.component';
 
@@ -43,7 +42,7 @@ describe('PermissionGuard', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule.withRoutes(routes),
+        RouterModule.forRoot(routes),
         TranslateModule.forRoot(),
         HttpClientTestingModule
       ]
diff --git a/projects/admin/src/app/guard/permission.guard.ts b/projects/admin/src/app/guard/permission.guard.ts
index e0bc0da1c..5018dce2a 100644
--- a/projects/admin/src/app/guard/permission.guard.ts
+++ b/projects/admin/src/app/guard/permission.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,9 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Router } from '@angular/router';
-import { PermissionsService, PERMISSION_OPERATOR } from '@rero/shared';
+import { PERMISSION_OPERATOR, PermissionsService } from '@rero/shared';
 import { Observable, of } from 'rxjs';
 
 /**
@@ -41,15 +41,8 @@ import { Observable, of } from 'rxjs';
 })
 export class PermissionGuard  {
 
-  /**
-   * Constructor
-   * @param _permissionService - PermissionsService
-   * @param _router - Router
-   */
-  constructor(
-    private _permissionService: PermissionsService,
-    private _router: Router,
-  ) { }
+  private permissionService: PermissionsService = inject(PermissionsService);
+  private router: Router = inject(Router);
 
   /**
    * Can activate
@@ -59,8 +52,8 @@ export class PermissionGuard  {
   canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
     const permissions = 'permissions' in route.data ? route.data.permissions : [];
     const operator = 'operator' in route.data ? route.data.operator : PERMISSION_OPERATOR.OR;
-    if (!this._permissionService.canAccess(permissions, operator)) {
-      this._router.navigate(['/errors/403'], { skipLocationChange: true });
+    if (!this.permissionService.canAccess(permissions, operator)) {
+      this.router.navigate(['/errors/403'], { skipLocationChange: true });
 
       return of(false);
     }
diff --git a/projects/admin/src/app/interceptor/user-current-library.interceptor.ts b/projects/admin/src/app/interceptor/user-current-library.interceptor.ts
index a49c02f02..526da5aa0 100644
--- a/projects/admin/src/app/interceptor/user-current-library.interceptor.ts
+++ b/projects/admin/src/app/interceptor/user-current-library.interceptor.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
+ * Copyright (C) 2023-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -20,18 +20,14 @@ import {
   HttpInterceptor,
   HttpRequest
 } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { UserService } from '@rero/shared';
 import { Observable } from 'rxjs';
 
 @Injectable()
 export class UserCurrentLibraryInterceptor implements HttpInterceptor {
 
-  /**
-   * Constructor
-   * @param _userService - UserService
-   */
-  constructor(private _userService: UserService) {}
+  private userService: UserService = inject(UserService);
 
   /**
    * Intercept http request
@@ -41,10 +37,10 @@ export class UserCurrentLibraryInterceptor implements HttpInterceptor {
    * @returns Handle of request
    */
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<unknown>> {
-    if (this._userService.user && this._userService.user.currentLibrary) {
+    if (this.userService.user && this.userService.user.currentLibrary) {
       request = request.clone({
         setParams: {
-          'current_library': String(this._userService.user.currentLibrary)
+          'current_library': String(this.userService.user.currentLibrary)
         }
       });
     }
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.scss b/projects/admin/src/app/menu/api/library-api.service.spec.ts
similarity index 61%
rename from projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.scss
rename to projects/admin/src/app/menu/api/library-api.service.spec.ts
index 62eb75ca6..b3f83adac 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.scss
+++ b/projects/admin/src/app/menu/api/library-api.service.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,19 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-.btn-duplicate {
-  z-index: 2;
-  position: relative;
-}
+import { TestBed } from '@angular/core/testing';
+
+import { LibraryApiService } from './library-api.service';
+
+describe('LibraryApiService', () => {
+  let service: LibraryApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(LibraryApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/admin/src/app/menu/api/library-api.service.ts b/projects/admin/src/app/menu/api/library-api.service.ts
new file mode 100644
index 000000000..f40e369bf
--- /dev/null
+++ b/projects/admin/src/app/menu/api/library-api.service.ts
@@ -0,0 +1,40 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Injectable, inject } from '@angular/core';
+import { RecordService } from '@rero/ng-core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LibraryApiService {
+
+  private recordService: RecordService = inject(RecordService);
+
+  /** Resource name */
+  static readonly resource = 'libraries';
+
+  findByLibrariesPidAndOrderBy$(pids: string[], order: string = 'name') {
+    return this.query('pid:' + pids.join(' OR pid:'), order);
+  }
+
+  private query(query: any, order: string = 'name') {
+    return this.recordService.getRecords(
+      LibraryApiService.resource, query, 1, RecordService.MAX_REST_RESULTS_SIZE,
+      undefined, undefined, undefined, order
+    );
+  }
+}
diff --git a/projects/admin/src/app/menu/menu-switch-library/menu-switch-library.component.html b/projects/admin/src/app/menu/menu-app/menu-app.component.html
similarity index 82%
rename from projects/admin/src/app/menu/menu-switch-library/menu-switch-library.component.html
rename to projects/admin/src/app/menu/menu-app/menu-app.component.html
index 4046dcb28..836d0f9fc 100644
--- a/projects/admin/src/app/menu/menu-switch-library/menu-switch-library.component.html
+++ b/projects/admin/src/app/menu/menu-app/menu-app.component.html
@@ -14,10 +14,8 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
-@if (isVisible) {
-  <ng-core-menu-widget
-    [menu]="menuLibrariesSwitch"
-    (clickItem)="eventMenuClick($event)"
-  ></ng-core-menu-widget>
-}
+<p-menubar [model]="items">
+  <ng-template pTemplate="end">
+    <admin-menu-user />
+  </ng-template>
+</p-menubar>
diff --git a/projects/admin/src/app/menu/menu-app/menu-app.component.ts b/projects/admin/src/app/menu/menu-app/menu-app.component.ts
new file mode 100644
index 000000000..8ec3d25ac
--- /dev/null
+++ b/projects/admin/src/app/menu/menu-app/menu-app.component.ts
@@ -0,0 +1,64 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { MenuItem } from 'primeng/api';
+import { Subscription } from 'rxjs';
+import { MENU_APP } from '../menu-definition/menu-app';
+import { ISwitchLibrary, LibraryService } from '../service/library.service';
+import { MenuTranslateService } from '../service/menu-translate.service';
+import { MenuService } from '../service/menu.service';
+
+@Component({
+  selector: 'admin-menu-app',
+  templateUrl: './menu-app.component.html',
+})
+export class MenuAppComponent implements OnInit, OnDestroy {
+
+  private translateService: TranslateService = inject(TranslateService);
+  private menuService: MenuService = inject(MenuService);
+  private menuTranslateService: MenuTranslateService = inject(MenuTranslateService);
+  private libraryService: LibraryService = inject(LibraryService);
+
+  items: MenuItem[] = [];
+
+  subscription = new Subscription();
+
+  ngOnInit(): void {
+    this.generateMenu();
+    this.subscription.add(
+      this.translateService.onLangChange.subscribe(() => this.changeLanguage()
+      )
+    );
+    this.subscription.add(
+      this.libraryService.switch$.subscribe((library: ISwitchLibrary) => this.menuService.updateLibraryLink(library))
+    )
+  }
+
+  ngOnDestroy(): void {
+      this.subscription.unsubscribe();
+  }
+
+  private generateMenu(): void {
+    this.items = this.menuService.generateAppMenu(MENU_APP);
+    this.items = this.menuTranslateService.process(this.items);
+  }
+
+  private changeLanguage(): void {
+    this.items = this.menuTranslateService.process(this.items);
+  }
+}
diff --git a/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.html b/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.html
index d01b5d534..cb719e21c 100644
--- a/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.html
+++ b/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020-2024 RERO
+  Copyright (C) 2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,35 +14,44 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-@if (menu) {
-  <div class="row justify-content-center">
-    @for (item of menu.getChildren(); track item) {
-      <div class="col-lg-2">
-        <div class="card mb-2" [attr.id]="item.getAttribute('id') | idAttribute:{prefix: 'dashboard'}">
-          <div class="card-header bg-dark text-white text-wrap">
-            @if (item.hasExtra('iconClass')) {
-              <i [ngClass]="item.getExtra('iconClass')"></i>
-            }
-            {{ item.getName() }}
-          </div>
-          <div class="list-group list-group-flush">
-            @for (subItem of item.getChildren(); track subItem) {
+<div class="grid justify-content-center mt-2">
+  @for (item of items; track item) {
+    <div class="col mx-1">
+      <p-card>
+        <div class="header mb-2">
+          @if (item.icon) {
+            <i class="mr-1" [class]="item.icon"></i>
+          }
+          <span class="text-xl text-color">{{ item.label }}</span>
+        </div>
+        @for (menuItem of item.items; track menuItem) {
+          <p-tieredMenu [model]="[menuItem]">
+            <ng-template pTemplate="item" let-item let-hasSubmenu="hasSubmenu">
               <a
-                class="list-group-item list-group-item-action text-wrap border-bottom-0 my-0 py-2"
-                [attr.id]="subItem.getAttribute('id') | idAttribute:{prefix: 'dashboard'}"
-                [attr.target]="subItem.getAttribute('target')"
-                [routerLink]="subItem.getRouterLink()"
-                [queryParams]="subItem.getQueryParams() ? subItem.getQueryParams() : {}"
+                pRipple
+                class="flex align-items-center p-menuitem-link text-color"
+                [attr.id]="item.id"
+                [routerLink]="item.routerLink"
+                [href]="item.url"
+                [queryParams]="item.queryParams"
               >
-                @if (subItem.hasExtra('iconClass')) {
-                  <i [ngClass]="subItem.getExtra('iconClass')"></i>
+                @if (item.icon) {
+                  <span [class]="item.icon" class="p-menuitem-icon"></span>
+                }
+                <span class="ml-1">{{ item.label }}</span>
+                @if (item.shortcut) {
+                  <span class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">
+                    {{ item.shortcut }}
+                </span>
+                }
+                @if (hasSubmenu) {
+                  <i *ngIf="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
                 }
-                {{ subItem.getName() }}
               </a>
-            }
-          </div>
-        </div>
-      </div>
-    }
-  </div>
-}
+            </ng-template>
+          </p-tieredMenu>
+        }
+      </p-card>
+    </div>
+  }
+</div>
diff --git a/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.ts b/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.ts
index b4591ff13..eaef75517 100644
--- a/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.ts
+++ b/projects/admin/src/app/menu/menu-dashboard/menu-dashboard.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2022 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,9 +15,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
-import { MenuItemInterface } from '@rero/ng-core';
+import { Component, inject, OnInit } from '@angular/core';
 import { MenuService } from '../service/menu.service';
+import { MenuItem } from 'primeng/api';
 
 @Component({
   selector: 'admin-menu-dashboard',
@@ -25,20 +25,11 @@ import { MenuService } from '../service/menu.service';
 })
 export class MenuDashboardComponent implements OnInit {
 
-  /** Application menu */
-  menu: MenuItemInterface;
+  private menuService: MenuService = inject(MenuService);
 
-  /**
-   * Constructor
-   * @param _menuService - MenuService
-   */
-  constructor(private _menuService: MenuService) { }
+  items: MenuItem[] = [];
 
-  /** Init */
-  ngOnInit() {
-    this._menuService.appMenu$.subscribe((menu: MenuItemInterface) => this.menu = menu);
-    if (!this.menu) {
-      this._menuService.generateMenus();
-    }
+  ngOnInit(): void {
+    this.items = this.menuService.appMenuItems;
   }
 }
diff --git a/projects/admin/src/app/menu/menu-definition/menu-app.ts b/projects/admin/src/app/menu/menu-definition/menu-app.ts
index ddab837ee..275f1bc47 100644
--- a/projects/admin/src/app/menu/menu-definition/menu-app.ts
+++ b/projects/admin/src/app/menu/menu-definition/menu-app.ts
@@ -16,68 +16,80 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { PERMISSIONS, PERMISSION_OPERATOR } from "@rero/shared";
-import { IMenuParent } from "./menu-interface";
+import { MenuItem } from "primeng/api";
+import { MENU_IDS } from "./menu-ids";
 
-export const MENU_APP: IMenuParent[] = [
+export const MENU_APP: MenuItem[] = [
   /** USER MENU */
   {
     name: 'User services',
-    attributes: { id: 'user-services-menu' },
-    extras: { iconClass: 'fa fa-users' },
-    children: [
+    translateLabel: 'User services',
+    id: MENU_IDS.APP.USER.MENU,
+    icon: 'fa fa-users',
+    items: [
       {
         name: 'Checkout/checkin',
-        router_link: ['/', 'circulation'],
-        attributes: { id: 'circulation-menu' },
-        extras: { iconClass: 'fa fa-exchange' },
+        translateLabel: 'Checkout/checkin',
+        id: MENU_IDS.APP.USER.CIRCULATION,
+        icon: 'fa fa-exchange',
+        routerLink: ['/', 'circulation'],
+        shortcut: 'c',
         access: {
           permissions: [PERMISSIONS.CIRC_ADMIN]
         }
       },
       {
-        name: 'Requests',
-        router_link: ['/', 'circulation', 'requests'],
-        attributes: { id: 'requests-menu' },
-        extras: { iconClass: 'fa fa-shopping-basket' },
+        label: 'Requests',
+        translateLabel: 'Requests',
+        id: MENU_IDS.APP.USER.REQUEST,
+        icon: 'fa fa-shopping-basket',
+        routerLink: ['/', 'circulation', 'requests'],
+        shortcut: 'r',
         access: {
           permissions: [PERMISSIONS.CIRC_ADMIN]
         }
       },
       {
-        name: 'ILL requests',
-        router_link: ['/', 'records', 'ill_requests'],
-        query_params: {
+        label: 'ILL requests',
+        translateLabel: 'ILL requests',
+        id: MENU_IDS.APP.USER.ILL,
+        icon: 'fa fa-truck',
+        routerLink: ['/', 'records', 'ill_requests'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           simple: '1',
           library: '$currentLibrary'
         },
-        attributes: { id: 'ill-requests-menu' },
-        extras: { iconClass: 'fa fa-truck' },
         access: {
           permissions: [PERMISSIONS.ILL_ACCESS]
         }
       },
       {
-        name: 'Users',
-        router_link: ['/', 'records', 'patrons'],
-        query_params: {
+        label: 'Users',
+        translateLabel: 'Users',
+        id: MENU_IDS.APP.USER.USERS,
+        icon: 'fa fa-users',
+        routerLink: ['/', 'records', 'patrons'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           simple: '1'
         },
-        attributes: { id: 'users-menu' },
-        extras: { iconClass: 'fa fa-users' },
+        shortcut: 'p',
         access: {
           permissions: [PERMISSIONS.PTRN_ACCESS]
         }
       },
       {
-        name: 'Exhibition/course',
-        router_link: ['/', 'records', 'collections'],
-        query_params: {
+        label: 'Exhibition/course',
+        translateLabel: 'Exhibition/course',
+        id: MENU_IDS.APP.USER.COLLECTION,
+        icon: 'fa fa-graduation-cap',
+        routerLink: ['/', 'records', 'collections'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
@@ -85,24 +97,23 @@ export const MENU_APP: IMenuParent[] = [
           simple: '1',
           library: '$currentLibrary'
         },
-        attributes: { id: 'collections-menu' },
-        extras: { iconClass: 'fa fa-graduation-cap' },
         access: {
           permissions: [PERMISSIONS.COLL_ACCESS]
         }
       },
       {
-        name: 'Current loans',
-        router_link: ['/', 'records', 'loans'],
-        query_params: {
+        label: 'Current loans',
+        translateLabel: 'Current loans',
+        id: MENU_IDS.APP.USER.CURRENT_LOANS,
+        icon: 'fa fa-list-ul',
+        routerLink: ['/', 'records', 'loans'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           simple: '1',
           owner_library: '$currentLibrary'
         },
-        attributes: { id: 'current-loans-menu' },
-        extras: { iconClass: 'fa fa-list-ul' },
         access: {
           permissions: [PERMISSIONS.CIRC_ADMIN]
         }
@@ -111,22 +122,24 @@ export const MENU_APP: IMenuParent[] = [
   },
   /** CATALOG MENU */
   {
-    name: 'Catalog',
-    attributes: { id: 'catalog-menu' },
-    extras: { iconClass: 'fa fa-book' },
-    children: [
+    label: 'Catalog',
+    translateLabel: 'Catalog',
+    id: MENU_IDS.APP.CATALOG.MENU,
+    icon: 'fa fa-book',
+    items: [
       {
-        name: 'Documents',
-        router_link: ['/', 'records', 'documents'],
-        query_params: {
+        label: 'Documents',
+        translateLabel: 'Documents',
+        id: MENU_IDS.APP.CATALOG.DOCUMENT,
+        icon: 'fa fa-file-o',
+        routerLink: ['/', 'records', 'documents'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           simple: '1',
           organisation: '$currentOrganisation'
         },
-        attributes: { id: 'documents-menu' },
-        extras: { iconClass: 'fa fa-file-o' },
         access: {
           permissions: [
             PERMISSIONS.DOC_ACCESS,
@@ -136,67 +149,75 @@ export const MENU_APP: IMenuParent[] = [
         }
       },
       {
-        name: 'Create a bibliographic record',
-        router_link: ['/', 'records', 'documents', 'new'],
-        attributes: { id: 'create-bibliographic-record-menu' },
-        extras: { iconClass: 'fa fa-plus-square' },
+        label: 'Create a bibliographic record',
+        translateLabel: 'Create a bibliographic record',
+        id: MENU_IDS.APP.CATALOG.DOCUMENT_ADD,
+        icon: 'fa fa-plus-square',
+        routerLink: ['/', 'records', 'documents', 'new'],
         access: {
           permissions: [PERMISSIONS.DOC_CREATE]
         }
       },
       {
-        name: 'Import from the web',
-        router_link: ['/', 'records', 'import_bnf'],
-        query_params: {
+        label: 'Import from the web',
+        translateLabel: 'Import from the web',
+        id: MENU_IDS.APP.CATALOG.IMPORT,
+        icon: 'fa fa-cloud-download',
+        routerLink: ['/', 'records', 'import_bnf'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10'
         },
-        attributes: { id: 'import-menu' },
-        extras: { iconClass: 'fa fa-cloud-download' },
         access: {
           permissions: [PERMISSIONS.DOC_CREATE]
         }
       },
       {
-        name: 'Entities',
-        router_link: ['/', 'records', 'entities'],
-        query_params: {
+        label: 'Entities',
+        translateLabel: 'Entities',
+        id: MENU_IDS.APP.CATALOG.ENTITY,
+        icon: 'fa fa-cubes',
+        routerLink: ['/', 'records', 'entities'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10'
-        },
-        attributes: { id: 'entities-menu' },
-        extras: { iconClass: 'fa fa-cubes' }
+        }
       }
     ]
   },
   /** ACQUISITION MENU */
   {
-    name: 'Acquisitions',
-    attributes: { id: 'acquisitions-menu' },
-    extras: { iconClass: 'fa fa-university' },
-    children: [
+    label: 'Acquisitions',
+    translateLabel: 'Acquisitions',
+    id: MENU_IDS.APP.ACQUISITION.MENU,
+    icon: 'fa fa-university',
+    items: [
       {
-        name: 'Vendors',
-        router_link: ['/', 'records', 'vendors'],
-        query_params: {
+        label: 'Vendors',
+        translateLabel: 'Vendors',
+        id: MENU_IDS.APP.ACQUISITION.VENDOR,
+        icon: 'fa fa-briefcase',
+        routerLink: ['/', 'records', 'vendors'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           sort: 'name_asc',
           simple: '1'
         },
-        attributes: { id: 'vendors-menu' },
-        extras: { iconClass: 'fa fa-briefcase' },
         access: {
           permissions: [PERMISSIONS.VNDR_ACCESS]
         }
       },
       {
-        name: 'Orders',
-        router_link: ['/', 'records', 'acq_orders'],
-        query_params: {
+        label: 'Orders',
+        translateLabel: 'Orders',
+        id: MENU_IDS.APP.ACQUISITION.ORDER,
+        icon: 'fa fa-shopping-cart',
+        routerLink: ['/', 'records', 'acq_orders'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
@@ -204,48 +225,49 @@ export const MENU_APP: IMenuParent[] = [
           budget: '$currentBudget',
           simple: '1',
         },
-        attributes: { id: 'orders-menu' },
-        extras: { iconClass: 'fa fa-shopping-cart' },
         access: {
           permissions: [PERMISSIONS.ACOR_ACCESS]
         }
       },
       {
-        name: 'Budgets',
-        router_link: ['/', 'records', 'budgets'],
-        query_params: {
+        label: 'Budgets',
+        translateLabel: 'Budgets',
+        id: MENU_IDS.APP.ACQUISITION.BUDGET,
+        icon: 'fa fa-money',
+        routerLink: ['/', 'records', 'budgets'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           simple: '1',
         },
-        attributes: { id: 'budgets-menu' },
-        extras: { iconClass: 'fa fa-money' },
         access: {
           permissions: [PERMISSIONS.BUDG_ACCESS]
         }
       },
       {
-        name: 'Accounts',
-        router_link: ['/', 'acquisition', 'accounts'],
-        attributes: { id: 'accounts-menu' },
-        extras: { iconClass: 'fa fa-folder-open-o' },
+        label: 'Accounts',
+        translateLabel: 'Accounts',
+        id: MENU_IDS.APP.ACQUISITION.ACCOUNT,
+        icon: 'fa fa-folder-open-o',
+        routerLink: ['/', 'acquisition', 'accounts'],
         access: {
           permissions: [PERMISSIONS.ACAC_ACCESS]
         }
       },
       {
-        name: 'Late issues',
-        router_link: ['/', 'records', 'issues'],
-        query_params: {
+        label: 'Late issues',
+        translateLabel: 'Late issues',
+        id: MENU_IDS.APP.ACQUISITION.LATE_ISSUE,
+        icon: 'fa fa-envelope-open-o',
+        routerLink: ['/', 'records', 'issues'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           library: '$currentLibrary',
           simple: '1',
         },
-        attributes: { id: 'late-issues-menu' },
-        extras: { iconClass: 'fa fa-envelope-open-o' },
         access: {
           permissions: [PERMISSIONS.ISSUE_MANAGEMENT]
         }
@@ -254,29 +276,35 @@ export const MENU_APP: IMenuParent[] = [
   },
   /** REPORT & MONITORING MENU */
   {
-    name: 'Reports & monitoring',
-    attributes: { id: 'report-monitoring-menu' },
-    extras: { iconClass: 'fa fa-bar-chart' },
-    children: [
+    label: 'Reports & monitoring',
+    translateLabel: 'Reports & monitoring',
+    id: MENU_IDS.APP.REPORT_MONITORING.MENU,
+    icon: 'fa fa-bar-chart',
+    items: [
       {
-        name: 'Inventory list',
-        router_link: ['/', 'records', 'items'],
-        query_params: {
+        label: 'Inventory list',
+        translateLabel: 'Inventory list',
+        id: MENU_IDS.APP.REPORT_MONITORING.INVENTORY,
+        icon: 'fa fa-list',
+        routerLink: ['/', 'records', 'items'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           simple: '1',
         },
-        attributes: { id: 'inventory-list-menu' },
-        extras: { iconClass: 'fa fa-list' },
+        shortcut: 'i',
         access: {
           permissions: [PERMISSIONS.ITEM_ACCESS]
         }
       },
       {
-        name: 'Fees',
-        router_link: ['/', 'records', 'patron_transaction_events'],
-        query_params: {
+        label: 'Fees',
+        translateLabel: 'Fees',
+        id: MENU_IDS.APP.REPORT_MONITORING.FEE,
+        icon: 'fa fa-money',
+        routerLink: ['/', 'records', 'patron_transaction_events'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
@@ -284,18 +312,17 @@ export const MENU_APP: IMenuParent[] = [
           transaction_date: '$currentDayRange',
           simple: '1'
         },
-        attributes: { id: 'fees-list-menu' },
-        extras: { iconClass: 'fa fa-money' },
         access: {
           permissions: [PERMISSIONS.PTTR_ACCESS]
         }
       },
       {
-        name: "Report configuration",
-        router_link: ["/", "records", "stats_cfg"],
-        attributes: { id: "stats-cfg-menu" },
-        extras: { iconClass: "fa fa-cog" },
-        query_params: {
+        label: 'Report configuration',
+        translateLabel: 'Report configuration',
+        id: MENU_IDS.APP.REPORT_MONITORING.STAT_CONFIG,
+        icon: 'fa fa-cog',
+        routerLink: ['/', 'records', 'stats_cfg'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
@@ -306,118 +333,127 @@ export const MENU_APP: IMenuParent[] = [
         access: {
           permissions: [PERMISSIONS.STAT_CFG_ACCESS],
         },
-      }
+      },
     ]
   },
   /** ADMIN MENU */
   {
-    name: 'Admin',
-    attributes: { id: 'admin-and-monitoring-menu' },
-    extras: { iconClass: 'fa fa-cogs' },
-    children: [
+    label: 'Admin',
+    translateLabel: 'Admin',
+    id: MENU_IDS.APP.ADMIN.MENU,
+    icon: 'fa fa-cogs',
+    items: [
       {
-        name: 'Circulation policies',
-        router_link: ['/', 'records', 'circ_policies'],
-        query_params: {
+        label: 'Circulation policies',
+        translateLabel: 'Circulation policies',
+        id: MENU_IDS.APP.ADMIN.CIRCULATION_POLICY,
+        icon: 'fa fa-exchange',
+        routerLink: ['/', 'records', 'circ_policies'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           sort: 'name',
           simple: '1',
         },
-        attributes: { id: 'circulation-policies-menu' },
-        extras: { iconClass: 'fa fa-exchange' },
         access: {
           permissions: [PERMISSIONS.CIPO_ACCESS]
         }
       },
       {
-        name: 'Item types',
-        router_link: ['/', 'records', 'item_types'],
-        query_params: {
+        label: 'Item types',
+        translateLabel: 'Item types',
+        id: MENU_IDS.APP.ADMIN.ITEM_TYPE,
+        icon: 'fa fa-file-o',
+        routerLink: ['/', 'records', 'item_types'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           sort: 'name',
           simple: '1',
         },
-        attributes: { id: 'item-types-menu' },
-        extras: { iconClass: 'fa fa-file-o' },
         access: {
           permissions: [PERMISSIONS.ITTY_ACCESS]
         }
       },
       {
-        name: 'Patron types',
-        router_link: ['/', 'records', 'patron_types'],
-        query_params: {
+        label: 'Patron types',
+        translateLabel: 'Patron types',
+        id:MENU_IDS.APP.ADMIN.PATRON_TYPE,
+        icon: 'fa fa-users',
+        routerLink: ['/', 'records', 'patron_types'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           sort: 'name',
           simple: '1',
         },
-        attributes: { id: 'patron-types-menu' },
-        extras: { iconClass: 'fa fa-users' },
         access: {
           permissions: [PERMISSIONS.PTTY_ACCESS]
         }
       },
       {
-        name: 'My organisation',
-        router_link: ['/', 'records', 'organisations', 'detail', '$currentOrganisation'],
-        attributes: { id: 'my-organisation-menu' },
-        extras: { iconClass: 'fa fa-university' },
+        label: 'My organisation',
+        translateLabel: 'My organisation',
+        id: MENU_IDS.APP.ADMIN.MY_ORGANISATION,
+        icon: 'fa fa-university',
+        routerLink: ['/', 'records', 'organisations', 'detail', '$currentOrganisation'],
         access: {
           permissions: [PERMISSIONS.ORG_ACCESS]
         }
       },
       {
-        name: 'My library',
-        router_link: ['/', 'records', 'libraries', 'detail', '$currentLibrary'],
-        attributes: { id: 'my-library-menu' },
-        extras: { iconClass: 'fa fa-university' },
+        label: 'My library',
+        translateLabel: 'My library',
+        id: MENU_IDS.APP.ADMIN.MY_LIBRARY,
+        icon: 'fa fa-university',
+        routerLink: ['/', 'records', 'libraries', 'detail', '$currentLibrary'],
         access: {
           permissions: [PERMISSIONS.LIB_ACCESS]
         }
       },
       {
-        name: 'Libraries',
-        router_link: ['/', 'records', 'libraries'],
-        query_params: {
+        label: 'Libraries',
+        translateLabel: 'Libraries',
+        id: MENU_IDS.APP.ADMIN.LIBRARY,
+        icon: 'fa fa-users',
+        routerLink: ['/', 'records', 'libraries'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           sort: 'name',
           simple: '1',
         },
-        attributes: { id: 'libraries-menu' },
-        extras: { iconClass: 'fa fa-users' },
         access: {
           permissions: [PERMISSIONS.LIB_ACCESS]
         }
       },
       {
-        name: 'Templates',
-        router_link: ['/', 'records', 'templates'],
-        query_params: {
+        label: 'Templates',
+        translateLabel: 'Templates',
+        id: MENU_IDS.APP.ADMIN.TEMPLATE,
+        icon: 'fa fa-file-code-o',
+        routerLink: ['/', 'records', 'templates'],
+        queryParams: {
           q: '',
           page: '1',
           size: '10',
           sort: 'name',
           simple: '1',
         },
-        attributes: { id: 'templates-menu' },
-        extras: { iconClass: 'fa fa-file-code-o' },
         access: {
           permissions: [PERMISSIONS.TMPL_ACCESS]
         }
       },
       {
-        name: 'Permissions matrix',
-        router_link: ['/', 'permissions', 'matrix'],
-        attributes: { id: 'permissions-menu' },
-        extras: { iconClass: 'fa fa-check-square-o' },
+        label: 'Permissions matrix',
+        translateLabel: 'Permissions matrix',
+        id: MENU_IDS.APP.ADMIN.PERMISSION,
+        icon: 'fa fa-check-square-o',
+        routerLink: ['/', 'permissions', 'matrix'],
         access: {
           permissions: [PERMISSIONS.PERM_MANAGEMENT]
         }
diff --git a/projects/admin/src/app/menu/menu-definition/menu-ids.ts b/projects/admin/src/app/menu/menu-definition/menu-ids.ts
new file mode 100644
index 000000000..e8a18ac3a
--- /dev/null
+++ b/projects/admin/src/app/menu/menu-definition/menu-ids.ts
@@ -0,0 +1,72 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+export const MENU_IDS = {
+  APP: {
+    ACQUISITION: {
+      MENU: 'app-acquisition-menu',
+      ACCOUNT: 'app-acquisition-account',
+      BUDGET: 'app-acquisition-budget',
+      LATE_ISSUE: 'app-acquisition-late-issue',
+      ORDER: 'app-acquisition-order',
+      VENDOR: 'app-acquisition-vendor',
+    },
+    ADMIN: {
+      MENU: 'app-admin-menu',
+      CIRCULATION_POLICY: 'app-admin-circulation-policy',
+      ITEM_TYPE: 'app-admin-item-type',
+      LIBRARY: 'app-admin-library',
+      MY_LIBRARY: 'app-admin-library',
+      MY_ORGANISATION: 'app-admin-organisation',
+      PATRON_TYPE: 'app-admin-patron-type',
+      PERMISSION: 'app-admin-permission',
+      TEMPLATE: 'app-admin-template',
+    },
+    CATALOG: {
+      MENU: 'app-catalog-menu',
+      DOCUMENT: 'app-catalog-document',
+      DOCUMENT_ADD: 'app-catalog-document-add',
+      DOCUMENT_LIST: 'app-catalog-document-list',
+      ENTITY: 'app-catalog-entity',
+      IMPORT: 'app-catalog-import',
+    },
+    REPORT_MONITORING: {
+      MENU: 'app-report-monitoring-menu',
+      FEE: 'app-report-monitoring-fee',
+      INVENTORY: 'app-report-monitoring-inventory',
+      STAT_CONFIG: 'app-report-monitoring-stat-config',
+    },
+    USER: {
+      MENU: 'app-user-services',
+      CIRCULATION: 'app-user-services-circulation',
+      COLLECTION: 'app-user-collection',
+      CURRENT_LOANS: 'app-user-current-loans',
+      ILL: 'app-user-ill',
+      REQUEST: 'app-user-request',
+      USERS: 'app-user-users',
+    }
+  },
+
+  LIBRARY_MENU: 'library-menu',
+
+  USER: {
+    MENU: 'user-user',
+    HELP: 'user-help',
+    LANGUAGE: 'user-language',
+    LOGOUT: 'user-logout',
+    PUBLIC_INTERFACE: 'user-public-interface',
+  }
+};
diff --git a/projects/admin/src/app/menu/menu-definition/menu-user.ts b/projects/admin/src/app/menu/menu-definition/menu-user.ts
index c3542c867..13d1c55ff 100644
--- a/projects/admin/src/app/menu/menu-definition/menu-user.ts
+++ b/projects/admin/src/app/menu/menu-definition/menu-user.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,28 +14,44 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { IMenuParent } from "./menu-interface";
 
-export const MENU_USER: IMenuParent[] = [
+import { MenuItem } from "primeng/api";
+import { MENU_IDS } from "./menu-ids";
+
+export const MENU_USER: MenuItem[] = [
+  {
+    label: 'Help',
+    translateLabel: 'Help',
+    icon: 'fa fa-info',
+    id: MENU_IDS.USER.HELP,
+    url: '/help',
+  },
   {
-    name: '$symbolName',
-    attributes: {
-      id: 'my-account-menu',
-      class: 'dropdown-menu dropdown-menu-right'
-    },
-    extras: { iconClass: 'fa fa-user'},
-    children: [
+    label: '$symbolName',
+    translateLabel: '$symbolName',
+    id: MENU_IDS.USER.MENU,
+    icon: 'fa fa-user',
+    items: [
+      {
+        label: 'Language',
+        translateLabel: 'Language',
+        id: MENU_IDS.USER.LANGUAGE,
+        icon: 'fa fa-language',
+        items: [],
+      },
       {
-        name: 'Public interface',
+        label: 'Public interface',
+        translateLabel: 'Public interface',
+        id: MENU_IDS.USER.PUBLIC_INTERFACE,
+        icon: 'fa fa-users',
         uri: '/',
-        attributes: { id: 'libraries-menu' },
-        extras: { iconClass: 'fa fa-users' },
       },
       {
-        name: 'Logout',
+        label: 'Logout',
+        translateLabel: 'Logout',
+        id: MENU_IDS.USER.LOGOUT,
+        icon: 'fa fa-sign-out',
         uri: '/signout',
-        attributes: { id: 'logout-menu' },
-        extras: { iconClass: 'fa fa-sign-out' },
       }
     ]
   }
diff --git a/projects/admin/src/app/menu/menu-display/menu-display.component.html b/projects/admin/src/app/menu/menu-display/menu-display.component.html
new file mode 100644
index 000000000..7b6101d30
--- /dev/null
+++ b/projects/admin/src/app/menu/menu-display/menu-display.component.html
@@ -0,0 +1,59 @@
+<!--
+  RERO ILS UI
+  Copyright (C) 2024 RERO
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  the Free Software Foundation, version 3 of the License.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+<p-menubar [model]="items()" [autoHide]="true">
+  <ng-template pTemplate="item" let-item let-root="root">
+    @if (item.routerLink && !item.url) {
+      <span pRipple class="flex align-items-center p-menuitem-link" [id]="item.id" [routerLink]="item.routerLink" [queryParams]="item.queryParams">
+        @if (item.icon) {
+          <span [class]="item.icon"></span>
+        }
+        <span class="ml-2">{{ item.label }}</span>
+        @if (item.badge) {
+          <p-badge [ngClass]="{ 'ml-auto': !root, 'ml-2': root }" [value]="item.badge"></p-badge>
+        }
+        @if (item.shortcut) {
+          <span class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+        }
+      </span>
+    }
+    @if (item.url && !item.routerLink) {
+      <a pRipple class="flex align-items-center p-menuitem-link text-color" [id]="item.id" [href]="item.url" [target]="item.target">
+        @if (item.icon) {
+          <span [class]="item.icon"></span>
+        }
+        <span class="ml-2">{{ item.label }}</span>
+        @if (item.badge) {
+          <p-badge [ngClass]="{ 'ml-auto': !root, 'ml-2': root }" [value]="item.badge"></p-badge>
+        }
+        @if (item.shortcut) {
+          <span class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
+        }
+      </a>
+    }
+    @if (!item.url && !item.routerLink) {
+      <div class="p-menuitem-link">
+        @if (item.icon) {
+          <span [class]="item.icon"></span>
+        }
+        <span class="ml-2">{{ item.label }}</span>
+        @if (!item.disabled && item.items) {
+          <i [ngClass]="['pi pi-fw', root ? 'pi-angle-down ml-2' : 'pi-angle-right ml-auto']"></i>
+        }
+      </div>
+    }
+  </ng-template>
+</p-menubar>
diff --git a/projects/admin/src/app/menu/menu.component.scss b/projects/admin/src/app/menu/menu-display/menu-display.component.ts
similarity index 69%
rename from projects/admin/src/app/menu/menu.component.scss
rename to projects/admin/src/app/menu/menu-display/menu-display.component.ts
index 8bc31613e..46750f681 100644
--- a/projects/admin/src/app/menu/menu.component.scss
+++ b/projects/admin/src/app/menu/menu-display/menu-display.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,17 +14,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { Component, input } from '@angular/core';
+import { MenuItem } from 'primeng/api';
 
-.nav-link,
-.navbar-toggler:focus,
-.navbar-brand {
-  outline: 0;
-}
-
-.nav-item a.collapsed .fa-caret-down {
-  transform: rotate(-90deg);
-}
-
-.logo {
-  max-height: 40px !important;
+@Component({
+  selector: 'admin-menu-display',
+  templateUrl: './menu-display.component.html',
+})
+export class MenuDisplayComponent {
+  items = input<MenuItem>();
 }
diff --git a/projects/admin/src/app/menu/menu-language/menu-language.component.ts b/projects/admin/src/app/menu/menu-language/menu-language.component.ts
deleted file mode 100644
index 4ba95b93c..000000000
--- a/projects/admin/src/app/menu/menu-language/menu-language.component.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020-2022 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { HttpClient } from '@angular/common/http';
-import { Component, OnInit } from '@angular/core';
-import { MenuItem, MenuItemInterface, TranslateService } from '@rero/ng-core';
-import { MenuService } from '../service/menu.service';
-
-@Component({
-  selector: 'admin-menu-language',
-  templateUrl: './menu-language.component.html'
-})
-export class MenuLanguageComponent implements OnInit {
-
-  /** Language menu */
-  menu: MenuItemInterface;
-
-  /**
-   * Constructor
-   * @param _menuService - MenuService
-   * @param _translateService - TranslateService
-   * @param _httpClient - HttpClient
-   */
-  constructor(
-    private _menuService: MenuService,
-    private _translateService: TranslateService,
-    private _httpClient: HttpClient
-  ) { }
-
-  /** Init */
-  ngOnInit(): void {
-    this._menuService.languageMenu$.subscribe((menu: MenuItemInterface) => this.menu = menu);
-    if (!this.menu) {
-      this._menuService.generateLanguageMenu();
-    }
-  }
-
-  /**
-   * Change language
-   * @param event: MenuItem
-   */
-  changeLang(event: MenuItem) {
-    const lang = event.getExtra('language');
-    this._httpClient.post('/language', {lang}).subscribe(() =>
-      this._translateService.setLanguage(lang)
-    );
-  }
-}
diff --git a/projects/admin/src/app/menu/menu-mobile/menu-mobile.component.html b/projects/admin/src/app/menu/menu-mobile/menu-mobile.component.html
deleted file mode 100644
index 7bcdaab94..000000000
--- a/projects/admin/src/app/menu/menu-mobile/menu-mobile.component.html
+++ /dev/null
@@ -1,38 +0,0 @@
-<!--
-  RERO ILS UI
-  Copyright (C) 2020-2023 RERO
-
-  This program is free software: you can redistribute it and/or modify
-  it under the terms of the GNU Affero General Public License as published by
-  the Free Software Foundation, version 3 of the License.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  GNU Affero General Public License for more details.
-
-  You should have received a copy of the GNU Affero General Public License
-  along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-<admin-sub-menu [menu]="menuApp"></admin-sub-menu>
-<admin-sub-menu
-  [class]="{'d-block': librariesSwitchIsVisible, 'd-none': !librariesSwitchIsVisible}"
-  [menu]="menuLibrariesSwitch"
-  (clickItem)="eventLibrarySwitchMenuClick($event)"
-></admin-sub-menu>
-<admin-sub-menu [menu]="menuLanguages"></admin-sub-menu>
-<div class="card mb-2">
-  <div class="card-body">
-    <h5 class="card-title" translate>Tools</h5>
-    <ul class="list-unstyled m-0">
-      <li>
-        <a class="mx-2 text-secondary" href="/help">
-          <i class="fa fa-info"></i>
-          {{ 'Help' | translate }}
-        </a>
-      </li>
-    </ul>
-  </div>
-</div>
-<admin-sub-menu [menu]="menuUser"></admin-sub-menu>
diff --git a/projects/admin/src/app/menu/menu-mobile/menu-mobile.component.ts b/projects/admin/src/app/menu/menu-mobile/menu-mobile.component.ts
deleted file mode 100644
index c04525e10..000000000
--- a/projects/admin/src/app/menu/menu-mobile/menu-mobile.component.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { Component, OnInit } from '@angular/core';
-import { MenuItem, MenuItemInterface } from '@rero/ng-core';
-import { LibrarySwitchMenuService } from '../service/library-switch-menu.service';
-import { MenuService } from '../service/menu.service';
-import { LibrarySwitchMenuEventService } from '../service/library-switch-menu-event.service';
-
-@Component({
-  selector: 'admin-menu-mobile',
-  templateUrl: './menu-mobile.component.html'
-})
-export class MenuMobileComponent implements OnInit {
-
-  // COMPONENT ATTRIBUTES =====================================================
-  /** Menu application */
-  menuApp: MenuItemInterface;
-  /** Menu user */
-  menuUser: MenuItemInterface;
-  /** Menu Languages */
-  menuLanguages: MenuItemInterface;
-
-  // GETTER & SETTER ==========================================================
-  /** Menu libraries switch */
-  get menuLibrariesSwitch() {
-    return this._librarySwitchMenuService.menu;
-  }
-
-  /** Menu libraries switch is visible */
-  get librariesSwitchIsVisible() {
-    return this._librarySwitchMenuService.visible;
-  }
-
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param _menuService - MenuService
-   * @param _librarySwitchMenuService - LibrarySwitchMenuService
-   * @param _librarySwitchMenuEventService - LibrarySwitchMenuEventService
-   */
-  constructor(
-    private _menuService: MenuService,
-    private _librarySwitchMenuService: LibrarySwitchMenuService,
-    private _librarySwitchMenuEventService: LibrarySwitchMenuEventService
-  ) { }
-
-  /** OnInit hook */
-  ngOnInit(): void {
-    // Menu application
-    this._menuService.appMenu$.subscribe((menu: MenuItemInterface) => this.menuApp = menu);
-    if (!this.menuApp) {
-      this._menuService.generateAppMenu();
-    }
-    // Menu user
-    this._menuService.userMenu$.subscribe((menu: MenuItemInterface) => this.menuUser = menu);
-    if (!this.menuUser) {
-      this._menuService.generateUserMenu();
-    }
-    // Menu language
-    this._menuService.languageMenu$.subscribe((menu: MenuItemInterface) => this.menuLanguages = menu);
-    if (!this.menuLanguages) {
-      this._menuService.generateLanguageMenu();
-    }
-  }
-
-  /**
-   * Event on library switch menu click
-   * @param event - MenuItem
-   */
-  eventLibrarySwitchMenuClick(event: MenuItem): void {
-    this._librarySwitchMenuEventService.eventMenuClick(event);
-  }
-}
diff --git a/projects/admin/src/app/menu/menu-mobile/sub-menu/sub-menu.component.html b/projects/admin/src/app/menu/menu-mobile/sub-menu/sub-menu.component.html
deleted file mode 100644
index d462accf3..000000000
--- a/projects/admin/src/app/menu/menu-mobile/sub-menu/sub-menu.component.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
-  RERO ILS UI
-  Copyright (C) 2020-2024 RERO
-
-  This program is free software: you can redistribute it and/or modify
-  it under the terms of the GNU Affero General Public License as published by
-  the Free Software Foundation, version 3 of the License.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  GNU Affero General Public License for more details.
-
-  You should have received a copy of the GNU Affero General Public License
-  along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-
-@if (menu) {
-  @for (item of menu.getChildren(); track item) {
-    <div class="card mb-2">
-      <div class="card-body" [attr.id]="item.getAttribute('id') | idAttribute:{prefix: 'mobile'}">
-        <h5 class="card-title">
-          @if (item.hasExtra('iconClass')) {
-            <i [ngClass]="item.getExtra('iconClass')"></i>
-          }
-          {{ item.getName() }}
-        </h5>
-        <ul class="list-unstyled m-0">
-          @for (subItem of item.getChildren(); track subItem) {
-            <li>
-              <a
-                class="text-muted"
-                [attr.id]="subItem.getAttribute('id') | idAttribute:{prefix: 'mobile'}"
-                [attr.target]="subItem.getAttribute('target')"
-                [routerLink]="subItem.getRouterLink()"
-                [queryParams]="subItem.getQueryParams() ? subItem.getQueryParams() : {}"
-                (click)="doClick(subItem)"
-              >
-                @if (subItem.hasExtra('iconClass')) {
-                  <i [ngClass]="subItem.getExtra('iconClass')"></i>
-                }
-                {{ subItem.getName() }}
-              </a>
-            </li>
-          }
-        </ul>
-      </div>
-    </div>
-  }
-}
diff --git a/projects/admin/src/app/menu/menu-mobile/sub-menu/sub-menu.component.ts b/projects/admin/src/app/menu/menu-mobile/sub-menu/sub-menu.component.ts
deleted file mode 100644
index f9e27832e..000000000
--- a/projects/admin/src/app/menu/menu-mobile/sub-menu/sub-menu.component.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { MenuItem, MenuItemInterface } from '@rero/ng-core';
-
-@Component({
-  selector: 'admin-sub-menu',
-  templateUrl: './sub-menu.component.html'
-})
-export class SubMenuComponent {
-  /** menu */
-  @Input() menu: MenuItemInterface;
-
-  /** Event */
-  @Output() clickItem = new EventEmitter();
-
-  /**
-   * Emit a event on click item menu
-   * @param item - MenuItem
-   */
-  doClick(item: MenuItem | MenuItemInterface) {
-    this.clickItem.emit(item);
-  }
-}
diff --git a/projects/admin/src/app/menu/menu-switch-library/menu-switch-library.component.ts b/projects/admin/src/app/menu/menu-switch-library/menu-switch-library.component.ts
deleted file mode 100644
index de7c0a861..000000000
--- a/projects/admin/src/app/menu/menu-switch-library/menu-switch-library.component.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Component } from '@angular/core';
-import { MenuItem, MenuItemInterface } from '@rero/ng-core';
-import { LibrarySwitchMenuEventService } from '../service/library-switch-menu-event.service';
-import { LibrarySwitchMenuService } from '../service/library-switch-menu.service';
-
-@Component({
-  selector: 'admin-menu-switch-library',
-  templateUrl: './menu-switch-library.component.html'
-})
-export class MenuSwitchLibraryComponent {
-
-  /** Menu libraries switch */
-  get menuLibrariesSwitch(): MenuItemInterface {
-    return this._librarySwitchMenuService.menu;
-  }
-
-  /** Menu is visible */
-  get isVisible(): boolean {
-    return this._librarySwitchMenuService.visible;
-  }
-
-  /**
-   * Constructor
-   * @param _librarySwitchMenuService - LibrarySwitchMenuService
-   * @param _librarySwitchMenuEventService - LibrarySwitchMenuEventService
-   */
-  constructor(
-    private _librarySwitchMenuService: LibrarySwitchMenuService,
-    private _librarySwitchMenuEventService: LibrarySwitchMenuEventService
-  ) { }
-
-  /**
-   * Event on menu click
-   * @param event - MenuItem
-   */
-  eventMenuClick(event: MenuItem): void {
-    this._librarySwitchMenuEventService.eventMenuClick(event);
-  }
-}
diff --git a/projects/admin/src/app/menu/menu-user-services/menu-user-services.component.ts b/projects/admin/src/app/menu/menu-user-services/menu-user-services.component.ts
deleted file mode 100644
index c44933778..000000000
--- a/projects/admin/src/app/menu/menu-user-services/menu-user-services.component.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
- * Copyright (C) 2019-2023 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { Component, OnInit } from '@angular/core';
-import { MenuItemInterface } from '@rero/ng-core';
-import { MenuService } from '../service/menu.service';
-
-@Component({
-  selector: 'admin-menu-user-services',
-  template: `
-    <ng-core-menu-widget [menu]="menu"></ng-core-menu-widget>
-  `
-})
-export class MenuUserServicesComponent implements OnInit {
-
-  /** Application menu */
-  menu: MenuItemInterface;
-
-  /**
-   * Constructor
-   * @param _menuService - MenuService
-   */
-  constructor(private _menuService: MenuService) { }
-
-  /** Init */
-  ngOnInit(): void {
-    this._menuService.appMenu$.subscribe((menu: MenuItemInterface) => this.menu = menu);
-    if (!this.menu) {
-      this._menuService.generateMenus();
-    }
-  }
-}
diff --git a/projects/admin/src/app/menu/menu-language/menu-language.component.html b/projects/admin/src/app/menu/menu-user/menu-user.component.html
similarity index 84%
rename from projects/admin/src/app/menu/menu-language/menu-language.component.html
rename to projects/admin/src/app/menu/menu-user/menu-user.component.html
index 32bb7db0e..81a3b5ccb 100644
--- a/projects/admin/src/app/menu/menu-language/menu-language.component.html
+++ b/projects/admin/src/app/menu/menu-user/menu-user.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020 RERO
+  Copyright (C) 2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,5 +14,4 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
-<ng-core-menu-widget [menu]="menu" (clickItem)="changeLang($event)"></ng-core-menu-widget>
+<admin-menu-display [items]="items" />
diff --git a/projects/admin/src/app/menu/menu-user/menu-user.component.spec.ts b/projects/admin/src/app/menu/menu-user/menu-user.component.spec.ts
new file mode 100644
index 000000000..0375edb70
--- /dev/null
+++ b/projects/admin/src/app/menu/menu-user/menu-user.component.spec.ts
@@ -0,0 +1,160 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MenuUserComponent } from './menu-user.component';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { MenuService } from '../service/menu.service';
+import { MenuTranslateService } from '../service/menu-translate.service';
+import { UserService } from '@rero/shared';
+import { LibrarySwitchStorageService } from '../service/library-switch-storage.service';
+import { Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { of } from 'rxjs';
+import { By } from '@angular/platform-browser';
+import { ISwitchLibrary, LibraryService } from '../service/library.service';
+import { MENU_IDS } from '../menu-definition/menu-ids';
+
+describe('AppMenuUserComponent', () => {
+  let component: MenuUserComponent;
+  let fixture: ComponentFixture<MenuUserComponent>;
+  let libraryService: LibraryService;
+  let translateService: TranslateService;
+
+  const menuItems: MenuItem[] = [
+    {
+      label: 'library',
+      id: MENU_IDS.LIBRARY_MENU,
+      items: [
+        {
+          label: 'library name',
+          code: 'library-code',
+          pid: '1',
+          styleClass: null,
+        }
+      ]
+    },
+    {
+      label: 'menu',
+      id: MENU_IDS.USER.MENU,
+      items: [
+        {
+          label: 'language',
+          id: MENU_IDS.USER.LANGUAGE,
+          items: [
+            {
+              label: 'french',
+              code: 'fr',
+              id: 'lang-fr',
+              styleClass: null,
+            },
+            {
+              label: 'English',
+              code: 'en',
+              id: 'lang-en',
+              styleClass: null,
+            },
+          ],
+        },
+        {
+          label: 'logout',
+          id: MENU_IDS.USER.LOGOUT,
+          command: () => {},
+        },
+      ],
+    },
+  ];
+
+  const librarySwitch: ISwitchLibrary = {
+    pid: '1',
+    code: 'library-code',
+    name: 'library name'
+  };
+
+  const menuServiceSpy = jasmine.createSpyObj('MenuService', ['generateMenuLibrary$', 'generateMenuLanguages', 'logout']);
+  menuServiceSpy.generateMenuLibrary$.and.returnValue(of([]));
+
+  const menuTranslateServiceSpy = jasmine.createSpyObj('MenuTranslateService', ['process']);
+  menuTranslateServiceSpy.process.and.returnValue(menuItems);
+
+  const userServiceSpy = jasmine.createSpyObj('UserService', ['']);
+  userServiceSpy.user = {
+    id: 1,
+    currentLibrary: 'foo'
+  };
+
+  const librarySwitchStorageServiceSpy = jasmine.createSpyObj('LibrarySwitchStorageService', ['save']);
+
+  const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot(),
+        MenuUserComponent
+      ],
+      providers: [
+        { provide: MenuService, useValue: menuServiceSpy },
+        { provide: MenuTranslateService, useValue: menuTranslateServiceSpy },
+        { provide: UserService, useValue: userServiceSpy },
+        { provide: LibrarySwitchStorageService, useValue: librarySwitchStorageServiceSpy },
+        { provide: Router, useValue: routerSpy },
+        LibraryService,
+        TranslateService
+      ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MenuUserComponent);
+    component = fixture.componentInstance;
+
+    libraryService = TestBed.inject(LibraryService);
+    translateService = TestBed.inject(TranslateService);
+    fixture.detectChanges();
+    translateService.use('en');
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should return the menu', () => {
+    expect(fixture.debugElement.query(By.css('p-menubar'))).not.toBeNull();
+  });
+
+  it('should change the library menu', () => {
+    expect(component.items.find((item: MenuItem) => item.id === MENU_IDS.LIBRARY_MENU).items[0].styleClass).toBeNull();
+    libraryService.switch(librarySwitch);
+    fixture.detectChanges();
+    expect(component.items.find((item: MenuItem) => item.id === MENU_IDS.LIBRARY_MENU).items[0].styleClass).toEqual('font-bold');
+  });
+
+  it('should change the language menu', () => {
+    expect(component.items
+      .find((item: MenuItem) => item.id === MENU_IDS.USER.MENU).items
+      .find((item: MenuItem) => item.id === MENU_IDS.USER.LANGUAGE).items
+      .find((item: MenuItem) => item.id === 'lang-en')
+      .styleClass).toEqual('font-bold');
+
+    translateService.use('fr');
+    expect(component.items
+      .find((item: MenuItem) => item.id === MENU_IDS.USER.MENU).items
+      .find((item: MenuItem) => item.id === MENU_IDS.USER.LANGUAGE).items
+      .find((item: MenuItem) => item.id === 'lang-fr')
+      .styleClass).toEqual('font-bold');
+  });
+});
diff --git a/projects/admin/src/app/menu/menu-user/menu-user.component.ts b/projects/admin/src/app/menu/menu-user/menu-user.component.ts
index 30c9a93f2..533391022 100644
--- a/projects/admin/src/app/menu/menu-user/menu-user.component.ts
+++ b/projects/admin/src/app/menu/menu-user/menu-user.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,37 +14,82 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnInit } from '@angular/core';
-import { MenuItem, MenuItemInterface } from '@rero/ng-core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { NgCoreTranslateService } from '@rero/ng-core';
 import { MenuService } from '../service/menu.service';
+import { MenuTranslateService } from '../service/menu-translate.service';
+import { ISwitchLibrary, LibraryService } from '../service/library.service';
+import { Router } from '@angular/router';
+import { MenuItem } from 'primeng/api';
+import { Subscription } from 'rxjs';
+import { MENU_IDS } from '../menu-definition/menu-ids';
+import { MENU_USER } from '../menu-definition/menu-user';
 
 @Component({
   selector: 'admin-menu-user',
-  template: `
-    <ng-core-menu-widget [menu]="menu" (clickItem)="eventMenuClick($event)"></ng-core-menu-widget>
-  `
+  templateUrl: './menu-user.component.html'
 })
-export class MenuUserComponent implements OnInit {
-
-  /** User menu */
-  menu: MenuItemInterface;
-  /**
-   * Constructor
-   * @param _menuService - MenuService
-   */
-  constructor(
-    private _menuService: MenuService
-  ) { }
-
-  /** Init */
+export class MenuUserComponent implements OnInit, OnDestroy {
+
+  private translateService: NgCoreTranslateService = inject(NgCoreTranslateService);
+  private menuService: MenuService = inject(MenuService);
+  private menuTranslateService: MenuTranslateService = inject(MenuTranslateService);
+  private libraryService: LibraryService = inject(LibraryService);
+  private router: Router = inject(Router);
+
+  items: MenuItem[] = [];
+
+  subscription = new Subscription();
+
   ngOnInit(): void {
-    this._menuService.userMenu$.subscribe((menu: MenuItemInterface) => this.menu = menu);
+    this.generateMenu();
+    this.subscription.add(
+      this.translateService.onLangChange.subscribe(() => this.changeLanguage())
+    );
+    this.subscription.add(
+      this.menuService.generateMenuLibrary$().subscribe((menu: any) => {
+        this.items = [menu.menu, ...this.items];
+      })
+    );
+    this.subscription.add(
+      this.libraryService.switch$.subscribe((library: ISwitchLibrary) => this.updateLibraryMenuAndRedirect(library))
+    );
+    this.subscription.add(
+      this.libraryService.switch$.subscribe((library: ISwitchLibrary) => this.menuService.updateLibraryQueryParams(library))
+    )
+  }
+
+  ngOnDestroy(): void {
+      this.subscription.unsubscribe();
+  }
+
+  private generateMenu(): void {
+    MENU_USER
+      .find((item: MenuItem) => item.id === MENU_IDS.USER.MENU).items
+      .find((item: MenuItem) => item.id === MENU_IDS.USER.LANGUAGE).items = this.menuService.generateMenuLanguages();
+    this.items = this.menuTranslateService.process(MENU_USER);
+    const logout = this.items
+      .find((item: MenuItem) => item.id === MENU_IDS.USER.MENU).items
+      .find((item: MenuItem) => item.id === MENU_IDS.USER.LOGOUT);
+    logout['command'] = () => this.menuService.logout();
+  }
+
+  private changeLanguage(): void {
+    this.updateLanguageMenu();
+    this.items = this.menuTranslateService.process(this.items);
+  }
+
+  private updateLibraryMenuAndRedirect(library: ISwitchLibrary): void {
+    const element = this.items.find((item: MenuItem) => item.id === MENU_IDS.LIBRARY_MENU);
+    element.label = library.code;
+    element.items.map((item: MenuItem) => item.styleClass = item.pid === library.pid ? 'font-bold' : '');
+    this.router.navigate(['/']);
   }
 
-  eventMenuClick(event: MenuItem) {
-    // If the user logout, we delete the local storage
-    if (event.getAttribute('id') === 'logout-menu') {
-      this._menuService.logout();
-    }
+  private updateLanguageMenu(): void {
+    this.items
+    .find((item: MenuItem) => item.id === MENU_IDS.USER.MENU).items
+    .find((item: MenuItem) => item.id === MENU_IDS.USER.LANGUAGE).items
+    .map((item: MenuItem) => item.styleClass = item.id === `lang-${this.translateService.currentLang}` ? 'font-bold' : '')
   }
 }
diff --git a/projects/admin/src/app/menu/menu.component.html b/projects/admin/src/app/menu/menu.component.html
deleted file mode 100644
index 992b3af98..000000000
--- a/projects/admin/src/app/menu/menu.component.html
+++ /dev/null
@@ -1,61 +0,0 @@
-<!--
-  RERO ILS UI
-  Copyright (C) 2020 RERO
-
-  This program is free software: you can redistribute it and/or modify
-  it under the terms of the GNU Affero General Public License as published by
-  the Free Software Foundation, version 3 of the License.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  GNU Affero General Public License for more details.
-
-  You should have received a copy of the GNU Affero General Public License
-  along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-<nav class="navbar navbar-expand-lg navbar-dark bg-dark d-flex">
-  <div class="container">
-    <a [routerLink]="['/']" class="navbar-brand pr-2 text-sm" id="homepage-logo">
-      <img class="logo" src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAjMAAAEwCAYAAABCLvDxAAACAWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6YXV4PSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wL2F1eC8iCiAgICB4bWxuczpleGlmRVg9Imh0dHA6Ly9jaXBhLmpwL2V4aWYvMS4wLyIKICAgIHhtbG5zOnRpZmY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vdGlmZi8xLjAvIgogICBhdXg6TGVucz0iIgogICBleGlmRVg6TGVuc01vZGVsPSIiCiAgIHRpZmY6SW1hZ2VMZW5ndGg9IjMwNCIKICAgdGlmZjpJbWFnZVdpZHRoPSI1NjMiLz4KIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+Cjw/eHBhY2tldCBlbmQ9InIiPz7a1B+XAAABgmlDQ1BzUkdCIElFQzYxOTY2LTIuMQAAKJF1kctLQkEUhz/NMEwxqEWLFhLZSqMHSG2ClLAgQswgq43efARql3uNkLZB26AgatNrUX9BbYPWQVAUQQTtWhe1Kbmdq4IReYYz55vfzDnMnAFrLKfkdVs/5AtFLRoOeubi8x77Cw6cuPBiSyi6OhaJTNHQPu+xmPHWb9ZqfO5fa11K6QpYWoRHFVUrCk8IT60VVZN3hDuUbGJJ+EzYp8kFhe9MPVnlV5MzVf42WYtFQ2BtE/ZkfnHyFytZLS8sL6cnn1tVavcxX+JMFWZnJHaLd6ETJUwQD5OMEyLAACMyB/AzSJ+saJDfX8mfZkVyFZlVSmgskyFLEZ+oq1I9JTEtekpGjpLZ/7991dNDg9XqziA0PxvGuxfs21DeMoyvI8MoH0PTE1wW6vkrhzD8IfpWXes5APcGnF/VteQuXGxC56Oa0BIVqUncmk7D2ym44tB+A46Fas9q+5w8QGxdvuoa9vahV867F38AFCFnwJeX+MYAAAAJcEhZcwAALiMAAC4jAXilP3YAACAASURBVHic7d13mB1V4cbx79lsGiSBEGJo0olDCXWA0Beli4AIIgLCABYULCjiTxEpihVEsYHoINIFEbAgIoQW2iSUQDIQAkgooaQXSNvz+2MmkCy72d17595z5t738zz3SUJ2Z15ImPveM2fOMYg0gSBOLgdOquBbbS9/77I0Ck+p4DwiIlKhVtcBRDxnevF7E4Gv1zCLiIh0osV1AJEG8Q5wVBqFC1wHERFpNiozIsX4chqFT7kOISLSjFRmRKp3PXC56xAiIs1KZUakOs8Dn0ujcGUThUVEpIZUZkQqt5hsnswc10FERJqZyoxI5U5PozBxHUJEpNmpzIhU5rw0Cn/lOoSIiKjMiFTiYuAc1yFERCSjMiPSO5eT3V7ShF8REU+ozIj03PXAF1RkRET8ojIj0jN/B45Lo3Cp6yAiIrIilRmR7t0FHJlG4WLXQURE5P1UZkRW7lbg0DQK33EdREREOqcyI9K1HwIfT6NwnusgIiLStVbXAUQ8tBA4KY3Cq10HERGR7qnMiKxoGnBYGoUPuw4iIiI9ozIj8p7xZPNjXnYdREREek5zZkQyfwH2UJERESkflRlpdrOAE8l2v17gOoyIiPSebjNJM/sL8OU0Cqe5DiIiIpVTmZFm9CrwxTQKb3EdREREqqfbTNJsLgW2UJEREWkcGpmRZvEssFcahfe6DiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiFTOuA5RJECcGGAIM7eS1GjAfeH35VxqF89ykbV5BnPQFRgCD8teqHV6DgIHAQrI/s3n5j8v/fAbZn5+td36R7uR/xzu7Dg0FBgBvsuK16I00Cpe6Sdu8gjgZAgxjxetQx5/3ARbQ+XVoPjAHXYu6pTLThSBO+gCbA2H+2hHYBujfy0MtAF4FHgHuB+4DJqZR2F5c2uYTxMkawCbAxsu9lv16PbILRLUWAM8DzwFT8h+fAyanUfi/Ao4v0q0gTlbjvWvQsuvRBr08jAWmA5OBB8iuQ/enUTijwKhNJ3+fWJ/3X4OWvYYWdKqFwP/IrkPPd3zpQ7PKzLvyUZetgU8BuwPbA6vU6HQzeO+C8gddUFYuiJNWYFtgN2DX/LWe01AwjezP7978NUGfnKQIQZwMBA7JXzsCm1Kba7UFJpH9Pf5HGoW31eAcDSWIkzV57xq0K1mxHOg0VPbn+CwwdrnXpGa7HjV9mQniZAPg08AxwJYOIoxOo/BhB+f1VhAnqwB781552ZHaFcuizCAbeRsD/FUjN9Ib+Sf8j5Bdhz4ODK5zhHFpFIZ1Pqf3gjjZBPgw2XVoN2Azt4l6bAbwEFmxuQ8Ym0bhEreRassEceJjG78njcKf1erg+ZvlccCxZKMwLqnMAEGcDAYOBj4BHIj/5WVlLNnI29XADRp5614QJx8FvuA6Rye+mkbhlFodPIiTrYCTyUaER9TqPD2gMpML4mRz4Ij8tbXjOEWZDtwC3Aj8N43CRY7zFK6V7A3EN3NqcdAgTvqRXTi+C6xVi3NIzwVxsjrZUPoRwH70fj6SrwxZSd4d+EUQJ7eTFZtb0yh8x2kyf22En9eic2px0CBONgXOIysxTT9C7loQJ9uQfZA6gmyuZKMZBpyYv2blgxg3Af9ulGtSq+sA9ZAP4X4aOJfsoikOBXHyEeA04CCgr+M4tdaP9+Y/vBXEyc+BX6VRWJPCLn4L4mRd4GyyN5WmuP76Kv8wdRLwecpz+6gIq5PdmTgOmBfEyQ3AL9MofMJtrOo09P9M+aTeQ4Af4GY+jOTySY3HAl8GtnIcx5U1yf4unhHEySXAxboF1RyCOBkKfBs4lezRaXEkiJMPkV2Hjid7PLqZDSIfsQniZAzwC7IR5NI9bduwZSZ/nPF3ZMO44kgQJ+sBXwI+SzbUKdkno+8CXwvi5LfAhWkUvu44k9RIECd7A1cB67jO0syCONkf+ApwALq115m2/PVCECe/InvSdrbTRL3QkGUmiJPRwLXAho6jNK0gTjYCzgeOokH/nhVgEHAGcEoQJ2cBl5TxE5F0Ll9S4FzgW0CL4zhNK4iTT5LNfWrEuTC1sBFwIXBuECeXAj9Io3Cm40zdaqg3mSBOWoAzyd5Ei1g0TXopH04/i2w4vZ/jOGUxCLgYOCaIk8+lUfi460BSnSBONgSuAXZxHKVpBXGyG/AzYLTrLCU1CPg62S2o75PN9fP2KaiG+bQQxMnawB3ABajI1F0QJ/2COPka2Qq5p6MiU4kdgUeDOPlJvnyAlFAQJ0cCj6Mi40QQJ5sGcXIT2bpPKjLVG0o2UjMpiJOjXIfpSkOUmXzhu/vJFp2SOsuHcScBFwFrOI5Tdq1kt56eCuLkw67DSO8EcXIqcD3ZXm1SR0GcDAvi5JfAROBw13ka0MbAdUGcPJiPenml9GUmn5txD9l/aKmjIE4+GMTJnWQXb/33L9ZGwB1BnJzhOoj0TD4yeQmaXFp3QZx8imxJ/9No/OUeXBsN3B/EyR/yxU69UOoyE8TJZmT74vR20zWpUhAnxwET0GhYLfUBfhLEybW67eS3IE6+RTYyKXUUxMkaQZxcR/bAh0aF6+tE4MkgTvZ0HQRKXGaCOAnIRmRcbzjYVII4WTOIkxuBK9FQer18ChibTyoVzwRxcjbwQ9c5mk0QJweQfaDydh5HE9gQuDuIk58FceJ0BfdSlpl8ROYeYG3XWZpJECcfA54iW/Zb6msbIMlXTxZPBHHyXbLHr6VOgjhZNV+f6V9o7R4ftJA99TQuiJNtXYYolXy4/SbgA66zNIsgTvrmF49bcbsZXrMbBvwriJNDXQeRd8u9ikwd5RtzPoafm5I2uy2BR/K5Y3VXqjKTb0/wG2CU6yzNIl835t/o4uGLvsBfgjg5xHWQZpY/ePAnNNm3boI4ORAYS3Pto1Q2fYGLgjj5fRAndZ2IXaoyQ7Yp2PGuQzSLfGffh4C9XWeRFSwrND7uMt3w8rkBfyFbf0PqIIiT04DbAG+enpGVOhm4Pd/Msy5KU2aCONkO+JXrHM0iiJO9gIeBka6zSKf6ATcFcfJR10Ga0MXADq5DNIMgTvrkm7L+Ei2GWjYfBh4K4mSTepysFGUmb3c3Ak5nSzeLIE5OIFtNWY86+m1ZoTnQdZBmEcTJMeiWa13ka5jcRrY1ipTTh4CHgzjZo9YnKkWZIXvsUYuy1UEQJ98BYrQdQVn0J7vltJXrII0uiJM1gV+7ztEM8v/W9wMq6uU3DLgziJOP1/Ik3peZIE62BD7nOkczCOLkG8D3XeeQXlsVuLme96eb1LlobaWay/8e3wFs7TqLFKYf2VYIB9XqBN6XGbJdT8uQs9SCOPkS8FPXOaRimwJX5U/8ScGCONkcfaiqufzW0u3Adq6zSOGW3RavyVpZXpeEfIXHA1znaHRBnJxItqeMlNtHgXNch2hQPyXbBFRqJF9D7B/Azq6zSM0MAG4N4mT3og/sbZkJ4qSVbFRGaiiIk6OB36P1MhrFd7UGTbGCONmHrChKjeSPu98C1HyiqDi3CvDPIE52KvKg3pYZsjVltnQdopEFcXIY2R5LPv89kN4xwJ+DONHmq8VoAS50HaKR5R9cbwT2cZ1F6mYw2To02xR1QF/fxA4Bfu46RCML4mQUcDWNPXQ+F3gJeBZ4DXjbbZy6GQL81nWIBnELmohaaz8FtABk8xkK3BLEybAiDubrG9kg1wEaWRAnqwF/JRvuK7PZwKRjF85fuMFaq/Vde/jgAfvstkmPFzO784Ep415/a947L785Z3HcZ2BfYCMaZ/PSA4M4OSqNwutdBym5Rvn74KUgTo4Cvuo6hzizAXBNECcHplHYXs2BfC0zUiP50y5/Jnv6pWwWARMPnzNr1gVf2efdLRbOqvBgXRWf317zyL2/WNjSh/KXm18EcfLvNApnuQ4i0lEQJ1sAf3CdQ5zbDziPyi/lgMpMM/oO8DHXIXpp3M83GmIPbBu5I8AFNT7ZKZ/eac/lf332r+4ec8OqgwPKt2P4CLIh/M+6DiKyvCBOhpCNDq/qOot44dtBnDycRuFtlR7A1zkzUgNBnOxHtvBXWTyaRqFJozBcVmRcOO/UvdvSKFzr1H5L7gNedJWjQifVYylxkV66gmypexF478GFiu8YqMw0iSBO1geuwf8/cws8lJeYQh/dq9apx4zeM43Cjc77QP+HgEmu8/SQAS4N4kSb9IkXgjg5A6jp0vZSSqsBfw3iZGAl36zbTM3jMrI9Mnz2VBqFo1yH6M4nPzpqF4B/3/Pso195fs56wFqOI3Vnc+AYssfwRZzJV1Juxi1TFgxrbZm6bv/W2UNa+ywZ3K9l6eDWPu2r9e9Da4thzqKlzFm01MxdvLRl7uL21pmLl64yddHStRdbO9x18DobRbbw55m9/UaVmSaQL4y3v+sc3bg3jcK9XIfojf33ym59BXGSAD1+isqRs4I4uTqNwqWug0hzyh8+uJTG38R28RYD+z75sQ2HzotGr99WxAFvfXLa/Xf9b2b7f6cvCJqg4JwexMlVaRRO6M03qcx07XVgYv7jnPw1d7mf9yGbYLlW/uPyPx/iIG+ngjgZit9r9sz/7hp9nzjm0G1KVWSWl0ZheObP/zPmltWH7oG/t/E2A44GrnIdRHplCdk6SZOBWax4DZoLzCcbnu/sOjQC6Fv/yF06kcZd4XfBjoP7TzjqQ8OXHjxqrd1SstnNRTlk67VWWP7/rNufHfPP1+duvKDdfrDA0/iiFbgsiJPdevO4tspMZjJwF/BU/no6jcI3Kz1Yfs9vBNkEt52B0fmPa1Qftdd+jL9P4TyfRuEmx7hOUYAff23ftrsffH78KemM9QBfPzmdFcTJtRqd8dYiYAyQ8N616Jk0ChdVesAgTtYA1gG2J7sOjSYbyq/rtT+Ikw/QYBvZthgza4/VBjx96ce33B0gJVvzoh6+f8DItmU///FdU+7+2yuz15u5pL2My210ZTTwBeA3Pf0GE8SJrV0eb7UDY4FbgVvTKHym1ifMh1g35b0LymhgG2C3NAofrtE5dwPuw899lx71bYJvUYI4eQYY6TpHF45No/Bq1yE6CuLkVJpzs9PpZJsr3grckUbh3FqfMP+wFfLeh6zRwLQ0CsManvMqsnlbpTeoT8tLyWe293K7kBNumjD2oTkLd3GdoyCzgc3TKHytJ1/cbGXmNeCXwB+qGXkpSr5LrE2jsPBl9oM46Qs8hp/7W5Viom81gjiZhp8jYimwZbWrbRatCcvMf8j2fLrTh5GyIE6GplE4s0bH3ofs37fUWoyZ++VNh43/wu4btrnO0p09rxo/6Y3F7YHrHAX4SxqFn+zJFzZLmXmabAfua9MoXOg6TD0EcXI6fm6QNzWNwvVdh6iHIE7m4+eWEYenUXiz6xDLa5Iysxi4DvhZGoVPug5TD/mSABPxd6SyJ9r3HbbK2EsO2aJU831ufOzV+8594rUPNcCE4X3SKPxvd1/U6HNmppHt+3FDGoXNUNqAd4eRv+k6RydmNkuRAbhgnYETvv3q2zvh322+kwCvykwTuBX4chqF/3MdpM6OpsRFZuP+rU/+89PbbpO6DlKBI7ZbZw+A8+6YPOaaV2aPBvo7jlSp7wHdlhlfn7yoliWbOLR5GoXXN1ORyX0O/25xLEqj0MUEaGcO33/L0Z96e+69rnN04oAgTsq851SZvEw2EnZosxWZIE5ayLZPKZ0WY2alUWj++eltt3GdpVpn77dZWxqFAzYb0PqY6ywV2iOIk26fdm3EMvM82aTaLzXjBntBnPTHw1GZM4e0POo6gwvnfHHvNuAB1zk66AMc5zpEE7gM2MK3W3p1dCRQunkb/VvMaxNP2GGo6xxFu+3obbfffbWBvl2Leurs7r6g0crM3cBOaRQ+6DqIQyeRPYrpk0ejT2y/e/df1pjSKNydbD0Qn0SuAzSwxcDn0yj8fD2eTvJR/vRmVbsguzC0teW5J47fwbfrZ2EuP3zL3Y9aZ8g9rnNU4MNBnOy6si9opDLza2D/NAqnuw7iSv4EU6+Xga6xRY36CHZv7P/mW4nrDB0EQZw0yiOcPnmLbMLiZa6DOHYYsJXrEL2xcf/WJx88bvvNXOeotXP3H9n2jQ8Nv4dsOkaZfHdlv9koZeZ7aRSemkbhYtdBHDsB8GqC7Z6vTGvmUbJ3/eKbB7QBNXn0tQoanSnWm8AuaRT6OE+q3lb6xuObHQb1f6gR5sf01Mm7btCWRmEL2UKNZXFAECc7dvWbjVBm/gyc7zqEJ85wHaCDNy876+A21yF8cfTb83x7HPeoIE4GuA7RIBYCh6VR+JzrIK4FcbIvsJ3rHD110PBV7736yFFNOUqZRmH/FmPKdCu0y/mgZS8zDwCfbcKnld4nX+3XqyHSrwxor/nKymXyvS+2tZEtF+CLITTuXjn1dmIahWNdh/DE8a4D9NRBw1e996KDNy/tvnBFmHjCDkMozwjNIfl+g+9T5jLzPPDxZlkErwc+4zpAB+kpR++kN8oOTumz+FnXGTo4wHWABnB+GoXXuA7hgyBOBgEfd52jJ4a1tqTNXmSW+UYw/CHXGXqoH3BUZ79R1jIzGzjYhy0JfJA/jt2jJZ/r5f9W6zPDdQYffeUzu+wFOF++fjn7uw5QcteTLeolmSPwc9XrFbQYM++B47bf3HUOX5y8ywZ7bTuo3yOuc/RQpx/cy1hmlgJHplE4yXUQjxwCrO46xHLmH3/4dru5DuGxp10HWM6WQZys5zpEST0EnKDb3CvwbYS4UxNP2GGw6wy+ue7IrXdepcW86jpHD+wSxMn7dggvY5n5XhqFpd+0rGC+XUDKutJkXRwxb7ZvTzVpdKb35pLd5n7HdRBfBHGyPtDmOkd39hu2yn2uM/hq/PE7rAsscZ2jB973nle2MvMKcJHrED4J4mQ4ns17uHTzNQa5zuCz75/2kTbXGTrw6u9PSfw0jUKfJnP74Fj824dsBUNbWyb/8pAt9nSdw2enbbpmGVYJPjZfmPFdZSsz56RR+LbrEJ75FH5tGPrqXqM3Ls1jmQ759Ea4T767sfTMNPShqjPHug7QjfkPHrd9aTe9rJcv7bFh2+ar9PVtkc+ONgJWWFW+TGUmBa5wHcJDB7kOsLx933hzsusMJeHTeiSrA6HrECVyXhqFvm1P4VQQJxsCXk+o/eyGQ5tyf7hK3HzUNjuSbcvhswOX/0WZysz/pVFYhnt5dRPESSsd2qlrl5x5YJvrDGXw/bUG+jSaBiozPTUZ+L3rEB7a23WAlWkxZt7X997E64y+2XvowIddZ+jGCn+eZSkzDwK3uA7hoR0Bn+anvOY6QFkcceCWvq04uq3rACXxHX2o6pTXReFT6wwZ5zpD2fz2sC33ANpd51iJMF/XCChPmfmWHn/slG8XkJdcB5CKqcx0L0mj8C+uQ3jKt2vR8t4+e7/N2lyHKKPRQ/r7PDrTynIrmJehzDwD6FG6znl1ATl8ziw9pto7Pv332iq/bSld0+2lTuRrfni7VtHHRwwqy2Jw3rniE6N2dZ2hG+++B5ahzFyvUZn3C+KkH+DVwnRt223g0y2vMnjLdYDlDAAC1yE8tgS4yXUIT3n1oaqDRT88KGhzHaLMtl61n88Tp8tVZlwH8NTOwEDXIZa3356baRJp78xyHaADPVLftf+mUTjddQhPtbkO0JV9h63i822SUrjhk1vv5DrDSmwXxMkQ8L/MPJVG4UTXITzl2wZpr7gOUELzXAfoQPNmunaD6wAea3MdoAv2Ei2QV4hN+rc+7jpDF/qQz5vxvczoAtK1Ua4DdDDVdYASWuQ6QAcqM51bDNzsOoSPgjhZA1jHdY7ODGtt0ZpXBTlyk2FzXGdYiVHg18qxndEtpq55t5Ll1bc8PtZ1hjI5f8YS35Z+9+7vlCfuSKPQt/20fLGZ6wBd2XfEoNfKsC5/GZyw8wf3CuLE17mrI8HvMjM1jcJnXYfwmG8XkdHnz9DyGyW3VhAnfdIoXOo6iGfudB3AY94W4HP2G9nmOkMjWaXFvLqg3fo4CjcS/L7NpEWOuhDEybrAqq5zSMNpBUa4DuGh8a4DeMzXMqM9/Aq26+oDp7jO0AXvy8xjrgN4zNcLiJSft+uFOGLRtWhlvLwWBQP76sGRgv3qUG8nUw8P4mR1n8uMPg11zcsLiDQElZkVPZdG4VzXITzm5bXooPVX8+1JwUbh6/YGI1VmysnLC4g0BJWZFek6tHK+zd0D4HO7btjmOkMjWrtvyzOuM3TB2zIzE21auDJeXkCkIazrOoBnJrgO4KsgTtbBw7l7fY15w3WGRrXvWoNfd52hC96WmTe1hcFK+TijXBqDRmZW5NOWE77x8jq0yYDWl11naFTf3mczX7euWNvXMjPDdQDPaQ8kqRWVmRVpC4OueXkdGt6/VU8yNZ9BKjPl5OVFRBrCGq4DeEbXoq55eR0aMbCvFrxqPt6WGZ+XTvaBlxcRaQgDXAfwjK5FXfPyOrTuoH6uI0j9eVtmfH38yxdeXkSkIXi1E7sHNHeva4NdB+jMiEH9fF7ZvhH4OPI12NcyI10I4mQg2U6hIrWgMiM95eWHqsO3XWd31xkaWV9jfLz16u3IjHTNywuINAyVGekpXYua0JA+ZpbrDJ1QmSkhL4d2pWFozoz0lK5FTWh43z4+roit20wltIrrANLQTBAnKjTSE7oWNaE1+7W+4zpDJ1ZVmSmfxa4DSMPTrSbpiQWuA0j9zVu61McJ1otUZspHG6hJranMSE/MdB1A6m/GonYf50rNVZkpH5UZqTXdZpKe8PGpFqmxGUvbh7jO0Il5KjPlozIjtabrgvSERmaa0Lyl7T6uEq4yUzZpFC4FfJyAJSLNxcuRmSsennqP6wwNzrud0tFtptLS6IyIuOblyMy0eQu1gnzz0chMSanMiIhrXo7MvDp/kVZIbz4qMyWlMiMirnk5MvPGwiXaabL5qMyU1JuuA4hI05uNh5sCT31nyWquMzSqP/k7H2mmykw5Pec6gIg0tzQKLeDdPj3Tl7SPdJ2hUd3x0qz+rjN0YYrKTDlNdh1ARAQ/583ofa1GHpu/aHPXGbrwrP7Qy0llRkR84GOZ4bRbJ97rOkMjarfWxwXzAJ71cY8F6Z6PZWYR2jeqUXg3D0K89TSwk+sQHT0w8+2NXWdoNBfePeXu37/o5Zzvd4CXVGbKaQpgAeM6yHIuSaPwG65DiEhdPQJErkN0tKDdrus6Q6P5z2tzh7nO0IUpaRS26zZTCaVR+A7wsuscHYSuA4hI3T3sOkBXPH7yppReXLjE2/kyoIlSZebbrabtgjjxaaRIRGpvAvC26xCd+ddLM7X7e7F8vZOjMlNyT7kO0MEQQI9EijSRNAqXAONd5+jMk/MX+zqSUDqn/32Sz6Ncz4DKTJnd5zpAJ3ZwHUBE6u4R1wE6027toOvHvaKnmgpw+1sLtnOdYSXGgspMmfn4P6nmzYg0H2/nzfz06dc3cJ2h7C4aM+XudmsHu87RhdfSKNTITJmlUfgGMMl1jg40MiPSfLwcmQGYt7R9/dsmTLvfdY4yu/zFWVu7zrASdy/7icpMuY1xHaCD7YI40d8pkSaSRuELeLxf3AWPvzrCdYayumzsi2ParV3DdY6VGLPsJ3rjKTffJmUNBvZ1HUJE6s7b0ZmZS9o3dZ2hrC55dnrgOkM3NDLTIHwrMwCfcx1AROrO23kzAHteNX6i6wxlc/WjU+9ZbK3Po1ovp1H47qbLKjMllkbhNPJn7D1ySBAna7kOISJ19W/XAVbmjcXteky7ly6c+IbvW0LcvfwvVGbK7++uA3TQCpzoOoSI1E8ahY+Qr/fhq72vGu/b2lzeuurRqfcsaLfruc7RjbuW/4XKTPld7TpAJ07WasAiTedK1wFW5rXF7Vv+4M7JY1znKIPvP/X6jq4zdGMh8Lfl/4HKTMmlUTgeSF3n6GAjYD/XIUSkrv6M5zuu/3nq7D1dZ/DdzleOfw7wfSuI29IonLX8P1CZaQw+js5oIrBIE0mjcCr+LRfRkRl1xThvHyN37Yu3PH3f7KXtm7jO0QPvGwVUmWkM17gO0InDgjjZ2XUIEamrP7kO0J3F1q75sWsf93I/KZdufXLa/XfNeHt31zl64E3gXx3/ocpMA0ij8HngQdc5OmgBLg/ipK/rICJSNzcB812H6M7kd5Zsd9GYKWNc5/DJt8a/sq3rDD10Xb7B6QpUZhqHj7eatgL+z3UIEamPNArnkxUa7132wswyjELUxW5/Hp+2W7uq6xw91OlEc5WZxnEdsMB1iE58J4gTrfEg0jy8fqppOX1GXTHuDdchXDvuxgkPTl/S/iHXOXpoUhqFSWe/oTLTINIonA78wXWOTvQju92kR7VFmsPdwFTXIXpisbXDt7hi3BzXOVz56DWPP/bo3IWjXefohd909RsqM43lp8Bi1yE6sSvwRdchRKT20ihsB/7oOkdPtVs7OIiTha5z1Nsufx7/zJSFS8oyTwZgGnB5V7+pMtNA8kcjfZw7A/CTIE52cx1CROri58B01yF6oV8QJ+3xQy+NcR2kHrb/07iXZy5pH+k6Ry/9NI3Cd7r6TZWZxvMj/Fy4ahXgn0GchK6DiEhtpVE4G/iB6xy9ZH486Y29zr2jsVcJ3uKKcdMXtNt1XefopTeB363sC1RmGkwahc8Af3WdowtDgH8HcTLKdRARqblfAy+4DtFb174ye6/P3/z0/a5z1EIQJ/PbrV3DdY4KXJhG4UofcFGZaUw/dB1gJdYA/hPESVlmz4tIBdIoXASc5TpHJe6Z9fZuO185vnRFrCsn//XpB4I4sWQj5GUzg6wYr5TKTAPK92vydXQGYARwZxAnG7oOIiI1dS1QytV2Zy9t3zCIE3v4dU90+ihwGVx495QxqPOCnQAAEN9JREFUQZzMv3/227u6zlKFi9MonNfdF6nMNK6v4ee6M8usB9wTxEmZ/ycTkZVIo9AC33SdoxoT3168QxAni//vn+kY11l6Y/s/jXvl9y/O3ItyjsYs8yrwi558ocpMg0qj8CXgfNc5urE+cG8QJ+cGcdLqOoyIFC+Nwv8C/3ado0qtN78+b68trhg3/cpHpt7jOszKHHDN408EcWIXtNt1XGcpwJfTKOzROkAqM43tQiB1HaIbfYCzgfuDOCnDbq0i0nvfxM+nLHul3do1Lnj69T13vnL8lIvveX6M6zzL3DZh2gNH/+XJh4I4WfriwiVbu85TkNvSKOzx1hgqMw0sjcLFwJdc5+ihnYHHgzg50XUQESlWGoVPAle5zlGU2UvbN/7d8zP2CuLE7nzl+Ck/uHPy3fXOcG3y8r2HXfdEEsTJojOSl3d9bN6inWmc9/T5wKm9+QaTz3D2zTVpFB7jOkSjCOLkWuBTrnP0wj+A89IofMR1EKmPIE4Gkj2675vpne3QK70XxEk/YFCdTjcBqPttllVazKv7D1918g8PCtpqcfzfj/3fmJtenLnGiwuXbEnjFJfOfCONwgt78w0qM00giJN1gKeB1V1n6aV7ybZo+Ec+kVBEpFtBnLwMOF0YrsWY+Wu2mpdGrtJ/5hZrDFh8etsmbb35/j8+9NKYp96abybPXTj4pUVL117YbteqUVTfPA6EaRQu7c03qcw0iSBODgNudp2jQhOBnwFX52tXiIh0yYcyIxVZAuyaRuGjvf3GRh6mkuWkUfg34GLXOSq0BdnGdS8EcXJRECcfC+LEx1sSIiJSuTMrKTIAehy2uXwT2IVssm0ZrUO2fs7XgKVBnIwD7spfD3S33LWIiHjrhjQKL6r0m1VmmkgahYuDODkKeAwY6jpPlfoAO+WvbwGLgjiZBLxBtinZ+15pFDbkfisiIiU3ETipmgOozDSZNAr/F8TJ8cAtgHGdp0D9gG26+ZpG+vcVEWkEc4HDe7JlwcpozkwTSqPwNuBHrnOIiEjTOyGNwmeqPYjKTPP6DnCF6xAiItK0fpRGYSGbIqvMNKl83ZaTyW43iYiI1NPvgW8XdTCVmSaWL0r0KWCM4ygiItI8rgK+UORiqCozTS6NwneAQ4HxrrOIiEjDu5FsnkyhG4+qzAj5FusHAM+6ziIiIg3r78Cne7tVQU+ozAgAaRS+CexFtgaNiIhIke4EjkijcHEtDq4yI+9Ko3AaWaG5w3UWERFpGDcDh6ZRuLBWJ1CZkRWkUTgXOBi40nUWEREpvZ8An6j1djNaAVjeJx8GPD7febawR+dERKRpLAZOSaPwD/U4mUZmpEtpFH4HOAUofLKWiIg0rJnA/vUqMqAyI91Io/B3QBvwkuMoIiLiv+eA0WkU3l3Pk6rMSLfy3aa3BW5ynUVERLx1LbBTGoV1X+ZDc2akR9IonAkcEcTJ54GfAwMdRxIRET/MIJsfc4OrABqZkV5Jo/BSIAQmuM4iIiLO3Q6McllkQGVGKpBG4URgJ+AHQM3WDRAREW/NB76YRuGBaRS+6jqMyoxUJI3Cd9IoPAvYErjNdR4REamb24Ht0ij8resgy2jOjFQljcIpwCFBnBwIXAyMdBxJRKSw3ZhlBU8AZ6RR+B/XQTrSyIwUIo3CfwGjgDOBeY7jiEhz+wgQky3cJtV7BTgR2N7HIgMqM1KgNAoXpVH4E2AT4AJgluNIItKE0ih8No3CE4FNgV8D7ziOVFbzgLOBkWkUxmkUtrsO1BWVGSlcGoVv5KsHb0A2UvOa40gi0oTSKHwpjcJTgY2An6FR4556HTgH2CSNwvNrva9SEUwQJz7eW7wmjcJjXIeQYgRx0h84HjiD7JOSE2kUGlfnFqkla+2XgQ9UeZinjTHXFpHHV0GcrAF8FTgNWN1xHB+NB34BXJdG4SLXYXpDZUbqJoiTFuAQ4DPAR4F+9Ty/yow0KmvtJCCo8jB/NcZ8oog8vgviZAjwReAkHH7A8sRS4G/Axflq76Wkp5mkbvL7rX8D/hbEyVDgk8CxwG6AioaI1EUahXOAHwE/CuJkG+BI4AjgQ06D1dc4si1qrk6jsPR776nMiBP59giXApcGcbIRcAxwNLCF02Ai0lTSKHyC7JHjs4I42Yqs1BxJ412LLPAwcCNwUxqFL7qNUywTxMkOrkN0YkYahS+4DiH1F8TJemSPVS57rVPUsXWbSRqVbjMVL4iTzXmv2IxyHKdSC4CHgFuAv6ZR+LLjPDWji7t4Lb+gLCs2uwAjKj2Wyow0KpWZ2griZANgB2C75V6FfdAq0FRgbP56AHgijcIlbiPVhy7uUipBnKxJtoXCstdW+Y/DuvtelRlpVCoz9RfEyQfISs22vFdwNqM+76tzgCnA8/mP44CxjTzy0h1d3KUhBHEyAlgfGA6s2eHH4cCwNAp3d5dQpHZUZvwQxMkgsg9Xw8ke/e7uNZTsqc75y73mdfj1HLIRl2Xl5fk0CqfX7V9KRESkHqy1k2z1bnL97yFSKT3NJCJSA9ZaA4wGdspfOwJDgAR4FHgEuNcYM99ZSBEREZHOWGs/aK29swejIS9Ya9sKOJ9GZqSpaW8mEZECWWuPByaQPYHXnQ2Bu6y1P7fWDqhpMJEGpjIjIlIQa+0ZwBXAar34NkO2X9Df81tTItJLKjMiIgWw1m4BnF/FIT4CnFJQHJGmojIjIlIla20fshGZ/lUe6ifW2o2qTyTSXFRmRESqdxLZ00rVWhX4WQHHEWkqKjMiItVrK/BYexV4LJGmoDIjIlK9IjfsHaZbTSK9ozIjIlIFa+0Qsj15ihQWfDyRhqYyIyJSnU0ofp+7TQs+nkhDU5kREanOs0B7wcecVPDxRBqayoyISBXyvZXSgg87ruDjiTQ0lRkRkeoVWT7eMMZMLfB4Ig1PZUZEpHp3FXisuws8lkhTUJkREanelcD9BRxnNvD1Ao4j0lRUZkREqmSMaQciYEGVh/qaMeaVAiKJNBWVGRGRAhhjngPOqOIQtxlj4qLyiDQTlRkRkYIYY34DHApM68W3LQa+Bxxek1AiIiIivWWtHWatvdZ27wlr7XYFnG9SD87VnZuK+HcXcaHVdQARkUZjjJkOHG2t/Q7Z1gQh2f5NQ8ge4x4HJMAEY8wSZ0FFGoTKjIhIjRhjngeeB25wnUWkkWnOjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJrKjIiIiJSayoyIiIiUmsqMiIiIlJo2mhQRkbqy1q4L7AKsDayVvwYDs4Dp+est4DVgnDHmLUdRpSRUZkREpOastdsBhwMHA9v28nufAx4CHgTGGmMeLz6hlJnKjIhIAay1XwI+UuVhZhhjTi4ijy+staOAC8hKTKU2zV/H5sdMgcuBP2nURkREpCDW2j/a6r1a4bknFXDumwr+7zHUWvsna+3SArJ1ZaG19jpr7d5FZpfy0QRgEREplLV2JNltoc9Q2/eZfsBRwF3W2pustSNqeC7xmMqMiIgUxlr7YbIiM7LOpz4ceNpae3SdzyseUJkREZFCWGt3AP4BDHUUYRhwTT5Ko/e3JqI/bBERqZq1dk3gr8AA11mAScaYdtchpH5UZkREpCr5KMi1wPquswD3A99zHULqS2VGRESqdTSwj+sQwAzg08aYpa6DSH2pzIiISMWstX2As13nyJ1ojJnqOoTUn8qMiIhU49PU/8mlzvzSGHOL6xDihlYAFhGRapxe4LHmAxOAl4D1gI3I9m/qznjgjAJzSMmozIiISEWstWvTy32WujAXOBf4hTFmSYdzbAUcn7+Gd/G9RxljFhWQQ0pKt5lERKRS+xdwjNlAaIy5sGORATDGPGWMOQPYHOjsNtIXjDHPFZBDSkxlRkREKlVEmTnBGPNsd19kjJlujDkM+AKwIP/HfzTGXFNABik5lRkREalUWOX3TzPG/K0332CMuRTYnmxdm9OqPL80CM2ZERGRSlW7seP9lXyTMeYZsqeoRACNzIiISAWstQOAwVUepm8RWURUZkREpBLVjsoA7JyXIpGqqMyIiEglVi3gGGuRPZItUhWVGRERqcT0go7zTWvtNdba1Qo6njQhlRkREanEdMAWdKyjgcettXsWdDxpMiozIiLSa/kCd0WNzgBsCNxjrX3QWnuctbZ/gceWBqcyIyIilXq4BsccDVwJTLXW/tBau0ENziENRmVGREQqdWcNjz0c+BbwvLX2Vmvt/tZaU8PzSYmpzIiISKX+VYdztAAfA24HnrHWnmKt1fo0sgKVGRERqUi+Eu8/6njKzYDfkJWa4621fep4bvGYyoyIiFTjPAfn3Ai4Aphgrf2Eg/OLZ1RmRESkYsaYR4DLHJ1+c+BGa+2l1lrtNdjEVGZERKRaXwbGOTz/54B/auG95qUyIyIiVTHGLAQOBsY6jLEvMNZau6HDDOKIyoyIiFTNGDMNaAN+6zDGFsBD1toPOswgDqjMiIhIIYwxi40xXwROAhY6ijECuMpaq/e3JqI/bBERKZQx5o/ATsDfHUXYEzjd0bnFAZUZEREpnDHmSWPMx4AQN6XmTGvtQAfnFQdUZkREpGaMMeOWKzV/AZbU6dRrAifW6VzimMqMiIjUXF5qPkm24N0FwFt1OO0X6nAO8YDKjIiI1I0x5mVjzHeADwIR8FgNT7eVtXZ4DY8vnlCZERGRujPGvGOMucIYsz2wB7W7BdVWg2OKZ1RmRETEKWPM/fktqFHAcwUffpeCjyceUpkREREvGGNSYGfg7gIPu1aBxxJPqcyIiIg3jDEzgP2B2ws65LCCjiMeU5kRERGvGGMWA2cAtoDDrVnAMcRzKjMiIuIdY8xTwJQCDqX3uSagP2QREamatXagtfa0gg87uYBjvFbAMcRzKjMiIlKE3wK/tNZeWOAx1y7gGK8UcAzxnMqMiIhUxVp7MnB8/svTrbU/L+CYA4Atqz0O8GoBxxDPqcyIiEjFrLXbAZd0+MdftdbebK0dWsWh9wD6VvH9y6jMNAGVGRERqYi1dnXgRmBAJ799GPC4tXa3Co47GPhdlfGWeaSg44jHVGZERKTXrLUG+BOw8Uq+bH3gHmvtr6y1G/XwuAOBP3Rz3J6aYoyp5d5P4gmVGRERqcQ3gUN68HV9gC8Bk62111trd7HW9uvsC621hwKTgCMLynhjQccRz7W6DiAiIuVirW0DftDLb+sDfDJ/LbXWvgCkwBtAAGwFDCkwJqjMNA2VGRER6TFr7drAdWTlpFJ9gE3zV608YYxJanh88YhuM4mISI9Ya1vJiswI11m6YYFTXYeQ+lGZERGRnvoasKfrED3wZ2PM/a5DSP2ozIiISE/9ARjnOkQ3ZpNNTpYmojIjIiI9YoyZAXwEeMh1li4sAT5jjHnddRCpL5UZERHpMWPMbGA/4D7XWTpoB443xtzqOojUn8qMiIj0ijFmLnAAcJfrLMs5xRhzjesQ4obKjIiI9JoxZgFwEHAOsNBhlDnAccaYyxxmEMdUZkREpCLGmIXGmHOBUcB/HES4D9jGGHOVg3OLR1RmRESkKsaYycaY/YCjgdfqcMo5wLeANmPMi3U4n3hOZUZEpBjtZIu1VfNqL+G532WMuY5sa4IzgPHVHq8T/wNOB9YzxvzYGFN1ZhEREZEuWWtHWmvPttZOspV73Vp7g7X2KGttNVsoSAMzrgOIiEjjs9ZuA2wPfLCTVwvwJvBW/uMbwCPAGGPMRCeBpVT+H8FnJPsOxe1OAAAAAElFTkSuQmCC" alt="RERO ILS" />
-    </a>
-    @if (!hideSearch) {
-      <ng-core-autocomplete
-        [recordTypes]="recordTypes"
-        [action]="'/records/documents'"
-        [extraQueryParams]="autocompleteQueryParams"
-        [typeaheadOptionsLimit]="typeaheadOptionsLimit"
-        [internalRouting]="true"
-        class="flex-grow-1">
-      </ng-core-autocomplete>
-    }
-</div>
-</nav>
-
-<nav class="navbar navbar-expand-lg navbar-light bg-light mb-4 p-0">
-  <div class="container-fluid px-5">
-    <div class="collapse navbar-collapse">
-      <!-- User Services menu -->
-      <admin-menu-user-services class="mr-auto"></admin-menu-user-services>
-      <!-- Libraries switch menu -->
-      <admin-menu-switch-library></admin-menu-switch-library>
-      <!-- Languages menu -->
-      <admin-menu-language></admin-menu-language>
-      <!-- Help menu -->
-      <a class="mx-2 text-secondary" href="/help">
-        <i class="fa fa-info"></i>
-        {{ 'Help' | translate }}
-      </a>
-      <!-- User menu -->
-      <admin-menu-user></admin-menu-user>
-    </div>
-  </div>
-
-  <button type="button" class="navbar-toggler d-block d-lg-none" (click)="isCollapsed = !isCollapsed"
-    [attr.aria-expanded]="!isCollapsed" aria-controls="navbarSupportedContent">
-    <span class="navbar-toggler-icon"></span>
-  </button>
-  <div class="d-block d-lg-none navbar-collapse" id="navbarSupportedContent">
-    <admin-menu-mobile class="mt-2" [class]="{'d-none': isCollapsed, 'd-block': !isCollapsed}"></admin-menu-mobile>
-  </div>
-</nav>
diff --git a/projects/admin/src/app/menu/menu.component.ts b/projects/admin/src/app/menu/menu.component.ts
deleted file mode 100644
index a95ac6b78..000000000
--- a/projects/admin/src/app/menu/menu.component.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2019 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Component, OnInit } from '@angular/core';
-import { NavigationEnd, Router, UrlSegment } from '@angular/router';
-import { SearchBarConfigService, UserService } from '@rero/shared';
-import { filter } from 'rxjs/operators';
-
-@Component({
-  selector: 'admin-menu',
-  templateUrl: './menu.component.html',
-  styleUrls: ['./menu.component.scss']
-})
-export class MenuComponent implements OnInit {
-
-  /** Collapsed menu */
-  isCollapsed = true;
-
-  /** Array of Record types */
-  recordTypes = [];
-
-  /** Max length suggestion */
-  maxLengthSuggestion = 100;
-
-  /** Autocomplete query params */
-  autocompleteQueryParams: any = { page: '1', size: '10' };
-
-  /** Is document url */
-  private hideSearchElement = false;
-
-  /** Resources involved in hiding the search area */
-  private hideSearchResources = ['documents'];
-
-  /**
-   * Get Typeahead option limit
-   * @return number
-   */
-  get typeaheadOptionsLimit(): number {
-    return this._searchBarConfigService.typeaheadOptionsLimit;
-  }
-
-  /**
-   * Get hide search
-   * @return boolean
-   */
-  get hideSearch(): boolean {
-    return this.hideSearchElement;
-  }
-
-  /**
-   * Constructor
-   * @param _userService - UserService
-   * @param _searchBarConfigService - SearchBarConfigService
-   * @param _router - Router
-   */
-  constructor(
-    private _userService: UserService,
-    private _searchBarConfigService: SearchBarConfigService,
-    private _router: Router
-  ) { }
-
-  /** Init */
-  ngOnInit() {
-    this._hideSearch();
-    this._router.events
-      .pipe(filter(event => event instanceof NavigationEnd))
-      .subscribe(() => this._hideSearch());
-    const currentUser = this._userService.user;
-    this.autocompleteQueryParams.organisation = currentUser.currentOrganisation;
-
-    this.recordTypes = this._searchBarConfigService.getConfig(
-      true, this, undefined, this.maxLengthSuggestion
-    );
-  }
-
-  /** Search the resource to determine whether to hide the search  */
-  private _hideSearch(): void {
-    const paths = [];
-    this._router.parseUrl(this._router.url).root.children.primary?.segments
-      .some((segment: UrlSegment) => { paths.push(segment.path); });
-    const resourceFlag = paths.some((path: string) => this.hideSearchResources.includes(path));
-    if (!resourceFlag) {
-      this.hideSearchElement = false;
-    } else {
-      const detailFlag = paths.includes('detail');
-      this.hideSearchElement = !(resourceFlag && detailFlag);
-    }
-  }
-}
diff --git a/projects/admin/src/app/menu/service/library-switch-menu-event.service.ts b/projects/admin/src/app/menu/service/library-switch-menu-event.service.ts
deleted file mode 100644
index f7622b452..000000000
--- a/projects/admin/src/app/menu/service/library-switch-menu-event.service.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { Injectable } from '@angular/core';
-import { PRIMARY_OUTLET, Router } from '@angular/router';
-import { AppConfigService } from '@app/admin/service/app-config.service';
-import { TranslateService } from '@ngx-translate/core';
-import { DialogService, MenuItem } from '@rero/ng-core';
-import { UserService } from '@rero/shared';
-import { Observable } from 'rxjs';
-import { LibrarySwitchService } from './library-switch.service';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class LibrarySwitchMenuEventService {
-
-  /**
-   * Constructor
-   * @param _userService - UserService
-   * @param _router - Router
-   * @param _appConfigService - AppConfigService
-   * @param _dialogService - DialogService
-   * @param _translateService - TranslateService
-   * @param _librarySwitchService - LibrarySwitchService
-   */
-  constructor(
-    private _userService: UserService,
-    private _router: Router,
-    private _appConfigService: AppConfigService,
-    private _dialogService: DialogService,
-    private _translateService: TranslateService,
-    private _librarySwitchService: LibrarySwitchService,
-  ) {}
-
-  /**
-   * Event on menu click
-   * @param event - MenuItem
-   */
-  eventMenuClick(event: MenuItem): void {
-    if (this._userService.user.currentLibrary !== event.getExtra('id')) {
-      const url = this._router.url;
-      const urlTree = this._router.parseUrl(url);
-      const children = urlTree.root.children[PRIMARY_OUTLET];
-      if (children) {
-        const urlParams = children.segments.map(segment => segment.path);
-        if (
-          this._appConfigService.librarySwitchCheckParamsUrl
-            .some(param => urlParams.includes(param))
-        ) {
-          this._dialog().subscribe((confirmation: boolean) => {
-            if (confirmation) {
-              this._switchAndNavigate(event.getExtra('id'));
-            }
-          });
-        } else {
-          this._switchAndNavigate(event.getExtra('id'));
-        }
-      } else {
-        this._switchAndNavigate(event.getExtra('id'));
-      }
-    }
-  }
-
-  /**
-   * Dialog configuration
-   * @return Observable
-   */
-  private _dialog(): Observable<boolean> {
-    return this._dialogService.show({
-      ignoreBackdropClick: false,
-      initialState: {
-        title: this._translateService.instant('Quit the page'),
-        body: this._translateService.instant(
-          'Do you want to quit the page? The changes made so far will be lost.'
-        ),
-        confirmButton: true,
-        confirmTitleButton: this._translateService.instant('Quit'),
-        cancelTitleButton: this._translateService.instant('Stay')
-      }
-    });
-  }
-
-  /**
-   * Switch and navigate
-   * @param id - string, library pid
-   */
-  private _switchAndNavigate(id: string): void {
-    this._librarySwitchService.switch(id);
-    this._router.navigate(['/']);
-  }
-}
diff --git a/projects/admin/src/app/menu/service/library-switch-menu-storage.service.spec.ts b/projects/admin/src/app/menu/service/library-switch-menu-storage.service.spec.ts
deleted file mode 100644
index 3649c8986..000000000
--- a/projects/admin/src/app/menu/service/library-switch-menu-storage.service.spec.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2022 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { TestBed } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { CoreModule, LocalStorageService } from '@rero/ng-core';
-import { User, UserService, testUserLibrarianWithSettings } from '@rero/shared';
-import { LibrarySwitchMenuStorageService } from './library-switch-menu-storage.service';
-import { LibrarySwitchService } from './library-switch.service';
-import { MenuService } from './menu.service';
-
-describe('LibrarySwitchMenuStorageService', () => {
-  let service: LibrarySwitchMenuStorageService;
-  let localStorageService: LocalStorageService;
-  let librarySwitchService: LibrarySwitchService;
-
-  beforeEach(() => {
-    const userServiceSpy = jasmine.createSpyObj('UserService', ['']);
-    const user = new User(testUserLibrarianWithSettings);
-    user.currentLibrary = '2';
-    userServiceSpy.user = user;
-
-    TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-        TranslateModule.forRoot(),
-        CoreModule
-      ],
-      providers: [
-        LibrarySwitchService,
-        MenuService,
-        { provide: UserService, useValue: userServiceSpy }
-      ]
-    });
-    service = TestBed.inject(LibrarySwitchMenuStorageService);
-    localStorageService = TestBed.inject(LocalStorageService);
-    librarySwitchService = TestBed.inject(LibrarySwitchService);
-    localStorageService.clear();
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('Should return the user\'s current library', () => {
-    expect(service.getCurrentLibrary()).toEqual('2');
-  });
-
-  it('Should return the user\'s new current library after a switch', () => {
-    librarySwitchService.librarySwitch$.subscribe(() => {
-      expect(service.getCurrentLibrary()).toEqual('4');
-    });
-    librarySwitchService.switch('4');
-  });
-});
diff --git a/projects/admin/src/app/menu/service/library-switch-menu-storage.service.ts b/projects/admin/src/app/menu/service/library-switch-menu-storage.service.ts
deleted file mode 100644
index c2f37fe38..000000000
--- a/projects/admin/src/app/menu/service/library-switch-menu-storage.service.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2023 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { Injectable } from '@angular/core';
-import { LocalStorageService } from '@rero/ng-core';
-import { User, UserService } from '@rero/shared';
-import { LibrarySwitchService } from './library-switch.service';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class LibrarySwitchMenuStorageService {
-
-  /** Storage name */
-  private STORAGE_KEY = 'menu_current_library';
-
-  /**
-   * Constructor
-   * @param _librarySwitchService - LibrarySwitchService
-   * @param _localeStorageService - LocalStorageService
-   * @param _userService - UserService
-   */
-  constructor(
-    private _librarySwitchService: LibrarySwitchService,
-    private _localeStorageService: LocalStorageService,
-    private _userService: UserService
-  ) {
-    this._initObservable();
-   }
-
-   /**
-    * Get current library
-    * @returns current selected library in storage
-    */
-  getCurrentLibrary(): string {
-    // If I have no active storage, I store the current library key locally
-    const user = this._userService.user;
-    let dataStorage = null;
-    if (!this._localeStorageService.has(this.STORAGE_KEY)) {
-      dataStorage = this._dataStorage(user);
-      this._localeStorageService.set(this.STORAGE_KEY, dataStorage);
-    } else {
-      // If I have an active key, I retrieve it and assign it to the current user's library
-      dataStorage = this._localeStorageService.get(this.STORAGE_KEY);
-      // If the user is no longer the same, we delete the local storage
-      if (dataStorage.userId !== this._userService.user.id) {
-        dataStorage = this._dataStorage(user);
-        this._localeStorageService.set(this.STORAGE_KEY, dataStorage);
-      }
-      // Set the new current library on user
-      this._userService.user.currentLibrary = dataStorage.currentLibrary;
-    }
-    return this._userService.user.currentLibrary;
-  }
-
-  /** Remote current library storage */
-  removeStorage(): void {
-    this._localeStorageService.remove(this.STORAGE_KEY);
-  }
-
-  /**
-   * User data storage
-   * @returns Object
-   */
-  private _dataStorage(user: User): object {
-    return {
-      userId: user.id,
-      currentLibrary: user.currentLibrary
-    };
-  }
-
-  /** Initialize observable */
-  private _initObservable(): void {
-    this._librarySwitchService.librarySwitch$.subscribe((user: User) => {
-      this._localeStorageService.set(this.STORAGE_KEY, this._dataStorage(user));
-    });
-  }
-}
diff --git a/projects/admin/src/app/menu/service/library-switch-menu.service.spec.ts b/projects/admin/src/app/menu/service/library-switch-menu.service.spec.ts
deleted file mode 100644
index 5a93dd453..000000000
--- a/projects/admin/src/app/menu/service/library-switch-menu.service.spec.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { TestBed } from '@angular/core/testing';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { MenuItemInterface, RecordEvent, RecordService } from '@rero/ng-core';
-import { testUserLibrarianWithSettings, User, UserService } from '@rero/shared';
-import { of } from 'rxjs';
-import { LibraryService } from '../../service/library.service';
-import { LibrarySwitchMenuService } from './library-switch-menu.service';
-import { LibrarySwitchService } from './library-switch.service';
-
-describe('LibrarySwitchMenuService', () => {
-  let service: LibrarySwitchMenuService;
-  let translateService: TranslateService;
-  let librarySwitchService: LibrarySwitchService;
-
-  const librariesResponse = {
-    aggregations: {},
-    hits: {
-      hits: [
-        {
-          'metadata': {
-            pid: '2',
-            name: 'Bibliothèque cantonale valdôtaine, site de Pont-saint-Martin',
-            code: 'AOSTE-CANT2',
-            organisation: {
-              pid: 1,
-              type: 'org'
-            }
-          }
-        },
-        {
-          'metadata': {
-            pid: '3',
-            name: 'Bibliothèque communale et scolaire d\'Avise',
-            code: 'AOSTE-AVISE',
-            organisation: {
-              pid: 1,
-              type: 'org'
-            }
-          }
-        },
-        {
-          'metadata': {
-            pid: '4',
-            name: 'Bibliothèque du Lycée de la Vallée d\'Aoste',
-            code: 'AOSTE-LYCEE',
-            organisation: {
-              pid: 1,
-              type: 'org'
-            }
-          }
-        }
-      ],
-      total: {
-        relation: 'eq',
-        value: 3
-      }
-    }
-  };
-
-  const recordEvent: RecordEvent = { resource: 'libraries', data: {} };
-
-  const userServiceSpy = jasmine.createSpyObj('UserService', ['']);
-  const user = new User(testUserLibrarianWithSettings);
-  user.currentLibrary = '2';
-  userServiceSpy.user = user;
-
-  const LibraryServiceSpy = jasmine.createSpyObj('LibraryService', ['findByLibrariesPidAndOrderBy$']);
-  LibraryServiceSpy.findByLibrariesPidAndOrderBy$.and.returnValue(of(librariesResponse));
-
-  const recordServiceSpy = jasmine.createSpyObj('RecordService', ['totalHits']);
-  recordServiceSpy.totalHits.and.returnValue(3);
-  recordServiceSpy.onCreate$ = of(recordEvent);
-  recordServiceSpy.onUpdate$ = of(recordEvent);
-  recordServiceSpy.onDelete$ = of(recordEvent);
-
-  const activeSuffix = '<S>'
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-        TranslateModule.forRoot()
-      ],
-      providers: [
-        { provide: UserService, useValue: userServiceSpy },
-        { provide: LibraryService, useValue: LibraryServiceSpy },
-        { provide: RecordService, useValue: recordServiceSpy }
-      ]
-    });
-    service = TestBed.inject(LibrarySwitchMenuService);
-    translateService = TestBed.inject(TranslateService);
-    translateService.setDefaultLang('fr');
-    translateService.setTranslation('fr', {
-      'active': activeSuffix
-    });
-    librarySwitchService = TestBed.inject(LibrarySwitchService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should return the libraries switch menu', () => {
-    service.init();
-    const menu = service.menu.getChildren();
-    const librariesMenu = menu[0].getChildren();
-    expect(librariesMenu.length).toEqual(3);
-    let libSelect = librariesMenu.filter((libraryMenu: MenuItemInterface) => libraryMenu.getExtra('id') === user.currentLibrary)[0];
-    expect(libSelect.getExtra('code')).toEqual('AOSTE-CANT2');
-    expect(libSelect.getSuffix().name).toEqual(`(${activeSuffix})`);
-    const newActiveLibrary = '3'
-    librarySwitchService.switch(newActiveLibrary);
-    libSelect = librariesMenu.filter((libraryMenu: MenuItemInterface) => libraryMenu.getExtra('id') === newActiveLibrary)[0];
-    expect(libSelect.getExtra('code')).toEqual('AOSTE-AVISE');
-    expect(libSelect.getSuffix().name).toEqual(`(${activeSuffix})`);
-  });
-});
diff --git a/projects/admin/src/app/menu/service/library-switch-menu.service.ts b/projects/admin/src/app/menu/service/library-switch-menu.service.ts
deleted file mode 100644
index 416ac7fbd..000000000
--- a/projects/admin/src/app/menu/service/library-switch-menu.service.ts
+++ /dev/null
@@ -1,193 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { MenuFactory, MenuItemInterface, Record, RecordEvent, RecordService } from '@rero/ng-core';
-import { User, UserService } from '@rero/shared';
-import { map } from 'rxjs/operators';
-import { LibraryService } from '../../service/library.service';
-import { LibrarySwitchService } from './library-switch.service';
-
-
-@Injectable({
-  providedIn: 'root'
-})
-export class LibrarySwitchMenuService {
-
-  /** Menu */
-  private _menu: MenuItemInterface;
-
-  /** Current Library */
-  private _currentLibrary: MenuItemInterface;
-
-  /** Available libraries */
-  private _librariesMenu = {};
-
-  /** menu is visible */
-  get visible(): boolean {
-    return this._userService.user.patronLibrarian.libraries.length > 0;
-  }
-
-  /** Get menu */
-  get menu(): MenuItemInterface {
-    return this._menu;
-  }
-
-  /**
-   * Constructor
-   * @param _librarySwitchService - LibrarySwitchService
-   * @param _libraryService - LibraryService
-   * @param _recordService - RecordService
-   * @param _translateService - TranslateService
-   * @param _userService - UserService
-   */
-  constructor(
-    private _librarySwitchService: LibrarySwitchService,
-    private _libraryService: LibraryService,
-    private _recordService: RecordService,
-    private _translateService: TranslateService,
-    private _userService: UserService
-  ) { }
-
-  /** Init */
-  init() {
-    this._initObservable();
-  }
-
-  /** Generate */
-  private _generate() {
-    const librariesPid = this._userService.user.patronLibrarian.libraries.map(library =>  library.pid);
-    this._libraryService.findByLibrariesPidAndOrderBy$(librariesPid, 'name').pipe(
-      map((results: Record) => this._recordService
-        .totalHits(results.hits.total) > 0 ? results.hits.hits : []
-      ),
-      map((result: any) => {
-        const libraries: ILibraryMenu[] = [];
-        result.map((library: any) => {
-          libraries.push({
-            id: library.metadata.pid,
-            code: library.metadata.code,
-            name: library.metadata.name,
-            metadata: library.metadata
-          });
-        });
-        // Sort libraries by name asc.
-        return libraries.sort((a: ILibraryMenu, b: ILibraryMenu) => {
-          return a.code.localeCompare(b.code);
-        });
-      })).subscribe((libraries: any) => this._generateMenu(libraries));
-  }
-
-  /**
-   * Generate Menu
-   * @param libraries - array of library record
-   */
-  private _generateMenu(libraries: ILibraryMenu[]) {
-    this._librariesMenu = {};
-    const factory = new MenuFactory();
-    this._menu = factory.createItem('Switch Libraries');
-    const currentLibrary = libraries.find((library: ILibraryMenu) => library.id == this._userService.user.currentLibrary);
-    const libMenu = this._menu.addChild(currentLibrary.metadata.code)
-      .setAttribute('class', 'dropdown-menu dropdown-menu-right')
-      .setExtra('iconClass', 'fa fa-random');
-    this._currentLibrary = libMenu;
-    libraries.forEach((library: ILibraryMenu) => {
-      const libraryLine = libMenu.addChild(library.name)
-        .setAttribute('id', `library-${library.metadata.pid}`)
-        .setPrefix(`[${library.metadata.code}]`, 'pr-2 text-dark small font-weight-bold')
-        .setExtra('id', library.metadata.pid)
-        .setExtra('code', library.metadata.code);
-      if (library.id === this._userService.user.currentLibrary) {
-        this._setActive(libraryLine);
-      }
-      // Proxy library menu item
-      this._librariesMenu[library.id] = libraryLine;
-    });
-  }
-
-  /**
-   * Set library active
-   * @param line - Menu Item
-   */
-  private _setActive(line: any) {
-    line.setSuffix(
-      `(${this._translateService.instant('active')})`,
-      'pl-2 text-info small font-weight-bold'
-    ).setActive(false);
-  }
-
-  /** Init observable */
-  private _initObservable() {
-    // library switch observable
-    this._librarySwitchService.librarySwitch$.subscribe((user: User) => {
-      // If the proxy is empty
-      const librariesKeys = Object.keys(this._librariesMenu);
-      if (librariesKeys.length === 0) {
-        // Generate menu
-        this._generate();
-      } else {
-        // Use proxy to update menu
-        this._currentLibrary.setName(
-          this._librariesMenu[user.currentLibrary].getExtra('code')
-        );
-        librariesKeys.map((key: any) => this._librariesMenu[key].removeSuffix());
-        this._setActive(this._librariesMenu[user.currentLibrary]);
-      }
-    });
-
-    // when a library resource is created
-    // --> if a new library is created, then regenerate the menu
-    this._recordService.onCreate$.subscribe((event: RecordEvent) => {
-      if (event.resource === 'libraries') {
-        this._generate();
-      }
-    });
-
-    // when a library resource is updated
-    // --> if the library updated, update library proxy
-    this._recordService.onUpdate$.subscribe((event: RecordEvent) => {
-      if (event.resource === 'libraries' && event.data.record !== undefined) {
-        const library = event.data.record;
-        this._librariesMenu[library.pid]
-          .setName(library.name)
-          .setExtra('code', library.code);
-      }
-    });
-
-    // when a library resource is deleted
-    // --> if a new library is deleted, then regenerate the menu
-    // --> If the user is connected to the library that is deleted, switch to the first library.
-    this._recordService.onDelete$.subscribe((event: RecordEvent) => {
-      if (event.resource === 'libraries' && event.data.record !== undefined) {
-        const library = event.data.record;
-        if (this._userService.user.currentLibrary === library.pid) {
-          this._librarySwitchService.switch(this._userService.user.patronLibrarian.libraries[0].pid);
-      }
-        this._generate();
-      }
-    });
-  }
-}
-
-// Interface for library menu line
-export interface ILibraryMenu {
-  id: string;
-  code: string;
-  name: string;
-  metadata: any
-}
diff --git a/projects/admin/src/app/menu/service/library-switch-storage.service.spec.ts b/projects/admin/src/app/menu/service/library-switch-storage.service.spec.ts
new file mode 100644
index 000000000..5ec234129
--- /dev/null
+++ b/projects/admin/src/app/menu/service/library-switch-storage.service.spec.ts
@@ -0,0 +1,64 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { TestBed } from '@angular/core/testing';
+
+import { ILibrarySwitchDataStorage, LibrarySwitchStorageService } from './library-switch-storage.service';
+import { LocalStorageService } from '@rero/ng-core';
+
+describe('LibrarySwitchStorageService', () => {
+  let service: LibrarySwitchStorageService;
+
+  const data: ILibrarySwitchDataStorage = {
+    userId: 1,
+    currentLibrary: 'library',
+    libraryName: 'library name'
+  };
+
+  const localStorageSpy = jasmine.createSpyObj('LocalStorageService', ['has', 'get', 'set', 'remove']);
+  localStorageSpy.has.and.returnValue(true);
+  localStorageSpy.get.and.returnValue(data);
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: LocalStorageService, useValue: localStorageSpy }
+      ]
+    });
+    service = TestBed.inject(LibrarySwitchStorageService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should return true if the value exists in the storage', () => {
+    expect(service.has()).toBeTruthy();
+  });
+
+  it('should return the contents of the storage', () => {
+    expect(service.get()).toEqual(data);
+  });
+
+  it('should save the data', () => {
+    expect(service.save(data)).toBe(void 0);
+  });
+
+  it('should delete the data', () => {
+    expect(service.remove()).toBe(void 0);
+  });
+
+});
diff --git a/projects/admin/src/app/menu/service/library-switch-storage.service.ts b/projects/admin/src/app/menu/service/library-switch-storage.service.ts
new file mode 100644
index 000000000..c9acde5d5
--- /dev/null
+++ b/projects/admin/src/app/menu/service/library-switch-storage.service.ts
@@ -0,0 +1,50 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Injectable, inject } from '@angular/core';
+import { LocalStorageService } from '@rero/ng-core';
+
+export interface ILibrarySwitchDataStorage {
+  userId: number;
+  currentLibrary: string;
+  libraryName: string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LibrarySwitchStorageService {
+
+  private localStorage: LocalStorageService = inject(LocalStorageService);
+
+  static readonly STORAGE_KEY = 'menu_library';
+
+  has(): boolean {
+    return this.localStorage.has(LibrarySwitchStorageService.STORAGE_KEY);
+  }
+
+  get(): ILibrarySwitchDataStorage {
+    return this.localStorage.get(LibrarySwitchStorageService.STORAGE_KEY);
+  }
+
+  save(data: ILibrarySwitchDataStorage): void {
+    this.localStorage.set(LibrarySwitchStorageService.STORAGE_KEY, data);
+  }
+
+  remove(): void {
+    this.localStorage.remove(LibrarySwitchStorageService.STORAGE_KEY);
+  }
+}
diff --git a/projects/admin/src/app/menu/service/library-switch.service.spec.ts b/projects/admin/src/app/menu/service/library-switch.service.spec.ts
deleted file mode 100644
index 3e3d8138d..000000000
--- a/projects/admin/src/app/menu/service/library-switch.service.spec.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2022 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { TestBed } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { testUserLibrarianWithSettings, User, UserService } from '@rero/shared';
-import { LibrarySwitchError, LibrarySwitchService } from './library-switch.service';
-
-describe('LibrarySwitchService', () => {
-  let service: LibrarySwitchService;
-
-  const userServiceSpy = jasmine.createSpyObj('UserService', ['']);
-  const user = new User(testUserLibrarianWithSettings);
-  user.currentLibrary = '2';
-  userServiceSpy.user = user;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-        TranslateModule.forRoot()
-      ],
-      providers: [
-        { provide: UserService, useValue: userServiceSpy },
-      ]
-    });
-    service = TestBed.inject(LibrarySwitchService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should raise an exception if the library does not exist', () => {
-    expect(function() { service.switch('1') })
-      .toThrowError(LibrarySwitchError, 'This library with pid 1 is not available.');
-  });
-
-  it('should change library', () => {
-    const library = '2';
-    service.librarySwitch$
-      .subscribe((user: User) => expect(user.currentLibrary).toEqual(library));
-      service.switch(library)
-  });
-});
diff --git a/projects/admin/src/app/menu/service/library-switch.service.ts b/projects/admin/src/app/menu/service/library-switch.service.ts
deleted file mode 100644
index db6f623f6..000000000
--- a/projects/admin/src/app/menu/service/library-switch.service.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Injectable } from '@angular/core';
-import { ILibrary, User, UserService } from '@rero/shared';
-import { Subject } from 'rxjs';
-
-export class LibrarySwitchError extends Error {
-  constructor(message: string) {
-    super(message);
-    this.name = 'LibrarySwitchError';
-  }
-}
-
-@Injectable({
-  providedIn: 'root'
-})
-export class LibrarySwitchService {
-
-  /** On library switch event */
-  private onLibrarySwitch: Subject<User> = new Subject();
-
-  /** Return library switch observable */
-  get librarySwitch$() {
-    return this.onLibrarySwitch.asObservable();
-  }
-
-  /**
-   * Constructor
-   * @param _userService - UserService
-   */
-  constructor(private _userService: UserService) { }
-
-  /**
-   * Switch library
-   * @param libraryPid: the library pid that user would used
-   * @error if the library is not present in list of libraries
-   */
-  switch(libraryPid: string): void {
-    const user = this._userService.user;
-    // we check the existence of the library in her libraries
-    const libraries = user.patronLibrarian.libraries;
-    if (!libraries.some((lib: ILibrary) => lib.pid === libraryPid)) {
-      throw new LibrarySwitchError(
-        `This library with pid ${libraryPid} is not available.`
-      );
-    }
-    // Update current library on user
-    user.currentLibrary = libraryPid;
-    // Emit a new event with user
-    this.onLibrarySwitch.next(user);
-  }
-}
diff --git a/projects/admin/src/app/menu/service/library.service.spec.ts b/projects/admin/src/app/menu/service/library.service.spec.ts
new file mode 100644
index 000000000..e09d70a43
--- /dev/null
+++ b/projects/admin/src/app/menu/service/library.service.spec.ts
@@ -0,0 +1,60 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { TestBed } from '@angular/core/testing';
+
+import { ISwitchLibrary, LibraryService } from './library.service';
+import { UserService } from '@rero/shared';
+import { LibrarySwitchStorageService } from './library-switch-storage.service';
+
+describe('LibraryService', () => {
+  let service: LibraryService;
+
+  const userService = {
+    user: {
+      id: 1,
+      currentLibrary: '0'
+    }
+  };
+
+  const librarySwitchData: ISwitchLibrary = {
+    pid: '1',
+    code: 'AI-HAD',
+    name : 'Library name'
+  };
+
+  const librarySwitchStorageServiceSpy = jasmine.createSpyObj('LibrarySwitchStorageService', ['save']);
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        { provide: UserService, useValue: userService },
+        { provide: LibrarySwitchStorageService, useValue: librarySwitchStorageServiceSpy }
+      ]
+    });
+    service = TestBed.inject(LibraryService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should change library', () => {
+    service.switch$.subscribe((library: ISwitchLibrary) => expect(library).toEqual(librarySwitchData));
+    service.switch(librarySwitchData);
+    expect(userService.user.currentLibrary).toEqual(librarySwitchData.pid);
+  });
+});
diff --git a/projects/admin/src/app/menu/service/library.service.ts b/projects/admin/src/app/menu/service/library.service.ts
new file mode 100644
index 000000000..ea9243fb7
--- /dev/null
+++ b/projects/admin/src/app/menu/service/library.service.ts
@@ -0,0 +1,51 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { EventEmitter, Injectable, inject } from '@angular/core';
+import { UserService } from '@rero/shared';
+import { Observable } from 'rxjs';
+import { LibrarySwitchStorageService } from './library-switch-storage.service';
+
+export interface ISwitchLibrary {
+  pid: string;
+  code: string;
+  name : string;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class LibraryService {
+
+  private userService: UserService = inject(UserService);
+  private librarySwitchStorageService: LibrarySwitchStorageService = inject(LibrarySwitchStorageService);
+
+  private switchEvent = new EventEmitter<ISwitchLibrary>();
+
+  get switch$(): Observable<ISwitchLibrary> {
+    return this.switchEvent.asObservable();
+  }
+
+  switch(library: ISwitchLibrary): void {
+    this.librarySwitchStorageService.save({
+      userId: this.userService.user.id,
+      currentLibrary: library.pid,
+      libraryName: library.name
+    });
+    this.userService.user.currentLibrary = library.pid;
+    this.switchEvent.emit(library);
+  }
+}
diff --git a/projects/admin/src/app/menu/service/menu-factory.service.spec.ts b/projects/admin/src/app/menu/service/menu-factory.service.spec.ts
deleted file mode 100644
index 49b6dc9c4..000000000
--- a/projects/admin/src/app/menu/service/menu-factory.service.spec.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2022 RERO
- * Copyright (C) 2022 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { TestBed } from '@angular/core/testing';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { PERMISSIONS, PermissionsService, PERMISSION_OPERATOR, UserService } from '@rero/shared';
-import { IMenuParent } from '../menu-definition/menu-interface';
-import { cloneDeep } from 'lodash-es';
-
-import { MenuFactoryService } from './menu-factory.service';
-
-describe('MenuFactoryService', () => {
-  let service: MenuFactoryService;
-  let permissionsService: PermissionsService;
-  let translateService: TranslateService;
-
-  const userServiceSpy = jasmine.createSpyObj('UserService', ['']);
-  userServiceSpy.user = {
-    symbolName: 'AN',
-    currentLibrary: 4,
-    currentOrganisation: 2
-  };
-
-  const MENU: IMenuParent[] = [
-    {
-      name: 'User',
-      attributes: { id: 'user-services-menu' },
-      extras: { iconClass: 'fa fa-users' },
-      children: [
-        {
-          name: 'Account',
-          attributes: { id: 'account-menu' },
-          extras: { iconClass: 'fa fa-exchange' },
-          children: [
-            {
-              name: 'My data',
-              router_link: ['/', 'account', 'data'],
-              attributes: { id: 'account-data-menu' },
-              extras: { iconClass: 'fa fa-briefcase' }
-            },
-            {
-              name: 'Change password',
-              router_link: ['/', 'account', 'password'],
-              attributes: { id: 'account-password' },
-              extras: { iconClass: 'fa fa-briefcase' },
-              access: {
-                permissions: [PERMISSIONS.PERM_MANAGEMENT]
-              }
-            }
-          ],
-          access: {
-            permissions: [PERMISSIONS.CIRC_ADMIN]
-          }
-        },
-        {
-          name: 'Contact',
-          router_link: ['/', 'account', 'contact', '$currentOrganisation'],
-          attributes: { id: 'contact' },
-          extras: { iconClass: 'fa fa-briefcase' },
-          translate: false
-        }
-      ]
-    },
-    {
-      name: 'Acquisition',
-      attributes: { id: 'acquisition-menu' },
-      children: [
-        {
-          name: 'Vendors',
-          router_link: ['/', 'vendors'],
-          query_params: {
-            library: '$currentLibrary',
-            organisation: '$currentOrganisation'
-          },
-          attributes: { id: 'vendors-menu' },
-          extras: { iconClass: 'fa fa-briefcase' },
-          access: {
-            permissions: [
-              PERMISSIONS.ACAC_ACCESS,
-              PERMISSIONS.ACAC_CREATE
-            ],
-            operator: PERMISSION_OPERATOR.AND
-          }
-        }
-      ]
-    },
-    {
-      name: 'Hide menu',
-      attributes: { id: 'hide-menu' },
-      children: []
-    },
-    {
-      name: '$symbolName',
-      attributes: { id: 'user-menu' },
-      children: [
-        {
-          name: 'Public interface',
-          uri: '/',
-          attributes: {
-            id: 'my-account-menu',
-            class: 'dropdown-menu dropdown-menu-right'
-          }
-        },
-        {
-          name: 'Logout',
-          uri: '/logout',
-          attributes: {
-            id: 'logout-menu'
-          }
-        }
-      ]
-    },
-  ];
-
-  const userPermissions = [
-    PERMISSIONS.CIRC_ADMIN,
-    PERMISSIONS.ACAC_ACCESS,
-    PERMISSIONS.ACAC_CREATE
-  ];
-
-  const userPermissions2 = [
-    PERMISSIONS.CIRC_ADMIN,
-    PERMISSIONS.ACAC_ACCESS
-  ];
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        HttpClientTestingModule,
-        TranslateModule.forRoot()
-      ],
-      providers: [
-        PermissionsService,
-        { provide: UserService, useValue: userServiceSpy }
-      ]
-    });
-    service = TestBed.inject(MenuFactoryService);
-    permissionsService = TestBed.inject(PermissionsService);
-    translateService = TestBed.inject(TranslateService);
-    translateService.setTranslation('fr', {
-      Account: 'Compte',
-      'Change password': 'Changer le mot de passe',
-      Contact: 'Contactez-moi',
-      'My data': 'Mes données',
-      User: 'Utilisateur',
-      Vendors: 'Fournisseurs'
-    });
-    translateService.setDefaultLang('fr');
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-
-  it('should return the menu', () => {
-    permissionsService.setPermissions(userPermissions);
-    const menu = service.create('app menu', MENU);
-
-    const children = menu.getChildren();
-    expect(children.length).toEqual(3);
-
-    expect(children[0].getName()).toEqual('Utilisateur');
-    expect(children[0].getAttribute('id')).toEqual('user-services-menu');
-    expect(children[0].getExtra('iconClass')).toEqual('fa fa-users');
-
-    const firstChildren = children[0].getChildren();
-    expect(firstChildren.length).toEqual(2);
-    expect(firstChildren[0].getName()).toEqual('Compte');
-
-    // Name not translated
-    expect(firstChildren[1].getName()).toEqual('Contact');
-    expect(firstChildren[1].getRouterLink()).toEqual(['/', 'account', 'contact', '2'])
-
-    const secondChildren = children[1].getChildren();
-    expect(secondChildren[0].getQueryParam('library')).toEqual('4');
-    expect(secondChildren[0].getQueryParam('organisation')).toEqual('2');
-
-    const thirdChildren = children[2].getChildren();
-    expect(thirdChildren.length).toEqual(2);
-    expect(children[2].getName()).toEqual(userServiceSpy.user.symbolName);
-
-    expect(thirdChildren[0].getUri()).toEqual('/');
-    expect(thirdChildren[1].getUri()).toEqual('/logout');
-  });
-
-  it('should return the menu (check permissions AND)', () => {
-    permissionsService.setPermissions(userPermissions2);
-    const menu = service.create('app menu', MENU);
-    const children = menu.getChildren();
-    expect(children.length).toEqual(2);
-  });
-
-  it('should return an error if the defined variable is not available', () => {
-    permissionsService.setPermissions(userPermissions2);
-    const menu = cloneDeep(MENU);
-    menu[3].name = '$foo'
-    expect(function() { service.create('app menu', menu) })
-      .toThrowError(EvalError, 'Name exception: This variable "$foo" is not available.');
-  });
-});
diff --git a/projects/admin/src/app/menu/service/menu-factory.service.ts b/projects/admin/src/app/menu/service/menu-factory.service.ts
deleted file mode 100644
index f5ccd2097..000000000
--- a/projects/admin/src/app/menu/service/menu-factory.service.ts
+++ /dev/null
@@ -1,219 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
- * Copyright (C) 2019-2022 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { MenuFactory, MenuItem, MenuItemInterface } from '@rero/ng-core';
-import { PermissionsService, PERMISSION_OPERATOR, UserService } from '@rero/shared';
-import { IMenu, IMenuKeyValue, IMenuParent } from '../menu-definition/menu-interface';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class MenuFactoryService {
-
-  /** Available variables for menu definitions.
-   *    All these variables will be replaced by corresponding values at menu generation.
-   *    Each entry must have:
-   *      - the variable name to replace as key attribute
-   *      - a function returning the replacement value.
-   */
-  private REPLACEMENT_VARIABLES = {
-    $currentLibrary: () => this._userService.user.currentLibrary,
-    $currentOrganisation: () => this._userService.user.currentOrganisation,
-    $symbolName: () => this._userService.user.symbolName,
-    $currentBudget: () => this._userService.user.currentBudget,
-    $currentDayRange: () => {
-      const today = new Date()
-      const tomorrow = new Date(today);
-      tomorrow.setDate(tomorrow.getDate() + 1);
-      return `${this._resetDate(today)}--${this._resetDate(tomorrow)}`;
-    }
-  };
-
-  /**
-   * Constructor
-   * @param _permissionsService - PermissionsService
-   * @param _userService - UserService
-   * @param _translateService - TranslateService
-   */
-  constructor(
-    private _permissionsService: PermissionsService,
-    private _userService: UserService,
-    private _translateService: TranslateService
-  ) {}
-
-  /**
-   * Create a full menu with children
-   * @param menuName - Menu name
-   * @param menus - Menu definition
-   * @returns MenuItemInterface full menu
-   */
-  create(menuName: string, menus: IMenuParent[]): MenuItemInterface {
-    const factory = new MenuFactory();
-    const rootMenu = factory.createItem(menuName);
-    menus.map((menu: IMenuParent) => {
-      const menuChild = this._createMenu(menu);
-      if (menuChild) {
-        rootMenu.addChild(menuChild);
-      }
-    });
-    return rootMenu;
-  }
-
-  /**
-   * Create a node menu
-   * @param menu IMenu
-   * @returns MenuItemInterface
-   */
-  private _createMenu(menu: IMenu): MenuItemInterface | undefined {
-    // Check if the menu must be generated/included depending on permissions related to this menu
-    let canCreate = true;
-    if (menu.access) {
-      canCreate = this._permissionsService.canAccess(
-        menu.access.permissions,
-        menu.access.operator
-          ? menu.access.operator
-          : PERMISSION_OPERATOR.OR
-      )
-    }
-    if (!canCreate) {
-      return;
-    }
-
-    // If current menu has children, ask creation of these menus by recursion.
-    //   As a child menu could be deactivated by permission (see above), keep only menu with some items.
-    //   If no children menu, no router_link and no URI define for this menu entry, then no need to create it into the menu tree.
-    let children: MenuItemInterface[] = [];
-    if (!menu.router_link && menu.children?.length > 0) {
-      children = menu.children
-        .map((child: IMenu) => this._createMenu(child))
-        .filter((child) => child);
-    }
-    if (!menu.router_link && !menu.uri && children.length === 0) {
-      return;
-    }
-
-    // Build the menu entry.
-    let name = null;
-    if (menu.name.startsWith('$')) {
-      if (!this._hasVariableAvailable(menu.name)) {
-        throw new EvalError(`Name exception: This variable "${menu.name}" is not available.`);
-      }
-      name = String(this.REPLACEMENT_VARIABLES[menu.name]());
-    } else {
-      name = !('translate' in menu) || menu.translate
-        ? this._translateService.instant(menu.name)
-        : menu.name;
-    }
-    const menuItem = new MenuItem(name);
-    if (menu.attributes) {
-      this._processAttributes(menuItem, menu.attributes);
-    }
-    if (menu.extras) {
-      this._processExtras(menuItem, menu.extras);
-    }
-    if (menu.router_link) {
-      this._processRouterLink(menuItem, menu.router_link);
-      if (menu.query_params) {
-        this._processQueryParams(menuItem, menu.query_params)
-      }
-    }
-    if (menu.uri) {
-      menuItem.setUri(menu.uri);
-    }
-    // Add children menu entry to this menu if needed.
-    children.map((child: MenuItemInterface) => menuItem.addChild(child));
-
-    return menuItem;
-  }
-
-  /**
-   * Process attributes object
-   * @param menuRef MenuItemInterface
-   * @param attributes Object attributes (key: value)
-   */
-  private _processAttributes(menuRef: MenuItemInterface, attributes: IMenuKeyValue): void {
-    const keys = Object.keys(attributes);
-    keys.map((key: string) => menuRef.setAttribute(key, attributes[key]));
-  }
-
-  /**
-   * Process extras object
-   * @param menuRef MenuItemInterface
-   * @param extras Object extras (key: value)
-   */
-  private _processExtras(menuRef: MenuItemInterface, extras: IMenuKeyValue): void {
-    const keys = Object.keys(extras);
-    keys.map((key: string) => menuRef.setExtra(key, extras[key]));
-  }
-
-  /**
-   * Process router links (array of string)
-   * @param menuRef MenuItemInterface
-   * @param routerLink Array of path
-   */
-  private _processRouterLink(menuRef: MenuItemInterface, routerLink: string[]): void {
-    const routerL = routerLink.map((link: string) => {
-      if (link.startsWith('$')) {
-        if (!this._hasVariableAvailable(link)) {
-          throw new EvalError(`Router link exception: This variable "${link}" is not available.`);
-        }
-        link = String(this.REPLACEMENT_VARIABLES[link]());
-      }
-      return link;
-    });
-    menuRef.setRouterLink(routerL);
-  }
-
-  /**
-   * Process query params
-   * @param menuRef MenuItemInterface
-   * @param queryParams Object query params (key: value)
-   */
-  private _processQueryParams(menuRef: MenuItemInterface, queryParams: IMenuKeyValue): void {
-    Object.keys(queryParams)
-      .filter((key: string) => queryParams[key].startsWith('$'))  // special replacement only for $variable
-      .map((key: string) => {
-        if (!this._hasVariableAvailable(queryParams[key])) {
-          throw new EvalError(`Query params exception: This variable "${queryParams[key]}" is not available.`);
-        }
-        queryParams[key] = String(this.REPLACEMENT_VARIABLES[queryParams[key]]());
-      });
-    menuRef.setQueryParams(queryParams);
-  }
-
-  /**
-   * Has variable available
-   * @param name - variable name
-   * @returns True if the variable is available
-   */
-  private _hasVariableAvailable(name: string): boolean {
-    return name in this.REPLACEMENT_VARIABLES;
-  }
-
-  /**
-   * Reset a date at midnight for the same day. (2022-12-15T13:45:00.123 --> 1671062400000)
-   * @param date: the date to transform
-   * @returns The epoch of the transformed date in milliseconds.
-   */
-  private _resetDate(date: Date): number {
-    const timestamp = date.getTime();
-    const millis_from_midnight = timestamp % 86400000;  // 86400000 millis in a day
-    return timestamp - millis_from_midnight
-  }
-}
diff --git a/projects/admin/src/app/menu/service/menu-translate.service.spec.ts b/projects/admin/src/app/menu/service/menu-translate.service.spec.ts
new file mode 100644
index 000000000..54c7e716e
--- /dev/null
+++ b/projects/admin/src/app/menu/service/menu-translate.service.spec.ts
@@ -0,0 +1,150 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { TestBed } from '@angular/core/testing';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { UserService } from '@rero/shared';
+import { MenuItem } from 'primeng/api';
+import { MenuTranslateService } from './menu-translate.service';
+
+describe('MenuTranslateService', () => {
+  let service: MenuTranslateService;
+  let translate: TranslateService;
+
+  const userServiceSpy = jasmine.createSpyObj('UserService', ['']);
+  userServiceSpy.user = {
+    currentLibrary: '1',
+    currentOrganisation: '2',
+    symbolName: 'AM',
+    currentBudget: '1'
+  };
+
+  const translations = {
+    'user': 'utilisateur'
+  };
+
+  const menuItems: MenuItem[] = [{
+    label: '$symbolName',
+    items: [
+      {
+        label: 'user',
+        translateLabel: 'user'
+      },
+      {
+        label: 'my library',
+        routerLink: ['/', 'my-library', '$currentLibrary']
+      },
+      {
+        label: 'query params',
+        queryParams: {
+          id: 1,
+          organisation: '$currentOrganisation',
+        }
+      }
+    ]
+  }];
+
+  const menuItemsResult: MenuItem[] = [{
+    label: 'AM',
+    items: [
+      {
+        label: 'utilisateur',
+        translateLabel: 'user'
+      },
+      {
+        label: 'my library',
+        routerLink: ['/', 'my-library', '1']
+      },
+      {
+        label: 'query params',
+        queryParams: {
+          id: 1,
+          organisation: '2'
+        }
+      }
+    ]
+  }];
+
+  const menuItemDateRange: MenuItem[] = [{
+    label: 'date range',
+    queryParams: {
+      range: '$currentDayRange'
+    }
+  }];
+
+  const menuLabelError: MenuItem[] = [{
+    label: '$fooBar'
+  }];
+
+  const menuRouterLinkError: MenuItem[] = [{
+    label: 'label',
+    routerLink: ['/', '$fooBar']
+  }];
+
+  const menuQueryParamsError: MenuItem[] = [{
+    label: 'label',
+    queryParams: {
+      id: '$fooBar'
+    }
+  }];
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        TranslateModule.forRoot()
+      ],
+      providers: [
+        { provide: UserService, useValue: userServiceSpy },
+        TranslateService
+      ]
+    });
+    service = TestBed.inject(MenuTranslateService);
+    translate = TestBed.inject(TranslateService);
+    translate.setTranslation('fr', translations);
+    translate.use('fr');
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should return the menu lines with the changes', () => {
+    expect(service.process(menuItems)).toEqual(menuItemsResult);
+  });
+
+  it('should return the date range', () => {
+    const { range } = service.process(menuItemDateRange)[0].queryParams;
+    expect(range.includes('--')).toBeTrue();
+    const [timeA, timeB] = range.split('--');
+    expect(/^\d+$/.test(timeA)).toBeTrue();
+    expect(/^\d+$/.test(timeB)).toBeTrue();
+  });
+
+  it('should have an error if the variable does not exist for the label', () => {
+    expect(function() { service.process(menuLabelError) })
+      .toThrow(new Error('Label exception: This variable "$fooBar" is not available.'));
+  });
+
+  it('should have an error if the variable does not exist for the routerlink', () => {
+    expect(function() { service.process(menuRouterLinkError) })
+      .toThrow(new Error('RouterLink exception: This variable "$fooBar" is not available.'));
+  });
+
+  it('should have an error if the variable does not exist for the queryParams', () => {
+    expect(function() { service.process(menuQueryParamsError) })
+      .toThrow(new Error('Query Param exception: This variable "$fooBar" is not available.'));
+  });
+});
diff --git a/projects/admin/src/app/menu/service/menu-translate.service.ts b/projects/admin/src/app/menu/service/menu-translate.service.ts
new file mode 100644
index 000000000..63036e574
--- /dev/null
+++ b/projects/admin/src/app/menu/service/menu-translate.service.ts
@@ -0,0 +1,120 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { EventEmitter, Injectable, inject } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { UserService } from '@rero/shared';
+import { MenuItem } from 'primeng/api';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class MenuTranslateService {
+  private translateService: TranslateService = inject(TranslateService);
+  private userService: UserService = inject(UserService);
+
+  private onProcess = new EventEmitter<MenuItem[]>();
+
+  get onProcess$(): Observable<MenuItem[]> {
+    return this.onProcess.asObservable();
+  }
+
+  // Available variables for menu definitions.
+  public REPLACEMENT_VARIABLES = {
+    $currentLibrary: () => this.userService.user.currentLibrary,
+    $currentOrganisation: () => this.userService.user.currentOrganisation,
+    $symbolName: () => this.userService.user.symbolName,
+    $currentBudget: () => this.userService.user.currentBudget,
+    $currentDayRange: () => {
+      const today = new Date()
+      const tomorrow = new Date(today);
+      tomorrow.setDate(tomorrow.getDate() + 1);
+      return `${this.resetDate(today)}--${this.resetDate(tomorrow)}`;
+    }
+  };
+
+  process(menuItems: MenuItem[]): MenuItem[] {
+    menuItems.map((item: MenuItem) => {
+      item.label = this.translateLabel(item);
+      if (item.routerLink) {
+        item.routerLink = this.processRouterLink(item.routerLink);
+      }
+      if (item.queryParams) {
+        item.queryParams = this.processQueryParams(item.queryParams);
+      }
+      if (item.items) {
+        item.items = this.process(item.items);
+      }
+    });
+
+    this.onProcess.emit(menuItems);
+
+    return menuItems;
+  }
+
+  private translateLabel(item: MenuItem): string {
+    if (item?.translateLabel?.startsWith('$')) {
+      if (!this.hasVariableAvailable(item.translateLabel)) {
+        throw new EvalError(`Label exception: This variable "${item.translateLabel}" is not available.`);
+      }
+      return String(this.REPLACEMENT_VARIABLES[item.translateLabel]())
+    } else {
+      return item.translateLabel ? this.translateService.instant(item.translateLabel) : item.label;
+    }
+  }
+
+  private processRouterLink(routerLink: string[]): string[] {
+    return routerLink.map((link: string) => {
+      if (link.startsWith('$')) {
+        if (!this.hasVariableAvailable(link)) {
+          throw new EvalError(`RouterLink exception: This variable "${link}" is not available.`);
+        }
+        link = String(this.REPLACEMENT_VARIABLES[link]());
+      }
+      return link;
+    });
+  }
+
+  private processQueryParams(queryParams: object): object {
+    Object.keys(queryParams)
+      .filter((key: string) => String(queryParams[key]).startsWith('$'))
+      .map((key: string) => {
+        if (String(queryParams[key]).startsWith('$')) {
+          if (!this.hasVariableAvailable(queryParams[key])) {
+            throw new EvalError(`Query Param exception: This variable "${queryParams[key]}" is not available.`);
+          }
+          queryParams[key] = String(this.REPLACEMENT_VARIABLES[queryParams[key]]());
+        }
+      });
+    return queryParams;
+  }
+
+  private hasVariableAvailable(name: string): boolean {
+    return name in this.REPLACEMENT_VARIABLES;
+  }
+
+  /**
+   * Reset a date at midnight for the same day. (2022-12-15T13:45:00.123 --> 1671062400000)
+   * @param date: the date to transform
+   * @returns The epoch of the transformed date in milliseconds.
+   */
+  private resetDate(date: Date): number {
+    const timestamp = date.getTime();
+    const millis_from_midnight = timestamp % 86400000;  // 86400000 millis in a day
+    return timestamp - millis_from_midnight
+  }
+}
diff --git a/projects/admin/src/app/menu/service/menu.service.spec.ts b/projects/admin/src/app/menu/service/menu.service.spec.ts
index 4fd02dbe7..5cd849ae6 100644
--- a/projects/admin/src/app/menu/service/menu.service.spec.ts
+++ b/projects/admin/src/app/menu/service/menu.service.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,162 +14,191 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import { CoreConfigService, CoreModule, MenuItem, MenuItemInterface } from '@rero/ng-core';
-import { PERMISSIONS, PermissionsService, SharedModule, testUserLibrarianWithSettings, User, UserService } from '@rero/shared';
-import { LibrarySwitchService } from './library-switch.service';
-import { MenuFactoryService } from './menu-factory.service';
 
 import { MenuService } from './menu.service';
+import { of } from 'rxjs';
+import { PERMISSION_OPERATOR, PermissionsService, UserService } from '@rero/shared';
+import { LibraryApiService } from '../api/library-api.service';
+import { LibraryService } from './library.service';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
+import { LibrarySwitchStorageService } from './library-switch-storage.service';
+import { CoreConfigService, LocalStorageService } from '@rero/ng-core';
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+
+@Injectable({
+  providedIn: 'root'
+})
+class PermissionServiceSpy extends PermissionsService {
+  canAccess(permission: string | string[], operator: string = PERMISSION_OPERATOR.OR): boolean {
+    return permission === 'enabled';
+  }
+}
 
 describe('MenuService', () => {
   let service: MenuService;
-  let translateService: TranslateService;
-  let configService: CoreConfigService;
-  let permissionsService: PermissionsService;
-  let librarySwitchService: LibrarySwitchService;
-  let userService: UserService;
+  let translate: TranslateService;
+
+  const librariesResponse = {
+    aggregations: {},
+    hits: {
+      hits: [
+        {
+          metadata: {
+            pid: '1',
+            name: 'Library 1',
+            code: 'lib-1'
+          }
+        },
+        {
+          metadata: {
+            pid: '2',
+            name: 'Library 2',
+            code: 'lib-2'
+          }
+        }
+      ],
+      total: {
+        value: 2
+      }
+    },
+    links: []
+  };
+
+  const appMenu = [
+    {
+      label: 'Menu 1',
+      items: [
+        {
+          label: 'Menu 1 - line 1',
+          access: {
+            permissions: 'enabled'
+          }
+        },
+        {
+          label: 'Menu 1 - line 2',
+          access: {
+            permissions: 'disabled'
+          }
+        },
+        ,
+        {
+          label: 'Menu 1 - line 3',
+          access: {
+            permissions: 'enabled'
+          }
+        }
+      ]
+    },
+    {
+      label: 'Menu 2',
+      items: [
+        {
+          label: 'Menu 2 - line 1'
+        }
+      ]
+    }
+  ];
+
+  const translations = {
+    'ui_language_de': 'Deutsch',
+    'ui_language_en': 'English',
+    'ui_language_fr': 'Français'
+  };
 
   const userServiceSpy = jasmine.createSpyObj('UserService', ['']);
-  const user =  new User(testUserLibrarianWithSettings);
-  user.currentLibrary = '2';
-  user.currentOrganisation = '1';
-  userServiceSpy.user =user;
+  userServiceSpy.user = {
+    id: 1,
+    currentLibrary: '1',
+    patronLibrarian: {
+      libraries: [{ pid: '1' }, { pid: '2' }]
+    }
+  }
+
+  const libraryApiServiceSpy = jasmine.createSpyObj('libraryApiService', ['findByLibrariesPidAndOrderBy$']);
+  libraryApiServiceSpy.findByLibrariesPidAndOrderBy$.and.returnValue(of(librariesResponse));
+
+  const libraryServiceSpy = jasmine.createSpyObj('LibraryService', ['']);
+
+  const localStorageServiceSpy = jasmine.createSpyObj('LocalStorageService', ['has', 'set']);
+  localStorageServiceSpy.has.and.returnValue(false);
+
+  const librarySwitchDataStorageSpy = jasmine.createSpyObj('LibrarySwitchStorageService', ['has']);
+  librarySwitchDataStorageSpy.has.and.returnValue(false);
+
+  const configServiceSpy = jasmine.createSpyObj('configService', ['']);
+  configServiceSpy.languages = ['fr','en', 'de'];
+
+  const httpClientSpy = jasmine.createSpyObj('HttpClient', ['post']);
+  httpClientSpy.post.and.returnValue(of({}));
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [
-        HttpClientTestingModule,
         TranslateModule.forRoot(),
-        CoreModule,
-        SharedModule
       ],
       providers: [
-        MenuFactoryService,
-        { provide: UserService, useValue: userServiceSpy }
+        { provide: UserService, useValue: userServiceSpy },
+        { provide: LibraryApiService, useValue: libraryApiServiceSpy },
+        { provide: LibraryService, useValue: libraryServiceSpy },
+        { provide: LocalStorageService, useValue: localStorageServiceSpy },
+        { provide: LibrarySwitchStorageService, use: librarySwitchDataStorageSpy },
+        { provide: CoreConfigService, useValue: configServiceSpy },
+        { provide: HttpClient, useValue: httpClientSpy },
+        { provide: PermissionsService, useClass: PermissionServiceSpy },
+        TranslateService
       ]
     });
     service = TestBed.inject(MenuService);
-
-    translateService = TestBed.inject(TranslateService);
-    translateService.setTranslation('fr', {
-      'Logout': 'Se déconnecter',
-      'My library': 'Ma bibliothèque',
-      'Public interface': 'Interface publique',
-      'ui_language_de': 'Allemand',
-      'ui_language_en': 'Anglais',
-      'ui_language_fr': 'Français'
-    });
-    translateService.setTranslation('en', {
-      'Logout': 'Logout',
-      'My library': 'My library',
-      'Public interface': 'Public interface',
-      'ui_language_de': 'German',
-      'ui_language_en': 'English',
-      'ui_language_fr': 'French'
-    });
-    translateService.use('fr');
-
-    configService = TestBed.inject(CoreConfigService);
-    configService.languages = ['fr', 'en', 'de'];
-
-    permissionsService = TestBed.inject(PermissionsService);
-    permissionsService.setPermissions(Object.values(PERMISSIONS));
-
-    librarySwitchService = TestBed.inject(LibrarySwitchService);
-    userService = TestBed.inject(UserService);
+    translate = TestBed.inject(TranslateService);
+    translate.setTranslation('fr', translations);
+    translate.use('fr');
   });
 
   it('should be created', () => {
     expect(service).toBeTruthy();
   });
 
-  /** ----- Application menu ----- */
-  it('should return the french application menu', () => {
-    userService.user.currentLibrary = '2';
-    service.appMenu$.subscribe((menu: MenuItemInterface) => {
-      expect(menu).toBeInstanceOf(MenuItem);
-      const appMenu = menu.getChildren();
-      expect(appMenu[0].getAttribute('id')).toEqual('user-services-menu');
-      expect(appMenu[1].getAttribute('id')).toEqual('catalog-menu');
-      expect(appMenu[2].getAttribute('id')).toEqual('acquisitions-menu');
-      expect(appMenu[3].getAttribute('id')).toEqual('report-monitoring-menu');
-      expect(appMenu[4].getAttribute('id')).toEqual('admin-and-monitoring-menu');
-      const adminMenu = appMenu[4].getChildren();
-      const myLibraryMenu = adminMenu[4];
-      expect(myLibraryMenu.getName()).toEqual('Ma bibliothèque');
-      expect(myLibraryMenu.getRouterLink()).toEqual(['/', 'records', 'libraries', 'detail', '2']);
-    });
-    service.generateAppMenu();
-  });
+  it('should return the language menu lines', () => {
+    const languages = service.generateMenuLanguages();
+    expect(languages[0].label).toEqual(translations.ui_language_de);
+    expect(languages[0].translateLabel).toEqual('ui_language_de');
+    expect(languages[0].id).toEqual('lang-de');
+    expect(typeof languages[0].command === 'function').toBeTrue();
 
-  it('should return the english application menu', () => {
-    userService.user.currentLibrary = '2';
-    service.appMenu$.subscribe((menu: MenuItemInterface) => {
-      const appMenu = menu.getChildren();
-      const adminMenu = appMenu[4].getChildren();
-      const myLibraryMenu = adminMenu[4];
-      expect(myLibraryMenu.getName()).toEqual('My library');
-    });
-    translateService.use('en');
+    expect(languages[1].label).toEqual(translations.ui_language_en);
+    expect(languages[2].label).toEqual(translations.ui_language_fr);
+    expect(languages[2].styleClass).toEqual('font-bold');
   });
 
-  it('should return the correct library code after the change', () => {
-    userService.user.currentLibrary = '2';
-    service.appMenu$.subscribe((menu: MenuItemInterface) => {
-      const appMenu = menu.getChildren();
-      const adminMenu = appMenu[4].getChildren();
-      const myLibraryMenu = adminMenu[4];
-      expect(myLibraryMenu.getRouterLink()).toEqual(['/', 'records', 'libraries', 'detail', '3']);
+  it('should return library menu lines', () => {
+    service.generateMenuLibrary$().subscribe((menu: MenuItem) => {
+      expect(menu.label).toEqual('lib-1');
+      expect(menu.id).toEqual('menu-library');
+      expect(menu.icon).not.toBeNull();
+      expect(menu.items.length).toEqual(2);
+      expect(menu.items[0].code).toEqual('lib-1');
+      expect(menu.items[0].label).toEqual('[lib-1] Library 1');
+      expect(menu.items[0].pid).toEqual('1');
+      expect(typeof menu.items[0].command === 'function').toBeTrue()
     });
-    librarySwitchService.switch('3');
   });
 
-  /** ----- User menu ----- */
-  it('should return the french user menu', () => {
-    service.userMenu$.subscribe((menu: MenuItemInterface) => {
-      expect(menu).toBeInstanceOf(MenuItem);
-      const userMenu = menu.getChildren()[0].getChildren();
-      expect(userMenu[0].getName()).toEqual('Interface publique');
-      expect(userMenu[1].getName()).toEqual('Se déconnecter');
-    });
-    service.generateUserMenu();
+  it('should return the application\'s menu lines', () => {
+    const menu = service.generateAppMenu(appMenu);
+    expect(menu[0].label).toEqual('Menu 1');
+    expect(menu[0].items.length).toEqual(2);
+    expect(menu[0].items[0].label).toEqual('Menu 1 - line 1');
+    expect(menu[0].items[1].label).toEqual('Menu 1 - line 3');
+    expect(menu[1].label).toEqual('Menu 2');
+    expect(menu[1].items.length).toEqual(1);
   });
 
-  it('should return the english user menu', () => {
-    service.userMenu$.subscribe((menu: MenuItemInterface) => {
-      expect(menu).toBeInstanceOf(MenuItem);
-      const userMenu = menu.getChildren()[0].getChildren();
-      expect(userMenu[0].getName()).toEqual('Public interface');
-      expect(userMenu[1].getName()).toEqual('Logout');
-    });
-    translateService.use('en');
+  it('should return true on the logout event', () => {
+    service.logout$.subscribe((event: boolean) => expect(event).toBeTrue());
+    service.logout();
   });
-
-  /** ----- Language menu ----- */
-  it('should return the french language menu', () => {
-    service.languageMenu$.subscribe((menu: MenuItemInterface) => {
-      expect(menu).toBeInstanceOf(MenuItem);
-      const languageMenu = menu.getChildren()[0].getChildren();
-      expect(languageMenu[0].getName()).toEqual('Allemand');
-      expect(languageMenu[0].getAttribute('id')).toEqual('language-menu-de');
-      expect(languageMenu[0].getExtra('language')).toEqual('de');
-      expect(languageMenu[1].getName()).toEqual('Anglais');
-      expect(languageMenu[2].getName()).toEqual('Français');
-    });
-    service.generateLanguageMenu();
-  });
-
-  it('should return the english language menu', () => {
-    service.languageMenu$.subscribe((menu: MenuItemInterface) => {
-      const languageMenu = menu.getChildren()[0].getChildren();
-      expect(languageMenu[0].getName()).toEqual('German');
-      expect(languageMenu[1].getName()).toEqual('English');
-      expect(languageMenu[2].getName()).toEqual('French');
-    });
-    translateService.use('en');
-  });
-
 });
diff --git a/projects/admin/src/app/menu/service/menu.service.ts b/projects/admin/src/app/menu/service/menu.service.ts
index c0db74d99..f96f9d876 100644
--- a/projects/admin/src/app/menu/service/menu.service.ts
+++ b/projects/admin/src/app/menu/service/menu.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022-2023 RERO
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,134 +14,185 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { EventEmitter, Injectable, inject } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { CoreConfigService, MenuFactory, MenuItemInterface } from '@rero/ng-core';
-import { cloneDeep } from 'lodash-es';
-import { Observable, Subject } from 'rxjs';
-import { MENU_APP } from '../menu-definition/menu-app';
-import { MENU_USER } from '../menu-definition/menu-user';
-import { LibrarySwitchService } from './library-switch.service';
-import { MenuFactoryService } from './menu-factory.service';
+import { CoreConfigService, Record } from '@rero/ng-core';
+import { PERMISSION_OPERATOR, PermissionsService, UserService } from '@rero/shared';
+import { MenuItem } from 'primeng/api';
+import { Observable, map, of } from 'rxjs';
+import { LibraryApiService } from '../api/library-api.service';
+import { MENU_IDS } from '../menu-definition/menu-ids';
+import { LibrarySwitchStorageService } from './library-switch-storage.service';
+import { ISwitchLibrary, LibraryService } from './library.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class MenuService {
 
-  // SERVICE ATTRIBUTES =======================================================
-
-  /** Application menu */
-  private _appMenu: Subject<MenuItemInterface> = new Subject();
-  /** User menu */
-  private _userMenu: Subject<MenuItemInterface> = new Subject();
-  /** Language menu */
-  private _languageMenu: Subject<MenuItemInterface> = new Subject();
-  /** Logout event */
-  private _logout: Subject<Boolean> = new Subject();
-
-  // GETTER & SETTER ==========================================================
-  /**
-   * Get the main application menu
-   * @return Observable on parent menuItem interface.
-   */
-  get appMenu$(): Observable<MenuItemInterface> {
-    return this._appMenu;
+  private userService: UserService = inject(UserService);
+  private libraryApiService: LibraryApiService = inject(LibraryApiService);
+  private libraryService: LibraryService = inject(LibraryService);
+  private librarySwitchDataStorage: LibrarySwitchStorageService = inject(LibrarySwitchStorageService);
+  private translateService: TranslateService = inject(TranslateService);
+  private configService: CoreConfigService = inject(CoreConfigService);
+  private httpClient: HttpClient = inject(HttpClient);
+  private permissionsService: PermissionsService = inject(PermissionsService);
+
+  private logoutEvent = new EventEmitter<boolean>();
+
+  private onChange = new EventEmitter<MenuItem[]>();
+
+  private applicationMenuItems: MenuItem[] = [];
+
+  get logout$(): Observable<boolean> {
+    return this.logoutEvent.asObservable();
+  }
+
+  get onChange$(): Observable<MenuItem[]> {
+    return this.onChange.asObservable();
   }
 
-  /**
-   * Get the user application menu
-   * @return Observable on parent menuItem interface.
-   */
-  get userMenu$(): Observable<MenuItemInterface> {
-    return this._userMenu.asObservable();
+  set appMenuItems(menuItems: MenuItem[]) {
+    this.applicationMenuItems = menuItems;
   }
 
-  /**
-   * Get the language application menu
-   * @return Observable on parent menuItem interface.
-   */
-  get languageMenu$(): Observable<MenuItemInterface> {
-    return this._languageMenu.asObservable();
+  get appMenuItems(): MenuItem[] {
+    return this.applicationMenuItems;
   }
 
-  /**
-   * Get the logout event
-   * @return Observable on logout
-   */
-  get logout$(): Observable<Boolean> {
-    return this._logout.asObservable();
+  public generateMenuLanguages(): MenuItem[] {
+    let languagesMenu = [];
+    const currentLanguage = this.translateService.currentLang;
+    this.configService.languages.map((language: string) => {
+      languagesMenu.push({
+        label: this.translateService.instant(`ui_language_${language}`),
+        translateLabel: `ui_language_${language}`,
+        id: `lang-${language}`,
+        styleClass: currentLanguage === language ? 'font-bold' : '',
+        command: () => this.httpClient
+          .post(`/language`, {lang: language})
+          .subscribe(() => this.translateService.use(language))
+      });
+    });
+    languagesMenu = languagesMenu.sort((a: any, b: any) => a.label.localeCompare(b.label));
+
+    return languagesMenu;
   }
 
-  // CONSTRUCTOR ==============================================================
-  /**
-   * Constructor
-   * @param _menuFactoryService - MenuFactoryService
-   * @param _translateService - TranslateService
-   * @param _librarySwitchService - LibrarySwitchService
-   * @param _configService - CoreConfigService
-   */
-  constructor(
-    private _menuFactoryService: MenuFactoryService,
-    private _translateService: TranslateService,
-    private _librarySwitchService: LibrarySwitchService,
-    private _configService: CoreConfigService
-  ) {
-    this._initializeObservable();
+  public generateMenuLibrary$(): Observable<object|undefined> {
+    const { currentLibrary } = this.userService.user;
+    const librariesPid = this.userService.user.patronLibrarian.libraries.map((library: { pid: string }) => library.pid);
+    if (librariesPid.length === 0) {
+      return of(undefined);
+    }
+    return this.libraryApiService.findByLibrariesPidAndOrderBy$(librariesPid).pipe(
+      map((results: Record) => results.hits.total.value > 0 ? results.hits.hits : []),
+      map((libraries: any) => {
+        let libraryActive = undefined;
+        if (!this.librarySwitchDataStorage.has()) {
+          libraryActive = libraries.find((library: any) => library.metadata.pid === currentLibrary);
+        } else {
+          const data = this.librarySwitchDataStorage.get();
+          libraryActive = libraries.find((library: any) => library.metadata.pid === data.currentLibrary);
+          if (!libraryActive) {
+            libraryActive = libraries.find((library: any) => library.metadata.pid === currentLibrary);
+          }
+        }
+        const menu = {
+          label: libraryActive.metadata.code,
+          icon: 'fa fa-random',
+          id: MENU_IDS.LIBRARY_MENU,
+          items: []
+        };
+        libraries.sort((a: any, b:any) => a.metadata.code.localeCompare(b.metadata.code))
+        .map((library: any) => menu.items.push({
+          label: `[${library.metadata.code}] ${library.metadata.name}`,
+          code: library.metadata.code,
+          pid: library.metadata.pid,
+          styleClass: library.metadata.pid === libraryActive.metadata.pid ? 'font-bold' : '',
+          command: () => this.libraryService.switch({
+            pid: library.metadata.pid,
+            code: library.metadata.code,
+            name: library.metadata.name
+          })
+        }));
+
+        return { menu, libraryActive: {
+          pid: libraryActive.metadata.pid,
+          code: libraryActive.metadata.code,
+          name: libraryActive.metadata.name
+        } };
+      }));
+    ;
   }
 
-  // SERVICE FUNCTIONS ========================================================
-  /** Generate application menu */
-  generateAppMenu(): void {
-    this._appMenu.next(this._menuFactoryService.create('UI Main menu', cloneDeep(MENU_APP)));
+  public generateAppMenu(menuItems: MenuItem[]): MenuItem[] {
+    const items = this.processMenuApp(menuItems).filter((item: any) => item);
+    this.appMenuItems = items;
+
+    return items;
   }
 
-  /** Generate User menu */
-  generateUserMenu(): void {
-    this._userMenu.next(this._menuFactoryService.create('UI User menu', cloneDeep(MENU_USER)))
+  public updateLibraryLink(library: ISwitchLibrary): void {
+    const item = this.appMenuItems
+    .find((item: MenuItem) => item.id === MENU_IDS.APP.ADMIN.MENU).items
+    .find((item: MenuItem) => item.id === MENU_IDS.APP.ADMIN.MY_LIBRARY);
+    const routerLink = [...item.routerLink];
+    routerLink[4] = library.pid;
+    item.routerLink = routerLink;
   }
 
-  generateLanguageMenu(): void {
-    this._languageMenu.next(this._languageMenuFactory());
+  public updateLibraryQueryParams(library: ISwitchLibrary): void {
+    this.updateQueryParams(this.appMenuItems, library);
   }
 
-  /** Generate all menus */
-  generateMenus(): void {
-    this.generateAppMenu();
-    this.generateUserMenu();
-    this.generateLanguageMenu();
+  public logout(): void {
+    this.logoutEvent.emit(true);
   }
 
-  /** logout */
-  logout(): void {
-    this._logout.next(true);
+  private processMenuApp(menuItems: MenuItem[]): MenuItem[] {
+    return menuItems.map((item: MenuItem) => {
+      let canAccess = true;
+      if (item.access) {
+        canAccess = this.permissionsService.canAccess(
+          item.access.permissions,
+          item.access.operator || PERMISSION_OPERATOR.OR
+        );
+      }
+      if (!canAccess) {
+        return;
+      }
+
+      delete item['access'];
+
+      if (!item.url && !item.routerLink && item.items) {
+        item.items = this.processMenuApp(item.items).filter((item: any) => item);
+      }
+
+      return item;
+    });
   }
 
-  // SERVICE PRIVATE FUNCTIONS ================================================
-  /** Language menu */
-  private _languageMenuFactory(): MenuItemInterface {
-    const factory = new MenuFactory();
-    const menu = factory.createItem('UI Languages menu');
-    const currentLang = this._translateService.currentLang;
-    const languageMenu = menu.addChild(`ui_language_${currentLang}`)
-      .setName(this._translateService.instant(`ui_language_${currentLang}`))
-      .setAttribute('class', 'dropdown-menu dropdown-menu-right')
-      .setAttribute('id', 'language-menu')
-      .setExtra('iconClass', 'fa fa-language');
-
-    this._configService.languages.sort().some(lang => {
-      languageMenu.addChild(`ui_language_${lang}`)
-        .setName(this._translateService.instant(`ui_language_${lang}`))
-        .setAttribute('id', `language-menu-${lang}`)
-        .setExtra('language', lang)
-        .setExtra('iconClass', 'fa fa-language');
+  private updateQueryParams(menuItems: MenuItem[], library: ISwitchLibrary): MenuItem[] {
+    menuItems.map((item: MenuItem) => {
+      if (item.queryParams) {
+        item.queryParams = this.processQueryParams(item.queryParams, library);
+      }
+      if (item.items) {
+        item.items = this.updateQueryParams(item.items, library);
+      }
     });
-    return menu;
+
+    return menuItems;
   }
 
-  /** Connect observables */
-  private _initializeObservable(): void {
-    this._librarySwitchService.librarySwitch$.subscribe(() => this.generateMenus());
-    this._translateService.onLangChange.subscribe(() => this.generateMenus());
+  private processQueryParams(queryParams: object, library: ISwitchLibrary): Object {
+    if ('library' in queryParams) {
+      return { ...queryParams, library: library.pid }
+    }
+
+    return queryParams;
   }
 }
diff --git a/projects/admin/src/app/pipe/country-code-translate.pipe.ts b/projects/admin/src/app/pipe/country-code-translate.pipe.ts
index df8053dbe..4af531353 100644
--- a/projects/admin/src/app/pipe/country-code-translate.pipe.ts
+++ b/projects/admin/src/app/pipe/country-code-translate.pipe.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 @Pipe({
@@ -23,11 +23,7 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class CountryCodeTranslatePipe implements PipeTransform {
 
-  /**
-   * Constructor
-   * @param _translateService - TranslateService
-   */
-  constructor(private _translateService: TranslateService) {}
+  private translateService: TranslateService = inject(TranslateService);
 
   /**
    * Get the translation for a country code
@@ -35,7 +31,7 @@ export class CountryCodeTranslatePipe implements PipeTransform {
    * @returns string the translated country code.
    */
   transform(countryCode: string): string {
-    return this._translateService.instant('country_' + countryCode);
+    return this.translateService.instant('country_' + countryCode);
   }
 
 }
diff --git a/projects/admin/src/app/pipe/document-provision-activity.pipe.ts b/projects/admin/src/app/pipe/document-provision-activity.pipe.ts
index c331f23de..00f543e82 100644
--- a/projects/admin/src/app/pipe/document-provision-activity.pipe.ts
+++ b/projects/admin/src/app/pipe/document-provision-activity.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -34,7 +34,7 @@ export class DocumentProvisionActivityPipe implements PipeTransform {
     provisionActivity
       .filter((element: any) => '_text' in element && 'statement' in element)  // Keep only element with '_text'
       .map((element: any) => {
-        const type =  element.type;
+        const { type } = element;
         if (!(type in results)) {  // if type isn't yet init
           results[type] = [];
         }
diff --git a/projects/admin/src/app/pipe/item-in-collection.pipe.ts b/projects/admin/src/app/pipe/item-in-collection.pipe.ts
index cc7febae3..7f9a53b16 100644
--- a/projects/admin/src/app/pipe/item-in-collection.pipe.ts
+++ b/projects/admin/src/app/pipe/item-in-collection.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -25,11 +25,7 @@ import { map } from 'rxjs/operators';
 })
 export class ItemInCollectionPipe implements PipeTransform {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) {}
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Get Exhibition/course for current item
@@ -37,7 +33,7 @@ export class ItemInCollectionPipe implements PipeTransform {
    * @returns Observable
    */
   transform(itemPid: string): Observable<[] | null> {
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       'collections',
       `items.pid:${itemPid} AND published:true`,
       1,
@@ -48,7 +44,7 @@ export class ItemInCollectionPipe implements PipeTransform {
       'title'
     ).pipe(
       map((result: any) => {
-        return (this._recordService.totalHits(result.hits.total) === 0)
+        return (this.recordService.totalHits(result.hits.total) === 0)
           ? null
           : result.hits.hits;
       })
diff --git a/projects/admin/src/app/pipe/patron-name.pipe.ts b/projects/admin/src/app/pipe/patron-name.pipe.ts
index a2d264426..f1b6b9d33 100644
--- a/projects/admin/src/app/pipe/patron-name.pipe.ts
+++ b/projects/admin/src/app/pipe/patron-name.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { PatronService } from '../service/patron.service';
@@ -25,13 +25,7 @@ import { PatronService } from '../service/patron.service';
 })
 export class PatronNamePipe implements PipeTransform {
 
-  /**
-   * Constructor
-   * @param _patronService: PatronService
-   */
-  constructor(
-    private _patronService: PatronService
-  ) {}
+  private patronService: PatronService = inject(PatronService);
 
   /**
    * Build the usage name for a patron based on its PID
@@ -39,8 +33,8 @@ export class PatronNamePipe implements PipeTransform {
    * @returns an observable returning the patron name as string if patron exists.
    */
   transform(patronPid: string): Observable<undefined | string> {
-    return this._patronService.getPatronByPid(patronPid).pipe(
-      map((metadata: any) => this._patronService.getFormattedName(metadata))
+    return this.patronService.getPatronByPid(patronPid).pipe(
+      map((metadata: any) => this.patronService.getFormattedName(metadata))
     )
   }
 
diff --git a/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html b/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html
index a08d89247..a9a22c774 100644
--- a/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html
+++ b/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.html
@@ -16,49 +16,57 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (record) {
-  <article class="card flex-row border-0">
-    <shared-thumbnail
-      class="col-sm-2"
-      [record]="record"
-      isSmall=true>
-    </shared-thumbnail>
-    <div class="card-body w-100 py-0">
-      <h5 class="mb-0 card-title">
+  <article class="flex w-full border-0">
+    <div class="flex">
+      <shared-thumbnail class="col-sm-2" [record]="record" isSmall=true />
+    </div>
+    <div class="flex flex-wrap align-items-start py-0">
+      <h5 class="mb-0 w-full">
         <a [routerLink]="['/records', type.startsWith('import_') ? type: 'documents', 'detail', record.metadata.pid]">
           {{ record.metadata.title | mainTitle }}
         </a>
       </h5>
       <!-- contribution -->
-      <shared-contribution
-        [contributions]="record.metadata?.contribution"
-        [limitRecord]="3"
-        [activateLink]="!type.startsWith('import_')"
-      ></shared-contribution>
+      <div class="w-full">
+        <shared-contribution
+          [contributions]="record.metadata?.contribution"
+          [limitRecord]="3"
+          [activateLink]="!type.startsWith('import_')"
+        ></shared-contribution>
+      </div>
       <!-- provision activity publications -->
       @if (provisionActivityPublications.length > 0) {
-        <ul class="list-unstyled">
-          @for (publication of provisionActivityPublications; track publication) {
-            <li>{{ publication.value }}</li>
-          }
-        </ul>
+        <div class="w-full">
+          <ul class="list-unstyled">
+            @for (publication of provisionActivityPublications; track publication) {
+              <li>{{ publication.value }}</li>
+            }
+          </ul>
+        </div>
       }
       <!-- shared part -->
-      <shared-part-of [record]="record"></shared-part-of>
+      <div class="w-full">
+        <shared-part-of [record]="record"></shared-part-of>
+      </div>
       <!-- edition statement -->
       @if (record.metadata.editionStatement) {
-        <ul class="list-unstyled mb-0">
-          @for (edition of record.metadata.editionStatement; track edition) {
-            <li>{{ edition._text[0].value }}</li>
-          }
-        </ul>
+        <div class="w-full">
+          <ul class="list-unstyled mb-0">
+            @for (edition of record.metadata.editionStatement; track edition) {
+              <li>{{ edition._text[0].value }}</li>
+            }
+          </ul>
+        </div>
       }
       <!-- availability -->
       @if (!type.startsWith('import_') && record.metadata.type !== 'ebook') {
-        <shared-availability
-          recordType="document"
-          [record]="record"
-          [apiService]="documentApiService"
-        ></shared-availability>
+        <div class="w-full">
+          <shared-availability
+            recordType="document"
+            [record]="record"
+            [apiService]="documentApiService"
+          ></shared-availability>
+        </div>
       }
     </div>
   </article>
diff --git a/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.ts b/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.ts
index e1d60c8e4..d22f74f2f 100644
--- a/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/documents-brief-view/documents-brief-view.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { DocumentApiService } from '@app/admin/api/document-api.service';
 import { ResultItem } from '@rero/ng-core';
 
@@ -26,6 +26,8 @@ import { ResultItem } from '@rero/ng-core';
 })
 export class DocumentsBriefViewComponent implements ResultItem {
 
+  public documentApiService: DocumentApiService = inject(DocumentApiService);
+
   /** Set record */
   @Input() set record(record) {
     this._record = record;
@@ -47,12 +49,6 @@ export class DocumentsBriefViewComponent implements ResultItem {
     return this._record;
   }
 
-  /**
-   * Constructor
-   * @param documentApiService - DocumentApiService
-   */
-  constructor(public documentApiService: DocumentApiService) {}
-
   /** process provision activity publications */
   private processProvisionActivityPublications() {
     const { provisionActivity } = this.record.metadata;
diff --git a/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.ts b/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.ts
index fd291aa46..5c16f0fa9 100644
--- a/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/ill-requests-brief-view/ill-requests-brief-view.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { RecordService, ResultItem } from '@rero/ng-core';
 import { ILLRequestStatus } from '../../../classes/ill-request';
 
@@ -25,6 +25,8 @@ import { ILLRequestStatus } from '../../../classes/ill-request';
 })
 export class IllRequestsBriefViewComponent  implements ResultItem, OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+
   // COMPONENT ATTRIBUTES =======================================================
   /** Record */
   @Input() record: any;
@@ -36,7 +38,6 @@ export class IllRequestsBriefViewComponent  implements ResultItem, OnInit {
   /** the requester of the ILL request */
   requester = null;
 
-
   // GETTER FUNCTIONS ==========================================================
   /** get the bootstrap color to apply on the request status badge */
   get badgeColor(): string {
@@ -51,13 +52,6 @@ export class IllRequestsBriefViewComponent  implements ResultItem, OnInit {
     return 'secondary';
   }
 
-  // CONSTRUCTOR & HOOKS =======================================================
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   */
-  constructor(private recordService: RecordService) {}
-
   /** Init hook */
   ngOnInit() {
     if (this.record) {
diff --git a/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.ts b/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.ts
index 5142208a2..d30070362 100644
--- a/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/loans-brief-view/loans-brief-view.component.ts
@@ -15,13 +15,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { ResultItem } from '@rero/ng-core';
 import { PermissionsService } from '@rero/shared';
 import moment from 'moment/moment';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { LoanState } from '../../../classes/loans';
 import { CirculationLogsComponent } from '../../circulation-logs/circulation-logs.component';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 
 @Component({
   selector: 'admin-loans-brief-view',
@@ -30,6 +30,9 @@ import { CirculationLogsComponent } from '../../circulation-logs/circulation-log
 })
 export class LoansBriefViewComponent implements ResultItem, OnInit {
 
+  private dialogService: DialogService = inject(DialogService);
+  private permissionsService: PermissionsService = inject(PermissionsService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Information to build the URL on the record detail view. */
   @Input() detailUrl: { link: string; external: boolean };
@@ -46,8 +49,6 @@ export class LoansBriefViewComponent implements ResultItem, OnInit {
   loanState = LoanState;
   /** is the current request is expired */
   isRequestExpired = false;
-  /** Modal ref */
-  bsModalRef: BsModalRef;
 
   // GETTER & SETTER =========================================================
   /**
@@ -58,17 +59,7 @@ export class LoansBriefViewComponent implements ResultItem, OnInit {
     return this.permissionsService.canAccessDebugMode();
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param modalService - BsModalService
-   * @param permissionsService - PermissionsService
-   */
-  constructor(
-    private modalService: BsModalService,
-    private permissionsService: PermissionsService
-  ){ }
-
+  // HOOKS ======================================================
   /** OnInit hook */
   ngOnInit() {
     // State bullet color
@@ -83,19 +74,12 @@ export class LoansBriefViewComponent implements ResultItem, OnInit {
   // COMPONENT FUNCTIONS ======================================================
   /** Open transaction history logs dialog */
   openTransactionHistoryDialog(loanPid: string): void {
-    const config = {
-      ignoreBackdropClick: false,
-      keyboard: true,
-      initialState: {
+    this.dialogService.open(CirculationLogsComponent, {
+      dismissableMask: true,
+      data: {
         resourcePid: loanPid,
         resourceType: 'loan'
       }
-    };
-    this.bsModalRef = this.modalService.show(CirculationLogsComponent, config);
-    this.bsModalRef.content.dialogClose$.subscribe((value: boolean) => {
-      if (value) {
-        this.bsModalRef.hide();
-      }
     });
   }
 
diff --git a/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.ts b/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.ts
index 4b0cc1441..9733b2513 100644
--- a/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/patron-transaction-events-brief-view/patron-transaction-events-brief-view.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { ResultItem } from '@rero/ng-core';
 import { PatronTransaction, PatronTransactionEvent, PatronTransactionEventType } from '@app/admin/classes/patron-transaction';
 import { OrganisationService } from '@app/admin/service/organisation.service';
@@ -29,6 +29,9 @@ import { PatronTransactionsService } from '../../../service/patron-transactions.
 })
 export class PatronTransactionEventsBriefViewComponent implements ResultItem, OnInit {
 
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private patronTransactionService: PatronTransactionsService = inject(PatronTransactionsService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Information to build the URL on the record detail view. */
   @Input() detailUrl: { link: string; external: boolean };
@@ -48,17 +51,6 @@ export class PatronTransactionEventsBriefViewComponent implements ResultItem, On
   /** reference to PatronTransactionEventType */
   eventTypes = PatronTransactionEventType;
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param organisationService - OrganisationService
-   * @param patronTransactionService - PatronTransactionsService
-   */
-  constructor(
-    private organisationService: OrganisationService,
-    private patronTransactionService: PatronTransactionsService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     this.organisation = this.organisationService.organisation;
diff --git a/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.ts b/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.ts
index dbef1747f..25eb31ce6 100644
--- a/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.ts
+++ b/projects/admin/src/app/record/brief-view/patrons-brief-view/patrons-brief-view.component.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { ResultItem } from '@rero/ng-core';
 import { PERMISSIONS, PermissionsService } from '@rero/shared';
 import { roleBadgeColor } from '../../../utils/roles';
@@ -27,6 +27,8 @@ import { roleBadgeColor } from '../../../utils/roles';
 })
 export class PatronsBriefViewComponent implements ResultItem {
 
+  private permissionsService: PermissionsService = inject(PermissionsService);
+
   /** the record to display */
   @Input() record: any;
   /** the record type */
@@ -42,12 +44,6 @@ export class PatronsBriefViewComponent implements ResultItem {
     return this.permissionsService.canAccess(PERMISSIONS.CIRC_ADMIN);
   }
 
-  /**
-   * Constructor
-   * @param permissionsService - PermissionsService
-   */
-  constructor(private permissionsService: PermissionsService) {}
-
   /**
    * Get the color badge to apply for a specific role
    * @param role: the role to check.
diff --git a/projects/admin/src/app/record/brief-view/statistics-cfg-brief-view-component.ts b/projects/admin/src/app/record/brief-view/statistics-cfg-brief-view-component.ts
index ce6b6b761..c42d9ba57 100644
--- a/projects/admin/src/app/record/brief-view/statistics-cfg-brief-view-component.ts
+++ b/projects/admin/src/app/record/brief-view/statistics-cfg-brief-view-component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { ResultItem } from '@rero/ng-core';
 
@@ -43,6 +43,8 @@ import { ResultItem } from '@rero/ng-core';
   })
 export class StatisticsCfgBriefViewComponent implements ResultItem {
 
+  private translateService: TranslateService = inject(TranslateService);
+
   /** Record data */
   @Input() record: any;
 
@@ -52,12 +54,6 @@ export class StatisticsCfgBriefViewComponent implements ResultItem {
   /** Detail URL to navigate to detail view */
   @Input() detailUrl: { link: string, external: boolean };
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  public constructor(private translateService: TranslateService) {}
-
   /**
    * Status of the configuration on bullet title
    * @returns string - status
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.ts b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.ts
index f972903b8..400651a9a 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.ts
+++ b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log-notification/circulation-log-notification.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { NotificationApiService } from '@app/admin/api/notification-api.service';
 
 @Component({
@@ -25,6 +25,8 @@ import { NotificationApiService } from '@app/admin/api/notification-api.service'
 })
 export class CirculationLogNotificationComponent {
 
+  private NotificationApiService: NotificationApiService = inject(NotificationApiService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Operation log record */
   @Input() record: any;
@@ -36,12 +38,6 @@ export class CirculationLogNotificationComponent {
   /** Notification record */
   notificationRecord: any;
 
-  /**
-   * Constructor
-   * @param NotificationApiService - NotificationApiService
-   */
-  constructor(private NotificationApiService: NotificationApiService) {}
-
   /**
    * Load notification record
    * @param isCollapsed - Is the element collapsed
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.spec.ts b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.spec.ts
index 6b6b3e486..07a106a76 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.spec.ts
+++ b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.spec.ts
@@ -19,8 +19,6 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { DateTranslatePipe, RecordModule } from '@rero/ng-core';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
-import { BsModalService } from 'ngx-bootstrap/modal';
 import { UserService } from '@rero/shared';
 import { userTestingService } from 'projects/admin/tests/utils';
 import { CirculationLogComponent } from './circulation-log.component';
@@ -84,8 +82,6 @@ describe('CirculationLogComponent', () => {
       ],
       providers: [
           { provide: UserService, useValue: userTestingService },
-          BsModalService,
-          BsLocaleService
       ]
     })
     .compileComponents();
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.ts b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.ts
index 9c155f47a..a262cc6d6 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.ts
+++ b/projects/admin/src/app/record/circulation-logs/circulation-log/circulation-log.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
 import { PermissionsService } from '@rero/shared';
 
 @Component({
@@ -25,6 +25,8 @@ import { PermissionsService } from '@rero/shared';
 })
 export class CirculationLogComponent {
 
+  private permissionsService: PermissionsService = inject(PermissionsService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Operation log record */
   @Input() record: any;
@@ -54,15 +56,6 @@ export class CirculationLogComponent {
     return this.permissionsService.canAccessDebugMode();
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param permissionsService - PermissionsService
-   */
-  constructor(
-    private permissionsService: PermissionsService
-  ) {  }
-
   // COMPONENT FUNCTIONS ======================================================
   /** Close dialog */
   closeDialog(): void {
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-logs-dialog.component.ts b/projects/admin/src/app/record/circulation-logs/circulation-logs-dialog.component.ts
index f985c10d6..cefc9b35f 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-logs-dialog.component.ts
+++ b/projects/admin/src/app/record/circulation-logs/circulation-logs-dialog.component.ts
@@ -14,10 +14,11 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
-import { IPermissions, PERMISSIONS, PERMISSION_OPERATOR } from '@rero/shared';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { Component, inject, Input } from '@angular/core';
+import { IPermissions, PERMISSION_OPERATOR, PERMISSIONS } from '@rero/shared';
+import { DialogService } from 'primeng/dynamicdialog';
 import { CirculationLogsComponent } from './circulation-logs.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'admin-circulation-logs-dialog',
@@ -38,44 +39,32 @@ import { CirculationLogsComponent } from './circulation-logs.component';
 })
 export class CirculationLogsDialogComponent {
 
+  private dialogService: DialogService = inject(DialogService);
+  private translateService: TranslateService = inject(TranslateService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Resource pid */
   @Input() resourcePid: string;
   /** Resource type */
   @Input() resourceType: 'item'|'loan' = 'item';
 
-  /** Modal ref */
-  bsModalRef: BsModalRef;
-
   /** return all permissions */
   permissions: IPermissions = PERMISSIONS;
 
   /** Available operators for permissions */
   permissionOperator = PERMISSION_OPERATOR;
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param modalService - BsModalService
-   */
-  constructor(private modalService: BsModalService) {}
-
   // COMPONENT FUNCTIONS ======================================================
   /** Open operation logs dialog */
   openDialog(): void {
-    const config = {
-      ignoreBackdropClick: false,
-      keyboard: true,
-      initialState: {
+    this.dialogService.open(CirculationLogsComponent, {
+      header: this.translateService.instant('Circulation history'),
+      dismissableMask: true,
+      width: '60vw',
+      data: {
         resourcePid: this.resourcePid,
         resourceType: this.resourceType
       }
-    };
-    this.bsModalRef = this.modalService.show(CirculationLogsComponent, config);
-    this.bsModalRef.content.dialogClose$.subscribe((value: boolean) => {
-      if (value) {
-        this.bsModalRef.hide();
-      }
     });
   }
 }
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-logs.component.html b/projects/admin/src/app/record/circulation-logs/circulation-logs.component.html
index de3acc774..1f6ba2d7e 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-logs.component.html
+++ b/projects/admin/src/app/record/circulation-logs/circulation-logs.component.html
@@ -15,79 +15,71 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="modal d-block" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-xl" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" translate>Circulation history</h5>
-        <button type="button" class="close pull-right" aria-label="Close" (click)="closeDialog()">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body overflow-auto overflow-max-size">
-        @if (resourceType === 'item') {
-          <admin-circulation-stats [itemPid]="this.resourcePid"></admin-circulation-stats>
+<div class="overflow-auto overflow-max-size">
+  @if (resourceType === 'item') {
+    <admin-circulation-stats [itemPid]="this.resourcePid"></admin-circulation-stats>
+  }
+  <div class="mb-3">
+    <span class="float-left label-title mr-2 font-weight-bold" translate>Filter</span>
+    <ul class="list-inline mb-0">
+      @for (filter of filterTypes | keyvalue; track filter) {
+        <li class="list-inline-item mr-2">
+          <div class="custom-control custom-switch mb-0">
+            <input type="checkbox" class="custom-control-input mt-1" [id]="filter.key" [checked]="filter.value" (click)="filterCheck(filter.key)">
+            <label class="custom-control-label" [for]="filter.key">{{ ('op_filter_' + filter.key) | translate }}</label>
+          </div>
+        </li>
+      }
+    </ul>
+  </div>
+  @defer {
+    @if (recordTotals > 0) {
+      @for (record of records; track record; let isFirst = $first; let idx = $index) {
+        @if (isFirst || !isSamePeriod(record, records[idx-1])) {
+          <div class="transactionDate">
+            {{ record.metadata.date | dateTranslate :'MMMM Y' | titlecase }}
+          </div>
         }
-        <div class="mb-3">
-          <span class="float-left label-title mr-2 font-weight-bold" translate>Filter</span>
-          <ul class="list-inline mb-0">
-            @for (filter of filterTypes | keyvalue; track filter) {
-              <li class="list-inline-item mr-2">
-                <div class="custom-control custom-switch mb-0">
-                  <input type="checkbox" class="custom-control-input mt-1" [id]="filter.key" [checked]="filter.value" (click)="filterCheck(filter.key)">
-                  <label class="custom-control-label" [for]="filter.key">{{ ('op_filter_' + filter.key) | translate }}</label>
-                </div>
-              </li>
-            }
-          </ul>
-        </div>
-        @defer {
-          @if (recordTotals > 0) {
-            @for (record of records; track record; let isFirst = $first; let idx = $index) {
-              @if (isFirst || !isSamePeriod(record, records[idx-1])) {
-                <div class="transactionDate">
-                  {{ record.metadata.date | dateTranslate :'MMMM Y' | titlecase }}
-                </div>
-              }
-              @switch (getRecordType(record)) {
-                @case('notification') {
-                  <admin-circulation-log-notification
-                    [record]="record"
-                    [isHighlight]="record.metadata.loan.pid === highlightedLoanPid"
-                    [separator]="!isSamePeriod(record, records[idx-1], 'day')"
-                    (mouseenter)="mouseEventTransaction(record, $event)"
-                    (mouseleave)="highlightedLoanPid=null"
-                  ></admin-circulation-log-notification>
-                }
-                @case('circulation') {
-                  <admin-circulation-log-loan
-                    [record]="record"
-                    [isHighlight]="record.metadata.loan.pid === highlightedLoanPid"
-                    [separator]="!isSamePeriod(record, records[idx-1], 'day')"
-                    (closeDialogEvent)="closeDialog()"
-                    (mouseenter)="mouseEventTransaction(record, $event)"
-                    (mouseleave)="highlightedLoanPid=null"
-                  ></admin-circulation-log-loan>
-                }
-              }
-            }
-          } @else {
-            {{ 'No transaction found' | translate }}
+        @switch (getRecordType(record)) {
+          @case('notification') {
+            <admin-circulation-log-notification
+              [record]="record"
+              [isHighlight]="record.metadata.loan.pid === highlightedLoanPid"
+              [separator]="!isSamePeriod(record, records[idx-1], 'day')"
+              (mouseenter)="mouseEventTransaction(record, $event)"
+              (mouseleave)="highlightedLoanPid=null"
+            ></admin-circulation-log-notification>
           }
-        } @loading {
-          {{ 'loading in progress' | translate }}
-        }
-      </div>
-      <div class="modal-footer py-1 justify-content-start">
-        @if (loadedRecord && isLinkShowMore) {
-          <button type="button" id="show-more-items-{{ resourcePid }}" class="btn btn-link pl-1" (click)="showMore()">
-            <i class="fa fa-arrow-circle-o-down"></i> {{ 'Show more' | translate }}
-          </button>
-          @if (isLinkShowMore) {
-            <small>({{ hiddenTransactionLabel }})</small>
+          @case('circulation') {
+            <admin-circulation-log-loan
+              [record]="record"
+              [isHighlight]="record.metadata.loan.pid === highlightedLoanPid"
+              [separator]="!isSamePeriod(record, records[idx-1], 'day')"
+              (closeDialogEvent)="closeDialog()"
+              (mouseenter)="mouseEventTransaction(record, $event)"
+              (mouseleave)="highlightedLoanPid=null"
+            ></admin-circulation-log-loan>
           }
         }
-      </div>
-    </div>
-  </div>
+      }
+    } @else {
+      {{ 'No transaction found' | translate }}
+    }
+  } @loading {
+    {{ 'loading in progress' | translate }}
+  }
+</div>
+<div class="py-1 justify-content-start">
+  @if (loadedRecord && isLinkShowMore) {
+    <p-button
+      id="show-more-items-{{ resourcePid }}"
+      icon="fa fa-arrow-circle-o-down"
+      [label]="'Show more'|translate"
+      [text]="true"
+      (onClick)="showMore()"
+    />
+    @if (isLinkShowMore) {
+      <small>({{ hiddenTransactionLabel }})</small>
+    }
+  }
 </div>
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-logs.component.ts b/projects/admin/src/app/record/circulation-logs/circulation-logs.component.ts
index fa65a304c..2777fc144 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-logs.component.ts
+++ b/projects/admin/src/app/record/circulation-logs/circulation-logs.component.ts
@@ -15,14 +15,15 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
+import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
 import { Record } from '@rero/ng-core';
 import moment from 'moment';
-import { BehaviorSubject, Observable } from 'rxjs';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { OperationLogsApiService } from '../../api/operation-logs-api.service';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 
 @Component({
   selector: 'admin-circulation-logs',
@@ -31,12 +32,16 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 })
 export class CirculationLogsComponent implements OnInit {
 
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private operationLogsApiService: OperationLogsApiService = inject(OperationLogsApiService);
+  private translateService: TranslateService = inject(TranslateService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Resource pid */
-  @Input() resourcePid: string;
+  resourcePid: string;
   /** Resource type */
-  @Input() resourceType = 'item';
-
+  resourceType: string;
   /** Current page */
   page = 1;
   /** items per pages */
@@ -49,8 +54,6 @@ export class CirculationLogsComponent implements OnInit {
   records = [];
   /** first loaded record */
   loadedRecord = false;
-  /** Event on dialog close */
-  dialogClose$ = new BehaviorSubject(false);
   /** Types of operation history (field: record.type) */
   filterTypes = {
     'loan': true,
@@ -80,19 +83,12 @@ export class CirculationLogsComponent implements OnInit {
     return this.translateService.instant(linkText, { counter: count });
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param operationLogsApiService - OperationLogsApiService
-   * @param translateService - TranslateService
-   */
-  constructor(
-    private operationLogsApiService: OperationLogsApiService,
-    private translateService: TranslateService
-  ) {}
-
+  // HOOKS ======================================================
   /** OnInit hook */
   ngOnInit(): void {
+    const { data } = this.dynamicDialogConfig;
+    this.resourcePid = data.resourcePid;
+    this.resourceType = data.resourceType || 'item';
     this._circulationLogsQuery(1).subscribe((response: any) => {
       this.recordTotals = response.total.value;
       this.records = response.hits;
@@ -103,7 +99,7 @@ export class CirculationLogsComponent implements OnInit {
   // PUBLIC FUNCTIONS =========================================================
   /** Close operation log dialog */
   closeDialog(): void {
-    this.dialogClose$.next(true);
+    this.dynamicDialogRef.close();
   }
 
   /** show more */
diff --git a/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.ts b/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.ts
index 44e16e909..1d4fc29bd 100644
--- a/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.ts
+++ b/projects/admin/src/app/record/circulation-logs/circulation-stats/circulation-stats.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { ItemApiService } from '../../../api/item-api.service';
 
 @Component({
@@ -24,18 +24,14 @@ import { ItemApiService } from '../../../api/item-api.service';
 })
 export class CirculationStatsComponent implements OnInit {
 
+  private itemApiService: ItemApiService = inject(ItemApiService);
+
   /** Item record */
   @Input() itemPid: any;
 
   /** Computed stats for current item */
   stats: any;
 
-  /**
-   * Constructor
-   * @param itemApiService - ItemApiService
-   */
-  constructor(private itemApiService: ItemApiService) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     this.itemApiService.getStatsByItemPid(this.itemPid)
diff --git a/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.spec.ts b/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.spec.ts
index c57f3db27..4a7444a99 100644
--- a/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.spec.ts
+++ b/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,13 +14,11 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { ActivatedRoute } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { ActivatedRoute, RouterModule } from '@angular/router';
 import { FormlyModule } from '@ngx-formly/core';
 import { TranslateModule } from '@ngx-translate/core';
 import { RecordModule, RecordService, RecordUiService } from '@rero/ng-core';
@@ -28,7 +26,6 @@ import { of } from 'rxjs';
 import { EditorService } from '../../../service/editor.service';
 import { DocumentEditorComponent } from './document-editor.component';
 
-
 const recordTestingUiService = jasmine.createSpyObj('RecordUiService', [
   'getResourceConfig'
 ]);
@@ -75,7 +72,7 @@ describe('DocumentEditorComponent', () => {
       ],
       imports: [
         HttpClientTestingModule,
-        RouterTestingModule,
+        RouterModule.forRoot([]),
         TranslateModule.forRoot(),
         FormsModule,
         ReactiveFormsModule,
diff --git a/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.ts b/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.ts
index d91db86f7..9e83510e7 100644
--- a/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.ts
+++ b/projects/admin/src/app/record/custom-editor/document-editor/document-editor.component.ts
@@ -15,11 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { AbstractCanDeactivateComponent, RecordService } from '@rero/ng-core';
-import { ToastrService } from 'ngx-toastr';
+import { AbstractCanDeactivateComponent, CONFIG, RecordService } from '@rero/ng-core';
+import { MessageService } from 'primeng/api';
 import { combineLatest } from 'rxjs';
 import { EditorService } from '../../../service/editor.service';
 
@@ -33,28 +33,18 @@ import { EditorService } from '../../../service/editor.service';
  */
 export class DocumentEditorComponent extends AbstractCanDeactivateComponent {
 
+  private editorService: EditorService = inject(EditorService);
+  private translateService: TranslateService = inject(TranslateService);
+  private route: ActivatedRoute = inject(ActivatedRoute);
+  private recordService: RecordService = inject(RecordService);
+  private messageService: MessageService = inject(MessageService);
+
   /** Can deactivate from editor component */
   canDeactivate: boolean = false;
 
   // initial editor values
   model = {};
 
-  /**
-   * Constructor
-   * @param editorService - EditorService
-   * @param toastrService - ToastrService
-   * @param translateService - TranslateService
-   * @param route - ActivatedRoute
-   * @param recordService - RecordService
-   */
-  constructor(
-    private editorService: EditorService,
-    private toastrService: ToastrService,
-    private translateService: TranslateService,
-    private route: ActivatedRoute,
-    private recordService: RecordService
-  ) { super() }
-
   /**
    * Retrieve information about an item regarding its EAN code using EditorService
    * @param source string - the external source
@@ -66,10 +56,12 @@ export class DocumentEditorComponent extends AbstractCanDeactivateComponent {
         if (record) {
           this.model = record.metadata;
         } else {
-          this.toastrService.warning(
-            this.translateService.instant('Does not exists on the remote server!'),
-            this.translateService.instant('Import')
-          );
+          this.messageService.add({
+            severity: 'warn',
+            summary: this.translateService.instant('Import'),
+            detail: this.translateService.instant('Does not exists on the remote server!'),
+            life: CONFIG.MESSAGE_LIFE
+          });
         }
       }
     );
@@ -87,12 +79,19 @@ export class DocumentEditorComponent extends AbstractCanDeactivateComponent {
           delete (record.metadata.pid);
           delete (record.metadata.harvested);
           this.model = record.metadata;
-          this.toastrService.success('Document duplicated');
+          this.messageService.add({
+            severity: 'success',
+            summary: this.translateService.instant('Duplicate'),
+            detail: this.translateService.instant('Document duplicated'),
+            life: CONFIG.MESSAGE_LIFE
+          });
         } else {
-          this.toastrService.warning(
-            this.translateService.instant('This document does not exists!'),
-            this.translateService.instant('Duplicate')
-          );
+          this.messageService.add({
+            severity: 'warn',
+            summary: this.translateService.instant('Duplicate'),
+            detail: this.translateService.instant('This document does not exists!'),
+            life: CONFIG.MESSAGE_LIFE
+          });
         }
       }
     );
diff --git a/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.ts b/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.ts
index 9b7003508..1a4caeccc 100644
--- a/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.ts
+++ b/projects/admin/src/app/record/custom-editor/holding-editor/holding-editor.component.ts
@@ -14,10 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { AbstractCanDeactivateComponent, removeEmptyValues } from '@rero/ng-core';
-import { BehaviorSubject, Subscription, of } from 'rxjs';
+import { BehaviorSubject, of, Subscription } from 'rxjs';
 import { catchError, debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 import { EditorService } from '../../../service/editor.service';
 import { PredictionIssue } from '../../../service/holdings.service';
@@ -33,6 +32,8 @@ import { PredictionIssue } from '../../../service/holdings.service';
 })
 export class HoldingEditorComponent extends AbstractCanDeactivateComponent implements OnInit, OnDestroy {
 
+  private editorService: EditorService = inject(EditorService);
+
   /** Can deactivate from editor component */
   canDeactivate: boolean = false;
 
@@ -58,14 +59,6 @@ export class HoldingEditorComponent extends AbstractCanDeactivateComponent imple
   /** Observable subscription */
   private subscription = new Subscription();
 
-  /**
-   * Constructor.
-   * @param editorService - the local editor service
-   */
-  constructor(private editorService: EditorService) {
-    super();
-  }
-
   /** Component initialization. */
   ngOnInit() {
     this.subscription = this.predictionModel$.pipe(
diff --git a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.html b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.html
index 290920604..e62d9c508 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.html
+++ b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.html
@@ -14,256 +14,224 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
-<div class="modal-body">
-    <form [formGroup]="exceptionForm" (ngSubmit)="onSubmit()">
-    <div class="form-group">
-      <h3 class="modal-title" translate>Exception</h3>
+<form [formGroup]="exceptionForm" (ngSubmit)="onSubmit()">
+  <!-- Title -->
+  <div class="form-group grid">
+    <label for="title" class="col-sm-2 col-form-label required">
+      {{ 'Title' | translate }} <strong class="text-danger">*</strong>
+    </label>
+    <div class="col-sm-10">
+      <input
+        class="form-control"
+        formControlName="title"
+        placeholder="{{ 'Please insert a title' | translate }}"
+        required>
+        @if (title.invalid && (title.dirty || title.touched)) {
+          <div class="text-danger pt-1">
+            @if (title.errors.required) {
+              <div translate>Title is required.</div>
+            }
+          </div>
+        }
+    </div>
+  </div>
+  <!-- Date -->
+  <div class="form-group grid">
+    <div class="offset-2 col-sm-10">
+      <div class="form-check-inline">
+        <label class="form-check-label mr-2">
+          <input type="radio" class="form-check-input" name="day-period" value="false" [checked]="is_period.value === false" (change)="onPeriodChange($event)">
+          {{ 'Day' | translate }}
+        </label>
+        <label class="form-check-label">
+          <input type="radio" class="form-check-input" name="day-period" value="true" [checked]="is_period.value === true" (change)="onPeriodChange($event)">
+          {{ 'Period' | translate }}
+        </label>
+      </div>
     </div>
-    <!-- Title -->
-    <div class="form-group row">
-      <label for="title" class="col-sm-2 col-form-label required">
-        {{ 'Title' | translate }} <strong class="text-danger">*</strong>
+  </div>
+  <!-- one Date -->
+  @if (!is_period.value) {
+    <div class="form-group grid">
+      <label for="date" class="col-sm-2 col-form-label required">
+        {{ 'Date' | translate }} <strong class="text-danger">*</strong>
       </label>
       <div class="col-sm-10">
-        <input
-          class="form-control"
-          formControlName="title"
-          placeholder="{{ 'Please insert a title' | translate }}"
-          required>
-          @if (title.invalid && (title.dirty || title.touched)) {
-            <div class="text-danger pt-1">
-              @if (title.errors.required) {
-                <div translate>Title is required.</div>
-              }
-            </div>
-          }
+        <p-calendar formControlName="date" [readonlyInput]="true" />
+        @if (date.invalid && (date.dirty || date.touched)) {
+          <div class="text-danger pt-1">
+            @if (date.errors.required) {
+              <div translate>Date is required.</div>
+            }
+            @if (date.errors.bsDate && date.errors.bsDate.invalid) {
+              <div translate>Date is invalid.</div>
+            }
+          </div>
+        }
       </div>
     </div>
-    <!-- Date -->
-    <div class="form-group row">
-      <div class="offset-2 col-sm-10">
-        <div class="form-check-inline">
-          <label class="form-check-label mr-2">
-            <input type="radio" class="form-check-input" name="day-period" value="false" [checked]="is_period.value === false" (change)="onPeriodChange($event)">
-            {{ 'Day' | translate }}
-          </label>
-          <label class="form-check-label">
-            <input type="radio" class="form-check-input" name="day-period" value="true" [checked]="is_period.value === true" (change)="onPeriodChange($event)">
-            {{ 'Period' | translate }}
-          </label>
-        </div>
+  }
+  <!-- Period -->
+  @if (is_period.value) {
+    <div class="form-group grid">
+      <label for="date" class="col-sm-2 col-form-label required">
+        {{ 'Dates' | translate }} <strong class="text-danger">*</strong>
+      </label>
+      <div class="col-sm-10">
+        <p-calendar formControlName="dates" selectionMode="range" [readonlyInput]="true" numberOfMonths="2" />
+        @if (dates.invalid && (dates.dirty || dates.touched)) {
+          <div class="text-danger pt-1">
+            @if (dates.errors.required) {
+              <div translate>Date range is required.</div>
+            }
+            @if (dates.errors.bsDate && dates.errors.bsDate.invalid) {
+              <div translate>Date range is invalid.</div>
+            }
+          </div>
+        }
       </div>
     </div>
-    <!-- one Date -->
-    @if (!is_period.value) {
-      <div class="form-group row">
-        <label for="date" class="col-sm-2 col-form-label required">
-          {{ 'Date' | translate }} <strong class="text-danger">*</strong>
+  }
+  <!-- open/close + times -->
+  <div class="offset-2 col-sm-10 mt-2">
+      <div class="form-check-inline">
+        <label class="form-check-label mr-2">
+          <input type="radio" class="form-check-input" name="date-status" value="false" [checked]="is_open.value === false" (change)="onDateStatusChange($event)">
+          {{ 'Closed' | translate }}
         </label>
-        <div class="col-sm-10">
-          <div class="input-group">
-            <input type="text"
-              class="form-control"
-              formControlName="date"
-              #dp="bsDatepicker"
-              bsDatepicker
-              [bsConfig]="{ containerClass: 'theme-default' }">
-              <div class="input-group-append">
-                <span class="input-group-text" (click)="dp.toggle()">
-                  <i class="fa fa-calendar"></i>
-                </span>
-              </div>
-          </div>
-          @if (date.invalid && (date.dirty || date.touched)) {
-            <div class="text-danger pt-1">
-              @if (date.errors.required) {
-                <div translate>Date is required.</div>
-              }
-              @if (date.errors.bsDate && date.errors.bsDate.invalid) {
-                <div translate>Date is invalid.</div>
-              }
-            </div>
-          }
-        </div>
-      </div>
-    }
-    <!-- Period -->
-    @if (is_period.value) {
-      <div class="form-group row">
-        <label for="date" class="col-sm-2 col-form-label required">
-          {{ 'Dates' | translate }} <strong class="text-danger">*</strong>
+        <label class="form-check-label">
+          <input type="radio" class="form-check-input" name="date-status" value="true" [checked]="is_open.value === true" (change)="onDateStatusChange($event)">
+          {{ 'Open' | translate }}
         </label>
-        <div class="col-sm-10">
-          <div class="input-group">
-            <input type="text"
-              class="form-control"
-              formControlName="dates"
-              #dp="bsDaterangepicker"
-              bsDaterangepicker
-              [bsConfig]="{ containerClass: 'theme-default' }">
-              <div class="input-group-append">
-                <span class="input-group-text" (click)="dp.toggle()">
-                  <i class="fa fa-calendar"></i>
-                </span>
-              </div>
-          </div>
-          @if (dates.invalid && (dates.dirty || dates.touched)) {
-            <div class="text-danger pt-1">
-              @if (dates.errors.required) {
-                <div translate>Date range is required.</div>
-              }
-              @if (dates.errors.bsDate && dates.errors.bsDate.invalid) {
-                <div translate>Date range is invalid.</div>
-              }
-            </div>
-          }
-        </div>
       </div>
-    }
-    <!-- open/close + times -->
-    <div class="offset-2 col-sm-10 mt-2">
-        <div class="form-check-inline">
-          <label class="form-check-label mr-2">
-            <input type="radio" class="form-check-input" name="date-status" value="false" [checked]="is_open.value === false" (change)="onDateStatusChange($event)">
-            {{ 'Closed' | translate }}
-          </label>
-          <label class="form-check-label">
-            <input type="radio" class="form-check-input" name="date-status" value="true" [checked]="is_open.value === true" (change)="onDateStatusChange($event)">
-            {{ 'Open' | translate }}
-          </label>
-        </div>
-        <div class="mb-2">
-          @if (exceptionForm.value && exceptionForm.value.is_open) {
-            <em translate>Change the default opening hours for this day</em>
-          }
-          @if (exceptionForm.value && !exceptionForm.value.is_open) {
-            <em translate>Change the default closing hours for this day</em>
-          }
-        </div>
-        <div class="col-sm-12 pl-0">
-          @if (times.length === 0) {
-            <button
-              (click)="addTime()"
-              type="button" class="btn btn-outline-secondary btn-sm"
-            >
-              <i class="fa fa-plus-square-o" aria-hidden="true"></i> {{ 'period' | translate }}
-            </button>
-          }
-          <ul class="list-unstyled mb-0">
-            @for (time of times.controls; track time; let t=$index) {
-              <li formArrayName="times">
-                <div [formGroupName]="t">
-                  <div class="form-row">
-                    <div class="col-4">
-                      <input type="text" class="form-control mr-2 mb-1" formControlName="start_time">
-                    </div>
-                    <div class="col-4">
-                      <input type="text" class="form-control mr-2 mb-1" formControlName="end_time">
-                    </div>
-                    <div class="col-4">
-                      <button
-                        type="button"
-                        class="btn btn-outline-secondary btn-sm mr-2"
-                        (click)="deleteTime(t)"
-                      ><i class="fa fa-trash" aria-hidden="true"></i></button>
-                      @if (times.length === 1) {
-                        <button type="button" class="btn btn-outline-secondary btn-sm"(click)="addTime()">
-                          <i class="fa fa-plus-square-o" aria-hidden="true"></i> {{ 'period' | translate }}
-                        </button>
-                      }
-                    </div>
+      <div class="mb-2">
+        @if (exceptionForm.value && exceptionForm.value.is_open) {
+          <em translate>Change the default opening hours for this day</em>
+        }
+        @if (exceptionForm.value && !exceptionForm.value.is_open) {
+          <em translate>Change the default closing hours for this day</em>
+        }
+      </div>
+      <div class="col-sm-12 pl-0">
+        @if (times.length === 0) {
+          <button
+            (click)="addTime()"
+            type="button" class="btn btn-outline-secondary btn-sm"
+          >
+            <i class="fa fa-plus-square-o" aria-hidden="true"></i> {{ 'period' | translate }}
+          </button>
+        }
+        <ul class="list-unstyled mb-0">
+          @for (time of times.controls; track time; let t=$index) {
+            <li formArrayName="times">
+              <div [formGroupName]="t">
+                <div class="form-grid">
+                  <div class="col-4">
+                    <input type="text" class="form-control mr-2 mb-1" formControlName="start_time">
+                  </div>
+                  <div class="col-4">
+                    <input type="text" class="form-control mr-2 mb-1" formControlName="end_time">
+                  </div>
+                  <div class="col-4">
+                    <button
+                      type="button"
+                      class="btn btn-outline-secondary btn-sm mr-2"
+                      (click)="deleteTime(t)"
+                    ><i class="fa fa-trash" aria-hidden="true"></i></button>
+                    @if (times.length === 1) {
+                      <button type="button" class="btn btn-outline-secondary btn-sm"(click)="addTime()">
+                        <i class="fa fa-plus-square-o" aria-hidden="true"></i> {{ 'period' | translate }}
+                      </button>
+                    }
                   </div>
-                  @if ($any(time).controls.start_time.invalid && ($any(time).controls.start_time.dirty || $any(time).controls.start_time.touched)) {
-                    <div class="text-danger pt-1">
-                      @if ($any(time).controls.start_time.errors.required) {
-                        <div translate>Start time is required.</div>
-                      }
-                      @if ($any(time).controls.start_time.errors.pattern) {
-                        <div translate>Start time format is not correct.</div>
-                      }
-                    </div>
-                  }
-                  @if ($any(time).controls.end_time.invalid && ($any(time).controls.end_time.dirty || $any(time).controls.end_time.touched)) {
-                    <div class="text-danger pt-1">
-                      @if ($any(time).controls.end_time.errors.required) {
-                        <div translate>End time is required.</div>
-                      }
-                      @if ($any(time).controls.end_time.errors.pattern) {
-                        <div translate>End time format is not correct.</div>
-                      }
-                    </div>
-                  }
-                  @if ($any(time).invalid && ($any(time).dirty || $any(time).touched)) {
-                    <div class="text-danger pt-1">
-                      @if ($any(time).errors && $any(time).errors.lessThan) {
-                        <div translate>End time is less than start time.</div>
-                      }
-                    </div>
-                  }
                 </div>
-              </li>
-            }
-          </ul>
-          @if (exceptionForm.invalid  && (exceptionForm.dirty || exceptionForm.touched)) {
-            <div class="text-danger pt-1">
-              @if (exceptionForm.errors && exceptionForm.errors.rangeLessThan) {
-                <div translate>The two periods are overlapping.</div>
-              }
-            </div>
+                @if ($any(time).controls.start_time.invalid && ($any(time).controls.start_time.dirty || $any(time).controls.start_time.touched)) {
+                  <div class="text-danger pt-1">
+                    @if ($any(time).controls.start_time.errors.required) {
+                      <div translate>Start time is required.</div>
+                    }
+                    @if ($any(time).controls.start_time.errors.pattern) {
+                      <div translate>Start time format is not correct.</div>
+                    }
+                  </div>
+                }
+                @if ($any(time).controls.end_time.invalid && ($any(time).controls.end_time.dirty || $any(time).controls.end_time.touched)) {
+                  <div class="text-danger pt-1">
+                    @if ($any(time).controls.end_time.errors.required) {
+                      <div translate>End time is required.</div>
+                    }
+                    @if ($any(time).controls.end_time.errors.pattern) {
+                      <div translate>End time format is not correct.</div>
+                    }
+                  </div>
+                }
+                @if ($any(time).invalid && ($any(time).dirty || $any(time).touched)) {
+                  <div class="text-danger pt-1">
+                    @if ($any(time).errors && $any(time).errors.lessThan) {
+                      <div translate>End time is less than start time.</div>
+                    }
+                  </div>
+                }
+              </div>
+            </li>
           }
-        </div>
-      </div>
-    <!-- Repeat -->
-    <div class="form-group row">
-      <div class="col-sm-2">
-          <div class="custom-control custom-switch">
-            <input
-              formControlName="repeat"
-              class="custom-control-input"
-              type="checkbox"
-              id="repeat"
-              (change)="onRepeatChange($event)"
-              [checked]="repeat.value"
-            >
-            <label
-              class="custom-control-label"
-              for="repeat"
-            >
-              {{ 'Repetition' | translate | titlecase }}
-            </label>
-        </div>
+        </ul>
+        @if (exceptionForm.invalid  && (exceptionForm.dirty || exceptionForm.touched)) {
+          <div class="text-danger pt-1">
+            @if (exceptionForm.errors && exceptionForm.errors.rangeLessThan) {
+              <div translate>The two periods are overlapping.</div>
+            }
+          </div>
+        }
       </div>
-      @if (repeat.value) {
-        <div class="col-sm-10 d-inline">
-          <label for="interval" class="col-form-label required" translate>Repeat each</label>
-          <input type="number" min="1" step="1" class="ml-2 col-2" formControlName="interval">
-          <select class="col-3 ml-1 form-control d-inline-block" formControlName="period">
-            <option value="weekly" translate>week</option>
-            <option value="monthly" translate>month</option>
-            <option value="yearly" translate>year</option>
-          </select>
-          @if (interval.invalid && (interval.dirty || interval.touched)) {
-            <div class="text-danger pt-1">
-              @if (interval.errors.required) {
-                <div translate>Interval is required.</div>
-              }
-              @if (interval.errors.min) {
-                <div translate>Interval must greater than 0.</div>
-              }
-              @if (interval.errors.pattern && !interval.errors.min) {
-                <div translate>Integer only.</div>
-              }
-            </div>
-          }
-        </div>
-      }
     </div>
-    <div class="float-right mb-4" role="group" aria-label="Buttons">
-      <button type="button" class="btn btn-outline-danger mr-1" (click)="onCancel()" translate>Cancel</button>
-      <button type="button" class="btn btn-primary" (click)="onSubmit()" [disabled]="exceptionForm.invalid" translate>
-        OK
-      </button>
+  <!-- Repeat -->
+  <div class="form-group grid">
+    <div class="col-sm-2">
+        <div class="custom-control custom-switch">
+          <input
+            formControlName="repeat"
+            class="custom-control-input"
+            type="checkbox"
+            id="repeat"
+            (change)="onRepeatChange($event)"
+            [checked]="repeat.value"
+          >
+          <label
+            class="custom-control-label"
+            for="repeat"
+          >
+            {{ 'Repetition' | translate | titlecase }}
+          </label>
+      </div>
     </div>
-  </form>
-</div>
+    @if (repeat.value) {
+      <div class="col-sm-10 d-inline">
+        <label for="interval" class="col-form-label required" translate>Repeat each</label>
+        <input pInputText type="number" min="1" step="1" class="ml-2 col-2" formControlName="interval">
+        <select class="col-3 ml-1 form-control d-inline-block" formControlName="period">
+          <option value="weekly" translate>week</option>
+          <option value="monthly" translate>month</option>
+          <option value="yearly" translate>year</option>
+        </select>
+        @if (interval.invalid && (interval.dirty || interval.touched)) {
+          <div class="text-danger pt-1">
+            @if (interval.errors.required) {
+              <div translate>Interval is required.</div>
+            }
+            @if (interval.errors.min) {
+              <div translate>Interval must greater than 0.</div>
+            }
+            @if (interval.errors.pattern && !interval.errors.min) {
+              <div translate>Integer only.</div>
+            }
+          </div>
+        }
+      </div>
+    }
+  </div>
+  <div class="float-right mb-4" role="group" aria-label="Buttons">
+    <p-button class="mr-1" [label]="'Cancel'|translate" [outlined]="true" severity="danger" (onClick)="onCancel()" />
+    <p-button type="submit" [label]="'Save'|translate" (onClick)="onSubmit()" [disabled]="exceptionForm.invalid" />
+  </div>
+</form>
diff --git a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.spec.ts b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.spec.ts
index e9055f310..607395d87 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.spec.ts
+++ b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.spec.ts
@@ -19,7 +19,6 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { LOCALE_ID } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
 import { AppModule } from '../../../../app.module';
 import { ExceptionDatesEditComponent } from './exception-dates-edit.component';
 
@@ -35,7 +34,6 @@ describe('ExceptionDatesEditComponent', () => {
         TranslateModule.forRoot()
       ],
       providers: [
-        BsModalRef,
         { provide: LOCALE_ID, useValue: 'en-US' }
       ]
     })
diff --git a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.ts b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.ts
index a7d19a3c3..28cc0ccc7 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.ts
+++ b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-edit/exception-dates-edit.component.ts
@@ -14,13 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { UntypedFormArray, UntypedFormGroup, Validators } from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { Subject } from 'rxjs';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { LibraryExceptionFormService } from '../library-exception-form.service';
 
 @Component({
@@ -28,39 +24,36 @@ import { LibraryExceptionFormService } from '../library-exception-form.service';
   templateUrl: './exception-dates-edit.component.html',
   styles: []
 })
-export class ExceptionDatesEditComponent implements OnInit {
+export class ExceptionDatesEditComponent implements OnInit, OnDestroy {
+
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private form: LibraryExceptionFormService = inject(LibraryExceptionFormService);
 
-  @Input() exceptionDate: any;
-  value = new Subject();
   public exceptionForm: UntypedFormGroup;
 
-  constructor(
-    public localeService: BsLocaleService,
-    public bsModalRef: BsModalRef,
-    public form: LibraryExceptionFormService,
-    private translate: TranslateService
-  ) {
+  ngOnInit() {
     this.form.build();
     this.exceptionForm = this.form.form;
-    this.localeService.use(this.translate.currentLang);
+    const { exceptionDate } = this.dynamicDialogConfig.data;
+    if (exceptionDate) {
+      this.form.populate(exceptionDate);
+    }
   }
 
-  ngOnInit() {
-    if (this.exceptionDate) {
-      this.form.populate(this.exceptionDate);
-    }
+  ngOnDestroy(): void {
+    this.dynamicDialogRef.destroy();
   }
 
   onSubmit() {
-    this.bsModalRef.hide();
-    this.value.next(this.form.getValue());
+    this.dynamicDialogRef.close(this.form.getValue());
   }
 
-  onCancel() {
-    this.bsModalRef.hide();
+  onCancel(): void {
+    this.dynamicDialogRef.close();
   }
 
-  onPeriodChange(event) {
+  onPeriodChange(event): void {
     const { target } = event;
     const value = target.value === 'true';
     this.form.is_period.setValue(value);
@@ -72,13 +65,13 @@ export class ExceptionDatesEditComponent implements OnInit {
     }
   }
 
-  onDateStatusChange(event) {
+  onDateStatusChange(event): void {
     const { target } = event;
     const value = target.value === 'true';
     this.form.is_open.setValue(value);
   }
 
-  onRepeatChange(repeat) {
+  onRepeatChange(repeat): void {
     if (repeat) {
       this.form.interval.setValue(1);
       this.form.interval.setValidators([
diff --git a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.html b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.html
index 60ec4da12..bcf72e273 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.html
+++ b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.html
@@ -17,9 +17,9 @@
 
 <div class="clearfix">
   <div class="mt-2 mb-2 float-right">
-    <button type="button" class="btn btn-outline-primary btn-sm" (click)="addException()">
-      <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} ...
-    </button>
+    <p-button [outlined]="true" (onClick)="addException()">
+      <i class="fa fa-plus-square-o mr-1"></i> {{ 'Add' | translate }} …
+    </p-button>
   </div>
 </div>
 
diff --git a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.ts b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.ts
index 66cba3e6f..f9206db00 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.ts
+++ b/projects/admin/src/app/record/custom-editor/libraries/exception-dates-list/exception-dates-list.component.ts
@@ -14,12 +14,11 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-
-import { ChangeDetectorRef, Component, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, Input } from '@angular/core';
 import { ExceptionDates, Library } from '@app/admin/classes/library';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { ExceptionDatesEditComponent } from '../exception-dates-edit/exception-dates-edit.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'admin-libraries-exception-dates-list',
@@ -27,43 +26,47 @@ import { ExceptionDatesEditComponent } from '../exception-dates-edit/exception-d
 })
 export class ExceptionDatesListComponent {
 
-  bsModalRef: BsModalRef;
+  private dialogService: DialogService = inject(DialogService);
+  private changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);
+  private translateService: TranslateService = inject(TranslateService);
 
-  @Input() exceptionDates;
+  private dynamicDialogRef: DynamicDialogRef | undefined;
 
-  constructor(
-    private modalService: BsModalService,
-    private ref: ChangeDetectorRef
-    ) { }
+  @Input() exceptionDates = [];
 
-  addException() {
-    this.bsModalRef = this.modalService.show(ExceptionDatesEditComponent, {
-      initialState: {exceptionDate: null},
-      class: 'modal-lg',
-      backdrop: 'static'
+  addException(): void {
+    this.dynamicDialogRef = this.dialogService.open(ExceptionDatesEditComponent, {
+      header: this.translateService.instant('Exception'),
+      width: '50vw',
+      data: {
+        exceptionDate: null
+      }
     });
-
-    this.bsModalRef.content.value.subscribe(value => {
-      this.exceptionDates.push(value);
-      // force ui update
-      this.ref.markForCheck();
+    this.dynamicDialogRef.onClose.subscribe((value?: any) => {
+      if (value) {
+        this.exceptionDates.push(value);
+        // force ui update
+        this.changeDetectorRef.markForCheck();
+      }
     });
   }
 
-  editException(index) {
-    this.bsModalRef = this.modalService.show(ExceptionDatesEditComponent, {
-      initialState: {exceptionDate: this.exceptionDates[index]},
-      class: 'modal-lg',
-      backdrop: 'static'
+  editException(index: number): void {
+    this.dynamicDialogRef = this.dialogService.open(ExceptionDatesEditComponent, {
+      data: {
+        exceptionDate: this.exceptionDates[index]
+      }
     });
-    this.bsModalRef.content.value.subscribe(value => {
-      this.exceptionDates[index] = value;
-      // force ui update
-      this.ref.markForCheck();
+    this.dynamicDialogRef.onClose.subscribe((value?: any) => {
+      if (value) {
+        this.exceptionDates[index] = value;
+        // force ui update
+        this.changeDetectorRef.markForCheck();
+      }
     });
   }
 
-  deleteException(index) {
+  deleteException(index: number): void {
     this.exceptionDates.splice(index, 1);
   }
 
diff --git a/projects/admin/src/app/record/custom-editor/libraries/library-exception-form.service.ts b/projects/admin/src/app/record/custom-editor/libraries/library-exception-form.service.ts
index 93a9b8038..33b5fbaed 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/library-exception-form.service.ts
+++ b/projects/admin/src/app/record/custom-editor/libraries/library-exception-form.service.ts
@@ -14,8 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-
 import { Injectable } from '@angular/core';
 import { UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
 import { TimeValidator } from '@rero/ng-core';
@@ -29,7 +27,7 @@ export class LibraryExceptionFormService {
 
   public form;
 
-  constructor( private fb: UntypedFormBuilder ) {
+  constructor(private fb: UntypedFormBuilder) {
     this.build();
   }
 
diff --git a/projects/admin/src/app/record/custom-editor/libraries/library-form.service.ts b/projects/admin/src/app/record/custom-editor/libraries/library-form.service.ts
index 0f0320b20..8293c8df3 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/library-form.service.ts
+++ b/projects/admin/src/app/record/custom-editor/libraries/library-form.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,11 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { RecordService, TimeValidator } from '@rero/ng-core';
 import { forkJoin, Subject } from 'rxjs';
-import { AcquisitionInformations, Library, NotificationSettings, RolloverSettings } from '../../../classes/library';
+import { AcquisitionInformations, Library, RolloverSettings } from '../../../classes/library';
 import { NotificationType } from '../../../classes/notification';
 import { WeekDays } from '../../../classes/week-days';
 
@@ -28,6 +28,9 @@ import { WeekDays } from '../../../classes/week-days';
 })
 export class LibraryFormService {
 
+  private fb: UntypedFormBuilder = inject(UntypedFormBuilder);
+  private recordService: RecordService = inject(RecordService);
+
   // SERVICE ATTRIBUTES =======================================================
   /** Angular form group */
   public form;
@@ -43,7 +46,7 @@ export class LibraryFormService {
   /** Rollover account transfer */
   private rolloverAccountTransferOptions = [];
   /** Default account transfer */
-  private accountDefaultTransfertOption = 'rollover_no_transfer';
+  private accountDefaultTransferOption = 'rollover_no_transfer';
 
   // GETTER & SETTER ==========================================================
   get name(): AbstractControl { return this.form.get('name'); }
@@ -58,38 +61,28 @@ export class LibraryFormService {
   get rollover_settings(): AbstractControl { return this.form.get('rollover_settings'); }
   get account_transfer_options() { return this.rolloverAccountTransferOptions; }
 
-  // SERVICE CONSTRUCTOR & HOOKS ==============================================
-  /** Constructor
-   * @param _fb - FormBuilder
-   * @param _recordService - RecordService
-   */
-  constructor(
-    private _fb: UntypedFormBuilder,
-    private _recordService: RecordService
-  ) { }
-
   // SERVICE FUNCTIONS ========================================================
   /** Build the form structure */
   build(): void {
-    this.form = this._fb.group({
+    this.form = this.fb.group({
       name: ['', [Validators.required, Validators.minLength(4)]],
       address: ['', Validators.minLength(4)],
       email: ['', Validators.email],
       code: ['', [Validators.required]],
       communication_language: ['', Validators.required],
 
-      opening_hours: this._fb.array([]),
-      notification_settings: this._fb.array([]),
-      acquisition_settings: this._fb.group({
+      opening_hours: this.fb.array([]),
+      notification_settings: this.fb.array([]),
+      acquisition_settings: this.fb.group({
         shipping_informations: this._buildAcqInformation(),
         billing_informations: this._buildAcqInformation()
       }),
-      serial_acquisition_settings: this._fb.group({
+      serial_acquisition_settings: this.fb.group({
         shipping_informations: this._buildAcqInformation(),
         billing_informations: this._buildAcqInformation()
       }),
-      rollover_settings: this._fb.group({
-        account_transfer: [this.accountDefaultTransfertOption, [Validators.required]]
+      rollover_settings: this.fb.group({
+        account_transfer: [this.accountDefaultTransferOption, [Validators.required]]
       })
     });
     this._initializeOpeningHours();
@@ -103,8 +96,8 @@ export class LibraryFormService {
 
   /** Method to create the form and get default available values */
   create() {
-    const notificationSchema$ = this._recordService.getSchemaForm('notifications');
-    const librarySchema$ = this._recordService.getSchemaForm('libraries');
+    const notificationSchema$ = this.recordService.getSchemaForm('notifications');
+    const librarySchema$ = this.recordService.getSchemaForm('libraries');
     forkJoin([librarySchema$, notificationSchema$]).subscribe(([libSchema, notifSchema]) => {
       this.availableCommunicationLanguages = libSchema.schema.properties.communication_language.enum;
       this.countryList = libSchema.schema.properties.acquisition_settings.properties.shipping_informations.
@@ -180,7 +173,7 @@ export class LibraryFormService {
     const days = Object.keys(WeekDays);
     const hours = this.form.get('opening_hours');
     for (let step = 0; step < 7; step++) {
-      hours.push(this._buildOpeningHours(false, days[step], this._fb.array([])));
+      hours.push(this._buildOpeningHours(false, days[step], this.fb.array([])));
     }
     this._setOpeningHours(openingHours);
   }
@@ -213,7 +206,7 @@ export class LibraryFormService {
    * @param times - times array
    */
   private _buildOpeningHours(isOpen: boolean, day, times): UntypedFormGroup {
-    return this._fb.group({
+    return this.fb.group({
       is_open: [isOpen],
       day: [day],
       times
@@ -229,7 +222,7 @@ export class LibraryFormService {
    */
   private _buildTimes(startTime = '00:01', endTime = '23:59'): UntypedFormGroup {
     const regex = '^(?!(0:00)|(00:00)$)([0-9]|0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$';
-    return this._fb.group({
+    return this.fb.group({
       start_time: [startTime, {
         validators: [
           Validators.required,
@@ -260,11 +253,11 @@ export class LibraryFormService {
 
   /** Build structure to store acquisition information into the form */
   private _buildAcqInformation(): UntypedFormGroup {
-    return this._fb.group({
+    return this.fb.group({
       name: ['', Validators.minLength(3)],
       email: ['', Validators.email],
       phone: ['', Validators.minLength(6)],
-      address: this._fb.group({
+      address: this.fb.group({
         street: ['', Validators.minLength(3)],
         zip_code: ['', Validators.minLength(3)],
         city: ['', Validators.minLength(2)],
@@ -332,7 +325,7 @@ export class LibraryFormService {
     if ([NotificationType.AVAILABILITY].includes(settingType)) {
       model.delay = ['',  Validators.max(720)];
     }
-    return this._fb.group(model);
+    return this.fb.group(model);
   }
 
   /**
diff --git a/projects/admin/src/app/record/custom-editor/libraries/library.component.html b/projects/admin/src/app/record/custom-editor/libraries/library.component.html
index 97524ec74..f361f4ab8 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/library.component.html
+++ b/projects/admin/src/app/record/custom-editor/libraries/library.component.html
@@ -54,7 +54,7 @@ <h1 translate>Library</h1>
               <div class="col">
                 <input pInputText id="name" formControlName="name"
                         class="w-100" [class.ng-invalid]="name.invalid"
-                        placeholder="{{ 'Please insert a name' | translate }}"
+                        [placeholder]="'Please insert a name'|translate"
                         required
                 >
                 @if (name.invalid && (name.dirty || name.touched)) {
@@ -275,7 +275,8 @@ <h1 translate>Library</h1>
                         formControlName="delay"
                         [inputId]="$any(setting).controls.type.value + '-delay'"
                         [min]="0"
-                        pTooltip="{{ 'Sending how many minutes after the item is available' | translate }}" showDelay="1000"
+                        pTooltip="{{ 'Sending how many minutes after the item is available' | translate }}"
+                        tooltipPosition="top"
                       ></p-inputNumber>
                     </div>
                   }
diff --git a/projects/admin/src/app/record/custom-editor/libraries/library.component.ts b/projects/admin/src/app/record/custom-editor/libraries/library.component.ts
index c0ccac52c..517d5c3e0 100644
--- a/projects/admin/src/app/record/custom-editor/libraries/library.component.ts
+++ b/projects/admin/src/app/record/custom-editor/libraries/library.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,16 +15,15 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Location } from '@angular/common';
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { UntypedFormArray, UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { CountryCodeTranslatePipe } from '@app/admin/pipe/country-code-translate.pipe';
 import { TranslateService } from '@ngx-translate/core';
-import { AbstractCanDeactivateComponent, ApiService, RecordService, UniqueValidator, cleanDictKeys, removeEmptyValues } from '@rero/ng-core';
+import { AbstractCanDeactivateComponent, ApiService, cleanDictKeys, CONFIG, RecordService, removeEmptyValues, UniqueValidator } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
 import { Subscription } from 'rxjs';
 import { Library } from '../../../classes/library';
 import { NotificationType } from '../../../classes/notification';
@@ -37,6 +36,17 @@ import { LibraryFormService } from './library-form.service';
 })
 export class LibraryComponent extends AbstractCanDeactivateComponent implements OnInit, OnDestroy {
 
+  private recordService: RecordService = inject(RecordService);
+  private libraryForm: LibraryFormService = inject(LibraryFormService);
+  private route: ActivatedRoute = inject(ActivatedRoute);
+  private router: Router = inject(Router);
+  private userService: UserService = inject(UserService);
+  private apiService: ApiService = inject(ApiService);
+  private translateService: TranslateService = inject(TranslateService);
+  private location: Location = inject(Location);
+  private countryCodeTranslatePipe: CountryCodeTranslatePipe = inject(CountryCodeTranslatePipe);
+  private messageService: MessageService = inject(MessageService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** The current library. */
   public library: Library;
@@ -80,35 +90,6 @@ export class LibraryComponent extends AbstractCanDeactivateComponent implements
   get rolloverSettings() { return this.libraryForm.rollover_settings as UntypedFormGroup; }
 
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param recordService - ng-core eventForm
-   * @param libraryForm - LibraryFormService
-   * @param route - angular ActivatedRoute
-   * @param router - angular Router
-   * @param userService - ng-core UserService
-   * @param apiService - ng-core ApiService
-   * @param toastService - ToastrService
-   * @param translateService - ngx-translate TranslateService
-   * @param location - angular Location
-   * @param countryCodeTranslatePipe - CountryCodeTranslatePipe
-   */
-  constructor(
-    private recordService: RecordService,
-    private libraryForm: LibraryFormService,
-    private route: ActivatedRoute,
-    private router: Router,
-    private userService: UserService,
-    private apiService: ApiService,
-    private toastService: ToastrService,
-    private translateService: TranslateService,
-    private location: Location,
-    private countryCodeTranslatePipe: CountryCodeTranslatePipe
-  ) {
-    super();
-  }
-
   /** NgOnInit hook. */
   ngOnInit() {
     this.route.params.subscribe( (params) => {
@@ -161,30 +142,46 @@ export class LibraryComponent extends AbstractCanDeactivateComponent implements
     if (this.library.pid) {
       this.recordService
         .update('libraries', this.library.pid, cleanDictKeys(this.library))
-        .subscribe(
-          () => {
-            this.toastService.success(
-              this.translateService.instant('Record Updated!'),
-              this.translateService.instant('libraries')
-            );
+        .subscribe({
+          next: () => {
+            this.messageService.add({
+              severity: 'success',
+              summary: this.translateService.instant('libraries'),
+              detail: this.translateService.instant('Record Updated!'),
+              life: CONFIG.MESSAGE_LIFE
+            });
             this.router.navigate(['records', 'libraries', 'detail', this.library.pid]);
           },
-          error => this.toastService.error(error.title, this.translateService.instant('libraries'))
-        );
+          error: (error) => this.messageService.add({
+            severity: 'error',
+            summary: this.translateService.instant('libraries'),
+            detail: error.title,
+            sticky: true,
+            closable: true
+          })
+      });
     } else {
       this.library.organisation = { $ref: this.apiService.getRefEndpoint('organisations', this.organisationPid) };
       this.recordService
         .create('libraries', cleanDictKeys(this.library))
-        .subscribe(
-          record => {
-            this.toastService.success(
-              this.translateService.instant('Record created!'),
-              this.translateService.instant('libraries')
-            );
+        .subscribe({
+          next: (record) => {
+            this.messageService.add({
+              severity: 'success',
+              summary: this.translateService.instant('libraries'),
+              detail: this.translateService.instant('Record created!'),
+              life: CONFIG.MESSAGE_LIFE
+            });
             this.router.navigate(['records', 'libraries', 'detail', record.metadata.pid]);
           },
-          error => this.toastService.error(error.title, this.translateService.instant('libraries'))
-        );
+          error: (error) => this.messageService.add({
+            severity: 'error',
+            summary: this.translateService.instant('libraries'),
+            detail: error.title,
+            sticky: true,
+            closable: true
+          })
+      });
     }
   }
 
diff --git a/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.html b/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.html
index fc6495ac2..c246790ea 100644
--- a/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.html
+++ b/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.html
@@ -25,7 +25,7 @@ <h4 id="dialog-sizes-name2" class="modal-title pull-left" translate>Personal inf
         </ng-core-search-input>
       </form>
       <button type="button" id="user-editor-delete-button" class="btn btn-outline-danger btn-sm mr-1"
-        (click)="bsModalRef.hide()">
+        (click)="closeDialog()">
         <i class="fa fa-times"></i>
         {{ 'Cancel' | translate }}
       </button>
diff --git a/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.spec.ts b/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.spec.ts
index fe312571e..cd6049006 100644
--- a/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.spec.ts
+++ b/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.spec.ts
@@ -20,8 +20,6 @@ import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { TranslateModule } from '@ngx-translate/core';
-import { BsModalRef, ModalModule } from 'ngx-bootstrap/modal';
-import { ToastrModule } from 'ngx-toastr';
 import { UserIdEditorComponent } from './user-id-editor.component';
 
 
@@ -34,14 +32,9 @@ describe('UserIdEditorComponent', () => {
       imports: [
         HttpClientModule,
         TranslateModule.forRoot({}),
-        ModalModule.forRoot(),
         ReactiveFormsModule,
-        ToastrModule.forRoot()
       ],
       declarations: [ UserIdEditorComponent ],
-      providers: [
-        BsModalRef
-      ],
       schemas: [
         CUSTOM_ELEMENTS_SCHEMA
       ]
diff --git a/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.ts b/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.ts
index d6ae2bd56..6ce20a1e1 100644
--- a/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.ts
+++ b/projects/admin/src/app/record/custom-editor/user-id-editor/user-id-editor.component.ts
@@ -14,16 +14,14 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
-import { TranslateService } from '@ngx-translate/core';
-import { JSONSchema7, RecordService, processJsonSchema, removeEmptyValues } from '@rero/ng-core';
+import { CONFIG, JSONSchema7, NgCoreTranslateService, processJsonSchema, RecordService, removeEmptyValues } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { of } from 'rxjs';
 import { debounceTime, map, switchMap, tap } from 'rxjs/operators';
 
@@ -33,8 +31,15 @@ import { debounceTime, map, switchMap, tap } from 'rxjs/operators';
 })
 export class UserIdEditorComponent implements OnInit {
 
-  /** current query to import a user */
-  searchText: string = null;
+  private messageService: MessageService = inject(MessageService);
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private recordService: RecordService = inject(RecordService);
+  private formlyJsonschema: FormlyJsonschema = inject(FormlyJsonschema);
+  private translateService: NgCoreTranslateService = inject(NgCoreTranslateService);
+  private userService: UserService = inject(UserService);
+
+  searchText: string = '';
 
   /** current User id in the invenio db */
   userID: string = null;
@@ -57,31 +62,12 @@ export class UserIdEditorComponent implements OnInit {
   /** Password field */
   passwordField: FormlyFieldConfig;
 
-  /**
-   * Constructor
-   *
-   * @param recordService - ng-core RecordService
-   * @param bsModalRef - ngx-bootstrap BsModalRef
-   * @param formlyJsonschema - ngx-formly FormlyJsonschema
-   * @param toastService - ngx-toastr ToastrService
-   * @param translateService - ngx-translate TranslateService
-   * @param userService - rero/shared UserService
-   */
-  constructor(
-    private recordService: RecordService,
-    public bsModalRef: BsModalRef,
-    private formlyJsonschema: FormlyJsonschema,
-    private toastService: ToastrService,
-    private translateService: TranslateService,
-    private userService: UserService
-  ) {
-    this.form = new UntypedFormGroup({});
-  }
-
   /**
    * Get the JSONSchema and add validators.
    */
   ngOnInit(): void {
+    this.form = new UntypedFormGroup({});
+    this.userID = this.dynamicDialogConfig?.data?.userID;
     this.recordService.getSchemaForm('users').pipe(
       tap(
         schema => {
@@ -157,9 +143,12 @@ export class UserIdEditorComponent implements OnInit {
     this.recordService.getRecords('users', query).pipe(
       map((res: any) => {
         if (res.hits.hits.length === 0) {
-          this.toastService.warning(
-            this.translateService.instant('User not found.')
-          );
+          this.messageService.add({
+            severity: 'warn',
+            summary: this.translateService.instant('User'),
+            detail: this.translateService.instant('User not found.'),
+            life: CONFIG.MESSAGE_LIFE
+          })
           return null;
         }
 
@@ -177,15 +166,21 @@ export class UserIdEditorComponent implements OnInit {
           const patronAccount = patronAccounts.filter((ptrn: any) => ptrn.organisation.pid === currentOrgPid).pop();
           // user has already an account in the logged librarian organisation
           if (patronAccount != null) {
-            this.toastService.info(
-              this.translateService.instant('This person is already registered in your organisation.')
-            );
+            this.messageService.add({
+              severity: 'info',
+              summary: this.translateService.instant('User'),
+              detail: this.translateService.instant('This person is already registered in your organisation.'),
+              life: CONFIG.MESSAGE_LIFE
+            });
             return of(null);
           }
         }
-        this.toastService.info(
-          this.translateService.instant('The personal data has been successfully linked to this patron.')
-        );
+        this.messageService.add({
+          severity: 'info',
+          summary: this.translateService.instant('User'),
+          detail: this.translateService.instant('The personal data has been successfully linked to this patron.'),
+          life: CONFIG.MESSAGE_LIFE
+        });
         this.loadedUserID = model.id;
         this.passwordField.props.required = false;
         this.form.reset();
@@ -194,6 +189,10 @@ export class UserIdEditorComponent implements OnInit {
     ).subscribe();
   }
 
+  closeDialog(value?: string): void {
+    this.dynamicDialogRef.close(value);
+  }
+
   /**
    * Submit the data if the form is valid.
    *
@@ -202,9 +201,13 @@ export class UserIdEditorComponent implements OnInit {
   submit(): void {
     this.form.updateValueAndValidity();
     if (this.form.valid === false) {
-      this.toastService.error(
-        this.translateService.instant('The form contains errors.')
-      );
+      this.messageService.add({
+        severity: 'error',
+        summary: this.translateService.instant('User'),
+        detail: this.translateService.instant('The form contains errors.'),
+        sticky: true,
+        closable: true
+      });
       return;
     }
 
@@ -215,12 +218,12 @@ export class UserIdEditorComponent implements OnInit {
     if (this.userID != null) {
       data.pid = this.userID;
       this.recordService.update('users', data.pid, data).subscribe(() => {
-        this.bsModalRef.hide();
+        this.closeDialog(this.userID);
       });
     } else {
       this.recordService.create('users', data).subscribe((res) => {
         this.userID = res.id;
-        this.bsModalRef.hide();
+        this.closeDialog(this.userID);
       });
     }
   }
diff --git a/projects/admin/src/app/record/detail-view/address-type/address-type.component.html b/projects/admin/src/app/record/detail-view/address-type/address-type.component.html
index 8cef3431e..199e559ce 100644
--- a/projects/admin/src/app/record/detail-view/address-type/address-type.component.html
+++ b/projects/admin/src/app/record/detail-view/address-type/address-type.component.html
@@ -17,72 +17,72 @@
 <article>
   <section class="m-2 p-2">
     <div class="p-2">
-      <dl class="row mb-0">
+      <dl class="grid mb-0">
         <!-- CONTACT_PERSON -->
-        @if (addressType.contact_person) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+        @if (addressType().contact_person) {
+          <dt class="co-3 label-title" translate>
             Contact person
           </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ addressType.contact_person }}
+          <dd class="col-7 mb-0">
+            {{ addressType().contact_person }}
           </dd>
         }
         <!-- STREET -->
-        @if (addressType.street) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+        @if (addressType().street) {
+          <dt class="col-3 label-title" translate>
             Street
           </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ addressType.street }}
+          <dd class="col-7 mb-0">
+            {{ addressType().street }}
           </dd>
         }
         <!-- POSTAL_CODE -->
-        @if (addressType.postal_code) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+        @if (addressType().postal_code) {
+          <dt class="col-3 label-title" translate>
             Postal code
           </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ addressType.postal_code }}
+          <dd class="col-7 mb-0">
+            {{ addressType().postal_code }}
           </dd>
         }
         <!-- CITY -->
-        @if (addressType.city) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+        @if (addressType().city) {
+          <dt class="col-3 offset-md-0 label-title" translate>
             City
           </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ addressType.city }}
+          <dd class="col-7 mb-0">
+            {{ addressType().city }}
           </dd>
         }
         <!-- COUNTRY -->
-        @if (addressType.country) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+        @if (addressType().country) {
+          <dt class="col-3 label-title" translate>
             Country
           </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ addressType.country }}
+          <dd class="col-7 mb-0">
+            {{ addressType().country }}
           </dd>
         }
       </dl>
     </div>
     <div class="p-2">
-      <dl class="row mb-0">
+      <dl class="grid mb-0">
         <!-- PHONE -->
-        @if (addressType.phone) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+        @if (addressType().phone) {
+          <dt class="col-3 label-title" translate>
             Phone
           </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ addressType.phone }}
+          <dd class="col-7 mb-0">
+            {{ addressType().phone }}
           </dd>
         }
         <!-- EMAIL -->
-        @if (addressType.email) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+        @if (addressType().email) {
+          <dt class="col-3 label-title" translate>
             Email
           </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ addressType.email }}
+          <dd class="col-7 mb-0">
+            {{ addressType().email }}
           </dd>
         }
       </dl>
diff --git a/projects/admin/src/app/record/detail-view/address-type/address-type.component.ts b/projects/admin/src/app/record/detail-view/address-type/address-type.component.ts
index 5eeefbf1a..d0d1fa9c8 100644
--- a/projects/admin/src/app/record/detail-view/address-type/address-type.component.ts
+++ b/projects/admin/src/app/record/detail-view/address-type/address-type.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,8 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, Input } from '@angular/core';
+import { Component, input } from '@angular/core';
 import { AddressType } from '../../../classes/address-type';
 
 @Component({
@@ -25,6 +24,6 @@ import { AddressType } from '../../../classes/address-type';
 })
 export class AddressTypeComponent {
 
-  @Input() addressType: AddressType;
+  addressType = input<AddressType>();
 
 }
diff --git a/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.ts b/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.ts
index b259c9358..b3c50bb0e 100644
--- a/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/circ-policy-detail-view/circ-policy-detail-view.component.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { Observable } from 'rxjs';
 import { OrganisationService } from '../../../service/organisation.service';
 
@@ -26,6 +26,8 @@ import { OrganisationService } from '../../../service/organisation.service';
 
 export class CircPolicyDetailViewComponent implements OnInit, OnDestroy {
 
+  private organisationService: OrganisationService = inject(OrganisationService);
+
   // COMPONENT ATTRIBUTES ======================================================
   /** The observable resolving record data */
   record$: Observable<any>;
@@ -56,15 +58,6 @@ export class CircPolicyDetailViewComponent implements OnInit, OnDestroy {
     return this.record && this.record.metadata.hasOwnProperty('checkout_duration');
   }
 
-
-
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param organisationService - OrganisationService
-   */
-  constructor(private organisationService: OrganisationService) {}
-
   /** On init hook */
   ngOnInit() {
     this._recordObs = this.record$.subscribe(record => {
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.html
index 4feacc4e6..937c74b4c 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.html
@@ -14,42 +14,37 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="modal-header">
-  <h4 class="modal-title pull-left" translate>Import</h4>
-</div>
-<div class="modal-body">
-  @if (records.length > 0 || warning) {
-    <h5>{{ 'This document may already exist' | translate }}</h5>
-  }
-  @if (records.length > 0) {
-    <ul class="list-unstyled mb-0">
-      @for (record of records; track record) {
-        <li>
-          <a [routerLink]="['/records', 'documents', 'detail', $any(record).metadata.pid]" (click)="close()">
-            @if ($any(record).metadata.ui_title_text_responsibility) {
-              {{ $any(record).metadata.ui_title_text_responsibility }}
-            } @else {
-              {{ 'Document' | translate }}
-            }
-          </a>
-        </li>
-      }
-    </ul>
-  }
-  @if (warning) {
-    <div class="mt-3 row">
-      <div class="col-1">
-        <i class="fa fa-exclamation-circle fa-2x text-danger" aria-hidden="true"></i>
-      </div>
-      <div class="col-11">
-        <p class="mb-2 font-weight-bold" translate>Too many identifiers: not all identifiers have been verified.</p>
-        <p class="mb-2 font-weight-bold" translate>Please make sure that this document does not already exist before importing.</p>
-      </div>
+@if (records.length > 0 || warning) {
+  <h5 translate>This document may already exist</h5>
+}
+@if (records.length > 0) {
+  <ul class="list-unstyled mb-0">
+    @for (record of records; track record) {
+      <li>
+        <a [routerLink]="['/records', 'documents', 'detail', $any(record).metadata.pid]" (click)="cancel()">
+          @if ($any(record).metadata.ui_title_text_responsibility) {
+            {{ $any(record).metadata.ui_title_text_responsibility }}
+          } @else {
+            {{ 'Document' | translate }}
+          }
+        </a>
+      </li>
+    }
+  </ul>
+}
+@if (warning) {
+  <div class="grid mt-3">
+    <div class="col-fixed" style="width:30px">
+      <i class="fa fa-exclamation-circle fa-2x text-danger" aria-hidden="true"></i>
     </div>
-  }
-  <div class="font-weight-bold mt-3" translate>Do you really want to import this document?</div>
-</div>
-<div class="modal-footer">
-  <button id="modal-cancel-button" type="button" class="btn btn-light" (click)="decline()" translate>Cancel</button>
-  <button id="modal-confirm-button" type="button" class="btn btn-primary" (click)="confirm()" translate>Import</button>
+    <div class="col">
+      <p class="mb-2 font-weight-bold" translate>Too many identifiers: not all identifiers have been verified.</p>
+      <p class="mb-2 font-weight-bold" translate>Please make sure that this document does not already exist before importing.</p>
+    </div>
+  </div>
+}
+<div class="font-weight-bold mt-3" translate>Do you really want to import this document?</div>
+<div class="flex w-full justify-content-end">
+  <p-button class="mr-2" [label]="'Cancel'|translate" severity="secondary" (click)="cancel()" />
+  <p-button [label]="'Import'|translate" (click)="confirm()" />
 </div>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.ts
index ff911630a..c575ffb70 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/dialog-import/dialog-import.component.ts
@@ -14,15 +14,17 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component } from '@angular/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
-import { Subject } from 'rxjs';
+import { Component, inject, OnInit } from '@angular/core';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
 @Component({
   selector: 'admin-dialog-import',
   templateUrl: './dialog-import.component.html'
 })
-export class DialogImportComponent {
+export class DialogImportComponent implements OnInit {
+
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
 
   /** Available record */
   records: any[];
@@ -30,29 +32,17 @@ export class DialogImportComponent {
   /** Show warning message */
   warning: boolean = false;
 
-  /** Observable for action */
-  confirmation$: Subject<boolean> = new Subject<boolean>();
-
-  /**
-   * Constructor
-   * @param bsModalRef - BsModalRef
-   */
-  constructor(private bsModalRef: BsModalRef) {}
-
-  /** Confirm action */
-  confirm() {
-    this.confirmation$.next(true);
-    this.close();
+  ngOnInit(): void {
+      this.records = this.dynamicDialogConfig?.data?.records || [];
+      // this.warning = this.dynamicDialogConfig?.data?.warning || false;
+      this.warning = true;
   }
 
-  /** Cancel action */
-  decline() {
-    this.confirmation$.next(false);
-    this.close();
+  confirm():void {
+    this.dynamicDialogRef.close(true);
   }
 
-  /** Close modal box */
-  close() {
-    this.bsModalRef.hide();
+  cancel(): void {
+    this.dynamicDialogRef.close();
   }
 }
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.ts
index d30d6e3e7..4094723bf 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -24,6 +24,8 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class DocumentDescriptionComponent implements OnInit {
 
+  public translateService: TranslateService = inject(TranslateService);
+
   /** Document record */
   @Input() record: any;
   /** Cartographic attributes */
@@ -51,12 +53,6 @@ export class DocumentDescriptionComponent implements OnInit {
     return this.translateService.currentLang;
   }
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  constructor(public translateService: TranslateService) {}
-
   /** On init hook */
   ngOnInit(): void {
     this.processCartographicAttributes();
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html
index 4bdfec91c..1d4842e0d 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html
@@ -17,21 +17,19 @@
 -->
 @if (record) {
 <!-- HEADER -->
-<header class="row mt-5 mb-3">
-  <div class="col-lg-2 d-sm-block text-center">
+<header class="grid mt-5 mb-3">
+  <div class="col-2 text-center">
     <shared-thumbnail [record]="record"></shared-thumbnail>
   </div>
-  <div class="col-lg-10">
+  <div class="col-10">
     <!-- ADMIN METADATA -->
-    @if (record.metadata.adminMetadata &&
-    (record.metadata.adminMetadata.encodingLevel !== 'Full level' ||
-    record.metadata.adminMetadata.note)) {
-    <div class="p-2 alert alert-warning mb-2">
-      {{ "Encoding level" | translate }}:
-      {{ record.metadata.adminMetadata.encodingLevel | translate }}. @if
-      (record.metadata.adminMetadata.note) {
-      {{ record.metadata.adminMetadata.note | join : ". " }}. }
-    </div>
+    @if (recordMessage.length > 0) {
+    <p-messages
+      [value]="recordMessage"
+      [enableService]="false"
+      [closable]="false"
+      showTransitionOptions="0ms"
+    />
     }
 
     <!-- TITLE -->
@@ -256,136 +254,80 @@ <h3 id="{{ 'doc-altgr-title-' + i }}">{{ altgr_title }}</h3>
     }
   </div>
 </header>
-
 <!-- END OF HEADER -->
+
 <!-- TABS -->
-<div class="mt-2">
-  <tabset>
-    <!-- GET TAB -->
-    @if (record.metadata.pid) {
-    <tab #tabGet="tab" id="documents-get-tab" tabOrder="1" [active]="true">
-      <ng-template tabHeading>
-        <i class="fa fa-list-ul mr-1"></i>{{ "Get" | translate }}
-      </ng-template>
-      <!-- FILES -->
-      @if (tabGet.active) {
-      <div class="mt-2">
-        <!-- FILES -->
-        <shared-doc-files
-          [documentPid]="record.metadata.pid"
-        ></shared-doc-files>
-      </div>
-      }
-      <div class="mt-2">
-        <!-- HOLDINGS -->
-        <admin-holding-organisation
-          [document]="record"
-        ></admin-holding-organisation>
-      </div>
-    </tab>
-    }
-    <!-- END OF GET TAB -->
-    <!-- DESCRIPTION TAB -->
-    <tab
-      id="documents-description-tab"
-      tabOrder="2"
-      [active]="!record.metadata.pid"
-    >
-      <ng-template tabHeading>
-        <i class="fa fa-bars mr-1"></i> {{ "Description" | translate }}
+<p-tabView>
+  <!-- GET TAB -->
+  @if (record.metadata.pid) {
+    <p-tabPanel>
+      <ng-template pTemplate="header">
+        <i class="fa fa-list-ul mr-1"></i> {{ "Get" | translate }}
       </ng-template>
-      <div class="mt-2">
-        <admin-document-description
-          [record]="record"
-        ></admin-document-description>
+      <div class="mb-2">
+        <shared-doc-files [documentPid]="record.metadata.pid" />
       </div>
-    </tab>
-    <!-- END OF DESCRIPTION TAB -->
-    <!-- ENTITIES RELATED -->
-    @if (!record.metadata.harvested && record.metadata.pid) {
-    <tab id="documents-entities-tab" tabOrder="3">
-      <ng-template tabHeading>
+      <admin-holding-organisation [document]="record" />
+    </p-tabPanel>
+  }
+
+  <!-- DESCRIPTION TAB -->
+  <p-tabPanel>
+    <ng-template pTemplate="header">
+      <i class="fa fa-bars mr-1"></i> {{ "Description" | translate }}
+    </ng-template>
+    <admin-document-description [record]="record" />
+  </p-tabPanel>
+
+  <!-- ENTITIES RELATED -->
+  @if (!record.metadata.harvested && record.metadata.pid) {
+    <p-tabPanel>
+      <ng-template pTemplate="header">
         <i class="fa fa-cubes mr-1"></i> {{ "Related Entities" | translate }}
       </ng-template>
-      <div class="mt-2">
-        <admin-entities-related [record]="record"></admin-entities-related>
-      </div>
-    </tab>
-    }
-    <!-- END ENTITIES RELATED -->
-    <!-- LOCAL FIELDS TAB -->
-    @if (!record.metadata.harvested && record.metadata.pid &&
-    showLocalFieldsTab) {
-    <tab id="documents-local-field-tab" tabOrder="4">
-      <ng-template tabHeading>
+      <admin-entities-related [record]="record" />
+    </p-tabPanel>
+  }
+
+  <!-- LOCAL FIELDS TAB -->
+  @if (!record.metadata.harvested && record.metadata.pid && showLocalFieldsTab) {
+    <p-tabPanel>
+      <ng-template pTemplate="header">
         <i class="fa fa-list-ul mr-1"></i> {{ "Local fields" | translate }}
       </ng-template>
-      <div class="mt-2">
-        <admin-local-field
-          [resourceType]="'documents'"
-          [resourcePid]="record.metadata.pid"
-        ></admin-local-field>
-      </div>
-    </tab>
-    }
-    <!-- END OF LOCAL FIELDS TAB -->
-    @if (!record.metadata.harvested && record.metadata.pid && showFilesTab) {
-      <tab #tabFile="tab" id="documents-files-field-tab" tabOrder="5">
-        <ng-template tabHeading>
-          <i class="fa fa-file mr-1"></i> {{ "Files" | translate }}
-        </ng-template>
-        @if (tabFile.active) {
-        <div class="mt-2">
-          <admin-upload-files [pid]="record.metadata.pid"></admin-upload-files>
-        </div>
-        }
-      </tab>
-    }
-    <!-- MARC TAB -->
-    @if (marc$ | async; as marc) {
-    <tab id="documents-marc-tab" tabOrder="6">
-      <ng-template tabHeading>
+      <admin-local-field [resourceType]="'documents'" [resourcePid]="record.metadata.pid" />
+    </p-tabPanel>
+  }
+
+  <!-- FILES TAB -->
+  @if (!record.metadata.harvested && record.metadata.pid && showFilesTab) {
+    <p-tabPanel>
+      <ng-template pTemplate="header">
+        <i class="fa fa-file mr-1"></i> {{ "Files" | translate }}
+      </ng-template>
+      <admin-upload-files [pid]="record.metadata.pid" />
+    </p-tabPanel>
+  }
+
+  <!-- MARC TAB -->
+  @if (marc$ | async; as marc) {
+    <p-tabPanel>
+      <ng-template pTemplate="header">
         <i class="fa fa-list-ul mr-1"></i><span translate>Marc</span>
       </ng-template>
-      <div class="mt-2">
-        <!-- MARC -->
-        <table class="table table-striped table-sm">
-          <tbody>
-            @for(field of marc; track field) {
-            <tr>
-              @if (field | marc; as f) {
-              <th scope="row">{{ f.field }}</th>
+      <p-table [value]="marc" styleClass="p-datatable-striped">
+        <ng-template pTemplate="body" let-field>
+          <tr>
+            @if (field | marc; as f) {
+              <td class="font-bold">{{ f.field }}</td>
               <td>{{ f.ind1 }}</td>
               <td>{{ f.ind2 }}</td>
               <td>{{ f.value }}</td>
-              }
-            </tr>
             }
-          </tbody>
-        </table>
-      </div>
-    </tab>
-    }
-    <!-- END OF MARC TAB -->
-  </tabset>
-</div>
-}
-
-<ng-template #entityLink let-entity="entity" let-class="class">
-  <i class="fa fa-tag mr-1"></i>
-  @if (activateLink && entity.entity.resource_type) {
-  <a
-    [class]="class"
-    [routerLink]="[
-      '/records',
-      entity.entity.resource_type + '_entities',
-      'detail',
-      entity.entity.pid
-    ]"
-  >
-    {{ entity.entity | entityLabel }}
-  </a>
-  } @else {
-  {{ entity.entity | entityLabel }}
+          </tr>
+        </ng-template>
+      </p-table>
+    </p-tabPanel>
   }
-</ng-template>
+</p-tabView>
+}
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.ts
index 955324a5e..b7bc87981 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { DetailRecord, RecordService } from '@rero/ng-core';
@@ -26,11 +26,16 @@ import { DocumentApiService } from '../../../api/document-api.service';
 
 @Component({
   selector: 'admin-document-detail-view',
-  templateUrl: './document-detail-view.component.html',
-  styleUrls: ['./document-detail-view.component.scss']
+  templateUrl: './document-detail-view.component.html'
 })
 export class DocumentDetailViewComponent implements DetailRecord, OnInit, OnDestroy {
 
+  private translateService: TranslateService = inject(TranslateService);
+  private activatedRouter: ActivatedRoute = inject(ActivatedRoute);
+  private recordService: RecordService = inject(RecordService);
+  private documentApiService: DocumentApiService = inject(DocumentApiService);
+  private permissionsService: PermissionsService = inject(PermissionsService);
+
   /** Observable resolving record data */
   record$: Observable<any>;
 
@@ -58,6 +63,8 @@ export class DocumentDetailViewComponent implements DetailRecord, OnInit, OnDest
   /** Enables or disables links */
   activateLink: boolean = true;
 
+  recordMessage: any[] = [];
+
   /** External identifier for imported record. */
   get pid(): string | null {
     if (this.activatedRouter.snapshot && this.activatedRouter.snapshot.params && this.activatedRouter.snapshot.params.pid !== null) {
@@ -93,22 +100,6 @@ export class DocumentDetailViewComponent implements DetailRecord, OnInit, OnDest
     return this.permissionsService.canAccess(PERMISSIONS.CIRC_ADMIN);
   }
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService to translate some strings.
-   * @param activatedRouter - ActivatedRoute to get url parameters.
-   * @param recordService - RecordService to the MARC version for the record.
-   * @param documentApiService - DocumentApiService
-   * @param permissionsService - PermissionsService
-   */
-  constructor(
-    private translateService: TranslateService,
-    private activatedRouter: ActivatedRoute,
-    private recordService: RecordService,
-    private documentApiService: DocumentApiService,
-    private permissionsService: PermissionsService
-  ) { }
-
   /** On init hook */
   ngOnInit(): void {
     this.activateLink = !this.activatedRouter.snapshot.params.type.startsWith('import_');
@@ -116,6 +107,7 @@ export class DocumentDetailViewComponent implements DetailRecord, OnInit, OnDest
       switchMap((record: any) => {
         this.record = record;
         this.relatedResources = this.processRelatedResources(record);
+        this.message(record);
         if (record != null && record.metadata != null && this.record.metadata.pid == null) {
           this.marc$ = this.recordService.getRecord(
             this.activatedRouter.snapshot.params.type, this.pid, 0, {
@@ -205,4 +197,18 @@ export class DocumentDetailViewComponent implements DetailRecord, OnInit, OnDest
 
     return [];
   }
+
+  private message(record: any): void {
+    if (record.metadata?.adminMetadata?.encodingLevel !== 'Full level' || record.metadata?.adminMetadata?.note) {
+      let message = [];
+      if (record.metadata?.adminMetadata?.encodingLevel) {
+        message.push(this.translateService.instant('Encoding level') + ': ');
+        message.push(this.translateService.instant(record.metadata.adminMetadata.encodingLevel) + '.')
+      }
+      if (record.metadata.adminMetadata.note) {
+        message.push(record.metadata.adminMetadata.note.join('. ') + '.')
+      }
+      this.recordMessage = [{ severity: 'warn', detail: message.join(' '), icon: null }];
+    }
+  }
 }
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.html
index e2f20a28d..ba77243c5 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.html
@@ -32,25 +32,25 @@
           <admin-operation-logs-dialog resourceType="documents" [resourcePid]="record.metadata.pid"></admin-operation-logs-dialog>
         }
         @if (!record.metadata.pid && source) {
-          <button
-            class="btn btn-sm btn-outline-primary ml-1"
+          <p-button
+            icon="fa fa-cloud-download"
+            styleClass="ml-1"
+            [label]="'Import'|translate"
+            [outlined]="true"
             [permissions]="permissions.DOC_CREATE"
-            (click)="importDocument($event, record, { source: source, pid: pid })"
-          >
-            <i class="fa fa-cloud-download"></i>
-            {{ 'Import' | translate }}
-          </button>
+            (onClick)="importDocument($event, record, { source: source, pid: pid })"
+          />
         }
         @if (record.metadata.pid) {
-          <button
-            class="btn btn-sm btn-outline-primary ml-1"
+          <p-button
+            icon="fa fa-files-o"
+            styleClass="ml-1"
+            [label]="'Duplicate'|translate"
+            [outlined]="true"
             [permissions]="permissions.DOC_CREATE"
             [routerLink]="['/records', 'documents', 'duplicate']"
             [queryParams]="{type: 'documents', pid: record.metadata.pid}"
-          >
-            <i class="fa fa-files-o"></i>
-            {{ 'Duplicate' | translate }}
-          </button>
+          />
         }
       }
     </ng-container>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.ts
index 46b97385b..5a308bc20 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail/document-detail.component.ts
@@ -14,23 +14,16 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Location } from '@angular/common';
-import { Component, ComponentFactoryResolver, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, inject, OnInit } from '@angular/core';
 import { IdentifierTypes } from '@app/admin/classes/identifiers';
 import { OperationLogsService } from '@app/admin/service/operation-logs.service';
-import { TranslateService } from '@ngx-translate/core';
 import {
   DetailComponent,
-  Record,
-  RecordService,
-  RecordUiService,
+  Record
 } from '@rero/ng-core';
 import { IPermissions, PERMISSIONS, UserService } from '@rero/shared';
 import { cloneDeep } from 'lodash-es';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { NgxSpinnerService } from 'ngx-spinner';
-import { ToastrService } from 'ngx-toastr';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { DialogImportComponent } from '../dialog-import/dialog-import.component';
 
 @Component({
@@ -38,6 +31,11 @@ import { DialogImportComponent } from '../dialog-import/dialog-import.component'
   templateUrl: './document-detail.component.html',
 })
 export class DocumentDetailComponent extends DetailComponent implements OnInit {
+
+  private dialogService: DialogService = inject(DialogService);
+  private operationLogsService: OperationLogsService = inject(OperationLogsService);
+  private userService: UserService = inject(UserService);
+
   fileTitle: string = 'files';
   /** return all available permissions for current user */
   permissions: IPermissions = PERMISSIONS;
@@ -105,47 +103,6 @@ export class DocumentDetailComponent extends DetailComponent implements OnInit {
     return this.operationLogsService.isLogVisible('documents');
   }
 
-  /**
-   * Constructor
-   * @param route - ActivatedRoute
-   * @param router - Router
-   * @param location - Location
-   * @param componentFactoryResolver - ComponentFactoryResolver
-   * @param recordService - RecordService
-   * @param recordUiService - RecordUiService
-   * @param toastrService - ToastrService
-   * @param translate - TranslateService
-   * @param spinner - NgxSpinnerService
-   * @param bsModalService - BsModalService
-   * @param operationLogsService - OperationLogsService
-   */
-  constructor(
-    protected route: ActivatedRoute,
-    protected router: Router,
-    protected location: Location,
-    protected componentFactoryResolver: ComponentFactoryResolver,
-    protected recordService: RecordService,
-    protected recordUiService: RecordUiService,
-    protected toastrService: ToastrService,
-    protected translate: TranslateService,
-    protected spinner: NgxSpinnerService,
-    protected bsModalService: BsModalService,
-    private operationLogsService: OperationLogsService,
-    protected userService: UserService
-  ) {
-    super(
-      route,
-      router,
-      location,
-      componentFactoryResolver,
-      recordService,
-      recordUiService,
-      toastrService,
-      translate,
-      spinner
-    );
-  }
-
   /**
    * Import document
    * @param event - Event
@@ -211,14 +168,14 @@ export class DocumentDetailComponent extends DetailComponent implements OnInit {
         if (this.recordService.totalHits(response.hits.total) === 0 && !warning) {
           this.router.navigate(route, { queryParams: data });
         } else {
-          const config = {
-            initialState: {
+          const dynamicDialogRef: DynamicDialogRef = this.dialogService.open(DialogImportComponent, {
+            header: this.translate.instant('Import'),
+            data: {
               records: response.hits.hits,
               warning
             }
-          };
-          const bsModalRef = this.bsModalService.show(DialogImportComponent, config);
-          bsModalRef.content.confirmation$.subscribe((confirmation: boolean) => {
+          });
+          dynamicDialogRef.onClose.subscribe((confirmation: boolean) => {
             if (confirmation) {
               this.router.navigate(route, { queryParams: data });
             }
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/entities-related/entities-related.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/entities-related/entities-related.component.ts
index 048070d56..764d38c6a 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/entities-related/entities-related.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/entities-related/entities-related.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Entity } from '@rero/shared';
 import { IEntityRelated } from './entities-related.interface';
@@ -25,18 +25,14 @@ import { IEntityRelated } from './entities-related.interface';
 })
 export class EntitiesRelatedComponent implements OnInit {
 
+  private translateService: TranslateService = inject(TranslateService);
+
   /** Record metadata */
   @Input() record: any;
 
   /** Entities processed */
   entities: {[key: string]: IEntityRelated[]} = {};
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  constructor(private translateService: TranslateService) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     const language = this.translateService.currentLang;
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/files-collections.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/files-collections.component.html
index ff7a055e9..33a9e2489 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/files-collections.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/files-collections.component.html
@@ -18,16 +18,15 @@
 <h5 class="mb-2" translate>Digital collections</h5>
 <div class="row align-items-center">
   <div
-  [tooltip]="
-  'Comma-separated list of digital collection names. Digital collections allow the searching/grouping of related documents containing files.'
-    | translate
-" class="input-group col-md-6">
-    <input
+    [pTooltip]="'Comma-separated list of digital collection names. Digital collections allow the searching/grouping of related documents containing files.'|translate"
+    tooltipPosition="top"
+    class="input-group col-md-6"
+  >
+  <input
       #inputLabel
       [formControl]="collections"
       type="text"
       id="collections"
-
       (keyup.enter)="save()"
       class="form-control"
       aria-label="label"
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/files-collections.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/files-collections.component.ts
index 70de220fe..d2497e16e 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/files-collections.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/files-collections.component.ts
@@ -14,13 +14,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Component, OnDestroy, OnInit, inject } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { OrganisationService } from '@app/admin/service/organisation.service';
 import { ResourcesFilesService } from '@app/admin/service/resources-files.service';
 import { TranslateService } from '@ngx-translate/core';
-import { ToastrService } from 'ngx-toastr';
+import { CONFIG } from '@rero/ng-core';
+import { MessageService } from 'primeng/api';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -30,11 +30,10 @@ import { Subscription } from 'rxjs';
 })
 export class FilesCollectionsComponent implements OnInit, OnDestroy {
 
-  //-------------- Services ------------------
-  private resourcesFilesService = inject(ResourcesFilesService);
-  private toastrService = inject(ToastrService);
-  private translateService = inject(TranslateService);
-  private organisationService = inject(OrganisationService);
+  private messageService: MessageService = inject(MessageService);
+  private resourcesFilesService: ResourcesFilesService = inject(ResourcesFilesService);
+  private translateService: TranslateService = inject(TranslateService);
+  private organisationService: OrganisationService = inject(OrganisationService);
 
   // current record
   record: any;
@@ -104,6 +103,11 @@ export class FilesCollectionsComponent implements OnInit, OnDestroy {
       .updateParentRecordMetadata(this.record.id, { metadata: metadata })
       .subscribe((record) => this.setRecord(record));
     this.collections.markAsPristine();
-    this.toastrService.success(this.translateService.instant('Collections have been saved successfully.'));
+    this.messageService.add({
+      severity: 'success',
+      summary: this.translateService.instant('File'),
+      detail: this.translateService.instant('Collections have been saved successfully.'),
+      life: CONFIG.MESSAGE_LIFE
+    });
   }
 }
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/upload-files/upload-files.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/upload-files/upload-files.component.html
index 8df8148ac..37cc2dbde 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/upload-files/upload-files.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/upload-files/upload-files.component.html
@@ -26,7 +26,7 @@
 </ngx-spinner>
 
 @if (files != null) {
-<div class="row mt-4">
+<div class="grid mt-4">
   <div class="col-12">
     <h5 class="mb-2" translate>Upload Files</h5>
     <p-fileUpload
@@ -97,11 +97,12 @@ <h5 class="mb-2" translate>Uploaded Files</h5>
         <div class="col-sm-6">
           <a
             tabindex="-1"
-            [tooltip]="
+            [pTooltip]="
               (file.size | filesize) +
               ' / ' +
               (file.updated | dateTranslate : 'medium')
             "
+            tooltipPosition="top"
             title="download"
             [href]="toRelative(file.links.content)"
             download
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/upload-files/upload-files.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/upload-files/upload-files.component.ts
index 89e606221..30c2f0d9e 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/upload-files/upload-files.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/files-collections/upload-files/upload-files.component.ts
@@ -14,15 +14,14 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Component, Input, OnInit, ViewChild, inject } from '@angular/core';
 import { ResourcesFilesService } from '@app/admin/service/resources-files.service';
 import { TranslateService } from '@ngx-translate/core';
-import { DialogService, Record } from '@rero/ng-core';
+import { CONFIG, Record } from '@rero/ng-core';
 import { NgxSpinnerService } from 'ngx-spinner';
-import { ToastrService } from 'ngx-toastr';
+import { ConfirmationService, MessageService } from 'primeng/api';
 import { FileUpload } from 'primeng/fileupload';
-import { Observable, catchError, concatMap, forkJoin, from, map, of, switchMap, tap, toArray } from 'rxjs';
+import { Observable, catchError, concatMap, from, map, of, switchMap, tap, toArray } from 'rxjs';
 
 @Component({
   selector: 'admin-upload-files',
@@ -30,10 +29,15 @@ import { Observable, catchError, concatMap, forkJoin, from, map, of, switchMap,
 })
 export class UploadFilesComponent implements OnInit {
 
+  private messageService: MessageService = inject(MessageService);
+  fileService: ResourcesFilesService = inject(ResourcesFilesService);
+  translateService: TranslateService = inject(TranslateService);
+  spinner: NgxSpinnerService = inject(NgxSpinnerService);
+  confirmationService: ConfirmationService = inject(ConfirmationService);
+
   // linked resource pid such as document
-  @Input()
-  pid: string;
-  // List of files for the file ecord.
+  @Input() pid: string;
+  // List of files for the file record.
   files: Array<any> = undefined;
   // the maximum number of files by file record
   maxFiles = 500;
@@ -48,18 +52,6 @@ export class UploadFilesComponent implements OnInit {
   @ViewChild('fileUpload')
   fileUpload: FileUpload;
 
-  //------------- Services -------------
-  // file service
-  fileService = inject(ResourcesFilesService);
-  // translate service
-  translateService = inject(TranslateService);
-  // toaster service
-  toastrService = inject(ToastrService);
-  // dialog service
-  dialogService = inject(DialogService);
-  // spinner service
-  spinner = inject(NgxSpinnerService);
-  //
   nUploadedFiles = 0;
 
   /**
@@ -99,12 +91,17 @@ export class UploadFilesComponent implements OnInit {
         const newLabel = res.metadata.label;
         file.label = newLabel;
         file.metadata.label = newLabel;
-        this.toastrService.success(this.translateService.instant('Metadata have been saved successfully.'));
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('File'),
+          detail: this.translateService.instant('Metadata have been saved successfully.'),
+          life: CONFIG.MESSAGE_LIFE
+        });
       });
   }
 
 
- // True if the maxiumum number of files is reached.
+ // True if the maximum number of files is reached.
   get reachMaxFileLimit(): boolean {
     return this.files.length >= this.maxFiles;
   }
@@ -169,13 +166,24 @@ export class UploadFilesComponent implements OnInit {
             if (e.error.message) {
               msg = `${msg}: ${e.error.message}`;
             }
-            this.toastrService.error(msg);
+            this.messageService.add({
+              severity: 'error',
+              summary: this.translateService.instant('File'),
+              detail: msg,
+              sticky: true,
+              closable: true
+            });
             return of([]);
           }),
           tap(() => {
             this.resetFilter();
             this.fileUpload.clear();
-            this.toastrService.success(this.translateService.instant('File uploaded successfully.'));
+            this.messageService.add({
+              severity: 'success',
+              summary: this.translateService.instant('File'),
+              detail: this.translateService.instant('File uploaded successfully.'),
+              life: CONFIG.MESSAGE_LIFE
+            });
             this.nUploadedFiles = 0;
           }),
         )
@@ -238,38 +246,31 @@ export class UploadFilesComponent implements OnInit {
    * @param file
    */
   deleteFile(file: any) {
-    // dialog confirmation
-    this.dialogService
-      .show({
-        ignoreBackdropClick: true,
-        initialState: {
-          title: this.translateService.instant('Confirmation'),
-          body: this.translateService.instant('Do you really want to remove this file?'),
-          confirmButton: true,
-          confirmTitleButton: this.translateService.instant('OK'),
-          cancelTitleButton: this.translateService.instant('Cancel'),
-        },
-      })
-      .pipe(
-        switchMap((confirm: boolean) => {
-          if (confirm === true) {
-            // remove the file
-            return this.fileService.delete(this.parentRecord.id, file.key).pipe(
-              map(() => {
-                this.files = this.files.filter((f) => f.key !== file.key);
-                if (this.files.length === 0) {
-                  this.parentRecord = null;
-                }
-                this.resetFilter();
-                this.toastrService.success(this.translateService.instant('File removed successfully.'));
-                return true;
-              })
-            );
-          }
-          return of(false);
-        })
-      )
-      .subscribe();
+    this.confirmationService.confirm({
+      header: this.translateService.instant('Confirmation'),
+      message: this.translateService.instant('Do you really want to remove this file?'),
+      acceptLabel: this.translateService.instant('OK'),
+      rejectLabel: this.translateService.instant('Cancel'),
+      dismissableMask: true,
+      accept: () => {
+        this.fileService.delete(this.parentRecord.id, file.key).pipe(
+          map(() => {
+            this.files = this.files.filter((f) => f.key !== file.key);
+            if (this.files.length === 0) {
+              this.parentRecord = null;
+            }
+            this.resetFilter();
+            this.messageService.add({
+              severity: 'success',
+              summary: this.translateService.instant('File'),
+              detail: this.translateService.instant('File removed successfully.'),
+              life: CONFIG.MESSAGE_LIFE
+            });
+            return true;
+          })
+        ).subscribe();
+      }
+    });
   }
 
   /**
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.ts
index 83fb0ce1e..853763605 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding-organisation/holding-organisation.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { UserService } from '@rero/shared';
 import { HoldingsApiService } from '@app/admin/api/holdings-api.service';
 import { forkJoin } from 'rxjs';
@@ -26,6 +26,9 @@ import { forkJoin } from 'rxjs';
 })
 export class HoldingOrganisationComponent implements OnInit {
 
+  private holdingsApiService: HoldingsApiService = inject(HoldingsApiService);
+  private userService: UserService = inject(UserService);
+
   /** Document record */
   @Input() document: any;
 
@@ -48,16 +51,6 @@ export class HoldingOrganisationComponent implements OnInit {
     return 'standard';
   }
 
-  /**
-   * Constructor
-   * @param holdingsApiService - HoldingsApiService
-   * @param userService - UserService
-   */
-  constructor(
-    private holdingsApiService: HoldingsApiService,
-    private userService: UserService
-  ) {}
-
   /** On init hook */
   ngOnInit(): void {
     const documentPid = this.document.metadata.pid;
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.html
index 848a44b9c..a6d2afba3 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.html
@@ -93,70 +93,63 @@
       <div class="col-2 text-right" name="buttons">
         @if (permissions) {
           @if (permissions?.canRequest?.can) {
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-primary "
-              (click)="addRequest(item.metadata.pid, 'item')"
-              title="{{ 'Item request' | translate }}"
-              name="request"
-            >
-              <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-            </button>
+            <p-button
+              icon="fa fa-shopping-basket"
+              [title]="'Item request'|translate"
+              [outlined]="true"
+              (onClick)="addRequest(item.metadata.pid, 'item')"
+            />
           } @else {
-              <button
-                type="button"
-                class="btn btn-sm btn-outline-primary disabled"
-                title="{{ 'Item request' | translate }}"
-                [popover]="tolTemplate"
-                triggers="mouseenter:mouseleave"
-                name="request"
-              >
-                <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-              </button>
-              <ng-template #tolTemplate><div [innerHtml]="cannotRequestInfoMessage | nl2br"></div></ng-template>
+              <p-button
+                icon="fa fa-shopping-basket"
+                [title]="'Item request'|translate"
+                [outlined]="true"
+                [pTooltip]="cannotRequestTooltipContent"
+                tooltipPosition="top"
+                styleClass="text-blue-200"
+              />
+              <ng-template #cannotRequestTooltipContent>
+                <span [innerHTML]="cannotRequestInfoMessage | nl2br"></span>
+              </ng-template>
           }
           @if (permissions?.switchLocation?.can) {
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-primary ml-1"
-              title="{{ 'Switch location' | translate }}"
+            <p-button
+              icon="fa fa-random"
+              [title]="'Switch location'|translate"
+              [outlined]="true"
               [routerLink]="['/records', 'items', 'switch_location', item.metadata.pid]"
-              name="switch location"
-            >
-              <i class="fa fa-random"></i>
-            </button>
+              styleClass="ml-1"
+            />
           }
           @if (permissions?.update?.can) {
-            <button
-              type="button" class="btn btn-sm btn-outline-primary ml-1"
-              title="{{ 'Edit' | translate }}"
+            <p-button
+              icon="fa fa-pencil"
+              [title]="'Edit'|translate"
+              [outlined]="true"
               [routerLink]="['/records', 'items', 'edit', item.metadata.pid]"
-              name="edit"
-            >
-              <i class="fa fa-pencil"></i>
-            </button>
+              styleClass="ml-1"
+            />
           }
           @if (permissions?.delete?.can) {
-            <button
-              type="button" class="btn btn-outline-danger btn-sm ml-1"
-              title="{{ 'Delete' | translate }}"
-              (click)="delete(item.metadata.pid)"
-              name="delete"
-            >
-              <i class="fa fa-trash"></i>
-            </button>
+            <p-button
+              icon="fa fa-trash"
+              severity="danger"
+              [title]="'Delete'|translate"
+              (onClick)="delete(item.metadata.pid)"
+              styleClass="ml-1"
+            />
           } @else {
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-danger ml-1 disabled"
-              title="{{ 'Delete' | translate }}"
-              [popover]="tolTemplate"
-              triggers="mouseenter:mouseleave"
-              name="delete"
-            >
-              <i class="fa fa-trash"></i>
-            </button>
-            <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
+            <p-button
+              icon="fa fa-trash"
+              [title]="'Delete' | translate"
+              [outlined]="true"
+              [pTooltip]="tooltipContent"
+              tooltipPosition="top"
+              styleClass="text-red-100"
+            />
+            <ng-template #tooltipContent>
+              <span [innerHTML]="deleteInfoMessage | nl2br"></span>
+            </ng-template>
           }
         } @else {
           &nbsp;
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.ts
index 8fa2aa1e9..4d0f5b454 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/default-holding-item/default-holding-item.component.ts
@@ -15,16 +15,15 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { ItemApiService } from '@app/admin/api/item-api.service';
 import { ItemsService } from '@app/admin/service/items.service';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { TranslateService } from '@ngx-translate/core';
 import { RecordUiService } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
-import { BsModalService } from 'ngx-bootstrap/modal';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { forkJoin } from 'rxjs';
-import { first } from 'rxjs/operators';
 import { ItemRequestComponent } from '../../item-request/item-request.component';
 
 @Component({
@@ -33,6 +32,14 @@ import { ItemRequestComponent } from '../../item-request/item-request.component'
 })
 export class DefaultHoldingItemComponent implements OnInit {
 
+  public itemApiService: ItemApiService = inject(ItemApiService);
+  protected recordUiService: RecordUiService = inject(RecordUiService);
+  protected recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+  protected userService: UserService = inject(UserService);
+  protected itemService: ItemsService = inject(ItemsService);
+  protected translateService: TranslateService = inject(TranslateService);
+  private dialogService: DialogService = inject(DialogService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Holding record */
   @Input() holding: any;
@@ -72,27 +79,6 @@ export class DefaultHoldingItemComponent implements OnInit {
     return this.recordPermissionService.generateTooltipMessage(this.permissions.canRequest.reasons, 'request');
   }
 
-  // CONSTRUCTOR & HOOKS ==============================================================
-  /**
-   * Constructor
-   * @param recordUiService - RecordUiService
-   * @param userService - UserService
-   * @param recordPermissionService - RecordPermissionService
-   * @param modalService - BsModalService
-   * @param itemService - ItemService
-   * @param translateService - TranslateService
-   * @param itemApiService - ItemApiService
-   */
-  constructor(
-    protected recordUiService: RecordUiService,
-    protected recordPermissionService: RecordPermissionService,
-    protected userService: UserService,
-    protected modalService: BsModalService,
-    protected itemService: ItemsService,
-    protected translateService: TranslateService,
-    public itemApiService: ItemApiService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     if (this.isCurrentOrganisation) {
@@ -108,14 +94,16 @@ export class DefaultHoldingItemComponent implements OnInit {
    * @param recordType - the record type (should be `item`)
    */
   addRequest(recordPid: string, recordType: string): void {
-    const modalRef = this.modalService.show(ItemRequestComponent, {
-      initialState: { recordPid, recordType }
-    });
-    modalRef.content.onSubmit.pipe(first()).subscribe(_ => {
-      this.itemService.getByPidFromEs(recordPid).subscribe(result => {
-        this.item = result;
-        this._getPermissions();
-      });
+    const ref: DynamicDialogRef = this.dialogService.open(ItemRequestComponent, {
+      data: { recordPid, recordType }
+    })
+    ref.onClose.subscribe((value: boolean) => {
+      if (value) {
+        this.itemService.getByPidFromEs(recordPid).subscribe(result => {
+          this.item = result;
+          this._getPermissions();
+        });
+      }
     });
   }
 
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html
index 310d5e9fa..d61f498e8 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.html
@@ -35,58 +35,64 @@
       <div class="col text-right">
         @if (permissions) {
           <!-- HOLDING VIEW -->
-          <button [routerLink]="['/', 'records', 'holdings', 'detail', holding.metadata.pid]"
-                  class="btn btn-outline-primary btn-sm ml-1"
-                  title="{{ 'Holdings detail' | translate }}">
-            <i class="fa fa-eye"></i>
-          </button>
+          <p-button
+            icon="fa fa-eye"
+            [title]="'Holdings detail'|translate"
+            [outlined]="true"
+            [routerLink]="['/', 'records', 'holdings', 'detail', holding.metadata.pid]"
+            styleClass="mr-1"
+          />
           <!-- REQUEST BUTTON -->
           @if (permissions && permissions.canRequest && permissions.canRequest.can) {
-            <button
-              type="button" class="btn btn-outline-primary btn-sm ml-1" (click)="addRequest(holding.metadata.pid, 'holding')"
-              title="{{ 'Holdings request' | translate }}"
-              name="request"
-            >
-              <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-            </button>
+            <p-button
+              icon="fa fa-shopping-basket"
+              [title]="'Holdings request'|translate"
+              [outlined]="true"
+              styleClass="mr-1"
+              (onClick)="addRequest(holding.metadata.pid, 'holding')"
+            />
           } @else {
-              <button type="button" class="btn btn-outline-primary btn-sm ml-1 disabled"
-                title="{{ 'Holdings request' | translate }}"
-                [popover]="tolTemplate" triggers="mouseenter:mouseleave"
-                name="request">
-              <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-              </button>
-              <ng-template #tolTemplate><div [innerHtml]="cannotRequestInfoMessage | nl2br"></div></ng-template>
+            <p-button
+              icon="fa fa-shopping-basket"
+              [outlined]="true"
+              [title]="'Holdings request'|translate"
+              [pTooltip]="cannotRequestTooltipContent"
+              tooltipPosition="top"
+              styleClass="text-red-100"
+            />
+            <ng-template #cannotRequestTooltipContent>
+              <span [innerHTML]="cannotRequestInfoMessage | nl2br"></span>
+            </ng-template>
           }
           <!-- EDIT BUTTON -->
           @if (permissions && permissions.update && permissions.update.can) {
-            <button
-              title="{{ 'Edit holdings' | translate }}"
+            <p-button
+              icon="fa fa-pencil"
+              [outlined]="true"
+              [title]="'Edit holdings'|translate"
               [routerLink]="['/', 'records', 'holdings', 'edit', holding.metadata.pid]"
-              class="btn btn-outline-primary btn-sm ml-1"
-            >
-              <i class="fa fa-pencil"></i>
-            </button>
+              styleClass="mr-1"
+            />
           }
           <!-- DELETE BUTTON -->
           @if (permissions && permissions.delete && permissions.delete.can) {
-            <button
-              type="button"
-              title="{{ 'Delete holdings' | translate }}"
-              class="btn btn-outline-danger btn-sm ml-1" (click)="delete()"
-            >
-              <i class="fa fa-trash"></i>
-            </button>
+            <p-button
+              icon="fa fa-trash"
+              [outlined]="true"
+              [title]="'Delete holdings'|translate"
+              (onClick)="delete()"
+            />
           } @else {
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-danger ml-1 disabled"
-              [popover]="tolTemplate"
-              triggers="mouseenter:mouseleave"
-            >
-              <i class="fa fa-trash"></i>
-            </button>
-            <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
+            <p-button
+              icon="fa fa-trash"
+              [outlined]="true"
+              [pTooltip]="tooltipContent"
+              tooltipPosition="top"
+              styleClass="text-red-100 mr-1"
+            ></p-button>
+            <ng-template #tooltipContent>
+              <span [innerHTML]="deleteInfoMessage | nl2br"></span>
+            </ng-template>
           }
         }
       </div>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.ts
index c7ec0a20f..d32b594ce 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/holding.component.ts
@@ -14,17 +14,15 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { HoldingsService } from '@app/admin/service/holdings.service';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { TranslateService } from '@ngx-translate/core';
 import { RecordService, RecordUiService } from '@rero/ng-core';
 import { Record } from '@rero/ng-core/lib/record/record';
 import { UserService } from '@rero/shared';
-import { BsModalService } from 'ngx-bootstrap/modal';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { forkJoin } from 'rxjs';
-import { first } from 'rxjs/operators';
 import { ItemRequestComponent } from '../item-request/item-request.component';
 
 @Component({
@@ -34,6 +32,14 @@ import { ItemRequestComponent } from '../item-request/item-request.component';
 })
 export class HoldingComponent implements OnInit, OnDestroy {
 
+  protected userService: UserService = inject(UserService);
+  protected holdingService: HoldingsService = inject(HoldingsService);
+  private recordUiService: RecordUiService = inject(RecordUiService);
+  private recordService: RecordService = inject(RecordService);
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+  private translateService: TranslateService = inject(TranslateService);
+  private dialogService: DialogService = inject(DialogService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Holding record */
   @Input() holding: any;
@@ -63,27 +69,6 @@ export class HoldingComponent implements OnInit, OnDestroy {
     return this.translateService.currentLang;
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param recordUiService - RecordUiService
-   * @param recordService - RecordService
-   * @param recordPermissionService - RecordPermissionService
-   * @param translateService - TranslateService
-   * @param userService - UserService
-   * @param holdingService: HoldingsService
-   * @param modalService - BsModalService
-   */
-  constructor(
-    private recordUiService: RecordUiService,
-    private recordService: RecordService,
-    private recordPermissionService: RecordPermissionService,
-    private translateService: TranslateService,
-    protected userService: UserService,
-    protected holdingService: HoldingsService,
-    protected modalService: BsModalService,
-  ) { }
-
   /** onInit hook */
   ngOnInit() {
     this.holdingType = this.holding.metadata.holdings_type;
@@ -123,12 +108,16 @@ export class HoldingComponent implements OnInit, OnDestroy {
    * @param recordPid - string
    */
   addRequest(recordPid: string, recordType: string): void {
-    const modalRef = this.modalService.show(ItemRequestComponent, {
-      initialState: { recordPid, recordType }
+    const ref: DynamicDialogRef = this.dialogService.open(ItemRequestComponent, {
+      header: this.translateService.instant('Item Request'),
+      width: '30vw',
+      data: { recordPid, recordType }
     });
-    modalRef.content.onSubmit.pipe(first()).subscribe(_ => {
-      this._getPermissions();
-      this._loadItems();
+    ref.onClose.subscribe((value?: boolean) => {
+      if (value) {
+        this._getPermissions();
+        this._loadItems();
+      }
     });
   }
 
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holding/serial-holding-item/serial-holding-item.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/holding/serial-holding-item/serial-holding-item.component.html
index 87284e495..a86e4a5a4 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holding/serial-holding-item/serial-holding-item.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holding/serial-holding-item/serial-holding-item.component.html
@@ -44,56 +44,56 @@
       <div class="col-sm-2 text-right" name="buttons">
         @if (permissions) {
           @if (permissions.canRequest && permissions.canRequest.can) {
-            <button
-              type="button" class="btn btn-sm btn-outline-primary " (click)="addRequest(item.metadata.pid, 'item')"
-              title="{{ 'Item request' | translate }}"
-              name="request"
-            >
-              <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-            </button>
+            <p-button
+              icon="fa fa-shopping-basket"
+              [title]="'Item request'|translate"
+              [outlined]="true"
+              (onClick)="addRequest(item.metadata.pid, 'item')"
+            />
           } @else {
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-primary disabled"
-              title="{{ 'Item request' | translate }}"
-              [popover]="tolTemplate" triggers="mouseenter:mouseleave"
-              name="request"
-            >
-              <i class="fa fa-shopping-basket" aria-hidden="true"></i>
-            </button>
-            <ng-template #tolTemplate><div [innerHtml]="cannotRequestInfoMessage | nl2br"></div></ng-template>
+            <p-button
+              icon="fa fa-shopping-basket"
+              [title]="'Item request'|translate"
+              [outlined]="true"
+              [pTooltip]="cannotRequestTooltipContent"
+              tooltipPosition="top"
+              styleClass="text-blue-200"
+            />
+            <ng-template #cannotRequestTooltipContent>
+              <span [innerHTML]="cannotRequestInfoMessage | nl2br"></span>
+            </ng-template>
           }
           @if (permissions.update && permissions.update.can) {
-            <button
-              type="button" class="btn btn-sm btn-outline-primary ml-1"
-              title="{{ 'Edit' | translate }}"
+            <p-button
+              icon="fa fa-pencil"
+              [title]="'Edit'|translate"
+              [outlined]="true"
               [routerLink]="['/records', 'items', 'edit', item.metadata.pid]"
-              name="edit"
-            >
-              <i class="fa fa-pencil"></i>
-            </button>
+              styleClass="ml-1"
+            />
           }
           @if (permissions.delete && permissions.delete.can) {
-            <button
-              type="button" class="btn btn-outline-danger btn-sm ml-1"
-              title="{{ 'Delete' | translate }}"
-              (click)="delete(item.metadata.pid)"
-              name="delete"
-            >
-              <i class="fa fa-trash"></i>
-            </button>
+            <p-button
+              icon="fa fa-trash"
+              severity="danger"
+              [title]="'Delete'|translate"
+              [outlined]="true"
+              (onClick)="delete(item.metadata.pid)"
+              styleClass="ml-1"
+            />
           } @else {
-            <button
-              type="button"
-              class="btn btn-sm btn-outline-danger ml-1 disabled"
-              title="{{ 'Delete' | translate }}"
-              [popover]="tolTemplate"
-              triggers="mouseenter:mouseleave"
-              name="delete"
-            >
-              <i class="fa fa-trash"></i>
-            </button>
-            <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
+            <p-button
+              icon="fa fa-trash"
+              severity="danger"
+              [title]="'Delete'|translate"
+              [outlined]="true"
+              [pTooltip]="deleteTooltipContent"
+              tooltipPosition="top"
+              styleClass="text-red-200 ml-1"
+            />
+            <ng-template #deleteTooltipContent>
+              <span [innerHTML]="deleteInfoMessage | nl2br"></span>
+            </ng-template>
           }
         } @else {
           &nbsp;
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.html
index 7f1392b2f..f64f0599d 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.html
@@ -17,33 +17,14 @@
 @if (canAdd) {
   <div class="row">
     <div class="col">
-      <div class="btn-group pull-right" dropdown>
-        <button [permissions]="[permissions.HOLD_CREATE, permissions.ITEM_CREATE]"
-                id="document-add-actions"
-                dropdownToggle
-                type="button"
-                class="btn btn-sm btn-outline-primary dropdown-toggle"
-                aria-controls="dropdown-animated">
-          {{ 'Add' | translate }}
-          <span class="caret"></span>
-        </button>
-        <ul id="document-add-actions-animated"
-           *dropdownMenu class="dropdown-menu dropdown-menu-right"
-           role="menu"
-           aria-labelledby="document-add-actions">
-          <li class="text-right" role="menuitem" [permissions]="permissions.ITEM_CREATE">
-            <a class="dropdown-item"
-               [routerLink]="['/', 'records', 'items', 'new']"
-               [queryParams]="{ document: document.metadata.pid }"
-               translate>an item</a>
-          </li>
-          <li class="text-right" role="menuitem" [permissions]="permissions.HOLD_CREATE">
-            <a class="dropdown-item"
-               [routerLink]="['/', 'records', 'holdings', 'new']"
-               [queryParams]="{ document: document.metadata.pid }"
-               translate>a holdings</a>
-          </li>
-        </ul>
+      <div class="btn-group pull-right">
+        <p-dropdown
+          [permissions]="[permissions.HOLD_CREATE, permissions.ITEM_CREATE]"
+          [options]="options"
+          optionLabel="name"
+          [placeholder]="'Add'|translate"
+          (onChange)="dropdownAction($event)"
+        />
       </div>
     </div>
   </div>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.ts
index 5383bf1e2..129306047 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/holdings/holdings.component.ts
@@ -15,13 +15,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+import { HoldingsApiService } from '@app/admin/api/holdings-api.service';
+import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { TranslateService } from '@ngx-translate/core';
 import { RecordUiService } from '@rero/ng-core';
 import { IPermissions, PERMISSION_OPERATOR, PERMISSIONS, UserService } from '@rero/shared';
-import { HoldingsApiService } from '@app/admin/api/holdings-api.service';
+import { DropdownChangeEvent } from 'primeng/dropdown';
 import { forkJoin, Observable } from 'rxjs';
-import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 
 @Component({
   selector: 'admin-holdings',
@@ -29,6 +31,13 @@ import { RecordPermissionService } from '@app/admin/service/record-permission.se
 })
 export class HoldingsComponent implements OnInit {
 
+  private userService: UserService = inject(UserService);
+  private holdingsApiService: HoldingsApiService = inject(HoldingsApiService);
+  private recordUiService: RecordUiService = inject(RecordUiService);
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+  private translateService: TranslateService = inject(TranslateService);
+  private router: Router = inject(Router);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Document */
   @Input() document: any;
@@ -37,6 +46,8 @@ export class HoldingsComponent implements OnInit {
   /** Restrict the functionality of interface */
   @Input() isCurrentOrganisation = true;
 
+  options: any[];
+
   /** Holdings total */
   holdingsTotal = 0;
   /** Current page */
@@ -85,25 +96,12 @@ export class HoldingsComponent implements OnInit {
     return this.userService.user.currentOrganisation;
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param userService - UserService
-   * @param holdingsApiService - HoldingsApiService
-   * @param recordUiService - RecordUiService
-   * @param recordPermissionService - RecordPermissionService
-   * @param translateService - TranslateService
-   */
-  constructor(
-    private userService: UserService,
-    private holdingsApiService: HoldingsApiService,
-    private recordUiService: RecordUiService,
-    private recordPermissionService: RecordPermissionService,
-    private translateService: TranslateService
-  ) { }
-
   /** onInit hook */
   ngOnInit() {
+    this.options = [
+      { name: this.translateService.instant('an item'), code: 'items' },
+      { name: this.translateService.instant('a holdings'), code: 'holdings' }
+    ];
     this.canAdd = this.isCurrentOrganisation && (!('harvested' in this.document.metadata));
     const holdingsRecords = this._holdingsQuery(this.documentPid, this.organisationPid, 1, this.isCurrentOrganisation);
     const holdingsCount = this._holdingsCountQuery(this.documentPid, this.organisationPid, this.isCurrentOrganisation);
@@ -158,6 +156,13 @@ export class HoldingsComponent implements OnInit {
     }
   }
 
+  dropdownAction(resource: DropdownChangeEvent): void {
+    this.router.navigate(
+      ['/', 'records', resource.value.code, 'new'],
+      { queryParams: { document: this.document.metadata.pid }
+    });
+  }
+
   /**
    * Holdings count
    * @param documentPid - document pid
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.html
index fbb7707ae..b6983266a 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.html
@@ -15,73 +15,59 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (form) {
-  <div class="modal show d-block" role="dialog">
-    <div class="modal-dialog modal-dialog-centered" role="document">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" translate>Item request</h5>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true" data-dismiss="modal" (click)="closeModal()">&times;</span>
-          </button>
-        </div>
-        <div class="modal-body">
-          @if (requestedBy$ | async; as requestedBy) {
-            <div class="card-body">
-              <div class="row card-text">
-                <div class="border border-warning rounded alert alert-warning  pt-2 pb-2 col-auto">
-                  @if (requestedBy.length < 2) {
-                    <i class="fa fa-exclamation-triangle pr-1" aria-hidden="true"></i>
-                    {{ requestedBy.length }} {{ 'request in the queue' | translate }}
-                  } @else {
-                    <i class="fa fa-exclamation-triangle pr-1" aria-hidden="true"></i>
-                    {{ requestedBy.length }} {{ 'requests in the queue' | translate }}
-                  }
-                </div>
-                <div class="col-auto">
-                  <button type="button" class="btn btn-outline-primary btn-link pt-2 pb-2"
-                  [routerLink]="['/records', 'items', 'detail', recordPid]"
-                  (click)="closeModal()" translate>Edit queue</button>
-                </div>
-              </div>
-            </div>
-          }
-          @if (patron) {
-            <div class="card mb-2">
-              <div class="card-body">
-                <h5 class="card-title">{{ patron.last_name }}, {{ patron.first_name }}</h5>
-                <p class="card-text">
-                  {{ patron.street }}<br>
-                  {{ patron.postal_code }} {{ patron.city }}<br>
-                  {{ patron.email }}
-                </p>
-                @if (patron | patronBlockedMessage; as message) {
-                  <div class="alert alert-danger" role="alert">
-                    {{ message }}
-                  </div>
-                }
-              </div>
-            </div>
+  @if (requestedBy$ | async; as requestedBy) {
+    <div class="card-body">
+      <div class="row card-text">
+        <div class="border border-warning rounded alert alert-warning  pt-2 pb-2 col-auto">
+          @if (requestedBy.length < 2) {
+            <i class="fa fa-exclamation-triangle pr-1" aria-hidden="true"></i>
+            {{ requestedBy.length }} {{ 'request in the queue' | translate }}
+          } @else {
+            <i class="fa fa-exclamation-triangle pr-1" aria-hidden="true"></i>
+            {{ requestedBy.length }} {{ 'requests in the queue' | translate }}
           }
-          <form [formGroup]="form" (ngSubmit)="submit(model)">
-            <formly-form [form]="form" [fields]="formFields" [model]="model"></formly-form>
-            <div class="text-right">
-              <button
-                id="new-request-button"
-                type="submit"
-                class="btn btn-sm btn-primary"
-                [disabled]="!form.valid || requestInProgress"
-              >
-                @if (!requestInProgress) {
-                  {{ 'New request' | translate }}
-                } @else {
-                  <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
-                  {{ 'Request in progress' | translate }}
-                }
-              </button>
-            </div>
-          </form>
+        </div>
+        <div class="col-auto">
+          <button type="button" class="btn btn-outline-primary btn-link pt-2 pb-2"
+          [routerLink]="['/records', 'items', 'detail', recordPid]"
+          (click)="closeModal()" translate>Edit queue</button>
         </div>
       </div>
     </div>
-  </div>
+  }
+  @if (patron) {
+    <div class="card mb-2">
+      <div class="card-body">
+        <h5 class="card-title">{{ patron.last_name }}, {{ patron.first_name }}</h5>
+        <p class="card-text">
+          {{ patron.street }}<br>
+          {{ patron.postal_code }} {{ patron.city }}<br>
+          {{ patron.email }}
+        </p>
+        @if (patron | patronBlockedMessage; as message) {
+          <div class="alert alert-danger" role="alert">
+            {{ message }}
+          </div>
+        }
+      </div>
+    </div>
+  }
+  <form [formGroup]="form" (ngSubmit)="submit(model)">
+    <formly-form [form]="form" [fields]="formFields" [model]="model"></formly-form>
+    <div class="text-right">
+      <button
+        id="new-request-button"
+        type="submit"
+        class="btn btn-sm btn-primary"
+        [disabled]="!form.valid || requestInProgress"
+      >
+        @if (!requestInProgress) {
+          {{ 'New request' | translate }}
+        } @else {
+          <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
+          {{ 'Request in progress' | translate }}
+        }
+      </button>
+    </div>
+  </form>
 }
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts b/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts
index 76831e7aa..a4031a085 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/item-request/item-request.component.ts
@@ -15,15 +15,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Component, EventEmitter, OnInit } from '@angular/core';
+import { Component, EventEmitter, inject, OnInit } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
-import { RecordService } from '@rero/ng-core';
+import { CONFIG, RecordService } from '@rero/ng-core';
 import { Record } from '@rero/ng-core/lib/record/record';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
-import { ToastrService } from 'ngx-toastr';
 import { User, UserService } from '@rero/shared';
+import { MessageService } from 'primeng/api';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Observable } from 'rxjs';
 import { debounceTime, map, shareReplay, tap } from 'rxjs/operators';
 import { HoldingsService } from '../../../../service/holdings.service';
@@ -36,6 +36,17 @@ import { LoanService } from '../../../../service/loan.service';
 })
 export class ItemRequestComponent implements OnInit {
 
+  private userService: UserService = inject(UserService);
+  private recordService: RecordService = inject(RecordService);
+  private httpClient: HttpClient = inject(HttpClient);
+  private loanService: LoanService = inject(LoanService);
+  private translateService: TranslateService = inject(TranslateService);
+  private itemService: ItemsService = inject(ItemsService);
+  private holdingService: HoldingsService = inject(HoldingsService);
+  private messageService:MessageService = inject(MessageService);
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+
   // COMPONENTS ATTRIBUTES ====================================================
   /** Record pid */
   recordPid: string;
@@ -67,42 +78,12 @@ export class ItemRequestComponent implements OnInit {
   /** Current user */
   private currentUser: User;
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param modalService - BsModalService
-   * @param bsModalRef - BsModalRef
-   * @param userService - UserService
-   * @param recordService - RecordService
-   * @param http - HttpClient
-   * @param toastr - ToastrService
-   * @param translateService - TranslateService
-   * @param loanService: LoanService
-   * @param itemService: ItemService
-   * @param holdingService: HoldingsService
-   */
-  constructor(
-    private modalService: BsModalService,
-    private bsModalRef: BsModalRef,
-    private userService: UserService,
-    private recordService: RecordService,
-    private http: HttpClient,
-    private toastr: ToastrService,
-    private loanService: LoanService,
-    private translateService: TranslateService,
-    private itemService: ItemsService,
-    private holdingService: HoldingsService,
-  ) { }
-
   /** OnInit hook */
   ngOnInit() {
     this.currentUser = this.userService.user;
-    const initialState: any = this.modalService.config.initialState;
-    if (!Object.hasOwn(initialState, 'recordPid')) {
-      this.closeModal();
-    }
-    this.recordPid = initialState.recordPid;
-    this.recordType = initialState.recordType;
+    const data: any = this.dynamicDialogConfig.data;
+    this.recordPid = data.recordPid;
+    this.recordType = data.recordType;
     this.service = (this.recordType === 'item') ? this.itemService : this.holdingService;
     this.requestedBy$ = (this.recordType === 'item') ?  this.loanService.requestedBy$(this.recordPid) : null;
     this.initForm();
@@ -132,33 +113,35 @@ export class ItemRequestComponent implements OnInit {
       key = 'description';
       body[key] = model.description;
     }
-    this.http.post(`/api/${this.recordType}/request`, body)
+    this.httpClient.post(`/api/${this.recordType}/request`, body)
       .pipe(tap(() => this.requestInProgress = false))
-      .subscribe(
-        (_: unknown) => {
+      .subscribe({
+        next: (_: unknown) => {
           this.onSubmit.next(undefined);
-          this.closeModal();
-          this.toastr.success(
-            this.translateService.instant('Request registered.'),
-            this.translateService.instant('Item request')
-          );
+          this.closeModal(true);
+          this.messageService.add({
+            severity: 'success',
+            summary: this.translateService.instant('Item request'),
+            detail: this.translateService.instant('Request registered.'),
+            life: CONFIG.MESSAGE_LIFE
+          });
         },
-        (error: unknown) => {
-          this.toastr.error(
-            this.translateService.instant('An error has occurred. Please try again.'),
-            this.translateService.instant('Item request'),
-            { disableTimeOut: true }
-          );
-        }
-      );
+        error: () => this.messageService.add({
+          severity: 'error',
+          summary: this.translateService.instant('Item request'),
+          detail: this.translateService.instant('An error has occurred. Please try again.'),
+          sticky: true,
+          closable: true
+        })
+      });
   }
 
   /**
    * Close modal dialog
    * @param event - Event
    */
-  closeModal() {
-    this.bsModalRef.hide();
+  closeModal(value?: boolean) {
+    this.dynamicDialogRef.close(value);
   }
 
   /**
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.ts b/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.ts
index 19d648866..d3ab4f4d6 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/local/entities-local-detail-view.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { OperationLogsService } from '@app/admin/service/operation-logs.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -28,6 +28,10 @@ import { Entity, EntityType, EntityTypeIcon } from '@rero/shared';
 })
 export class EntitiesLocalDetailViewComponent implements OnInit, DetailRecord {
 
+  private translateService: TranslateService = inject(TranslateService);
+  private router: Router = inject(Router);
+  private operationLogsService: OperationLogsService = inject(OperationLogsService);
+
   /** Observable resolving record data */
   record$: any;
 
@@ -40,18 +44,6 @@ export class EntitiesLocalDetailViewComponent implements OnInit, DetailRecord {
   /** Is operation log enabled */
   isEnabledOperationLog: boolean = false;
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   * @param router - Router
-   * @param operationLogsService - OperationLogsService
-   */
-  constructor(
-    private translateService: TranslateService,
-    private router: Router,
-    private operationLogsService: OperationLogsService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this.isEnabledOperationLog = this.operationLogsService.isLogVisible('local_entities');
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-page-detail/local-page-detail.component.ts b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-page-detail/local-page-detail.component.ts
index e7e6695b1..6d6e5d395 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-page-detail/local-page-detail.component.ts
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/local/local-page-detail/local-page-detail.component.ts
@@ -14,16 +14,10 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Location } from '@angular/common';
-import { Component, ComponentFactoryResolver } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, inject } from '@angular/core';
 import { OperationLogsService } from '@app/admin/service/operation-logs.service';
-import { TranslateService } from '@ngx-translate/core';
-import { DetailComponent, RecordService, RecordUiService } from '@rero/ng-core';
+import { DetailComponent } from '@rero/ng-core';
 import { Entity } from '@rero/shared';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { NgxSpinnerService } from 'ngx-spinner';
-import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'admin-local-page-detail',
@@ -31,6 +25,8 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class LocalPageDetailComponent extends DetailComponent {
 
+  private operationLogsService: OperationLogsService = inject(OperationLogsService);
+
   /**
    * Is operation log enabled
    * @return boolean
@@ -39,36 +35,6 @@ export class LocalPageDetailComponent extends DetailComponent {
     return this.operationLogsService.isLogVisible('local_entities');
   }
 
-  /**
-   * Constructor
-   * @param route - ActivatedRoute
-   * @param router - Router
-   * @param location - Location
-   * @param componentFactoryResolver - ComponentFactoryResolver
-   * @param recordService - RecordService
-   * @param recordUiService - RecordUiService
-   * @param toastrService - ToastrService
-   * @param translate - TranslateService
-   * @param spinner - NgxSpinnerService
-   * @param bsModalService - BsModalService
-   * @param operationLogsService - OperationLogsService
-   */
-  constructor(
-    protected route: ActivatedRoute,
-    protected router: Router,
-    protected location: Location,
-    protected componentFactoryResolver: ComponentFactoryResolver,
-    protected recordService: RecordService,
-    protected recordUiService: RecordUiService,
-    protected toastrService: ToastrService,
-    protected translate: TranslateService,
-    protected spinner: NgxSpinnerService,
-    protected bsModalService: BsModalService,
-    private operationLogsService: OperationLogsService,
-  ) {
-    super(route, router, location, componentFactoryResolver, recordService, recordUiService, toastrService, translate, spinner);
-  }
-
   /**
    * Launch an expert search on the document view.
    * @param record - the record
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.ts b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.ts
index c38fd16c0..4bebbe0d4 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/entities-remote-detail-view.component.ts
@@ -15,8 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { EntityType, EntityTypeIcon } from '@rero/shared';
@@ -27,6 +26,8 @@ import { EntityType, EntityTypeIcon } from '@rero/shared';
 })
 export class RemoteEntitiesDetailViewComponent implements DetailRecord {
 
+  private translateService: TranslateService = inject(TranslateService);
+
   /** Observable resolving record data */
   record$: any;
 
@@ -36,12 +37,6 @@ export class RemoteEntitiesDetailViewComponent implements DetailRecord {
   /** Enum of type of Entity */
   entityType = EntityType;
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  constructor(private translateService: TranslateService) {}
-
   /**
    * Icon
    * @param type - type of contribution
diff --git a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-page-detail/remote-page-detail.component.ts b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-page-detail/remote-page-detail.component.ts
index 28919b44c..3e2c40b21 100644
--- a/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-page-detail/remote-page-detail.component.ts
+++ b/projects/admin/src/app/record/detail-view/entities-detail-view/remote/remote-page-detail/remote-page-detail.component.ts
@@ -14,15 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Location } from '@angular/common';
-import { Component, ComponentFactoryResolver } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { DetailComponent, RecordService, RecordUiService } from '@rero/ng-core';
+import { Component, inject } from '@angular/core';
+import { DetailComponent } from '@rero/ng-core';
 import { AppSettingsService, Entity } from '@rero/shared';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { NgxSpinnerService } from 'ngx-spinner';
-import { ToastrService } from 'ngx-toastr';
 
 @Component({
   selector: 'admin-remote-page-detail',
@@ -30,35 +24,7 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class RemotePageDetailComponent extends DetailComponent {
 
-  /**
-   * Constructor
-   * @param route - ActivatedRoute
-   * @param router - Router
-   * @param location - Location
-   * @param componentFactoryResolver - ComponentFactoryResolver
-   * @param recordService - RecordService
-   * @param recordUiService - RecordUiService
-   * @param toastrService - ToastrService
-   * @param translate - TranslateService
-   * @param spinner - NgxSpinnerService
-   * @param bsModalService - BsModalService
-   * @param appSettingsService - AppSettingsService
-   */
-  constructor(
-    protected route: ActivatedRoute,
-    protected router: Router,
-    protected location: Location,
-    protected componentFactoryResolver: ComponentFactoryResolver,
-    protected recordService: RecordService,
-    protected recordUiService: RecordUiService,
-    protected toastrService: ToastrService,
-    protected translate: TranslateService,
-    protected spinner: NgxSpinnerService,
-    protected bsModalService: BsModalService,
-    protected appSettingsService: AppSettingsService
-  ) {
-    super(route, router, location, componentFactoryResolver, recordService, recordUiService, toastrService, translate, spinner);
-  }
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
 
     /**
    * Launch an expert search on the document view.
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.ts b/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.ts
index 8c255a76b..7f9aa3617 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/holding-detail-view.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Observable, Subscription } from 'rxjs';
@@ -25,6 +25,8 @@ import { Observable, Subscription } from 'rxjs';
 })
 export class HoldingDetailViewComponent implements OnInit , OnDestroy, DetailRecord {
 
+  private router: Router = inject(Router);
+
   /** Observable resolving record data */
   record$: Observable<any>;
 
@@ -37,12 +39,6 @@ export class HoldingDetailViewComponent implements OnInit , OnDestroy, DetailRec
   /** The observer to the record observable */
   private recordObs: Subscription;
 
-  /**
-   * Constructor
-   * @param router: Router
-   */
-  constructor(private router: Router) {}
-
   /**
    * Init hook
    */
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/holding-page-detail/holding-page-detail.component.ts b/projects/admin/src/app/record/detail-view/holding-detail-view/holding-page-detail/holding-page-detail.component.ts
index a4a173dbe..c41be0a0a 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/holding-page-detail/holding-page-detail.component.ts
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/holding-page-detail/holding-page-detail.component.ts
@@ -1,4 +1,3 @@
-
 /*
  * RERO ILS UI
  * Copyright (C) 2019-2024 RERO
@@ -15,15 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Location } from '@angular/common';
-import { Component, ComponentFactoryResolver } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, inject } from '@angular/core';
 import { OperationLogsService } from '@app/admin/service/operation-logs.service';
-import { TranslateService } from '@ngx-translate/core';
-import { DetailComponent, RecordService, RecordUiService } from '@rero/ng-core';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { NgxSpinnerService } from 'ngx-spinner';
-import { ToastrService } from 'ngx-toastr';
+import { DetailComponent } from '@rero/ng-core';
 
 @Component({
   selector: 'admin-holding-page-detail',
@@ -31,6 +24,8 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class HoldingPageDetailComponent extends DetailComponent {
 
+  private operationLogsService: OperationLogsService = inject(OperationLogsService);
+
   /**
    * Is operation log enabled
    * @return boolean
@@ -38,34 +33,4 @@ export class HoldingPageDetailComponent extends DetailComponent {
   get isEnabledOperationLog(): boolean {
     return this.operationLogsService.isLogVisible('holdings');
   }
-
-  /**
-   *
-   * @param route - ActivatedRoute
-   * @param router - Router
-   * @param location - Location
-   * @param componentFactoryResolver - ComponentFactoryResolver
-   * @param recordService - RecordService
-   * @param recordUiService - RecordUiService
-   * @param toastrService - ToastrService
-   * @param translate - TranslateService
-   * @param spinner - NgxSpinnerService
-   * @param bsModalService - BsModalService
-   * @param operationLogsService - OperationLogsService
-   */
-  constructor(
-    protected route: ActivatedRoute,
-    protected router: Router,
-    protected location: Location,
-    protected componentFactoryResolver: ComponentFactoryResolver,
-    protected recordService: RecordService,
-    protected recordUiService: RecordUiService,
-    protected toastrService: ToastrService,
-    protected translate: TranslateService,
-    protected spinner: NgxSpinnerService,
-    protected bsModalService: BsModalService,
-    private operationLogsService: OperationLogsService,
-  ) {
-    super(route, router, location, componentFactoryResolver, recordService, recordUiService, toastrService, translate, spinner);
-  }
 }
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.html b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.html
index f145dc69c..7541dcb3b 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.html
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.html
@@ -95,36 +95,47 @@
       <!-- CLAIMS BUTTON -->
       @if (recordPermissions?.update?.can) {
         @if (isClaimAllowed) {
-          <button type="button"
-                  title="{{ 'Claim' | translate }}"
-                  class="btn btn-sm btn-outline-primary ml-1"
-                  (click)="openClaimEmailDialog()">
-            <i class="fa fa-gavel"></i>
-          </button>
+          <p-button
+            icon="fa fa-gavel"
+            [title]="'Claim'|translate"
+            [outlined]="true"
+            (onClick)="openClaimEmailDialog()"
+          />
         }
         <!-- EDIT BUTTON -->
-        <button type="button" class="btn btn-sm btn-outline-primary ml-1"
-                title="{{ 'Edit' | translate }}"
-                [routerLink]="['/records', 'items', 'edit', issue.metadata.pid]"
-                [queryParams]="{'redirectTo': 'records/holdings/detail/' + holding.id }">
-          <i class="fa fa-pencil"></i>
-        </button>
+        <p-button
+          icon="fa fa-pencil"
+          [title]="'Edit'|translate"
+          [outlined]="true"
+          [routerLink]="['/records', 'items', 'edit', issue.metadata.pid]"
+          [queryParams]="{'redirectTo': 'records/holdings/detail/' + holding.id }"
+          styleClass="ml-1"
+        />
       }
 
       <!-- DELETE BUTTON -->
       @if (recordPermissions?.delete?.can) {
-        <button type="button" class="btn btn-outline-danger btn-sm ml-1"
-                title="{{ 'Delete' | translate }}"
-                (click)="deleteIssue(issue)">
-          <i class="fa fa-trash" ></i>
-        </button>
+        <p-button
+          icon="fa fa-trash"
+          severity="danger"
+          [title]="'Delete'|translate"
+          [outlined]="true"
+          (onClick)="deleteIssue(issue)"
+          styleClass="ml-1"
+        />
       } @else {
-        <button type="button" class="btn btn-sm btn-outline-danger ml-1 disabled"
-                title="{{ 'Delete' | translate }}"
-                [popover]="tolTemplate" triggers="mouseenter:mouseleave">
-          <i class="fa fa-trash"></i>
-        </button>
-        <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage(issue) | nl2br"></div></ng-template>
+        <p-button
+          icon="fa fa-trash"
+          severity="danger"
+          [title]="'Delete'|translate"
+          [outlined]="true"
+          [pTooltip]="tooltipContent"
+          tooltipPosition="top"
+          styleClass="text-red-100 ml-1"
+        />
+        <ng-template #tooltipContent>
+          <span [innerHTML]="deleteInfoMessage(issue)"></span>
+        </ng-template>
       }
     </div>
   </div>
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.ts b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.ts
index 2b69ba3b5..c3e17b68e 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.ts
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/received-issue/received-issue.component.ts
@@ -15,13 +15,15 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { HoldingsService } from '@app/admin/service/holdings.service';
 import { IssueService } from '@app/admin/service/issue.service';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { TranslateService } from '@ngx-translate/core';
 import { RecordUiService } from '@rero/ng-core';
 import { IssueItemStatus, UserService } from '@rero/shared';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'admin-received-issue',
@@ -29,7 +31,14 @@ import { IssueItemStatus, UserService } from '@rero/shared';
   styleUrls: ['../serial-holding-detail-view.style.scss'],
   providers: [IssueService]
 })
-export class ReceivedIssueComponent implements OnInit {
+export class ReceivedIssueComponent implements OnInit, OnDestroy {
+
+  private holdingService: HoldingsService = inject(HoldingsService);
+  private translateService: TranslateService = inject(TranslateService);
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+  private recordUiService: RecordUiService = inject(RecordUiService);
+  private issueService: IssueService = inject(IssueService);
+  private userService: UserService = inject(UserService);
 
   // COMPONENT ATTRIBUTES =====================================================
   /** the issue to display */
@@ -49,6 +58,8 @@ export class ReceivedIssueComponent implements OnInit {
   /** Record permissions */
   recordPermissions: any = {};
 
+  private subscription = new Subscription();
+
   // GETTER & SETTER ==========================================================
 
   /**
@@ -67,25 +78,6 @@ export class ReceivedIssueComponent implements OnInit {
       .sort((a: string, b: string) => new Date(b).getTime() - new Date(a).getTime())[0];
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param holdingService - HoldingService
-   * @param translateService - TranslateService
-   * @param recordPermissionService - RecordPermissionService
-   * @param recordUiService: RecordUiService
-   * @param issueService: IssueService
-   * @param userService: UserService
-   */
-  constructor(
-    private holdingService: HoldingsService,
-    private translateService: TranslateService,
-    private recordPermissionService: RecordPermissionService,
-    private recordUiService: RecordUiService,
-    private issueService: IssueService,
-    private userService: UserService
-  ) { }
-
   // COMPONENT FUNCTIONS ======================================================
 
   /** OnInit hook */
@@ -100,6 +92,10 @@ export class ReceivedIssueComponent implements OnInit {
     this.isClaimAllowed = this.issueService.isClaimAllowed(this.issue.metadata.issue.status);
   }
 
+  ngOnDestroy(): void {
+      this.subscription.unsubscribe();
+  }
+
   /**
    * Get the best possible status icon to display for this issue
    * @param: realStatus: is we need to get the real status icon or not
@@ -134,7 +130,9 @@ export class ReceivedIssueComponent implements OnInit {
 
   /** Open claim dialog */
   openClaimEmailDialog(): void {
-    const modalRef = this.issueService.openClaimEmailDialog(this.issue);
-    modalRef.content.recordChange.subscribe((record: any) => this.issue = record);
+    const ref: DynamicDialogRef = this.issueService.openClaimEmailDialog(this.issue);
+    this.subscription.add(
+      ref.onClose.subscribe((record: any) => this.issue = record)
+    );
   }
 }
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.html b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.html
index cdff6d5c3..17de7c192 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.html
@@ -41,19 +41,23 @@ <h1 class="mb-2" translate>Holdings</h1>
 
 <!-- TABS ================================================================= -->
 <!--    3 tabs will be displayed : Issues, Holdings details, Local fields -->
-<tabset class="my-3">
-  <!-- ISSUES TAB ------------------------------------------------------------>
-  <tab id="holding-issues-field-tab" tabOrder="1">
-    <ng-template tabHeading>
+
+
+<p-tabView styleClass="mt-2">
+  <p-tabPanel>
+    <ng-template pTemplate="header">
       <i class="fa fa-list-ul mr-1"></i>{{ 'Issues' | translate }}
     </ng-template>
-    <div class="tab-content">
       <!-- top actions bar ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
       <div class="d-flex">
-        <button [routerLink]="[]" (click)="showMore('prediction', 3)" class="btn btn-sm btn-outline-primary">
-          <i class="fa fa-arrow-circle-o-up" aria-hidden="true"></i>
+        <p-button
+          [outlined]="true"
+          [routerLink]="[]"
+          (onClick)="showMore('prediction', 3)"
+        >
+          <i class="fa fa-arrow-circle-o-up mr-1" aria-hidden="true"></i>
           {{ 'Show more' | translate }} &hellip;
-        </button>
+        </p-button>
         @if (allowIssueCreation) {
           <button class="ml-auto btn btn-sm btn-outline-primary"
                   [routerLink]="['/records', 'items', 'new']"
@@ -75,24 +79,27 @@ <h1 class="mb-2" translate>Holdings</h1>
             @if (last) {
               <ng-container actions>
                 @if (allowIssueCreation) {
-                  <button type="button" class="btn btn-sm btn-outline-primary ml-1"
-                          title="{{ 'Quick receive' | translate }}"
-                          (click)="quickIssueReceive()">
-                    <i class="fa fa-check-circle"></i>
-                  </button>
+                  <p-button
+                    icon="fa fa-check-circle"
+                    [title]="'Quick receive'|translate"
+                    [outlined]="true"
+                    (onClick)="quickIssueReceive()"
+                  />
                 }
                 @if (allowIssueCreation) {
-                  <button type="button" class="btn btn-sm btn-outline-primary ml-1"
-                          title="{{ 'Receive and edit this issue' | translate }}"
-                          [routerLink]="['/records', 'items', 'new']"
-                          [queryParams]="{
-                                    'holding': holding.id,
-                                    'redirectTo': 'records/holdings/detail/' + holding.id,
-                                    'enumerationAndChronology': prediction.issue,
-                                    'expected_date': prediction.expected_date
-                                }">
-                    <i class="fa fa-plus"></i>
-                  </button>
+                  <p-button
+                    icon="fa fa-plus"
+                    [title]="'Receive and edit this issue'|translate"
+                    [outlined]="true"
+                    [routerLink]="['/records', 'items', 'new']"
+                    [queryParams]="{
+                      'holding': holding.id,
+                      'redirectTo': 'records/holdings/detail/' + holding.id,
+                      'enumerationAndChronology': prediction.issue,
+                      'expected_date': prediction.expected_date
+                    }"
+                    styleClass="ml-1"
+                  />
                 }
               </ng-container>
             }
@@ -107,39 +114,32 @@ <h1 class="mb-2" translate>Holdings</h1>
       @if (receivedItems.length < totalReceivedItems) {
         <div class="row mt-1">
           <div class="col">
-            <button [routerLink]="[]" (click)="showMore('received', 5)" class="btn btn-sm btn-outline-primary">
-              <i class="fa fa-arrow-circle-o-down" aria-hidden="true"></i>
-              {{ 'Show more' | translate }} ...
-            </button>
+            <p-button
+              [outlined]="true"
+              [routerLink]="[]"
+              (onClick)="showMore('received', 5)"
+            >
+              <i class="fa fa-arrow-circle-o-down mr-1" aria-hidden="true"></i>
+              {{ 'Show more' | translate }} &hellip;
+            </p-button>
             <span class="pl-3 small text-secondary">({{ showMoreIssuesCounter }})</span>
           </div>
         </div>
       }
-    </div>
-  </tab>
-  <!-- END OF ISSUES TAB ---------------------------------------------------->
+  </p-tabPanel>
 
-  <!-- DETAILS TAB ------------------------------------------------------------>
-  <tab id="holding-details-tab" tabOrder="2">
-    <ng-template tabHeading>
+  <p-tabPanel>
+    <ng-template pTemplate="header">
       <i class="fa fa-list-ul mr-1"></i><span translate>Details</span>
     </ng-template>
-    <div class="mt-3">
-      <admin-holding-detail context="holdings" [holding]="holding"></admin-holding-detail>
-    </div>
-  </tab>
-  <!-- END OF DETAILS TAB ---------------------------------------------------->
+    <admin-holding-detail context="holdings" [holding]="holding"></admin-holding-detail>
+  </p-tabPanel>
 
-  <!-- LOCAL FIELDS TAB ------------------------------------------------------------>
-  @if (displayLocalFieldsTab) {
-    <tab id="holding-local-field-tab" tabOrder="3">
-      <ng-template tabHeading>
-        <i class="fa fa-list-ul mr-1"></i><span translate>Local fields</span>
-      </ng-template>
-      <div class="mt-2">
-        <admin-local-field [resourceType]="'holdings'" [resourcePid]="holding.metadata.pid"></admin-local-field>
-      </div>
-    </tab>
-  }
-  <!-- END OF LOCAL FIELDS TAB ---------------------------------------------------->
-</tabset>
+  <p-tabPanel>
+    <ng-template pTemplate="header">
+      <i class="fa fa-list-ul mr-1"></i><span translate>Local fields</span>
+    </ng-template>
+    <admin-local-field [resourceType]="'holdings'" [resourcePid]="holding.metadata.pid"></admin-local-field>
+  </p-tabPanel>
+
+</p-tabView>
diff --git a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.ts b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.ts
index ecad65666..78bd51e67 100644
--- a/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/holding-detail-view/serial-holding-detail-view/serial-holding-detail-view.component.ts
@@ -15,14 +15,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { RecordPermissions } from '@app/admin/classes/permissions';
 import { HoldingsService, PredictionIssue } from '@app/admin/service/holdings.service';
-import { OperationLogsService } from '@app/admin/service/operation-logs.service';
 import { TranslateService } from '@ngx-translate/core';
-import { Record, RecordService } from '@rero/ng-core';
-import { IPermissions, IssueItemStatus, PERMISSIONS, PermissionsService, UserService} from '@rero/shared';
-import { ToastrService } from 'ngx-toastr';
+import { CONFIG, Record, RecordService } from '@rero/ng-core';
+import { IPermissions, IssueItemStatus, PERMISSIONS, PermissionsService, UserService } from '@rero/shared';
+import { MessageService } from 'primeng/api';
 
 
 @Component({
@@ -32,6 +31,13 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class SerialHoldingDetailViewComponent implements OnInit {
 
+  private holdingService: HoldingsService = inject(HoldingsService);
+  private recordService: RecordService = inject(RecordService);
+  private translateService: TranslateService = inject(TranslateService);
+  private permissionsService: PermissionsService = inject(PermissionsService);
+  private userService: UserService = inject(UserService);
+  private messageService: MessageService = inject(MessageService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** the holding record */
   @Input() holding: any;
@@ -84,26 +90,6 @@ export class SerialHoldingDetailViewComponent implements OnInit {
         {counter: additionalIssueCounter});
   }
 
-
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param holdingService: HoldingService
-   * @param recordService: RecordService
-   * @param translateService: TranslateService,
-   * @param toastrService: ToastrService
-   * @param permissionsService: PermissionsService
-   * @param userService: UserService
-   */
-  constructor(
-    private holdingService: HoldingsService,
-    private recordService: RecordService,
-    private translateService: TranslateService,
-    private toastrService: ToastrService,
-    private permissionsService: PermissionsService,
-    private userService: UserService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this._loadPrediction();
@@ -142,9 +128,14 @@ export class SerialHoldingDetailViewComponent implements OnInit {
    * This function allow to receive the next predicted issue for a serial holding
    */
   quickIssueReceive() {
-    this.holdingService.quickReceivedIssue(this.holding).subscribe(
-      (result) => {
-        this.toastrService.success(this.translateService.instant('New issue created.'));
+    this.holdingService.quickReceivedIssue(this.holding).subscribe({
+      next: (result) => {
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('Issue'),
+          detail: this.translateService.instant('New issue created.'),
+          life: CONFIG.MESSAGE_LIFE
+        });
         // change item structure to have same structure as received items
         const item = {
           id: result.issue.pid,
@@ -154,11 +145,16 @@ export class SerialHoldingDetailViewComponent implements OnInit {
         this.receivedItems.unshift(item);
         this._loadPrediction(); // as we received a predicted issue, we need to reload predictions
       },
-      (error) => {
-        const message = `[${error.status}-${error.statusText}] ${error.error.message}`;
-        this.toastrService.error(message, this.translateService.instant('Issue creation failed!'));
+      error: (error) => {
+        this.messageService.add({
+          severity: 'error',
+          summary: this.translateService.instant('Issue creation failed!'),
+          detail: `[${error.status}-${error.statusText}] ${error.error.message}`,
+          sticky: true,
+          closable: true
+        });
       }
-    );
+    });
   }
 
   // COMPONENT PRIVATE FUNCTIONS ==============================================
diff --git a/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.ts b/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.ts
index 25e8c6a62..b4aef024b 100644
--- a/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/ill-request-detail-view/ill-request-detail-view.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Observable } from 'rxjs';
@@ -26,6 +26,9 @@ import { IllRequestsService } from '../../../service/ill-requests.service';
 })
 export class IllRequestDetailViewComponent implements DetailRecord, OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+  private illRequestService: IllRequestsService = inject(IllRequestsService);
+
   // COMPONENT ATTRIBUTES =======================================================
   /** The observable resolving record data */
   record$: Observable<any>;
@@ -37,17 +40,6 @@ export class IllRequestDetailViewComponent implements DetailRecord, OnInit {
   /** the requester of the ILL request */
   requester = null;
 
-  // CONSTRUCTOR & HOOKS =======================================================
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param illRequestService - IllRequestsService
-   */
-  constructor(
-    private recordService: RecordService,
-    private illRequestService: IllRequestsService,
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this.record$.subscribe((record) => {
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.html b/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.html
index 83b25f2cb..e3e9cfd58 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.html
@@ -215,54 +215,44 @@ <h3 translate>Issue data</h3>
 
   <!-- TABS -->
   <section class="mt-3 mb-4">
-    <tabset>
-      <!-- CIRCULATION -->
-      <tab id="item-circulation" tabOrder="1">
-        <ng-template tabHeading>
+    <p-tabView>
+      <p-tabPanel>
+        <ng-template pTemplate="header">
           <i class="fa fa-exchange mr-1"></i>
           {{ 'Circulation' | translate }}
         </ng-template>
-        <div class="mt-2">
-          <admin-circulation-logs-dialog [resourcePid]="record.metadata.pid" [resourceType]="'item'"></admin-circulation-logs-dialog>
-          <admin-item-transactions [itemPid]="record.metadata.pid" (requestEvent)="updateItemStatus()"></admin-item-transactions>
-          <admin-item-fees
-            [itemPid]="record.metadata.pid"
-            [permissions]="permissions.PTTR_ACCESS"
-          ></admin-item-fees>
-          <!-- LEGACY CHECKOUT COUNT -->
-          @if (record.metadata | keyExists:'legacy_checkout_count') {
-            <section class="mb-4 mt-4">
-              <div class="card">
-                <div class="card-body">
-                  <dl class="row mb-0">
-                      <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
-                        Legacy checkout count
-                      </dt>
-                      <dd class="col-sm-7 col-md-8 mb-0">
-                        {{ record.metadata.legacy_checkout_count }}
-                      </dd>
-                  </dl>
-                </div>
+        <admin-circulation-logs-dialog [resourcePid]="record.metadata.pid" [resourceType]="'item'" />
+        <admin-item-transactions [itemPid]="record.metadata.pid" (requestEvent)="updateItemStatus()" />
+        <admin-item-fees [itemPid]="record.metadata.pid" [permissions]="permissions.PTTR_ACCESS" />
+        @if (record.metadata | keyExists:'legacy_checkout_count') {
+          <section class="mb-4 mt-4">
+            <div class="card">
+              <div class="card-body">
+                <dl class="row mb-0">
+                    <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>
+                      Legacy checkout count
+                    </dt>
+                    <dd class="col-sm-7 col-md-8 mb-0">
+                      {{ record.metadata.legacy_checkout_count }}
+                    </dd>
+                </dl>
               </div>
-            </section>
-          }
-        </div>
-      </tab>
-      <!-- LOCAL FIELDS TAB -->
-      <tab id="item-local-field-tab" tabOrder="1" [permissions]="permissions.LOFI_SEARCH">
-        <ng-template tabHeading>
+            </div>
+          </section>
+        }
+      </p-tabPanel>
+
+      <p-tabPanel>
+        <ng-template pTemplate="header">
           <i class="fa fa-list-ul mr-1"></i>
           {{ 'Local fields' | translate }}
         </ng-template>
-        <div class="mt-2">
-          <admin-local-field [resourceType]="'items'" [resourcePid]="record.metadata.pid"></admin-local-field>
-        </div>
-      </tab>
-      <!-- END OF LOCAL FIELDS TAB -->
-      <!-- CLAIMS TAB -->
+        <admin-local-field [resourceType]="'items'" [resourcePid]="record.metadata.pid" />
+      </p-tabPanel>
+
       @if (record.metadata?.issue?.claims) {
-        <tab id="item-claims-tab" tabOrder="2">
-          <ng-template tabHeading>
+        <p-tabPanel>
+          <ng-template pTemplate="header">
             <i class="fa fa-gavel mr-1"></i>
               <span [ngPlural]="record.metadata.issue.claims.counter">
                 <ng-template ngPluralCase="=0">{{ 'Claim' | translate }}</ng-template>
@@ -271,17 +261,15 @@ <h3 translate>Issue data</h3>
               </span>
               <span class="ml-2 badge badge-info font-weight-normal">{{ record.metadata.issue.claims.counter }}</span>
           </ng-template>
-          <div class="mt-2">
-            <ul>
-              @for (date of claimsDates; track date) {
-                <li>
-                  {{ date | dateTranslate: 'shortDate' }} - {{ date | dateTranslate: 'shortTime' }}
-                </li>
-              }
-            </ul>
-          </div>
-        </tab>
+          <ul>
+            @for (date of claimsDates; track date) {
+              <li>
+                {{ date | dateTranslate: 'shortDate' }} - {{ date | dateTranslate: 'shortTime' }}
+              </li>
+            }
+          </ul>
+        </p-tabPanel>
       }
-    </tabset>
+    </p-tabView>
   </section>
 }
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.ts b/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.ts
index 63db511b4..45a3f25e4 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-detail-view.component.ts
@@ -15,20 +15,21 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { ItemApiService } from '@app/admin/api/item-api.service';
 import { IssueService } from '@app/admin/service/issue.service';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
 import { RecordService } from '@rero/ng-core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { IPermissions, IssueItemStatus, PERMISSIONS, PERMISSION_OPERATOR, UserService } from '@rero/shared';
 import moment from 'moment';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Observable, Subscription } from 'rxjs';
 import { map, switchMap } from 'rxjs/operators';
 import { Item, ItemNote } from '../../../classes/items';
 import { HoldingsService } from '../../../service/holdings.service';
 import { OperationLogsService } from '../../../service/operation-logs.service';
 import { OrganisationService } from '../../../service/organisation.service';
-import { ItemApiService } from '@app/admin/api/item-api.service';
 
 @Component({
   selector: 'admin-item-detail-view',
@@ -38,6 +39,15 @@ import { ItemApiService } from '@app/admin/api/item-api.service';
 })
 export class ItemDetailViewComponent implements DetailRecord, OnInit, OnDestroy {
 
+  public itemApiService: ItemApiService = inject(ItemApiService);
+  private recordService: RecordService = inject(RecordService);
+  private holdingService: HoldingsService = inject(HoldingsService);
+  private operationLogsService: OperationLogsService= inject(OperationLogsService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private issueService: IssueService = inject(IssueService);
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+  private userService: UserService = inject(UserService);
+
   /** Observable resolving record data */
   record$: Observable<any>;
   /** Resource type */
@@ -54,7 +64,7 @@ export class ItemDetailViewComponent implements DetailRecord, OnInit, OnDestroy
   recordPermissions: any;
 
   /** Record subscription */
-  private recordObs: Subscription;
+  private subscription: Subscription = new Subscription();
 
   /**
    * Is operation log enabled
@@ -103,49 +113,29 @@ export class ItemDetailViewComponent implements DetailRecord, OnInit, OnDestroy
   permissions: IPermissions = PERMISSIONS;
   permissionOperator = PERMISSION_OPERATOR;
 
-  /**
-   * Constructor
-   * @param itemApiService - ItemApiService
-   * @param recordService - RecordService
-   * @param holdingService - HoldingsService
-   * @param operationLogsService - OperationLogsService
-   * @param organisationService - OrganisationService
-   * @param issueService - IssueService
-   * @param recordPermissionService - RecordPermissionService
-   * @param userService - UserService
-   */
-  constructor(
-    public itemApiService: ItemApiService,
-    private recordService: RecordService,
-    private holdingService: HoldingsService,
-    private operationLogsService: OperationLogsService,
-    private organisationService: OrganisationService,
-    private issueService: IssueService,
-    private recordPermissionService: RecordPermissionService,
-    private userService: UserService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
-    this.recordObs = this.record$.pipe(
-      switchMap((record: any) => {
-        return this.recordPermissionService.getPermission('items', record.metadata.pid).pipe(
-          map(permission => {
-            this.recordPermissions = this.recordPermissionService
-              .membership(this.userService.user, record.metadata.library.pid, permission);
-            return record;
-          })
-        )
+    this.subscription.add(
+      this.record$.pipe(
+        switchMap((record: any) => {
+          return this.recordPermissionService.getPermission('items', record.metadata.pid).pipe(
+            map(permission => {
+              this.recordPermissions = this.recordPermissionService
+                .membership(this.userService.user, record.metadata.library.pid, permission);
+              return record;
+            })
+          )
+        })
+      ).subscribe((record: any) => {
+        this.record = record;
+        this.recordService.getRecord('locations', record.metadata.location.pid, 1).subscribe(data => this.location = data);
       })
-    ).subscribe((record: any) => {
-      this.record = record;
-      this.recordService.getRecord('locations', record.metadata.location.pid, 1).subscribe(data => this.location = data);
-    });
+    );
   }
 
   /** OnDestroy hook */
   ngOnDestroy() {
-    this.recordObs.unsubscribe();
+    this.subscription.unsubscribe();
   }
 
   /**
@@ -185,8 +175,13 @@ export class ItemDetailViewComponent implements DetailRecord, OnInit, OnDestroy
 
   /** Open claim dialog */
   openClaimEmailDialog(): void {
-    const bsModalRef = this.issueService.openClaimEmailDialog(this.record);
-    bsModalRef.content.recordChange.subscribe(() => this.record$
-      .subscribe((record: any) => this.record = record));
+    const ref: DynamicDialogRef = this.issueService.openClaimEmailDialog(this.record);
+    this.subscription.add(
+      ref.onClose.subscribe((record: any) => {
+        if (record) {
+          this.record$.subscribe((record: any) => this.record = record);
+        }
+      })
+    );
   }
 }
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-fees/item-fees.component.ts b/projects/admin/src/app/record/detail-view/item-detail-view/item-fees/item-fees.component.ts
index a48ce3599..29438831d 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-fees/item-fees.component.ts
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-fees/item-fees.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { PatronTransactionApiService } from '@app/admin/api/patron-transaction-api.service';
 import { OrganisationService } from '@app/admin/service/organisation.service';
 import { tap } from 'rxjs';
@@ -25,6 +25,9 @@ import { tap } from 'rxjs';
 })
 export class ItemFeesComponent implements OnInit {
 
+  private patronTransactionApiService: PatronTransactionApiService = inject(PatronTransactionApiService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+
   /** Item pid */
   @Input() itemPid: string;
 
@@ -42,16 +45,6 @@ export class ItemFeesComponent implements OnInit {
     return this.organisationService.organisation;
   }
 
-  /**
-   * Constructor
-   * @param patronTransactionApiService - PatronTransactionApiService
-   * @param organisationService - OrganisationService
-   */
-  public constructor(
-    private patronTransactionApiService: PatronTransactionApiService,
-    private organisationService: OrganisationService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
       this.patronTransactionApiService.getActiveFeesByItemPid(this.itemPid)
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-page-detail/item-page-detail.component.ts b/projects/admin/src/app/record/detail-view/item-detail-view/item-page-detail/item-page-detail.component.ts
index ce6f19575..4b661a44e 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-page-detail/item-page-detail.component.ts
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-page-detail/item-page-detail.component.ts
@@ -14,15 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Location } from '@angular/common';
-import { Component, ComponentFactoryResolver } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { Component, inject } from '@angular/core';
 import { OperationLogsService } from '@app/admin/service/operation-logs.service';
-import { TranslateService } from '@ngx-translate/core';
-import { DetailComponent, RecordService, RecordUiService } from '@rero/ng-core';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { NgxSpinnerService } from 'ngx-spinner';
-import { ToastrService } from 'ngx-toastr';
+import { DetailComponent } from '@rero/ng-core';
 
 @Component({
   selector: 'admin-item-page-detail',
@@ -30,6 +24,8 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class ItemPageDetailComponent extends DetailComponent {
 
+  private operationLogsService: OperationLogsService = inject(OperationLogsService);
+
   /**
    * Is operation log enabled
    * @return boolean
@@ -37,34 +33,4 @@ export class ItemPageDetailComponent extends DetailComponent {
   get isEnabledOperationLog(): boolean {
     return this.operationLogsService.isLogVisible('items');
   }
-
-  /**
-   * Constructor
-   * @param route - ActivatedRoute
-   * @param router - Router
-   * @param location - Location
-   * @param componentFactoryResolver - ComponentFactoryResolver
-   * @param recordService - RecordService
-   * @param recordUiService - RecordUiService
-   * @param toastrService - ToastrService
-   * @param translate - TranslateService
-   * @param spinner - NgxSpinnerService
-   * @param bsModalService - BsModalService
-   * @param operationLogsService - OperationLogsService
-   */
-  constructor(
-    protected route: ActivatedRoute,
-    protected router: Router,
-    protected location: Location,
-    protected componentFactoryResolver: ComponentFactoryResolver,
-    protected recordService: RecordService,
-    protected recordUiService: RecordUiService,
-    protected toastrService: ToastrService,
-    protected translate: TranslateService,
-    protected spinner: NgxSpinnerService,
-    protected bsModalService: BsModalService,
-    private operationLogsService: OperationLogsService,
-  ) {
-    super(route, router, location, componentFactoryResolver, recordService, recordUiService, toastrService, translate, spinner);
-  }
 }
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.html b/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.html
index bac7e3105..804035012 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.html
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.html
@@ -60,7 +60,7 @@
         <div class="col-1 text-right">
           @if (canCancelRequest()) {
             <button type="button" class="btn btn-outline-danger btn-sm"
-              (click)="showCancelRequestDialog()"
+              (click)="showCancelRequestDialog($event)"
               name="cancel"
             >
               <i class="fa fa-trash-o" aria-hidden="true"></i>
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.ts b/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.ts
index d8e492f62..4b013b535 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.ts
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-transaction/item-transaction.component.ts
@@ -14,8 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
 import { ItemsService } from '@app/admin/service/items.service';
 import { LoanService } from '@app/admin/service/loan.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -29,6 +28,11 @@ import { map } from 'rxjs/operators';
 })
 export class ItemTransactionComponent implements OnInit, OnDestroy {
 
+  private userService: UserService = inject(UserService);
+  private translateService: TranslateService = inject(TranslateService);
+  private itemService: ItemsService = inject(ItemsService);
+  private loanService: LoanService = inject(LoanService);
+
   // COMPONENTS ATTRIBUTES ===============================================================
   /** Loan Record */
   @Input() transaction: any;
@@ -70,22 +74,6 @@ export class ItemTransactionComponent implements OnInit, OnDestroy {
     return this.translateService.instant('No pickup location');
   }
 
-
-  // CONSTRUCTOR & HOOKS ==================================================================
-  /**
-   * constructor
-   * @param userService - User service
-   * @param translateService - TranslateService
-   * @param itemService - ItemsService
-   * @param loanService - LoanService
-   */
-  constructor(
-    private userService: UserService,
-    private translateService: TranslateService,
-    private itemService: ItemsService,
-    private loanService: LoanService
-  ) {}
-
   /** OnInit hook */
   ngOnInit() {
     this.currentUser = this.userService.user;
@@ -122,11 +110,9 @@ export class ItemTransactionComponent implements OnInit, OnDestroy {
   }
 
   /** Show a confirmation dialog box for cancel request. */
-  showCancelRequestDialog(): void {
-    this.loanService.cancelRequestDialog().subscribe((confirm: boolean) => {
-      if (confirm) {
-        this.emitCancelRequest();
-      }
+  showCancelRequestDialog(event: Event): void {
+    this.loanService.cancelRequestDialog(event, () => {
+      this.emitCancelRequest();
     });
   }
 
diff --git a/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.ts b/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.ts
index 3bea04209..7d7d3cc0d 100644
--- a/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.ts
+++ b/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.ts
@@ -15,21 +15,27 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { LoanService } from '@app/admin/service/loan.service';
 import { TranslateService } from '@ngx-translate/core';
+import { CONFIG } from '@rero/ng-core';
 import { IPermissions, PERMISSIONS, UserService } from '@rero/shared';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { ToastrService } from 'ngx-toastr';
-import { LoanService } from '@app/admin/service/loan.service';
-import { forkJoin } from 'rxjs';
-import { first } from 'rxjs/operators';
+import { MessageService } from 'primeng/api';
+import { DialogService } from 'primeng/dynamicdialog';
+import { forkJoin, Subscription } from 'rxjs';
 import { ItemRequestComponent } from '../../document-detail-view/item-request/item-request.component';
 
 @Component({
   selector: 'admin-item-transactions',
   templateUrl: './item-transactions.component.html'
 })
-export class ItemTransactionsComponent implements OnInit {
+export class ItemTransactionsComponent implements OnInit, OnDestroy {
+
+  private messageService: MessageService = inject(MessageService);
+  private dialogService: DialogService = inject(DialogService);
+  private loanService: LoanService = inject(LoanService);
+  private translateService: TranslateService = inject(TranslateService);
+  private userService: UserService = inject(UserService);
 
   // COMPONENTS ATTRIBUTES ====================================================
   /** Item record */
@@ -46,22 +52,9 @@ export class ItemTransactionsComponent implements OnInit {
   /** return all permissions */
   permissions: IPermissions = PERMISSIONS;
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param loanService - LoanService
-   * @param modalService - BsModalService
-   * @param toastrService - ToastrService
-   * @param translateService - TranslateService
-   * @param userService - UserService
-   */
-  constructor(
-    private loanService: LoanService,
-    private modalService: BsModalService,
-    private toastrService: ToastrService,
-    private translateService: TranslateService,
-    private userService: UserService
-  ) { }
+  private subscription = new Subscription();
+
+  // HOOKS ======================================================
 
   /** OnInit hook */
   ngOnInit() {
@@ -74,20 +67,28 @@ export class ItemTransactionsComponent implements OnInit {
       });
   }
 
+  ngOnDestroy(): void {
+      this.subscription.unsubscribe();
+  }
+
   // COMPONENTS FUNCTIONS =====================================================
   /**
    * Add request on this item
    */
   addRequest(): void {
-    const modalRef = this.modalService.show(ItemRequestComponent, {
-      initialState: { recordPid: this.itemPid, recordType: 'item' }
+    const ref = this.dialogService.open(ItemRequestComponent, {
+      header: this.translateService.instant('Item request'),
+      width: '40vw',
+      data: { recordPid: this.itemPid, recordType: 'item' }
     });
-    modalRef.content.onSubmit
-      .pipe(first())
-      .subscribe(_ => {
-        this.requestEvent.emit();
-        this._refreshRequestList();
-      });
+    this.subscription.add(
+      ref.onClose.subscribe((value: boolean) => {
+        if (value) {
+          this.requestEvent.emit();
+          this._refreshRequestList();
+        }
+      })
+    );
   }
 
   /**
@@ -98,11 +99,12 @@ export class ItemTransactionsComponent implements OnInit {
     this.loanService
       .cancelLoan(this.itemPid, transaction.metadata.pid, this.userService.user.currentLibrary)
       .subscribe((itemData: any) => {
-        const status = this.translateService.instant(itemData.status);
-        this.toastrService.warning(
-          this.translateService.instant('The pending request has been cancelled.'),
-          this.translateService.instant('Request')
-        );
+        this.messageService.add({
+          severity: 'warn',
+          summary: this.translateService.instant('Request'),
+          detail: this.translateService.instant('The pending request has been cancelled.'),
+          life: CONFIG.MESSAGE_LIFE
+        });
         this.requestEvent.emit();
         this._refreshRequestList();
       });
@@ -116,10 +118,12 @@ export class ItemTransactionsComponent implements OnInit {
     this.loanService
       .updateLoanPickupLocation(data.transaction.metadata.pid, data.pickupLocationPid)
       .subscribe(_ => {
-        this.toastrService.success(
-          this.translateService.instant('The pickup location has been changed.'),
-          this.translateService.instant('Request')
-        );
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('Request'),
+          detail: this.translateService.instant('The pickup location has been changed.'),
+          life: CONFIG.MESSAGE_LIFE
+        });
         this._refreshRequestList();
       });
   }
diff --git a/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.html b/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.html
index 4d3f40c70..172017081 100644
--- a/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.html
@@ -48,16 +48,22 @@ <h1>{{ record.name }}</h1>
     <!-- locations ======================================================== -->
     <p-accordionTab>
       <ng-template pTemplate="header">
-        <div class="w-100 d-flex align-items-center">
-          <i class="fa fa-map-marker mr-2"></i>
-          <span translate>Locations</span>
+        <div class="w-full flex">
+          <div class="flex w-full align-items-center">
+            <i class="fa fa-map-marker mr-2"></i>
+            <span translate>Locations</span>
+          </div>
           @if (isUserCanAddLocation && activeIndex === 0) {
-            <a
-              [routerLink]="['/', 'records', 'locations', 'new']"
-              [queryParams]="{ library: record.pid }"
-              class="ml-2 btn btn-sm btn-outline-primary ml-auto">
-              <i class="fa fa-plus-square-o"></i> {{ 'Add' | translate }} &hellip;
-            </a>
+            <div class="flex w-full justify-content-end">
+              <p-button
+                icon="fa fa-plus-square-o"
+                [label]="'Add'|translate"
+                [outlined]="true"
+                [routerLink]="['/', 'records', 'locations', 'new']"
+                [queryParams]="{ library: record.pid }"
+                styleClass="ml-2 align-items-right"
+              />
+            </div>
           }
         </div>
       </ng-template>
diff --git a/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.ts b/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.ts
index 1be9995d0..84cbbf33a 100644
--- a/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/library-detail-view/library-detail-view.component.ts
@@ -15,12 +15,12 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Record } from '@rero/ng-core/lib/record/record';
-import { Observable, Subscription } from 'rxjs';
 import { UserService } from '@rero/shared';
+import { Observable, Subscription } from 'rxjs';
 import { Library } from '../../../classes/library';
 
 @Component({
@@ -30,6 +30,9 @@ import { Library } from '../../../classes/library';
 })
 export class LibraryDetailViewComponent implements DetailRecord, OnInit, OnDestroy {
 
+  private recordService: RecordService = inject(RecordService);
+  private userService: UserService = inject(UserService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Observable resolving record data */
   record$: Observable<any>;
@@ -47,17 +50,6 @@ export class LibraryDetailViewComponent implements DetailRecord, OnInit, OnDestr
   /** Record subscription */
   private recordObs: Subscription;
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param userService - UserService
-   */
-  constructor(
-    private recordService: RecordService,
-    private userService: UserService
-  ) { }
-
   /** OnInit hook */
   ngOnInit() {
    this.recordObs = this.record$.subscribe((data: any) => {
diff --git a/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.html b/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.html
index 0d24e917a..503106edd 100644
--- a/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.html
+++ b/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.html
@@ -20,39 +20,49 @@
   </div>
   <div class="col-2 text-right">
     @if (location.metadata.is_pickup) {
-      <i class="fa fa-truck ml-2" title="{{ 'Pickup location' | translate }}"></i>
+      <i class="fa fa-truck ml-2" [title]="'Pickup location'|translate"></i>
     }
     @if (location.metadata.is_ill_pickup) {
-      <i class="fa fa-truck ml-2 text-primary" title="{{ 'ILL pickup location' | translate }}"></i>
+      <i class="fa fa-truck ml-2 text-primary" [title]="'ILL pickup location'|translate"></i>
     }
     @if (location.metadata.is_online) {
-      <i class="fa fa-globe ml-1" title="{{ 'Online location' | translate }}"></i>
+      <i class="fa fa-globe ml-1" [title]="'Online location'|translate"></i>
     }
   </div>
   <div class="col-lg-2 col-sm-3 col-2">
     <div class=" float-right ml-2">
       <!-- Edit button -->
       @if (permissions.update.can) {
-        <button type="button" class="btn btn-outline-primary btn-sm ml-1"
-                title="{{ 'Edit' | translate }}"
-                [routerLink]="['/records', 'locations', 'edit', location.metadata.pid]">
-          <i class="fa fa-pencil"></i>
-        </button>
+        <p-button
+          icon="fa fa-pencil"
+          [title]="'Edit'|translate"
+          [outlined]="true"
+          [routerLink]="['/records', 'locations', 'edit', location.metadata.pid]"
+        />
       }
       <!-- Delete button -->
       @if (permissions.delete.can) {
-        <button type="button" class="btn btn-outline-danger btn-sm ml-1"
-                title="{{ 'Delete' | translate }}"
-                (click)="delete(location.metadata.pid)">
-          <i class="fa fa-trash" ></i>
-        </button>
+        <p-button
+          icon="fa fa-trash"
+          severity="danger"
+          [title]="'Delete'|translate"
+          [outlined]="true"
+          (onClick)="delete(location.metadata.pid)"
+          styleClass="ml-1"
+        />
       } @else {
-        <button type="button" class="btn btn-sm btn-outline-danger ml-1 disabled"
-                title="{{ 'Delete' | translate }}"
-                [popover]="tolTemplate" triggers="mouseenter:mouseleave">
-          <i class="fa fa-trash"></i>
-        </button>
-        <ng-template #tolTemplate><div [innerHtml]="deleteInfoMessage | nl2br"></div></ng-template>
+        <p-button
+          icon="fa fa-trash"
+          severity="danger"
+          [title]="'Delete'|translate"
+          [outlined]="true"
+          [pTooltip]="tooltipContent"
+          tooltipPosition="top"
+          styleClass="text-red-200 ml-1"
+        />
+        <ng-template #tooltipContent>
+          <span [innerHTML]="deleteInfoMessage"></span>
+        </ng-template>
       }
     </div>
   </div>
diff --git a/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.ts b/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.ts
index f55e372d9..743496dcf 100644
--- a/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.ts
+++ b/projects/admin/src/app/record/detail-view/library-detail-view/location/location.component.ts
@@ -14,9 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { RecordUiService } from '@rero/ng-core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
+import { RecordUiService } from '@rero/ng-core';
 
 @Component({
   selector: 'admin-location',
@@ -24,6 +24,9 @@ import { RecordPermissionService } from '@app/admin/service/record-permission.se
 })
 export class LocationComponent implements OnInit {
 
+  private recordUiService: RecordUiService = inject(RecordUiService);
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+
   /** The location whose details are displayed */
   @Input() location: any;
 
@@ -36,16 +39,6 @@ export class LocationComponent implements OnInit {
   /** location record permission */
   permissions: any;
 
-  /**
-   * Constructor
-   * @param recordUiService: RecordUiService
-   * @param recordPermissionService: RecordPermissionService
-   */
-  constructor(
-    private recordUiService: RecordUiService,
-    private recordPermissionService: RecordPermissionService
-  ) { }
-
   /**
    * Init
    */
diff --git a/projects/admin/src/app/record/detail-view/local-field/local-field.component.html b/projects/admin/src/app/record/detail-view/local-field/local-field.component.html
index 817d19f99..eec34014e 100644
--- a/projects/admin/src/app/record/detail-view/local-field/local-field.component.html
+++ b/projects/admin/src/app/record/detail-view/local-field/local-field.component.html
@@ -18,7 +18,7 @@
 @defer (when isLoading) {
   @if (localFields.length > 0) {
     <div class="container-fluid">
-      <dl class="row">
+      <dl class="grid">
         @for (field of localFields; track field) {
           <dt class="col-2 label-title" translate>{{ 'local_' + field.name }}</dt>
           <dd class="col-10">{{ field.value | join:'; ' }}</dd>
@@ -28,25 +28,25 @@
       <div class="mt-2">
         @if (recordPermissions) {
           @if (recordPermissions.update.can) {
-            <button
+            <p-button
+              icon="fa fa-pencil"
+              [label]="'Edit'|translate"
+              [outlined]="true"
               [routerLink]="['/records', 'local_fields', 'edit', localFieldRecordPid]"
               [queryParams]="{ type: resourceType, ref: resourcePid }"
-              class="btn btn-sm btn-outline-primary ml-1"
-              name="edit"
-              type="button"
-              title="{{ 'Edit' | translate }}"
-            >
-              <i class="fa fa-pencil"></i> {{ 'Edit' | translate }}
-            </button>
+              size="small"
+              styleClass="mr-1"
+            />
           }
           @if (recordPermissions.delete.can) {
-            <button
-              class="btn btn-sm btn-outline-danger ml-1"
-              title="{{ 'Delete' | translate }}"
-              (click)="delete()"
-            >
-              <i class="fa fa-trash"></i> {{ 'Delete' | translate }}
-            </button>
+            <p-button
+              icon="fa fa-trash"
+              [label]="'Delete'|translate"
+              severity="danger"
+              [outlined]="true"
+              size="small"
+              (onClick)="delete()"
+            />
           }
         } @else {
           &nbsp;
@@ -55,14 +55,13 @@
     </div>
   } @else {
     <div class="text-right">
-      <a
+      <p-button
+        icon="fa fa-plus-square-o"
+        [label]="'Add local fields'|translate"
+        [outlined]="true"
         [routerLink]="['/records', 'local_fields', 'new']"
         [queryParams]="{ type: resourceType, ref: resourcePid }"
-        class="btn btn-sm btn-outline-primary"
-        [permissions]="permissions.LOFI_CREATE"
-      >
-        <i class="fa fa-plus-square-o"></i> {{ 'Add local fields' | translate }}
-      </a>
+      />
     </div>
   }
 
diff --git a/projects/admin/src/app/record/detail-view/local-field/local-field.component.ts b/projects/admin/src/app/record/detail-view/local-field/local-field.component.ts
index 5a8130133..54ddc24b5 100644
--- a/projects/admin/src/app/record/detail-view/local-field/local-field.component.ts
+++ b/projects/admin/src/app/record/detail-view/local-field/local-field.component.ts
@@ -15,12 +15,11 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
-import { IPermissions, JoinPipe, PERMISSIONS, UserService } from '@rero/shared';
-import { Subscription } from 'rxjs';
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { LocalFieldApiService } from '@app/admin/api/local-field-api.service';
 import { RecordPermissionService } from '@app/admin/service/record-permission.service';
+import { IPermissions, JoinPipe, PERMISSIONS, UserService } from '@rero/shared';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'admin-local-field',
@@ -29,6 +28,10 @@ import { RecordPermissionService } from '@app/admin/service/record-permission.se
 })
 export class LocalFieldComponent implements OnInit, OnDestroy {
 
+  private localFieldApiService: LocalFieldApiService = inject(LocalFieldApiService);
+  private userService: UserService = inject(UserService);
+  private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Resource Type */
   @Input() resourceType: string;
@@ -55,19 +58,6 @@ export class LocalFieldComponent implements OnInit, OnDestroy {
   /** all component subscription */
   private subscriptions = new Subscription();
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param localFieldApiService - LocalFieldApiService
-   * @param userService - UserService
-   * @param recordPermissionService - RecordPermissionService
-   */
-  constructor(
-    private localFieldApiService: LocalFieldApiService,
-    private userService: UserService,
-    private recordPermissionService: RecordPermissionService
-  ) { }
-
   /** OnInit hook */
   ngOnInit() {
     this.localFieldApiService
diff --git a/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.html b/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.html
index 2da212c21..5bdbaf68c 100644
--- a/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/location-detail-view/location-detail-view.component.html
@@ -20,26 +20,26 @@ <h1 class="mb-3">{{ data.name | translate }}</h1>
       <!-- DETAILS -->
       <section class="m-2 p-2">
           <!-- LIBRARY -->
-          <dl class="row mb-0">
-              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Library</dt>
-              <dd class="col-sm-7 col-md-8 mb-0">
+          <dl class="grid mb-1">
+              <dt class="col-3 label-title" translate>Library</dt>
+              <dd class="col-7 mb-0">
                   {{ data.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
               </dd>
           </dl>
           <!-- NAME -->
-          <dl class="row mb-0">
-              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Name</dt>
-              <dd class="col-sm-7 col-md-8 mb-0">{{ data.name }}</dd>
+          <dl class="grid mb-1">
+              <dt class="col-3 label-title" translate>Name</dt>
+              <dd class="col-7 mb-0">{{ data.name }}</dd>
           </dl>
           <!-- CODE -->
-          <dl class="row mb-0">
-              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Code</dt>
-              <dd class="col-sm-7 col-md-8 mb-0">{{ data.code }}</dd>
+          <dl class="grid mb-1">
+              <dt class="col-3 label-title" translate>Code</dt>
+              <dd class="col-7 mb-0">{{ data.code }}</dd>
           </dl>
           <!-- IS ONLINE -->
-          <dl class="row mb-0">
-            <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Is online</dt>
-            <dd class="col-sm-7 col-md-8 mb-0">
+          <dl class="grid mb-1">
+            <dt class="col-3 label-title" translate>Is online</dt>
+            <dd class="col-7 mb-0">
               <i class="fa"
                   [ngClass]="(data.is_online) ? 'fa-check' : 'fa-times'"
                   [ngStyle]="{'color': (data.is_online) ? 'green' : 'red'}"
@@ -48,9 +48,9 @@ <h1 class="mb-3">{{ data.name | translate }}</h1>
             </dd>
           </dl>
           <!-- IS PICKUP -->
-          <dl class="row mb-0">
-              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Is pickup</dt>
-              <dd class="col-sm-7 col-md-8 mb-0">
+          <dl class="grid mb-1">
+              <dt class="col-3 label-title" translate>Is pickup</dt>
+              <dd class="col-7 mb-0">
                 <i class="fa"
                     [ngClass]="(data.is_pickup) ? 'fa-check' : 'fa-times'"
                     [ngStyle]="{'color': (data.is_pickup) ? 'green' : 'red'}"
@@ -60,16 +60,16 @@ <h1 class="mb-3">{{ data.name | translate }}</h1>
           </dl>
           <!-- PICKUP LOCATION NAME -->
           @if (data.pickup_name !== undefined && data.is_pickup) {
-            <dl class="row mb-0">
-                <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Pickup location name</dt>
-                <dd class="col-sm-7 col-md-8 mb-0">{{ data.pickup_name }}</dd>
+            <dl class="grid mb-1">
+                <dt class="col-3 label-title" translate>Pickup location name</dt>
+                <dd class="col-7 mb-0">{{ data.pickup_name }}</dd>
             </dl>
           }
           <h4 class="mt-4" translate>Restrictions</h4>
           <!-- ALLOW REQUEST -->
-          <dl class="row mb-0">
-            <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Allow request</dt>
-            <dd class="col-sm-7 col-md-8 mb-0">
+          <dl class="grid mb-1">
+            <dt class="col-3 label-title" translate>Allow request</dt>
+            <dd class="col-7 mb-0">
               <i class="fa"
                   [ngClass]="(data.allow_request) ? 'fa-check' : 'fa-times'"
                   [ngStyle]="{'color': (data.allow_request) ? 'green' : 'red'}"
@@ -79,9 +79,9 @@ <h4 class="mt-4" translate>Restrictions</h4>
           </dl>
           <!-- SEND NOTIFICATION -->
           @if (data.allow_request) {
-            <dl class="row mb-0">
-              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Send notification</dt>
-              <dd class="col-sm-7 col-md-8 mb-0">
+            <dl class="grid mb-1">
+              <dt class="col-3 label-title" translate>Send notification</dt>
+              <dd class="col-7 mb-0">
                 <i class="fa"
                     [ngClass]="(data.send_notification) ? 'fa-check' : 'fa-times'"
                     [ngStyle]="{'color': (data.send_notification) ? 'green' : 'red'}"
@@ -92,16 +92,16 @@ <h4 class="mt-4" translate>Restrictions</h4>
           }
           <!-- CONTACT EMAIL -->
           @if (data.send_notification && data.allow_request) {
-            <dl class="row mb-0">
-              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Contact email</dt>
-              <dd class="col-sm-7 col-md-8 mb-0">{{ data.notification_email }}</dd>
+            <dl class="grid mb-1">
+              <dt class="col-3 label-title" translate>Contact email</dt>
+              <dd class="col-7 mb-0">{{ data.notification_email }}</dd>
             </dl>
           }
           <!-- RESTRICT PICKUP TO -->
           @if (data.restrict_pickup_to && data.allow_request) {
-            <dl class="row mb-0">
-              <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Restrict pickup to</dt>
-              <dd class="col-sm-7 col-md-8 mb-0">
+            <dl class="grid mb-1">
+              <dt class="col-3 label-title" translate>Restrict pickup to</dt>
+              <dd class="col-7 mb-0">
                 <ul>
                   @for (location of data.restrict_pickup_to; track location) {
                     <li>
diff --git a/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.html b/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.html
index 0aa85f3bb..4f37d7ad2 100644
--- a/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.html
@@ -16,26 +16,26 @@
 -->
 @if (record$ | async; as record) {
   <h1>{{ record.metadata.name }}</h1>
-  <dl class="row">
+  <dl class="grid">
     <!-- ADDRESS -->
     @if (record.metadata.address) {
-      <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Address</dt>
-      <dd class="col-sm-7 col-md-8 mb-0" [innerHTML]="record.metadata.address | nl2br"></dd>
+      <dt class="col-3 label-title" translate>Address</dt>
+      <dd class="col-7 mb-0" [innerHTML]="record.metadata.address | nl2br"></dd>
     }
     <!-- CODE -->
     @if (record.metadata.code) {
-      <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Code</dt>
-      <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.code }}</dd>
+      <dt class="col-3 label-title" translate>Code</dt>
+      <dd class="col-7 mb-0">{{ record.metadata.code }}</dd>
     }
     <!-- DEFAULT CURRENCY -->
     @if (record.metadata.default_currency) {
-      <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Default currency</dt>
-      <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.default_currency }}</dd>
+      <dt class="col-3 label-title" translate>Default currency</dt>
+      <dd class="col-7 mb-0">{{ record.metadata.default_currency }}</dd>
     }
   </dl>
 
   <!-- OPERATION LOGS-->
   @if (isEnabledOperationLog) {
-    <admin-operation-log resourceType="organisations" [resourcePid]="record.metadata.pid"></admin-operation-log>
+    <admin-operation-log resourceType="organisations" [resourcePid]="record.metadata.pid" />
   }
 }
diff --git a/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.ts b/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.ts
index b43c1d348..a99817333 100644
--- a/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/organisation-detail-view/organisation-detail-view.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Observable } from 'rxjs';
 import { OperationLogsService } from '../../../service/operation-logs.service';
@@ -25,6 +25,8 @@ import { OperationLogsService } from '../../../service/operation-logs.service';
 })
 export class OrganisationDetailViewComponent implements DetailRecord {
 
+  private operationLogsService: OperationLogsService = inject(OperationLogsService);
+
   /** Record observable */
   record$: Observable<any>;
 
@@ -41,9 +43,4 @@ export class OrganisationDetailViewComponent implements DetailRecord {
   get isEnabledOperationLog(): boolean {
     return this.operationLogsService.isLogVisible('organisations');
   }
-
-  /** Constructor
-   * @param operationLogsService - OperationLogsService
-   */
-  constructor(private operationLogsService: OperationLogsService) {}
 }
diff --git a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.ts b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.ts
index 5dbf4f241..008d5f31b 100644
--- a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-detail-view.component.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { IPermissions, PERMISSIONS, PermissionsService } from '@rero/shared';
 import { Observable, Subscription } from 'rxjs';
@@ -35,6 +35,9 @@ interface PatronPhone {
 })
 export class PatronDetailViewComponent implements OnInit, DetailRecord, OnDestroy {
 
+  private operationLogsService: OperationLogsService = inject(OperationLogsService);
+  private permissionsService: PermissionsService = inject(PermissionsService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Data from patron we received */
   record$: Observable<any>;
@@ -72,17 +75,6 @@ export class PatronDetailViewComponent implements OnInit, DetailRecord, OnDestro
     return this.permissionsService.canAccess(PERMISSIONS.PERM_MANAGEMENT);
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor.
-   * @param operationLogsService - OperationLogsService
-   * @param permissionsService - PermissionsService
-   */
-  constructor(
-    private operationLogsService: OperationLogsService,
-    private permissionsService: PermissionsService
-  ) {}
-
   /** OnInit hook */
   ngOnInit() {
     this.subscription$ = this.record$.subscribe((record) => {
diff --git a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.ts b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.ts
index 86acab0d0..b5ecc8923 100644
--- a/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.ts
+++ b/projects/admin/src/app/record/detail-view/patron-detail-view/patron-permissions/patron-permissions.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, inject, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { IPatronPermission, PermissionApiService } from 'projects/admin/src/app/api/permission-api.service';
 
 @Component({
@@ -24,6 +24,8 @@ import { IPatronPermission, PermissionApiService } from 'projects/admin/src/app/
 })
 export class PatronPermissionsComponent implements OnChanges {
 
+  private permissionApiService: PermissionApiService = inject(PermissionApiService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Show or hide */
   @Input() hidden: boolean = false;
@@ -35,13 +37,6 @@ export class PatronPermissionsComponent implements OnChanges {
   /** User permissions filtered */
   filteredPermissions: IPatronPermission[] = [];
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param permissionApiService - PermissionApiService
-   */
-  constructor(private permissionApiService: PermissionApiService) {}
-
   /** OnChanges hook */
   ngOnChanges(changes: SimpleChanges): void {
     if (!changes.hidden.currentValue && this.permissions.length === 0) {
diff --git a/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html b/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html
index fa07ebba7..a9c9c5313 100644
--- a/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.html
@@ -16,84 +16,86 @@
 -->
 @if (record$ | async; as record) {
   <h1 class="mb-3">{{ record.metadata.name }}</h1>
-  <dl class="row">
+  <dl class="grid">
     <!-- CODE -->
     @if (record.metadata.code) {
-      <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Code</dt>
-      <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.code }}</dd>
+      <dt class="col-3 label-title" translate>Code</dt>
+      <dd class="col-7 mb-0">{{ record.metadata.code }}</dd>
     }
     <!-- DESCRIPTION -->
     @if (record.metadata.description) {
-      <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Description</dt>
-      <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.description }}</dd>
-
+      <dt class="col-3 label-title" translate>Description</dt>
+      <dd class="col-7 mb-0">{{ record.metadata.description }}</dd>
     }
     <!-- YEARLY SUBSCRIPTION -->
-    <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Yearly subscription</dt>
-    <dd class="col-sm-7 col-md-8 mb-0">
-      @if (record.metadata.subscription_amount > 0) {
-        <i class="fa fa-check" style="color:green;" aria-hidden="true"></i>
-      } @else {
-        <i class="fa fa-times" style="color:red;" aria-hidden="true"></i>
-      }
+    <dt class="col-3 label-title" translate>Yearly subscription</dt>
+    <dd class="col-7 mb-0">
+      <i class="fa" [ngClass]="{
+        'fa-check text-green-500': record.metadata.subscription_amount > 0,
+        'fa-times text-red-500': !(record.metadata.subscription_amount > 0)
+      }" aria-hidden="true"></i>
     </dd>
     <!-- SUBSCRIPTION AMOUNT -->
     @if (record.metadata.subscription_amount) {
-      <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Subscription amount</dt>
-      <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.subscription_amount | currency: organisation.default_currency }}</dd>
+      <dt class="col-3 label-title" translate>Subscription amount</dt>
+      <dd class="col-7 mb-0">{{ record.metadata.subscription_amount | currency: organisation.default_currency }}</dd>
     }
 
     <!-- Limits -->
     @if (record.metadata.limits) {
       <section class="container">
         <h2 class="mt-4" translate>Limits</h2>
-        <div class="card">
-          <!-- Checkout limits -->
-          <div class="card-header">
-            <i class="fa" [ngClass]="{
-              'fa-circle text-success': record.metadata.limits.checkout_limits,
-              'fa-circle-thin': !record.metadata.limits.checkout_limits
-            }"></i>
-            <span class="pl-3" translate>Limit by checkouts</span>
-          </div>
+        <!-- Checkout limits -->
+        <p-fieldset>
+          <ng-template pTemplate="header">
+            <div class="flex align-items-center gap-2 px-2">
+              <i class="fa" [ngClass]="{
+                'fa-circle text-success': record.metadata.limits.checkout_limits,
+                'fa-circle-thin': !record.metadata.limits.checkout_limits
+              }"></i>
+              <span class="pl-3" translate>Limit by checkouts</span>
+            </div>
+          </ng-template>
           @if (record.metadata.limits.checkout_limits) {
-            <div class="card-body">
-              <dl class="row m-0">
-                <dt class="col-lg-3 col-sm-4 label-title" translate>General limit</dt>
-                <dd class="col">{{ record.metadata.limits.checkout_limits.global_limit }}</dd>
+            <dl class="grid m-0">
+              <dt class="col-3 label-title" translate>General limit</dt>
+              <dd class="col">{{ record.metadata.limits.checkout_limits.global_limit }}</dd>
+              <dd class="w-100 m-0"></dd>
+              @if (record.metadata.limits.checkout_limits.library_limit) {
+                <dt class="col-3 label-title" translate>Library limit</dt>
+                <dd class="col">{{ record.metadata.limits.checkout_limits.library_limit }}</dd>
                 <dd class="w-100 m-0"></dd>
-                @if (record.metadata.limits.checkout_limits.library_limit) {
-                  <dt class="col-lg-3 col-sm-4 label-title" translate>Library limit</dt>
-                  <dd class="col">{{ record.metadata.limits.checkout_limits.library_limit }}</dd>
-                  <dd class="w-100 m-0"></dd>
-                }
-                @if (record.metadata.limits.checkout_limits.library_exceptions) {
-                  <dt class="col-lg-3 col-sm-4 label-title" translate>Exceptions</dt>
-                  <dd class="col">
-                    <ul class="list-unstyled">
-                      @for (exception of record.metadata.limits.checkout_limits.library_exceptions; track exception) {
-                        <li class="row">
-                          <div class="col-lg-10 col-sm-9">
-                            <i class="fa fa-university pr-2"></i>
-                            {{ exception.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
-                          </div>
-                          <dd class="col-lg-2 col-sm-1">{{ exception.value }}</dd>
-                        </li>
-                      }
-                    </ul>
-                  </dd>
-                }
-              </dl>
-            </div>
+              }
+              @if (record.metadata.limits.checkout_limits.library_exceptions) {
+                <dt class="col-3 label-title" translate>Exceptions</dt>
+                <dd class="col">
+                  <ul class="list-unstyled">
+                    @for (exception of record.metadata.limits.checkout_limits.library_exceptions; track exception) {
+                      <li class="row">
+                        <div class="col-10">
+                          <i class="fa fa-university pr-2"></i>
+                          {{ exception.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
+                        </div>
+                        <dd class="col-2">{{ exception.value }}</dd>
+                      </li>
+                    }
+                  </ul>
+                </dd>
+              }
+            </dl>
           }
-          <!-- Fee amount limits -->
-          <div class="card-header">
-            <i class="fa" [ngClass]="{
-              'fa-circle text-success': record.metadata.limits.fee_amount_limits,
-              'fa-circle-thin': !record.metadata.limits.fee_amount_limits
-            }"></i>
-            <span class="pl-3" translate>Limit by fee amount</span>
-          </div>
+        </p-fieldset>
+
+        <p-fieldset>
+          <ng-template pTemplate="header">
+            <div class="flex align-items-center gap-2 px-2">
+              <i class="fa" [ngClass]="{
+                'fa-circle text-success': record.metadata.limits.fee_amount_limits,
+                'fa-circle-thin': !record.metadata.limits.fee_amount_limits
+              }"></i>
+              <span class="pl-3" translate>Limit by fee amount</span>
+            </div>
+          </ng-template>
           @if (record.metadata.limits.fee_amount_limits) {
             <div class="card-body">
               <dl class="row m-0">
@@ -102,14 +104,18 @@ <h2 class="mt-4" translate>Limits</h2>
               </dl>
             </div>
           }
-          <!-- overdue items restrictions -->
-          <div class="card-header">
-            <i class="fa" [ngClass]="{
-              'fa-circle text-success': record.metadata.limits.overdue_items_limits,
-              'fa-circle-thin': !record.metadata.limits.overdue_items_limits
-            }"></i>
-            <span class="pl-3" translate>Limit by overdue items</span>
-          </div>
+        </p-fieldset>
+
+        <p-fieldset>
+          <ng-template pTemplate="header">
+            <div class="flex align-items-center gap-2 px-2">
+              <i class="fa" [ngClass]="{
+                'fa-circle text-success': record.metadata.limits.overdue_items_limits,
+                'fa-circle-thin': !record.metadata.limits.overdue_items_limits
+              }"></i>
+              <span class="pl-3" translate>Limit by overdue items</span>
+            </div>
+          </ng-template>
           @if (record.metadata.limits.overdue_items_limits) {
             <div class="card-body">
               <dl class="row m-0">
@@ -118,15 +124,19 @@ <h2 class="mt-4" translate>Limits</h2>
               </dl>
             </div>
           }
-          <!-- unpaid subscription restriction -->
-          <div class="card-header">
-            <i class="fa" [ngClass]="{
-              'fa-circle text-success': record.metadata.limits.unpaid_subscription,
-              'fa-circle-thin': !record.metadata.limits.unpaid_subscription
-            }"></i>
-            <span class="pl-3" translate>Limit to unpaid subscription</span>
-          </div>
-        </div>
+        </p-fieldset>
+
+        <p-fieldset>
+          <ng-template pTemplate="header">
+            <div class="flex align-items-center gap-2 px-2">
+              <i class="fa" [ngClass]="{
+                'fa-circle text-success': record.metadata.limits.unpaid_subscription,
+                'fa-circle-thin': !record.metadata.limits.unpaid_subscription
+              }"></i>
+              <span class="pl-3" translate>Limit to unpaid subscription</span>
+            </div>
+          </ng-template>
+        </p-fieldset>
       </section>
     }
   </dl>
diff --git a/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.ts b/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.ts
index c65630c10..b70a4b202 100644
--- a/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/patron-types-detail-view/patron-types-detail-view.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Observable } from 'rxjs';
 import { OrganisationService } from '../../../service/organisation.service';
@@ -25,22 +25,17 @@ import { OrganisationService } from '../../../service/organisation.service';
 })
 export class PatronTypesDetailViewComponent implements DetailRecord {
 
+  private organisationService: OrganisationService = inject(OrganisationService);
   /** Observable resolving record data */
   record$: Observable<any>;
 
   /** Resource type */
   type: string;
 
-  /** Constructor
-   * @param organisationService: OrganisationService
-   */
-  constructor(private organisationService: OrganisationService) { }
-
   /** Get current organisation
    *  @return: current organisation
    */
   get organisation() {
     return this.organisationService.organisation;
   }
-
 }
diff --git a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts
index 8012e189a..f42fa9557 100644
--- a/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/permission-detail-view/permission-detail-view.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { IRolePermission, PermissionApiService } from '../../../api/permission-api.service';
 
 @Component({
@@ -25,6 +25,8 @@ import { IRolePermission, PermissionApiService } from '../../../api/permission-a
 })
 export class PermissionDetailViewComponent implements OnInit {
 
+  private permissionApiService: PermissionApiService = inject(PermissionApiService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** All available roles */
   roles: {name: string, type:string}[] = [];
@@ -35,15 +37,6 @@ export class PermissionDetailViewComponent implements OnInit {
   /** All permissions regrouped by roles */
   globalPermissions: { [key: string]: any };
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param permissionApiService - PermissionApiService
-   */
-  constructor(
-    private permissionApiService: PermissionApiService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     this.permissionApiService
diff --git a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.html b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.html
index 6813856dc..62651d4cd 100644
--- a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.html
+++ b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.html
@@ -14,27 +14,24 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
 @if (reports?.length) {
-  <table class="mt-4 table table-striped">
-    <tbody>
-      @for (report of reports; track report) {
-        <tr>
-          <th>
-              <a class="pl-2" target="_blank" [href]="getReportUrl(report.metadata.pid)">
-              {{ report.created | dateTranslate: 'longDate' }}
-              <i class="pl-1 fa fa-external-link"></i>
-            </a>
-          </th>
-          <td class="text-right">
-            <a class="btn btn-link btn-outline-primary" [href]="getReportUrl(report.metadata.pid)+'?format=csv'">
-              <i class="fa fa-download"></i>
-            </a>
-          </td>
-        </tr>
-      }
-    </tbody>
-  </table>
+  <p-table [value]="reports" styleClass="p-datatable-striped" >
+    <ng-template pTemplate="body" let-report>
+      <tr>
+        <td>
+            <a class="pl-2" target="_blank" [href]="getReportUrl(report.metadata.pid)">
+            {{ report.created | dateTranslate: 'longDate' }}
+            <i class="pl-1 fa fa-external-link"></i>
+          </a>
+        </td>
+        <td class="text-right">
+          <a class="btn btn-link btn-outline-primary" [href]="getReportUrl(report.metadata.pid)+'?format=csv'">
+            <i class="fa fa-download"></i>
+          </a>
+        </td>
+      </tr>
+    </ng-template>
+  </p-table>
 } @else {
   <p class="m-0 px-4 py-2 text-muted" translate>No result</p>
 }
diff --git a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.ts b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.ts
index 0dc03c14d..7ee8be6d2 100644
--- a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.ts
+++ b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/reports-list/reports-list.component.ts
@@ -14,8 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, Input, OnInit } from "@angular/core";
+import { Component, inject, Input, OnInit } from "@angular/core";
 import { ApiService, Record, RecordService } from "@rero/ng-core";
 import { map } from "rxjs/operators";
 
@@ -24,22 +23,16 @@ import { map } from "rxjs/operators";
   templateUrl: "./reports-list.component.html",
 })
 export class ReportsListComponent implements OnInit {
+
+  private recordService: RecordService = inject(RecordService);
+  private apiService: ApiService = inject(ApiService);
+
   // persistent identifier of the current stat report configuration
   @Input() pid: any;
 
   // list of the corresponding reports from elasticsearch
   reports: Array<any>;
 
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param apiService - ApiService
-   */
-  constructor(
-    private recordService: RecordService,
-    private apiService: ApiService
-  ) {}
-
   /**
    * Get the report item URL
    *
diff --git a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.html b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.html
index bca1a8862..ec566fcd0 100644
--- a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.html
@@ -14,14 +14,13 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
 @if (record) {
   <header class="mb-2">
     <h1>{{ record.metadata.name }}</h1>
     <span [innerHTML]="record.metadata.description | nl2br"></span>
   </header>
   <section class="my-4">
-    <dl class="row mb-0">
+    <dl class="grid mb-0">
       <dt class="col-3 label-title" translate>Library</dt>
       <dd class="col-9">{{ record.metadata.library.$ref | getRecord: 'libraries' : 'field' : 'name' | async }}</dd>
 
@@ -48,63 +47,62 @@ <h1>{{ record.metadata.name }}</h1>
       }
     </dl>
 
-    <div class="card mt-3">
-      <h5 class="card-header" translate>Configuration</h5>
-      <div class="card-body container">
-        <dl class="row mb-0">
+    <p-fieldset styleClass="mt-3" [legend]="'Configuration'|translate">
+      <dl class="grid mb-0">
 
-          <dt class="col-3 label-title" translate>Category</dt>
-          <dd class="col-9">{{ record.metadata.category.type | translate }}</dd>
+        <dt class="col-3 label-title" translate>Category</dt>
+        <dd class="col-9">{{ record.metadata.category.type | translate }}</dd>
 
-          <dt class="col-3 label-title" translate>Indicator</dt>
-          <dd class="col-9">{{ record.metadata.category.indicator.type | translate }}</dd>
+        <dt class="col-3 label-title" translate>Indicator</dt>
+        <dd class="col-9">{{ record.metadata.category.indicator.type | translate }}</dd>
 
-          @if (record.metadata.category.indicator.period) {
-            <dt class="col-3 label-title" translate>Period</dt>
-            <dd class="col-9">{{ record.metadata.category.indicator.period | translate }}</dd>
-          }
+        @if (record.metadata.category.indicator.period) {
+          <dt class="col-3 label-title" translate>Period</dt>
+          <dd class="col-9">{{ record.metadata.category.indicator.period | translate }}</dd>
+        }
 
-          @if (record.metadata.category.indicator.distributions) {
-            <dt class="col-3 label-title" translate>Distributions</dt>
-            <dd class="col-9">
-              <ul class="list-inline mb-0">
-                @for (dist of record.metadata.category.indicator.distributions; track dist; let last = $last) {
-                  <li class="list-inline-item">{{ dist | translate }}{{ last ? '' : ' / ' }}</li>
-                }
-              </ul>
-            </dd>
-          }
+        @if (record.metadata.category.indicator.distributions) {
+          <dt class="col-3 label-title" translate>Distributions</dt>
+          <dd class="col-9">
+            <ul class="list-inline mb-0">
+              @for (dist of record.metadata.category.indicator.distributions; track dist; let last = $last) {
+                <li class="list-inline-item">{{ dist | translate }}{{ last ? '' : ' / ' }}</li>
+              }
+            </ul>
+          </dd>
+        }
 
-          @if (record.metadata.category.indicator.filter) {
-            <dt class="col-3 label-title" translate>Filter</dt>
-            <dd class="col-9">{{ record.metadata.category.indicator.filter }}</dd>
-          }
-          @if (record.created) {
-            <dt class="col-3 label-title" translate>Created at</dt>
-            <dd class="col-9">{{ record.created | dateTranslate: 'medium' }}</dd>
-          }
-          @if (record.updated) {
-            <dt class="col-3 label-title" translate>Updated at</dt>
-            <dd class="col-9">{{ record.updated | dateTranslate: 'medium' }}</dd>
-          }
-        </dl>
-      </div>
-    </div>
+        @if (record.metadata.category.indicator.filter) {
+          <dt class="col-3 label-title" translate>Filter</dt>
+          <dd class="col-9">{{ record.metadata.category.indicator.filter }}</dd>
+        }
+        @if (record.created) {
+          <dt class="col-3 label-title" translate>Created at</dt>
+          <dd class="col-9">{{ record.created | dateTranslate: 'medium' }}</dd>
+        }
+        @if (record.updated) {
+          <dt class="col-3 label-title" translate>Updated at</dt>
+          <dd class="col-9">{{ record.updated | dateTranslate: 'medium' }}</dd>
+        }
+      </dl>
+    </p-fieldset>
   </section>
-  <tabset>
-    <tab>
-      <ng-template tabHeading>
-        <span translate>Reports</span>
-      </ng-template>
-        <admin-reports-list [pid]="record.metadata.pid"></admin-reports-list>
-    </tab>
-    <tab (selectTab)="getLiveValues()">
-      <ng-template tabHeading>
-        {{ 'Live Values' | translate }}
-      </ng-template>
+  <p-tabView (onChange)="tabViewChange($event)">
+    <p-tabPanel [header]="'Reports'|translate">
+      <admin-reports-list [pid]="record.metadata.pid"></admin-reports-list>
+    </p-tabPanel>
+    <p-tabPanel [header]="'Live Values'|translate">
       @if (liveData) {
         <admin-report-data [data]="liveData"></admin-report-data>
       }
-    </tab>
-  </tabset>
+      @if (liveDataError) {
+        <p-messages
+          [value]="[{ severity: 'error', detail: liveDataError }]"
+          [closable]="false"
+          [enableService]="false"
+          showTransitionOptions="0ms"
+        />
+      }
+    </p-tabPanel>
+  </p-tabView>
   }
diff --git a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.ts b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.ts
index d8201685f..387adedc6 100644
--- a/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component.ts
@@ -15,18 +15,22 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from "@angular/common/http";
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { ApiService } from "@rero/ng-core";
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { AppConfigService } from "@app/admin/service/app-config.service";
+import { TranslateService } from "@ngx-translate/core";
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
+import { TabViewChangeEvent } from "primeng/tabview";
 import { Observable, Subscription } from 'rxjs';
 
 @Component({
-  selector: "admin-statitics-cfg-view",
+  selector: "admin-statistics-cfg-view",
   templateUrl: "./statistics-cfg-detail-view.component.html",
 })
-export class StatisticsCfgDetailViewComponent
-  implements DetailRecord, OnInit, OnDestroy
-{
+export class StatisticsCfgDetailViewComponent implements DetailRecord, OnInit, OnDestroy {
+
+  private httpClient: HttpClient = inject(HttpClient);
+  private appConfigService: AppConfigService = inject(AppConfigService);
+  private translateService: TranslateService = inject(TranslateService);
 
   /** Observable resolving record data */
   record$: Observable<any>;
@@ -40,17 +44,12 @@ export class StatisticsCfgDetailViewComponent
   // the current preview values
   liveData: any = null;
 
+  // Error on data loading
+  liveDataError: string = undefined;
+
   /** Subscription to (un)follow the record$ Observable */
   private subscriptions = new Subscription();
 
-  /**
-   * Constructor
-   *
-   * @param http - HttpClient
-   * @param apiService = ApiService
-   */
-  constructor(private http: HttpClient, private apiService: ApiService) {}
-
   /** OnInit hook */
   ngOnInit() {
     this.subscriptions = this.record$.subscribe((record) => {
@@ -69,10 +68,28 @@ export class StatisticsCfgDetailViewComponent
     if (this.liveData != null) {
       return;
     }
+    this.liveDataError = undefined;
     const { pid } = this.record.metadata;
-    const baseUrl = this.apiService.endpointPrefix;
-    this.http
+    const baseUrl = this.appConfigService.apiEndpointPrefix;
+    this.httpClient
       .get(`${baseUrl}/stats_cfg/live/${pid}`)
-      .subscribe((res) => (this.liveData = res));
+      .subscribe({
+        next: (res) => (this.liveData = res),
+        error: () => this.liveDataError = this.translateService.instant('Data loading error')
+        });
+  }
+
+  /**
+   * Handles the TabView change event to update live values.
+   *
+   * This method is called when the active tab in the TabView changes. If the new tab index is 1,
+   * it triggers the `getLiveValues` method to refresh the data displayed in the application.
+   *
+   * @param {TabViewChangeEvent} event - The event object that contains details about the tab change.
+   */
+  tabViewChange(event: TabViewChangeEvent): void {
+    if (event.index == 1) {
+      this.getLiveValues();
+    }
   }
 }
diff --git a/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.html b/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.html
index 7aaec93de..22f954dc9 100644
--- a/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.html
@@ -21,7 +21,7 @@ <h2 id="template-name" class="pl-0">
       <i class="fa fa-lock text-secondary ml-2" aria-hidden="true"></i>
     }
   </h2>
-  <dl class="row mb-0">
+  <dl class="grid mt-2 mb-0">
     <!-- DESCRIPTION -->
     @if (record.metadata.description) {
       <dt [ngClass]="dtCssClass">
diff --git a/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.ts b/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.ts
index 06678b19d..b75686d48 100644
--- a/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/template-detail-view/template-detail-view.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { RecordService } from '@rero/ng-core';
 import { Observable, of, Subscription } from 'rxjs';
@@ -25,6 +25,9 @@ import { Observable, of, Subscription } from 'rxjs';
 })
 export class TemplateDetailViewComponent implements OnInit, OnDestroy {
 
+  private router: ActivatedRoute = inject(ActivatedRoute);
+  private recordService: RecordService = inject(RecordService);
+
   /** Observable resolving record data */
   record$: Observable<any>;
 
@@ -38,10 +41,10 @@ export class TemplateDetailViewComponent implements OnInit, OnDestroy {
   record: any;
 
   /** Css classes for dd in template */
-  ddCssClass = 'col-sm-9 mb-0';
+  ddCssClass = 'col-9 mb-0';
 
   /** Css classes for dt in template */
-  dtCssClass = 'col-sm-3';
+  dtCssClass = 'col-3';
 
   /** Record subscription */
   private recordSubscription: Subscription;
@@ -51,15 +54,6 @@ export class TemplateDetailViewComponent implements OnInit, OnDestroy {
     return this.router.snapshot.params.pid;
   }
 
-  /** constructor
-   * @param router - ActivatedRoute to get url parameters.
-   * @param recordService - RecordService to the MARC version for the record.
-   */
-  constructor(
-    private router: ActivatedRoute,
-    private recordService: RecordService
-  ) { }
-
   /** On init hook */
   ngOnInit(): void {
     this.recordSubscription = this.record$.subscribe((record: any) => {
diff --git a/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.html b/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.html
index 11794b1b1..6325e1a97 100644
--- a/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.html
@@ -18,62 +18,59 @@
   <h1 class="mb-3">{{ record.metadata.name }}</h1>
   <article>
     <section class="m-2 p-2">
-      <dl class="row mb-0">
+      <dl class="grid mb-0">
         <!-- WEBSITE -->
         @if (record.metadata.website) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Website</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
+          <dt class="col-3 label-title" translate>Website</dt>
+          <dd class="col-7 mb-0">
             <a target="_blank" href="{{ record.metadata.website }}">{{ record.metadata.website }}</a>
           </dd>
         }
         <!-- COMMUNICATION_LANGUAGE -->
         @if (record.metadata.communication_language && record.metadata.communication_language.length > 0) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Communication language</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
+          <dt class="col-3 label-title" translate>Communication language</dt>
+          <dd class="col-7 mb-0">
             {{ record.metadata.communication_language | translateLanguage:currentLanguage }}
           </dd>
         }
         <!-- CURRENCY -->
         @if (record.metadata.currency) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Currency</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.currency }}</dd>
+          <dt class="col-3 label-title" translate>Currency</dt>
+          <dd class="col-7 mb-0">{{ record.metadata.currency }}</dd>
         }
         <!-- VAT RATE -->
         @if (record.metadata.tva_rate) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>VAT</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.tva_rate }}</dd>
+          <dt class="col-3 label-title" translate>VAT</dt>
+          <dd class="col-7 mb-0">{{ record.metadata.tva_rate }}</dd>
         }
         <!-- NOTE -->
         @if (record.metadata.note) {
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Note</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">{{ record.metadata.note }}</dd>
+          <dt class="col-3 label-title" translate>Note</dt>
+          <dd class="col-7 mb-0">{{ record.metadata.note }}</dd>
         }
       </dl>
     </section>
 
-    <section class="m-2 p-2">
-      <tabset>
+    <section class="m-2">
+      <p-tabView>
         <!-- DEFAULT CONTACT -->
         @if (filterContact(record.metadata.contacts, 'default'); as defaultContact) {
-          <tab heading="{{ 'Default contact details' | translate }}" id="default_address">
-            <admin-address-type [addressType]="defaultContact"></admin-address-type>
-          </tab>
+          <p-tabPanel id="default_address" [header]="'Default contact details'|translate">
+            <admin-address-type [addressType]="defaultContact" />
+          </p-tabPanel>
         }
         <!-- ORDER CONTACT -->
         @if (filterContact(record.metadata.contacts, 'order'); as orderContact) {
-          <tab heading="{{ 'Order contact details' | translate }}" id="order_address">
-            <admin-address-type [addressType]="orderContact"></admin-address-type>
-          </tab>
+          <p-tabPanel id="order_address" [header]="'Order contact details'|translate">
+            <admin-address-type [addressType]="orderContact" />
+          </p-tabPanel>
         }
-      </tabset>
+      </p-tabView>
     </section>
 
     <!-- OPERATION LOGS-->
     @if (isEnabledOperationLog) {
-      <admin-operation-logs
-        resourceType="vendors"
-        [resourcePid]="record.metadata.pid"
-      ></admin-operation-logs>
+      <admin-operation-logs resourceType="vendors" [resourcePid]="record.metadata.pid" />
     }
   </article>
 }
diff --git a/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.ts b/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.ts
index 497a9e28f..814d72a3f 100644
--- a/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.ts
+++ b/projects/admin/src/app/record/detail-view/vendor-detail-view/vendor-detail-view.component.ts
@@ -14,8 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { DetailRecord } from '@rero/ng-core/lib/record/detail/view/detail-record';
 import { Observable } from 'rxjs';
@@ -28,6 +27,9 @@ import { OperationLogsService } from '../../../service/operation-logs.service';
 })
 export class VendorDetailViewComponent implements DetailRecord {
 
+  private translateService: TranslateService = inject(TranslateService);
+  private operationLogsService: OperationLogsService = inject(OperationLogsService);
+
   /** Observable resolving record data */
   record$: Observable<any>;
 
@@ -53,18 +55,8 @@ export class VendorDetailViewComponent implements DetailRecord {
     return this.translateService.currentLang;
   }
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   * @param operationLogsService - OperationLogsService
-   */
-  constructor(
-    private translateService: TranslateService,
-    private operationLogsService: OperationLogsService
-  ) {}
-
-    filterContact(contacts: any[], type: string): any {
-      const contact = contacts.filter((contact: any) => contact.type === type);
-      return contact.length === 0 ? undefined : contact[0];
-    }
+  filterContact(contacts: any[], type: string): any {
+    const contact = contacts.filter((contact: any) => contact.type === type);
+    return contact.length === 0 ? undefined : contact[0];
+  }
 }
diff --git a/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/add-entity-local-form/add-entity-local-form.component.html b/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/add-entity-local-form/add-entity-local-form.component.html
new file mode 100644
index 000000000..b35e47da9
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/add-entity-local-form/add-entity-local-form.component.html
@@ -0,0 +1,28 @@
+<!--
+  RERO ILS UI
+  Copyright (C) 2019-2024 RERO
+  Copyright (C) 2019-2023 UCLouvain
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  the Free Software Foundation, version 3 of the License.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+@if (schema) {
+  <form class="w-full" [formGroup]="form" (ngSubmit)="submit()">
+    <div class="flex justify-content-end">
+      <p-button class="mr-2" severity="secondary" icon="fa fa-times" [label]="'Cancel' | translate" (onClick)="closeDialog()"></p-button>
+      <p-button type="submit" icon="fa fa-save" [label]="'Save' | translate"></p-button>
+    </div>
+    <div class="modal-body">
+      <formly-form [model]="model" [fields]="fields" [form]="form"></formly-form>
+    </div>
+  </form>
+}
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.ts b/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/add-entity-local-form/add-entity-local-form.component.ts
similarity index 62%
rename from projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.ts
rename to projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/add-entity-local-form/add-entity-local-form.component.ts
index b4d788a1d..f7deac104 100644
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.ts
+++ b/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/add-entity-local-form/add-entity-local-form.component.ts
@@ -15,13 +15,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
-import { TranslateService } from '@ngx-translate/core';
-import { RecordService, processJsonSchema } from '@rero/ng-core';
-import { ToastrService } from 'ngx-toastr';
+import { NgCoreTranslateService, processJsonSchema, RecordService } from '@rero/ng-core';
+import { MessageService } from 'primeng/api';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -30,17 +30,12 @@ import { Subscription } from 'rxjs';
 })
 export class AddEntityLocalFormComponent implements OnInit, OnDestroy {
 
-  /** Available types on select typeahead */
-  @Input() entityTypeFilters: any;
-
-  /** Text searched by user */
-  @Input() searchTerm: string;
-
-  /** Event for close dialog */
-  @Output() closeDialog: EventEmitter<boolean> = new EventEmitter();
-
-  /** Event for record create */
-  @Output() recordCreate: EventEmitter<any> = new EventEmitter();
+  private messageService = inject(MessageService);
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
+  private recordService: RecordService = inject(RecordService);
+  private formlyJsonschema: FormlyJsonschema = inject(FormlyJsonschema);
+  private translateService: NgCoreTranslateService = inject(NgCoreTranslateService);
 
   /** TODO: Find a better solution for next iteration */
   translatedTypes = {
@@ -68,33 +63,10 @@ export class AddEntityLocalFormComponent implements OnInit, OnDestroy {
   /** all component subscription */
   private subscriptions = new Subscription();
 
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   * @param formlyJsonschema - FormlyJsonschema
-   * @param translateService - TranslateService
-   * @param toastrService - ToastrService
-   */
-  constructor(
-    private recordService: RecordService,
-    private formlyJsonschema: FormlyJsonschema,
-    private translateService: TranslateService,
-    private toastrService: ToastrService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
+    const { selectedType, searchTerm } = this.dynamicDialogConfig.data;
     this.form = new FormGroup({});
-    let selectedType = undefined;
-    if (this.entityTypeFilters.length === 1) {
-      // If there is only one possible choice, we take the first value.
-      selectedType = this.entityTypeFilters[0].value;
-    } else {
-      // If the select menu has not been touched, all values of the selected key are set to false.
-      // We take the first value.
-      const selected = this.entityTypeFilters.filter((element: any) => element.selected);
-      selectedType = (selected.length === 0) ? this.entityTypeFilters[0].value : selected[0].value;
-    }
     this.subscriptions.add(this.recordService.getSchemaForm('local_entities').subscribe((schema) => {
       schema = processJsonSchema(schema.schema);
       // Transfer the selected oneOf to the root schema
@@ -105,7 +77,7 @@ export class AddEntityLocalFormComponent implements OnInit, OnDestroy {
         map: (field: FormlyFieldConfig) => {
           // Put the value typed by the user in the corresponding field
           if (this.populateFields.includes(String(field.key))) {
-            field.defaultValue = this.searchTerm;
+            field.defaultValue = searchTerm;
           }
           // If the type is concept-genreForm, we set the genreForm field flag
           if (field.key === 'genreForm' && selectedType === 'concepts-genreForm') {
@@ -125,23 +97,26 @@ export class AddEntityLocalFormComponent implements OnInit, OnDestroy {
 
   /** Submit form */
   submit(): void {
+    console.log('submit', this.form);
     if (this.form.valid) {
-      this.subscriptions.add(this.recordService.create('local_entities', this.model).subscribe(
-        (response: any) => {
-          this.recordCreate.emit(response);
-          this.closeModal();
+      this.subscriptions.add(this.recordService.create('local_entities', this.model).subscribe({
+        next: (response: any) => {
+          this.closeDialog(response);
         },
-        () => this.toastrService.error(
-          this.translateService.instant('Data submission generated an error.'),
-          this.translateService.instant('Add local entity')
-        )
-      ));
+        error: () => this.messageService.add({
+          severity: 'error',
+          summary: this.translateService.instant('Add local entity'),
+          detail: this.translateService.instant('Data submission generated an error.'),
+          sticky: true,
+          closable: true
+        })
+      }));
     }
   }
 
   /** Close the dialog */
-  closeModal(): void {
-    this.closeDialog.emit(true);
+  closeDialog(response?: any): void {
+    this.dynamicDialogRef.close(response);
   }
 
   /**
diff --git a/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/entity-autocomplete.component.spec.ts b/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/entity-autocomplete.component.spec.ts
new file mode 100644
index 000000000..9d4ba2f46
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/entity-autocomplete.component.spec.ts
@@ -0,0 +1,39 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EntityAutocompleteComponent } from './entity-autocomplete.component';
+
+describe('EntityAutocompleteComponent', () => {
+  let component: EntityAutocompleteComponent;
+  let fixture: ComponentFixture<EntityAutocompleteComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [EntityAutocompleteComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(EntityAutocompleteComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/entity-autocomplete.component.ts b/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/entity-autocomplete.component.ts
new file mode 100644
index 000000000..8a0911cc7
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/entity-autocomplete.component.ts
@@ -0,0 +1,135 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Component, inject, OnDestroy } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { ApiService, RemoteAutocomplete } from '@rero/ng-core';
+import { PERMISSIONS, PermissionsService } from '@rero/shared';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { AddEntityLocalFormComponent } from './add-entity-local-form/add-entity-local-form.component';
+import { Observable, Subscription } from 'rxjs';
+
+@Component({
+  selector: 'admin-entity-autocomplete',
+  template: `
+  <div class="flex w-full">
+    @if (!field.formControl.value) {
+      @if (props.filters?.options) {
+        <div class="flex">
+          <p-dropdown
+            [options]="props.filters.options"
+            [ngModel]="props.filters.selected"
+            (onChange)="changeFilter($event)"
+          ></p-dropdown>
+        </div>
+      }
+      <div class="flex ml-1 w-full">
+        <p-autoComplete
+          class="w-full"
+          styleClass="w-full"
+          inputStyleClass="w-full"
+          [scrollHeight]="props.scrollHeight"
+          [minLength]="props.minLength"
+          [maxlength]="props.maxLength"
+          [(ngModel)]="value"
+          [placeholder]="props.placeholder"
+          [group]="props.group"
+          [suggestions]="suggestions()"
+          (completeMethod)="search($event)"
+          (onSelect)="onSelect($event)"
+        >
+          <ng-template let-data pTemplate="group">
+            <span class="font-bold">
+              @if (data.label === 'local' && isAuthorizedToAddLocalEntity) {
+                {{ "link to local authority" | translate }}
+                <i
+                  class="fa fa-plus-square-o ml-2 text-lg"
+                  title="{{ 'Add local entity' | translate }}"
+                  aria-hidden="true"
+                  (click)="addLocalEntity($event)"
+                ></i>
+              } @else {
+                {{ "link to authority {{ sourceName }}" | translate:{ sourceName: data.label } }}
+              }
+            </span>
+          </ng-template>
+          <ng-template let-data pTemplate="item">
+            <div class="flex">
+              <div class="flex" [innerHTML]="data.label"></div>
+              @if (data.link) {
+                <a class="ml-2 text-700" (click)="$event.stopPropagation()" [href]="data.link" target="_blank">
+                  <i class="fa fa-external-link"></i>
+                </a>
+              }
+            </div>
+            @if (data.summary) {
+              <div [innerHTML]="data.summary" [ngClass]="props.summaryClass"></div>
+            }
+          </ng-template>
+        </p-autoComplete>
+      </div>
+    } @else {
+      <div class="py-1">
+        <span [innerHtml]="valueSelected()"></span>
+        <p-button icon="fa fa-trash" severity="secondary" [text]="true" (onClick)="clear()" styleClass="ml-1" />
+      </div>
+    }
+  </div>`
+})
+export class EntityAutocompleteComponent extends RemoteAutocomplete implements OnDestroy {
+
+  private permissionsService: PermissionsService = inject(PermissionsService);
+  private dialogService: DialogService = inject(DialogService);
+  private translateService: TranslateService = inject(TranslateService);
+  private apiService: ApiService = inject(ApiService);
+
+  isAuthorizedToAddLocalEntity = false;
+
+  private subscription: Subscription = new Subscription();
+
+  ngOnDestroy(): void {
+    this.subscription.unsubscribe();
+  }
+
+  ngAfterViewInit(): void {
+    this.isAuthorizedToAddLocalEntity = this.permissionsService.canAccess(PERMISSIONS.LOCENT_CREATE);
+    super.ngAfterViewInit();
+  }
+
+  addLocalEntity(event: Event): void {
+    event.preventDefault();
+    const dialog: DynamicDialogRef = this.dialogService.open(AddEntityLocalFormComponent, {
+      header: this.translateService.instant('Add local entity'),
+      width: '75vw',
+      modal: true,
+      data: {
+        selectedType: this.props.queryOptions.filter,
+        searchTerm: this.value
+      }
+    });
+
+    this.subscription.add(dialog.onClose.subscribe((data) => {
+      if (data) {
+        const link = this.apiService.getRefEndpoint('local_entities', data.metadata.pid);
+        this.onValueSelect.next({
+          item: { label: link, value: link },
+          queryOptions: this.field.props.queryOptions,
+        });
+        this.formControl.patchValue(link);
+      }
+    }));
+  }
+}
diff --git a/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete-factory.service.spec.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete-factory.service.spec.ts
new file mode 100644
index 000000000..0cbb1f00b
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete-factory.service.spec.ts
@@ -0,0 +1,31 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { TestBed } from '@angular/core/testing';
+import { RemoteAutocompleteFactoryService } from './remote-autocomplete-factory.service';
+
+describe('RemoteAutocompleteFactoryService', () => {
+  let service: RemoteAutocompleteFactoryService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(RemoteAutocompleteFactoryService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete-factory.service.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete-factory.service.ts
new file mode 100644
index 000000000..f644a358c
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete-factory.service.ts
@@ -0,0 +1,35 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { inject, Injectable, InjectionToken, Injector } from '@angular/core';
+import { IRemoteAutocomplete } from './remote/i-remote-autocomplete';
+import { RemoteAutocompleteService } from './remote-autocomplete.service';
+
+export const remoteAutocompleteToken = new InjectionToken<IRemoteAutocomplete[]>('IRemoteAutocomplete');
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RemoteAutocompleteFactoryService {
+
+  private injector: Injector = inject(Injector);
+  private remoteAutocompleteService = inject(RemoteAutocompleteService);
+
+  init(): void {
+    const remotes = this.injector.get(remoteAutocompleteToken);
+    remotes.map((remote: IRemoteAutocomplete) => this.remoteAutocompleteService.addRemote(remote));
+  }
+}
diff --git a/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.service.spec.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.service.spec.ts
new file mode 100644
index 000000000..a6e3254dd
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.service.spec.ts
@@ -0,0 +1,31 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { TestBed } from '@angular/core/testing';
+import { RemoteAutocompleteService } from './remote-autocomplete.service';
+
+describe('RemoteAutocompleteService', () => {
+  let service: RemoteAutocompleteService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(RemoteAutocompleteService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.service.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.service.ts
new file mode 100644
index 000000000..c651e618b
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.service.ts
@@ -0,0 +1,54 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Injectable } from '@angular/core';
+import { IRemoteAutocomplete } from './remote/i-remote-autocomplete';
+import { IQueryOptions, ISuggestionItem, IRemoteAutocomplete as NgCoreIRemoteAutocomplete } from '@rero/prime/remote-autocomplete/remote-autocomplete.interface';
+import { Observable } from 'rxjs';
+
+export class IRemotes {
+  [key: string]: IRemoteAutocomplete;
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RemoteAutocompleteService implements NgCoreIRemoteAutocomplete {
+
+  private remotes: IRemotes = {};
+
+  addRemote(remote: IRemoteAutocomplete): void {
+    if (!(remote.getName() in this.remotes)) {
+      this.remotes[remote.getName()] = remote;
+    }
+  }
+
+  getSuggestions(query: string, queryOptions: IQueryOptions, currentPid: string): Observable<ISuggestionItem[]> {
+    if (!(queryOptions.type in this.remotes)) {
+      throw new Error(`The ${queryOptions.type} Remote autocomplete not defined`);
+    }
+
+    return this.remotes[queryOptions.type].getSuggestions(query, queryOptions, currentPid);
+  }
+
+  getValueAsHTML(queryOptions: IQueryOptions, item: ISuggestionItem): Observable<string> {
+    if (!(queryOptions.type in this.remotes)) {
+      throw new Error(`The ${queryOptions.type} Remote autocomplete not defined`);
+    }
+
+    return this.remotes[queryOptions.type].getValueAsHTML(queryOptions, item);
+  }
+}
diff --git a/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/documents-remote.service.spec.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/documents-remote.service.spec.ts
new file mode 100644
index 000000000..bfd0d7878
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/documents-remote.service.spec.ts
@@ -0,0 +1,32 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { TestBed } from '@angular/core/testing';
+
+import { DocumentsRemoteService } from './documents-remote.service';
+
+describe('DocumentRemoteService', () => {
+  let service: DocumentsRemoteService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(DocumentsRemoteService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/documents-remote.service.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/documents-remote.service.ts
new file mode 100644
index 000000000..ed073cd68
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/documents-remote.service.ts
@@ -0,0 +1,177 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { APP_BASE_HREF } from '@angular/common';
+import { inject, Injectable } from '@angular/core';
+import { ApiService, RecordService } from '@rero/ng-core';
+import { IQueryOptions, ISuggestionItem } from '@rero/prime/remote-autocomplete/remote-autocomplete.interface';
+import { Entity, MainTitlePipe } from '@rero/shared';
+import { catchError, map, Observable, of } from 'rxjs';
+import { IRemoteAutocomplete } from './i-remote-autocomplete';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DocumentsRemoteService implements IRemoteAutocomplete {
+
+  private translateService: TranslateService = inject(TranslateService);
+  private recordService: RecordService = inject(RecordService);
+  private mainTitlePipe: MainTitlePipe = inject(MainTitlePipe);
+  private apiService: ApiService = inject(ApiService);
+  private baseHref = inject(APP_BASE_HREF);
+
+  getName(): string {
+    return 'documents';
+  }
+
+  getSuggestions(query: string, queryOptions: IQueryOptions, currentPid: string): Observable<ISuggestionItem[]> {
+    if (!query) {
+      return of([]);
+    }
+
+    let queryString = `((autocomplete_title:${query})^2 OR ${query})`;
+    const additionalQuery = [];
+    if (queryOptions.filter) {
+      additionalQuery.push(queryOptions.filter);
+    }
+    if (currentPid) {
+      additionalQuery.push(`NOT pid:${currentPid}`);
+    }
+    if (additionalQuery.length > 0) {
+      queryString += ' ' + additionalQuery.join(' ');
+    }
+
+    return this.recordService
+      .getRecords(this.getName(), queryString, 1, queryOptions.maxOfResult)
+      .pipe(
+        map((result: any) => {
+          if (result.hits.total.value == 0) {
+            return [];
+          }
+          const hits = [];
+          result.hits.hits.map((hit: any) => {
+            hits.push(this.processHit(hit.metadata, queryOptions));
+          });
+
+          return hits
+        }),
+        catchError(e => {
+          switch (e.status) {
+            case 400:
+              return [];
+            default:
+              throw e;
+          }
+        })
+      );
+  }
+
+  getValueAsHTML(queryOptions: IQueryOptions, item: ISuggestionItem): Observable<string> {
+    const url = item.value.split('/');
+    const pid = url.pop();
+
+    return this.recordService
+      .getRecord(queryOptions.type, pid, 1)
+      .pipe(
+        map((data: any) =>
+          `<span class="bg-light p-2"><strong>${this.mainTitlePipe.transform(data.metadata.title)}</strong></span>`
+        )
+      );
+  }
+
+  private processHit(metadata: any, queryOptions: IQueryOptions): ISuggestionItem {
+    let summary = [];
+    const baseHref = this.baseHref.replace(/\/$/, '');
+    if (metadata.contribution) {
+      summary.push(this.processContribution(metadata.contribution));
+    }
+    if (('identifiedBy' in metadata)) {
+      summary.push(this.processIdentifiedBy(metadata.identifiedBy));
+    }
+    return {
+      label: this.processTitle(metadata.title),
+      value: this.apiService.getRefEndpoint(this.getName(), metadata.pid),
+      summary: summary.length > 0 ? summary.join('<br>') : undefined,
+      link: `${baseHref}/records/documents/detail/${metadata.pid}`
+    }
+  }
+
+  private processContribution(contributions: any): string | undefined {
+    const authorized = 'authorized_access_point';
+    const key = `${authorized}_${this.translateService.currentLang}`;
+    const contrib = [];
+    contributions.map((contribution: any) => {
+      const keys = Object.keys(contribution.entity);
+      if (contribution.entity && (keys.includes(key) || keys.includes(authorized))) {
+        const icon = `<i class="fa ${Entity.getIcon(contribution.entity.type)}" title="${this.translateService.instant(contribution.entity.type)}"></i>`;
+        if (keys.includes(key)) {
+          contrib.push(`${icon} ` + contribution.entity[keys.includes(key) ? key : authorized]);
+        }
+      }
+    });
+
+    return contrib.length > 0 ? contrib.join('<br>'): undefined;
+  }
+
+  private processTitle(title: any, maxLengthSuggestion: number = 100): string {
+    let text = this.mainTitlePipe.transform(title);
+    // Truncate text if the length of text great than maxLengthSuggestion
+    if (text.length > maxLengthSuggestion) {
+      text = text.slice(0, maxLengthSuggestion) + '…';
+    }
+
+    return `<b>${text}</b>`;
+  }
+
+  private processIdentifiedBy(identifiedBy: any): string {
+    const ids = [];
+      const identifiers = this.extractIdentifier(identifiedBy);
+      const keys = Object.keys(identifiers);
+      keys.forEach((key: string) => {
+        ids.push(`${key}: ${identifiers[key].join(', ')}`);
+      });
+      return `<small>${ids.join(' / ')}</small>`;
+  }
+
+  private extractIdentifier(identifiers: any) {
+    const availableIdentifiers = {
+      'bf:Ean': 'ISBN',
+      'bf:Isbn': 'ISBN',
+      'bf:Issn': 'ISSN',
+      'bf:IssnL': 'ISSN'
+    };
+    const keys = Object.keys(availableIdentifiers);
+    const result: Record<string, any> = {};
+    identifiers
+      .filter((identifier: any) => keys.includes(identifier.type))
+      .forEach((element: any) => {
+        let data = element.value;
+        const key = availableIdentifiers[element.type];
+        if (!(key in result)) {
+          result[key] = new Set();
+        }
+        if ('qualifier' in element) {
+          data += ` (${element.qualifier})`;
+        }
+        result[key].add(data);
+      });
+    for (const [key, value] of Object.entries(result)) {
+      result[key] = Array.from(value);  // convert set to list
+    }
+    return result;
+  }
+}
diff --git a/projects/admin/src/app/menu/menu-definition/menu-interface.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/i-remote-autocomplete.ts
similarity index 59%
rename from projects/admin/src/app/menu/menu-definition/menu-interface.ts
rename to projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/i-remote-autocomplete.ts
index 08d5af48e..7323d8893 100644
--- a/projects/admin/src/app/menu/menu-definition/menu-interface.ts
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/i-remote-autocomplete.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,26 +14,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { IQueryOptions, ISuggestionItem } from "@rero/prime/remote-autocomplete/remote-autocomplete.interface";
+import { Observable } from "rxjs";
 
-export interface IMenuParent extends IMenu {
-  children: IMenu[]
-}
+export interface IRemoteAutocomplete {
+  getName(): string;
 
-export interface IMenu {
-  name: string;
-  uri?: string,
-  router_link?: string[],
-  query_params?: IMenuKeyValue,
-  attributes?: IMenuKeyValue,
-  extras?: IMenuKeyValue,
-  children?: IMenu[],
-  access?: {
-    permissions: string[],
-    operator?: string;
-  },
-  translate?: boolean
-}
+  getSuggestions(query: string, queryOptions: IQueryOptions, currentPid: string): Observable<ISuggestionItem[]>;
 
-export interface IMenuKeyValue {
-  [key: string]: string;
+  getValueAsHTML(queryOptions: IQueryOptions, item: ISuggestionItem): Observable<string>;
 }
diff --git a/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/items-remote.service.spec.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/items-remote.service.spec.ts
new file mode 100644
index 000000000..6d8fbd1ba
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/items-remote.service.spec.ts
@@ -0,0 +1,31 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { TestBed } from '@angular/core/testing';
+import { ItemsRemoteService } from './items-remote.service';
+
+describe('ItemsRemoteService', () => {
+  let service: ItemsRemoteService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ItemsRemoteService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/items-remote.service.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/items-remote.service.ts
new file mode 100644
index 000000000..f0a50a049
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/items-remote.service.ts
@@ -0,0 +1,109 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { inject, Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { ApiService, RecordService, TruncateTextPipe } from '@rero/ng-core';
+import { IQueryOptions, ISuggestionItem } from '@rero/prime/remote-autocomplete/remote-autocomplete.interface';
+import { MainTitlePipe } from '@rero/shared';
+import { catchError, from, map, mergeMap, Observable, of, switchMap, tap, toArray } from 'rxjs';
+import { IRemoteAutocomplete } from './i-remote-autocomplete';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ItemsRemoteService implements IRemoteAutocomplete {
+
+  private recordService: RecordService = inject(RecordService);
+  private truncateTextPipe: TruncateTextPipe = inject(TruncateTextPipe);
+  private mainTitlePipe: MainTitlePipe = inject(MainTitlePipe);
+  private apiService: ApiService = inject(ApiService);
+  private translateService: TranslateService = inject(TranslateService);
+
+  getName(): string {
+    return 'items';
+  }
+
+  getSuggestions(query: string, queryOptions: IQueryOptions, currentPid: string): Observable<ISuggestionItem[]> {
+    if (!query) {
+      return of([]);
+    }
+
+    const documentObs = (documentPid: string) => {
+      return this.recordService.getRecord('documents', documentPid).pipe(
+        map((doc: any) => doc.metadata)
+      );
+    };
+    console.log(query, queryOptions);
+
+    return this.recordService.getRecords(
+      queryOptions.type,
+      `autocomplete_barcode:${query}`,
+      1,
+      queryOptions.maxOfResult
+    ).pipe(
+      tap(result => console.log('result', result)),
+      mergeMap((result: any) => {
+        return from(result.hits.hits).pipe(
+          mergeMap((item: any) =>
+            documentObs(item.metadata.document.pid).pipe(
+              map(doc => {
+                return {
+                  label: this.truncateTextPipe.transform(
+                      this.mainTitlePipe.transform(doc.title),
+                      10,
+                      '…'
+                    ),
+                  value: this.apiService.getRefEndpoint('items', item.metadata.pid),
+                  summary: item.metadata.barcode
+                };
+              }),
+            )
+          ),
+          toArray()
+        );
+      }),
+      catchError(e => {
+        switch (e.status) {
+          case 400:
+            return [];
+          default:
+            throw e;
+        }
+      })
+    )
+  }
+
+  getValueAsHTML(queryOptions: IQueryOptions, item: ISuggestionItem): Observable<string> {
+    const url = item.value.split('/');
+    const pid = url.pop();
+
+    return this.recordService.getRecord(queryOptions.type, pid, 1)
+    .pipe(
+      switchMap((record: any) => {
+        return this.recordService.getRecord('documents', record.metadata.document. pid)
+        .pipe(
+          map((document: any | Error) =>
+            `<div class="pt-0">
+              <div class="font-bold">${this.mainTitlePipe.transform(document.metadata.title)}</div>
+              <span class="font-bold">${this.translateService.instant('Barcode')}</span>: ${record.metadata.barcode}
+             </div>`
+          )
+        );
+      })
+    );
+  }
+}
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.interface.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/mef-remote.service.spec.ts
similarity index 61%
rename from projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.interface.ts
rename to projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/mef-remote.service.spec.ts
index c902047dd..d0f1361b5 100644
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.interface.ts
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/mef-remote.service.spec.ts
@@ -1,7 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
- * Copyright (C) 2019-2023 UCLouvain
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,8 +14,18 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-export interface EntityTypeFilter {
-  label: string,
-  value: string,
-  selected?: boolean;
-}
+import { TestBed } from '@angular/core/testing';
+import { MefRemoteService } from './mef-remote.service';
+
+describe('MefRemoteService', () => {
+  let service: MefRemoteService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(MefRemoteService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/admin/src/app/classes/typeahead/mef-typeahead.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/mef-remote.service.ts
similarity index 60%
rename from projects/admin/src/app/classes/typeahead/mef-typeahead.ts
rename to projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/mef-remote.service.ts
index fe16df0cf..eebed3681 100644
--- a/projects/admin/src/app/classes/typeahead/mef-typeahead.ts
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/mef-remote.service.ts
@@ -1,7 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
- * Copyright (C) 2019-2023 UCLouvain
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,86 +14,94 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { ApiService, RecordService, SuggestionMetadata } from '@rero/ng-core';
+import { ApiService, RecordService } from '@rero/ng-core';
+import { IQueryOptions, ISuggestionItem } from '@rero/prime/remote-autocomplete/remote-autocomplete.interface';
 import { AppSettingsService, Entity } from '@rero/shared';
-import { forkJoin, Observable, of } from 'rxjs';
-import { catchError, map } from 'rxjs/operators';
-import { ITypeahead } from './ITypeahead-interface';
+import { catchError, forkJoin, map, Observable, of } from 'rxjs';
+import { IRemoteAutocomplete } from './i-remote-autocomplete';
 
 @Injectable({
   providedIn: 'root'
 })
-export class MefTypeahead implements ITypeahead {
+export class MefRemoteService implements IRemoteAutocomplete {
+
+  private httpClient: HttpClient = inject(HttpClient);
+  private translateService: TranslateService = inject(TranslateService);
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+  private recordService: RecordService = inject(RecordService);
+  private apiService: ApiService = inject(ApiService);
 
   /** Entry point API to get remote entity suggestions. */
-  private _remoteSearchEntrypoint = 'api/remote_entities/search';
+  private remoteSearchEntrypoint = 'api/remote_entities/search';
   /** Proxy API to use to get content of remote entity metadata (to avoid CORS javascript errors). */
-  private _apiProxyEntryPoint = 'api/proxy';
+  private apiProxyEntryPoint = 'api/proxy';
   /** Entry point API to get locale entity suggestions. */
-  private _localSearchEntrypoint = 'api/local_entities/search';
+  private localSearchEntrypoint = 'api/local_entities/search';
 
-  /**
-   * Constructor
-   * @param http - HttpClient
-   * @param translateService - TranslateService
-   * @param appSettingsService - AppSettingsService
-   * @param recordService - RecordService
-   * @param apiService - ApiService
-   */
-  constructor(
-    protected http: HttpClient,
-    protected translateService: TranslateService,
-    protected appSettingsService: AppSettingsService,
-    private recordService: RecordService,
-    private apiService: ApiService
-  ) { }
 
-  /** Get name of typeahead */
-  getName() {
+  getName(): string {
     return 'mef';
   }
 
-  // GET HTML REPRESENTATION ==================================================
-  /**
-   * Convert the input value (i.e. $ref url) into a template html code.
-   *
-   * The value could represent either a remote entity, either a local entity.
-   * A remote entity is an entity where metadata are stored outside the RERO
-   * application system. A local entity is store as a Invenio resource into the
-   * RERO application system.
-   *
-   * @param options: typeahead options
-   * @param value: formControl value i.e. $ref value
-   * @returns Observable on HTML template representation of the value.
-   */
-  getValueAsHTML(options: any, value: string): Observable<string> {
-    // Determine if value is a local or remote entity ; depending on the
-    // entity type the metadata retrieve method isn't the same
-    return (value.match(/local_entities\/.*$/))
-       ? this._getLocalValueAsHTML(options, value)
-       : this._getRemoteValueAsHTML(options, value);
+  getSuggestions(query: string, queryOptions: IQueryOptions, currentPid: string): Observable<ISuggestionItem[]> {
+    if (!query) {
+      return of([]);
+    }
+    // If no search category is selected [bf:Person, bf:Organisation, bf:Topic, ...] (from option list), then throw an error
+    if (null == queryOptions.filter) {
+      throw Error('Missing filters definition');
+    }
+    const searchCategory = queryOptions.filter;
+
+    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+    const params = new HttpParams().set('size', queryOptions.maxOfResult);
+    // Build API call to get remote suggestions.
+    const remoteUrl = `${this.remoteSearchEntrypoint}/${searchCategory}/${query}/`;
+    const remoteSuggestions$ = this.httpClient.get(remoteUrl, {headers, params}).pipe(
+      map((results: any) => results?.hits?.total >= 0 ? results.hits.hits : []),
+      map((hits: Array<any>) => this.buildRemoteSuggestions(hits)),
+      catchError(e => {
+        switch (e.status) {
+          case 400: return of([]);
+          default: throw e;
+        }
+      })
+    );
+
+    // Build API call to get local entity suggestions.
+    const localUrl = `${this.localSearchEntrypoint}/${searchCategory}/${query}/`;
+    const localSuggestions$ = this.httpClient.get(localUrl, {headers, params}).pipe(
+      map((hits: Array<any>) => this.buildLocalSuggestions(hits)),
+      catchError(e => {
+        switch (e.status) {
+          case 400: return of([]);
+          default: throw e;
+        }
+      })
+    );
+    // Return the concatenation of both API request.
+    return forkJoin([remoteSuggestions$, localSuggestions$]).pipe(
+      map(([remoteHits, localHits]) => [...remoteHits, ...localHits])
+    );
+  }
+  getValueAsHTML(queryOptions: IQueryOptions, item: ISuggestionItem): Observable<string> {
+    return (item.value.match(/local_entities\/.*$/))
+       ? this.getLocalValueAsHTML(queryOptions, item.value)
+       : this.getRemoteValueAsHTML(queryOptions, item.value);
   }
 
-  /**
-   * Get HTML representation for a remote entity value.
-   *
-   * @param options: typeahead options
-   * @param value: formControl value i.e. $ref value
-   * @returns Observable on HTML template representation of the value.
-   */
-  private _getRemoteValueAsHTML(options: any, value: string): Observable<string> {
+  private getRemoteValueAsHTML(options: IQueryOptions, value: string): Observable<string> {
     // We need to call the url to get remote metadata. But we can't do that directly because this url could be external. So we need to call
     // a proxy passing the URL as query string argument.
     const source = value.split('/').slice(-2)[0];
     const params = new HttpParams().set('url', value);
     const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
 
-    return this.http
-      .get(this._apiProxyEntryPoint, {params, headers})
+    return this.httpClient
+      .get(this.apiProxyEntryPoint, {params, headers})
       .pipe(
         // TODO :: remove this `map` pipe when MEF api return correct properties
         //   For MEF agents, the source URL is serialized into `identifier` properties ; for MEF concepts, this URL is found into an array
@@ -114,23 +121,23 @@ export class MefTypeahead implements ITypeahead {
           const entity = {
             label: data?.metadata?.authorized_access_point,
             type: data?.metadata?.type,
-            uri: this._get_source_uri(data?.metadata?.identifiedBy, source) || value,
+            uri: this.get_source_uri(data?.metadata?.identifiedBy, source) || value,
           };
           const badges = [{label: source.toUpperCase()}];
-          return this._buildEntityResolutionResponse(entity, badges);
+          return this.buildEntityResolutionResponse(entity, badges);
         }),
-        catchError(e => this._handleEntityResolutionError(e, value))
+        catchError(e => this.handleEntityResolutionError(e, value))
     );
   }
 
   /**
    * Get HTML representation for a local entity value.
    *
-   * @param options: typeahead options
+   * @param options: autocomplete options
    * @param value: formControl value i.e. $ref value
    * @returns Observable on HTML template representation of the value.
    */
-  private _getLocalValueAsHTML(options: any, value: string): Observable<string> {
+  private getLocalValueAsHTML(options: IQueryOptions, value: string): Observable<string> {
     const pid = value.split('/').slice(-1)[0];
     return this.recordService
       .getRecord('local_entities', pid)
@@ -139,15 +146,15 @@ export class MefTypeahead implements ITypeahead {
            const entity = {
              label: data.metadata.authorized_access_point,
              type: data.metadata.type,
-             uri: this._buildLocalEntityDetailViewURI(data.metadata.pid)
+             uri: this.buildLocalEntityDetailViewURI(data.metadata.pid)
            };
            const badges = [];
            if (data.metadata?.source_catalog) {
              badges.push({label: data.metadata.source_catalog});
            }
-           return this._buildEntityResolutionResponse(entity, badges);
+           return this.buildEntityResolutionResponse(entity, badges);
          }),
-         catchError(e => this._handleEntityResolutionError(e, value))
+         catchError(e => this.handleEntityResolutionError(e, value))
       );
   }
 
@@ -157,7 +164,7 @@ export class MefTypeahead implements ITypeahead {
    * @param badges: badges list to append to the entity.
    * @returns the HTML representation for the entity.
    */
-  private _buildEntityResolutionResponse(entity: {label:string, type: string, uri?: string}, badges: Array<{label: string, type?: string}>): string {
+  private buildEntityResolutionResponse(entity: {label:string, type: string, uri?: string}, badges: Array<{label: string, type?: string}>): string {
     // Type of entity
     const icon = Entity.getIcon(entity.type);
     const title = this.translateService.instant(entity.type);
@@ -179,76 +186,35 @@ export class MefTypeahead implements ITypeahead {
    * @param error: the triggered error
    * @param value: the entity value causing the resolution error.
    */
-  private _handleEntityResolutionError(error: Error, value: string): Observable<string> {
+  private handleEntityResolutionError(error: Error, value: string): Observable<string> {
     console.error(`getValueAsHTML :: Unable to resolve entity :: ${value}`, error);
     return of(`<span class="text-warning"><i class="fa fa-exclamation-triangle mr-1"></i>${value}</span>`);
   }
 
-
-  // GET ENTITY SUGGESTIONS ===================================================
-  /**
-   * Get the suggestions list given a search query.
-   * @param options - remote typeahead options
-   * @param searchTerm - search query to retrieve the suggestions list
-   * @param numberOfSuggestions - the max number of suggestion to return
-   * @returns - an observable of the list of suggestions.
-   */
-  getSuggestions(options: any, searchTerm: string, numberOfSuggestions: number): Observable<Array<SuggestionMetadata | string>> {
-    // If no search term is specified, no need to do a search, just return an empty suggestion array
-    if (!searchTerm) {
-      return of([]);
-    }
-    // If no search category is selected [bf:Person, bf:Organisation, bf:Topic, ...] (from option list), then throw an error
-    if (null == options?.filters?.selected) {
-      throw Error('Missing filters definition');
-    }
-    const searchCategory = options.filters.selected;
-
-    const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
-    const params = new HttpParams().set('size', numberOfSuggestions);
-    // Build API call to get remote suggestions.
-    const remoteUrl = `${this._remoteSearchEntrypoint}/${searchCategory}/${searchTerm}/`;
-    const remoteSuggestions$ = this.http.get(remoteUrl, {headers, params}).pipe(
-      map((results: any) => results?.hits?.total >= 0 ? results.hits.hits : []),
-      map((hits: Array<any>) => this._buildRemoteSuggestions(hits)),
-      catchError(e => {
-        switch (e.status) {
-          case 400: return of([]);
-          default: throw e;
-        }
-      })
-    );
-    // Build API call to get local entity suggestions.
-    const localUrl = `${this._localSearchEntrypoint}/${searchCategory}/${searchTerm}/`;
-    const localSuggestions$ = this.http.get(localUrl, {headers, params}).pipe(
-      map((hits: Array<any>) => this._buildLocalSuggestions(hits)),
-      catchError(e => {
-        switch (e.status) {
-          case 400: return of([]);
-          default: throw e;
-        }
-      })
-    );
-    // Return the concatenation of both API request.
-    return forkJoin([remoteSuggestions$, localSuggestions$]).pipe(
-      map(([remoteHits, localHits]) => [...remoteHits, ...localHits])
-    );
-  }
-
   /**
    * Build suggestions for remote entities proxy response.
    * @param hits: the hits returned by the API call.
    * @returns Suggestions corresponding to hits.
    */
-  private _buildRemoteSuggestions(hits: any): SuggestionMetadata[] {
+  private buildRemoteSuggestions(hits: any): ISuggestionItem[] {
     const suggestions = [];
+    this.sources().map((source: string) => suggestions.push({
+      label: source,
+      items: []
+    }));
+    let selectedSource: any;
+
     hits.map((hit: any) => {
       for (const source of this.sources()) {
         if (hit.metadata[source]) {
-          suggestions.push(this._getNameRef(hit.metadata, source));
+          selectedSource = suggestions.filter((suggestion: any) => suggestion.label === source);
+          if (selectedSource.length === 1) {
+            selectedSource[0].items.push(this.getNameRef(hit.metadata, source));
+          }
         }
       }
     });
+
     return suggestions;
   }
 
@@ -259,14 +225,12 @@ export class MefTypeahead implements ITypeahead {
    * @param sourceName The name of the source (idref, gnd, ...)
    * @return The suggestion to display.
    */
-  private _getNameRef(metadata: any, sourceName: string): SuggestionMetadata {
+  private getNameRef(metadata: any, sourceName: string): any {
     metadata = metadata[sourceName];
     return {
       label: metadata.authorized_access_point,
-      externalLink: this._get_source_uri(metadata?.identifiedBy, sourceName),
-      value: this._get_source_uri(metadata?.identifiedBy, 'mef'),
-      group: sourceName,
-      column: 0
+      link: this.get_source_uri(metadata?.identifiedBy, sourceName),
+      value: this.get_source_uri(metadata?.identifiedBy, 'mef'),
     };
   }
 
@@ -276,7 +240,7 @@ export class MefTypeahead implements ITypeahead {
    * @param sourceName: the name of the source (idref, gnd, ...)
    * @return the corresponding URI or null if not found
    */
-  private _get_source_uri(identifiers: Array<{source:string, type:string, value:string}>, sourceName: string): string|undefined {
+  private get_source_uri(identifiers: Array<{source:string, type:string, value:string}>, sourceName: string): string|undefined {
     const identifier = identifiers.find(id => id.source.toLowerCase() == sourceName.toLowerCase() && id.type == 'uri');
     return (identifier != undefined)
       ? identifier.value
@@ -302,17 +266,18 @@ export class MefTypeahead implements ITypeahead {
    * @param hits: the hits returned by the API call.
    * @returns Suggestions corresponding to hits.
    */
-  private _buildLocalSuggestions(hits: any): SuggestionMetadata[] {
-    return hits.map(hit => {
-      return {
+  private buildLocalSuggestions(hits: any): ISuggestionItem[] {
+    const suggestions = [{ label: 'local', items: [] }];
+    hits.map((hit: any) => {
+      suggestions[0].items.push({
         label: hit.authorized_access_point,
-        description: hit?.source_catalog,
+        summary: hit?.source_catalog,
         value: this.apiService.getRefEndpoint('local_entities', hit.pid),
-        externalLink: this._buildLocalEntityDetailViewURI(hit.pid),
-        group: 'local',
-        column: 1,
-      };
+        link: this.buildLocalEntityDetailViewURI(hit.pid),
+      });
     });
+
+    return suggestions;
   }
 
   /**
@@ -321,7 +286,7 @@ export class MefTypeahead implements ITypeahead {
    * @param pid - the entity pid
    * @returns the entity detail view URI
    */
-  private _buildLocalEntityDetailViewURI(pid: string): string {
+  private buildLocalEntityDetailViewURI(pid: string): string {
     let url = `/records/local_entities/detail/${pid}`;
     // TODO :: Very ugly hack.... I'm dying... but not found better alternative :(
     //   The problem is that professional interface is included as a webComponent into the public RERO-ILS app.
diff --git a/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/patrons-remote.service.spec.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/patrons-remote.service.spec.ts
new file mode 100644
index 000000000..75d01b92e
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/patrons-remote.service.spec.ts
@@ -0,0 +1,31 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { TestBed } from '@angular/core/testing';
+import { PatronsRemoteService } from './patrons-remote.service';
+
+describe('PatronsRemoteService', () => {
+  let service: PatronsRemoteService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(PatronsRemoteService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/patrons-remote.service.ts b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/patrons-remote.service.ts
new file mode 100644
index 000000000..b142141df
--- /dev/null
+++ b/projects/admin/src/app/record/editor/formly/primeng/remote-autocomplete/remote/patrons-remote.service.ts
@@ -0,0 +1,83 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { inject, Injectable } from '@angular/core';
+import { IRemoteAutocomplete } from './i-remote-autocomplete';
+import { ApiService, RecordService } from '@rero/ng-core';
+import { IQueryOptions, ISuggestionItem } from '@rero/ng-core/lib/record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.interface';
+import { catchError, map, Observable, of } from 'rxjs';
+import { PatronService } from '@app/admin/service/patron.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class PatronsRemoteService implements IRemoteAutocomplete {
+
+  private recordService: RecordService = inject(RecordService);
+  private patronService: PatronService = inject(PatronService);
+  private apiService: ApiService = inject(ApiService);
+
+  getName(): string {
+    return 'patrons';
+  }
+
+  getSuggestions(query: string, queryOptions: IQueryOptions, currentPid: string): Observable<ISuggestionItem[]> {
+    if (!query) {
+      return of([]);
+    }
+
+    return this.recordService.getRecords(
+      this.getName(),
+      query,
+      1,
+      queryOptions.maxOfResult
+    ).pipe(
+      map((result: any) => {
+        const patrons = [];
+        result.hits.hits.map((hit: any) => patrons.push(this.getPatronsRef(hit.metadata, query)));
+
+        return patrons;
+      }),
+      catchError(e => {
+        switch (e.status) {
+          case 400:
+            return of([]);
+          default:
+            throw e;
+        }
+      })
+    );
+  }
+  getValueAsHTML(queryOptions: IQueryOptions, item: ISuggestionItem): Observable<string> {
+    const url = item.value.split('/');
+    const pid = url.pop();
+
+    return this.recordService
+      .getRecord(queryOptions.type, pid, 1)
+      .pipe(
+        map((data: any) =>
+          `<span class="bg-light p-2 font-bold">${this.patronService.getFormattedName(data.metadata)}</span>`
+        )
+      );
+  }
+
+  private getPatronsRef(metadata: any, query: string): ISuggestionItem {
+    return {
+      label: this.patronService.getFormattedName(metadata),
+      value: this.apiService.getRefEndpoint(this.getName(), metadata.pid)
+    };
+  }
+}
diff --git a/projects/admin/src/app/record/editor/type/field-custom.type.ts b/projects/admin/src/app/record/editor/type/field-custom.type.ts
index 5cfb664f9..20f6d2412 100644
--- a/projects/admin/src/app/record/editor/type/field-custom.type.ts
+++ b/projects/admin/src/app/record/editor/type/field-custom.type.ts
@@ -23,7 +23,7 @@ import { FieldType, FieldTypeConfig } from '@ngx-formly/core';
     <div class="form-group m-0 d-flex align-items-start">
       <!-- label -->
       @if (props.label && props.hideLabel !== true) {
-        <label [attr.for]="id" class="mr-2 col-form-label" [tooltip]="props.description">
+        <label [attr.for]="id" class="mr-2 col-form-label" [pTooltip]="props.description" tooltipPosition="top">
           {{ props.label }}
           @if (props.required && props.hideRequiredMarker !== true) {
             &nbsp;*
diff --git a/projects/admin/src/app/record/editor/wrappers/identifiedby-value.component.ts b/projects/admin/src/app/record/editor/wrappers/identifiedby-value.component.ts
index a16d663e3..350e0a73e 100644
--- a/projects/admin/src/app/record/editor/wrappers/identifiedby-value.component.ts
+++ b/projects/admin/src/app/record/editor/wrappers/identifiedby-value.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FieldWrapper } from '@ngx-formly/core';
 import { Record, RecordService } from '@rero/ng-core';
@@ -46,6 +46,8 @@ import { IdentifierTypes } from '../../../classes/identifiers';
 })
 export class IdentifiedbyValueComponent extends FieldWrapper implements OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+
   /** Message observable */
   message$: Observable<any>;
 
@@ -55,14 +57,6 @@ export class IdentifiedbyValueComponent extends FieldWrapper implements OnInit {
   /** Record pid */
   recordPid: string | null;
 
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   */
-  constructor(private recordService: RecordService) {
-    super();
-  }
-
   /** OnInit hook */
   ngOnInit(): void {
     const control = this.formControl;
diff --git a/projects/admin/src/app/record/editor/wrappers/user-id/user-id.component.ts b/projects/admin/src/app/record/editor/wrappers/user-id.component.ts
similarity index 50%
rename from projects/admin/src/app/record/editor/wrappers/user-id/user-id.component.ts
rename to projects/admin/src/app/record/editor/wrappers/user-id.component.ts
index 83e2c287c..88ff8900b 100644
--- a/projects/admin/src/app/record/editor/wrappers/user-id/user-id.component.ts
+++ b/projects/admin/src/app/record/editor/wrappers/user-id.component.ts
@@ -15,37 +15,38 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { FieldWrapper } from '@ngx-formly/core';
 import { RecordService } from '@rero/ng-core';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
-import { Observable, of } from 'rxjs';
-import { switchMap } from 'rxjs/operators';
-import { UserIdEditorComponent } from '../../../custom-editor/user-id-editor/user-id-editor.component';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { Observable, of, Subscription } from 'rxjs';
+import { UserIdEditorComponent } from '../../custom-editor/user-id-editor/user-id-editor.component';
 
 @Component({
   selector: 'admin-user-id',
-  templateUrl: './user-id.component.html'
+  template: `
+  @if (user$ | async; as user) {
+    <strong>
+      {{ $any(user).metadata.last_name }}, {{ $any(user).metadata.first_name }}
+      @if (user.metadata.city) {
+        ({{ user.metadata.city }})
+      }
+    </strong>
+    <p-button [label]="'Edit' |translate" [outlined]="true" (onClick)="openModal()"></p-button>
+  } @else {
+    <p-button [label]="'Create' |translate" [outlined]="true" (onClick)="openModal()"></p-button>
+  }
+  `
 })
-export class UserIdComponent extends FieldWrapper implements OnInit {
+export class UserIdComponent extends FieldWrapper implements OnInit, OnDestroy {
 
-  /** User component to open in a modal */
-  modalRef: BsModalRef;
+  private dialogService: DialogService = inject(DialogService);
+  private recordService: RecordService = inject(RecordService);
 
   /** current user */
   user$: Observable<any>;
 
-  /**
-   * constructor
-   * @param modalService - ngx-bootstrap BsModalService
-   * @param recordService - ng-core RecordService
-   */
-  constructor(
-    private modalService: BsModalService,
-    private recordService: RecordService
-  ) {
-    super();
-  }
+  private subscription = new Subscription();
 
   /**
    * Get the user personal information to display in the editor.
@@ -56,28 +57,29 @@ export class UserIdComponent extends FieldWrapper implements OnInit {
     }
   }
 
+  ngOnDestroy(): void {
+      this.subscription.unsubscribe();
+  }
+
   /**
    * Open the modal with the User personal information editor.
    */
   openModal(): void {
-    // return;
-    this.modalRef = this.modalService.show(
-      UserIdEditorComponent,
-      {
-        class: 'modal-lg',
-        ignoreBackdropClick: true,
-        initialState: { userID: this.formControl.value }
-      });
-    this.user$ = this.modalRef.onHidden.pipe(
-      switchMap(() => {
-        const { userID } = this.modalRef.content;
-        if (userID != null) {
-          this.formControl.setValue(userID);
+
+    const ref: DynamicDialogRef = this.dialogService.open(UserIdEditorComponent, {
+      dismissableMask: true,
+      data: { userID: this.formControl.value }
+    });
+    this.subscription.add(
+      ref.onClose.subscribe((userId?: string) => {
+        if (userId) {
+          this.formControl.setValue(userId);
           // need to force the role validation as the user can be changed
           this.formControl.root.get('roles').updateValueAndValidity();
-          return this.recordService.getRecord('users', userID);
+          return this.recordService.getRecord('users', userId);
+        } else {
+          return of(null);
         }
-        return of(null);
       })
     );
   }
diff --git a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.ts b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.ts
index 2cc3972cd..ed1d7989c 100644
--- a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.ts
+++ b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, OnInit } from '@angular/core';
 import { CirculationPolicyApiService } from '@app/admin/api/circulation-policy-api.service';
 import { ItemTypeApiService } from '@app/admin/api/item-type-api.service';
 import { PatronTypeApiService } from '@app/admin/api/patron-type-api.service';
@@ -30,6 +30,13 @@ import { Settings } from './class/settings';
 })
 export class CipoPatronTypeItemTypeComponent extends FieldArrayType implements OnInit {
 
+  private patronTypeApiService: PatronTypeApiService = inject(PatronTypeApiService);
+  private itemTypeApiService: ItemTypeApiService = inject(ItemTypeApiService);
+  private circulationPolicyApiService: CirculationPolicyApiService = inject(CirculationPolicyApiService);
+  private translateService: TranslateService = inject(TranslateService);
+  private apiService: ApiService = inject(ApiService);
+  private ref: ChangeDetectorRef = inject(ChangeDetectorRef);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Patron types */
   patronTypes = [];
@@ -51,27 +58,6 @@ export class CipoPatronTypeItemTypeComponent extends FieldArrayType implements O
       : this.translateService.instant('Item types / Patron types matching');
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param patronTypeApiService - PatronTypeApiService
-   * @param itemTypeApiService - ItemTypeApiService
-   * @param circulationPolicyApiService - CirculationPolicyApiService
-   * @param translateService - TranslateService
-   * @param apiService - ApiService
-   * @param ref: ChangeDetectorRef
-   */
-  constructor(
-    private patronTypeApiService: PatronTypeApiService,
-    private itemTypeApiService: ItemTypeApiService,
-    private circulationPolicyApiService: CirculationPolicyApiService,
-    private translateService: TranslateService,
-    private apiService: ApiService,
-    private ref: ChangeDetectorRef
-  ) {
-    super();
-  }
-
   /** OnInit hook */
   ngOnInit() {
     const appliedLibraries = this.field.parent.model.libraries || [];
@@ -139,7 +125,7 @@ export class CipoPatronTypeItemTypeComponent extends FieldArrayType implements O
 
   /** Build and load the settings table */
   private _loadSettings(): void {
-    const settings = new Settings(this.apiService);
+    const settings = new Settings();
     this.settings = settings
       .setCirculationPolicy(this.form.value)
       .createStructure(this.itemTypes, this.patronTypes, this.circPolicies, this.prevSelectedLibraries)
diff --git a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.spec.ts b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.spec.ts
index f701632f9..e62b0bf9d 100644
--- a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.spec.ts
+++ b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,11 +14,10 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { ApiService, CoreConfigService } from '@rero/ng-core';
 import { Settings } from './settings';
 
 describe('Settings', () => {
-  const service = new Settings(new ApiService(new CoreConfigService()));
+  const service = new Settings();
   it('should create an instance', () => {
     expect(service).toBeTruthy();
   });
diff --git a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.ts b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.ts
index cf1273d12..b33c5a950 100644
--- a/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.ts
+++ b/projects/admin/src/app/record/formly/type/cipo-patron-type-item-type/class/settings.ts
@@ -14,10 +14,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { inject } from '@angular/core';
 import { ApiService } from '@rero/ng-core';
 
 export class Settings {
 
+  private apiService: ApiService = inject(ApiService);
+
   /** Current circulation policy  */
   private circulationPolicy: any;
 
@@ -30,12 +33,6 @@ export class Settings {
   /** Settings */
   private settings = [];
 
-  /**
-   * Constructor
-   * @param apiService - ApiService
-   */
-  constructor(private apiService: ApiService) {}
-
   /**
    * Set Circulation policy
    * @param circulationPolicy - Current Circulation Policy
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.html b/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.html
deleted file mode 100644
index 4ab4348d0..000000000
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local-form/add-entity-local-form.component.html
+++ /dev/null
@@ -1,44 +0,0 @@
-<!--
-  RERO ILS UI
-  Copyright (C) 2019-2024 RERO
-  Copyright (C) 2019-2023 UCLouvain
-
-  This program is free software: you can redistribute it and/or modify
-  it under the terms of the GNU Affero General Public License as published by
-  the Free Software Foundation, version 3 of the License.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  GNU Affero General Public License for more details.
-
-  You should have received a copy of the GNU Affero General Public License
-  along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-@if (schema) {
-  <form [formGroup]="form" (ngSubmit)="submit()">
-    <div class="modal show d-block" role="dialog">
-      <div class="modal-dialog modal-xl modal-dialog-centered">
-        <div class="modal-content">
-          <div class="modal-header">
-            <h5 class="modal-title" translate>Add local entity</h5>
-            <div class="d-flex">
-              <button type="button" id="user-editor-delete-button" class="btn btn-outline-danger btn-sm mr-1"
-                (click)="closeModal()">
-                <i class="fa fa-times"></i>
-                {{ 'Cancel' | translate }}
-              </button>
-              <button type="submit" id="user-editor-save-button" class="btn btn-primary btn-sm">
-                <i class="fa fa-save"></i>
-                {{ 'Save' | translate }}
-              </button>
-            </div>
-          </div>
-          <div class="modal-body">
-            <formly-form [model]="model" [fields]="fields" [form]="form"></formly-form>
-          </div>
-        </div>
-      </div>
-    </div>
-  </form>
-}
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local.component.ts b/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local.component.ts
deleted file mode 100644
index 3ff88b394..000000000
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/add-entity-local.component.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2019-2024 RERO
- * Copyright (C) 2019-2023 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { ApiService, SuggestionMetadata } from '@rero/ng-core';
-import { PERMISSIONS, PermissionsService } from '@rero/shared';
-import { BsModalService } from 'ngx-bootstrap/modal';
-import { TypeaheadMatch } from 'ngx-bootstrap/typeahead';
-import { AddEntityLocalFormComponent } from './add-entity-local-form/add-entity-local-form.component';
-import { EntityTypeFilter } from './entity-typeahead.interface';
-
-@Component({
-  selector: 'admin-add-entity-local',
-  template: `
-  @if (canAdd) {
-    <button class="btn btn-sm btn-primary mt-2" (click)="addEntity()">
-      <i class="fa fa-plus-square-o" aria-hidden="true"></i>
-      {{ 'Add local entity' | translate }}
-    </button>
-  }
-  `
-})
-export class AddEntityLocalComponent {
-
-  /** Available types for typeahead select */
-  @Input() entityTypeFilters: EntityTypeFilter[];
-
-  /** Text searched by user */
-  @Input() searchTerm: string;
-
-  /** Event for record create */
-  @Output() recordCreate: EventEmitter<any> = new EventEmitter();
-
-  /**
-   * Is the button available for adding a locale entity?
-   * @returns boolean
-   */
-  get canAdd(): boolean {
-    return this.permissionService.canAccess(PERMISSIONS.LOCENT_CREATE);
-  }
-
-  /**
-   * Constructor
-   * @param permissionService - PermissionsService
-   * @param modalService - BsModalService
-   * @param translateService - TranslateService
-   * @param apiService - ApiService
-   */
-  constructor(
-    private permissionService: PermissionsService,
-    private modalService: BsModalService,
-    private translateService: TranslateService,
-    private apiService: ApiService
-  ) {}
-
-  /** Open the dialog to add an entity */
-  addEntity(): void {
-    const modalRef = this.modalService.show(AddEntityLocalFormComponent, {
-      ignoreBackdropClick: true,
-      keyboard: true,
-      class: 'modal-xl',
-      initialState: {
-        entityTypeFilters: this.entityTypeFilters,
-        searchTerm: this.searchTerm
-      }
-    });
-    modalRef.content.closeDialog.subscribe(() => modalRef.hide());
-    modalRef.content.recordCreate.subscribe((record: any) => {
-      const item: SuggestionMetadata = {
-        label: record.metadata.name,
-        value: this.apiService.getRefEndpoint('local_entities', record.metadata.pid),
-        externalLink: `/records/local_entities/detail/${record.metadata.pid}`,
-        group: this.translateService.instant('link to local authority')
-      };
-      this.recordCreate.emit(new TypeaheadMatch(item, item.label))
-    });
-  }
-}
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.html b/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.html
deleted file mode 100644
index 6471847b1..000000000
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.html
+++ /dev/null
@@ -1,100 +0,0 @@
-<!--
-  RERO ILS UI
-  Copyright (C) 2019-2024 RERO
-  Copyright (C) 2019-2023 UCLouvain
-
-  This program is free software: you can redistribute it and/or modify
-  it under the terms of the GNU Affero General Public License as published by
-  the Free Software Foundation, version 3 of the License.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  GNU Affero General Public License for more details.
-
-  You should have received a copy of the GNU Affero General Public License
-  along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-@if (!formControl.value) {
-  <div class="input-group w-100">
-    <!-- Entity type filter selection ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-    @if (entityTypeFilters) {
-      <div class="input-group-prepend">
-        <select class="form-control input-group-text" (change)="selectEntityType($event.target.value)">
-          @for (option of entityTypeFilters; track option) {
-            <option [value]="option.value"
-                    [selected]="option.selected"
-            >{{ option.label | translate }}</option>
-          }
-        </select>
-      </div>
-    }
-    <!-- autocomplete/typeahead ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-    <input [(ngModel)]="searchTerm"
-           [typeahead]="suggestion$"
-           [typeaheadAsync]="true"
-           [typeaheadMinLength]="2"
-           [typeaheadWaitMs]="250"
-           [typeaheadLatinize]="true"
-           [optionsListTemplate]="customListTemplate"
-           (typeaheadLoading)="isSuggestionsLoading = $event"
-           (typeaheadOnSelect)="typeaheadOnSelect($event)"
-           class="form-control"/>
-    <!-- Icon ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-    <div class="input-group-append">
-      <span class="input-group-text">
-        <i class="fa fa-search" class="fa" [ngClass]="{
-          'fa-search': !isSuggestionsLoading,
-          'fa-spinner fa-spin': isSuggestionsLoading
-        }"></i>
-      </span>
-    </div>
-  </div>
-} @else {
-  @if (valueAsHTML$ | async; as valueAsHTML) {
-    <div class="py-1">
-      <span [innerHTML]="valueAsHTML"></span>
-      <button class="btn btn-link text-secondary btn-sm" type="button" (click)="clear()">
-        <i class="fa fa-trash"></i>
-      </button>
-    </div>
-  }
-}
-
-<ng-template #customListTemplate let-matches="matches" let-query="query" let-typeaheadTemplateMethods>
-  <div class="d-flex">
-    @for (section of suggestionSections; track section; let idx=$index) {
-      <div class="dropdown-column" [style]="{order: idx}">
-        @for (suggestion of section; track suggestion) {
-          <div  class="dropdown-item d-flex flex-row"
-               [class.suggestionGroupHeader]="suggestion.isHeader()"
-          >
-            <div (click)="typeaheadTemplateMethods.selectMatch(suggestion, $event)" class="dropdown-item-content">
-              <label>{{ suggestion.value }}</label>
-              @if (suggestion.item.description) {
-                <span class="dropdown-item-content-description">{{ suggestion.item.description }}</span>
-              }
-            </div>
-            <span class="dropdown-item-actions">
-              @if (suggestion.item.externalLink) {
-                <a target="_blank" [href]="suggestion.item.externalLink">
-                  <i class="fa fa-external-link"></i>
-                </a>
-              }
-            </span>
-          </div>
-        }
-        <!-- idx 1: local entity -->
-        @if (idx === 1) {
-          <admin-add-entity-local
-            class="ml-2 w-100"
-            [entityTypeFilters]="entityTypeFilters"
-            [searchTerm]="searchTerm"
-            (recordCreate)="typeaheadTemplateMethods.selectMatch($event)"
-          ></admin-add-entity-local>
-        }
-      </div>
-    }
-  </div>
-</ng-template>
-
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.scss b/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.scss
deleted file mode 100644
index 81da70b94..000000000
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
- * Copyright (C) 2019-2023 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-@import 'bootstrap/scss/bootstrap';
-
-.dropdown-column + .dropdown-column {
-  @extend .border-left;
-}
-
-.dropdown-item {
-  white-space: normal;
-
-  &.suggestionGroupHeader {
-    @extend .disabled;
-    @extend .font-weight-bold;
-    @extend .pl-2;
-    font-variant: small-caps;
-    font-size: .75rem;
-  }
-
-  .dropdown-item-content {
-    @extend .mr-2;
-    flex-grow: 1;
-
-    .dropdown-item-content-description {
-      @extend .d-block;
-      @extend .text-secondary;
-      @extend .ml-2;
-      @extend .font-italic;
-      font-size: .75rem;
-
-      &:before {
-        content: '[';
-      }
-      &:after {
-        content: ']';
-      }
-    }
-  }
-
-  .dropdown-item-actions {
-    min-width: 1rem;
-    a {
-      @extend .text-primary;
-      display: none;
-    }
-  }
-
-  &:hover {
-    * {
-      cursor: pointer;
-    }
-    * a {
-      display: block;
-    }
-  }
-
-}
diff --git a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.ts b/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.ts
deleted file mode 100644
index ba63427da..000000000
--- a/projects/admin/src/app/record/formly/type/entity-typeahead/entity-typeahead.component.ts
+++ /dev/null
@@ -1,240 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2019-2024 RERO
- * Copyright (C) 2019-2023 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { Component, OnInit } from '@angular/core';
-import { MefTypeahead } from '@app/admin/classes/typeahead/mef-typeahead';
-import { EntityTypeFilter } from '@app/admin/record/formly/type/entity-typeahead/entity-typeahead.interface';
-import { FieldType } from '@ngx-formly/core';
-import { TranslateService } from '@ngx-translate/core';
-import { SuggestionMetadata } from '@rero/ng-core';
-import { PERMISSIONS, PermissionsService } from '@rero/shared';
-import { TypeaheadMatch } from 'ngx-bootstrap/typeahead';
-import { Observable, Observer, merge, of } from 'rxjs';
-import { map, switchMap } from 'rxjs/operators';
-
-@Component({
-  selector: 'admin-entity-typeahead',
-  templateUrl: './entity-typeahead.component.html',
-  styleUrls: ['./entity-typeahead.component.scss']
-})
-export class EntityTypeaheadComponent extends FieldType implements OnInit {
-
-  // COMPONENT ATTRIBUTES =====================================================
-  /** searched term */
-  searchTerm: string = null;
-  /** entity type filter options */
-  entityTypeFilters: EntityTypeFilter[] = [];
-  /** is the suggestions are loading ? */
-  isSuggestionsLoading: boolean = false;
-
-  /** observable on entity suggestions */
-  suggestion$: Observable<(SuggestionMetadata | string)[][]>;
-  /** observable on representation of the formControl value. */
-  valueAsHTML$: Observable<string>;
-  /** suggestions data from remote typeahead service */
-  suggestionSections: TypeaheadMatch[][] = [];
-
-
-  /** the number of suggestions to retrieve from suggestion service */
-  private _numberOfSuggestions: number = 10;
-
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param remoteTypeahead - MefTypeahead
-   * @param translateService - TranslateService
-   * @param permissionService - PermissionsService
-   */
-  constructor(
-    private remoteTypeahead: MefTypeahead,
-    private translateService: TranslateService,
-    private permissionService: PermissionsService
-  ) {
-    super();
-  }
-
-  /** OnInit hook. */
-  ngOnInit() {
-   this._buildEntityTypeFilters();
-
-   this.suggestion$ = new Observable((observer: Observer<string>) => observer.next(this.searchTerm)).pipe(
-     switchMap((query: string) => {
-       const selectedEntityType = this.entityTypeFilters.find(entity => entity.selected) || this.entityTypeFilters[0];
-       const options = {filters: {selected: selectedEntityType.value}};
-       return this.remoteTypeahead
-         .getSuggestions(options, query, this._numberOfSuggestions)
-         .pipe(
-           map((suggestions: any) => {
-            // Section header will be created only if suggestion defines a valid value.
-            // If the suggestion doesn't define any value, this is because this is a fake suggestion;
-            // added manually (see above).
-            // In such case, don't create any TypeaheadMatch.
-            if (
-              this.permissionService.canAccess(PERMISSIONS.LOCENT_CREATE)
-              && suggestions.find((suggestion: SuggestionMetadata) => suggestion.column === 1) === undefined
-            ) {
-              suggestions.push({
-                label: undefined,
-                value: undefined,
-                group: 'local',
-                column: 1,
-              });
-            }
-            return suggestions;
-           }),
-           map((suggestions: any) => {
-             let tmpSuggestions = this._splitSuggestionsByColumn(suggestions);
-             tmpSuggestions = this._orderBySources(this._orderSuggestions(tmpSuggestions));
-             tmpSuggestions = this._labelGroup(tmpSuggestions);
-             this.suggestionSections = this._createSuggestionGroupHeader(tmpSuggestions);
-             return suggestions;
-           })
-         );
-     })
-   );
-
-   // get the template version of the formControl value
-   const obs = new Observable((observer: Observer<string>) => observer.next(this.formControl.value));
-   this.valueAsHTML$ = merge(obs, this.formControl.valueChanges).pipe(
-      switchMap((value: string) => {
-      if(value) {
-        const selectedEntityType = this.entityTypeFilters.find(entity => entity.selected) || this.entityTypeFilters[0];
-        const options = {filters: {selected: selectedEntityType.value}};
-        return this.remoteTypeahead.getValueAsHTML(options, value);
-      }
-      return of(null);
-      })
-    );
-  }
-
-  // PUBLIC COMPONENT FUNCTIONS ===============================================
-  /**
-   * Handler when entity type filter change.
-   * @param entityType: the selected filter on select menu
-   */
-  selectEntityType(entityType: string): void {
-    this.searchTerm = null;
-    this.entityTypeFilters.forEach(option => option.selected = option.value === entityType);
-  }
-
-  /**
-   * Set the field value with the selected suggestion.
-   * @param event: the clicked suggestion.
-   */
-  typeaheadOnSelect(event: TypeaheadMatch): void {
-    if (event.item.value != null) {
-      this.formControl.setValue(event.item.value);
-    } else {
-      this.formControl.get('$ref').reset();
-    }
-    this.searchTerm = null;
-  }
-
-  /** Clear current value */
-  clear(): void {
-    this.searchTerm = null;
-    this.formControl.reset(null);
-    this.field.focus = true;
-  }
-
-  // PRIVATE COMPONENT FUNCTIONS ==============================================
-  /** Build the entity type filters based on `props` field section. */
-  private _buildEntityTypeFilters(): void {
-    this.props?.filters?.options.map(option => this.entityTypeFilters.push({
-      ...option,
-      ...{selected: option.value === this.props?.filters?.default}
-    }));
-  }
-
-  /** Split suggestion from typeahead service by column. */
-  private _splitSuggestionsByColumn(suggestions: SuggestionMetadata[]): SuggestionMetadata[][] {
-    const sections = [];
-    suggestions.forEach(suggestion => {
-      if (typeof(suggestion) === 'string') {
-        return;
-      }
-      const columnIdx = suggestion?.column || 0;
-      if (!sections[columnIdx]) {
-        sections[columnIdx] = [];
-      }
-      sections[columnIdx].push(suggestion);
-    });
-    return sections;
-  }
-
-  /** Order each suggestion for each section. */
-  private _orderSuggestions(suggestionSections: SuggestionMetadata[][]): SuggestionMetadata[][] {
-    return suggestionSections.map(section =>
-      section.sort((a, b) =>
-        (a.group === b.group)
-          ? a.label.localeCompare(b.label)
-          : a.group.localeCompare(b.group))
-    );
-  }
-
-  /** Order suggestions by sources */
-  private _orderBySources(suggestionSections: SuggestionMetadata[][]): SuggestionMetadata[][] {
-    const sources = this.remoteTypeahead.sources();
-    suggestionSections.map((section, index) => {
-      const order = [];
-      sources.map((source: string) => {
-        section.map((suggestion: any) => {
-          if (suggestion.group === source) {
-            order.push(suggestion);
-          }
-        });
-      });
-      if (order.length > 0 && (order.length === section.length)) {
-        suggestionSections[index] = order;
-      }
-    });
-    return suggestionSections;
-  }
-
-  /** Transform label */
-  private _labelGroup(suggestionSections: SuggestionMetadata[][]): SuggestionMetadata[][] {
-    suggestionSections.map(section => {
-      section.map(suggestion => {
-        suggestion.group = suggestion.group === 'local'
-          ? this.translateService.instant('link to local authority')
-          : this.translateService.instant('link to authority {{ sourceName }}', {sourceName: suggestion.group})
-      });
-    });
-    return suggestionSections;
-  }
-
-  /** Create group header for each suggestion sections. */
-  private _createSuggestionGroupHeader(suggestionSections: SuggestionMetadata[][]): TypeaheadMatch[][] {
-    return suggestionSections.map(section => {
-      const newSectionSuggestions = [];
-      let lastGroup = '';
-      section.forEach(suggestion => {
-        if (suggestion?.group && suggestion.group !== lastGroup) {
-          lastGroup = suggestion.group;
-          newSectionSuggestions.push(new TypeaheadMatch(suggestion.group, suggestion.group, true));
-        }
-        // We create a section header only if the value is present.
-        // If we have a suggestion with no value, it's because it's been added manually (see above),
-        // no need to create a new suggestion.
-        if (suggestion.value) {
-          newSectionSuggestions.push(new TypeaheadMatch(suggestion, suggestion.label, false));
-        }
-      });
-      return newSectionSuggestions;
-    })
-  }
-}
diff --git a/projects/admin/src/app/record/operation-logs/operation-logs-dialog/operation-logs-dialog.component.html b/projects/admin/src/app/record/operation-logs/operation-logs-dialog/operation-logs-dialog.component.html
index c57a08051..5cb98185c 100644
--- a/projects/admin/src/app/record/operation-logs/operation-logs-dialog/operation-logs-dialog.component.html
+++ b/projects/admin/src/app/record/operation-logs/operation-logs-dialog/operation-logs-dialog.component.html
@@ -14,12 +14,11 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<button
+<p-button
+  icon="fa fa-history"
   id="{{ resourceType }}-operation-history"
-  class="btn btn-sm btn-outline-secondary"
+  [label]="'Operation history'|translate"
+  [outlined]="true"
   [permissions]="permissions.OPLG_SEARCH"
-  (click)="openDialog()"
->
-  <i class="fa fa-history"></i>
-  {{ 'Operation history' | translate }}
-</button>
+  (onClick)="openDialog()"
+/>
diff --git a/projects/admin/src/app/record/operation-logs/operation-logs-dialog/operation-logs-dialog.component.ts b/projects/admin/src/app/record/operation-logs/operation-logs-dialog/operation-logs-dialog.component.ts
index a7fcbc473..709824735 100644
--- a/projects/admin/src/app/record/operation-logs/operation-logs-dialog/operation-logs-dialog.component.ts
+++ b/projects/admin/src/app/record/operation-logs/operation-logs-dialog/operation-logs-dialog.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2022 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,10 +14,11 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { IPermissions, PERMISSIONS } from '@rero/shared';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { DialogService } from 'primeng/dynamicdialog';
 import { OperationLogsComponent } from '../operation-logs.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'admin-operation-logs-dialog',
@@ -25,39 +26,28 @@ import { OperationLogsComponent } from '../operation-logs.component';
 })
 export class OperationLogsDialogComponent {
 
+  private dialogService: DialogService = inject(DialogService);
+  private translateService: TranslateService = inject(TranslateService);
+
   /** Resource type */
   @Input() resourceType: string;
 
   /** Resource pid */
   @Input() resourcePid: string;
 
-  /** Modal ref */
-  bsModalRef: BsModalRef;
-
   /** return all permissions */
   permissions: IPermissions = PERMISSIONS;
 
-  /**
-   * Constructor
-   * @param modalService - BsModalService
-   */
-  constructor(private modalService: BsModalService) {}
-
   /** Open operation logs dialog */
   openDialog(): void {
-    const config = {
-      ignoreBackdropClick: false,
-      keyboard: true,
-      initialState: {
+    this.dialogService.open(OperationLogsComponent, {
+      header: this.translateService.instant('Operation history'),
+      dismissableMask: true,
+      width: '60vw',
+      data: {
         resourceType: this.resourceType,
         resourcePid: this.resourcePid
       }
-    };
-    this.bsModalRef = this.modalService.show(OperationLogsComponent, config);
-    this.bsModalRef.content.dialogClose$.subscribe((value: boolean) => {
-      if (value) {
-        this.bsModalRef.hide();
-      }
     });
   }
 }
diff --git a/projects/admin/src/app/record/operation-logs/operation-logs.component.html b/projects/admin/src/app/record/operation-logs/operation-logs.component.html
index 883575c6b..c2c8578e8 100644
--- a/projects/admin/src/app/record/operation-logs/operation-logs.component.html
+++ b/projects/admin/src/app/record/operation-logs/operation-logs.component.html
@@ -15,48 +15,36 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="modal d-block" tabindex="-1" role="dialog">
-  <div class="modal-dialog modal-xl" role="document">
-    <div class="modal-content">
-      <div class="modal-header">
-        <h5 class="modal-title" translate>Operation history</h5>
-        <button type="button" class="close pull-right" aria-label="Close" (click)="closeDialog()">
-          <span aria-hidden="true">&times;</span>
-        </button>
-      </div>
-      <div class="modal-body container">
-        @if (loadedRecord) {
-          @if (createRecord || records.length > 0) {
-            @if (createRecord) {
-              <ng-container [ngTemplateOutlet]="operationLog"
-                            [ngTemplateOutletContext]="{data: createRecord.metadata}">
-              </ng-container>
-            }
-            @if (recordTotals > 0) {
-              @for (record of records; track record) {
-                <ng-container [ngTemplateOutlet]="operationLog"
-                              [ngTemplateOutletContext]="{data: record.metadata}">
-                </ng-container>
-              }
-              @if (isLinkShowMore) {
-                <button type="button" class="btn btn-link pl-1" (click)="showMore()">
-                  <i class="fa fa-arrow-circle-o-down"></i> {{ 'Show more' | translate }}
-                </button>
-                @if (isLinkShowMore) {
-                  <small>({{ hiddenOperationLogs }})</small>
-                }
-              }
-            }
-          } @else {
-            {{ 'No history for this item' | translate }}
+<div class="w-full">
+  @if (loadedRecord) {
+    @if (createRecord || records.length > 0) {
+      @if (createRecord) {
+        <ng-container [ngTemplateOutlet]="operationLog"
+                      [ngTemplateOutletContext]="{data: createRecord.metadata}">
+        </ng-container>
+      }
+      @if (recordTotals > 0) {
+        @for (record of records; track record) {
+          <ng-container [ngTemplateOutlet]="operationLog"
+                        [ngTemplateOutletContext]="{data: record.metadata}">
+          </ng-container>
+        }
+        @if (isLinkShowMore) {
+          <button type="button" class="btn btn-link pl-1" (click)="showMore()">
+            <i class="fa fa-arrow-circle-o-down"></i> {{ 'Show more' | translate }}
+          </button>
+          @if (isLinkShowMore) {
+            <small>({{ hiddenOperationLogs }})</small>
           }
-
-        } @else {
-          <i class="fa fa-spinner fa-pulse"></i>
         }
-      </div>
-    </div>
-  </div>
+      }
+    } @else {
+      {{ 'No history for this item' | translate }}
+    }
+
+  } @else {
+    <i class="fa fa-spinner fa-pulse"></i>
+  }
 </div>
 
 <ng-template #operationLog let-metadata=data>
diff --git a/projects/admin/src/app/record/operation-logs/operation-logs.component.ts b/projects/admin/src/app/record/operation-logs/operation-logs.component.ts
index 1a5325348..988099d01 100644
--- a/projects/admin/src/app/record/operation-logs/operation-logs.component.ts
+++ b/projects/admin/src/app/record/operation-logs/operation-logs.component.ts
@@ -15,11 +15,11 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { TranslateService } from '@ngx-translate/core';
-import { Record } from '@rero/ng-core';
-import { BehaviorSubject, forkJoin, Observable } from 'rxjs';
+import { NgCoreTranslateService, Record } from '@rero/ng-core';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { forkJoin, Observable } from 'rxjs';
 import { finalize, map } from 'rxjs/operators';
 import { OperationLogsApiService } from '../../api/operation-logs-api.service';
 import { OperationLogsService } from '../../service/operation-logs.service';
@@ -31,12 +31,17 @@ import { OperationLogsService } from '../../service/operation-logs.service';
 })
 export class OperationLogsComponent implements OnInit {
 
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private dynamicDialogConfig: DynamicDialogConfig = inject(DynamicDialogConfig);
+  private operationLogsApiService: OperationLogsApiService = inject(OperationLogsApiService);
+  private operationLogService: OperationLogsService = inject(OperationLogsService);
+  private translateService: NgCoreTranslateService = inject(NgCoreTranslateService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Resource type */
-  @Input() resourceType: string;
+  resourceType: string;
   /** Resource pid */
-  @Input() resourcePid: string;
-
+  resourcePid: string;
   /** Resource key */
   resourceKey: string;
   /** Current page */
@@ -51,8 +56,6 @@ export class OperationLogsComponent implements OnInit {
   records = [];
   /** first loaded record */
   loadedRecord = false;
-  /** Event on dialog close */
-  dialogClose$ = new BehaviorSubject(false);
 
   // GETTER & SETTER ==========================================================
   /** Show more link is visible ? */
@@ -63,28 +66,18 @@ export class OperationLogsComponent implements OnInit {
   /** Hidden operation logs counter */
   get hiddenOperationLogs(): string {
     let count = this.recordTotals - (this.page * this.itemsPerPage);
-    if (count < 0) { count = 0; }
+    count = Math.max(count, 0)
     const linkText = (count > 1)
       ? _('{{ counter }} hidden operation logs')
       : _('{{ counter }} hidden operation log');
     return this.translateService.instant(linkText, { counter: count });
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param operationLogsApiService - OperationLogsApiService
-   * @param operationLogService - OperationLogsService
-   * @param translateService - TranslateService
-   */
-  constructor(
-    private operationLogsApiService: OperationLogsApiService,
-    private operationLogService: OperationLogsService,
-    private translateService: TranslateService
-  ) {}
-
+  // HOOKS ======================================================
   /** OnInit hook */
   ngOnInit(): void {
+    this.resourceType = this.dynamicDialogConfig?.data?.resourceType;
+    this.resourcePid = this.dynamicDialogConfig?.data?.resourcePid;
     this.resourceKey = this.operationLogService.getResourceKeyByResourceName(this.resourceType);
     forkJoin([this._operationLogsQuery(1, 'create'), this._operationLogsQuery(1, 'update')])
       .pipe(
@@ -102,7 +95,7 @@ export class OperationLogsComponent implements OnInit {
   // COMPONENT FUNCTIONS ======================================================
   /** Close operation log dialog */
   closeDialog(): void {
-    this.dialogClose$.next(true);
+    this.dynamicDialogRef.close();
   }
 
   /** show more */
diff --git a/projects/admin/src/app/record/search-view/document-advanced-search-form/advanced-search.service.ts b/projects/admin/src/app/record/search-view/document-advanced-search-form/advanced-search.service.ts
index af4aa92f4..a4b151db4 100644
--- a/projects/admin/src/app/record/search-view/document-advanced-search-form/advanced-search.service.ts
+++ b/projects/admin/src/app/record/search-view/document-advanced-search-form/advanced-search.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { DocumentApiService } from '@app/admin/api/document-api.service';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { Observable, of } from 'rxjs';
@@ -27,6 +27,8 @@ import { IAdvancedSearchConfig, IFieldsData, IFieldsType, ILabelValue, ILabelVal
 })
 export class AdvancedSearchService {
 
+  private documentApiService: DocumentApiService = inject(DocumentApiService);
+
   /** Field search types */
   public static SEARCH_TYPE_CONTAINS = 'contains';
   public static SEARCH_TYPE_CONTAINS_PHRASE = 'phrase';
@@ -48,12 +50,6 @@ export class AdvancedSearchService {
   /** Fields searchType mapping */
   private fieldsSearchType: IFieldsType = {};
 
-  /**
-   * Constructor
-   * @param documentApiService - DocumentApiService
-   */
-  constructor(private documentApiService: DocumentApiService) { }
-
   /**
    * Load advanced search configuration
    * @returns an observable with a Boolean that gives
diff --git a/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.ts b/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.ts
index 285dae1e1..b12912c90 100644
--- a/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.ts
+++ b/projects/admin/src/app/record/search-view/document-advanced-search-form/document-advanced-search-form.component.ts
@@ -15,11 +15,12 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 import { FormlyFieldConfig, FormlyFormOptions } from '@ngx-formly/core';
 import { LocalStorageService } from '@rero/ng-core';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
 import { BehaviorSubject } from 'rxjs';
 import { AdvancedSearchService } from './advanced-search.service';
 import { IFieldsData, IFieldsType, ISearchModel } from './i-advanced-search-config-interface';
@@ -30,16 +31,15 @@ import { IFieldsData, IFieldsType, ISearchModel } from './i-advanced-search-conf
 })
 export class DocumentAdvancedSearchFormComponent implements OnInit {
 
+  private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
+  private route: ActivatedRoute = inject(ActivatedRoute);
+  private localeStorage: LocalStorageService = inject(LocalStorageService);
+  private advancedSearchService: AdvancedSearchService = inject(AdvancedSearchService);
+
   /** Locale storage parameters */
   private static LOCALE_STORAGE_NAME = 'advancedSearch';
   private static LOCALE_STORAGE_EXPIRED_IN_SECONDS = 600;
 
-  /** Closing event for the modal dialog */
-  @Output() searchModel = new EventEmitter<string>(false);
-
-  /** Hide dialog event */
-  @Output() hideDialog = new EventEmitter<boolean>();
-
   /** Configuration loaded from backend */
   configurationLoaded: boolean = false;
 
@@ -74,18 +74,6 @@ export class DocumentAdvancedSearchFormComponent implements OnInit {
     });
   }
 
-  /**
-   * Constructor
-   * @param route - ActivatedRoute
-   * @param localeStorage - LocalStorageService
-   * @param AdvancedSearchService - AdvancedSearchService
-   */
-  constructor(
-    private route: ActivatedRoute,
-    private localeStorage: LocalStorageService,
-    private advancedSearchService: AdvancedSearchService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     const {q} = this.route.snapshot.queryParams;
@@ -99,7 +87,7 @@ export class DocumentAdvancedSearchFormComponent implements OnInit {
 
   /** Event to notify dialog closure */
   close(): void {
-    this.hideDialog.emit(true);
+    this.dynamicDialogRef.close();
   }
 
   /** Clear the form and return it to its original state */
@@ -111,7 +99,7 @@ export class DocumentAdvancedSearchFormComponent implements OnInit {
   /** Submit */
   submit(): void {
     this.localeStorage.set(DocumentAdvancedSearchFormComponent.LOCALE_STORAGE_NAME, this.model);
-    this.searchModel.emit(this.generateQueryByModel(this.model));
+    this.dynamicDialogRef.close(this.generateQueryByModel(this.model))
   }
 
   /** Init formly model */
diff --git a/projects/admin/src/app/record/search-view/document-advanced-search.component.ts b/projects/admin/src/app/record/search-view/document-advanced-search.component.ts
index daa13b502..86c5722cb 100644
--- a/projects/admin/src/app/record/search-view/document-advanced-search.component.ts
+++ b/projects/admin/src/app/record/search-view/document-advanced-search.component.ts
@@ -15,9 +15,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, OnDestroy, OnInit, Output } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { BsModalService } from 'ngx-bootstrap/modal';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Subscription } from 'rxjs';
 import { DocumentAdvancedSearchFormComponent } from './document-advanced-search-form/document-advanced-search-form.component';
 
@@ -34,6 +34,9 @@ import { DocumentAdvancedSearchFormComponent } from './document-advanced-search-
 })
 export class DocumentAdvancedSearchComponent implements OnInit, OnDestroy {
 
+  private dialogService: DialogService = inject(DialogService);
+  private route: ActivatedRoute = inject(ActivatedRoute);
+
   /** Simple search */
   simple: boolean = true;
 
@@ -41,21 +44,11 @@ export class DocumentAdvancedSearchComponent implements OnInit, OnDestroy {
   @Output() queryString = new EventEmitter<string>();
 
   /** all component subscription */
-  private subscriptions = new Subscription();
-
-  /**
-   * Constructor
-   * @param route - ActivatedRoute
-   * @param modalService - BsModalService
-   */
-  constructor(
-    private route: ActivatedRoute,
-    private modalService: BsModalService,
-  ) { }
+  private subscription = new Subscription();
 
   /** OnInit hook */
   ngOnInit(): void {
-    this.subscriptions.add(this.route.queryParams.subscribe((params: any) => {
+    this.subscription.add(this.route.queryParams.subscribe((params: any) => {
       if (params.simple) {
         if (Array.isArray(params.simple)) {
           this.simple =  params.simple.length > 0 ? ('1' === params.simple.pop()) : true;
@@ -70,20 +63,20 @@ export class DocumentAdvancedSearchComponent implements OnInit, OnDestroy {
 
   /** OnDestroy hook */
   ngOnDestroy(): void {
-      this.subscriptions.unsubscribe();
+      this.subscription.unsubscribe();
   }
 
   /** Opening the advanced search dialog */
   openModalBox(): void {
-    const modalRef = this.modalService.show(DocumentAdvancedSearchFormComponent, {
-      ignoreBackdropClick: true,
-      keyboard: true,
-      class: 'modal-xl',
-    });
-    modalRef.content.hideDialog.subscribe(() => modalRef.hide());
-    modalRef.content.searchModel.subscribe((queryString: string) => {
-      this.queryString.emit(queryString);
-      modalRef.hide();
+    const ref: DynamicDialogRef = this.dialogService.open(DocumentAdvancedSearchFormComponent, {
+      dismissableMask: true
     });
+    this.subscription.add(
+      ref.onClose.subscribe((queryString?: string) => {
+        if (queryString) {
+          this.queryString.emit(queryString);
+        }
+      })
+    );
   }
 }
diff --git a/projects/admin/src/app/record/search-view/document-record-search/document-record-search.component.ts b/projects/admin/src/app/record/search-view/document-record-search/document-record-search.component.ts
index 48751f712..9fc6d7cbc 100644
--- a/projects/admin/src/app/record/search-view/document-record-search/document-record-search.component.ts
+++ b/projects/admin/src/app/record/search-view/document-record-search/document-record-search.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,9 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { SearchResult, RecordSearchPageComponent, RecordSearchService, RecordService, RecordUiService } from '@rero/ng-core';
+import { Component, inject, OnInit } from '@angular/core';
+import { RecordSearchPageComponent, RecordService, SearchResult } from '@rero/ng-core';
 import { AppSettingsService } from '@rero/shared';
 
 @Component({
@@ -27,6 +26,9 @@ import { AppSettingsService } from '@rero/shared';
 })
 export class DocumentRecordSearchComponent extends RecordSearchPageComponent implements OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+
   /** Base url */
   private _baseUrl: string;
 
@@ -42,8 +44,8 @@ export class DocumentRecordSearchComponent extends RecordSearchPageComponent imp
    */
   get showLink(): boolean {
     return this.total === 0
-      && ('organisation' in this.activatedRoute.snapshot.queryParams)
-      && this.activatedRoute.snapshot.queryParams.q;
+      && ('organisation' in this.route.snapshot.queryParams)
+      && this.route.snapshot.queryParams.q;
   }
 
   /**
@@ -52,7 +54,7 @@ export class DocumentRecordSearchComponent extends RecordSearchPageComponent imp
    */
   get total(): null | number {
     if (this.searchResult) {
-      return this._recordService.totalHits(
+      return this.recordService.totalHits(
         this.searchResult.records.hits.total
       );
     }
@@ -65,27 +67,7 @@ export class DocumentRecordSearchComponent extends RecordSearchPageComponent imp
    * @return boolean
    */
   get isAdvancedSearchEnable(): boolean {
-    return this._appSettingsService.settings.documentAdvancedSearch;
-  }
-
-  /**
-   * Constructor
-   * @param activatedRoute - ActivatedRoute
-   * @param router - Router
-   * @param recordSearchService - RecordSearchService
-   * @param recordUiService - RecordUiService
-   * @param recordService - RecordService
-   * @param appSettingsService - AppSettingsService
-   */
-  constructor(
-    protected activatedRoute: ActivatedRoute,
-    protected router: Router,
-    protected recordSearchService: RecordSearchService,
-    protected recordUiService: RecordUiService,
-    private _recordService: RecordService,
-    private _appSettingsService: AppSettingsService
-  ) {
-    super(activatedRoute, router, recordSearchService, recordUiService);
+    return this.appSettingsService.settings.documentAdvancedSearch;
   }
 
   /** Init */
@@ -110,10 +92,10 @@ export class DocumentRecordSearchComponent extends RecordSearchPageComponent imp
    */
   linkToGlobalDocuments(event: any) {
     event.preventDefault();
-    const {queryParams} = this.activatedRoute.snapshot;
+    const {queryParams} = this.route.snapshot;
     this.router.navigate(
       [this._baseUrl],
-      { relativeTo: this.activatedRoute, queryParams: {
+      { relativeTo: this.route, queryParams: {
         q: queryParams.q || '',
         page: 1,
         size: queryParams.size || 10,
@@ -127,7 +109,7 @@ export class DocumentRecordSearchComponent extends RecordSearchPageComponent imp
    * @param queryString - Query from the advanced search component
    */
   changedQueryString(queryString: string): void {
-    const {queryParams} = this.activatedRoute.snapshot;
+    const {queryParams} = this.route.snapshot;
     this.page = +queryParams.page || 1;
     this.size = +queryParams.size || 10;
     this.sort = queryParams.sort || 'bestmatch';
diff --git a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/patron-transaction-event-search-view.component.ts b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/patron-transaction-event-search-view.component.ts
index 1f3fe9f1b..2a352acca 100644
--- a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/patron-transaction-event-search-view.component.ts
+++ b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/patron-transaction-event-search-view.component.ts
@@ -15,7 +15,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Component, ViewChild } from '@angular/core';
 import { RecordSearchComponent, RecordSearchPageComponent, SearchResult } from '@rero/ng-core';
 import { PaymentData } from './interfaces';
@@ -57,7 +56,7 @@ export class PatronTransactionEventSearchViewComponent extends RecordSearchPageC
 
   // PRIVATE COMPONENT FUNCTIONS ==============================================
   /**
-   * Get an aggration from search result based on aggregation name.
+   * Get an aggregation from search result based on aggregation name.
    * @param aggName - string: the aggregation name
    * @return: the corresponding aggregation data or `null` if aggregation doesn't exist.
    */
diff --git a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/payments-data.component.ts b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/payments-data.component.ts
index 391fdf960..73fc81459 100644
--- a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/payments-data.component.ts
+++ b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/payments-data.component.ts
@@ -15,7 +15,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Component, Input } from '@angular/core';
 import { PaymentData } from '../interfaces';
 
diff --git a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/pie/payment-data-pie.component.ts b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/pie/payment-data-pie.component.ts
index d37db473d..d45b35388 100644
--- a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/pie/payment-data-pie.component.ts
+++ b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/pie/payment-data-pie.component.ts
@@ -15,8 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, inject, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { LegendPosition } from '@swimlane/ngx-charts';
 import { OrganisationService } from '../../../../../service/organisation.service';
@@ -30,6 +29,9 @@ import { PaymentData } from '../../interfaces';
 })
 export class PaymentDataPieComponent implements OnInit {
 
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private translateService: TranslateService = inject(TranslateService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** The payment data to display. */
   @Input() data: PaymentData;
@@ -49,17 +51,6 @@ export class PaymentDataPieComponent implements OnInit {
     return this.organisationService.organisation.default_currency;
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param organisationService: OrganisationService
-   * @param translateService: TranslateService
-   */
-  constructor(
-    private organisationService: OrganisationService,
-    private translateService: TranslateService
-  ) {}
-
   /** OnInit hook */
   ngOnInit() {
     if (this.data.subtypes) {
diff --git a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.ts b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.ts
index a710c62e8..71dfaf48f 100644
--- a/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.ts
+++ b/projects/admin/src/app/record/search-view/patron-transaction-event-search-view/payments-data/table/payments-data-table.component.ts
@@ -15,8 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { OrganisationService } from '../../../../../service/organisation.service';
 import { PaymentData } from '../../interfaces';
 
@@ -27,6 +26,8 @@ import { PaymentData } from '../../interfaces';
 })
 export class PaymentsDataTableComponent {
 
+  private organisationService: OrganisationService = inject(OrganisationService);
+
   // COMPONENT ATTRIBUTES =====================================================
   @Input() protected data: PaymentData;
 
@@ -35,8 +36,4 @@ export class PaymentsDataTableComponent {
   get org_currency() {
     return this.organisationService.organisation.default_currency;
   }
-
-  // CONSTRUCTOR & HOOKS ======================================================
-  constructor(private organisationService: OrganisationService) {}
-
 }
diff --git a/projects/admin/src/app/routes/base-route.ts b/projects/admin/src/app/routes/base-route.ts
index 810ae5511..058465204 100644
--- a/projects/admin/src/app/routes/base-route.ts
+++ b/projects/admin/src/app/routes/base-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,6 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { inject } from '@angular/core';
 import { UrlSegment } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ActionStatus, extractIdOnRef } from '@rero/ng-core';
@@ -22,20 +23,14 @@ import { RouteToolService } from './route-tool.service';
 
 export class BaseRoute {
 
+  protected routeToolService: RouteToolService = inject(RouteToolService);
+
   /** Disabled action */
   readonly DISABLED = (): Observable<ActionStatus> => of({
     can: false,
     message: ''
   })
 
-  /**
-   * Constructor
-   * @param _routeToolService - RouteToolService
-   */
-  constructor(
-    protected _routeToolService: RouteToolService
-  ) { }
-
   /**
    * Route matcher
    * @param url - any
@@ -132,7 +127,7 @@ export class BaseRoute {
       // url: {
       //   external: true,
       //   link: this._expertSearchLink(),
-      //   title: this._routeToolService.translateService.instant('Link to expert search help')
+      //   title: this.routeToolService.translateService.instant('Link to expert search help')
       // }
     };
   }
@@ -143,7 +138,7 @@ export class BaseRoute {
    * @returns Observable boolean
    */
   protected canRead(record: any) {
-    const organisationPid = this._routeToolService.userService.user
+    const organisationPid = this.routeToolService.userService.user
       .currentOrganisation;
     const recordOrganisationPid = ('organisation' in record.metadata)
       ? record.metadata.organisation.pid
@@ -162,8 +157,8 @@ export class BaseRoute {
       // TODO: Add other paths
     };
     const availableLanguages = Object.keys(searchPaths);
-    return (this._routeToolService.translateService.currentLang in availableLanguages)
-      ? searchPaths[this._routeToolService.translateService.currentLang]
+    return (this.routeToolService.translateService.currentLang in availableLanguages)
+      ? searchPaths[this.routeToolService.translateService.currentLang]
       : defaultPath;
     }
  }
diff --git a/projects/admin/src/app/routes/circulation-policies-route.ts b/projects/admin/src/app/routes/circulation-policies-route.ts
index f10202c9c..a720b51e9 100644
--- a/projects/admin/src/app/routes/circulation-policies-route.ts
+++ b/projects/admin/src/app/routes/circulation-policies-route.ts
@@ -17,7 +17,6 @@
 import { getCurrencySymbol } from '@angular/common';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FormlyFieldConfig } from '@ngx-formly/core';
-import { TranslateService } from '@ngx-translate/core';
 import {
   ComponentCanDeactivateGuard,
   DetailComponent, EditorComponent, JSONSchema7, Record,
@@ -67,13 +66,13 @@ export class CirculationPoliciesRoute extends BaseRoute implements RouteInterfac
             searchFilters: [
               this.expertSearchFilter()
             ],
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.CIPO_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.CIPO_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             preCreateRecord: (data: any) => {
-              const user: User = this._routeToolService.userService.user;
+              const user: User = this.routeToolService.userService.user;
               if (data.parent == null) {
                 data.organisation = {
-                  $ref: this._routeToolService.apiService.getRefEndpoint(
+                  $ref: this.routeToolService.apiService.getRefEndpoint(
                     'organisations',
                     user.currentOrganisation
                   )
@@ -126,8 +125,8 @@ export class CirculationPoliciesRoute extends BaseRoute implements RouteInterfac
     field.hooks = {
       ...field.hooks,
       afterContentInit: (f: FormlyFieldConfig) => {
-        const {user} = this._routeToolService.userService;
-        const { apiService, recordService } = this._routeToolService;
+        const {user} = this.routeToolService.userService;
+        const { apiService, recordService } = this.routeToolService;
         const query = `organisation.pid:${user.currentOrganisation}`;
         f.props.options = recordService.getRecords(
           'libraries',
@@ -139,7 +138,7 @@ export class CirculationPoliciesRoute extends BaseRoute implements RouteInterfac
           'name'
         ).pipe(
           map((result: Record) =>
-            this._routeToolService.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+            this.routeToolService.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
           map((hits: any) => {
             return hits.map((hit: any) => {
               return {
@@ -167,7 +166,7 @@ export class CirculationPoliciesRoute extends BaseRoute implements RouteInterfac
     field.hooks = {
       ...field.hooks,
       afterContentInit: (f: FormlyFieldConfig) => {
-        f.props.options = this._routeToolService.httpClient
+        f.props.options = this.routeToolService.httpClient
           .get('/api/notifications/templates/list')
           .pipe(
             map((response: any) => {
@@ -187,7 +186,7 @@ export class CirculationPoliciesRoute extends BaseRoute implements RouteInterfac
    * @return FormlyFieldConfig
    */
   private _amountSymbol(field: FormlyFieldConfig): FormlyFieldConfig {
-    const service = this._routeToolService.getInjectorToken(OrganisationService);
+    const service = this.routeToolService.getInjectorToken(OrganisationService);
     field.props.addonLeft = [
       getCurrencySymbol(service.organisation.default_currency, 'wide')
     ];
diff --git a/projects/admin/src/app/routes/collections-route.ts b/projects/admin/src/app/routes/collections-route.ts
index 99d00f7de..b89e5c800 100644
--- a/projects/admin/src/app/routes/collections-route.ts
+++ b/projects/admin/src/app/routes/collections-route.ts
@@ -61,17 +61,17 @@ export class CollectionsRoute extends BaseRoute implements RouteInterface {
             searchFilters: [
               this.expertSearchFilter()
             ],
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.COLL_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.COLL_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             aggregationsOrder: ['type', 'library', 'teacher', 'subject'],
             aggregationsExpand: ['type'],
             preprocessRecordEditor: (record: any) => {
-              const { user } = this._routeToolService.userService;
+              const { user } = this.routeToolService.userService;
               if (!record.pid) {
                 // set the user's default library at the time of creation
                 record.libraries = [];
                 record.libraries.push({
-                  $ref: this._routeToolService.apiService.getRefEndpoint(
+                  $ref: this.routeToolService.apiService.getRefEndpoint(
                     'libraries',
                     user.currentLibrary
                   )
@@ -80,9 +80,9 @@ export class CollectionsRoute extends BaseRoute implements RouteInterface {
               return record;
             },
             preCreateRecord: (data: any) => {
-              const { user } = this._routeToolService.userService;
+              const { user } = this.routeToolService.userService;
               data.organisation = {
-                $ref: this._routeToolService.apiService.getRefEndpoint(
+                $ref: this.routeToolService.apiService.getRefEndpoint(
                   'organisations',
                   user.currentOrganisation
                 )
@@ -131,8 +131,8 @@ export class CollectionsRoute extends BaseRoute implements RouteInterface {
     field.hooks = {
       ...field.hooks,
       afterContentInit: (f: FormlyFieldConfig) => {
-        const { user } = this._routeToolService.userService;
-        const { apiService, recordService } = this._routeToolService;
+        const { user } = this.routeToolService.userService;
+        const { apiService, recordService } = this.routeToolService;
 
         // Extract libraries from patron > libraries
         const libraries = [];
diff --git a/projects/admin/src/app/routes/documents-route.ts b/projects/admin/src/app/routes/documents-route.ts
index 9a1292450..66a6e0862 100644
--- a/projects/admin/src/app/routes/documents-route.ts
+++ b/projects/admin/src/app/routes/documents-route.ts
@@ -18,7 +18,7 @@
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { ComponentCanDeactivateGuard, RouteInterface } from '@rero/ng-core';
 import { PERMISSIONS, PERMISSION_OPERATOR } from '@rero/shared';
-import { Observable, map, of } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { CAN_ACCESS_ACTIONS, CanAccessGuard } from '../guard/can-access.guard';
 import { PermissionGuard } from '../guard/permission.guard';
 import { DocumentsBriefViewComponent } from '../record/brief-view/documents-brief-view/documents-brief-view.component';
@@ -95,8 +95,8 @@ export class DocumentsRoute extends BaseRoute implements RouteInterface {
                 ]
               },
             ],
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.DOC_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.DOC_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             preprocessRecordEditor: (record: any) => {
               record = this.removeKey(record, '_text');
               record = this.removeKey(record, '_draft');
@@ -114,7 +114,7 @@ export class DocumentsRoute extends BaseRoute implements RouteInterface {
               }
               return record;
             },
-            aggregations: (aggregations: any) => this._routeToolService
+            aggregations: (aggregations: any) => this.routeToolService
               .aggregationFilter(aggregations),
             aggregationsName: {
               online: _('Online resources'),
@@ -144,7 +144,7 @@ export class DocumentsRoute extends BaseRoute implements RouteInterface {
             ],
             aggregationsExpand: () => {
               const expand = ['document_type', 'fiction_statement'];
-              const { queryParams } = this._routeToolService.activatedRoute.snapshot;
+              const { queryParams } = this.routeToolService.activatedRoute.snapshot;
               if (queryParams.location || queryParams.library) {
                 expand.push('organisation');
               }
@@ -182,8 +182,8 @@ export class DocumentsRoute extends BaseRoute implements RouteInterface {
             name: 'holdings',
             deleteMessage: (pid: string): Observable<string[]> => {
               return of([
-                this._routeToolService.translateService.instant('Do you really want to delete this record?'),
-                this._routeToolService.translateService.instant('This will also delete all items and issues of the holdings.')
+                this.routeToolService.translateService.instant('Do you really want to delete this record?'),
+                this.routeToolService.translateService.instant('This will also delete all items and issues of the holdings.')
               ]);
             },
             hideInTabs: true
@@ -192,7 +192,7 @@ export class DocumentsRoute extends BaseRoute implements RouteInterface {
       }
     };
 
-    this._routeToolService.organisationService.onOrganisationLoaded$.subscribe((org) => {
+    this.routeToolService.organisationService.onOrganisationLoaded$.subscribe((org) => {
       config.data.types[0]['defaultSearchInputFilters'] = [{
         'key': 'organisation', 'values': [org.pid]
       }];
diff --git a/projects/admin/src/app/routes/entities-local-route.ts b/projects/admin/src/app/routes/entities-local-route.ts
index 6677274aa..7cbde756b 100644
--- a/projects/admin/src/app/routes/entities-local-route.ts
+++ b/projects/admin/src/app/routes/entities-local-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -52,7 +52,7 @@ export class EntitiesLocalRoute extends BaseRoute implements RouteInterface {
             index: this.name,
             label: _('Local entities'),
             detailComponent: EntitiesLocalDetailViewComponent,
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             redirectUrl: (record: any, action: string) => action === 'delete'
               ? of('/records/entities')
               : of(`/records/${this.recordType}/detail/${record.metadata.pid}`)
diff --git a/projects/admin/src/app/routes/entities-route.ts b/projects/admin/src/app/routes/entities-route.ts
index 9672ca940..a14e9717f 100644
--- a/projects/admin/src/app/routes/entities-route.ts
+++ b/projects/admin/src/app/routes/entities-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -68,12 +68,12 @@ export class EntitiesRoute extends BaseRoute implements RouteInterface {
             label: _('Entities'),
             component: EntityBriefViewComponent,
             canAdd: () => of({
-              can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.LOCENT_CREATE),
+              can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.LOCENT_CREATE),
               routerLink: ['/records', this.recordType, 'new']
             }),
             canUpdate: (record: any) => this._buildUpdatePermission(record),
             canDelete: (record: any) => this._buildDeletePermission(record),
-            aggregations: (aggregations: any) => this._routeToolService.aggregationFilter(aggregations),
+            aggregations: (aggregations: any) => this.routeToolService.aggregationFilter(aggregations),
             aggregationsName: {
               resource_type: _('Source'),
               type: _('Type'),
@@ -114,7 +114,7 @@ export class EntitiesRoute extends BaseRoute implements RouteInterface {
     if (record.metadata.resource_type !== 'local') {
       return of({can: false, message: ''});
     }
-    return this._routeToolService.permissions(record, this.recordType).pipe(
+    return this.routeToolService.permissions(record, this.recordType).pipe(
       map((permissions: any) => { return {
         can: permissions?.canUpdate?.can || false,
         message: permissions?.canUpdate?.message || '',
@@ -132,7 +132,7 @@ export class EntitiesRoute extends BaseRoute implements RouteInterface {
     if (record.metadata.resource_type !== 'local') {
       return of({can: false, message: ''});
     }
-    return this._routeToolService.permissions(record, this.recordType).pipe(
+    return this.routeToolService.permissions(record, this.recordType).pipe(
       map((permissions: any) => { return {
         can: permissions?.canDelete?.can || false,
         message: permissions?.canDelete?.message || '',
@@ -148,7 +148,7 @@ export class EntitiesRoute extends BaseRoute implements RouteInterface {
    */
   private _sortOptions() {
     const options = this._options;
-    this._routeToolService.translateService.onLangChange.subscribe((translate: any) => {
+    this.routeToolService.translateService.onLangChange.subscribe((translate: any) => {
       const key = options.findIndex((option: any) => option.label === 'Name');
       switch (translate.lang) {
         case 'de':
diff --git a/projects/admin/src/app/routes/holdings-route.ts b/projects/admin/src/app/routes/holdings-route.ts
index 44e4a2462..b744e0293 100644
--- a/projects/admin/src/app/routes/holdings-route.ts
+++ b/projects/admin/src/app/routes/holdings-route.ts
@@ -39,7 +39,6 @@ export class HoldingsRoute extends BaseRoute implements RouteInterface {
    * @return Object
    */
   getConfiguration() {
-
     return {
       matcher: (url: any) => this.routeMatcher(url, this.name),
       children: [
@@ -62,13 +61,13 @@ export class HoldingsRoute extends BaseRoute implements RouteInterface {
             },
             detailComponent: HoldingDetailViewComponent,
             canRead: (record: any) => this.canRead(record),
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.HOLD_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType, true),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.HOLD_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType, true),
             preCreateRecord: (data: any) => {
               data.document = {
-                $ref: this._routeToolService.apiService.getRefEndpoint(
+                $ref: this.routeToolService.apiService.getRefEndpoint(
                   'documents',
-                  this._routeToolService.getRouteQueryParam('document')
+                  this.routeToolService.getRouteQueryParam('document')
                 )
               };
               return data;
@@ -80,8 +79,8 @@ export class HoldingsRoute extends BaseRoute implements RouteInterface {
             },
             deleteMessage: (pid: string): Observable<string[]> => {
               return of([
-                this._routeToolService.translateService.instant('Do you really want to delete this record?'),
-                this._routeToolService.translateService.instant('This will also delete all items and issues of the holdings.')
+                this.routeToolService.translateService.instant('Do you really want to delete this record?'),
+                this.routeToolService.translateService.instant('This will also delete all items and issues of the holdings.')
               ]);
             },
             redirectUrl: (record: any, action: string) => {
@@ -114,8 +113,8 @@ export class HoldingsRoute extends BaseRoute implements RouteInterface {
       field.hooks = {
         ...field.hooks,
         afterContentInit: (f: FormlyFieldConfig) => {
-          const { user } = this._routeToolService.userService;
-          const { apiService, recordService } = this._routeToolService;
+          const { user } = this.routeToolService.userService;
+          const { apiService, recordService } = this.routeToolService;
           const libraryPid = user.currentLibrary;
           const query = `library.pid:${libraryPid}`;
           f.props.options = recordService.getRecords(
@@ -127,7 +126,7 @@ export class HoldingsRoute extends BaseRoute implements RouteInterface {
             undefined,
             'name'
           ).pipe(
-            map((result: Record) => this._routeToolService.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+            map((result: Record) => this.routeToolService.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
             map((hits: any) => {
               return hits.map((hit: any) => {
                 return {
diff --git a/projects/admin/src/app/routes/ill-requests-route.ts b/projects/admin/src/app/routes/ill-requests-route.ts
index 6ac645bf3..d1014a14c 100644
--- a/projects/admin/src/app/routes/ill-requests-route.ts
+++ b/projects/admin/src/app/routes/ill-requests-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -55,9 +55,9 @@ export class IllRequestsRoute extends BaseRoute implements RouteInterface {
             searchFilters: [
               this.expertSearchFilter()
             ],
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.ILL_CREATE) }),
-            canUpdate: (record: any) => this._routeToolService.canUpdate(record, this.recordType),
-            canDelete: (record: any) => this._routeToolService.canDelete(record, this.recordType),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.ILL_CREATE) }),
+            canUpdate: (record: any) => this.routeToolService.canUpdate(record, this.recordType),
+            canDelete: (record: any) => this.routeToolService.canDelete(record, this.recordType),
             aggregationsExpand: ['request_status', 'loan_status', 'requester'],
             aggregationsOrder: ['request_status', 'loan_status', 'requester', 'library'],
             listHeaders: {
diff --git a/projects/admin/src/app/routes/import-documents-route.ts b/projects/admin/src/app/routes/import-documents-route.ts
index 1c06e41bd..8574200ab 100644
--- a/projects/admin/src/app/routes/import-documents-route.ts
+++ b/projects/admin/src/app/routes/import-documents-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -27,9 +27,12 @@ import { DocumentDetailViewComponent } from '../record/detail-view/document-deta
 import { DocumentDetailComponent } from '../record/detail-view/document-detail-view/document-detail/document-detail.component';
 import { BaseRoute } from './base-route';
 import { RouteToolService } from './route-tool.service';
+import { inject } from '@angular/core';
 
 export class ImportDocumentsRoute extends BaseRoute implements RouteInterface {
 
+  private translateService: TranslateService = inject(TranslateService);
+
   /** Route name */
   readonly name = 'import';
 
@@ -49,18 +52,6 @@ export class ImportDocumentsRoute extends BaseRoute implements RouteInterface {
     showFacetsIfNoResults: true
   };
 
-  /**
-   * Constructor
-   * @param _routeToolService - RouteToolService for the parent classes.
-   * @param _translateService - TranslateService to translate the number of results.
-   */
-  constructor(
-    protected _routeToolService: RouteToolService,
-    private _translateService: TranslateService
-  ) {
-    super(_routeToolService);
-  }
-
   /**
    * Get Configuration
    * @returns the configuration to use for this route
@@ -76,7 +67,7 @@ export class ImportDocumentsRoute extends BaseRoute implements RouteInterface {
         types: []
       }
     };
-    this._routeToolService.injector.get(ImportSourceApiService)
+    this.routeToolService.injector.get(ImportSourceApiService)
       .getSources()
       .subscribe((sources: Array<ExternalSourceSetting>) => {
         sources.forEach((source: ExternalSourceSetting) => {
@@ -93,10 +84,10 @@ export class ImportDocumentsRoute extends BaseRoute implements RouteInterface {
    * @returns observable of the string representation of the number of results.
    */
   getResultsText(hits: any): Observable<string> {
-    const total = this._routeToolService.recordService.totalHits(hits.total) || 0;
+    const total = this.routeToolService.recordService.totalHits(hits.total) || 0;
     return (total === 0)
-      ? this._translateService.stream('no result')
-      : this._translateService.stream('{{ total }} results of {{ remoteTotal }}', {
+      ? this.translateService.stream('no result')
+      : this.translateService.stream('{{ total }} results of {{ remoteTotal }}', {
           total, remoteTotal: hits.remote_total
         });
   }
diff --git a/projects/admin/src/app/routes/issues-route.ts b/projects/admin/src/app/routes/issues-route.ts
index ffca89cfe..2650d1450 100644
--- a/projects/admin/src/app/routes/issues-route.ts
+++ b/projects/admin/src/app/routes/issues-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2022 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -54,7 +54,7 @@ export class IssuesRoute extends BaseRoute implements RouteInterface {
             searchFilters: [
               this.expertSearchFilter()
             ],
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             preFilters: {
                 or_issue_status: [IssueItemStatus.LATE]
               },
@@ -75,7 +75,7 @@ export class IssuesRoute extends BaseRoute implements RouteInterface {
               {
                 label: 'CSV',
                 format: 'csv',
-                endpoint: this._routeToolService.apiService.getEndpointByType('item/inventory'),
+                endpoint: this.routeToolService.apiService.getEndpointByType('item/inventory'),
                 disableMaxRestResultsSize: true,
               }
             ],
diff --git a/projects/admin/src/app/routes/item-types-route.ts b/projects/admin/src/app/routes/item-types-route.ts
index 6a39ade86..453d845b9 100644
--- a/projects/admin/src/app/routes/item-types-route.ts
+++ b/projects/admin/src/app/routes/item-types-route.ts
@@ -55,12 +55,12 @@ export class ItemTypesRoute extends BaseRoute implements RouteInterface {
             searchFilters: [
               this.expertSearchFilter()
             ],
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.ITTY_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.ITTY_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             preCreateRecord: (data: any) => {
-              const { user } = this._routeToolService.userService;
+              const { user } = this.routeToolService.userService;
               data.organisation = {
-                $ref: this._routeToolService.apiService.getRefEndpoint(
+                $ref: this.routeToolService.apiService.getRefEndpoint(
                   'organisations',
                   user.currentOrganisation
                 )
diff --git a/projects/admin/src/app/routes/items-route.ts b/projects/admin/src/app/routes/items-route.ts
index 32562edd1..794c3843d 100644
--- a/projects/admin/src/app/routes/items-route.ts
+++ b/projects/admin/src/app/routes/items-route.ts
@@ -76,12 +76,12 @@ export class ItemsRoute extends BaseRoute implements RouteInterface {
             },
             canRead: (record: any) => this.canRead(record),
             canAdd: () => of({can: false}),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType, false),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType, false),
             preprocessRecordEditor: (record: any) => {
               // If we found an `holding` parameter into the query string then we need to pre-populated
               // the form with the corresponding holding metadata (see '_populateItemFieldFromHolding' function
               // to know which fields will be filled.
-              const holdingPid = this._routeToolService.getRouteQueryParam('holding');
+              const holdingPid = this.routeToolService.getRouteQueryParam('holding');
               if (holdingPid !== null) {
                 this._populateItemFieldFromHolding(record, holdingPid);
               }
@@ -90,9 +90,9 @@ export class ItemsRoute extends BaseRoute implements RouteInterface {
             preCreateRecord: (data: any) => {
               if (data.document == null) {
                 data.document = {
-                  $ref: this._routeToolService.apiService.getRefEndpoint(
+                  $ref: this.routeToolService.apiService.getRefEndpoint(
                     'documents',
-                    this._routeToolService.getRouteQueryParam('document')
+                    this.routeToolService.getRouteQueryParam('document')
                   )
                 };
               }
@@ -156,7 +156,7 @@ export class ItemsRoute extends BaseRoute implements RouteInterface {
               {
                 label: 'CSV',
                 format: 'csv',
-                endpoint: this._routeToolService.apiService.getEndpointByType('item/inventory'),
+                endpoint: this.routeToolService.apiService.getEndpointByType('item/inventory'),
                 disableMaxRestResultsSize: true,
               },
             ],
@@ -200,8 +200,8 @@ export class ItemsRoute extends BaseRoute implements RouteInterface {
       }
     };
     // TODO: Refactor this after the change of AppInitializer service with user.
-    this._routeToolService.userService.loaded$.subscribe(() => {
-      const { patronLibrarian } = this._routeToolService.userService.user;
+    this.routeToolService.userService.loaded$.subscribe(() => {
+      const { patronLibrarian } = this.routeToolService.userService.user;
       if (patronLibrarian) {
         config.data.types[0].preFilters.organisation = patronLibrarian.organisation.pid;
       }
@@ -218,7 +218,7 @@ export class ItemsRoute extends BaseRoute implements RouteInterface {
    * @return an observable on the url to redirect
    */
   private getUrl(record: any) {
-    const redirectTo = this._routeToolService.getRouteQueryParam('redirectTo');
+    const redirectTo = this.routeToolService.getRouteQueryParam('redirectTo');
     return redirectTo
         ? of(redirectTo)
         : this.redirectUrl(
@@ -241,14 +241,14 @@ export class ItemsRoute extends BaseRoute implements RouteInterface {
       field.hooks = {
         ...field.hooks,
         afterContentInit: (f: FormlyFieldConfig) => {
-          const { user } = this._routeToolService.userService;
-          const { apiService, recordService } = this._routeToolService;
+          const { user } = this.routeToolService.userService;
+          const { apiService, recordService } = this.routeToolService;
           const libraryPid = user.currentLibrary;
           const query = `library.pid:${libraryPid}`;
           f.props.options = recordService
             .getRecords('locations', query, 1, RecordService.MAX_REST_RESULTS_SIZE, undefined, undefined, undefined, 'name')
             .pipe(
-              map((result: Record) => this._routeToolService.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+              map((result: Record) => this.routeToolService.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
               map((hits: Array<Record>) =>
                 hits.map((hit: any) => {
                   return {
@@ -282,23 +282,23 @@ export class ItemsRoute extends BaseRoute implements RouteInterface {
     // setting irregular issue from url parameter
     try {
       // NOTE : Using `Boolean(JSON.parse(...`, values [1, '1', 'true', 'True'] from url will be considered as True.
-      const isIrregular = Boolean(JSON.parse(this._routeToolService.getRouteQueryParam('irregular', 'false')));
+      const isIrregular = Boolean(JSON.parse(this.routeToolService.getRouteQueryParam('irregular', 'false')));
       if (isIrregular) {
         record.issue.regular = false;
       }
     } catch (e) { }
     // setting other issue attributes from url parameters
-    const today = this._routeToolService.datePipe.transform(Date.now(), 'yyyy-MM-dd');
-    record.enumerationAndChronology = this._routeToolService.getRouteQueryParam('enumerationAndChronology', '');
-    record.issue.expected_date = this._routeToolService.getRouteQueryParam('expected_date', today);
-    record.issue.received_date = this._routeToolService.getRouteQueryParam('received_date', today);
+    const today = this.routeToolService.datePipe.transform(Date.now(), 'yyyy-MM-dd');
+    record.enumerationAndChronology = this.routeToolService.getRouteQueryParam('enumerationAndChronology', '');
+    record.issue.expected_date = this.routeToolService.getRouteQueryParam('expected_date', today);
+    record.issue.received_date = this.routeToolService.getRouteQueryParam('received_date', today);
 
-    this._routeToolService.recordService.getRecord('holdings', holdingPid).subscribe(
+    this.routeToolService.recordService.getRecord('holdings', holdingPid).subscribe(
       (holdingData) => {
         record.item_type = holdingData.metadata.circulation_category;
         record.location = holdingData.metadata.location;
         record.document = holdingData.metadata.document;
-        record.holding = { $ref: this._routeToolService.apiService.getRefEndpoint('holdings', holdingPid) };
+        record.holding = { $ref: this.routeToolService.apiService.getRefEndpoint('holdings', holdingPid) };
         if (holdingData.metadata.patterns.frequency === 'rdafr:1016') {  // 'rdafr:1016 --> 'irregular frequency'
           record.issue.regular = false;
         }
diff --git a/projects/admin/src/app/routes/libraries-route.ts b/projects/admin/src/app/routes/libraries-route.ts
index bd9317e7a..28fd7b5ce 100644
--- a/projects/admin/src/app/routes/libraries-route.ts
+++ b/projects/admin/src/app/routes/libraries-route.ts
@@ -56,12 +56,12 @@ export class LibrariesRoute extends BaseRoute implements RouteInterface {
             searchFilters: [
               this.expertSearchFilter()
             ],
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.LIB_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.LIB_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             preCreateRecord: (data: any) => {
-              const { user } = this._routeToolService.userService;
+              const { user } = this.routeToolService.userService;
               data.organisation = {
-                $ref: this._routeToolService.apiService.getRefEndpoint(
+                $ref: this.routeToolService.apiService.getRefEndpoint(
                   'organisations',
                   user.currentOrganisation
                 )
diff --git a/projects/admin/src/app/routes/loans-route.ts b/projects/admin/src/app/routes/loans-route.ts
index 8269c703b..927db5bd0 100644
--- a/projects/admin/src/app/routes/loans-route.ts
+++ b/projects/admin/src/app/routes/loans-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -46,10 +46,10 @@ export class LoansRoute extends BaseRoute implements RouteInterface {
             key: this.name,
             label: _('Loans'),
             component: LoansBriefViewComponent,
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             canAdd: (record: any) => of({can: false}),
-            canUpdate: (record: any) => this._routeToolService.canUpdate(record, this.recordType),
-            canDelete: (record: any) => this._routeToolService.canDelete(record, this.recordType),
+            canUpdate: (record: any) => this.routeToolService.canUpdate(record, this.recordType),
+            canDelete: (record: any) => this.routeToolService.canDelete(record, this.recordType),
             preFilters: {
               exclude_status: [LoanState.CANCELLED, LoanState.ITEM_RETURNED]
             },
@@ -79,7 +79,7 @@ export class LoansRoute extends BaseRoute implements RouteInterface {
             exportFormats: [{
               label: 'CSV',
               format: 'csv',
-              endpoint: this._routeToolService.apiService.getExportEndpointByType(this.recordType),
+              endpoint: this.routeToolService.apiService.getExportEndpointByType(this.recordType),
               disableMaxRestResultsSize: true,
             }],
             showFacetsIfNoResults: true
diff --git a/projects/admin/src/app/routes/local-fields-route.ts b/projects/admin/src/app/routes/local-fields-route.ts
index 7fd4feefd..c6c29ebc9 100644
--- a/projects/admin/src/app/routes/local-fields-route.ts
+++ b/projects/admin/src/app/routes/local-fields-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -53,18 +53,18 @@ export class LocalFieldsRoute extends BaseRoute implements RouteInterface {
             canRead: (record: any) => this.canReadLocalFields(record),
             redirectUrl: (record: any) => this.getUrl(record),
             preCreateRecord: (data: any) => {
-              const user: User = this._routeToolService.userService.user;
+              const user: User = this.routeToolService.userService.user;
               if (data.parent == null) {
                 data.organisation = {
-                  $ref: this._routeToolService.apiService.getRefEndpoint(
+                  $ref: this.routeToolService.apiService.getRefEndpoint(
                     'organisations',
                     user.currentOrganisation
                   )
                 };
                 data.parent = {
-                  $ref: this._routeToolService.apiService.getRefEndpoint(
-                    this._routeToolService.getRouteQueryParam('type'),
-                    this._routeToolService.getRouteQueryParam('ref')
+                  $ref: this.routeToolService.apiService.getRefEndpoint(
+                    this.routeToolService.getRouteQueryParam('type'),
+                    this.routeToolService.getRouteQueryParam('ref')
                   )
                 };
               }
@@ -91,7 +91,7 @@ export class LocalFieldsRoute extends BaseRoute implements RouteInterface {
       const pid = regExpResult[2];
       return of(`/records/${type}/detail/${pid}`);
     } else {
-      this._routeToolService.router.navigate(['/errors/400'], { skipLocationChange: true });
+      this.routeToolService.router.navigate(['/errors/400'], { skipLocationChange: true });
     }
   }
 
@@ -101,7 +101,7 @@ export class LocalFieldsRoute extends BaseRoute implements RouteInterface {
    * @return Observable
    */
   private canReadLocalFields(record: any) {
-    const organisationPid = this._routeToolService.userService.user
+    const organisationPid = this.routeToolService.userService.user
       .currentOrganisation;
     const recordOrganisationPid = ('organisation' in record.metadata)
       ? record.metadata.organisation.pid
diff --git a/projects/admin/src/app/routes/locations-route.ts b/projects/admin/src/app/routes/locations-route.ts
index 10fb02933..21e28f2b4 100644
--- a/projects/admin/src/app/routes/locations-route.ts
+++ b/projects/admin/src/app/routes/locations-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -50,17 +50,17 @@ export class LocationsRoute extends BaseRoute implements RouteInterface {
             key: this.name,
             label: _('Locations'),
             detailComponent: LocationDetailViewComponent,
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.LOC_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.LOC_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             preprocessRecordEditor: (record: any) => {
               // Location resource use a asynchronous validator ('valueAlreadyExists').
               // This validator needs the library pid to work ; but in creation mode, the record.library.pid isn't yet known by system
               // so we use the 'library' query parameter to construct this data (only if the resource isn't already related to a library)
-              if (record.library == null && this._routeToolService.getRouteQueryParam('library') != null) {
+              if (record.library == null && this.routeToolService.getRouteQueryParam('library') != null) {
                 record.library = {
-                  $ref: this._routeToolService.apiService.getRefEndpoint(
+                  $ref: this.routeToolService.apiService.getRefEndpoint(
                     'libraries',
-                    this._routeToolService.getRouteQueryParam('library')
+                    this.routeToolService.getRouteQueryParam('library')
                   )
                 };
               }
diff --git a/projects/admin/src/app/routes/patron-transaction-events-route.ts b/projects/admin/src/app/routes/patron-transaction-events-route.ts
index 3f24d2b23..18ba18331 100644
--- a/projects/admin/src/app/routes/patron-transaction-events-route.ts
+++ b/projects/admin/src/app/routes/patron-transaction-events-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -59,7 +59,7 @@ export class PatronTransactionEventsRoute extends BaseRoute implements RouteInte
             key: this.name,
             label: _('Fees'),
             component: PatronTransactionEventsBriefViewComponent,
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             canAdd: (record: any) => of({can: false}),
             canUpdate: (record: any) => of({can: false}),
             canDelete: (record: any) => of({can: false}),
@@ -97,7 +97,7 @@ export class PatronTransactionEventsRoute extends BaseRoute implements RouteInte
             exportFormats: [{
               label: 'CSV',
               format: 'csv',
-              endpoint: this._routeToolService.apiService.getExportEndpointByType(this.recordType),
+              endpoint: this.routeToolService.apiService.getExportEndpointByType(this.recordType),
               disableMaxRestResultsSize: true,
             }],
             showFacetsIfNoResults: true
diff --git a/projects/admin/src/app/routes/patron-types-route.ts b/projects/admin/src/app/routes/patron-types-route.ts
index 3ec52b5a2..ae97db21f 100644
--- a/projects/admin/src/app/routes/patron-types-route.ts
+++ b/projects/admin/src/app/routes/patron-types-route.ts
@@ -56,12 +56,12 @@ export class PatronTypesRoute extends BaseRoute implements RouteInterface {
             searchFilters: [
               this.expertSearchFilter()
             ],
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.PTTY_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.PTTY_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             preCreateRecord: (data: any) => {
-              const { user } = this._routeToolService.userService;
+              const { user } = this.routeToolService.userService;
               data.organisation = {
-                $ref: this._routeToolService.apiService.getRefEndpoint(
+                $ref: this.routeToolService.apiService.getRefEndpoint(
                   'organisations',
                   user.currentOrganisation
                 )
diff --git a/projects/admin/src/app/routes/patrons-route.ts b/projects/admin/src/app/routes/patrons-route.ts
index 7c55865ba..3377d0230 100644
--- a/projects/admin/src/app/routes/patrons-route.ts
+++ b/projects/admin/src/app/routes/patrons-route.ts
@@ -85,17 +85,17 @@ export class PatronsRoute extends BaseRoute implements RouteInterface {
                 ]
               }
             ],
-            canAdd: () => of({ 'can': this._routeToolService.permissionsService.canAccess(PERMISSIONS.PTRN_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
-            canUpdate: (record: any) => this._routeToolService.canUpdate(record, this.recordType),
-            canDelete: (record: any) => this._routeToolService.canDelete(record, this.recordType),
+            canAdd: () => of({ 'can': this.routeToolService.permissionsService.canAccess(PERMISSIONS.PTRN_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
+            canUpdate: (record: any) => this.routeToolService.canUpdate(record, this.recordType),
+            canDelete: (record: any) => this.routeToolService.canDelete(record, this.recordType),
             preprocessRecordEditor: (record: any) => {
               // set the patron expiration to now + 3 years if does not exists
               const defaultExpDate = new Date();
               defaultExpDate.setFullYear(defaultExpDate.getFullYear() + 3);
               record = {
                 patron: {
-                  expiration_date: this._routeToolService.datePipe.transform(defaultExpDate, 'yyyy-MM-dd')
+                  expiration_date: this.routeToolService.datePipe.transform(defaultExpDate, 'yyyy-MM-dd')
                 }
                 , ...record
               };
@@ -157,7 +157,7 @@ export class PatronsRoute extends BaseRoute implements RouteInterface {
     const formWidget = jsonSchema.widget;
     if (formWidget?.formlyConfig?.props?.fieldMap === 'roles') {
       const values = Object.assign([], field.props.options);  // create a clone of original values
-      field.props.options = this._routeToolService.recordPermissionService.getRolesManagementPermissions().pipe(
+      field.props.options = this.routeToolService.recordPermissionService.getRolesManagementPermissions().pipe(
         map((results: any) => {
           values.forEach((role: any) => role.disabled = !results.allowed_roles.includes(role.value));
           return values;
@@ -174,8 +174,8 @@ export class PatronsRoute extends BaseRoute implements RouteInterface {
       field.hooks = {
         ...field.hooks,
         afterContentInit: (f: FormlyFieldConfig) => {
-          const { user } = this._routeToolService.userService;
-          const { apiService, recordService } = this._routeToolService;
+          const { user } = this.routeToolService.userService;
+          const { apiService, recordService } = this.routeToolService;
 
           // Extract libraries from patron > libraries
           const libraries = [];
@@ -194,7 +194,7 @@ export class PatronsRoute extends BaseRoute implements RouteInterface {
             undefined,
             'name'
           ).pipe(
-            map((result: Record) => this._routeToolService
+            map((result: Record) => this.routeToolService
               .recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
             map((hits: any) => {
               return hits.map((hit: any) => {
diff --git a/projects/admin/src/app/routes/route-tool.service.ts b/projects/admin/src/app/routes/route-tool.service.ts
index f86efd16d..3a68bb9f1 100644
--- a/projects/admin/src/app/routes/route-tool.service.ts
+++ b/projects/admin/src/app/routes/route-tool.service.ts
@@ -16,7 +16,7 @@
  */
 import { DatePipe } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
-import { AbstractType, Injectable, InjectionToken, Injector, Type } from '@angular/core';
+import { AbstractType, inject, Injectable, InjectionToken, Injector, Type } from '@angular/core';
 import { ActivatedRoute, Router, UrlSerializer } from '@angular/router';
 import { OrganisationService } from '@app/admin/service/organisation.service';
 import { TranslateService } from '@ngx-translate/core';
@@ -31,6 +31,9 @@ import { RecordPermissionService } from '../service/record-permission.service';
   providedIn: "root",
 })
 export class RouteToolService {
+
+  injector: Injector = inject(Injector);
+
   /**
    * Proxy for permissions service
    * @return PermissionsService
@@ -44,14 +47,14 @@ export class RouteToolService {
    * @return TranslateService
    */
   get translateService() {
-    return this._injector.get(TranslateService);
+    return this.injector.get(TranslateService);
   }
 
   /** Proxy for organisation service
    *  @return OrganisationService
    */
   get organisationService() {
-    return this._injector.get(OrganisationService);
+    return this.injector.get(OrganisationService);
   }
 
   /**
@@ -59,7 +62,7 @@ export class RouteToolService {
    * @return UserService
    */
   get userService() {
-    return this._injector.get(UserService);
+    return this.injector.get(UserService);
   }
 
   /**
@@ -67,7 +70,7 @@ export class RouteToolService {
    * @return AppSettingsService
    */
   get settingsService() {
-    return this._injector.get(AppSettingsService);
+    return this.injector.get(AppSettingsService);
   }
 
   /**
@@ -75,7 +78,7 @@ export class RouteToolService {
    * @return ApiService
    */
   get apiService() {
-    return this._injector.get(ApiService);
+    return this.injector.get(ApiService);
   }
 
   /**
@@ -83,7 +86,7 @@ export class RouteToolService {
    * @return ActivatedRoute
    */
   get activatedRoute() {
-    return this._injector.get(ActivatedRoute);
+    return this.injector.get(ActivatedRoute);
   }
 
   /**
@@ -91,7 +94,7 @@ export class RouteToolService {
    * @return recordService
    */
   get recordService() {
-    return this._injector.get(RecordService);
+    return this.injector.get(RecordService);
   }
 
   /**
@@ -99,7 +102,7 @@ export class RouteToolService {
    * @return recordPermissionService
    */
   get recordPermissionService() {
-    return this._injector.get(RecordPermissionService);
+    return this.injector.get(RecordPermissionService);
   }
 
   /**
@@ -107,7 +110,7 @@ export class RouteToolService {
    * @return datePipe
    */
   get datePipe() {
-    return this._injector.get(DatePipe);
+    return this.injector.get(DatePipe);
   }
 
   /**
@@ -115,7 +118,7 @@ export class RouteToolService {
    * @return router
    */
   get router() {
-    return this._injector.get(Router);
+    return this.injector.get(Router);
   }
 
   /**
@@ -123,7 +126,7 @@ export class RouteToolService {
    * @return urlSerializer
    */
   get urlSerializer() {
-    return this._injector.get(UrlSerializer);
+    return this.injector.get(UrlSerializer);
   }
 
   /**
@@ -131,29 +134,15 @@ export class RouteToolService {
    * @return httpClient
    */
   get httpClient() {
-    return this._injector.get(HttpClient);
+    return this.injector.get(HttpClient);
   }
 
-  /**
-   * Proxy for injector
-   * @return Injector
-   */
-  get injector() {
-    return this._injector;
-  }
-
-  /**
-   * Constructor
-   * @param _injector - Injector
-   */
-  constructor(private _injector: Injector) {}
-
   /**
    * Get Token in injector
    * @param token - Token
    */
   getInjectorToken<T>(token: Type<T> | InjectionToken<T> | AbstractType<T>) {
-    return this._injector.get(token);
+    return this.injector.get(token);
   }
 
   /**
diff --git a/projects/admin/src/app/routes/route.service.ts b/projects/admin/src/app/routes/route.service.ts
index 34209aa0b..fb5b650e1 100644
--- a/projects/admin/src/app/routes/route.service.ts
+++ b/projects/admin/src/app/routes/route.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,10 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { EntitiesRoute } from '@app/admin/routes/entities-route';
-import { TranslateService } from '@ngx-translate/core';
 import { RouteCollectionService } from '@rero/ng-core';
 import { AccountsRoute as AcqAccountsRoute } from '../acquisition/routes/accounts-route';
 import { BudgetsRoute as AcqBudgetsRoute } from '../acquisition/routes/budgets-route';
@@ -45,7 +44,6 @@ import { OrganisationsRoute } from './organisations-route';
 import { PatronTransactionEventsRoute } from './patron-transaction-events-route';
 import { PatronTypesRoute } from './patron-types-route';
 import { PatronsRoute } from './patrons-route';
-import { RouteToolService } from './route-tool.service';
 import { StatisticsCfgRoute } from './statistics-cfg-route';
 import { TemplatesRoute } from './templates-route';
 import { VendorsRoute } from './vendors-route';
@@ -55,61 +53,50 @@ import { VendorsRoute } from './vendors-route';
 })
 export class RouteService {
 
-  /**
-   * Constructor
-   * @param _routeCollectionService - RouteCollectionService
-   * @param _router - Router
-   * @param _routeToolService - RouteToolService
-   * @param _translateService - TranslateService used by children.
-   */
-  constructor(
-    private _routeCollectionService: RouteCollectionService,
-    private _router: Router,
-    private _routeToolService: RouteToolService,
-    private _translateService: TranslateService
-  ) { }
+  private routeCollectionService: RouteCollectionService = inject(RouteCollectionService);
+  private router: Router = inject(Router);
 
   /**
    * Initialize routes
    */
   initializeRoutes() {
-    this._routeCollectionService
-      .addRoute(new CirculationPoliciesRoute(this._routeToolService))
-      .addRoute(new DocumentsRoute(this._routeToolService))
-      .addRoute(new HoldingsRoute(this._routeToolService))
-      .addRoute(new ItemsRoute(this._routeToolService))
-      .addRoute(new IssuesRoute(this._routeToolService))
-      .addRoute(new ItemTypesRoute(this._routeToolService))
-      .addRoute(new LibrariesRoute(this._routeToolService))
-      .addRoute(new LocationsRoute(this._routeToolService))
-      .addRoute(new OrganisationsRoute(this._routeToolService))
-      .addRoute(new PatronsRoute(this._routeToolService))
-      .addRoute(new PatronTypesRoute(this._routeToolService))
-      .addRoute(new VendorsRoute(this._routeToolService))
-      .addRoute(new TemplatesRoute(this._routeToolService))
-      .addRoute(new CollectionsRoute(this._routeToolService))
-      .addRoute(new IllRequestsRoute(this._routeToolService))
-      .addRoute(new LocalFieldsRoute(this._routeToolService))
-      .addRoute(new LoansRoute(this._routeToolService))
-      .addRoute(new PatronTransactionEventsRoute(this._routeToolService))
-      .addRoute(new EntitiesRoute(this._routeToolService))
-      .addRoute(new EntitiesRemoteRoute(this._routeToolService))
-      .addRoute(new EntitiesLocalRoute(this._routeToolService))
-      .addRoute(new StatisticsCfgRoute(this._routeToolService))
+    this.routeCollectionService
+      .addRoute(new CirculationPoliciesRoute())
+      .addRoute(new DocumentsRoute())
+      .addRoute(new HoldingsRoute())
+      .addRoute(new ItemsRoute())
+      .addRoute(new IssuesRoute())
+      .addRoute(new ItemTypesRoute())
+      .addRoute(new LibrariesRoute())
+      .addRoute(new LocationsRoute())
+      .addRoute(new OrganisationsRoute())
+      .addRoute(new PatronsRoute())
+      .addRoute(new PatronTypesRoute())
+      .addRoute(new VendorsRoute())
+      .addRoute(new TemplatesRoute())
+      .addRoute(new CollectionsRoute())
+      .addRoute(new IllRequestsRoute())
+      .addRoute(new LocalFieldsRoute())
+      .addRoute(new LoansRoute())
+      .addRoute(new PatronTransactionEventsRoute())
+      .addRoute(new EntitiesRoute())
+      .addRoute(new EntitiesRemoteRoute())
+      .addRoute(new EntitiesLocalRoute())
+      .addRoute(new StatisticsCfgRoute())
       // Route from acquisition modules
-      .addRoute(new AcqBudgetsRoute(this._routeToolService))
-      .addRoute(new AcqAccountsRoute(this._routeToolService))
-      .addRoute(new AcqOrderLinesRoute(this._routeToolService))
-      .addRoute(new AcqOrdersRoute(this._routeToolService))
-      .addRoute(new ReceiptsRoute(this._routeToolService))
-      .addRoute(new ReceiptLinesRoute(this._routeToolService))
+      .addRoute(new AcqBudgetsRoute())
+      .addRoute(new AcqAccountsRoute())
+      .addRoute(new AcqOrderLinesRoute())
+      .addRoute(new AcqOrdersRoute())
+      .addRoute(new ReceiptsRoute())
+      .addRoute(new ReceiptLinesRoute())
       // should be at the last
-      .addRoute(new ImportDocumentsRoute(this._routeToolService, this._translateService))
+      .addRoute(new ImportDocumentsRoute())
     ;
-    this._routeCollectionService.getRoutes().map((route: any) => {
-      this._router.config.push(route);
+    this.routeCollectionService.getRoutes().map((route: any) => {
+      this.router.config.push(route);
     });
-    this._router.config.push(...[
+    this.router.config.push(...[
       {path: 'errors/:status_code', component: ErrorPageComponent},
       {path: '**', component: ErrorPageComponent}
     ]);
diff --git a/projects/admin/src/app/routes/statistics-cfg-route.ts b/projects/admin/src/app/routes/statistics-cfg-route.ts
index 0587afcd2..c8ac67460 100644
--- a/projects/admin/src/app/routes/statistics-cfg-route.ts
+++ b/projects/admin/src/app/routes/statistics-cfg-route.ts
@@ -16,6 +16,7 @@
  */
 
 import { marker as _ } from "@biesbjerg/ngx-translate-extract-marker";
+import { FormlyFieldConfig } from "@ngx-formly/core";
 import {
   DetailComponent,
   EditorComponent,
@@ -30,13 +31,12 @@ import {
   PERMISSION_OPERATOR,
 } from "@rero/shared";
 import { of } from "rxjs";
-import { CanAccessGuard, CAN_ACCESS_ACTIONS } from "../guard/can-access.guard";
+import { map } from "rxjs/operators";
+import { CAN_ACCESS_ACTIONS, CanAccessGuard } from "../guard/can-access.guard";
 import { PermissionGuard } from "../guard/permission.guard";
 import { StatisticsCfgBriefViewComponent } from "../record/brief-view/statistics-cfg-brief-view-component";
 import { StatisticsCfgDetailViewComponent } from "../record/detail-view/statistics-cfg-detail-view/statistics-cfg-detail-view.component";
 import { BaseRoute } from "./base-route";
-import { FormlyFieldConfig } from "@ngx-formly/core";
-import { map } from "rxjs/operators";
 
 export class StatisticsCfgRoute extends BaseRoute implements RouteInterface {
   /** Route name */
@@ -107,12 +107,12 @@ export class StatisticsCfgRoute extends BaseRoute implements RouteInterface {
             },
             canAdd: () =>
               of({
-                can: this._routeToolService.permissionsService.canAccess(
+                can: this.routeToolService.permissionsService.canAccess(
                   PERMISSIONS.STAT_CFG_CREATE
                 ),
               }),
             permissions: (record: any) =>
-              this._routeToolService.permissions(record, this.recordType),
+              this.routeToolService.permissions(record, this.recordType),
             formFieldMap: (
               field: FormlyFieldConfig,
               jsonSchema: JSONSchema7
@@ -120,9 +120,9 @@ export class StatisticsCfgRoute extends BaseRoute implements RouteInterface {
               return this._populateLocationsByCurrentUserLibrary(field, jsonSchema);
             },
             preCreateRecord: (data: any) => {
-              const { user } = this._routeToolService.userService;
+              const { user } = this.routeToolService.userService;
               data.library = {
-                $ref: this._routeToolService.apiService.getRefEndpoint(
+                $ref: this.routeToolService.apiService.getRefEndpoint(
                   "libraries",
                   user.currentLibrary
                 ),
@@ -151,16 +151,16 @@ export class StatisticsCfgRoute extends BaseRoute implements RouteInterface {
       field.hooks = {
         ...field.hooks,
         onInit: (field: FormlyFieldConfig): void => {
-          const { user } = this._routeToolService.userService;
-          const { baseUrl } = this._routeToolService.settingsService;
-          const prefix = this._routeToolService.apiService.getEndpointByType('libraries');
+          const { user } = this.routeToolService.userService;
+          const { baseUrl } = this.routeToolService.settingsService;
+          const prefix = this.routeToolService.apiService.getEndpointByType('libraries');
           if (user.currentLibrary != null && field.formControl.value == null) {
             field.formControl.setValue(
               `${baseUrl}${prefix}/${user.currentLibrary}`);
           }
         },
         afterContentInit: (f: FormlyFieldConfig) => {
-          const { apiService, recordService } = this._routeToolService;
+          const { apiService, recordService } = this.routeToolService;
 
           f.props.options = recordService
             .getRecords(
@@ -175,7 +175,7 @@ export class StatisticsCfgRoute extends BaseRoute implements RouteInterface {
             )
             .pipe(
               map((result: Record) =>
-                this._routeToolService.recordService.totalHits(
+                this.routeToolService.recordService.totalHits(
                   result.hits.total
                 ) === 0
                   ? []
diff --git a/projects/admin/src/app/routes/templates-route.ts b/projects/admin/src/app/routes/templates-route.ts
index 789dae996..2ca9a33fc 100644
--- a/projects/admin/src/app/routes/templates-route.ts
+++ b/projects/admin/src/app/routes/templates-route.ts
@@ -55,8 +55,8 @@ export class TemplatesRoute extends BaseRoute implements RouteInterface {
             searchFilters: [
               this.expertSearchFilter()
             ],
-            canAdd: () => this._routeToolService.canNot(),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            canAdd: () => this.routeToolService.canNot(),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             canUse: (record: any) => this._canUse(record),
             preCreateRecord: (data: any) => this._addDefaultValuesForTemplate(data),
             redirectUrl: (record: any) => {
@@ -104,9 +104,9 @@ export class TemplatesRoute extends BaseRoute implements RouteInterface {
     const usableTemplateTypes = ['documents', 'patrons'];
     return new Observable((observer: Subscriber<any>): void => {
       if (usableTemplateTypes.includes(record.metadata.template_type)) {
-        this._routeToolService.canRead(record, this.recordType).subscribe((actionStatus: ActionStatus) => {
+        this.routeToolService.canRead(record, this.recordType).subscribe((actionStatus: ActionStatus) => {
           if (actionStatus.can) {
-            const urlTree = this._routeToolService.router.createUrlTree(
+            const urlTree = this.routeToolService.router.createUrlTree(
               ['/', 'records', record.metadata.template_type, 'new'],
               {
                 queryParams: {
@@ -115,7 +115,7 @@ export class TemplatesRoute extends BaseRoute implements RouteInterface {
                 }
               }
             );
-            const url = (this._routeToolService.urlSerializer.serialize(urlTree));
+            const url = (this.routeToolService.urlSerializer.serialize(urlTree));
             actionStatus.url = url;
             observer.next(actionStatus);
           }
@@ -129,15 +129,15 @@ export class TemplatesRoute extends BaseRoute implements RouteInterface {
    * @param data: the initial data
    */
   private _addDefaultValuesForTemplate(data: any) {
-    const { user } = this._routeToolService.userService;
+    const { user } = this.routeToolService.userService;
     if (!data.hasOwnProperty('visibility')) {
       data.visibility = 'private';
     }
     data.organisation = {
-      $ref: this._routeToolService.apiService.getRefEndpoint('organisations', user.currentOrganisation)
+      $ref: this.routeToolService.apiService.getRefEndpoint('organisations', user.currentOrganisation)
     };
     data.creator = {
-      $ref: this._routeToolService.apiService.getRefEndpoint('patrons', user.patronLibrarian.pid)
+      $ref: this.routeToolService.apiService.getRefEndpoint('patrons', user.patronLibrarian.pid)
     };
     return data;
   }
diff --git a/projects/admin/src/app/routes/vendors-route.ts b/projects/admin/src/app/routes/vendors-route.ts
index 5212939c5..8d5c46fcc 100644
--- a/projects/admin/src/app/routes/vendors-route.ts
+++ b/projects/admin/src/app/routes/vendors-route.ts
@@ -55,12 +55,12 @@ export class VendorsRoute extends BaseRoute implements RouteInterface {
             searchFilters: [
               this.expertSearchFilter()
             ],
-            canAdd: () => of({ can: this._routeToolService.permissionsService.canAccess(PERMISSIONS.VNDR_CREATE) }),
-            permissions: (record: any) => this._routeToolService.permissions(record, this.recordType),
+            canAdd: () => of({ can: this.routeToolService.permissionsService.canAccess(PERMISSIONS.VNDR_CREATE) }),
+            permissions: (record: any) => this.routeToolService.permissions(record, this.recordType),
             preCreateRecord: (data: any) => {
-              const { user } = this._routeToolService.userService;
+              const { user } = this.routeToolService.userService;
               data.organisation = {
-                $ref: this._routeToolService.apiService.getRefEndpoint(
+                $ref: this.routeToolService.apiService.getRefEndpoint(
                   'organisations',
                   user.currentOrganisation
                 )
diff --git a/projects/admin/src/app/scss/styles.scss b/projects/admin/src/app/scss/styles.scss
index 45ee8c95f..8da9ea582 100644
--- a/projects/admin/src/app/scss/styles.scss
+++ b/projects/admin/src/app/scss/styles.scss
@@ -19,7 +19,6 @@
 @import 'font-awesome/scss/font-awesome';
 @import 'variables';
 @import 'bootstrap/scss/bootstrap';
-@import 'ngx-toastr/toastr-bs4-alert';
 
 
 html [type=button] {
@@ -102,10 +101,6 @@ button.disabled {
   content: " \f08e";
 }
 
-.toast-container .ngx-toastr {
-  width: 450px !important; // override width for all toastr message
-}
-
 span.no-data {
   font-style: italic;
   color: lightgray;
@@ -361,25 +356,6 @@ pre {
   padding-left: map-get($spacers, 4);
 }
 
-// ACQUISITIONS ===============================================================
-.fiscal-year-closed {
-  @extend .alert;
-  @extend .alert-warning;
-  @extend .p-2;
-  @extend .mt-5;
-  @extend .mb-3;
-  display: flex;
-  align-items: center;
-
-  &:before {
-    font-family: 'FontAwesome';
-    font-size: 2rem;
-    content: " \f071";
-    @extend .ml-2;
-    @extend .mr-3;
-  }
-}
-
 // LIBRARY ====================================================================
 .exception-date {
 
diff --git a/projects/admin/src/app/service/app-initializer.service.spec.ts b/projects/admin/src/app/service/app-initializer.service.spec.ts
index 53c73acb3..0695562ca 100644
--- a/projects/admin/src/app/service/app-initializer.service.spec.ts
+++ b/projects/admin/src/app/service/app-initializer.service.spec.ts
@@ -19,7 +19,6 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { inject, TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { SharedModule, UserService } from '@rero/shared';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { AppInitializerService } from './app-initializer.service';
 
 describe('Service: AppInit', () => {
@@ -32,7 +31,6 @@ describe('Service: AppInit', () => {
       ],
       providers: [
         AppInitializerService,
-        BsLocaleService,
         UserService
       ]
     });
diff --git a/projects/admin/src/app/service/app-initializer.service.ts b/projects/admin/src/app/service/app-initializer.service.ts
index 59db2098e..3094138f9 100644
--- a/projects/admin/src/app/service/app-initializer.service.ts
+++ b/projects/admin/src/app/service/app-initializer.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,79 +14,60 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@rero/ng-core';
+import { inject, Injectable } from '@angular/core';
+import { NgCoreTranslateService } from '@rero/ng-core';
 import { AppSettingsService, User, UserService } from '@rero/shared';
 import { Observable } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
-import { LibrarySwitchMenuStorageService } from '../menu/service/library-switch-menu-storage.service';
-import { LibrarySwitchMenuService } from '../menu/service/library-switch-menu.service';
-import { LibrarySwitchService } from '../menu/service/library-switch.service';
 import { AppConfigService } from './app-config.service';
 import { OrganisationService } from './organisation.service';
-import { TypeaheadFactoryService } from './typeahead-factory.service';
+import { RemoteAutocompleteFactoryService } from '../record/editor/formly/primeng/remote-autocomplete/remote-autocomplete-factory.service';
+import { LibrarySwitchStorageService } from '../menu/service/library-switch-storage.service';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AppInitializerService {
 
-  /**
-   * Constructor
-   * @param _userService - UserService
-   * @param _appConfigService - AppConfigService
-   * @param _translateService - TranslateService
-   * @param _organisationService - OrganisationService
-   * @param _librarySwitchService - LibrarySwitchService
-   * @param _librarySwitchMenuService - LibrarySwitchMenuService
-   * @param _typeaheadFactoryService - TypeaheadFactoryService
-   * @param _appSettingsService - AppSettingsService
-   * @param _librarySwitchMenuStorageService - LibrarySwitchMenuStorageService
-   */
-  constructor(
-    private _userService: UserService,
-    private _appConfigService: AppConfigService,
-    private _translateService: TranslateService,
-    private _organisationService: OrganisationService,
-    private _librarySwitchService: LibrarySwitchService,
-    private _librarySwitchMenuService: LibrarySwitchMenuService,
-    private _typeaheadFactoryService: TypeaheadFactoryService,
-    private _appSettingsService: AppSettingsService,
-    private _librarySwitchMenuStorageService: LibrarySwitchMenuStorageService
-  ) { }
+  private userService: UserService = inject(UserService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+  private appConfigService: AppConfigService = inject(AppConfigService);
+  private translateService: NgCoreTranslateService = inject(NgCoreTranslateService);
+  private remoteAutocompleteFactoryService: RemoteAutocompleteFactoryService = inject(RemoteAutocompleteFactoryService);
+  private librarySwitchStorageService: LibrarySwitchStorageService = inject(LibrarySwitchStorageService);
 
-  /**
-   * Function called when launching the application
-   */
   load(): Observable<any> {
-    return this._userService.load().pipe(
+    return this.userService.load().pipe(
       tap((user: User) => {
-        this._typeaheadFactoryService.init();
+        this.remoteAutocompleteFactoryService.init();
         if (user.hasAdminUiAccess) {
-          this._librarySwitchMenuService.init();
-          // Set current library and organisation for librarian or system_librarian roles
-          const library = user.patronLibrarian.libraries[0];
-          user.currentLibrary = library.pid;
+          // Default user library
+          let library = user.patronLibrarian.libraries[0];
+          // If the cache exists, we retrieve the id of the selected library
+          if (this.librarySwitchStorageService.has()) {
+            user.currentLibrary = this.librarySwitchStorageService.get().currentLibrary;
+          } else {
+            user.currentLibrary = library.pid;
+          }
+
           user.currentOrganisation = user.patronLibrarian.organisation.pid;
           user.currentBudget = user.patronLibrarian.organisation.budget.pid;
-          this._organisationService.loadOrganisationByPid(user.currentOrganisation);
-          this._librarySwitchService.switch(
-            this._librarySwitchMenuStorageService.getCurrentLibrary()
-          );
+          this.organisationService.loadOrganisationByPid(user.currentOrganisation);
         }
       }),
       switchMap(() => this.initTranslateService())
     );
   }
 
-  /** Initialize Translate Service */
   private initTranslateService(): Observable<any> {
-    let {language} = this._appSettingsService.settings;
+    let {language} = this.appSettingsService.settings;
     if (language == null) {
-      const browserLang = this._translateService.getBrowserLang();
-      language = browserLang.match(this._appConfigService.languages.join('|')) ?
-        browserLang : this._appConfigService.defaultLanguage;
+      const browserLang = this.translateService.getBrowserLang();
+      language = browserLang.match(this.appConfigService.languages.join('|')) ?
+        browserLang : this.appConfigService.defaultLanguage;
     }
-    return this._translateService.setLanguage(language);
+
+    return this.translateService.use(language);
   }
 }
diff --git a/projects/admin/src/app/service/bucket-name.service.ts b/projects/admin/src/app/service/bucket-name.service.ts
index f09e8fe98..a22f8c8a0 100644
--- a/projects/admin/src/app/service/bucket-name.service.ts
+++ b/projects/admin/src/app/service/bucket-name.service.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
 import { IBucketNameService } from '@rero/ng-core';
@@ -29,17 +29,9 @@ import { OrganisationApiService } from '../api/organisation-api.service';
 })
 export class BucketNameService implements IBucketNameService {
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   * @param organisationApiService - OrganisationApiService
-   * @param libraryApiService - LibraryApiService
-   */
-  constructor(
-    private translateService: TranslateService,
-    private organisationApiService: OrganisationApiService,
-    private libraryApiService: LibraryApiService
-  ) { }
+  private translateService: TranslateService = inject(TranslateService);
+  private organisationApiService: OrganisationApiService = inject(OrganisationApiService);
+  private libraryApiService: LibraryApiService = inject(LibraryApiService);
 
   /**
    * Transform aggregation name
diff --git a/projects/admin/src/app/service/editor.service.ts b/projects/admin/src/app/service/editor.service.ts
index 4494ea42b..5fa3e78b9 100644
--- a/projects/admin/src/app/service/editor.service.ts
+++ b/projects/admin/src/app/service/editor.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,7 +16,7 @@
  */
 
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 import { PredictionIssue } from './holdings.service';
@@ -25,13 +25,8 @@ import { PredictionIssue } from './holdings.service';
   providedIn: 'root'
 })
 export class EditorService {
-  /**
-   * Constructor
-   * @param _http - HttpClient
-   */
-  constructor(
-    private _http: HttpClient
-  ) { }
+
+  private httpClient: HttpClient = inject(HttpClient);
 
   /**
    * Get record from rero-ils API
@@ -41,7 +36,7 @@ export class EditorService {
    * observable containing the record
    */
   getRecordFromExternal(source: string, pid: string): Observable<any> {
-    return this._http.get<any>(`/api/import_${source}/${pid}`).pipe(
+    return this.httpClient.get<any>(`/api/import_${source}/${pid}`).pipe(
       catchError(e => {
         if (e.status === 404) {
           return of(null);
@@ -57,7 +52,7 @@ export class EditorService {
    * @returns an object with an issues property containing the list of samples
    */
   getHoldingPatternPreview(data: any, size = 10): Observable<PredictionIssue[]> {
-    return this._http.post<any>(`/api/holding/pattern/preview`, {
+    return this.httpClient.post<any>(`/api/holding/pattern/preview`, {
       data: data.patterns,
       size
     }).pipe(
diff --git a/projects/admin/src/app/service/holdings.service.ts b/projects/admin/src/app/service/holdings.service.ts
index 7db50e4ae..8a93bed69 100644
--- a/projects/admin/src/app/service/holdings.service.ts
+++ b/projects/admin/src/app/service/holdings.service.ts
@@ -16,7 +16,7 @@
  */
 
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { IssueItemStatus } from '@rero/shared';
 import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
@@ -35,11 +35,7 @@ export interface PredictionIssue {
 })
 export class HoldingsService {
 
-  /**
-   * Constructor
-   * @param _http - HttpClient
-   */
-  constructor(private _http: HttpClient) { }
+  private httpClient: HttpClient = inject(HttpClient);
 
   /**
    * Get prediction preview for given serial patterns.
@@ -51,7 +47,7 @@ export class HoldingsService {
     const url = `/api/holding/${holdingPid}/patterns/preview`;
     let params = new HttpParams();
     params = params.set('size', size.toString());
-    return this._http.get<any>(url, { params }).pipe(
+    return this.httpClient.get<any>(url, { params }).pipe(
       map(data => data.issues.reverse())
     );
   }
@@ -76,7 +72,7 @@ export class HoldingsService {
         data.issue.received_date = receivedDate;
       }
     }
-    return this._http.post<any>(url, data);
+    return this.httpClient.post<any>(url, data);
   }
 
   /**
@@ -107,7 +103,7 @@ export class HoldingsService {
     if (patronBarcode != null) {
       params = params.set('patron_barcode', patronBarcode);
     }
-    return this._http.get(`/api/holding/${holdingPid}/can_request`, { params });
+    return this.httpClient.get(`/api/holding/${holdingPid}/can_request`, { params });
   }
 
   /**
@@ -117,7 +113,7 @@ export class HoldingsService {
    */
    getPickupLocations(holdingPid): Observable<any> {
     const url = `/api/holding/${holdingPid}/pickup_locations`;
-    return this._http.get<any>(url).pipe(
+    return this.httpClient.get<any>(url).pipe(
       map(data => data.locations),
       catchError(e => {
         if (e.status === 404) {
diff --git a/projects/admin/src/app/service/issue.service.spec.ts b/projects/admin/src/app/service/issue.service.spec.ts
index 8d899b9ea..9fa0b781a 100644
--- a/projects/admin/src/app/service/issue.service.spec.ts
+++ b/projects/admin/src/app/service/issue.service.spec.ts
@@ -15,21 +15,17 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
+import { CommonModule } from '@angular/common';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { IssueService } from './issue.service';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { TranslateModule } from '@ngx-translate/core';
 import { IssueItemStatus } from '@rero/shared';
 import { IssueEmailComponent } from '../components/issues/issue-email/issue-email.component';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { TranslateCompiler, TranslateLoader, TranslateModule, TranslateService, TranslateStore } from '@ngx-translate/core';
-import { ToastrModule, ToastrService } from 'ngx-toastr';
-import { CommonModule } from '@angular/common';
 import { PreviewEmailModule } from '../shared/preview-email/preview-email.module';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
+import { IssueService } from './issue.service';
 
 describe('IssueService', () => {
   let service: IssueService;
-  let modalService: BsModalService;
 
   const record = {
     metadata: {
@@ -45,18 +41,14 @@ describe('IssueService', () => {
       imports: [
         HttpClientTestingModule,
         TranslateModule.forRoot(),
-        ToastrModule.forRoot()
       ],
       providers: [
         PreviewEmailModule,
         CommonModule,
-        BsModalService,
-        BsLocaleService,
         IssueService
       ]
     });
     service = TestBed.inject(IssueService);
-    modalService = TestBed.inject(BsModalService);
   });
 
   it('should be created', () => {
@@ -72,7 +64,5 @@ describe('IssueService', () => {
 
   it('should return the modal reference', () => {
     const modal = service.openClaimEmailDialog(record);
-    expect(modal).toBeInstanceOf(BsModalRef);
-    modalService.hide();
   });
 });
diff --git a/projects/admin/src/app/service/issue.service.ts b/projects/admin/src/app/service/issue.service.ts
index d393a8383..bfb0c6ebb 100644
--- a/projects/admin/src/app/service/issue.service.ts
+++ b/projects/admin/src/app/service/issue.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022-2023 RERO
+ * Copyright (C) 2022-2024 RERO
  * Copyright (C) 2022-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,19 +15,17 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { IssueItemStatus } from '@rero/shared';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { IssueEmailComponent } from '../components/issues/issue-email/issue-email.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable()
 export class IssueService {
 
-  /**
-   * Constructor
-   * @param _modalService - BsModalService
-   */
-  constructor(private _modalService: BsModalService) { }
+  private dialogService: DialogService = inject(DialogService);
+  private translateService: TranslateService = inject(TranslateService);
 
   /**
    * Is Allow claim
@@ -42,19 +40,16 @@ export class IssueService {
   }
 
   /**
-   * Opens a claim dialog
+   * Open a claim dialog
    * @param record the item
-   * @returns BsModalRef
+   * @return DynamicDialogRef
    */
-  openClaimEmailDialog(record: any): BsModalRef {
-    const bsModalRef = this._modalService.show(IssueEmailComponent, {
-      ignoreBackdropClick: true,
-      keyboard: true,
-      class: 'modal-xl',
-      initialState: { record }
+  openClaimEmailDialog(record: any): DynamicDialogRef {
+    return this.dialogService.open(IssueEmailComponent, {
+      header: this.translateService.instant('Claim'),
+      width: '60vw',
+      dismissableMask: true,
+      data: { record }
     });
-    // Event to allow the closing of the dialog
-    bsModalRef.content.closeDialog.subscribe((close: boolean) => bsModalRef.hide());
-    return bsModalRef;
   }
 }
diff --git a/projects/admin/src/app/service/items.service.spec.ts b/projects/admin/src/app/service/items.service.spec.ts
index 7302cda2c..45ff59dcf 100644
--- a/projects/admin/src/app/service/items.service.spec.ts
+++ b/projects/admin/src/app/service/items.service.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,25 +17,17 @@
 
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { BsModalRef, BsModalService, ModalModule } from 'ngx-bootstrap/modal';
-import { ToastrModule } from 'ngx-toastr';
 import { ItemsService } from './items.service';
+import { RouterModule } from '@angular/router';
 
 describe('ItemsService', () => {
   beforeEach(() => TestBed.configureTestingModule({
     imports: [
       HttpClientTestingModule,
-      ModalModule.forRoot(),
-      ToastrModule.forRoot(),
       TranslateModule.forRoot({}),
-      RouterTestingModule,
+      RouterModule.forRoot([]),
     ],
-    providers: [
-      BsModalRef,
-      BsModalService
-    ]
   }));
 
   it('should be created', () => {
diff --git a/projects/admin/src/app/service/items.service.ts b/projects/admin/src/app/service/items.service.ts
index 1e1d0a99f..39be8bd14 100644
--- a/projects/admin/src/app/service/items.service.ts
+++ b/projects/admin/src/app/service/items.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,11 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ApiService, RecordService } from '@rero/ng-core';
+import { BaseApi, ItemStatus, UserService } from '@rero/shared';
 import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
-import { BaseApi, ItemStatus, UserService } from '@rero/shared';
 import { Item, ItemAction, ItemNoteType } from '../classes/items';
 
 @Injectable({
@@ -27,19 +27,10 @@ import { Item, ItemAction, ItemNoteType } from '../classes/items';
 })
 export class ItemsService {
 
-  /**
-   * constructor
-   * @param _http - HttpClient
-   * @param _userService - UserService
-   * @param _recordService - RecordService
-   * @param _apiService - ApiService
-   */
-  constructor(
-    private _http: HttpClient,
-    private _userService: UserService,
-    private _recordService: RecordService,
-    private _apiService: ApiService
-  ) { }
+  private httpClient: HttpClient = inject(HttpClient);
+  private userService: UserService = inject(UserService);
+  private recordService: RecordService = inject(RecordService);
+  private apiService: ApiService = inject(ApiService);
 
   /**
    * Get item by pid from elasticsearch
@@ -47,7 +38,7 @@ export class ItemsService {
    * @returns Observable<any>
    */
   getByPidFromEs(pid: string): Observable<any> {
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       'items', `pid:${pid}`, 1, 1, undefined, undefined, BaseApi.reroJsonheaders
     ).pipe(map((result: any) => result.hits.hits[0]));
   }
@@ -58,14 +49,14 @@ export class ItemsService {
    * @return Observable<any>
    */
   getRequestedLoans(libraryPid): Observable<any> {
-    const itemApiUrl = this._apiService.getEndpointByType('item');
+    const itemApiUrl = this.apiService.getEndpointByType('item');
     const url = `${itemApiUrl}/requested_loans/${libraryPid}`;
-    return this._http.get<any>(url).pipe(
+    return this.httpClient.get<any>(url).pipe(
       map(data => data.hits),
-      map(hits => this._recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
+      map(hits => this.recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
       map(hits => hits.map(
         data => {
-          const item = data.item;
+          const { item } = data;
           if (data.loan) {
             item.loan = data.loan;
           }
@@ -82,13 +73,13 @@ export class ItemsService {
    * @return Observable<any>
    */
   doValidateRequest(item, transactionLibraryPid): Observable<any> {
-    const itemApiUrl = this._apiService.getEndpointByType('item');
+    const itemApiUrl = this.apiService.getEndpointByType('item');
     const url = `${itemApiUrl}/validate_request`;
-    return this._http.post<any>(url, {
+    return this.httpClient.post<any>(url, {
       item_pid: item.pid,
       pid: item.loan.pid,
       transaction_library_pid: transactionLibraryPid,
-      transaction_user_pid: this._userService.user.patronLibrarian.pid
+      transaction_user_pid: this.userService.user.patronLibrarian.pid
     }).pipe(
       map(data => {
         const itemData = data.metadata;
@@ -105,12 +96,12 @@ export class ItemsService {
    * @return Observable<any>
    */
   getItem(barcode: string, patronPid?: string): Observable<any> {
-    const itemApiUrl = this._apiService.getEndpointByType('item');
+    const itemApiUrl = this.apiService.getEndpointByType('item');
     let url = `${itemApiUrl}/barcode/${barcode}`;
     if (patronPid) {
-      url = url + `?patron.patron_pid=${patronPid}`;
+      url += `?patron.patron_pid=${patronPid}`;
     }
-    return this._http.get<any>(url).pipe(
+    return this.httpClient.get<any>(url).pipe(
       map(data => {
         const item = new Item(data.metadata.item);
         if (data.metadata.loan) {
@@ -135,11 +126,11 @@ export class ItemsService {
    * @param transactionLibraryPid: transaction library
    */
   checkin(barcode: string, transactionLibraryPid: string) {
-    const itemApiUrl = this._apiService.getEndpointByType('item');
-    return this._http.post<any>(`${itemApiUrl}/checkin`, {
+    const itemApiUrl = this.apiService.getEndpointByType('item');
+    return this.httpClient.post<any>(`${itemApiUrl}/checkin`, {
       item_barcode: barcode,
       transaction_library_pid: transactionLibraryPid,
-      transaction_user_pid: this._userService.user.patronLibrarian.pid
+      transaction_user_pid: this.userService.user.patronLibrarian.pid
     }).pipe(
       map(data => {
         const item = new Item(data.metadata);
@@ -185,7 +176,7 @@ export class ItemsService {
    * @param additionalParams: additional parameters to send as query string arguments
    */
   doAction(item, transactionLibraryPid: string, userPid: string, patronPid?: string, additionalParams?: any) {
-    const itemApiUrl = this._apiService.getEndpointByType('item');
+    const itemApiUrl = this.apiService.getEndpointByType('item');
     const action = item.currentAction;
     const url = `${itemApiUrl}/${action}`;
 
@@ -214,7 +205,7 @@ export class ItemsService {
       queryParams[key] = true;
     }
 
-    return this._http.post<any>(url, data, {params: queryParams}).pipe(
+    return this.httpClient.post<any>(url, data, {params: queryParams}).pipe(
       map(itemData => {
         const newItem = new Item(itemData.metadata);
         newItem.actionDone = action;
@@ -231,9 +222,9 @@ export class ItemsService {
    * @return an observable on the API call response
    */
   getPickupLocations(itemPid): Observable<any> {
-    const itemApiUrl = this._apiService.getEndpointByType('item');
+    const itemApiUrl = this.apiService.getEndpointByType('item');
     const url = `${itemApiUrl}/${itemPid}/pickup_locations`;
-    return this._http.get<any>(url).pipe(
+    return this.httpClient.get<any>(url).pipe(
       map(data => data.locations),
       catchError(e => {
         if (e.status === 404) {
@@ -258,8 +249,8 @@ export class ItemsService {
     if (patronBarcode != null) {
       params = params.set('patron_barcode', patronBarcode);
     }
-    const itemApiUrl = this._apiService.getEndpointByType('item');
-    return this._http.get(`${itemApiUrl}/${itemPid}/can_request`, { params });
+    const itemApiUrl = this.apiService.getEndpointByType('item');
+    return this.httpClient.get(`${itemApiUrl}/${itemPid}/can_request`, { params });
   }
 
   /** Is a callout wrapper is required for this item.
@@ -267,7 +258,7 @@ export class ItemsService {
    * A callout wrapper is a visual css information to indicate to user than something happens
    * on an element
    *
-   * @param item: the item to analyse
+   * @param item: the item to analyze
    * @param type: the callout type (error, warning, info, ...)
    * @return true if the callout is required, false otherwise
    */
diff --git a/projects/admin/src/app/service/keyboard-shortcuts.service.ts b/projects/admin/src/app/service/keyboard-shortcuts.service.ts
index 30d93a4b1..808cc53d9 100644
--- a/projects/admin/src/app/service/keyboard-shortcuts.service.ts
+++ b/projects/admin/src/app/service/keyboard-shortcuts.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  * Copyright (C) 2020 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { HotkeysService } from '@ngneat/hotkeys';
 import { TranslateService } from '@ngx-translate/core';
@@ -26,79 +26,71 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class KeyboardShortcutsService {
 
-  /**
-   * Constructor
-   * @param _router - Router
-   * @param _hotKeys - HotKeysService
-   * @param _translateService - TranslateService
-   */
-  constructor(
-    private _router: Router,
-    private _hotKeys: HotkeysService,
-    private _translateService: TranslateService
-  ) { }
+  private router: Router = inject(Router);
+  private hotKeys: HotkeysService = inject(HotkeysService);
+  private translateService: TranslateService = inject(TranslateService);
 
   /**
    * Initialize main application shortcuts. These shortcuts are available on all application
    */
   initializeShortcuts() {
-    this._hotKeys.addShortcut({
+    this.hotKeys.addShortcut({
       keys: 'esc',
       allowIn: ['INPUT', 'SELECT', 'TEXTAREA'],
-      group: this._translateService.instant('Global shortcuts'),
-      description: this._translateService.instant('Lose focus on the current field')
+      group: this.translateService.instant('Global shortcuts'),
+      description: this.translateService.instant('Lose focus on the current field')
     }).subscribe(
       (output) => (output.target as HTMLElement).blur()
     );
 
-    this._hotKeys.addShortcut({
+    this.hotKeys.addShortcut({
       keys: 'shift./',
-      group: this._translateService.instant('Global shortcuts'),
-      description: this._translateService.instant('Set focus on the header search input')
+      group: this.translateService.instant('Global shortcuts'),
+      description: this.translateService.instant('Set focus on the header search input')
     }).subscribe(e => {
       const autocompleteElement = document.getElementsByClassName('rero-ils-autocomplete')[0];
       const inputField = autocompleteElement.getElementsByTagName('input')[0];
       inputField.focus();
     });
 
-    this._hotKeys.addShortcut({
+    this.hotKeys.addShortcut({
       keys: 'h',
-      group: this._translateService.instant('Global shortcuts'),
-      description: this._translateService.instant('Open the global help page')
+      group: this.translateService.instant('Global shortcuts'),
+      description: this.translateService.instant('Open the global help page')
     }).subscribe(
       _ => window.open('/help', 'rero-ils-help')
     );
 
-    this._hotKeys.addShortcut({
+    this.hotKeys.addShortcut({
       keys: 'p',
-      group: this._translateService.instant('Global shortcuts'),
-      description: this._translateService.instant('Open the patron search page')
+      group: this.translateService.instant('Global shortcuts'),
+      description: this.translateService.instant('Open the patron search page')
     }).subscribe(
-      _ => this._router.navigate(['/records', 'patrons'])
+      _ => this.router.navigate(['/records', 'patrons'])
     );
 
-    this._hotKeys.addShortcut({
+    this.hotKeys.addShortcut({
       keys: 'c',
-      group: this._translateService.instant('Global shortcuts'),
-      description: this._translateService.instant('Open the circulation checkin interface')
+      group: this.translateService.instant('Global shortcuts'),
+      description: this.translateService.instant('Open the circulation checkin interface')
     }).subscribe(
-      _ => this._router.navigate(['/circulation', 'checkout'])
+      _ => this.router.navigate(['/circulation', 'checkout'])
     );
 
-    this._hotKeys.addShortcut({
+    this.hotKeys.addShortcut({
       keys: 'r',
-      group: this._translateService.instant('Global shortcuts'),
-      description: this._translateService.instant('Open the main requests page')
+      group: this.translateService.instant('Global shortcuts'),
+      description: this.translateService.instant('Open the main requests page')
     }).subscribe(
-      _ => this._router.navigate(['/circulation', 'requests'])
+      _ => this.router.navigate(['/circulation', 'requests'])
     );
 
-    this._hotKeys.addShortcut({
+    this.hotKeys.addShortcut({
       keys: 'i',
-      group: this._translateService.instant('Global shortcuts'),
-      description: this._translateService.instant('Open the inventory list')
+      group: this.translateService.instant('Global shortcuts'),
+      description: this.translateService.instant('Open the inventory list')
     }).subscribe(
-      _ => this._router.navigate(['/', 'records', 'items'])
+      _ => this.router.navigate(['/', 'records', 'items'])
     );
 
   }
diff --git a/projects/admin/src/app/service/library.service.ts b/projects/admin/src/app/service/library.service.ts
index af8e4326a..c551d380a 100644
--- a/projects/admin/src/app/service/library.service.ts
+++ b/projects/admin/src/app/service/library.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { Record } from '@rero/ng-core/lib/record/record';
 import { map } from 'rxjs/operators';
@@ -25,29 +25,23 @@ import { map } from 'rxjs/operators';
 })
 export class LibraryService {
 
+  private recordService: RecordService = inject(RecordService);
+
   /** Resource name */
   static readonly resource = 'libraries';
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(
-    private _recordService: RecordService
-  ) { }
-
   /**
    * Library count
    * @return Observable
    */
   get count$() {
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       LibraryService.resource,
       undefined,
       1,
       1
     ).pipe(
-      map((results: Record) => this._recordService.totalHits(results.hits.total))
+      map((results: Record) => this.recordService.totalHits(results.hits.total))
     );
   }
 
@@ -57,7 +51,7 @@ export class LibraryService {
    * @return Observable
    */
   get$(pid: string) {
-    return this._recordService.getRecord(LibraryService.resource, pid);
+    return this.recordService.getRecord(LibraryService.resource, pid);
   }
 
   /**
@@ -85,7 +79,7 @@ export class LibraryService {
    * @param order - string, order name
    */
   private _query(query: any, order: string = 'name') {
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       LibraryService.resource, query, 1, RecordService.MAX_REST_RESULTS_SIZE,
       undefined, undefined, undefined, order
     );
diff --git a/projects/admin/src/app/service/loan.service.ts b/projects/admin/src/app/service/loan.service.ts
index bc807aa61..8993720f1 100644
--- a/projects/admin/src/app/service/loan.service.ts
+++ b/projects/admin/src/app/service/loan.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -12,25 +12,33 @@
  * GNU Affero General Public License for more details.
  *
  * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ * along with this program.  If not, see <httpClient://www.gnu.org/licenses/>.
  */
 
+
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { DialogService, RecordService } from '@rero/ng-core';
+import { inject, Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { RecordService } from '@rero/ng-core';
 import { Record } from '@rero/ng-core/lib/record/record';
+import { UserService } from '@rero/shared';
+import { Confirmation, ConfirmationService } from 'primeng/api';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { CircPolicy } from '../classes/circ-policy';
 import { LoanState } from '../classes/loans';
-import { UserService } from '@rero/shared';
-import { TranslateService } from '@ngx-translate/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class LoanService {
 
+  private recordService: RecordService = inject(RecordService);
+  private httpClient: HttpClient = inject(HttpClient);
+  private userService: UserService = inject(UserService);
+  private translateService: TranslateService = inject(TranslateService);
+  private confirmationService: ConfirmationService = inject(ConfirmationService);
+
   // SERVICE CONSTANTS ========================================================
   /** Statuses of a borrow loan */
   static borrowStatuses = [
@@ -44,22 +52,6 @@ export class LoanService {
     LoanState.ITEM_IN_TRANSIT_FOR_PICKUP
   ];
 
-  // CONSTRUCTOR ==============================================================
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   * @param _http - HttpClient
-   * @param _userService - UserService
-   * @param _translateService - TranslateService
-   */
-  constructor(
-    private _recordService: RecordService,
-    private _http: HttpClient,
-    private _userService: UserService,
-    private _translateService: TranslateService,
-    private _dialogService: DialogService
-  ) { }
-
   // SERVICES FUNCTIONS =======================================================
   /**
    * Return a borrowed loan records
@@ -105,12 +97,12 @@ export class LoanService {
    */
   cancelLoan(itemPid: string, loanPid: string, transactionLibraryPid: string): Observable<any> {
     const url = '/api/item/cancel_item_request';
-    return this._http.post<any>(url, {
+    return this.httpClient.post<any>(url, {
       item_pid: itemPid,
       pid: loanPid,
       transaction_library_pid: transactionLibraryPid,
       // TODO: Fix this with multiple patron
-      transaction_user_pid: this._userService.user.patrons[0].pid
+      transaction_user_pid: this.userService.user.patrons[0].pid
     }).pipe(
       map(data => {
         const itemData = data.metadata;
@@ -138,7 +130,7 @@ export class LoanService {
    */
   updateLoanPickupLocation(loanPid: string, pickupLocationPid: string): Observable<any> {
     const url = '/api/item/update_loan_pickup_location';
-    return this._http.post<any>(url, {
+    return this.httpClient.post<any>(url, {
       pid: loanPid,
       pickup_location_pid: pickupLocationPid
     });
@@ -151,25 +143,28 @@ export class LoanService {
    */
   getCirculationPolicy(loanPid: string): Observable<CircPolicy> {
     const apiUrl = `/api/loan/${loanPid}/circulation_policy`;
-    return this._http.get<CircPolicy>(apiUrl);
+    return this.httpClient.get<CircPolicy>(apiUrl);
   }
 
   /**
    * Cancel request dialog.
-   * @returns Observable (true if the user confirms the cancellation)
    */
-  cancelRequestDialog(): Observable<boolean> {
-    const config = {
-      ignoreBackdropClick: true,
-      initialState: {
-        title: this._translateService.instant('Cancel request'),
-        body: this._translateService.instant('Do you really want to cancel the request?'),
-        confirmButton: true,
-        cancelTitleButton: this._translateService.instant('No'),
-        confirmTitleButton: this._translateService.instant('Yes')
-      }
+  cancelRequestDialog(event: Event, accept?: Function, reject?: Function): void {
+    const confirmation: Confirmation = {
+      target: event.target as EventTarget,
+      header: this.translateService.instant('Cancel request'),
+      message: this.translateService.instant('Do you really want to cancel the request?'),
+      acceptLabel: this.translateService.instant('Yes'),
+      rejectLabel: this.translateService.instant('No'),
+      dismissableMask: true,
     };
-    return this._dialogService.show(config);
+    if (accept) {
+      confirmation.accept = accept;
+    }
+    if (reject) {
+      confirmation.reject = reject;
+    }
+    this.confirmationService.confirm(confirmation);
   }
 
   // PRIVATES SERVICE FUNCTIONS ===============================================
@@ -185,6 +180,6 @@ export class LoanService {
       const states = statuses.join(' OR state:');
       query +=  ` AND (state:${states})`;
     }
-    return this._recordService.getRecords('loans', query, 1, 100, [], undefined, undefined, 'created');
+    return this.recordService.getRecords('loans', query, 1, 100, [], undefined, undefined, 'created');
   }
 }
diff --git a/projects/admin/src/app/service/location.service.ts b/projects/admin/src/app/service/location.service.ts
index b75d2e5f7..52e2b4988 100644
--- a/projects/admin/src/app/service/location.service.ts
+++ b/projects/admin/src/app/service/location.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, Error, RecordService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -26,6 +26,8 @@ import { map } from 'rxjs/operators';
 })
 export class LocationService {
 
+  private recordService: RecordService = inject(RecordService);
+
   // SERVICE ATTRIBUTES =======================================================
   /** Resource name */
   static readonly resource = 'locations';
@@ -42,15 +44,6 @@ export class LocationService {
     }
   };
 
-  // SERVICE CONSTRUCTOR ======================================================
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(
-    private _recordService: RecordService
-  ) { }
-
   // SERVICE FUNCTIONS ========================================================
   /**
    * Get all locations related to some libraries
@@ -60,7 +53,7 @@ export class LocationService {
     const query = libraryPids.map(pid => `library.pid:${pid}`).join(' OR ');
     return this._query(query).pipe(
       map((data: Record) => data.hits),
-      map((hits: {hits: Array<any>, total:number}) => this._recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
+      map((hits: {hits: Array<any>, total:number}) => this.recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
     );
   }
 
@@ -72,7 +65,7 @@ export class LocationService {
    */
   private _query(query: string, options?: GetRecordsOptions): Observable<Record | Error> {
     options = {...LocationService.defaultOptions, ...options};
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       LocationService.resource,
       query,
       options.page,
diff --git a/projects/admin/src/app/service/operation-logs.service.ts b/projects/admin/src/app/service/operation-logs.service.ts
index 4f5b8b50d..27b637863 100644
--- a/projects/admin/src/app/service/operation-logs.service.ts
+++ b/projects/admin/src/app/service/operation-logs.service.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { AppSettingsService } from '@rero/shared';
 
 @Injectable({
@@ -22,11 +22,7 @@ import { AppSettingsService } from '@rero/shared';
 })
 export class OperationLogsService {
 
-  /**
-   * Constructor
-   * @param _appSettingsService - AppSettingsService
-   */
-  constructor(private _appSettingsService: AppSettingsService) {}
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
 
   /**
    * Is operation logs is visible
@@ -54,6 +50,6 @@ export class OperationLogsService {
    * @return Object
    */
   private _setting(): any {
-    return this._appSettingsService.settings.operationLogs;
+    return this.appSettingsService.settings.operationLogs;
   }
 }
diff --git a/projects/admin/src/app/service/organisation.service.ts b/projects/admin/src/app/service/organisation.service.ts
index 0d243f559..297efd05e 100644
--- a/projects/admin/src/app/service/organisation.service.ts
+++ b/projects/admin/src/app/service/organisation.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { Subject } from 'rxjs';
 import { map } from 'rxjs/operators';
@@ -25,42 +25,35 @@ import { map } from 'rxjs/operators';
 })
 export class OrganisationService {
 
+  private recordService: RecordService = inject(RecordService);
+
   // SERVICE ATTRIBUTES =======================================================
 
   /** Observable on Record Organisation */
-  private _onOrganisationLoaded: Subject<any> = new Subject();
+  private onOrganisationLoaded: Subject<any> = new Subject();
   /** Organisation record */
-  private _record: any;
+  private record: any;
 
   // GETTER & SETTER ==========================================================
   /** Return observable of organisation */
   get onOrganisationLoaded$() {
-    return this._onOrganisationLoaded.asObservable();
+    return this.onOrganisationLoaded.asObservable();
   }
   /** Get current organisation*/
   get organisation() {
-    return this._record;
+    return this.record;
   }
 
-  // CONSTRUCTOR ==============================================================
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(
-    private _recordService: RecordService
-  ) { }
-
   /**
    * Load organisation record
    * @param pid - string
    */
   loadOrganisationByPid(pid: string) {
-    this._recordService
+    this.recordService
       .getRecord('organisations', pid)
       .subscribe((orgRecord: any) => {
-        this._record  = orgRecord.metadata;
-        this._onOrganisationLoaded.next(this._record);
+        this.record  = orgRecord.metadata;
+        this.onOrganisationLoaded.next(this.record);
       });
   }
 }
diff --git a/projects/admin/src/app/service/patron-transactions.service.ts b/projects/admin/src/app/service/patron-transactions.service.ts
index 76a0c43d4..8c4bcc068 100644
--- a/projects/admin/src/app/service/patron-transactions.service.ts
+++ b/projects/admin/src/app/service/patron-transactions.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2022 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,11 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
+import { BaseApi } from '@rero/shared';
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { BaseApi } from '@rero/shared';
 import { PatronTransaction } from '../classes/patron-transaction';
 
 @Injectable({
@@ -28,16 +28,8 @@ import { PatronTransaction } from '../classes/patron-transaction';
 })
 export class PatronTransactionsService {
 
-  // CONSTRUCTOR ==============================================================
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(
-    private _recordService: RecordService
-  ) { }
+  private recordService: RecordService = inject(RecordService);
 
-  // PUBLIC FUNCTIONS =========================================================
   /**
    * Get patron transaction by pid
    * @param pid: the patron transaction pid
@@ -47,10 +39,10 @@ export class PatronTransactionsService {
     // DEV NOTE :
     //   We use `getRecords` instead of `getRecord` in order to benefit of the
     //   records search serialization
-    return this._recordService
+    return this.recordService
       .getRecords('patron_transactions', `pid:${pid}`, 1, 1, undefined, undefined, BaseApi.reroJsonheaders)
       .pipe(
-        map((result: Record) => this._recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
+        map((result: Record) => this.recordService.totalHits(result.hits.total) === 0 ? [] : result.hits.hits),
         map((hits: any) => hits.find(Boolean)),  // Get first element of array if exists
         map((hit: any) => new PatronTransaction(hit.metadata))
       );
diff --git a/projects/admin/src/app/service/patron.service.ts b/projects/admin/src/app/service/patron.service.ts
index bcdca852f..35f289902 100644
--- a/projects/admin/src/app/service/patron.service.ts
+++ b/projects/admin/src/app/service/patron.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-204 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ApiService, RecordService } from '@rero/ng-core';
 import { Record } from '@rero/ng-core/lib/record/record';
 import { User } from '@rero/shared';
@@ -29,34 +29,26 @@ import { Loan, LoanOverduePreview, LoanState } from '../classes/loans';
 })
 export class PatronService {
 
-  /** Current patron */
-  private _currentPatron: BehaviorSubject<User> = new BehaviorSubject(undefined);
+  private httpClient: HttpClient = inject(HttpClient);
+  private apiService: ApiService = inject(ApiService);
+  private recordService: RecordService = inject(RecordService);
 
-  /**
-   * Constructor
-   * @param _http - HttpClient
-   * @param _apiService - ApiService
-   * @param _recordService - RecordService
-   */
-  constructor(
-    private _http: HttpClient,
-    private _apiService: ApiService,
-    private _recordService: RecordService
-  ) {}
+  /** Current patron */
+  private currentPatron: BehaviorSubject<User> = new BehaviorSubject(undefined);
 
   /**
    * Get Current Patron
    * @return Observable
    */
   get currentPatron$(): Observable<User> {
-    return this._currentPatron.asObservable();
+    return this.currentPatron.asObservable();
   }
 
   /**
    * Clear patron
    */
   clearPatron() {
-    this._currentPatron.next(undefined);
+    this.currentPatron.next(undefined);
   }
 
   /**
@@ -65,25 +57,25 @@ export class PatronService {
    * @return Observable
    */
   getPatron(barcode: string): Observable<any> {
-    return this._recordService
+    return this.recordService
       .getRecords('patrons', `barcode:${barcode}`, 1, 1)
       .pipe(
         switchMap((response: Record) => {
-          switch (this._recordService.totalHits(response.hits.total)) {
+          switch (this.recordService.totalHits(response.hits.total)) {
             case 0: {
               this.clearPatron();
               break;
             }
             case 1: {
               const patron = response.hits.hits[0].metadata;
-              this._currentPatron.next(patron);
+              this.currentPatron.next(patron);
               break;
             }
             default: {
               throw new Error('too much results');
             }
           }
-          return this._currentPatron.asObservable();
+          return this.currentPatron.asObservable();
         })
       );
   }
@@ -94,7 +86,7 @@ export class PatronService {
    * @return Observable on patron metadata.
    */
   getPatronByPid(pid: string): Observable<any> {
-    return this._recordService
+    return this.recordService
       .getRecord('patrons', pid)
       .pipe(map((data: any) => data.metadata))
   }
@@ -109,11 +101,11 @@ export class PatronService {
     if (sort === undefined) {
       sort = '-transaction_date';
     }
-    const itemApiUrl = this._apiService.getEndpointByType('item');
+    const itemApiUrl = this.apiService.getEndpointByType('item');
     const url = `${itemApiUrl}/loans/${patronPid}?sort=${sort}`;
-    return this._http.get<any>(url).pipe(
+    return this.httpClient.get<any>(url).pipe(
       map(data => data.hits),
-      map(hits => this._recordService.totalHits(hits.total === 0) ? [] : hits.hits),
+      map(hits => this.recordService.totalHits(hits.total === 0) ? [] : hits.hits),
       map(hits => hits.map((data: any) => this._buildItem(data)))
     );
   }
@@ -124,7 +116,7 @@ export class PatronService {
    * @return Observable
    */
   getItem(barcode: string) {
-    return this._http
+    return this.httpClient
       .get<any>(`/api/item/barcode/${barcode}`)
       .pipe(
         map(response => this._buildItem(response.metadata))
@@ -192,8 +184,8 @@ export class PatronService {
    * @return Observable
    */
   getCirculationInformations(patronPid: string): Observable<any> {
-    const url = [this._apiService.getEndpointByType('patrons'), patronPid, 'circulation_informations'].join('/');
-    return this._http.get(url);
+    const url = [this.apiService.getEndpointByType('patrons'), patronPid, 'circulation_informations'].join('/');
+    return this.httpClient.get(url);
   }
 
   /**
@@ -202,8 +194,8 @@ export class PatronService {
    * @return Observable
    */
   getOverduesPreview(patronPid: string): Observable<Array<{fees: LoanOverduePreview, loan: Loan}>> {
-    const url = [this._apiService.getEndpointByType('patrons'), patronPid, 'overdues', 'preview'].join('/');
-    return this._http.get(url).pipe(
+    const url = [this.apiService.getEndpointByType('patrons'), patronPid, 'overdues', 'preview'].join('/');
+    return this.httpClient.get(url).pipe(
       map((data: Array<any>) => data.map(record => {
         return {
           fees: record.fees as LoanOverduePreview,
@@ -220,11 +212,11 @@ export class PatronService {
    * @return Observable
    */
   private getLoans(query: string, sort?: string) {
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       'loans', query, 1, RecordService.MAX_REST_RESULTS_SIZE, [], {}, {Accept: 'application/rero+json'}, sort
     ).pipe(
       map((data: Record) => data.hits),
-      map(hits => this._recordService.totalHits(hits.total) === 0 ? [] : hits.hits)
+      map(hits => this.recordService.totalHits(hits.total) === 0 ? [] : hits.hits)
     );
   }
 
diff --git a/projects/admin/src/app/service/record-permission.service.ts b/projects/admin/src/app/service/record-permission.service.ts
index 2e9c03fd2..a4293ba44 100644
--- a/projects/admin/src/app/service/record-permission.service.ts
+++ b/projects/admin/src/app/service/record-permission.service.ts
@@ -17,7 +17,7 @@
 
 import { I18nPluralPipe, NgLocaleLocalization } from '@angular/common';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 import { RecordPermissions } from '../classes/permissions';
@@ -27,23 +27,16 @@ import { RecordPermissions } from '../classes/permissions';
 })
 export class RecordPermissionService {
 
+  private httpClient: HttpClient = inject(HttpClient);
+  private translateService: TranslateService = inject(TranslateService);
+
   /** http client options */
-  private _httpOptions = {
+  private httpOptions = {
     headers: new HttpHeaders({
       'Content-Type':  'application/json'
     })
   };
 
-  /**
-   * Constructor
-   * @param httpClient - HttpClient
-   * @param translateService - TranslateService
-   */
-  constructor(
-    private httpClient: HttpClient,
-    private translateService: TranslateService
-  ) { }
-
   /**
    * Get Permission by resource with pid
    * @param resource - string : the resource type
@@ -54,7 +47,7 @@ export class RecordPermissionService {
     const url = (pid == null)
       ? `/api/permissions/${resource}`
       : `/api/permissions/${resource}/${pid}`;
-    return this.httpClient.get<RecordPermissions>(url, this._httpOptions);
+    return this.httpClient.get<RecordPermissions>(url, this.httpOptions);
   }
 
 
@@ -63,7 +56,7 @@ export class RecordPermissionService {
    * @return an observable on allowed roles management
    */
   getRolesManagementPermissions(): Observable<any> {
-    return this.httpClient.get('api/patrons/roles_management_permissions', this._httpOptions);
+    return this.httpClient.get('api/patrons/roles_management_permissions', this.httpOptions);
   }
 
   /**
diff --git a/projects/admin/src/app/service/record.handle-error.service.ts b/projects/admin/src/app/service/record.handle-error.service.ts
index 45fa67d43..8c37cd666 100644
--- a/projects/admin/src/app/service/record.handle-error.service.ts
+++ b/projects/admin/src/app/service/record.handle-error.service.ts
@@ -15,11 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpErrorResponse } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
+import { inject, Injectable } from '@angular/core';
 import { RecordHandleErrorService as CoreRecordHandleErrorService } from '@rero/ng-core';
 import { NgxSpinnerService } from 'ngx-spinner';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
 import { NEVER, Observable } from 'rxjs';
 
 @Injectable({
@@ -27,19 +26,8 @@ import { NEVER, Observable } from 'rxjs';
 })
 export class RecordHandleErrorService extends CoreRecordHandleErrorService {
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   * @param toastrService - ToastrService
-   * @param spinner - NgxSpinnerService
-   */
-  constructor(
-    protected translateService: TranslateService,
-    private toastrService: ToastrService,
-    private spinner: NgxSpinnerService
-  ) {
-    super(translateService);
-  }
+  private spinner: NgxSpinnerService = inject(NgxSpinnerService);
+  private messageService = inject(MessageService);
 
   /**
    * Http handle Error
@@ -49,13 +37,16 @@ export class RecordHandleErrorService extends CoreRecordHandleErrorService {
    */
   handleError(error: HttpErrorResponse, resourceName?: string): Observable<never> {
     if (resourceName.startsWith('import_')) {
-      this.toastrService.error(
-        this.translateService.instant(
+      this.messageService.add({
+        severity: 'error',
+        summary: this.translateService.instant('Import from the web'),
+        detail: this.translateService.instant(
           'Your request to the external server has failed. Try again later ({{ statusCode }}).', {
             statusCode: error.status
         }),
-        this.translateService.instant('Import from the web')
-      );
+        sticky: true,
+        closable: true
+      });
       this.spinner.hide();
       return NEVER;
     } else {
diff --git a/projects/admin/src/app/service/resources-files.service.ts b/projects/admin/src/app/service/resources-files.service.ts
index f03fc2ce6..9bcb44430 100644
--- a/projects/admin/src/app/service/resources-files.service.ts
+++ b/projects/admin/src/app/service/resources-files.service.ts
@@ -25,14 +25,11 @@ import { BehaviorSubject, Observable, map, of, switchMap, tap } from 'rxjs';
   providedIn: 'root',
 })
 export class ResourcesFilesService {
-  // http service
-  private httpService = inject(HttpClient);
-  // ng-core record service
-  private recordService = inject(RecordService);
-  // ng-core api service
-  private apiService = inject(ApiService);
-  // user service to retrieve the current library
-  private userService = inject(UserService);
+
+  private httpService: HttpClient = inject(HttpClient);
+  private recordService: RecordService = inject(RecordService);
+  private apiService: ApiService = inject(ApiService);
+  private userService: UserService = inject(UserService);
 
   //api base URL
   baseUrl: string;
@@ -61,7 +58,7 @@ export class ResourcesFilesService {
    * @returns
    */
   getParentRecord(pid: string): Observable<Record> {
-    // get the currend library pid
+    // get the current library pid
     const libPid = this.userService.user.currentLibrary;
     // retrieve the file record attached to the document and the current library
     return this.httpService
@@ -100,7 +97,7 @@ export class ResourcesFilesService {
    * @param pid
    */
   createParentRecord(docPid: string): Observable<Record> {
-    // get the currend library pid
+    // get the current library pid
     const libPid = this.userService.user.currentLibrary;
     // create the file record attached to the current library pid and the given
     // document
@@ -186,7 +183,7 @@ export class ResourcesFilesService {
   /**
    * Replace an existing file.
    *
-   * as it is not supported by invenio-records-resouces we remove the old version
+   * as it is not supported by invenio-records-resources we remove the old version
    * and create a new one
    *
    * @param type Type of resource.
diff --git a/projects/admin/src/app/service/typeahead-factory.service.spec.ts b/projects/admin/src/app/service/typeahead-factory.service.spec.ts
deleted file mode 100644
index 91d8b75a0..000000000
--- a/projects/admin/src/app/service/typeahead-factory.service.spec.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { Injector } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { TypeaheadFactoryService } from './typeahead-factory.service';
-import { UiRemoteTypeaheadService } from './ui-remote-typeahead.service';
-
-
-describe('TypeaheadFactoryService', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [
-      HttpClientTestingModule,
-      TranslateModule.forRoot()
-    ],
-    providers: [
-      Injector,
-      UiRemoteTypeaheadService
-    ]
-  }));
-
-  it('should be created', () => {
-    const service: TypeaheadFactoryService = TestBed.inject(TypeaheadFactoryService);
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/projects/admin/src/app/service/typeahead-factory.service.ts b/projects/admin/src/app/service/typeahead-factory.service.ts
deleted file mode 100644
index dda1b988d..000000000
--- a/projects/admin/src/app/service/typeahead-factory.service.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { Injectable, InjectionToken, Injector } from '@angular/core';
-import { ITypeahead } from '../classes/typeahead/ITypeahead-interface';
-import { UiRemoteTypeaheadService } from './ui-remote-typeahead.service';
-
-// Pattern to find all typeahead into the dependency injection
-export const typeaheadToken = new InjectionToken<ITypeahead[]>
-  ('ITypeahead');
-
-@Injectable({
-  providedIn: 'root'
-})
-export class TypeaheadFactoryService {
-
-  /**
-   * Constructor
-   * @param _injector - Injector
-   * @param _uiRemoteTypeaheadService - UiRemoteTypeaheadService
-   */
-  constructor(
-    private _injector: Injector,
-    private _uiRemoteTypeaheadService: UiRemoteTypeaheadService
-    ) { }
-
-    /** Init */
-  init() {
-    const typeaheads = this._injector.get(typeaheadToken);
-    typeaheads.map((typeahead: ITypeahead) => {
-      this._uiRemoteTypeaheadService.addTypeahead(typeahead);
-    });
-  }
-}
diff --git a/projects/admin/src/app/service/ui-remote-typeahead.service.spec.ts b/projects/admin/src/app/service/ui-remote-typeahead.service.spec.ts
deleted file mode 100644
index bf4c825cc..000000000
--- a/projects/admin/src/app/service/ui-remote-typeahead.service.spec.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { TestBed } from '@angular/core/testing';
-import { TranslateFakeLoader, TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { RecordModule, TruncateTextPipe } from '@rero/ng-core';
-import { MainTitlePipe, SharedModule } from '@rero/shared';
-import { DocumentsTypeahead } from '../classes/typeahead/documents-typeahead';
-import { ItemsTypeahead } from '../classes/typeahead/items-typeahead';
-import { MefTypeahead } from '../classes/typeahead/mef-typeahead';
-import { PatronsTypeahead } from '../classes/typeahead/patrons-typeahead';
-import { UiRemoteTypeaheadService } from './ui-remote-typeahead.service';
-
-describe('UiRemoteTypeaheadService', () => {
-  beforeEach(() => TestBed.configureTestingModule({
-    imports: [
-      RecordModule,
-      HttpClientTestingModule,
-      TranslateModule.forRoot({
-        loader: { provide: TranslateLoader, useClass: TranslateFakeLoader }
-      }),
-      SharedModule
-    ],
-    providers: [
-      DocumentsTypeahead,
-      ItemsTypeahead,
-      MefTypeahead,
-      PatronsTypeahead,
-      TruncateTextPipe,
-      MainTitlePipe
-    ]
-  }));
-
-  it('should be created', () => {
-    const service: UiRemoteTypeaheadService = TestBed.inject(UiRemoteTypeaheadService);
-    expect(service).toBeTruthy();
-  });
-});
diff --git a/projects/admin/src/app/service/ui-remote-typeahead.service.ts b/projects/admin/src/app/service/ui-remote-typeahead.service.ts
deleted file mode 100644
index 7d6bd16a6..000000000
--- a/projects/admin/src/app/service/ui-remote-typeahead.service.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Injectable } from '@angular/core';
-import { ApiService, RecordService, RemoteTypeaheadService, SuggestionMetadata } from '@rero/ng-core';
-import { Observable } from 'rxjs';
-import { ITypeahead } from '../classes/typeahead/ITypeahead-interface';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class UiRemoteTypeaheadService extends RemoteTypeaheadService {
-
-  /** Custom typeahead Type */
-  private _typeaheadTypes = {};
-
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   * @param _apiService - APIService
-   */
-  constructor(
-    protected _recordService: RecordService,
-    protected _apiService: ApiService
-  ) {
-    super(_recordService, _apiService);
-  }
-
-  /**
-   * Add a custom typeahead
-   * @param typeahead - ITypeahead
-   */
-  addTypeahead(typeahead: ITypeahead) {
-    const typeaheadName = typeahead.getName();
-    if (!(typeaheadName in this._typeaheadTypes)) {
-      this._typeaheadTypes[typeaheadName] = typeahead;
-    }
-  }
-
-  /**
-   * Convert the input value (i.e. $ref url) into a template html code
-   * @param options - remote typeahead options
-   * @param value - formControl value i.e. $ref value
-   * @returns Observable of string - html template representation of the value.
-   */
-  getValueAsHTML(options: any, value: string): Observable<string> {
-    return (options.hasOwnProperty('type') && options.type in this._typeaheadTypes)
-    ? this._typeaheadTypes[options.type].getValueAsHTML(options, value)
-    : super.getValueAsHTML(options, value);
-  }
-
-  /**
-   * Get the suggestions list given a search query
-   * @param options - remote typeahead options
-   * @param query - search query to retrieve the suggestions list
-   * @param numberOfSuggestions - the max number of suggestion to return
-   * @param currentPid - current edited record PID or null in case of add.
-   * @returns - an observable of the list of suggestions.
-   */
-  getSuggestions(options: any, query: string, numberOfSuggestions: number, currentPid: string): Observable<Array<SuggestionMetadata>> {
-    return (options.hasOwnProperty('type') && options.type in this._typeaheadTypes)
-      ? this._typeaheadTypes[options.type].getSuggestions(options, query, numberOfSuggestions)
-      : super.getSuggestions(options, query, numberOfSuggestions, currentPid);
-  }
-}
diff --git a/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.html b/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.html
index d570844c6..3bfaf7a92 100644
--- a/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.html
+++ b/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.html
@@ -15,14 +15,7 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="modal-header">
-  <h4 class="modal-title pull-left" [noContent]="noTitle"><ng-content select="[title]"></ng-content></h4>
-  <ng-template #noTitle><h4 class="modal-title pull-left" translate>Preview email</h4></ng-template>
-  <button type="button" class="btn-close close pull-right" (click)="close()" aria-label="Close">
-    <span aria-hidden="true" class="visually-hidden">&times;</span>
-  </button>
-</div>
-<div class="modal-body">
+<div>
   <!-- PREVIEW TOP -->
   <ng-content select="[headerMessage]"></ng-content>
   @if (previewPosition === 'top') {
@@ -35,45 +28,38 @@ <h5 translate>Who do you want to send the message to?</h5>
 
   <!-- SUGGESTED EMAILS -->
   @if (emails.length > 0) {
-    <div class="card">
-      <div class="card-header">
+    <p-card>
+      <ng-template pTemplate="header">
         @if (emails.length < 2) {
           {{ 'Suggested email address' | translate }}
         } @else {
           {{ 'Suggested email addresses' | translate }}
         }
         <small class="ml-1">(<span class="font-italic" translate>Drag and drop</span>)</small>
-      </div>
-      <div class="card-body py-2">
-        <ul class="list-inline mb-1">
-          @for (email of emails; track email) {
-            <li class="list-inline-item mt-2">
-              <p-tag pDraggable="emails" (onDragStart)="dragStart(email)" (onDragEnd)="dragEnd()" icon="pi pi-user" [value]="email"></p-tag>
-            </li>
-          }
-        </ul>
-      </div>
-    </div>
+      </ng-template>
+      <ul class="list-inline mb-1">
+        @for (email of emails; track email) {
+          <li class="list-inline-item mt-2">
+            <p-tag pDraggable="emails" (onDragStart)="dragStart(email)" (onDragEnd)="dragEnd()" icon="pi pi-user" [value]="email"></p-tag>
+          </li>
+        }
+      </ul>
+    </p-card>
   }
 
   <!-- RECIPIENTS -->
-  <div class="card mt-2">
-    <div class="card-header">
-      {{ 'Recipients' | translate }}
-    </div>
-    <div class="card-body py-2 container">
-      <div class="row">
-        @for (type of emailTypes; track type) {
-          <div class="col-2 pt-3 label-title mb-2" [class.field-required]="mandatoryEmailTypes.includes(type)">
-            {{ ('email_' + type) | translate }}
-          </div>
-          <div class="col-10 mb-2">
-            <p-chips class="p-fluid" [inputId]="type" pDroppable="emails" (onDrop)="drop($event)" [(ngModel)]="recipients[type]" [addOnBlur]="true"></p-chips>
-          </div>
-        }
-      </div>
+  <p-card styleClass="mt-2" [header]="'Recipients' | translate">
+    <div class="grid">
+      @for (type of emailTypes; track type) {
+        <div class="col-2 pt-3 label-title mb-2" [class.field-required]="mandatoryEmailTypes.includes(type)">
+          {{ ('email_' + type) | translate }}
+        </div>
+        <div class="col-10 mb-2 drop-column">
+          <p-chips class="p-fluid" [inputId]="type" pDroppable="emails" (onDrop)="drop($event)" [(ngModel)]="recipients[type]" [addOnBlur]="true"></p-chips>
+        </div>
+      }
     </div>
-  </div>
+  </p-card>
 
   <!-- PREVIEW BOTTOM -->
   @if (previewPosition === 'bottom') {
@@ -82,7 +68,7 @@ <h5 translate>Message</h5>
     <pre [innerHTML]="preview.trim() | nl2br"></pre>
   }
 </div>
-<div class="modal-footer">
-  <button class="btn btn-outline-danger btn-sm" (click)="close()" aria-label="Close" translate>Cancel</button>
-  <button [disabled]="!formValid()" class="btn btn-primary btn-sm" aria-label="Confirm" (click)="confirm()" translate>Confirm</button>
+<div class="flex justify-content-end mt-4">
+  <p-button class="mr-1" severity="danger" [outlined]="true" [label]="'Cancel'|translate" (onClick)="close()" aria-label="Close"/>
+  <p-button [label]="'Confirm'|translate" [disabled]="!formValid()" (onClick)="confirm()" />
 </div>
diff --git a/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.scss b/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.scss
index d8c48582f..e43e68077 100644
--- a/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.scss
+++ b/projects/admin/src/app/shared/preview-email/component/preview-email/preview-email.component.scss
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
+ * Copyright (C) 2023-2024 RERO
  * Copyright (C) 2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -40,3 +40,7 @@ h5 {
 .p-element {
   cursor: grab;
 }
+
+[pDraggable] {
+  cursor: move;
+}
diff --git a/projects/admin/src/app/shared/primeng-import/primeng-import.module.ts b/projects/admin/src/app/shared/primeng-import/primeng-import.module.ts
index cfb061219..eae08b150 100644
--- a/projects/admin/src/app/shared/primeng-import/primeng-import.module.ts
+++ b/projects/admin/src/app/shared/primeng-import/primeng-import.module.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -17,23 +17,32 @@
  */
 
 import { NgModule } from '@angular/core';
+import { NgCoreFormlyRemoteAutocompleteModule } from '@rero/ng-core';
 import { AccordionModule } from 'primeng/accordion';
+import { AutoCompleteModule } from 'primeng/autocomplete';
 import { ChipsModule } from 'primeng/chips';
 import { DividerModule } from 'primeng/divider';
 import { DragDropModule } from 'primeng/dragdrop';
 import { DropdownModule } from 'primeng/dropdown';
+import { InputGroupModule } from 'primeng/inputgroup';
+import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
 import { InputNumberModule } from 'primeng/inputnumber';
 import { InputSwitchModule } from 'primeng/inputswitch';
 import { InputTextModule } from 'primeng/inputtext';
+import { MessagesModule } from 'primeng/messages';
 import { PanelModule } from 'primeng/panel';
+import { RadioButtonModule } from 'primeng/radiobutton';
 import { SkeletonModule } from 'primeng/skeleton';
+import { TabViewModule } from 'primeng/tabview';
 import { TagModule } from 'primeng/tag';
 import { TooltipModule } from 'primeng/tooltip';
-import { InputGroupModule } from 'primeng/inputgroup';
-import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
+import { CardModule } from 'primeng/card';
+import { TableModule } from 'primeng/table';
+import { FieldsetModule } from 'primeng/fieldset';
 
 @NgModule({
   exports: [
+    AutoCompleteModule,
     AccordionModule,
     ChipsModule,
     DividerModule,
@@ -47,7 +56,14 @@ import { InputGroupAddonModule } from 'primeng/inputgroupaddon';
     PanelModule,
     SkeletonModule,
     TagModule,
-    TooltipModule
+    TooltipModule,
+    NgCoreFormlyRemoteAutocompleteModule,
+    RadioButtonModule,
+    MessagesModule,
+    TabViewModule,
+    CardModule,
+    TableModule,
+    FieldsetModule
   ]
 })
 export class PrimengImportModule { }
diff --git a/projects/admin/src/app/utils/permissions.ts b/projects/admin/src/app/utils/permissions.ts
index 5deaab12a..c295f3bbf 100644
--- a/projects/admin/src/app/utils/permissions.ts
+++ b/projects/admin/src/app/utils/permissions.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,17 +16,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { UserService } from '@rero/shared';
 import { RecordPermission, RecordPermissions } from '../classes/permissions';
 
 @Injectable()
 export class CurrentLibraryPermissionValidator {
 
-  /** Constructor */
-  constructor(
-    private _userService: UserService
-  ){ }
+  private userService: UserService = inject(UserService);
 
   /**
    * Update the permissions analyzing the current library. If the library isn't
@@ -35,7 +32,7 @@ export class CurrentLibraryPermissionValidator {
    * @param ownerLibraryPid: the related object owner library pid.
    */
   validate(permissions: RecordPermissions, ownerLibraryPid: string){
-    if (this._userService.user.currentLibrary !== ownerLibraryPid) {
+    if (this.userService.user.currentLibrary !== ownerLibraryPid) {
       const disabledPermission: RecordPermission = {
         can: false,
         reasons: {
diff --git a/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.ts b/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.ts
index a088bdaf5..757178b9e 100644
--- a/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.ts
+++ b/projects/admin/src/app/widgets/custom-shortcut-help/custom-shortcut-help.component.ts
@@ -15,11 +15,10 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { HotkeysService } from '@ngneat/hotkeys';
 import { TranslateService } from '@ngx-translate/core';
-import { BsModalRef } from 'ngx-bootstrap/modal';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
 
 @Component({
   selector: 'admin-custom-shortcut-help',
@@ -28,28 +27,17 @@ import { BsModalRef } from 'ngx-bootstrap/modal';
 })
 export class CustomShortcutHelpComponent {
 
+  private hotKeysService: HotkeysService = inject(HotkeysService);
+  private translateService: TranslateService = inject(TranslateService);
+  private ref = inject(DynamicDialogRef);
+
   /** the title of the modal window */
   @Input() title = this.translateService.instant('Available Shortcuts');
+
   /** the list of implemented shortcuts */
   hotkeys = this.hotKeysService.getShortcuts();
 
-  /**
-   * Constructor
-   * @param hotKeysService - HotkeysService
-   * @param bsModalRef - BsModalRef
-   * @param translateService - TranslateService
-   */
-  constructor(
-    private hotKeysService: HotkeysService,
-    protected bsModalRef: BsModalRef,
-    private translateService: TranslateService
-  ) {}
-
-  /**
-   * Close the modal
-   */
   closeModal() {
-    this.bsModalRef.hide();
+    this.ref.close();
   }
-
 }
diff --git a/projects/admin/src/app/widgets/frontpage/frontpage.component.ts b/projects/admin/src/app/widgets/frontpage/frontpage.component.ts
index 0aeab96ad..ae0d6e7dd 100644
--- a/projects/admin/src/app/widgets/frontpage/frontpage.component.ts
+++ b/projects/admin/src/app/widgets/frontpage/frontpage.component.ts
@@ -14,7 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Component } from '@angular/core';
 
 @Component({
diff --git a/projects/public-holdings-items/src/app/app-initializer.service.ts b/projects/public-holdings-items/src/app/app-initializer.service.ts
index 1f9f8fd66..0a02f8ed7 100644
--- a/projects/public-holdings-items/src/app/app-initializer.service.ts
+++ b/projects/public-holdings-items/src/app/app-initializer.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,47 +15,36 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@rero/ng-core';
+import { inject, Injectable } from '@angular/core';
 import { AppSettingsService, UserService } from '@rero/shared';
 import { Observable } from 'rxjs';
 import { switchMap } from 'rxjs/operators';
 import { AppConfigService } from './app-config-service.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AppInitializerService {
 
-  /**
-   * Constructor
-   * @param _translateService - TranslateService
-   * @param _userService - UserService
-   * @param _appSettingsService - AppSettingsService
-   * @param _appConfigService - AppConfigService
-   */
-  constructor(
-    private _translateService: TranslateService,
-    private _userService: UserService,
-    private _appSettingsService: AppSettingsService,
-    private _appConfigService: AppConfigService
-  ) { }
+  private translateService: TranslateService = inject(TranslateService);
+  private userService: UserService = inject(UserService);
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+  private appConfigService: AppConfigService = inject(AppConfigService);
 
-  /** load */
   load(): Observable<any> {
-    return this._userService.load().pipe(
+    return this.userService.load().pipe(
       switchMap(() => this.initTranslateService())
     );
   }
 
-  /** Initialize Translate Service */
   private initTranslateService(): Observable<any> {
-    let language = this._appSettingsService.settings.language;
+    let {language} = this.appSettingsService.settings;
     if (language == null) {
-      const browserLang = this._translateService.getBrowserLang();
-      language = browserLang.match(this._appConfigService.languages.join('|')) ?
-        browserLang : this._appConfigService.defaultLanguage;
+      const browserLang = this.translateService.getBrowserLang();
+      language = browserLang.match(this.appConfigService.languages.join('|')) ?
+        browserLang : this.appConfigService.defaultLanguage;
     }
-    return this._translateService.setLanguage(language);
+    return this.translateService.use(language);
   }
 }
diff --git a/projects/public-holdings-items/src/app/app.module.ts b/projects/public-holdings-items/src/app/app.module.ts
index b83998a3e..a0c79a181 100644
--- a/projects/public-holdings-items/src/app/app.module.ts
+++ b/projects/public-holdings-items/src/app/app.module.ts
@@ -16,7 +16,7 @@
  */
 
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, Injector, NgModule } from '@angular/core';
+import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, inject, Injector, NgModule } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -26,10 +26,9 @@ import { FormlyModule } from '@ngx-formly/core';
 import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
 import { LoadingBarModule } from '@ngx-loading-bar/core';
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
-import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { CoreConfigService, CoreModule, RecordModule, TranslateLoader } from '@rero/ng-core';
+import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CoreConfigService, CoreModule, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
 import { SharedModule } from '@rero/shared';
-import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { HoldingComponent } from 'projects/public-search/src/app/document-detail/holdings/holding/holding.component';
 import { HoldingsComponent } from 'projects/public-search/src/app/document-detail/holdings/holdings.component';
 import { ItemsComponent } from 'projects/public-search/src/app/document-detail/holdings/items/items.component';
@@ -38,13 +37,13 @@ import { PickupLocationComponent } from 'projects/public-search/src/app/document
 import { RequestComponent } from 'projects/public-search/src/app/document-detail/request/request.component';
 import { AppConfigService } from './app-config-service.service';
 import { AppInitializerService } from './app-initializer.service';
+import { Observable } from 'rxjs';
 
 /** function to instantiate the application  */
-export function appInitFactory(appInitializerService: AppInitializerService) {
-  return () => appInitializerService.load().toPromise();
+export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
+  return () => appInitializerService.load();
 }
 
-
 @NgModule({
     declarations: [
         HoldingComponent,
@@ -73,12 +72,12 @@ export function appInitFactory(appInitializerService: AppInitializerService) {
             },
             isolate: false
         }),
-        TypeaheadModule.forRoot(),
         SharedModule,
         LoadingBarHttpClientModule,
         LoadingBarModule
     ],
     providers: [
+        { provide: TranslateService, useClass: NgCoreTranslateService },
         { provide: APP_INITIALIZER, useFactory: appInitFactory, deps: [AppInitializerService], multi: true },
         { provide: CoreConfigService, useClass: AppConfigService }
     ],
@@ -88,10 +87,9 @@ export function appInitFactory(appInitializerService: AppInitializerService) {
 })
 export class AppModule implements DoBootstrap {
 
-  constructor(private injector: Injector) {
-  }
+  private injector: Injector = inject(Injector);
 
-  ngDoBootstrap() {
+  ngDoBootstrap(): void {
     if (!customElements.get('public-search-holdings')) {
       const searchBar = createCustomElement(HoldingsComponent, { injector: this.injector });
       customElements.define('public-search-holdings', searchBar);
diff --git a/projects/public-patron-profile/src/app/app-initializer.service.ts b/projects/public-patron-profile/src/app/app-initializer.service.ts
index c3bab2c1c..afcf354fd 100644
--- a/projects/public-patron-profile/src/app/app-initializer.service.ts
+++ b/projects/public-patron-profile/src/app/app-initializer.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,8 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@rero/ng-core';
+import { inject, Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { AppSettingsService, UserService } from '@rero/shared';
 import { AppConfigService } from 'projects/admin/src/app/service/app-config.service';
 import { PatronProfileMenuService } from 'projects/public-search/src/app/patron-profile/patron-profile-menu.service';
@@ -28,37 +28,28 @@ import { switchMap, tap } from 'rxjs/operators';
 })
 export class AppInitializerService {
 
-  /**
-   * Constructor
-   * @param _userService - UserService
-   * @param _patronProfileMenuService - PatronProfileMenuService
-   */
-  constructor(
-    private _userService: UserService,
-    private _patronProfileMenuService: PatronProfileMenuService,
-    private _translateService: TranslateService,
-    private _appSettingsService: AppSettingsService,
-    private _appConfigService: AppConfigService
-  ) { }
+  private userService: UserService = inject(UserService);
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+  private translateService: TranslateService = inject(TranslateService);
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+  private appConfigService: AppConfigService = inject(AppConfigService);
 
-  /** load */
   load(): Observable<any> {
-    return this._userService.load().pipe(
+    return this.userService.load().pipe(
       tap(() => {
-        this._patronProfileMenuService.init();
+        this.patronProfileMenuService.init();
       }),
       switchMap(() => this.initTranslateService())
     );
   }
 
-    /** Initialize Translate Service */
   private initTranslateService(): Observable<any> {
-    let language = this._appSettingsService.settings.language;
+    let {language} = this.appSettingsService.settings;
     if (language == null) {
-      const browserLang = this._translateService.getBrowserLang();
-      language = browserLang.match(this._appConfigService.languages.join('|')) ?
-        browserLang : this._appConfigService.defaultLanguage;
+      const browserLang = this.translateService.getBrowserLang();
+      language = browserLang.match(this.appConfigService.languages.join('|')) ?
+        browserLang : this.appConfigService.defaultLanguage;
     }
-    return this._translateService.setLanguage(language);
+    return this.translateService.use(language);
   }
 }
diff --git a/projects/public-patron-profile/src/app/app.module.ts b/projects/public-patron-profile/src/app/app.module.ts
index fad31462b..72384ba51 100644
--- a/projects/public-patron-profile/src/app/app.module.ts
+++ b/projects/public-patron-profile/src/app/app.module.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient, HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
-import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, Injector, NgModule } from '@angular/core';
+import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, inject, Injector, NgModule } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -25,13 +25,9 @@ import { FormlyModule } from '@ngx-formly/core';
 import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
 import { LoadingBarModule } from '@ngx-loading-bar/core';
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
-import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { CoreConfigService, CoreModule, RecordModule, TranslateLoader } from '@rero/ng-core';
+import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CoreConfigService, CoreModule, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
 import { SharedModule } from '@rero/shared';
-import { CollapseModule } from 'ngx-bootstrap/collapse';
-import { TabsModule } from 'ngx-bootstrap/tabs';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { PatronProfileDocumentComponent } from 'projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component';
 import { PatronProfileFeeComponent } from 'projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component';
 import {
@@ -59,16 +55,15 @@ import { ArrayTranslatePipe } from 'projects/public-search/src/app/pipe/array-tr
 import { JournalVolumePipe } from 'projects/public-search/src/app/pipe/journal-volume.pipe';
 import { LoanStatusBadgePipe } from 'projects/public-search/src/app/pipe/loan-status-badge.pipe';
 import { StatusBadgePipe } from 'projects/public-search/src/app/pipe/status-badge.pipe';
+import { Observable } from 'rxjs';
 import { AppConfigService } from './app-config-service.service';
 import { AppInitializerService } from './app-initializer.service';
 
-
 /** function to instantiate the application  */
-export function appInitFactory(appInitializerService: AppInitializerService) {
-  return () => appInitializerService.load().toPromise();
+export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
+  return () => appInitializerService.load();
 }
 
-
 @NgModule({
   declarations: [
     PatronProfileComponent,
@@ -111,15 +106,12 @@ export function appInitFactory(appInitializerService: AppInitializerService) {
       },
       isolate: false
     }),
-    TypeaheadModule.forRoot(),
-    TabsModule.forRoot(),
-    TooltipModule.forRoot(),
-    CollapseModule.forRoot(),
     SharedModule,
     LoadingBarHttpClientModule,
     LoadingBarModule
   ],
   providers: [
+    { provide: TranslateService, useClass: NgCoreTranslateService },
     { provide: APP_INITIALIZER, useFactory: appInitFactory, deps: [AppInitializerService], multi: true },
     { provide: CoreConfigService, useClass: AppConfigService }
   ],
@@ -129,10 +121,9 @@ export function appInitFactory(appInitializerService: AppInitializerService) {
 })
 export class AppModule implements DoBootstrap {
 
-  constructor(private injector: Injector) {
-  }
+  private injector: Injector = inject(Injector);
 
-  ngDoBootstrap() {
+  ngDoBootstrap(): void {
     if (!customElements.get('public-patron-profile')) {
       const element = createCustomElement(PatronProfileComponent, { injector: this.injector });
       customElements.define('public-patron-profile', element);
diff --git a/projects/public-search/src/app/api/document-api.service.ts b/projects/public-search/src/app/api/document-api.service.ts
index d684f5abb..db049413b 100644
--- a/projects/public-search/src/app/api/document-api.service.ts
+++ b/projects/public-search/src/app/api/document-api.service.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { BaseApi, IAvailability, IAvailabilityService } from '@rero/shared';
 import { Observable } from 'rxjs';
 import { AppConfigService } from '../app-config.service';
@@ -26,17 +26,8 @@ import { AppConfigService } from '../app-config.service';
 })
 export class DocumentApiService extends BaseApi implements IAvailabilityService {
 
-  /**
-   * Constructor
-   * @param _httpClient - HttpClient
-   * @param _appConfigService - AppConfigService
-   */
-  constructor(
-    private _httpClient: HttpClient,
-    private _appConfigService: AppConfigService
-  ) {
-    super();
-  }
+  private httpClient: HttpClient = inject(HttpClient);
+  private appConfigService: AppConfigService = inject(AppConfigService);
 
   /**
    * Get availability by document pid
@@ -44,10 +35,10 @@ export class DocumentApiService extends BaseApi implements IAvailabilityService
    * @returns Observable of availability data
    */
   getAvailability(pid: string, viewcode: string = null): Observable<IAvailability> {
-    let url = `${this._appConfigService.apiEndpointPrefix}/document/${pid}/availability`;
+    let url = `${this.appConfigService.apiEndpointPrefix}/document/${pid}/availability`;
     if (viewcode) {
       url += `?view_code=${viewcode}`;
     }
-    return this._httpClient.get<IAvailability>(url);
+    return this.httpClient.get<IAvailability>(url);
   }
 }
diff --git a/projects/public-search/src/app/api/holdings-api.service.ts b/projects/public-search/src/app/api/holdings-api.service.ts
index 6c72a56c8..84b038285 100644
--- a/projects/public-search/src/app/api/holdings-api.service.ts
+++ b/projects/public-search/src/app/api/holdings-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient, HttpParams } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { BaseApi, IAvailability, IAvailabilityService } from '@rero/shared';
 import { Observable } from 'rxjs';
@@ -30,19 +30,9 @@ import { AppConfigService } from '../app-config.service';
 })
 export class HoldingsApiService extends BaseApi implements IAvailabilityService {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   * @param _httpClient - HttpClient
-   * @param _appConfigService - AppConfigService
-   */
-  constructor(
-    private _recordService: RecordService,
-    private _httpClient: HttpClient,
-    private _appConfigService: AppConfigService
-  ) {
-    super();
-  }
+  private recordService: RecordService = inject(RecordService);
+  private httpClient: HttpClient = inject(HttpClient);
+  private appConfigService: AppConfigService = inject(AppConfigService);
 
   /**
    * Get Holdings by document pid and viewcode
@@ -54,7 +44,7 @@ export class HoldingsApiService extends BaseApi implements IAvailabilityService
     documentPid: string, viewcode: string, page: number, itemsPerPage: number = 5): Observable<QueryResponse> {
     const query = `document.pid:${documentPid}
     AND ((holdings_type:standard AND public_items_count:[1 TO *]) OR holdings_type:serial)`;
-    return this._recordService
+    return this.recordService
     .getRecords(
       'holdings', query, page, itemsPerPage, undefined, { view: viewcode },
       BaseApi.reroJsonheaders, 'organisation_library_location'
@@ -69,11 +59,11 @@ export class HoldingsApiService extends BaseApi implements IAvailabilityService
    * @return Observable - Check holding can be requested
    */
   canRequest(holdingPid: string, libraryPid: string, patronBarcode: string): Observable<HoldingCanRequest> {
-    const url = `${this._appConfigService.apiEndpointPrefix}/holding/${holdingPid}/can_request`;
+    const url = `${this.appConfigService.apiEndpointPrefix}/holding/${holdingPid}/can_request`;
     const params = new HttpParams()
       .set('library_pid', libraryPid)
       .set('patron_barcode', patronBarcode);
-    return this._httpClient.get<HoldingCanRequest>(url, { params });
+    return this.httpClient.get<HoldingCanRequest>(url, { params });
   }
 
   /**
@@ -82,8 +72,8 @@ export class HoldingsApiService extends BaseApi implements IAvailabilityService
    * @return Observable - Create provisional item
    */
   request(data: { holding_pid: string, pickup_location_pid: string, description: string }): Observable<HoldingPatronRequest> {
-    const url = `${this._appConfigService.apiEndpointPrefix}/holding/patron_request`;
-    return this._httpClient.post<HoldingPatronRequest>(url, data);
+    const url = `${this.appConfigService.apiEndpointPrefix}/holding/patron_request`;
+    return this.httpClient.post<HoldingPatronRequest>(url, data);
   }
 
   /**
@@ -92,7 +82,7 @@ export class HoldingsApiService extends BaseApi implements IAvailabilityService
    * @returns Observable of availability data
    */
   getAvailability(pid: string): Observable<IAvailability> {
-    const url = `${this._appConfigService.apiEndpointPrefix}/holding/${pid}/availability`;
-    return this._httpClient.get<IAvailability>(url);
+    const url = `${this.appConfigService.apiEndpointPrefix}/holding/${pid}/availability`;
+    return this.httpClient.get<IAvailability>(url);
   }
 }
diff --git a/projects/public-search/src/app/api/ill-request-api.service.ts b/projects/public-search/src/app/api/ill-request-api.service.ts
index f1b944fc2..4484ef22e 100644
--- a/projects/public-search/src/app/api/ill-request-api.service.ts
+++ b/projects/public-search/src/app/api/ill-request-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { Error } from '@rero/ng-core/lib/error/error';
 import { BaseApi } from '@rero/shared';
@@ -25,13 +25,7 @@ import { Observable } from 'rxjs';
 })
 export class IllRequestApiService extends BaseApi {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) {
-    super();
-  }
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Get ill request
@@ -48,7 +42,7 @@ export class IllRequestApiService extends BaseApi {
     headers = BaseApi.reroJsonheaders
   ): Observable<Record | Error> {
     const query = `patron.pid:${patronPid}`;
-    return this._recordService.getRecords('ill_requests', query, page, itemsPerPage, undefined, undefined, headers);
+    return this.recordService.getRecords('ill_requests', query, page, itemsPerPage, undefined, undefined, headers);
   }
 
   /**
@@ -68,6 +62,6 @@ export class IllRequestApiService extends BaseApi {
     filters?: {[key: string]: string}
   ): Observable<Record | Error> {
     const query = `patron.pid:${patronPid}`;
-    return this._recordService.getRecords('ill_requests', query, page, itemsPerPage, undefined, filters, headers, sort);
+    return this.recordService.getRecords('ill_requests', query, page, itemsPerPage, undefined, filters, headers, sort);
   }
 }
diff --git a/projects/public-search/src/app/api/item-api.service.ts b/projects/public-search/src/app/api/item-api.service.ts
index ee8bca413..ad5308097 100644
--- a/projects/public-search/src/app/api/item-api.service.ts
+++ b/projects/public-search/src/app/api/item-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { BaseApi, IAvailability, IAvailabilityService, IssueItemStatus } from '@rero/shared';
 import { Observable } from 'rxjs';
@@ -29,19 +29,9 @@ import { AppConfigService } from '../app-config.service';
 })
 export class ItemApiService extends BaseApi implements IAvailabilityService {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   * @param _httpClient - HttpClient
-   * @param _appConfigService - AppConfigService
-   */
-  constructor(
-    private _recordService: RecordService,
-    private _httpClient: HttpClient,
-    private _appConfigService: AppConfigService
-  ) {
-    super();
-  }
+  private recordService: RecordService = inject(RecordService);
+  private httpClient: HttpClient = inject(HttpClient);
+  private appConfigService: AppConfigService = inject(AppConfigService);
 
   /**
    * Get items by holdings pid and viewcode
@@ -59,7 +49,7 @@ export class ItemApiService extends BaseApi implements IAvailabilityService {
     const query = (holdings.metadata.holdings_type === 'serial')
       ? `holding.pid:${holdings.metadata.pid} AND issue.status:${IssueItemStatus.RECEIVED}`
       : `holding.pid:${holdings.metadata.pid}`;
-    return this._recordService
+    return this.recordService
       .getRecords('items', query, page, itemsPerPage, undefined, { view: viewcode }, BaseApi.reroJsonheaders, sort)
       .pipe(map((response: Record) => response.hits));
   }
@@ -72,9 +62,9 @@ export class ItemApiService extends BaseApi implements IAvailabilityService {
    * @return Observable
    */
   canRequest(itemPid: string, libraryPid: string, patronBarcode: string): Observable<any> {
-    return this._httpClient
+    return this.httpClient
       .get<any>(
-        `${this._appConfigService.apiEndpointPrefix}/item/${itemPid}/can_request?library_pid=${libraryPid}&patron_barcode=${patronBarcode}`
+        `${this.appConfigService.apiEndpointPrefix}/item/${itemPid}/can_request?library_pid=${libraryPid}&patron_barcode=${patronBarcode}`
       );
   }
 
@@ -84,7 +74,7 @@ export class ItemApiService extends BaseApi implements IAvailabilityService {
    * @return Observable
    */
   request(data: { item_pid: string, pickup_location_pid: string }): Observable<any> {
-    return this._httpClient.post(`${this._appConfigService.apiEndpointPrefix}/item/patron_request`, data);
+    return this.httpClient.post(`${this.appConfigService.apiEndpointPrefix}/item/patron_request`, data);
   }
 
   /**
@@ -93,7 +83,7 @@ export class ItemApiService extends BaseApi implements IAvailabilityService {
    * @returns Observable of availability data
    */
   getAvailability(pid: string): Observable<IAvailability> {
-    const url = `${this._appConfigService.apiEndpointPrefix}/item/${pid}/availability?more_info=1`;
-    return this._httpClient.get<IAvailability>(url);
+    const url = `${this.appConfigService.apiEndpointPrefix}/item/${pid}/availability?more_info=1`;
+    return this.httpClient.get<IAvailability>(url);
   }
 }
diff --git a/projects/public-search/src/app/api/loan-api.service.ts b/projects/public-search/src/app/api/loan-api.service.ts
index 1895ddeba..4faadff09 100644
--- a/projects/public-search/src/app/api/loan-api.service.ts
+++ b/projects/public-search/src/app/api/loan-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { LoanOverduePreview } from '@app/admin/classes/loans';
 import { ApiService, Error, Record, RecordService } from '@rero/ng-core';
 import { BaseApi } from '@rero/shared';
@@ -27,19 +27,9 @@ import { catchError, map } from 'rxjs/operators';
 })
 export class LoanApiService extends BaseApi {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   * @param _httpClient - HttpClient
-   * @param _apiService - ApiService
-   */
-  constructor(
-    private _recordService: RecordService,
-    private _httpClient: HttpClient,
-    private _apiService: ApiService
-  ) {
-    super();
-  }
+  private recordService: RecordService = inject(RecordService);
+  private httpClient: HttpClient = inject(HttpClient);
+  private apiService: ApiService = inject(ApiService);
 
   /**
    * Get loan
@@ -55,7 +45,7 @@ export class LoanApiService extends BaseApi {
     sort?: string
   ): Observable<Record | Error> {
     const loanStates = ['ITEM_ON_LOAN'];
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       'loans', this._patronStateQuery(patronPid, loanStates), page, itemsPerPage,
       undefined, undefined, headers, sort
     );
@@ -74,7 +64,7 @@ export class LoanApiService extends BaseApi {
     itemsPerPage: number = 10, headers = BaseApi.reroJsonheaders
   ): Observable<Record | Error> {
     const requestStates = ['PENDING', 'ITEM_AT_DESK', 'ITEM_IN_TRANSIT_FOR_PICKUP'];
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       'loans', this._patronStateQuery(patronPid, requestStates), page, itemsPerPage,
       undefined, undefined, headers
     );
@@ -86,7 +76,7 @@ export class LoanApiService extends BaseApi {
    * @returns Observable
    */
   canExtend(loanPid: string): Observable<CanExtend> {
-    return this._httpClient.get(`/api/loan/${loanPid}/can_extend`)
+    return this.httpClient.get(`/api/loan/${loanPid}/can_extend`)
       .pipe(
         catchError(() => of(undefined)),
         map((response: any) => response)
@@ -99,7 +89,7 @@ export class LoanApiService extends BaseApi {
    * @return Observable
    */
   renew(data: { pid: string, item_pid: string, transaction_location_pid: string, transaction_user_pid: string }): Observable<any> {
-    return this._httpClient.post('/api/item/extend_loan', data)
+    return this.httpClient.post('/api/item/extend_loan', data)
       .pipe(
         catchError(() => of(undefined)),
         map((response: any) => {
@@ -116,7 +106,7 @@ export class LoanApiService extends BaseApi {
    * @return Observable
    */
   cancel(data: { pid: string, transaction_location_pid: string, transaction_user_pid: string }): Observable<any> {
-    return this._httpClient.post('/api/item/cancel_item_request', data)
+    return this.httpClient.post('/api/item/cancel_item_request', data)
       .pipe(
         catchError(() => of(undefined)),
         map((response: any) => {
@@ -133,9 +123,9 @@ export class LoanApiService extends BaseApi {
    * @return Observable of LoanOverduePreview
    */
   getPreviewOverdue(loanPid: string): Observable<LoanOverduePreview> {
-    const loanApiUrl = this._apiService.getEndpointByType('loan');
+    const loanApiUrl = this.apiService.getEndpointByType('loan');
     const url = `${loanApiUrl}/${loanPid}/overdue/preview`;
-    return this._httpClient.get<LoanOverduePreview>(url);
+    return this.httpClient.get<LoanOverduePreview>(url);
   }
 
   /**
diff --git a/projects/public-search/src/app/api/location-api.service.ts b/projects/public-search/src/app/api/location-api.service.ts
index af35c4609..1a1aec0d3 100644
--- a/projects/public-search/src/app/api/location-api.service.ts
+++ b/projects/public-search/src/app/api/location-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { BaseApi } from '@rero/shared';
 import { map } from 'rxjs/operators';
 
@@ -24,15 +24,7 @@ import { map } from 'rxjs/operators';
 })
 export class LocationApiService extends BaseApi {
 
-  /**
-   * Constructor
-   * @param _httpClient - HttpClient
-   */
-  constructor(
-    private _httpClient: HttpClient
-  ) {
-    super();
-  }
+  private httpClient: HttpClient = inject(HttpClient);
 
   /**
    * Get pickup locations by viewcode
@@ -41,7 +33,7 @@ export class LocationApiService extends BaseApi {
    * @return Observable - locations pids and pickup_names for item or holding
    */
   getPickupLocationsByRecordId(recordType: string, recordPid: string) {
-    return this._httpClient
+    return this.httpClient
       .get<any>(`/api/${recordType}/${recordPid}/pickup_locations`)
       .pipe(map(result => {
         const locations = [];
@@ -49,7 +41,7 @@ export class LocationApiService extends BaseApi {
           result.locations.forEach((location: any) => {
             locations.push({
               pid: location.pid,
-              name: location.pickup_name ? location.pickup_name : location.name
+              name: location.pickup_name || location.name
             });
           });
         }
diff --git a/projects/public-search/src/app/api/operation-logs-api.service.ts b/projects/public-search/src/app/api/operation-logs-api.service.ts
index e5fdf0ea0..16fdac4be 100644
--- a/projects/public-search/src/app/api/operation-logs-api.service.ts
+++ b/projects/public-search/src/app/api/operation-logs-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  * Copyright (C) 2021-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Error, Record, RecordService } from '@rero/ng-core';
 import { BaseApi } from '@rero/shared';
 import moment from 'moment';
@@ -26,13 +26,7 @@ import { Observable } from 'rxjs';
 })
 export class OperationLogsApiService extends BaseApi {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) {
-    super();
-  }
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Get history
@@ -48,7 +42,7 @@ export class OperationLogsApiService extends BaseApi {
   ): Observable<Record | Error> {
     const date = moment().subtract(6, 'months').utc().format('YYYY-MM-DDTHH:mm:ss');
     const query = `record.type:loan AND loan.patron.pid:${patronPid} AND loan.trigger:checkin AND date:[${date} TO *]`;
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       'operation_logs', query, page, itemsPerPage,
       undefined, undefined, undefined, 'mostrecent'
       );
diff --git a/projects/public-search/src/app/api/patron-api.service.ts b/projects/public-search/src/app/api/patron-api.service.ts
index 961c0704f..d2af7ccdf 100644
--- a/projects/public-search/src/app/api/patron-api.service.ts
+++ b/projects/public-search/src/app/api/patron-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { BaseApi } from '@rero/shared';
 import { Observable } from 'rxjs';
 
@@ -24,20 +24,14 @@ import { Observable } from 'rxjs';
 })
 export class PatronApiService extends BaseApi {
 
-  /**
-   * Constructor
-   * @param _httpClient - HttpClient
-   */
-  constructor(private _httpClient: HttpClient) {
-    super();
-  }
+  private httpClient: HttpClient = inject(HttpClient);
 
   /**
    * Get Messages
    * @return Observable
    */
   getMessages(patronPid: string): Observable<Message[]> {
-    return this._httpClient.get<Message[]>(`/api/patrons/${patronPid}/messages`);
+    return this.httpClient.get<Message[]>(`/api/patrons/${patronPid}/messages`);
   }
 }
 
diff --git a/projects/public-search/src/app/api/patron-transaction-api.service.ts b/projects/public-search/src/app/api/patron-transaction-api.service.ts
index d8b027a96..e096fdf53 100644
--- a/projects/public-search/src/app/api/patron-transaction-api.service.ts
+++ b/projects/public-search/src/app/api/patron-transaction-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { Error } from '@rero/ng-core/lib/error/error';
 import { BaseApi } from '@rero/shared';
@@ -25,13 +25,7 @@ import { Observable } from 'rxjs';
 })
 export class PatronTransactionApiService extends BaseApi {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) {
-    super();
-  }
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Get fees
@@ -47,7 +41,7 @@ export class PatronTransactionApiService extends BaseApi {
     itemsPerPage: number = 10, headers = BaseApi.reroJsonheaders
   ): Observable<Record | Error> {
     const query = `patron.pid:${patronPid} AND status:${status}`;
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       'patron_transactions', query, page, itemsPerPage,
       undefined, undefined, headers, undefined, ['total']
     );
diff --git a/projects/public-search/src/app/api/patron-transaction-event-api.service.ts b/projects/public-search/src/app/api/patron-transaction-event-api.service.ts
index 7312f2de6..94e087f82 100644
--- a/projects/public-search/src/app/api/patron-transaction-event-api.service.ts
+++ b/projects/public-search/src/app/api/patron-transaction-event-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { Error } from '@rero/ng-core/lib/error/error';
 import { BaseApi } from '@rero/shared';
@@ -25,13 +25,7 @@ import { Observable } from 'rxjs';
 })
 export class PatronTransactionEventApiService extends BaseApi {
 
-  /**
-   * Constructor
-   * @param _recordService - RecordService
-   */
-  constructor(private _recordService: RecordService) {
-    super();
-  }
+  private recordService: RecordService = inject(RecordService);
 
   /**
    * Get Events
@@ -39,7 +33,7 @@ export class PatronTransactionEventApiService extends BaseApi {
    * @return Observable
    */
   getEvents(feePid: string): Observable<Record | Error> {
-    return this._recordService.getRecords(
+    return this.recordService.getRecords(
       'patron_transaction_events', `parent.pid:${feePid}`,
       1, RecordService.MAX_REST_RESULTS_SIZE,
       undefined, undefined, BaseApi.reroJsonheaders
diff --git a/projects/public-search/src/app/api/user-api.service.ts b/projects/public-search/src/app/api/user-api.service.ts
index 237fcfcf2..e14331dbe 100644
--- a/projects/public-search/src/app/api/user-api.service.ts
+++ b/projects/public-search/src/app/api/user-api.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ApiService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 
@@ -24,14 +24,8 @@ import { Observable } from 'rxjs';
 })
 export class UserApiService {
 
-  /**
-   * Constructor
-   * @param _httpClient - HttpClient
-   */
-  constructor(
-    private _httpClient: HttpClient,
-    private _apiService: ApiService
-  ) { }
+  private httpClient: HttpClient = inject(HttpClient);
+  private apiService: ApiService = inject(ApiService);
 
   /**
    * Update password
@@ -39,12 +33,12 @@ export class UserApiService {
    * @returns Observable
    */
   updatePassword(data: IPassword): Observable<any> {
-    return this._httpClient.post('/api/change-password', data);
+    return this.httpClient.post('/api/change-password', data);
   }
 
   validatePassword(password: string): Observable<any> {
-    return this._httpClient.post(
-      this._apiService.getEndpointByType('user/password/validate'),
+    return this.httpClient.post(
+      this.apiService.getEndpointByType('user/password/validate'),
       { 'password': password }
     );
   }
diff --git a/projects/public-search/src/app/app-initializer.service.spec.ts b/projects/public-search/src/app/app-initializer.service.spec.ts
index 231e7dd03..37bffd053 100644
--- a/projects/public-search/src/app/app-initializer.service.spec.ts
+++ b/projects/public-search/src/app/app-initializer.service.spec.ts
@@ -18,7 +18,6 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { AppInitializerService } from './app-initializer.service';
 
 
@@ -28,9 +27,6 @@ describe('AppInitializerService', () => {
       HttpClientTestingModule,
       TranslateModule.forRoot()
     ],
-    providers: [
-      BsLocaleService
-    ]
   }));
 
   it('should be created', () => {
diff --git a/projects/public-search/src/app/app-initializer.service.ts b/projects/public-search/src/app/app-initializer.service.ts
index 5d12157fe..8a40c3892 100644
--- a/projects/public-search/src/app/app-initializer.service.ts
+++ b/projects/public-search/src/app/app-initializer.service.ts
@@ -1,6 +1,6 @@
 /*
 * RERO ILS UI
-* Copyright (C) 2020 RERO
+* Copyright (C) 2020-2024 RERO
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
@@ -15,54 +15,41 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@rero/ng-core';
+import { inject, Injectable } from '@angular/core';
 import { AppSettingsService, UserService } from '@rero/shared';
 import { Observable } from 'rxjs';
 import { switchMap, tap } from 'rxjs/operators';
 import { AppConfigService } from './app-config.service';
 import { RouteCollectionService } from './routes/route-collection.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Injectable({
   providedIn: 'root'
 })
 export class AppInitializerService {
 
-  /**
-   * Constructor
-   * @param _routeCollectionService - RouteCollectionService
-   * @param _userService - UserService
-   * @param _appSettingsService - AppSettingsService
-   * @param _translateService - TranslateService
-   * @param _appConfigService - AppConfigService
-   */
-  constructor(
-    private _routeCollectionService: RouteCollectionService,
-    private _userService: UserService,
-    private _appSettingsService: AppSettingsService,
-    private _translateService: TranslateService,
-    private _appConfigService: AppConfigService
+  private routeCollectionService: RouteCollectionService = inject(RouteCollectionService);
+  private userService: UserService = inject(UserService);
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+  private translateService: TranslateService = inject(TranslateService);
+  private appConfigService: AppConfigService = inject(AppConfigService);
 
-  ) { }
-
-  /** load */
   load(): Observable<any> {
-    return this._userService.load().pipe(
+    return this.userService.load().pipe(
       tap(() => {
-        this._routeCollectionService.load();
+        this.routeCollectionService.load();
       }),
       switchMap(() => this.initTranslateService())
     );
   }
 
-  /** Initialize Translate Service */
   private initTranslateService(): Observable<any> {
-    let language = this._appSettingsService.settings.language;
+    let {language} = this.appSettingsService.settings;
     if (language == null) {
-      const browserLang = this._translateService.getBrowserLang();
-      language = browserLang.match(this._appConfigService.languages.join('|')) ?
-        browserLang : this._appConfigService.defaultLanguage;
+      const browserLang = this.translateService.getBrowserLang();
+      language = browserLang.match(this.appConfigService.languages.join('|')) ?
+        browserLang : this.appConfigService.defaultLanguage;
     }
-    return this._translateService.setLanguage(language);
+    return this.translateService.use(language);
   }
 }
diff --git a/projects/public-search/src/app/app.component.spec.ts b/projects/public-search/src/app/app.component.spec.ts
index d6df0019d..38857dfd4 100644
--- a/projects/public-search/src/app/app.component.spec.ts
+++ b/projects/public-search/src/app/app.component.spec.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,20 +14,20 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { TestBed, waitForAsync } from '@angular/core/testing';
-import { RouterTestingModule } from '@angular/router/testing';
-import { AppComponent } from './app.component';
-import { RecordModule } from '@rero/ng-core';
 import { HttpClientModule } from '@angular/common/http';
-import { TranslateModule } from '@ngx-translate/core';
+import { TestBed, waitForAsync } from '@angular/core/testing';
+import { RouterModule } from '@angular/router';
 import { LoadingBarModule } from '@ngx-loading-bar/core';
+import { TranslateModule } from '@ngx-translate/core';
+import { RecordModule } from '@rero/ng-core';
+import { AppComponent } from './app.component';
 
 
 describe('AppComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
-        RouterTestingModule,
+        RouterModule.forRoot([]),
         HttpClientModule,
         TranslateModule.forRoot({}),
         LoadingBarModule,
diff --git a/projects/public-search/src/app/app.module.ts b/projects/public-search/src/app/app.module.ts
index fbbfa87f5..f9957b07a 100644
--- a/projects/public-search/src/app/app.module.ts
+++ b/projects/public-search/src/app/app.module.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,19 +15,17 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
-import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, Injector, LOCALE_ID, NgModule } from '@angular/core';
+import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
+import { APP_INITIALIZER, ApplicationRef, CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, inject, Injector, LOCALE_ID, NgModule } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LoadingBarModule } from '@ngx-loading-bar/core';
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
 import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
-import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { BucketNameService as CoreBucketNameService, CoreConfigService, RecordModule, TranslateLoader, TranslateService } from '@rero/ng-core';
-import { SharedModule } from '@rero/shared';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
-import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
+import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { BucketNameService as CoreBucketNameService, CoreConfigService, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
+import { RemoteSearchComponent, SharedModule, UserService } from '@rero/shared';
 import { AppConfigService } from './app-config.service';
 import { AppInitializerService } from './app-initializer.service';
 import { AppRoutingModule } from './app-routing.module';
@@ -38,16 +36,14 @@ import { DocumentRecordSearchComponent } from './document-record-search/document
 import { ErrorPageComponent } from './error/error-page.component';
 import { CustomRequestInterceptor } from './interceptor/custom-request.interceptor';
 import { MainComponent } from './main/main.component';
-import { SearchBarComponent } from './search-bar/search-bar.component';
 import { BucketNameService } from './service/bucket-name.service';
-
+import { Observable } from 'rxjs';
 
 /** function to instantiate the application  */
-export function appInitFactory(appInitializerService: AppInitializerService): () => Promise<any> {
-  return () => appInitializerService.load().toPromise();
+export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
+  return () => appInitializerService.load();
 }
 
-
 @NgModule({
     declarations: [
         AppComponent,
@@ -55,8 +51,7 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
         MainComponent,
         CollectionBriefComponent,
         ErrorPageComponent,
-        DocumentRecordSearchComponent,
-        SearchBarComponent
+        DocumentRecordSearchComponent
     ],
     imports: [
         BrowserModule,
@@ -72,34 +67,30 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
             },
             isolate: false
         }),
-        TypeaheadModule.forRoot(),
         SharedModule,
         LoadingBarHttpClientModule,
         LoadingBarRouterModule,
         LoadingBarModule
     ],
     providers: [
-        { provide: APP_INITIALIZER, useFactory: appInitFactory, deps: [AppInitializerService], multi: true },
+        { provide: APP_INITIALIZER, useFactory: appInitFactory, deps: [AppInitializerService, UserService], multi: true },
         { provide: CoreConfigService, useClass: AppConfigService },
-        { provide: LOCALE_ID, useFactory: (translate: TranslateService) => translate.currentLanguage, deps: [TranslateService] },
+        { provide: TranslateService, useClass: NgCoreTranslateService },
+        { provide: LOCALE_ID, useFactory: (translate: TranslateService) => translate.currentLang, deps: [TranslateService] },
         { provide: HTTP_INTERCEPTORS, useClass: CustomRequestInterceptor, multi: true },
-        BsLocaleService,
         { provide: CoreBucketNameService, useClass: BucketNameService },
     ],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    bootstrap: [AppComponent]
+    schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
-export class AppModule {
+export class AppModule implements DoBootstrap {
 
-  /**
-   * Constructor
-   * @param injector - Injector
-   */
-  constructor(private injector: Injector) {
+  private injector: Injector = inject(Injector);
+
+  ngDoBootstrap(appRef: ApplicationRef): void {
+    appRef.bootstrap(AppComponent);
     if (!customElements.get('main-search-bar')) {
-      const searchBar = createCustomElement(SearchBarComponent, { injector: this.injector });
+      const searchBar = createCustomElement(RemoteSearchComponent, { injector: this.injector });
       customElements.define('main-search-bar', searchBar);
     }
   }
-
 }
diff --git a/projects/public-search/src/app/collection-brief/collection-brief.component.spec.ts b/projects/public-search/src/app/collection-brief/collection-brief.component.spec.ts
index 7b866be85..8fb4edcfc 100644
--- a/projects/public-search/src/app/collection-brief/collection-brief.component.spec.ts
+++ b/projects/public-search/src/app/collection-brief/collection-brief.component.spec.ts
@@ -19,7 +19,6 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { DateTranslatePipe, Nl2brPipe } from '@rero/ng-core';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { AppRoutingModule } from '../app-routing.module';
 import { ErrorPageComponent } from '../error/error-page.component';
 import { MainComponent } from '../main/main.component';
@@ -44,9 +43,6 @@ describe('CollectionBriefComponent', () => {
         TranslateModule.forRoot(),
         AppRoutingModule
       ],
-      providers: [
-        BsLocaleService
-      ]
     })
     .compileComponents();
   }));
diff --git a/projects/public-search/src/app/document-brief/document-brief.component.ts b/projects/public-search/src/app/document-brief/document-brief.component.ts
index cd3a8ec58..f48f2b173 100644
--- a/projects/public-search/src/app/document-brief/document-brief.component.ts
+++ b/projects/public-search/src/app/document-brief/document-brief.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, Input } from '@angular/core';
-import { DocumentApiService } from '../api/document-api.service';
 
 @Component({
   selector: 'public-search-document-brief',
@@ -24,6 +23,7 @@ import { DocumentApiService } from '../api/document-api.service';
   styleUrls: ['./document-brief.component.scss']
 })
 export class DocumentBriefComponent {
+
   public coverUrl: string;
   private pathArray = window.location.pathname.split('/');
   private _record: any;
@@ -54,10 +54,4 @@ export class DocumentBriefComponent {
     });
     return publications;
   }
-
-  /**
-   * Constructor
-   * @param documentApiService - DocumentApiService
-   */
-  constructor(public documentApiService: DocumentApiService) {}
 }
diff --git a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts
index 3b174389f..e366f54a9 100644
--- a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts
+++ b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,10 +15,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { HoldingsNoteType } from '@rero/shared';
-import { HoldingsApiService } from '../../../api/holdings-api.service';
 
 @Component({
   selector: 'public-search-holding',
@@ -27,6 +26,8 @@ import { HoldingsApiService } from '../../../api/holdings-api.service';
 })
 export class HoldingComponent {
 
+  private translateService: TranslateService = inject(TranslateService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Holdings record */
   @Input() holding: any;
@@ -48,15 +49,4 @@ export class HoldingComponent {
   get language() {
     return this.translateService.currentLang;
   }
-
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   * @param holdingApiService: HoldingsApiService
-   */
-  constructor(
-    private translateService: TranslateService,
-    public holdingApiService: HoldingsApiService
-  ) {}
 }
diff --git a/projects/public-search/src/app/document-detail/holdings/holdings.component.ts b/projects/public-search/src/app/document-detail/holdings/holdings.component.ts
index 574b7d798..23286f848 100644
--- a/projects/public-search/src/app/document-detail/holdings/holdings.component.ts
+++ b/projects/public-search/src/app/document-detail/holdings/holdings.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
 import { AppSettingsService } from '@rero/shared';
@@ -28,6 +28,10 @@ import { QueryResponse } from '../../record';
 })
 export class HoldingsComponent implements OnInit {
 
+  private holdingsApiService: HoldingsApiService = inject(HoldingsApiService);
+  private translateService: TranslateService = inject(TranslateService);
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+
   // COMPONENTS ATTRIBUTES ====================================================
   /** View code */
   @Input() viewcode: string;
@@ -68,19 +72,6 @@ export class HoldingsComponent implements OnInit {
     return this.translateService.instant(linkText, { counter: count });
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param holdingsApiService - HoldingsApiService
-   * @param translateService - TranslateService
-   * @param appSettingsService - AppSettingsService
-   */
-  constructor(
-    private holdingsApiService: HoldingsApiService,
-    private translateService: TranslateService,
-    private appSettingsService: AppSettingsService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     // Set view code to app settings
diff --git a/projects/public-search/src/app/document-detail/holdings/items/items.component.ts b/projects/public-search/src/app/document-detail/holdings/items/items.component.ts
index 9ad0a6fe3..4904339e8 100644
--- a/projects/public-search/src/app/document-detail/holdings/items/items.component.ts
+++ b/projects/public-search/src/app/document-detail/holdings/items/items.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
 import { ItemApiService } from '../../../api/item-api.service';
@@ -26,6 +26,9 @@ import { QueryResponse } from '../../../record';
 })
 export class ItemsComponent implements OnInit {
 
+  private itemApiService: ItemApiService = inject(ItemApiService);
+  private translateService: TranslateService = inject(TranslateService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Holding */
   @Input() holding: any;
@@ -67,17 +70,6 @@ export class ItemsComponent implements OnInit {
     return this.translateService.instant(linkText, { counter: count });
   }
 
-  // CONSTRUCTOR & HOOKS ====================================================
-  /**
-   * Constructor
-   * @param itemApiService - ItemApiService
-   * @param translateService - TranslateService
-   */
-  constructor(
-    private itemApiService: ItemApiService,
-    private translateService: TranslateService
-  ) { }
-
   ngOnInit(): void {
     this.loadItems();
   }
diff --git a/projects/public-search/src/app/document-detail/item/item.component.ts b/projects/public-search/src/app/document-detail/item/item.component.ts
index 145185d61..b98ab4c0a 100644
--- a/projects/public-search/src/app/document-detail/item/item.component.ts
+++ b/projects/public-search/src/app/document-detail/item/item.component.ts
@@ -15,9 +15,8 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { ItemApiService } from '../../api/item-api.service';
 
 @Component({
   selector: 'public-search-item',
@@ -25,6 +24,8 @@ import { ItemApiService } from '../../api/item-api.service';
 })
 export class ItemComponent {
 
+  private translateService: TranslateService = inject(TranslateService);
+
   /** Item record */
   private _item: any;
 
@@ -70,14 +71,4 @@ export class ItemComponent {
   get item() {
     return this._item;
   }
-
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   * @param itemApiService - ItemApiService
-   */
-  constructor(
-    private translateService: TranslateService,
-    public itemApiService: ItemApiService
-  ) {}
 }
diff --git a/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.ts b/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.ts
index ecc1a9c24..22db3a68c 100644
--- a/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.ts
+++ b/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.ts
@@ -14,13 +14,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
 import { tap } from 'rxjs/operators';
-import { ItemApiService } from '../../../api/item-api.service';
 import { HoldingsApiService } from '../../../api/holdings-api.service';
+import { ItemApiService } from '../../../api/item-api.service';
 import { LocationApiService } from '../../../api/location-api.service';
 
 @Component({
@@ -29,6 +29,11 @@ import { LocationApiService } from '../../../api/location-api.service';
 })
 export class PickupLocationComponent implements OnInit {
 
+  private locationApiService: LocationApiService = inject(LocationApiService);
+  private itemApiService: ItemApiService = inject(ItemApiService);
+  private holdingsApiService: HoldingsApiService = inject(HoldingsApiService);
+  private translateService: TranslateService = inject(TranslateService);
+
   /** Record: item or holding */
   @Input() record: any;
 
@@ -67,20 +72,6 @@ export class PickupLocationComponent implements OnInit {
     message: string
   };
 
-  /**
-   * Constructor
-   * @param locationApiService - LocationApiService
-   * @param itemApiService - ItemApiService
-   * @param holdingsApiService - HoldingsApiService
-   * @param translateService - TranslateService
-   */
-  constructor(
-    private locationApiService: LocationApiService,
-    private itemApiService: ItemApiService,
-    private holdingsApiService: HoldingsApiService,
-    private translateService: TranslateService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     this.locationApiService
diff --git a/projects/public-search/src/app/document-detail/request/request.component.ts b/projects/public-search/src/app/document-detail/request/request.component.ts
index 56c111edb..0017ac09e 100644
--- a/projects/public-search/src/app/document-detail/request/request.component.ts
+++ b/projects/public-search/src/app/document-detail/request/request.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { IPatron, UserService } from '@rero/shared';
 import { ItemApiService } from '../../api/item-api.service';
 import { HoldingsApiService } from '../../api/holdings-api.service';
@@ -25,6 +25,10 @@ import { HoldingsApiService } from '../../api/holdings-api.service';
 })
 export class RequestComponent implements OnInit {
 
+  private itemApiService: ItemApiService = inject(ItemApiService);
+  private holdingsApiService: HoldingsApiService = inject(HoldingsApiService);
+  private userService: UserService = inject(UserService);
+
   /** Record: item or holding */
   @Input() record: any;
 
@@ -57,18 +61,6 @@ export class RequestComponent implements OnInit {
     return this._patron !== undefined;
   }
 
-  /**
-   * Constructor
-   * @param itemApiService - ItemApiService
-   * @param holdingsApiService: HoldingsApiService
-   * @param userService - UserService
-   */
-  constructor(
-    private itemApiService: ItemApiService,
-    private holdingsApiService: HoldingsApiService,
-    private userService: UserService,
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     let apiRequest = null;
diff --git a/projects/public-search/src/app/document-record-search/document-record-search.component.ts b/projects/public-search/src/app/document-record-search/document-record-search.component.ts
index 6db9dbb4f..5214dd034 100644
--- a/projects/public-search/src/app/document-record-search/document-record-search.component.ts
+++ b/projects/public-search/src/app/document-record-search/document-record-search.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
+ * Copyright (C) 2020-2024 RERO
  * Copyright (C) 2020-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,9 +16,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute, Router, UrlSerializer } from '@angular/router';
-import { RecordSearchPageComponent, RecordSearchService, RecordService, RecordUiService, SearchResult } from '@rero/ng-core';
+import { Component, inject, OnInit } from '@angular/core';
+import { UrlSerializer } from '@angular/router';
+import { RecordSearchPageComponent, RecordService, SearchResult } from '@rero/ng-core';
 import { AppConfigService } from '../app-config.service';
 
 @Component({
@@ -27,6 +27,10 @@ import { AppConfigService } from '../app-config.service';
 })
 export class DocumentRecordSearchComponent extends RecordSearchPageComponent implements OnInit {
 
+  private recordService: RecordService = inject(RecordService);
+  private appConfigService: AppConfigService = inject(AppConfigService);
+  private urlSerializer: UrlSerializer = inject(UrlSerializer);
+
   uriGlobalView: string;
 
   /** View code */
@@ -44,7 +48,7 @@ export class DocumentRecordSearchComponent extends RecordSearchPageComponent imp
    */
   get showLink(): boolean {
     return this.total === 0
-      && (this._appConfigService.globalViewName !== this._viewCode);
+      && (this.appConfigService.globalViewName !== this._viewCode);
   }
 
   /**
@@ -53,35 +57,13 @@ export class DocumentRecordSearchComponent extends RecordSearchPageComponent imp
    */
   get total(): null | number {
     if (this._searchResult) {
-      return this._recordService.totalHits(
+      return this.recordService.totalHits(
         this._searchResult.records.hits.total
       );
     }
     return null;
   }
 
-  /**
-   * Constructor
-   * @param _route - ActivatedRoute
-   * @param _router - Router
-   * @param _recordUiService - RecordUiService
-   * @param _recordSearchService - RecordSearchService
-   * @param _recordService - RecordService
-   * @param _appConfigService - AppConfigService
-   * @param _urlSerializer - UrlSerializer
-   */
-  constructor(
-    protected _route: ActivatedRoute,
-    protected _router: Router,
-    protected _recordUiService: RecordUiService,
-    protected _recordSearchService: RecordSearchService,
-    private _recordService: RecordService,
-    private _appConfigService: AppConfigService,
-    private _urlSerializer: UrlSerializer
-  ) {
-    super(_route, _router, _recordSearchService, _recordUiService);
-  }
-
   /** Init */
   ngOnInit() {
     super.ngOnInit();
@@ -100,13 +82,13 @@ export class DocumentRecordSearchComponent extends RecordSearchPageComponent imp
 
   /** Convert url for global view redirect */
   private _convertUrlForGlobalView() {
-    const { queryParams } = this._route.snapshot;
-    const segments = this._router.parseUrl(this._router.url)
+    const { queryParams } = this.route.snapshot;
+    const segments = this.router.parseUrl(this.router.url)
       .root.children.primary.segments.map(it => it.path);
     this._viewCode = segments[0];
-    segments[0] = this._appConfigService.globalViewName;
+    segments[0] = this.appConfigService.globalViewName;
     const baseUri = '/' + segments.join('/');
-    const tree = this._router.createUrlTree([baseUri], { queryParams });
-    return this._urlSerializer.serialize(tree);
+    const tree = this.router.createUrlTree([baseUri], { queryParams });
+    return this.urlSerializer.serialize(tree);
   }
 }
diff --git a/projects/public-search/src/app/error/error-page.component.ts b/projects/public-search/src/app/error/error-page.component.ts
index f4f99c6e6..eec740504 100644
--- a/projects/public-search/src/app/error/error-page.component.ts
+++ b/projects/public-search/src/app/error/error-page.component.ts
@@ -14,8 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, OnInit } from '@angular/core';
+import { Component, inject, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { marker } from '@biesbjerg/ngx-translate-extract-marker';
 import { map } from 'rxjs/operators';
@@ -40,6 +39,8 @@ export function _(str: string) {
 
 export class ErrorPageComponent implements OnInit {
 
+  private route: ActivatedRoute = inject(ActivatedRoute);
+
   /** the status code to display. By default 404 : Page not found */
   statusCode = 404;
   /** All messages alt to be managed by this component. Available for each error are :
@@ -77,12 +78,6 @@ export class ErrorPageComponent implements OnInit {
     }
   };
 
-  /**
-   * Constructor
-   * @param _route - ActivatedRoute
-   */
-  constructor(private route: ActivatedRoute) { }
-
   ngOnInit() {
     this.route.params.pipe(
       map(params => params.status_code || 404),  // check for status_code parameter from ActivatedRoute
diff --git a/projects/public-search/src/app/guard/collection-access.guard.ts b/projects/public-search/src/app/guard/collection-access.guard.ts
index c77151355..47a3b0080 100644
--- a/projects/public-search/src/app/guard/collection-access.guard.ts
+++ b/projects/public-search/src/app/guard/collection-access.guard.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,8 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, Router, UrlTree } from '@angular/router';
 import { Observable } from 'rxjs';
 import { AppConfigService } from '../app-config.service';
@@ -25,10 +24,8 @@ import { AppConfigService } from '../app-config.service';
 })
 export class CollectionAccessGuard  {
 
-  constructor(
-    private _appConfigService: AppConfigService,
-    private _router: Router
-  ) {}
+  private _appConfigService: AppConfigService = inject(AppConfigService);
+  private _router: Router = inject(Router);
 
   canActivate(
     next: ActivatedRouteSnapshot):
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts
index 09e6243b7..013206ba9 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2023 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { PatronProfileMenuService } from '../patron-profile-menu.service';
 
@@ -25,6 +25,9 @@ import { PatronProfileMenuService } from '../patron-profile-menu.service';
 })
 export class PatronProfileDocumentComponent implements OnInit {
 
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+  private recordService: RecordService = inject(RecordService);
+
   // COMPONENT ATTRIBUTES =====================================================
   @Input() record: any;
   @Input() showAdditionalInformation = false;
@@ -47,17 +50,6 @@ export class PatronProfileDocumentComponent implements OnInit {
     ).filter(Boolean).join(' | ');
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param patronProfileMenuService - PatronProfileMenuService
-   * @param recordService - RecordService
-   */
-  constructor(
-    private patronProfileMenuService: PatronProfileMenuService,
-    private recordService: RecordService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this.recordService
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.spec.ts
index 41844e65f..bd9feb4c4 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.spec.ts
@@ -21,7 +21,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { CoreModule } from '@rero/ng-core';
 import { MainTitlePipe, testUserPatronWithSettings, UserApiService, UserService } from '@rero/shared';
 import { cloneDeep } from 'lodash-es';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { of } from 'rxjs';
 import { PatronTransactionEventApiService } from '../../../api/patron-transaction-event-api.service';
 import { PatronProfileMenuService } from '../../patron-profile-menu.service';
@@ -95,7 +94,6 @@ describe('PatronProfileFeeComponent', () => {
         CoreModule
       ],
       providers: [
-        BsLocaleService,
         { provide: PatronTransactionEventApiService, useValue: patronTransactionEventsApiServiceSpy },
         { provide: UserApiService, useValue: userApiServiceSpy }
       ],
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts
index a3a5de581..baebc39bb 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { Record } from '@rero/ng-core';
 import { IOrganisation } from '@rero/shared/public-api';
 import { PatronTransactionEventApiService } from '../../../api/patron-transaction-event-api.service';
@@ -27,6 +27,9 @@ import { PatronProfileMenuService } from '../../patron-profile-menu.service';
 })
 export class PatronProfileFeeComponent {
 
+  private patronTransactionEventApiService: PatronTransactionEventApiService = inject(PatronTransactionEventApiService);
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+
   /** Fee record */
   @Input() record: any;
 
@@ -43,16 +46,6 @@ export class PatronProfileFeeComponent {
     return this.patronProfileMenuService.currentPatron.organisation;
   }
 
-  /**
-   * Constructor
-   * @param patronTransactionEventApiService - PatronTransactionEventApiService
-   * @param patronProfileMenuService - PatronProfileMenuService
-   */
-  constructor(
-    private patronTransactionEventApiService: PatronTransactionEventApiService,
-    private patronProfileMenuService: PatronProfileMenuService
-  ) {}
-
   /**
    * Expanded
    * @param feePid - string
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.ts
index 4b3ce44a9..6a5f07257 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { Error, Record } from '@rero/ng-core';
 import { Paginator } from '@rero/shared';
@@ -29,6 +29,10 @@ import { ITabEvent, PatronProfileService } from '../patron-profile.service';
 })
 export class PatronProfileFeesComponent implements OnInit, OnDestroy {
 
+  private patronTransactionApiService: PatronTransactionApiService = inject(PatronTransactionApiService);
+  private patronProfileService: PatronProfileService = inject(PatronProfileService);
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+
   /** Total of fees */
   @Input() feesTotal: number;
 
@@ -48,18 +52,6 @@ export class PatronProfileFeesComponent implements OnInit, OnDestroy {
     return this.patronProfileMenuService.currentPatron.organisation.currency;
   }
 
-  /**
-   * Constructor
-   * @param patronTransactionApiService - PatronTransactionApiService
-   * @param patronProfileService - PatronProfileService
-   * @param patronProfileMenuService - PatronProfileMenuService
-   */
-  constructor(
-    private patronTransactionApiService: PatronTransactionApiService,
-    private patronProfileService: PatronProfileService,
-    private patronProfileMenuService: PatronProfileMenuService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this.paginator = new Paginator();
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts
index 1ad29a41b..8bd5a1f3f 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { Error, Record } from '@rero/ng-core';
 import { Paginator } from '@rero/shared';
@@ -28,6 +28,10 @@ import { ITabEvent, PatronProfileService } from '../patron-profile.service';
 })
 export class PatronProfileHistoriesComponent implements OnInit, OnDestroy {
 
+  private operationLogsApiService: OperationLogsApiService = inject(OperationLogsApiService);
+  private patronProfileService: PatronProfileService = inject(PatronProfileService);
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+
   /** First call of get record */
   loaded = false;
 
@@ -43,18 +47,6 @@ export class PatronProfileHistoriesComponent implements OnInit, OnDestroy {
   /** Observable subscription */
   private subscription = new Subscription();
 
-  /**
-   * Constructor
-   * @param operationLogsApiService - OperationLogsApiService
-   * @param patronProfileService - PatronProfileService
-   * @param patronProfileMenuService - PatronProfileMenuService
-   */
-  constructor(
-    private operationLogsApiService: OperationLogsApiService,
-    private patronProfileService: PatronProfileService,
-    private patronProfileMenuService: PatronProfileMenuService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this.paginator = new Paginator();
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.ts
index 4a30cfaa5..e6f7fffb7 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { PatronProfileMenuService } from '../../patron-profile-menu.service';
 
 @Component({
@@ -24,6 +24,8 @@ import { PatronProfileMenuService } from '../../patron-profile-menu.service';
 })
 export class PatronProfileHistoryComponent {
 
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+
   /** Loan record */
   @Input() record: any;
 
@@ -34,10 +36,4 @@ export class PatronProfileHistoryComponent {
   get viewcode(): string {
     return this.patronProfileMenuService.currentPatron.organisation.code;
   }
-
-  /**
-   * Constructor
-   * @param patronProfileMenuService - PatronProfileMenuService
-   */
-  constructor(private patronProfileMenuService: PatronProfileMenuService) {}
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.ts
index de6a166b7..67e47bf17 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { Error, Record } from '@rero/ng-core';
 import { BaseApi, Paginator } from '@rero/shared';
@@ -29,6 +29,10 @@ import { ITabEvent, PatronProfileService } from '../patron-profile.service';
 })
 export class PatronProfileIllRequestsComponent implements OnInit, OnDestroy {
 
+  private illRequestApiService: IllRequestApiService = inject(IllRequestApiService);
+  private patronProfileService: PatronProfileService = inject(PatronProfileService);
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+
   /** First call of get record */
   loaded = false;
 
@@ -41,18 +45,6 @@ export class PatronProfileIllRequestsComponent implements OnInit, OnDestroy {
   /** Observable subscription */
   private _subscription = new Subscription();
 
-  /**
-   * Constructor
-   * @param illRequestApiService - IllRequestApiService
-   * @param patronProfileService - PatronProfileService
-   * @param patronProfileMenuService - PatronProfileMenuService
-   */
-  constructor(
-    private illRequestApiService: IllRequestApiService,
-    private patronProfileService: PatronProfileService,
-    private patronProfileMenuService: PatronProfileMenuService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this.paginator = new Paginator();
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html
index bb6765fd5..60750b885 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html
@@ -81,7 +81,8 @@
           <button
             type="button"
             class="btn btn-sm btn-primary disabled"
-            tooltip="{{ canExtend.reasons | arrayTranslate | join:' / '}}"
+            pTooltip="{{ canExtend.reasons | arrayTranslate | join:' / '}}"
+            tooltipPosition="top"
             translate
           >Renew</button>
         }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts
index deed03880..5036cc7ef 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts
@@ -14,12 +14,13 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { LoanOverduePreview } from '@app/admin/classes/loans';
 import { TranslateService } from '@ngx-translate/core';
+import { CONFIG } from '@rero/ng-core';
 import { IOrganisation } from '@rero/shared';
 import moment from 'moment';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
 import { finalize } from 'rxjs/operators';
 import { CanExtend, LoanApiService } from '../../../api/loan-api.service';
 import { PatronProfileMenuService } from '../../patron-profile-menu.service';
@@ -32,6 +33,13 @@ import { PatronProfileService } from '../../patron-profile.service';
 })
 export class PatronProfileLoanComponent implements OnInit {
 
+  private loanApiService: LoanApiService = inject(LoanApiService);
+  private translateService: TranslateService = inject(TranslateService);
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+  private patronProfileService: PatronProfileService
+
+  private messageService: MessageService = inject(MessageService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Loan record */
   @Input() record: any;
@@ -69,23 +77,6 @@ export class PatronProfileLoanComponent implements OnInit {
       : new moment(this.record.metadata.due_soon_date) <= moment();
   }
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param loanApiService - LoanApiService
-   * @param translateService - TranslateService
-   * @param toastService - ToastrService
-   * @param patronProfileMenuService - PatronProfileMenuService
-   * @param patronProfileService - PatronProfileService
-   */
-  constructor(
-    private loanApiService: LoanApiService,
-    private translateService: TranslateService,
-    private toastService: ToastrService,
-    private patronProfileMenuService: PatronProfileMenuService,
-    private patronProfileService: PatronProfileService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this.loanApiService
@@ -122,15 +113,20 @@ export class PatronProfileLoanComponent implements OnInit {
         if ('overdue' in this.record.metadata) {
           delete this.record.metadata.overdue;
         }
-        this.toastService.success(
-          this.translateService.instant('The item has been renewed.'),
-          this.translateService.instant('Success')
-        );
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('Success'),
+          detail: this.translateService.instant('The item has been renewed.'),
+          life: CONFIG.MESSAGE_LIFE
+        });
       } else {
-        this.toastService.error(
-          this.translateService.instant('Error during the renewal of the item.'),
-          this.translateService.instant('Error')
-        );
+        this.messageService.add({
+          severity: 'error',
+          summary: this.translateService.instant('Error'),
+          detail: this.translateService.instant('Error during the renewal of the item.'),
+          sticky: true,
+          closable: true
+        });
       }
     });
   }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.ts
index ee2b98783..f296ba2cc 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { Error, Record } from '@rero/ng-core';
 import { Paginator } from '@rero/shared';
@@ -28,6 +28,9 @@ import { PatronProfileMenuService } from '../patron-profile-menu.service';
 })
 export class PatronProfileLoansComponent implements OnInit, OnDestroy {
 
+  private loanApiService: LoanApiService = inject(LoanApiService);
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+
   /** Observable subscription */
   private _subscription = new Subscription();
 
@@ -49,16 +52,6 @@ export class PatronProfileLoansComponent implements OnInit, OnDestroy {
   /** Records paginator */
   paginator: Paginator;
 
-  /**
-   * Constructor
-   * @param loanApiService - LoanApiService
-   * @param patronProfileMenuService - PatronProfileMenuService
-   */
-  constructor(
-    private loanApiService: LoanApiService,
-    private patronProfileMenuService: PatronProfileMenuService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this._initializePaginatorAndSubscription();
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-menu.service.ts b/projects/public-search/src/app/patron-profile/patron-profile-menu.service.ts
index f08e79c36..fd9eec848 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-menu.service.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-menu.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2021-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { IPatron, UserService } from '@rero/shared';
 import { Observable, Subject } from 'rxjs';
 
@@ -23,6 +23,8 @@ import { Observable, Subject } from 'rxjs';
 })
 export class PatronProfileMenuService {
 
+  private userService: UserService = inject(UserService);
+
   /** On change Observable */
   private _onChange: Subject<IMenu> = new Subject();
 
@@ -78,15 +80,9 @@ export class PatronProfileMenuService {
     return this._patrons.length > 1;
   }
 
-  /**
-   * Constructor
-   * @param _userService - UserService
-   */
-  constructor(private _userService: UserService) { }
-
   /** OnInit hook */
   init(): void {
-    const user = this._userService.user;
+    const { user } = this.userService;
     if (user.isAuthenticated) {
       this._patrons = user.patrons.filter((patron) => patron.roles.includes('patron'));
       this._currentPatron = this._patrons[0];
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts
index 3b4a020d8..58cba572c 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { IMenu, PatronProfileMenuService } from '../patron-profile-menu.service';
 
 @Component({
@@ -23,6 +23,8 @@ import { IMenu, PatronProfileMenuService } from '../patron-profile-menu.service'
 })
 export class PatronProfileMenuComponent {
 
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+
   @Input() patronPid: string;
 
   /**
@@ -46,12 +48,6 @@ export class PatronProfileMenuComponent {
     return this.patronProfileMenuService.menu;
   }
 
-  /**
-   * Constructor
-   * @param _patronProfileMenuService - PatronProfileMenuService
-   */
-  constructor(private patronProfileMenuService: PatronProfileMenuService) {}
-
   /** on change */
   onChange(patronPid: string): void {
     this.patronProfileMenuService.change(patronPid);
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts
index 6432f9d46..149f0b120 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { Message, PatronApiService } from '../../api/patron-api.service';
 import { PatronProfileMenuService } from '../patron-profile-menu.service';
@@ -31,22 +31,15 @@ import { PatronProfileMenuService } from '../patron-profile-menu.service';
 })
 export class PatronProfileMessageComponent implements OnInit, OnDestroy {
 
+  private patronApiService: PatronApiService = inject(PatronApiService);
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+
   /** Observable subscription */
   private _subscription = new Subscription();
 
   /** patron messages */
   messages: Message[] = [];
 
-  /**
-   * Constructor
-   * @param patronApiService - PatronApiService
-   * @param patronProfileMenuService - PatronProfileMenuService
-   */
-  constructor(
-    private patronApiService: PatronApiService,
-    private patronProfileMenuService: PatronProfileMenuService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this._loanMessage();
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.spec.ts
index 5edfc11fe..b6f63cc7c 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.spec.ts
@@ -20,7 +20,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormlyModule } from '@ngx-formly/core';
 import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
 import { TranslateModule } from '@ngx-translate/core';
-import { ToastrModule } from 'ngx-toastr';
 import { PatronProfilePasswordComponent, fieldPasswordMatchValidator } from './patron-profile-password.component';
 
 
@@ -33,7 +32,6 @@ describe('PatronProfilePasswordComponent', () => {
       declarations: [ PatronProfilePasswordComponent ],
       imports: [
         HttpClientTestingModule,
-        ToastrModule.forRoot(),
         TranslateModule.forRoot(),
         FormsModule,
         ReactiveFormsModule,
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.ts
index 700c18705..a792e7f42 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.ts
@@ -15,13 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { DOCUMENT } from '@angular/common';
-import { Component, ElementRef, Inject, Input } from '@angular/core';
+import { Component, ElementRef, inject, Input } from '@angular/core';
 import { AbstractControl, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
+import { CONFIG } from '@rero/ng-core';
 import { AppSettingsService } from '@rero/shared';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
 import { of } from 'rxjs';
 import { catchError, debounceTime, map } from 'rxjs/operators';
 import { UserApiService } from '../../api/user-api.service';
@@ -47,6 +48,13 @@ export function fieldPasswordMatchValidator(control: AbstractControl) {
 })
 export class PatronProfilePasswordComponent {
 
+  private translateService: TranslateService = inject(TranslateService);
+  private userApiService: UserApiService = inject(UserApiService);
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+  private el: ElementRef = inject(ElementRef);
+  private document: Document = inject(DOCUMENT);
+  private messageService: MessageService = inject(MessageService);
+
   /** Request referer */
   @Input() referer: string | null;
 
@@ -112,31 +120,17 @@ export class PatronProfilePasswordComponent {
   /** Error message for password validator */
   private validatePasswordMessage: string = '';
 
-  /**
-   * Constructor
-   *
-   * @param toastrService - ToastrService
-   * @param translateService - TranslateService
-   * @param userApiService - UserApiService
-   * @param appSettingsService - AppSettingsService
-   * @param el - ElementRef
-   */
-  constructor(
-    private toastrService: ToastrService,
-    private translateService: TranslateService,
-    private userApiService: UserApiService,
-    private appSettingsService: AppSettingsService,
-    private el: ElementRef,
-    @Inject(DOCUMENT) private document: Document
-  ) { }
-
   /** Submit form */
   submit() {
     this.form.updateValueAndValidity();
     if (this.form.valid === false) {
-      this.toastrService.error(
-        this.translateService.instant('The form contains errors.')
-      );
+      this.messageService.add({
+        severity: 'error',
+        summary: this.translateService.instant('Error'),
+        detail: this.translateService.instant('The form contains errors.'),
+        sticky: true,
+        closable: true
+      });
       return;
     }
 
@@ -150,9 +144,12 @@ export class PatronProfilePasswordComponent {
       catchError((err: any) =>  of({ success: false, message: err.message, error: err.error.errors[0] }))
     ).subscribe((response: IPasswordResponse) => {
       if (!('success' in response)) {
-        this.toastrService.success(
-          this.translateService.instant(response.message)
-        );
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('Success'),
+          detail: this.translateService.instant(response.message),
+          life: CONFIG.MESSAGE_LIFE
+        });
         // Close password form and show personal data
         this._redirect();
       } else {
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.spec.ts
index 085dce933..7751e1e32 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.spec.ts
@@ -21,7 +21,6 @@ import { FormlyModule } from '@ngx-formly/core';
 import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
 import { TranslateModule } from '@ngx-translate/core';
 import { UserService, testUserPatronWithSettings } from '@rero/shared';
-import { ToastrModule } from 'ngx-toastr';
 import { PatronProfilePersonalEditorComponent } from './patron-profile-personal-editor.component';
 
 
@@ -38,7 +37,6 @@ describe('PatronProfilePersonalEditorComponent', () => {
       imports: [
         HttpClientTestingModule,
         TranslateModule.forRoot(),
-        ToastrModule.forRoot(),
         FormsModule,
         ReactiveFormsModule,
         FormlyModule.forRoot(),
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts
index f0a94b1ae..45ce22b2c 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts
@@ -15,15 +15,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { DOCUMENT } from '@angular/common';
-import { Component, Inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
 import { TranslateService } from '@ngx-translate/core';
-import { RecordService, processJsonSchema, removeEmptyValues } from '@rero/ng-core';
+import { CONFIG, RecordService, processJsonSchema, removeEmptyValues } from '@rero/ng-core';
 import { AppSettingsService, UserService } from '@rero/shared';
-import { ToastrService } from 'ngx-toastr';
+import { MessageService } from 'primeng/api';
 import { Subscription, forkJoin, of } from 'rxjs';
 import { debounceTime, map, tap } from 'rxjs/operators';
 
@@ -33,6 +33,14 @@ import { debounceTime, map, tap } from 'rxjs/operators';
 })
 export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
 
+  private recordService: RecordService = inject(RecordService);
+  private formlyJsonschema: FormlyJsonschema = inject(FormlyJsonschema);
+  private translateService: TranslateService = inject(TranslateService);
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+  private userService: UserService = inject(UserService);
+  private document: Document = inject(DOCUMENT);
+  private messageService: MessageService = inject(MessageService);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** Request referer */
   @Input() referer: string | null;
@@ -59,28 +67,6 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
     keep_history: _('If enabled the loan history is saved for a maximum of six months. It is visible to you and the library staff.')
   };
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   *
-   * @param recordService - RecordService
-   * @param formlyJsonschema - FormlyJsonschema
-   * @param toastrService - ToastrService
-   * @param translateService - TranslateService
-   * @param appSettingsService - AppSettingsService
-   * @param userService - UserService
-   * @param document - Document
-   */
-  constructor(
-    private recordService: RecordService,
-    private formlyJsonschema: FormlyJsonschema,
-    private toastrService: ToastrService,
-    private translateService: TranslateService,
-    private appSettingsService: AppSettingsService,
-    private userService: UserService,
-    @Inject(DOCUMENT) private document: Document
-  ) { }
-
   /** Init hook */
   ngOnInit(): void {
     const schemaForm = this.recordService.getSchemaForm('users').pipe(
@@ -186,22 +172,31 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
   submit() {
     this.form.updateValueAndValidity();
     if (this.form.valid === false) {
-      this.toastrService.error(
-        this.translateService.instant('The form contains errors.')
-      );
+      this.messageService.add({
+        severity: 'error',
+        summary: this.translateService.instant('Error'),
+        detail: this.translateService.instant('The form contains errors.'),
+        sticky: true,
+        closable: true
+      });
       return;
     }
     const data = removeEmptyValues(this.form.value);
     // Update user record and reload logged user
     this.recordService
       .update('users', this.userService.user.id.toString(), data)
-      .subscribe(
-        () => {
-          this.toastrService.success(this.translateService.instant('Your personal data has been updated.'));
+      .subscribe({
+        next: () => {
+          this.messageService.add({
+            severity: 'success',
+            summary: this.translateService.instant('Success'),
+            detail: this.translateService.instant('Your personal data has been updated.'),
+            life: CONFIG.MESSAGE_LIFE
+          });
           this.redirect();
         },
-        (error) => this.formError = error.title
-      );
+        error: (error) => this.formError = error.title
+      });
   }
 
   // PRIVATE COMPONENT FUNCTIONS ==============================================
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.spec.ts
index 79ee6d9b8..fb19e57fa 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.spec.ts
@@ -21,7 +21,6 @@ import { CoreModule, DateTranslatePipe } from '@rero/ng-core';
 import { AppSettingsService, testUserPatronWithSettings } from '@rero/shared';
 import { cloneDeep } from 'lodash-es';
 import { SharedModule } from '@rero/shared';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { PatronProfilePersonalComponent } from './patron-profile-personal.component';
 
 describe('PatronProfilePersonalComponent', () => {
@@ -54,7 +53,6 @@ describe('PatronProfilePersonalComponent', () => {
         HttpClientTestingModule
       ],
       providers: [
-        BsLocaleService,
         { provide: AppSettingsService, useValue: appSettingsServiceSpy }
       ]
     })
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts
index 0c8d8e719..08f8ca922 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { AppSettingsService, IPatron } from '@rero/shared';
 
 @Component({
@@ -24,6 +24,8 @@ import { AppSettingsService, IPatron } from '@rero/shared';
 })
 export class PatronProfilePersonalComponent {
 
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+
   /** User record */
   @Input() user: any;
 
@@ -41,11 +43,4 @@ export class PatronProfilePersonalComponent {
   get disabledButtonOnReadyOnly(): boolean {
     return !this.appSettingsService.settings.userProfile.readOnly;
   }
-
-  /**
-   * Constructor
-   *
-   * @param appSettingsService - AppSettingsService
-   */
-  constructor(private appSettingsService: AppSettingsService) {}
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.spec.ts
index eb735f433..5b4439929 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.spec.ts
@@ -20,7 +20,6 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { SharedModule, testUserPatronWithSettings, UserApiService, UserService } from '@rero/shared';
 import { cloneDeep } from 'lodash-es';
-import { ToastrModule } from 'ngx-toastr';
 import { of } from 'rxjs';
 import { PatronProfileMenuService } from '../../patron-profile-menu.service';
 import { PatronProfileRequestComponent } from './patron-profile-request.component';
@@ -52,7 +51,6 @@ describe('PatronProfileRequestComponent', () => {
       imports: [
         HttpClientTestingModule,
         TranslateModule.forRoot(),
-        ToastrModule.forRoot(),
         SharedModule
       ],
       providers: [
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts
index 46bbad49a..bdc5f9d47 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts
@@ -14,9 +14,10 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { ToastrService } from 'ngx-toastr';
+import { CONFIG } from '@rero/ng-core';
+import { MessageService } from 'primeng/api';
 import { LoanApiService } from '../../../api/loan-api.service';
 import { PatronProfileMenuService } from '../../patron-profile-menu.service';
 import { PatronProfileService } from '../../patron-profile.service';
@@ -28,6 +29,12 @@ import { PatronProfileService } from '../../patron-profile.service';
 })
 export class PatronProfileRequestComponent {
 
+  private loanApiService: LoanApiService = inject(LoanApiService);
+  private translateService: TranslateService = inject(TranslateService);
+  private patronProfileService: PatronProfileService = inject(PatronProfileService);
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+  private messageService: MessageService = inject(MessageService);
+
   /** Request record */
   @Input() record: any;
 
@@ -48,22 +55,6 @@ export class PatronProfileRequestComponent {
     return this.patronProfileMenuService.currentPatron.organisation.code;
   }
 
-  /**
-   * Constructor
-   * @param loanApiService - LoanApiService
-   * @param translateService - TranslateService
-   * @param toastService - ToastrService
-   * @param patronProfileService - PatronProfileService
-   * @param patronProfileMenuService - PatronProfileMenuService
-   */
-  constructor(
-    private loanApiService: LoanApiService,
-    private translateService: TranslateService,
-    private toastService: ToastrService,
-    private patronProfileService: PatronProfileService,
-    private patronProfileMenuService: PatronProfileMenuService
-  ) {}
-
   /** Cancel a request */
   cancel(): void {
     const patronPid = this.patronProfileMenuService.currentPatron.pid;
@@ -76,16 +67,21 @@ export class PatronProfileRequestComponent {
       if (cancelLoan !== undefined) {
         this.patronProfileService.cancelRequest(this.record.metadata.pid);
         this.actionDone = true;
-        this.toastService.success(
-          this.translateService.instant('The request has been cancelled.'),
-          this.translateService.instant('Success')
-        );
+        this.messageService.add({
+          severity: 'success',
+          summary: this.translateService.instant('Success'),
+          detail: this.translateService.instant('The request has been cancelled.'),
+          life: CONFIG.MESSAGE_LIFE
+        });
       } else {
         this.cancelInProgress = false;
-        this.toastService.error(
-          this.translateService.instant('Error during the cancellation of the request.'),
-          this.translateService.instant('Error')
-        );
+        this.messageService.add({
+          severity: 'error',
+          summary: this.translateService.instant('Error'),
+          detail: this.translateService.instant('Error during the cancellation of the request.'),
+          sticky: true,
+          closable: true
+        });
       }
     });
   }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.ts
index ef10c69ba..3145140c8 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, OnDestroy, OnInit } from '@angular/core';
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { Error, Record } from '@rero/ng-core';
 import { Paginator } from '@rero/shared';
@@ -22,12 +22,17 @@ import { Observable, Subscription } from 'rxjs';
 import { LoanApiService } from '../../api/loan-api.service';
 import { PatronProfileMenuService } from '../patron-profile-menu.service';
 import { ITabEvent, PatronProfileService } from '../patron-profile.service';
+
 @Component({
   selector: 'public-search-patron-profile-requests',
   templateUrl: './patron-profile-requests.component.html'
 })
 export class PatronProfileRequestsComponent implements OnInit, OnDestroy {
 
+  private loanApiService: LoanApiService = inject(LoanApiService);
+  private patronProfileService: PatronProfileService = inject(PatronProfileService);
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+
   /** First call of get record */
   loaded = false;
 
@@ -40,18 +45,6 @@ export class PatronProfileRequestsComponent implements OnInit, OnDestroy {
   /** Observable subscription */
   private subscription = new Subscription();
 
-  /**
-   * Constructor
-   * @param loanApiService - LoanApiService
-   * @param patronProfileService - PatronProfileService
-   * @param patronProfileMenuService - PatronProfileMenuService
-   */
-  constructor(
-    private loanApiService: LoanApiService,
-    private patronProfileService: PatronProfileService,
-    private patronProfileMenuService: PatronProfileMenuService
-  ) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this.paginator = new Paginator();
diff --git a/projects/public-search/src/app/patron-profile/patron-profile.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile.component.spec.ts
index d2ac904e8..bd3b46bc7 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile.component.spec.ts
@@ -22,8 +22,6 @@ import { TranslateModule } from '@ngx-translate/core';
 import { CoreModule } from '@rero/ng-core';
 import { SharedModule, testUserPatronWithSettings, UserApiService, UserService } from '@rero/shared';
 import { cloneDeep } from 'lodash-es';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
-import { TabsModule } from 'ngx-bootstrap/tabs';
 import { of } from 'rxjs';
 import { IllRequestApiService } from '../api/ill-request-api.service';
 import { LoanApiService } from '../api/loan-api.service';
@@ -77,13 +75,11 @@ describe('PatronProfileComponent', () => {
       imports: [
         HttpClientTestingModule,
         TranslateModule.forRoot(),
-        TabsModule.forRoot(),
         CoreModule,
         SharedModule,
         LoadingBarModule
       ],
       providers: [
-        BsLocaleService,
         { provide: UserApiService, useValue: userApiServiceSpy },
         { provide: LoanApiService, useValue: loanApiServiceSpy },
         { provide: OperationLogsApiService, use: operationLogsApiServiceSpy },
diff --git a/projects/public-search/src/app/patron-profile/patron-profile.component.ts b/projects/public-search/src/app/patron-profile/patron-profile.component.ts
index 27c90113e..52b2702df 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile.component.ts
@@ -14,11 +14,11 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Component, inject, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Record, RecordService } from '@rero/ng-core';
 import { IPatron, UserService } from '@rero/shared';
 import { TabsetComponent } from 'ngx-bootstrap/tabs';
-import { Subscription, forkJoin } from 'rxjs';
+import { forkJoin, Subscription } from 'rxjs';
 import { IllRequestApiService } from '../api/ill-request-api.service';
 import { LoanApiService } from '../api/loan-api.service';
 import { OperationLogsApiService } from '../api/operation-logs-api.service';
@@ -32,6 +32,15 @@ import { PatronProfileService } from './patron-profile.service';
 })
 export class PatronProfileComponent implements OnInit, OnDestroy {
 
+  private patronTransactionApiService: PatronTransactionApiService = inject(PatronTransactionApiService);
+  private recordService: RecordService = inject(RecordService);
+  private loanApiService: LoanApiService = inject(LoanApiService);
+  private illRequestApiService: IllRequestApiService = inject(IllRequestApiService);
+  private patronProfileService: PatronProfileService = inject(PatronProfileService);
+  private userService: UserService = inject(UserService);
+  private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
+  private operationLogsApiService: OperationLogsApiService = inject(OperationLogsApiService);
+
   /** Available Tabs */
   @ViewChild('staticTabs', { static: false }) staticTabs: TabsetComponent;
 
@@ -89,28 +98,6 @@ export class PatronProfileComponent implements OnInit, OnDestroy {
     return this.patronProfileMenuService.currentPatron;
   }
 
-  /**
-   * Constructor
-   * @param patronTransactionApiService - PatronTransactionApiService
-   * @param recordService - RecordService
-   * @param loanApiService - LoanApiService
-   * @param illRequestApiService - IllRequestApiService
-   * @param patronProfileService - PatronProfileService
-   * @param userService - UserService
-   * @param patronProfileMenuService - PatronProfileMenuService
-   * @param operationLogsService - OperationLogsService
-   */
-  constructor(
-    private patronTransactionApiService: PatronTransactionApiService,
-    private recordService: RecordService,
-    private loanApiService: LoanApiService,
-    private illRequestApiService: IllRequestApiService,
-    private patronProfileService: PatronProfileService,
-    private userService: UserService,
-    private patronProfileMenuService: PatronProfileMenuService,
-    private operationLogsApiService: OperationLogsApiService
-  ) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     this.feeTotal = 0;
diff --git a/projects/public-search/src/app/pipe/array-translate.pipe.ts b/projects/public-search/src/app/pipe/array-translate.pipe.ts
index 40842b619..0c514c932 100644
--- a/projects/public-search/src/app/pipe/array-translate.pipe.ts
+++ b/projects/public-search/src/app/pipe/array-translate.pipe.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 @Pipe({
@@ -22,11 +22,7 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class ArrayTranslatePipe implements PipeTransform {
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  constructor(private translateService: TranslateService) {}
+  private translateService: TranslateService = inject(TranslateService);
 
   /**
    * Translate all elements
diff --git a/projects/public-search/src/app/pipe/journal-volume.pipe.ts b/projects/public-search/src/app/pipe/journal-volume.pipe.ts
index c800d49e4..ad9562f50 100644
--- a/projects/public-search/src/app/pipe/journal-volume.pipe.ts
+++ b/projects/public-search/src/app/pipe/journal-volume.pipe.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 @Pipe({
@@ -22,11 +22,7 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class JournalVolumePipe implements PipeTransform {
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  public constructor(private translateService: TranslateService) {}
+  private translateService: TranslateService = inject(TranslateService);
 
   /**
    * Transform
diff --git a/projects/public-search/src/app/routes/base-route.ts b/projects/public-search/src/app/routes/base-route.ts
index 3fcdb5505..5e9e2b12e 100644
--- a/projects/public-search/src/app/routes/base-route.ts
+++ b/projects/public-search/src/app/routes/base-route.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,18 +15,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { inject } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable, Subscriber } from 'rxjs';
 
 export class BaseRoute {
 
-  /**
-   * Constructor
-   * @param _translateService - TranslateService
-   */
-  protected constructor(
-    protected _translateService: TranslateService
-  ) {}
+  protected translateService: TranslateService = inject(TranslateService);
 
   /**
    * Filter aggregations
@@ -36,7 +31,7 @@ export class BaseRoute {
   protected aggFilter(aggregations: object): Observable<any> {
     const obs = new Observable((observer: Subscriber<any>): void => {
       observer.next(this.aggregationFilter(aggregations));
-      this._translateService.onLangChange.subscribe(() => {
+      this.translateService.onLangChange.subscribe(() => {
         observer.next(this.aggregationFilter(aggregations));
       });
     });
@@ -58,7 +53,7 @@ export class BaseRoute {
     Object.keys(aggregations).forEach(aggregation => {
       if (aggregation.indexOf('__') > -1) {
         const splitted = aggregation.split('__');
-        if (this._translateService.currentLang === splitted[1]) {
+        if (this.translateService.currentLang === splitted[1]) {
           aggs[aggregation] = aggregations[aggregation];
         }
       } else {
diff --git a/projects/public-search/src/app/routes/collections-route.service.ts b/projects/public-search/src/app/routes/collections-route.service.ts
index 3a8538780..04fe83393 100644
--- a/projects/public-search/src/app/routes/collections-route.service.ts
+++ b/projects/public-search/src/app/routes/collections-route.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,7 +17,6 @@
 
 import { Injectable } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { TranslateService } from '@ngx-translate/core';
 import { RecordSearchPageComponent } from '@rero/ng-core';
 import { of } from 'rxjs';
 import { CollectionBriefComponent } from '../collection-brief/collection-brief.component';
@@ -33,14 +32,6 @@ export class CollectionsRouteService extends BaseRoute implements ResourceRouteI
   /** loaded configuration (viewcode) */
   private availableConfig = [];
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  constructor(translateService: TranslateService) {
-    super(translateService);
-  }
-
   /**
    * Resource name of route(s)
    */
@@ -51,7 +42,7 @@ export class CollectionsRouteService extends BaseRoute implements ResourceRouteI
   /**
    * Create route
    * @param viewcode - string
-   * @return dictionnary route configuration or null if loaded
+   * @return dictionary route configuration or null if loaded
    */
   create(viewcode: string): null | {} {
     if (!(this.availableConfig.some(v => v === viewcode))) {
diff --git a/projects/public-search/src/app/routes/documents-route.service.ts b/projects/public-search/src/app/routes/documents-route.service.ts
index a03753196..0b51ec363 100644
--- a/projects/public-search/src/app/routes/documents-route.service.ts
+++ b/projects/public-search/src/app/routes/documents-route.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,10 +16,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
-import { TranslateService } from '@ngx-translate/core';
 import { EntityBriefViewComponent } from '@rero/shared';
 import { of } from 'rxjs';
 import { AppConfigService } from '../app-config.service';
@@ -33,6 +32,9 @@ import { ResourceRouteInterface } from './resource-route-interface';
 })
 export class DocumentsRouteService extends BaseRoute implements ResourceRouteInterface {
 
+  private appConfigService: AppConfigService = inject(AppConfigService);
+  private route: ActivatedRoute = inject(ActivatedRoute);
+
   /** loaded configuration (viewcode) */
   private availableConfig = [];
 
@@ -50,20 +52,6 @@ export class DocumentsRouteService extends BaseRoute implements ResourceRouteInt
     }
   ];
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   * @param appConfigService - AppConfigService
-   * @param _route - ActivatedRoute
-   */
-  constructor(
-    translateService: TranslateService,
-    private appConfigService: AppConfigService,
-    private _route: ActivatedRoute
-  ) {
-    super(translateService);
-  }
-
   /**
    * Resource name of routes
    */
@@ -113,7 +101,7 @@ export class DocumentsRouteService extends BaseRoute implements ResourceRouteInt
               aggregationsOrder: this.aggregations(viewcode),
               aggregationsExpand: () => {
                 const expand = ['document_type', 'fiction_statement'];
-                const queryParams = this._route.snapshot.queryParams;
+                const queryParams = this.route.snapshot.queryParams;
                 if (this.appConfigService.globalViewName === viewcode) {
                   if (queryParams.location || queryParams.library) {
                     expand.push('organisation');
@@ -256,7 +244,7 @@ export class DocumentsRouteService extends BaseRoute implements ResourceRouteInt
    */
   private _sortOptions() {
     const options = this._options;
-    this._translateService.onLangChange.subscribe((translate: any) => {
+    this.translateService.onLangChange.subscribe((translate: any) => {
       const key = options.findIndex((option: any) => option.label === 'Name');
       switch (translate.lang) {
         case 'de':
diff --git a/projects/public-search/src/app/routes/route-collection.service.ts b/projects/public-search/src/app/routes/route-collection.service.ts
index a6160d0dd..17b09a6d4 100644
--- a/projects/public-search/src/app/routes/route-collection.service.ts
+++ b/projects/public-search/src/app/routes/route-collection.service.ts
@@ -1,6 +1,6 @@
 /*
 * RERO ILS UI
-* Copyright (C) 2020 RERO
+* Copyright (C) 2020-2024 RERO
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-import { Injectable, InjectionToken, Injector } from '@angular/core';
+import { inject, Injectable, InjectionToken, Injector } from '@angular/core';
 import { ResourceRouteInterface } from './resource-route-interface';
 
 // Pattern to find all route(s) service into the dependency injection
@@ -27,20 +27,16 @@ export const resourceRouteToken = new InjectionToken<ResourceRouteInterface[]>
 })
 export class RouteCollectionService {
 
+  private injector: Injector = inject(Injector);
+
   /** Available resources route config */
   private resourcesAvailable = {};
 
-  /**
-   * Constructor
-   * @param _injector - Injector
-   */
-  constructor(private _injector: Injector) { }
-
   /**
    * Get Route Service implemented with ResourceRouteInterface
    */
   load() {
-    const routes = this._injector.get(resourceRouteToken);
+    const routes = this.injector.get(resourceRouteToken);
     routes.map((route: ResourceRouteInterface) => {
       route.getResources().map((resource: string) => {
         this.resourcesAvailable[resource] = route;
diff --git a/projects/public-search/src/app/routes/route-factory.service.ts b/projects/public-search/src/app/routes/route-factory.service.ts
index 6098ab394..a0e065f5f 100644
--- a/projects/public-search/src/app/routes/route-factory.service.ts
+++ b/projects/public-search/src/app/routes/route-factory.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Router } from '@angular/router';
 import { RouteCollectionService } from './route-collection.service';
 
@@ -24,15 +24,8 @@ import { RouteCollectionService } from './route-collection.service';
 })
 export class RouteFactoryService {
 
-  /**
-   * Constructor
-   * @param _router - Router
-   * @param _routeCollectionService - RouteCollectionService
-   */
-  constructor(
-    private _router: Router,
-    private _routeCollectionService: RouteCollectionService
-  ) {}
+  private router: Router = inject(Router);
+  private routeCollectionService: RouteCollectionService = inject(RouteCollectionService);
 
   /**
    * Initialize route by resource name
@@ -41,11 +34,11 @@ export class RouteFactoryService {
    * @throws Error if resource doesn't exists
    */
   createRouteByResourceNameAndView(resource: string, view: string) {
-    const service = this._routeCollectionService.getRouteByResourceName(resource);
+    const service = this.routeCollectionService.getRouteByResourceName(resource);
     if (service) {
       const routeConfig = service.create(view);
       if (routeConfig) {
-        this._router.config.push(routeConfig);
+        this.router.config.push(routeConfig);
       }
     }
   }
diff --git a/projects/public-search/src/app/scss/styles.scss b/projects/public-search/src/app/scss/styles.scss
index 9f276a5d8..10cc670ac 100644
--- a/projects/public-search/src/app/scss/styles.scss
+++ b/projects/public-search/src/app/scss/styles.scss
@@ -19,7 +19,6 @@
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
 @import 'bootstrap/scss/mixins';
-@import 'ngx-toastr/toastr-bs4-alert';
 
 // ADJUST BOOTSTRAP / PRIMENG -------------------
 .col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
@@ -37,10 +36,6 @@ label {
   align-items: baseline;
 }
 
-.toast-container .ngx-toastr {
-  width: 450px !important; // override width for all toastr message
-}
-
 .label-title:after {
   content: ":"
 }
diff --git a/projects/public-search/src/app/search-bar/search-bar.component.spec.ts b/projects/public-search/src/app/search-bar/search-bar.component.spec.ts
deleted file mode 100644
index c8733ff5c..000000000
--- a/projects/public-search/src/app/search-bar/search-bar.component.spec.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2020 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { HttpClientModule } from '@angular/common/http';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RouterTestingModule } from '@angular/router/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { RecordModule } from '@rero/ng-core';
-import { SharedModule } from '@rero/shared';
-import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
-import { SearchBarComponent } from './search-bar.component';
-
-
-describe('SearchBarComponent', () => {
-  let component: SearchBarComponent;
-  let fixture: ComponentFixture<SearchBarComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      declarations: [ SearchBarComponent ],
-      imports: [
-        RouterTestingModule,
-        HttpClientModule,
-        FormsModule,
-        ReactiveFormsModule,
-        RecordModule,
-        TranslateModule.forRoot(),
-        TypeaheadModule.forRoot(),
-        SharedModule
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(SearchBarComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/projects/public-search/src/app/search-bar/search-bar.component.ts b/projects/public-search/src/app/search-bar/search-bar.component.ts
deleted file mode 100644
index 9a57a57d7..000000000
--- a/projects/public-search/src/app/search-bar/search-bar.component.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2019-2024 RERO
- * Copyright (C) 2019-2023 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Component, Input, OnInit } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { SearchBarConfigService } from '@rero/shared';
-
-@Component({
-  selector: 'public-search-search-bar',
-  templateUrl: './search-bar.component.html'
-})
-export class SearchBarComponent implements OnInit {
-
-  @Input() language: string;
-  @Input() viewcode: string;
-  @Input() size: string = undefined;
-  @Input() placeholder: string;
-  @Input() maxLengthSuggestion = 100;
-
-
-  get action(): string {
-    return `/${this.viewcode}/search/documents`;
-  }
-
-  get typeaheadOptionsLimit(): number {
-    return this.searchBarConfigService.typeaheadOptionsLimit;
-  }
-
-  /** Array types config */
-  recordTypes = [];
-
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   * @param searchBarConfigService - SearchBarConfigService
-   */
-  constructor(
-    private translateService: TranslateService,
-    private searchBarConfigService: SearchBarConfigService
-  ) {
-    this.placeholder = this.translateService.instant('Search');
-  }
-
-  /** OnInit hook */
-  ngOnInit(): void {
-    if (this.language) {
-      this.translateService.use(this.language);
-    }
-    this.recordTypes = this.searchBarConfigService.getConfig(
-      false, this, this.viewcode, this.maxLengthSuggestion
-    );
-  }
-}
diff --git a/projects/public-search/src/app/service/bucket-name.service.ts b/projects/public-search/src/app/service/bucket-name.service.ts
index b6ed1a71e..f64de7b6e 100644
--- a/projects/public-search/src/app/service/bucket-name.service.ts
+++ b/projects/public-search/src/app/service/bucket-name.service.ts
@@ -15,8 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
-import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
+import { inject, Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { IBucketNameService } from '@rero/ng-core';
 import { Observable, of } from 'rxjs';
@@ -26,13 +25,7 @@ import { Observable, of } from 'rxjs';
 })
 export class BucketNameService implements IBucketNameService {
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  constructor(
-    private translateService: TranslateService
-  ) { }
+  private translateService: TranslateService = inject(TranslateService);
 
   /**
    * Transform aggregation name
diff --git a/projects/public-search/src/index.html b/projects/public-search/src/index.html
index e2c979ea6..56c0019cb 100644
--- a/projects/public-search/src/index.html
+++ b/projects/public-search/src/index.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019 RERO
+  Copyright (C) 201-2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -52,7 +52,8 @@
                 </li>
               </ul>
             </div>
-            <main-search-bar viewcode="global" language="en"></main-search-bar>
+            <!-- TODO: Input does'nt work on WebComponent -->
+            <main-search-bar isAdmin="false" viewCode="global"></main-search-bar>
           </nav>
         <public-search-root></public-search-root>
     </div>
diff --git a/projects/public-user-password-change/src/app/app-initializer.service.ts b/projects/public-user-password-change/src/app/app-initializer.service.ts
index a4f8e62c2..6b28fd5c9 100644
--- a/projects/public-user-password-change/src/app/app-initializer.service.ts
+++ b/projects/public-user-password-change/src/app/app-initializer.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,8 +14,8 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@rero/ng-core';
+import { inject, Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { AppSettingsService, UserService } from '@rero/shared';
 import { AppConfigService } from 'projects/admin/src/app/service/app-config.service';
 import { Observable } from 'rxjs';
@@ -26,36 +26,26 @@ import { switchMap } from 'rxjs/operators';
 })
 export class AppInitializerService {
 
-  /**
-   * Constructor
-   * @param _userService - UserService
-   * @param _translateService - TranslateService
-   * @param _appSettingsService - AppSettingsService
-   * @param _appConfigService - AppConfigService
-   */
-  constructor(
-    private _userService: UserService,
-    private _translateService: TranslateService,
-    private _appSettingsService: AppSettingsService,
-    private _appConfigService: AppConfigService
-  ) { }
+  private userService: UserService = inject(UserService);
+  private translateService: TranslateService = inject(TranslateService);
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+  private appConfigService: AppConfigService = inject(AppConfigService);
 
-    /** load */
     load(): Observable<any> {
-      return this._userService.load().pipe(
+      return this.userService.load().pipe(
         switchMap(() => this.initTranslateService())
       );
     }
-      /** Initialize Translate Service */
+
   private initTranslateService(): Observable<any> {
-    const language = this._appSettingsService.settings.language;
+    const {language} = this.appSettingsService.settings;
     if (language) {
-      return this._translateService.setLanguage(language);
+      return this.translateService.use(language);
     } else {
-      const browserLang = this._translateService.getBrowserLang();
-      return this._translateService.setLanguage(
-        browserLang.match(this._appConfigService.languages.join('|')) ?
-          browserLang : this._appConfigService.defaultLanguage
+      const browserLang = this.translateService.getBrowserLang();
+      return this.translateService.use(
+        browserLang.match(this.appConfigService.languages.join('|')) ?
+          browserLang : this.appConfigService.defaultLanguage
       );
     }
   }
diff --git a/projects/public-user-password-change/src/app/app.module.ts b/projects/public-user-password-change/src/app/app.module.ts
index 49e5c3ea6..f3b5b4893 100644
--- a/projects/public-user-password-change/src/app/app.module.ts
+++ b/projects/public-user-password-change/src/app/app.module.ts
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core';
+import { APP_INITIALIZER, DoBootstrap, inject, Injector, NgModule } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -24,17 +24,17 @@ import { FormlyModule } from '@ngx-formly/core';
 import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
 import { LoadingBarModule } from '@ngx-loading-bar/core';
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
-import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { CoreConfigService, CoreModule, RecordModule, TranslateLoader } from '@rero/ng-core';
+import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CoreConfigService, CoreModule, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
 import { SharedModule } from '@rero/shared';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
-import { PatronProfilePasswordComponent, fieldPasswordMatchValidator } from 'projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component';
+import { fieldPasswordMatchValidator, PatronProfilePasswordComponent } from 'projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component';
+import { Observable } from 'rxjs';
 import { AppConfigService } from './app-config.service';
 import { AppInitializerService } from './app-initializer.service';
 
 /** function to instantiate the application  */
-export function appInitFactory(appInitializerService: AppInitializerService) {
-  return () => appInitializerService.load().toPromise();
+export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
+  return () => appInitializerService.load();
 }
 
 @NgModule({
@@ -66,19 +66,18 @@ export function appInitFactory(appInitializerService: AppInitializerService) {
     SharedModule,
     LoadingBarHttpClientModule,
     LoadingBarModule,
-    TooltipModule.forRoot(),
   ],
   providers: [
+    { provide: TranslateService, useClass: NgCoreTranslateService },
     { provide: APP_INITIALIZER, useFactory: appInitFactory, deps: [AppInitializerService], multi: true },
     { provide: CoreConfigService, useClass: AppConfigService }
   ]
 })
 export class AppModule implements DoBootstrap {
 
-  constructor(private injector: Injector) {
-  }
+  private injector: Injector = inject(Injector);
 
-  ngDoBootstrap() {
+  ngDoBootstrap(): void {
     if (!customElements.get('public-user-password-change')) {
       const element = createCustomElement(PatronProfilePasswordComponent, { injector: this.injector });
       customElements.define('public-user-password-change', element);
diff --git a/projects/public-user-profile-edit/src/app/app-initializer.service.ts b/projects/public-user-profile-edit/src/app/app-initializer.service.ts
index a4f8e62c2..6b28fd5c9 100644
--- a/projects/public-user-profile-edit/src/app/app-initializer.service.ts
+++ b/projects/public-user-profile-edit/src/app/app-initializer.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,8 +14,8 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@rero/ng-core';
+import { inject, Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import { AppSettingsService, UserService } from '@rero/shared';
 import { AppConfigService } from 'projects/admin/src/app/service/app-config.service';
 import { Observable } from 'rxjs';
@@ -26,36 +26,26 @@ import { switchMap } from 'rxjs/operators';
 })
 export class AppInitializerService {
 
-  /**
-   * Constructor
-   * @param _userService - UserService
-   * @param _translateService - TranslateService
-   * @param _appSettingsService - AppSettingsService
-   * @param _appConfigService - AppConfigService
-   */
-  constructor(
-    private _userService: UserService,
-    private _translateService: TranslateService,
-    private _appSettingsService: AppSettingsService,
-    private _appConfigService: AppConfigService
-  ) { }
+  private userService: UserService = inject(UserService);
+  private translateService: TranslateService = inject(TranslateService);
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+  private appConfigService: AppConfigService = inject(AppConfigService);
 
-    /** load */
     load(): Observable<any> {
-      return this._userService.load().pipe(
+      return this.userService.load().pipe(
         switchMap(() => this.initTranslateService())
       );
     }
-      /** Initialize Translate Service */
+
   private initTranslateService(): Observable<any> {
-    const language = this._appSettingsService.settings.language;
+    const {language} = this.appSettingsService.settings;
     if (language) {
-      return this._translateService.setLanguage(language);
+      return this.translateService.use(language);
     } else {
-      const browserLang = this._translateService.getBrowserLang();
-      return this._translateService.setLanguage(
-        browserLang.match(this._appConfigService.languages.join('|')) ?
-          browserLang : this._appConfigService.defaultLanguage
+      const browserLang = this.translateService.getBrowserLang();
+      return this.translateService.use(
+        browserLang.match(this.appConfigService.languages.join('|')) ?
+          browserLang : this.appConfigService.defaultLanguage
       );
     }
   }
diff --git a/projects/public-user-profile-edit/src/app/app.module.ts b/projects/public-user-profile-edit/src/app/app.module.ts
index 180ca7bb2..39829f35b 100644
--- a/projects/public-user-profile-edit/src/app/app.module.ts
+++ b/projects/public-user-profile-edit/src/app/app.module.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
+ * Copyright (C) 2022-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, Injector, NgModule } from '@angular/core';
+import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, inject, Injector, NgModule } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
@@ -23,20 +23,19 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
 import { LoadingBarModule } from '@ngx-loading-bar/core';
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
-import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { CoreConfigService, CoreModule, RecordModule, TranslateLoader } from '@rero/ng-core';
+import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { CoreConfigService, CoreModule, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
 import { SharedModule } from '@rero/shared';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { PatronProfilePersonalEditorComponent } from 'projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component';
+import { Observable } from 'rxjs';
 import { AppConfigService } from './app-config.service';
 import { AppInitializerService } from './app-initializer.service';
 
 /** function to instantiate the application  */
-export function appInitFactory(appInitializerService: AppInitializerService) {
-  return () => appInitializerService.load().toPromise();
+export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
+  return () => appInitializerService.load();
 }
 
-
 @NgModule({
   declarations: [
     PatronProfilePersonalEditorComponent
@@ -61,9 +60,9 @@ export function appInitFactory(appInitializerService: AppInitializerService) {
     SharedModule,
     LoadingBarHttpClientModule,
     LoadingBarModule,
-    TooltipModule.forRoot(),
   ],
   providers: [
+    { provide: TranslateService, useClass: NgCoreTranslateService },
     { provide: APP_INITIALIZER, useFactory: appInitFactory, deps: [AppInitializerService], multi: true },
     { provide: CoreConfigService, useClass: AppConfigService }
   ],
@@ -73,9 +72,9 @@ export function appInitFactory(appInitializerService: AppInitializerService) {
 })
 export class AppModule implements DoBootstrap {
 
-  constructor(private injector: Injector) {}
+  private injector: Injector = inject(Injector);
 
-  ngDoBootstrap() {
+  ngDoBootstrap(): void {
     if (!customElements.get('public-user-profile-edit')) {
       const element = createCustomElement(PatronProfilePersonalEditorComponent, { injector: this.injector });
       customElements.define('public-user-profile-edit', element);
diff --git a/projects/search-bar/src/app/app-initializer.service.ts b/projects/search-bar/src/app/app-initializer.service.ts
index 7c900ffef..36c91e824 100644
--- a/projects/search-bar/src/app/app-initializer.service.ts
+++ b/projects/search-bar/src/app/app-initializer.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { UserService } from '@rero/shared';
 import { Observable } from 'rxjs';
 
@@ -24,16 +24,10 @@ import { Observable } from 'rxjs';
 })
 export class AppInitializerService {
 
-  /**
-   * Constructor
-   * @param _userService - UserService
-   */
-  constructor(
-    private _userService: UserService
-  ) { }
+  private userService: UserService = inject(UserService);
 
     /** load */
     load(): Observable<any> {
-      return this._userService.load();
+      return this.userService.load();
     }
 }
diff --git a/projects/search-bar/src/app/app.module.ts b/projects/search-bar/src/app/app.module.ts
index 7ed682b5e..68c32713e 100644
--- a/projects/search-bar/src/app/app.module.ts
+++ b/projects/search-bar/src/app/app.module.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2019-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,36 +16,30 @@
  */
 
 import { HttpClient, HttpClientModule } from '@angular/common/http';
-import { APP_INITIALIZER, DoBootstrap, Injector, NgModule } from '@angular/core';
+import { APP_INITIALIZER, DoBootstrap, inject, Injector, NgModule } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule } from '@angular/router';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { CoreConfigService, RecordModule, TranslateLoader } from '@rero/ng-core';
-import { SharedModule } from '@rero/shared';
-import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
-import { SearchBarComponent } from 'projects/public-search/src/app/search-bar/search-bar.component';
+import { RemoteSearchComponent, SharedModule } from '@rero/shared';
 import { AppInitializerService } from './app-initializer.service';
+import { Observable } from 'rxjs';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 
 /** function to instantiate the application  */
-export function appInitFactory(appInitializerService: AppInitializerService): () => Promise<any> {
-  return () => appInitializerService.load().toPromise();
+export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
+  return () => appInitializerService.load();
 }
 
 
 @NgModule({
-    declarations: [
-        SearchBarComponent
-    ],
+    declarations: [],
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
-        RouterModule.forRoot([]),
         HttpClientModule,
-        FormsModule,
         RecordModule,
         ReactiveFormsModule,
         TranslateModule.forRoot({
@@ -56,7 +50,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
             },
             isolate: false
         }),
-        TypeaheadModule.forRoot(),
         SharedModule
     ],
     providers: [
@@ -67,12 +60,11 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
 })
 export class AppModule implements DoBootstrap {
 
-  constructor(private injector: Injector) {
-  }
+  private injector: Injector = inject(Injector);
 
-  ngDoBootstrap() {
+  ngDoBootstrap(): void {
     if (!customElements.get('main-search-bar')) {
-      const searchBar = createCustomElement(SearchBarComponent, { injector: this.injector });
+      const searchBar = createCustomElement(RemoteSearchComponent, { injector: this.injector });
       customElements.define('main-search-bar', searchBar);
     }
   }
diff --git a/projects/search-bar/src/index.html b/projects/search-bar/src/index.html
index 19c4d0a92..ff0ba1920 100644
--- a/projects/search-bar/src/index.html
+++ b/projects/search-bar/src/index.html
@@ -1,22 +1,22 @@
 <!doctype html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>SearchBar</title>
-  <base href="/">
+  <head>
+    <meta charset="utf-8">
+    <title>SearchBar</title>
+    <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
-</head>
-<body class="d-flex flex-column">
-  <container>
-  <h4>Search bar</h4>
-  <div class="mb-2">
-    <main-search-bar placeholder="Custom Placeholder" viewcode="aoste"></main-search-bar>
-  </div>
-  <main-search-bar language="fr" size="large" viewcode="global"></main-search-bar>
-</container>
-</body>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" type="image/x-icon" href="favicon.ico">
+    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+  </head>
+  <body class="d-flex flex-column">
+    <div class="m-4">
+      <h4>Search bar</h4>
+      <div class="mb-3">
+        <main-search-bar admin="false" placeholder="Search (Aoste view)" viewcode="aoste"></main-search-bar>
+      </div>
+      <main-search-bar placeholder="Search (Admin view)"></main-search-bar>
+    </div>
+  </body>
 </html>
diff --git a/projects/shared/src/lib/api/user-api.service.ts b/projects/shared/src/lib/api/user-api.service.ts
index fccdb8613..d2b100261 100644
--- a/projects/shared/src/lib/api/user-api.service.ts
+++ b/projects/shared/src/lib/api/user-api.service.ts
@@ -14,10 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { HttpClient } from '@angular/common/http';
-import { Injectable } from '@angular/core';
-import { ApiService } from '@rero/ng-core';
+import { inject, Injectable } from '@angular/core';
+import { CoreConfigService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 import { User } from '../class/user';
 
@@ -26,20 +25,8 @@ import { User } from '../class/user';
 })
 export class UserApiService {
 
-  /** API Prefix, i.e. /api. */
-  private _apiPrefix = '';
-
-  /**
-   * Constructor
-   * @param httpClient - HttpClient
-   * @param apiService - ApiService
-   */
-  constructor(
-    private httpClient: HttpClient,
-    private apiService: ApiService
-  ) {
-    this._apiPrefix = this.apiService.endpointPrefix;
-  }
+  protected httpClient: HttpClient = inject(HttpClient);
+  protected configService: CoreConfigService = inject(CoreConfigService);
 
   /**
    * Get logged user
@@ -62,7 +49,7 @@ export class UserApiService {
       new_password: password,
       new_password_confirm: password
     };
-    const url = `${this._apiPrefix}/change-password`;
+    const url = `${this.configService.apiEndpointPrefix}/change-password`;
     return this.httpClient.post<any>(url, data);
   }
 }
diff --git a/projects/shared/src/lib/component/action-button/action-button.component.ts b/projects/shared/src/lib/component/action-button/action-button.component.ts
index a7c86470c..7a7c67fae 100644
--- a/projects/shared/src/lib/component/action-button/action-button.component.ts
+++ b/projects/shared/src/lib/component/action-button/action-button.component.ts
@@ -15,39 +15,70 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, input, output } from '@angular/core';
 
 @Component({
   selector: 'shared-action-button',
   template: `
-    @if (!disabled) {
-      @if (url && url.length > 0) {
-        <button type="button" class="btn btn-sm {{ class }}" [title]="title" [routerLink]="url" [queryParams]="queryParams">
-          <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
-        </button>
+    @if (!disabled()) {
+      @if (routerLink()?.length > 0) {
+        <p-button
+          [label]="label()"
+          [icon]="icon()"
+          [title]="title()"
+          [severity]="severity()"
+          [styleClass]="class()"
+          [outlined]="outlined()"
+          size="small"
+          [routerLink]="routerLink()"
+          [queryParams]="queryParams()"
+        />
       } @else {
-        <button type="button" class="btn btn-sm {{ class }}" [title]="title" (click)="onClick($event)">
-          <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
-        </button>
+        <p-button
+          [label]="label()"
+          [icon]="icon()"
+          [title]="title()"
+          [severity]="severity()"
+          [class]="class()"
+          [outlined]="outlined()"
+          size="small"
+          (onClick)="onClick($event)"
+        />
       }
     } @else {
-      <button type="button" class="btn btn-sm disabled {{ class }}"
-              [title]="title" [popover]="tolTemplate" triggers="mouseenter:mouseleave">
-        <ng-container *ngTemplateOutlet="contentTpl"></ng-container>
-      </button>
-      <ng-template #tolTemplate><div [innerHtml]="message | nl2br"></div></ng-template>
+      <p-button
+        [label]="label()"
+        [icon]="icon()"
+        [title]="title()"
+        [severity]="severity()"
+        [style]="disabled() ? { opacity: 0.5 } : { opacity: 1 }"
+        [ngClass]="class()"
+        [outlined]="outlined()"
+        [pTooltip]="tooltipContent"
+        tooltipPosition="top"
+        [tooltipDisabled]="message() ? false : true"
+        size="small"
+        (onClick)="onClick($event)"
+      />
+      <ng-template #tooltipContent>
+        <span [innerHTML]="message() | nl2br"></span>
+      </ng-template>
     }
-    <ng-template #contentTpl><ng-content></ng-content></ng-template>
   `
 })
 export class ActionButtonComponent {
-  @Input() title: string;
-  @Input() url?: string[];
-  @Input() queryParams?: any;
-  @Input() class?: string;
-  @Input() disabled = false;
-  @Input() message?: string;
-  @Output() btnClick = new EventEmitter();
+  label = input<string>();
+  icon = input<string>();
+  title = input.required<string>();
+  severity = input<string>('primary');
+  routerLink = input<string[]>();
+  queryParams = input<any>();
+  class = input<string>();
+  outlined = input<boolean>(true);
+  rounded = input<boolean>(false);
+  disabled = input<boolean>(false);
+  message = input<string>();
+  btnClick = output<Event>();
 
   onClick($event: Event): void {
     if (!this.disabled) {
diff --git a/projects/shared/src/lib/component/documents/files/files.component.html b/projects/shared/src/lib/component/documents/files/files.component.html
index d99d75250..4b8af8533 100644
--- a/projects/shared/src/lib/component/documents/files/files.component.html
+++ b/projects/shared/src/lib/component/documents/files/files.component.html
@@ -112,7 +112,7 @@ <h4 id="dialog-sizes-name1" class="modal-title pull-left">
         type="button"
         class="close pull-right"
         aria-label="Close"
-        (click)="previewModalRef.hide()"
+        (click)="previewModalRef.close()"
       >
         <span aria-hidden="true">&times;</span>
       </button>
diff --git a/projects/shared/src/lib/component/documents/files/files.component.ts b/projects/shared/src/lib/component/documents/files/files.component.ts
index 610063edd..6e0451c6b 100644
--- a/projects/shared/src/lib/component/documents/files/files.component.ts
+++ b/projects/shared/src/lib/component/documents/files/files.component.ts
@@ -15,17 +15,16 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import { BreakpointObserver, BreakpointState, Breakpoints } from '@angular/cdk/layout';
 import { HttpClient } from '@angular/common/http';
-import { Component, Input, OnDestroy, OnInit, TemplateRef, ViewChild, inject } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, Type, ViewChild, inject } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 import { ApiService, Record, RecordService } from '@rero/ng-core';
-import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { PrimeNGConfig } from 'primeng/api';
+import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Observable, Subscription, forkJoin, map, of, switchMap, tap } from 'rxjs';
 
-import { BreakpointObserver, BreakpointState, Breakpoints } from '@angular/cdk/layout';
-
 // file interface
 export interface File {
   // thumbnail URL
@@ -45,6 +44,16 @@ export interface File {
   styleUrl: './files.component.scss',
 })
 export class FilesComponent implements OnInit, OnDestroy {
+
+  protected ngConfigService: PrimeNGConfig = inject(PrimeNGConfig);
+  protected httpService: HttpClient = inject(HttpClient);
+  protected translateService: TranslateService = inject(TranslateService);
+  protected recordService: RecordService = inject(RecordService);
+  protected apiService: ApiService = inject(ApiService);
+  protected sanitizer: DomSanitizer = inject(DomSanitizer);
+  protected breakpointObserver: BreakpointObserver = inject(BreakpointObserver);
+  protected dialogService: DialogService = inject(DialogService);
+
   // input document pid
   @Input() documentPid: string;
 
@@ -66,34 +75,15 @@ export class FilesComponent implements OnInit, OnDestroy {
     url: SafeUrl;
   };
   // modal for the invenio previewer
-  previewModalRef: BsModalRef;
+  previewModalRef: DynamicDialogRef;
 
   // for modal
-  @ViewChild('previewModal')
-  previewModalTemplate: TemplateRef<any>;
-
-  // -------- Services -------------
-  // primeng configuration service
-  private ngConfigService = inject(PrimeNGConfig);
-  // http service
-  private httpService = inject(HttpClient);
-  // translation service
-  private translateService = inject(TranslateService);
-  // ng-core record service
-  private recordService = inject(RecordService);
-  // ng-core api service
-  private apiService = inject(ApiService);
-  // url sanitizer service
-  private sanitizer = inject(DomSanitizer);
-  // modal service
-  private modalService = inject(BsModalService);
-  // service to detect responsive breakpoints
-  private breakpointObserver = inject(BreakpointObserver);
+  @ViewChild('previewModal') previewModalTemplate: Type<any>;
 
   /** all component subscription */
   private subscriptions = new Subscription();
 
-  // contructor
+  // constructor
   constructor() {
     // to avoid primeng error
     // TODO: remove this when primeng will be fixed
@@ -241,13 +231,13 @@ export class FilesComponent implements OnInit, OnDestroy {
   }
 
   /**
-   * Get the font awsome class depending on the file mimetype.
+   * Get the font awesome class depending on the file mimetype.
    *
    * @param file
    * @returns the css class of the icon
    */
   getIcon(file): string {
-    const mimetype = file.mimetype;
+    const { mimetype } = file;
     if (mimetype == null) {
       return 'fa-file-o';
     }
@@ -278,8 +268,8 @@ export class FilesComponent implements OnInit, OnDestroy {
    */
 
   preview(file: File): void {
-    this.previewModalRef = this.modalService.show(this.previewModalTemplate, {
-      class: 'modal-lg',
+    this.previewModalRef = this.dialogService.open(this.previewModalTemplate, {
+      dismissableMask: true
     });
     this.previewFile = {
       label: file.label,
diff --git a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts
index 029a847b9..c48baad20 100644
--- a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts
+++ b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { AfterViewInit, Component, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
+import { AfterViewInit, Component, inject, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core';
 import { ResultItem } from '@rero/ng-core';
 import { Entity, EntityType } from '../../../class/entity';
 import { ExtractSourceFieldPipe } from '../../../pipe/extract-source-field.pipe';
@@ -48,6 +48,8 @@ import { EntityBriefViewRemotePersonComponent } from './entity-brief-view.person
 })
 export class EntityBriefViewComponent implements ResultItem, OnInit, AfterViewInit {
 
+  protected extractedSourceFieldPipe: ExtractSourceFieldPipe = inject(ExtractSourceFieldPipe);
+
   // COMPONENT ATTRIBUTES =====================================================
   /** The entity record to display */
   @Input() record: any;
@@ -71,13 +73,6 @@ export class EntityBriefViewComponent implements ResultItem, OnInit, AfterViewIn
   /** The component to use to build the entity body content. */
   private contentComponent: any = null;
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param extractedSourceFieldPipe: ExtractSourceFieldPipe
-   */
-  constructor(private extractedSourceFieldPipe: ExtractSourceFieldPipe) { }
-
   /** OnInit hook */
   ngOnInit(): void {
     switch (this.record.metadata.resource_type) {
diff --git a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.organisation.ts b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.organisation.ts
index 3ac9f7d21..a894c5afd 100644
--- a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.organisation.ts
+++ b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.organisation.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { ExtractSourceFieldPipe } from '../../../pipe/extract-source-field.pipe';
 
 @Component({
@@ -29,16 +29,12 @@ import { ExtractSourceFieldPipe } from '../../../pipe/extract-source-field.pipe'
 })
 export class EntityBriefViewRemoteOrganisationComponent implements OnInit {
 
+  protected pipe: ExtractSourceFieldPipe = inject(ExtractSourceFieldPipe);
+
   @Input() record: any;
 
   dates: Array<string> = [];
 
-  /**
-   * Constructor
-   * @param pipe - ExtractSourceFieldPipe
-   */
-  constructor(private pipe: ExtractSourceFieldPipe) {}
-
   ngOnInit(): void {
     this.dates = [
       this.pipe.transform(this.record.metadata, 'date_of_establishment'),
diff --git a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.person.ts b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.person.ts
index cf5845070..c6d8184ca 100644
--- a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.person.ts
+++ b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.person.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { ExtractSourceFieldPipe } from '../../../pipe/extract-source-field.pipe';
 
 @Component({
@@ -32,17 +32,13 @@ import { ExtractSourceFieldPipe } from '../../../pipe/extract-source-field.pipe'
 })
 export class EntityBriefViewRemotePersonComponent implements OnInit {
 
+  protected pipe: ExtractSourceFieldPipe = inject(ExtractSourceFieldPipe);
+
   @Input() record: any;
 
   dates: Array<string> = [];
   bibliographicInformation: string = null;
 
-  /**
-   * Constructor
-   * @param pipe - ExtractSourceFieldPipe
-   */
-  constructor(private pipe: ExtractSourceFieldPipe) {}
-
   ngOnInit(): void {
     this.dates = [
       this.pipe.transform(this.record.metadata, 'date_of_birth'),
diff --git a/projects/shared/src/lib/component/open-close-button.component.ts b/projects/shared/src/lib/component/open-close-button.component.ts
new file mode 100644
index 000000000..a5e38e2c2
--- /dev/null
+++ b/projects/shared/src/lib/component/open-close-button.component.ts
@@ -0,0 +1,47 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Component, input, OnChanges, output, signal, SimpleChanges } from '@angular/core';
+
+@Component({
+  selector: 'shared-open-close-button',
+  template: `
+  <p-button
+    [icon]="internalStatus ? 'fa fa-caret-right' : 'fa fa-caret-down'"
+    [outlined]="true"
+    [rounded]="true"
+    severity="secondary"
+    (onClick)="updateStatus()"
+  />
+  `
+})
+export class OpenCloseButtonComponent implements OnChanges {
+
+  collapsed = input<boolean>(true);
+
+  status = output<boolean>();
+
+  internalStatus: boolean = true;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    this.internalStatus = changes.collapsed.currentValue;
+  }
+
+  updateStatus(): void {
+    this.internalStatus = !this.internalStatus;
+    this.status.emit(this.internalStatus);
+  }
+}
diff --git a/projects/shared/src/lib/component/remote-search/remote-search-config.service.ts b/projects/shared/src/lib/component/remote-search/remote-search-config.service.ts
new file mode 100644
index 000000000..3aa723bf7
--- /dev/null
+++ b/projects/shared/src/lib/component/remote-search/remote-search-config.service.ts
@@ -0,0 +1,149 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { inject, Injectable } from "@angular/core";
+import { IRecordType, NgCoreTranslateService, TruncateTextPipe } from "@rero/ng-core";
+import { MainTitlePipe } from "../../pipe/main-title.pipe";
+import { AppSettingsService } from "../../service/app-settings.service";
+import { Entity } from "../../class/entity";
+
+@Injectable({
+  providedIn: null
+})
+export class RemoteSearchConfig {
+
+  protected mainTitlePipe: MainTitlePipe = inject(MainTitlePipe);
+  protected truncatePipe: TruncateTextPipe = inject(TruncateTextPipe);
+  protected translateService: NgCoreTranslateService = inject(NgCoreTranslateService);
+  protected appSettingsService: AppSettingsService = inject(AppSettingsService);
+
+  private isAdmin: boolean = false;
+
+  private viewCode: string | undefined;
+
+  private maxLengthSuggestion: number;
+
+  getConfig(isAdmin: boolean, viewCode?: string, maxLengthSuggestion?: number): IRecordType[] {
+    this.isAdmin = isAdmin;
+    this.viewCode = viewCode;
+    this.maxLengthSuggestion = maxLengthSuggestion || 100;
+
+    return [
+      {
+        field: 'autocomplete_title',
+        index: 'documents',
+        maxSuggestions: 10,
+        groupLabel: this.translateService.instant('documents'),
+        preFilters: viewCode !== undefined ? { view: viewCode } : {},
+        processSuggestions: (documents: any, query: any) => this.processDocuments(documents, query)
+      },
+      {
+        field: 'autocomplete_name',
+        index: 'entities',
+        maxSuggestions: 10,
+        groupLabel: this.translateService.instant('authors/subjects'),
+        preFilters: viewCode !== undefined ? { view: viewCode } : {},
+        processSuggestions: (entities: any, query: any) => this.processEntities(entities, query)
+      }
+    ]
+  }
+
+  private processDocuments(documents: any, query: any): any[] {
+    const values = [];
+    documents.hits.hits.map((hit: any) => {
+      const title = this.mainTitlePipe.transform(hit.metadata.title);
+      let text = title;
+      if (title.length > this.maxLengthSuggestion) {
+        text = this.truncatePipe.transform(title, this.maxLengthSuggestion);
+      }
+
+      values.push({
+        label: this.highlightSearch(text, query),
+        index: 'documents',
+        link: this.generateDocumentLink(title),
+        iconClass: 'fa fa-file-o',
+      });
+    });
+
+    return values;
+  }
+
+  private generateDocumentLink(title: string): string {
+    const query = `${title}&page=1&size=10&sort=bestmatch`;
+    if (this.isAdmin) {
+      return `/records/documents?q=${query}&simple=1`;
+    } else {
+      return `/${this.viewCode}/search/documents?q=${query}`;
+    }
+  }
+
+  private processEntities(entities: any, query: any): any[] {
+    const values = [];
+    entities.hits.hits.map((hit: any) => {
+      const text = this.getContributionName(hit.metadata);
+      values.push({
+        label: this.highlightSearch(text, query),
+        index: 'entities',
+        link: this.generateEntityLink(hit.metadata),
+        iconClass: `fa ${Entity.getIcon(hit.metadata.type)}`
+      });
+    });
+
+    return values;
+  }
+
+  private highlightSearch(text: string, query: string): string {
+    return text.replace(new RegExp(
+      this.escapeRegExp(query), 'gi'),
+      `<b>${query}</b>`
+      );
+  }
+
+  private escapeRegExp(data: string): string {
+    // $& means the whole matched string
+    return data.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
+  }
+
+  private getContributionName(metadata: any): string {
+    if (metadata.resource_type === 'remote') {
+      const language = this.translateService.currentLang;
+      const order: any = this.appSettingsService.agentLabelOrder;
+      const key = (language in order) ? language : 'fallback';
+      const agentSources = (key === 'fallback')
+        ? order[order[key]]
+        : order[key];
+
+      for (const source of agentSources) {
+        if (metadata[source] && metadata[source].authorized_access_point) {
+          return metadata[source].authorized_access_point;
+        }
+      }
+    } else {
+      const key = `authorized_access_point_${this.translateService.currentLang}`;
+      const accessPointKey = Object.keys(metadata).includes(key) ? key : 'authorized_access_point';
+      return metadata[accessPointKey];
+    }
+  }
+
+  private generateEntityLink(metadata: any): string {
+    const { pid, resource_type } = metadata;
+    if (this.isAdmin) {
+      return `/records/${resource_type}_entities/detail/${pid}`;
+    } else {
+      return `/${this.viewCode}/entities/${resource_type}/${pid}`;
+    }
+  }
+}
diff --git a/projects/admin/src/app/record/editor/wrappers/user-id/user-id.component.html b/projects/shared/src/lib/component/remote-search/remote-search.component.html
similarity index 54%
rename from projects/admin/src/app/record/editor/wrappers/user-id/user-id.component.html
rename to projects/shared/src/lib/component/remote-search/remote-search.component.html
index 0b89f6c1f..cd67bc511 100644
--- a/projects/admin/src/app/record/editor/wrappers/user-id/user-id.component.html
+++ b/projects/shared/src/lib/component/remote-search/remote-search.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2024 RERO
+  Copyright (C) 2024 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -14,18 +14,11 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-@if (user$ | async; as user) {
-  <strong>
-    {{ $any(user).metadata.last_name }}, {{ $any(user).metadata.first_name }}
-    @if (user.metadata.city) {
-      ({{ user.metadata.city }})
-    }
-  </strong>
-  <button type="button" class="btn btn-outline-primary btn-sm align-baseline ml-2" (click)="openModal()" translate>
-    Edit
-  </button>
-} @else {
-  <button type="button" class="btn btn-outline-primary btn-sm align-baseline ml-2" (click)="openModal()" translate>
-    Create
-  </button>
-}
+<ng-core-search-autocomplete
+  class="w-full"
+  scrollHeight="null"
+  [placeholder]="placeholder | translate | ucfirst"
+  [value]="value"
+  [recordTypes]="recordTypes"
+  [hidden]="hideSearchElement"
+  (onSelect)="onSelect($event)" />
diff --git a/projects/shared/src/lib/component/remote-search/remote-search.component.ts b/projects/shared/src/lib/component/remote-search/remote-search.component.ts
new file mode 100644
index 000000000..c0bcbf72a
--- /dev/null
+++ b/projects/shared/src/lib/component/remote-search/remote-search.component.ts
@@ -0,0 +1,98 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { NavigationEnd, Router, UrlSegment } from '@angular/router';
+import { IRecordType } from '@rero/ng-core';
+import { filter, Subscription } from 'rxjs';
+import { RemoteSearchConfig } from './remote-search-config.service';
+
+@Component({
+  selector: 'shared-remote-search',
+  templateUrl: './remote-search.component.html',
+  providers: [RemoteSearchConfig]
+})
+export class RemoteSearchComponent implements OnInit, OnDestroy {
+
+  private router: Router = inject(Router);
+  private remoteSearchBarConfig: RemoteSearchConfig = inject(RemoteSearchConfig);
+
+  // You must use lowercase variable names for this to work in a web component.
+  // Use @Input in this case, as the web component does not work with input (signal).
+  @Input() admin: boolean | string = true;
+  @Input() maxlengthsuggestion: number | string = 100;
+  @Input() placeholder: string = 'search';
+  @Input() viewcode: string | undefined;
+
+  hideSearchElement: boolean = false;
+  recordTypes: IRecordType[] = [];
+  value: string | undefined;
+
+  /** Resources involved in hiding the search area */
+  private hideSearchResources = ['documents'];
+
+  private subscription: Subscription = new Subscription();
+
+  ngOnInit(): void {
+    this.admin = this.boolean(this.admin);
+    this.recordTypes = this.remoteSearchBarConfig.getConfig(
+      this.admin,
+      this.viewcode,
+      +this.maxlengthsuggestion
+    );
+    this.subscription.add(
+      this.router.events
+        .pipe(filter(event => event instanceof NavigationEnd))
+        .subscribe(() => this.hideSearchElement = this.hideSearchInput())
+    );
+  }
+
+  ngOnDestroy(): void {
+      this.subscription.unsubscribe();
+  }
+
+  onSelect(element: any) {
+    if (!('link' in element)) {
+      throw new Error('Missing parameter link');
+    }
+    this.value = '';
+    this.router.navigateByUrl(element.link);
+  }
+
+  private hideSearchInput(): boolean {
+    if (!this.admin) {
+      return false;
+    }
+    const paths = [];
+    this.router.parseUrl(this.router.url).root.children.primary?.segments
+      .some((segment: UrlSegment) => { paths.push(segment.path); });
+    const resourceFlag = paths.some((path: string) => this.hideSearchResources.includes(path));
+    if (!resourceFlag) {
+      return false;
+    } else {
+      const detailFlag = paths.includes('detail') || paths.includes('new');
+      return !(resourceFlag && detailFlag);
+    }
+  }
+
+  private boolean(value: string | boolean): boolean {
+    if (typeof value === 'string') {
+      return 'true' === value;
+    }
+
+    return value;
+  }
+}
diff --git a/projects/shared/src/lib/directive/link-permissions.directive.ts b/projects/shared/src/lib/directive/link-permissions.directive.ts
index 29a0517b9..e740b36e1 100644
--- a/projects/shared/src/lib/directive/link-permissions.directive.ts
+++ b/projects/shared/src/lib/directive/link-permissions.directive.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { AfterViewInit, Directive, ElementRef, Input, Renderer2 } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, inject, Input, Renderer2 } from '@angular/core';
 import { PermissionsService } from '../service/permissions.service';
 import { PERMISSION_OPERATOR } from '../util/permissions';
 
@@ -25,6 +25,10 @@ import { PERMISSION_OPERATOR } from '../util/permissions';
 })
 export class LinkPermissionsDirective implements AfterViewInit {
 
+  protected el: ElementRef = inject(ElementRef);
+  protected renderer: Renderer2 = inject(Renderer2);
+  protected permissionsService: PermissionsService = inject(PermissionsService);
+
   // DIRECTIVE ATTRIBUTES =====================================================
   /** permissions */
   private _permissions: string[] = [];
@@ -45,19 +49,6 @@ export class LinkPermissionsDirective implements AfterViewInit {
     this._operator = operator;
   };
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param el - ElementRef
-   * @param renderer - Renderer2
-   * @param permissionsService - PermissionsService
-   */
-  constructor(
-    private el: ElementRef,
-    private renderer: Renderer2,
-    private permissionsService: PermissionsService,
-  ) { }
-
   /** AfterViewInit hook */
   ngAfterViewInit(): void {
     if (!this.permissionsService.canAccess(this._permissions, this._operator)) {
diff --git a/projects/shared/src/lib/directive/no-content.directive.ts b/projects/shared/src/lib/directive/no-content.directive.ts
index 3a14ecc6a..3b951b5f8 100644
--- a/projects/shared/src/lib/directive/no-content.directive.ts
+++ b/projects/shared/src/lib/directive/no-content.directive.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2023 RERO
+ * Copyright (C) 2023-2024 RERO
  * Copyright (C) 2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { AfterContentChecked, Directive, ElementRef, Input, Renderer2, TemplateRef, ViewContainerRef } from '@angular/core';
+import { AfterContentChecked, Directive, ElementRef, inject, Input, Renderer2, TemplateRef, ViewContainerRef } from '@angular/core';
 
 @Directive({
   // eslint-disable-next-line @angular-eslint/directive-selector
@@ -29,33 +29,22 @@ import { AfterContentChecked, Directive, ElementRef, Input, Renderer2, TemplateR
  * <ng-template #noTitle>...</ng-template>
  */
 export class NoContentDirective implements AfterContentChecked {
+
+  protected element: ElementRef = inject(ElementRef);
+  protected container: ViewContainerRef = inject(ViewContainerRef);
+  protected renderer: Renderer2 = inject(Renderer2);
+
   /** Template reference */
   @Input() noContent: TemplateRef<any>;
 
-  /** html element */
-  private element: HTMLElement;
   /** Determine if the content is present */
   private hasContent = true;
 
-  /**
-   * Constructor
-   * @param element - ElementRef
-   * @param container - ViewContainerRef
-   * @param renderer - Renderer2
-   */
-  constructor(
-    element: ElementRef,
-    private container: ViewContainerRef,
-    private renderer: Renderer2
-  ) {
-    this.element = element.nativeElement;
-  }
-
   /** ngAfterContentChecked hook */
   ngAfterContentChecked(): void {
     let hasContent = false;
-    for (let i = this.element.childNodes.length-1; i >= 0; --i) {
-      const node = this.element.childNodes[i];
+    for (let i = this.element.nativeElement.childNodes.length-1; i >= 0; --i) {
+      const node = this.element.nativeElement.childNodes[i];
       if (node.nodeType === 1 || node.nodeType === 3) {
         hasContent = true;
         break;
@@ -64,10 +53,10 @@ export class NoContentDirective implements AfterContentChecked {
     if (hasContent !== this.hasContent) {
       this.hasContent = hasContent;
       if (hasContent) {
-        this.renderer.removeClass(this.element, 'is-empty');
+        this.renderer.removeClass(this.element.nativeElement, 'is-empty');
         this.container.clear();
       } else {
-        this.renderer.addClass(this.element, 'is-empty');
+        this.renderer.addClass(this.element.nativeElement, 'is-empty');
         this.container.createEmbeddedView(this.noContent);
       }
     }
diff --git a/projects/shared/src/lib/directive/permissions.directive.ts b/projects/shared/src/lib/directive/permissions.directive.ts
index aaea11156..d386145c2 100644
--- a/projects/shared/src/lib/directive/permissions.directive.ts
+++ b/projects/shared/src/lib/directive/permissions.directive.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, inject, Input } from '@angular/core';
 import { PermissionsService } from '../service/permissions.service';
 import { PERMISSION_OPERATOR } from '../util/permissions';
 
@@ -25,6 +25,9 @@ import { PERMISSION_OPERATOR } from '../util/permissions';
 })
 export class PermissionsDirective implements AfterViewInit {
 
+  protected el: ElementRef = inject(ElementRef);
+  protected permissionsService: PermissionsService = inject(PermissionsService);
+
   // DIRECTIVE ATTRIBUTES =====================================================
   /** permissions */
   private _permissions: string[] = [];
@@ -45,17 +48,6 @@ export class PermissionsDirective implements AfterViewInit {
     this._operator = operator;
   };
 
-  // CONSTRUCTOR & HOOKS ======================================================
-  /**
-   * Constructor
-   * @param el - ElementRef
-   * @param permissionsService - PermissionsService
-   */
-  constructor(
-    private el: ElementRef,
-    private permissionsService: PermissionsService
-  ) { }
-
   /** AfterViewInit hook */
   ngAfterViewInit(): void {
     // Remove element if not allowed
diff --git a/projects/shared/src/lib/directive/rero-template.directive.ts b/projects/shared/src/lib/directive/rero-template.directive.ts
index dd2886056..79881f466 100644
--- a/projects/shared/src/lib/directive/rero-template.directive.ts
+++ b/projects/shared/src/lib/directive/rero-template.directive.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2024 RERO
  * Copyright (C) 2019-2023 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Directive, Input, TemplateRef } from '@angular/core';
+import { Directive, inject, Input, TemplateRef } from '@angular/core';
 
 /** See: https://github.com/primefaces/primeng/blob/master/src/app/components/api/shared.ts */
 
@@ -26,20 +26,15 @@ import { Directive, Input, TemplateRef } from '@angular/core';
 })
 export class ReroTemplateDirective {
 
+  public template: TemplateRef<any> = inject(TemplateRef);
+
   /** the template type. */
   @Input() type: string | undefined;
   /** the template name. */
   @Input('rTemplate') name: string | undefined;
 
-  /**
-   * constructor
-   * @param template: TemplateRef
-   */
-  constructor(public template: TemplateRef<any>) {}
-
   /** get the type of template. */
   getType(): string {
     return this.name!;
   }
-
 }
diff --git a/projects/shared/src/lib/pipe/entity-label.pipe.ts b/projects/shared/src/lib/pipe/entity-label.pipe.ts
index 93dcf36a0..5cdeca0d0 100644
--- a/projects/shared/src/lib/pipe/entity-label.pipe.ts
+++ b/projects/shared/src/lib/pipe/entity-label.pipe.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 /**
@@ -49,19 +49,14 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class EntityLabelPipe implements PipeTransform {
 
+  protected translateService: TranslateService = inject(TranslateService);
+
   // PIPE ATTRIBUTES ==========================================================
   /** the basic key where to find the entity label */
   private _authorizedKey = 'authorized_access_point';
   /** the separator to use to glue all parts of the label. */
   private _defaultPartSeparator = ' - '
 
-  // PIPE CONSTRUCTOR =========================================================
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  constructor(private translateService: TranslateService) {}
-
   // PIPE METHODS =============================================================
   /**
    * Pipe transformation method.
diff --git a/projects/shared/src/lib/pipe/extract-source-field.pipe.ts b/projects/shared/src/lib/pipe/extract-source-field.pipe.ts
index 53fd5c1da..4c8c69c8c 100644
--- a/projects/shared/src/lib/pipe/extract-source-field.pipe.ts
+++ b/projects/shared/src/lib/pipe/extract-source-field.pipe.ts
@@ -14,8 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { AppSettingsService } from '../service/app-settings.service';
 
@@ -25,15 +24,8 @@ import { AppSettingsService } from '../service/app-settings.service';
 })
 export class ExtractSourceFieldPipe implements PipeTransform {
 
-  /**
-   * Constructor
-   * @param appSettingsService - AppSettingsService
-   * @param translateService - TranslateService
-   */
-  constructor(
-    private appSettingsService: AppSettingsService,
-    private translateService: TranslateService
-  ) {}
+  protected appSettingsService: AppSettingsService = inject(AppSettingsService);
+  protected translateService: TranslateService = inject(TranslateService);
 
   /**
    * Transform
diff --git a/projects/shared/src/lib/pipe/fa-icon-class.pipe.ts b/projects/shared/src/lib/pipe/fa-icon-class.pipe.ts
index ef492cd1d..3aed5ff58 100644
--- a/projects/shared/src/lib/pipe/fa-icon-class.pipe.ts
+++ b/projects/shared/src/lib/pipe/fa-icon-class.pipe.ts
@@ -14,7 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
diff --git a/projects/shared/src/lib/pipe/get-translated-label.pipe.ts b/projects/shared/src/lib/pipe/get-translated-label.pipe.ts
index f99eba09d..bb73408c4 100644
--- a/projects/shared/src/lib/pipe/get-translated-label.pipe.ts
+++ b/projects/shared/src/lib/pipe/get-translated-label.pipe.ts
@@ -14,8 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 
@@ -38,11 +37,7 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class GetTranslatedLabelPipe implements PipeTransform {
 
-  /**
-   * constructor
-   * @param translateService - TranslateService
-   */
-  constructor(private translateService: TranslateService) {}
+  protected translateService: TranslateService = inject(TranslateService);
 
   /**
    * get the best possible label
diff --git a/projects/shared/src/lib/pipe/id-attribute.pipe.ts b/projects/shared/src/lib/pipe/id-attribute.pipe.ts
index d63614e86..02bd6c3ef 100644
--- a/projects/shared/src/lib/pipe/id-attribute.pipe.ts
+++ b/projects/shared/src/lib/pipe/id-attribute.pipe.ts
@@ -14,7 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
@@ -39,5 +38,4 @@ export class IdAttributePipe implements PipeTransform {
     parts = parts.filter(v => v !== null);
     return parts.join('-');
   }
-
 }
diff --git a/projects/shared/src/lib/pipe/identifiedby-label.pipe.ts b/projects/shared/src/lib/pipe/identifiedby-label.pipe.ts
index 0da0930cc..b666ff140 100644
--- a/projects/shared/src/lib/pipe/identifiedby-label.pipe.ts
+++ b/projects/shared/src/lib/pipe/identifiedby-label.pipe.ts
@@ -15,7 +15,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
diff --git a/projects/shared/src/lib/pipe/is-array.pipe.spec.ts b/projects/shared/src/lib/pipe/is-array.pipe.spec.ts
index 606329d91..87cfadbe3 100644
--- a/projects/shared/src/lib/pipe/is-array.pipe.spec.ts
+++ b/projects/shared/src/lib/pipe/is-array.pipe.spec.ts
@@ -1,3 +1,20 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2019-2023 RERO
+ * Copyright (C) 2019-2023 UCLouvain
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
 import { IsArrayPipe } from './is-array.pipe';
 
 describe('IsArrayPipe', () => {
diff --git a/projects/shared/src/lib/pipe/is-array.pipe.ts b/projects/shared/src/lib/pipe/is-array.pipe.ts
index 7b60e1edc..8296b9954 100644
--- a/projects/shared/src/lib/pipe/is-array.pipe.ts
+++ b/projects/shared/src/lib/pipe/is-array.pipe.ts
@@ -15,7 +15,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({ name: 'isArray' })
diff --git a/projects/shared/src/lib/pipe/item-holdings-call-number.pipe.ts b/projects/shared/src/lib/pipe/item-holdings-call-number.pipe.ts
index fd0c806c3..4df0c0749 100644
--- a/projects/shared/src/lib/pipe/item-holdings-call-number.pipe.ts
+++ b/projects/shared/src/lib/pipe/item-holdings-call-number.pipe.ts
@@ -14,8 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { RecordService } from '@rero/ng-core';
 import { map } from 'rxjs/operators';
 import { Observable, of } from 'rxjs';
@@ -25,11 +24,7 @@ import { Observable, of } from 'rxjs';
 })
 export class ItemHoldingsCallNumberPipe implements PipeTransform {
 
-  /**
-   * Constructor
-   * @param recordService - RecordService
-   */
-  constructor(private recordService: RecordService) { }
+  protected recordService: RecordService = inject(RecordService);
 
   /**
    * Get item call numbers
@@ -51,7 +46,7 @@ export class ItemHoldingsCallNumberPipe implements PipeTransform {
         }
       });
     } else {
-      return this.recordService.getRecord('holdings', record.holding.pid, 1).pipe(map(data => {
+      return this.recordService.getRecord('holdings', record.holding.pid, 1).pipe(map((data: any) => {
         if (data && data.metadata && 'call_number' in data.metadata) {
           return {
             first: {
@@ -78,6 +73,4 @@ export class ItemHoldingsCallNumberPipe implements PipeTransform {
       }));
     }
   }
-
-
 }
diff --git a/projects/shared/src/lib/pipe/join.pipe.ts b/projects/shared/src/lib/pipe/join.pipe.ts
index 62255a3b3..bfe4eae96 100644
--- a/projects/shared/src/lib/pipe/join.pipe.ts
+++ b/projects/shared/src/lib/pipe/join.pipe.ts
@@ -15,7 +15,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
diff --git a/projects/shared/src/lib/pipe/patron-blocked-message.pipe.ts b/projects/shared/src/lib/pipe/patron-blocked-message.pipe.ts
index 824de9891..36fa0aa67 100644
--- a/projects/shared/src/lib/pipe/patron-blocked-message.pipe.ts
+++ b/projects/shared/src/lib/pipe/patron-blocked-message.pipe.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 
@@ -23,11 +23,7 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class PatronBlockedMessagePipe implements PipeTransform {
 
-  /**
-   * Constructor
-   * @param translate - TranslateService
-   */
-  constructor(private translate: TranslateService) {}
+  protected translate: TranslateService = inject(TranslateService);
 
   /**
    * Display a message if patron is blocked
diff --git a/projects/shared/src/lib/pipe/safe-url.pipe.ts b/projects/shared/src/lib/pipe/safe-url.pipe.ts
index dcc9cd8d0..70861a3a6 100644
--- a/projects/shared/src/lib/pipe/safe-url.pipe.ts
+++ b/projects/shared/src/lib/pipe/safe-url.pipe.ts
@@ -15,14 +15,16 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Pipe, PipeTransform } from '@angular/core';
+import { inject, Pipe, PipeTransform } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 @Pipe({
   name: 'safeUrl'
 })
 export class SafeUrlPipe implements PipeTransform {
-  constructor(private domSanitizer: DomSanitizer) {}
+
+  protected domSanitizer: DomSanitizer = inject(DomSanitizer);
+
   transform(url: any) {
     return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
   }
diff --git a/projects/shared/src/lib/pipe/url-active.pipe.ts b/projects/shared/src/lib/pipe/url-active.pipe.ts
index 2c6b6834f..0341f3d52 100644
--- a/projects/shared/src/lib/pipe/url-active.pipe.ts
+++ b/projects/shared/src/lib/pipe/url-active.pipe.ts
@@ -14,7 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
diff --git a/projects/shared/src/lib/service/permissions.service.ts b/projects/shared/src/lib/service/permissions.service.ts
index 4866ac224..c3d496520 100644
--- a/projects/shared/src/lib/service/permissions.service.ts
+++ b/projects/shared/src/lib/service/permissions.service.ts
@@ -24,7 +24,7 @@ import { PERMISSIONS, PERMISSION_OPERATOR } from '../util/permissions';
 export class PermissionsService {
 
   /** Permissions set */
-  private permissions = new Set<string>();
+  protected permissions = new Set<string>();
 
   /**
    * Set all permissions in set
diff --git a/projects/shared/src/lib/service/search-bar-config.service.ts b/projects/shared/src/lib/service/search-bar-config.service.ts
deleted file mode 100644
index 6b8b705dc..000000000
--- a/projects/shared/src/lib/service/search-bar-config.service.ts
+++ /dev/null
@@ -1,208 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2019-2024 RERO
- * Copyright (C) 2019-2024 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-import { Injectable } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { TruncateTextPipe } from '@rero/ng-core';
-import { MainTitlePipe } from '../pipe/main-title.pipe';
-import { AppSettingsService } from './app-settings.service';
-import { Entity } from '../class/entity';
-
-@Injectable({
-  providedIn: 'root'
-})
-export class SearchBarConfigService {
-
-  /** View code */
-  private _viewcode: string = undefined;
-
-  /** Typeahead options limit */
-  private _typeaheadOptionsLimit: number = 15;
-
-  /** Max Length Suggestion */
-  private _maxLengthSuggestion: number = 100;
-
-  /** Is admin */
-  private _isAdmin: boolean = false;
-
-  /** Set typeahead options limit */
-  set typeaheadOptionsLimit(limit: number) {
-    this._typeaheadOptionsLimit = limit;
-  }
-
-  /** Get typeahead options limit */
-  get typeaheadOptionsLimit(): number {
-    return this._typeaheadOptionsLimit;
-  }
-
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   * @param mainTitlePipe - MainTitlePipe
-   * @param appSettingsService - AppSettingsService
-   * @param truncatePipe - TruncateTextPipe
-   */
-  constructor(
-    private translateService: TranslateService,
-    private mainTitlePipe: MainTitlePipe,
-    private appSettingsService: AppSettingsService,
-    private truncatePipe: TruncateTextPipe
-  ) {}
-
-  /**
-   * Get Config
-   * @param isAdmin - boolean, are we on the admin interface
-   * @param component - any
-   * @param viewcode - string or undefined, view code for the public interface
-   * @param maxLengthSuggestion - number of max suggestion
-   * @return array of contribution types configuration
-   */
-  getConfig(isAdmin: boolean, component: any, viewcode?: string | undefined, maxLengthSuggestion: number = 100): any[] {
-    this._isAdmin = isAdmin;
-    this._viewcode = viewcode;
-    this._maxLengthSuggestion = maxLengthSuggestion;
-
-    return [
-      {
-        type: 'documents',
-        field: 'autocomplete_title',
-        maxNumberOfSuggestions: 10,
-        getSuggestions: (query: any, documents: any) => this.getDocumentsSuggestions(query, documents),
-        preFilters: viewcode !== undefined ? { view: viewcode } : {}
-      },
-      {
-        type: 'entities',
-        field: 'autocomplete_name',
-        maxNumberOfSuggestions: 5,
-        getSuggestions: (query: any, entities: any) => this.getEntitiesSuggestions(query, entities),
-        preFilters: viewcode !== undefined ? { view: viewcode } : {}
-      }
-    ];
-  }
-
-  /**
-   * Get documents suggestions
-   * @param query - string, string searched
-   * @param documents - documents hits
-   * @return array - array of records formatted
-   */
-  private getDocumentsSuggestions(query: string, documents: any): any[] {
-    const values = [];
-    documents.hits.hits.map((hit: any) => {
-      const title = this.mainTitlePipe.transform(hit.metadata.title);
-      let text = title;
-      if (title.length > this._maxLengthSuggestion) {
-        text = this.truncatePipe.transform(title, this._maxLengthSuggestion);
-      }
-
-      values.push({
-        text: this.highlightSearch(text, query),
-        query: title.replace(/[:\-\[\]()/"]/g, ' ').replace(/\s\s+/g, ' '),
-        index: 'documents',
-        category: this.translateService.instant('documents')
-      });
-    });
-    return values;
-  }
-
-  /**
-   * Get entities suggestion
-   * @param query - string, string searched
-   * @param entities - entities hits
-   * @returns array - array of records formatted
-   */
-  private getEntitiesSuggestions(query: string, entities: any): any[] {
-    const values = [];
-    entities.hits.hits.map((hit: any) => {
-      const text = this._getContributionName(hit.metadata);
-      values.push({
-        text: this.highlightSearch(text, query),
-        index: 'entities',
-        query: '',
-        category: this.translateService.instant('authors/subjects'),
-        href: this.generateEntityLink(hit.metadata),
-        iconCssClass: `fa ${Entity.getIcon(hit.metadata.type)}`
-      });
-    });
-    return values;
-  }
-
-  /**
-   * Highlight search term
-   * @param text - text of result
-   * @param query - query
-   * @return string - highlight text
-   */
-  private highlightSearch(text: string, query: string): string {
-    return text.replace(new RegExp(
-      this.escapeRegExp(query), 'gi'),
-      `<b>${query}</b>`
-      );
-  }
-
-  /**
-   * Generate Entity Link
-   * @param type - string, type of contribution
-   * @param pid - string, pid of record
-   * @return the url path
-   */
-  private generateEntityLink(metadata: any): string {
-    const { pid, resource_type } = metadata;
-    if (this._isAdmin) {
-      return `/records/${resource_type}_entities/detail/${pid}`;
-    } else {
-      return `/${this._viewcode}/entities/${resource_type}/${pid}`;
-    }
-  }
-
-  /**
-   * Escape RegExp
-   * @param data - string
-   * @return string
-   */
-  private escapeRegExp(data: string): string {
-    // $& means the whole matched string
-    return data.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
-  }
-
-  /**
-   * Get contribution name
-   * @param metadata - metadata of record
-   * @return string
-   */
-  private _getContributionName(metadata: any): string {
-    if (metadata.resource_type === 'remote') {
-      const language = this.translateService.currentLang;
-      const order: any = this.appSettingsService.agentLabelOrder;
-      const key = (language in order) ? language : 'fallback';
-      const agentSources = (key === 'fallback')
-        ? order[order[key]]
-        : order[key];
-
-      for (const source of agentSources) {
-        if (metadata[source] && metadata[source].authorized_access_point) {
-          return metadata[source].authorized_access_point;
-        }
-      }
-    } else {
-      const key = `authorized_access_point_${this.translateService.currentLang}`;
-      const accessPointKey = Object.keys(metadata).includes(key) ? key : 'authorized_access_point';
-      return metadata[accessPointKey];
-    }
-  }
-}
diff --git a/projects/shared/src/lib/service/user.service.ts b/projects/shared/src/lib/service/user.service.ts
index 73b49ef7a..ab6183fcd 100644
--- a/projects/shared/src/lib/service/user.service.ts
+++ b/projects/shared/src/lib/service/user.service.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Injectable } from '@angular/core';
+import { inject, Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { UserApiService } from '../api/user-api.service';
@@ -28,6 +28,10 @@ import { PermissionsService } from './permissions.service';
 })
 export class UserService {
 
+  protected userApiService: UserApiService = inject(UserApiService);
+  protected appSettingsService: AppSettingsService = inject(AppSettingsService);
+  protected permissionsService: PermissionsService = inject(PermissionsService);
+
   // SERVICES ATTRIBUTES ======================================================
   /** Loaded observable */
   private _loaded: Subject<IUser> = new Subject<IUser>();
@@ -48,19 +52,6 @@ export class UserService {
     return this._user;
   }
 
-  // CONSTRUCTOR ==============================================================
-  /**
-   * Constructor
-   * @param userApiService - UserApiService
-   * @param appSettingsService - AppSettingsService
-   * @param permissionsService - PermissionsService
-   */
-  constructor(
-    private userApiService: UserApiService,
-    private appSettingsService: AppSettingsService,
-    private permissionsService: PermissionsService
-  ) { }
-
   /** load */
   load(): Observable<IUser> {
     return this.userApiService
diff --git a/projects/shared/src/lib/shared.module.ts b/projects/shared/src/lib/shared.module.ts
index 653647e63..934da6607 100644
--- a/projects/shared/src/lib/shared.module.ts
+++ b/projects/shared/src/lib/shared.module.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -19,14 +19,15 @@ import { CommonModule, DatePipe } from '@angular/common';
 import { NO_ERRORS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { CoreModule, NgVarDirective, Nl2brPipe, RecordModule, TruncateTextPipe } from '@rero/ng-core';
-import { PopoverModule } from 'ngx-bootstrap/popover';
-import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { ContributionComponent } from '../public-api';
 import { ActionButtonComponent } from './component/action-button/action-button.component';
 import { BriefViewComponent } from './component/core/brief-view/brief-view.component';
+import { DocumentBriefViewComponent } from './component/documents/document-brief-view/document-brief-view.component';
+import { FilesComponent } from './component/documents/files/files.component';
 import { EntityBriefViewComponent } from './component/entities/entity-brief-view/entity-brief-view.component';
 import { EntityBriefViewRemoteOrganisationComponent } from './component/entities/entity-brief-view/entity-brief-view.organisation';
 import { EntityBriefViewRemotePersonComponent } from './component/entities/entity-brief-view/entity-brief-view.person';
+import { RemoteSearchComponent } from './component/remote-search/remote-search.component';
 import { LinkPermissionsDirective } from './directive/link-permissions.directive';
 import { NoContentDirective } from './directive/no-content.directive';
 import { PermissionsDirective } from './directive/permissions.directive';
@@ -35,8 +36,10 @@ import { PrimeNgImportModule } from './modules/prime-ng-import/prime-ng-import.m
 import { ShowMorePagerComponent } from './paginator/show-more-pager/show-more-pager.component';
 import { EntityLabelPipe } from './pipe/entity-label.pipe';
 import { ExtractSourceFieldPipe } from './pipe/extract-source-field.pipe';
+import { FaIconClassPipe } from './pipe/fa-icon-class.pipe';
 import { GetTranslatedLabelPipe } from './pipe/get-translated-label.pipe';
 import { IdAttributePipe } from './pipe/id-attribute.pipe';
+import { IdentifiedByLabelPipe } from './pipe/identifiedby-label.pipe';
 import { IsArrayPipe } from './pipe/is-array.pipe';
 import { ItemHoldingsCallNumberPipe } from './pipe/item-holdings-call-number.pipe';
 import { JoinPipe } from './pipe/join.pipe';
@@ -47,16 +50,12 @@ import { PatronBlockedMessagePipe } from './pipe/patron-blocked-message.pipe';
 import { ProvisionActivityPipe } from './pipe/provision-activity.pipe';
 import { SafeUrlPipe } from './pipe/safe-url.pipe';
 import { UrlActivePipe } from './pipe/url-active.pipe';
-import { SearchBarConfigService } from './service/search-bar-config.service';
+import { AvailabilityComponent } from './view/availability/availability.component';
 import { PartOfComponent } from './view/brief/part-of/part-of.component';
+import { EntityLinkComponent } from './view/entity-link.component';
 import { InheritedCallNumberComponent } from './view/inherited-call-number/inherited-call-number.component';
 import { ThumbnailComponent } from './view/thumbnail/thumbnail.component';
-import { AvailabilityComponent } from './view/availability/availability.component';
-import { EntityLinkComponent } from './view/entity-link.component';
-import { DocumentBriefViewComponent } from './component/documents/document-brief-view/document-brief-view.component';
-import { IdentifiedByLabelPipe } from './pipe/identifiedby-label.pipe';
-import { FilesComponent } from './component/documents/files/files.component';
-import { FaIconClassPipe } from './pipe/fa-icon-class.pipe';
+import { OpenCloseButtonComponent } from './component/open-close-button.component';
 
 @NgModule({
   declarations: [
@@ -94,7 +93,9 @@ import { FaIconClassPipe } from './pipe/fa-icon-class.pipe';
     EntityLinkComponent,
     DocumentBriefViewComponent,
     IdentifiedByLabelPipe,
-    FilesComponent
+    FilesComponent,
+    RemoteSearchComponent,
+    OpenCloseButtonComponent
   ],
   exports: [
     CommonModule,
@@ -126,19 +127,18 @@ import { FaIconClassPipe } from './pipe/fa-icon-class.pipe';
     AvailabilityComponent,
     EntityLinkComponent,
     DocumentBriefViewComponent,
-    FilesComponent
+    FilesComponent,
+    RemoteSearchComponent,
+    OpenCloseButtonComponent
   ],
   imports: [
     CommonModule,
     CoreModule,
     RecordModule,
     RouterModule,
-    TooltipModule.forRoot(),
-    PopoverModule.forRoot(),
     PrimeNgImportModule
   ],
   providers: [
-    SearchBarConfigService,
     DatePipe,
     MainTitlePipe,
     JoinPipe,
diff --git a/projects/shared/src/lib/view/availability/availability.component.ts b/projects/shared/src/lib/view/availability/availability.component.ts
index f464bc9ee..51bdaadbd 100644
--- a/projects/shared/src/lib/view/availability/availability.component.ts
+++ b/projects/shared/src/lib/view/availability/availability.component.ts
@@ -15,7 +15,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { Component, inject, Input, OnChanges, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { IAvailability } from '../../interface/i-availability';
 import { IAvailabilityService } from '../../service/i-availability.service';
@@ -26,6 +26,8 @@ import { IAvailabilityService } from '../../service/i-availability.service';
 })
 export class AvailabilityComponent implements OnInit, OnChanges {
 
+  protected translateService: TranslateService = inject(TranslateService);
+
   /** Record Type */
   @Input() recordType: string;
 
@@ -44,12 +46,6 @@ export class AvailabilityComponent implements OnInit, OnChanges {
   /** Current language */
   language: string;
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  constructor(private translateService: TranslateService) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     this.language = this.translateService.currentLang;
diff --git a/projects/shared/src/lib/view/brief/part-of/part-of.component.ts b/projects/shared/src/lib/view/brief/part-of/part-of.component.ts
index 7062ffa4a..4028c092b 100644
--- a/projects/shared/src/lib/view/brief/part-of/part-of.component.ts
+++ b/projects/shared/src/lib/view/brief/part-of/part-of.component.ts
@@ -14,8 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
@@ -24,6 +23,8 @@ import { TranslateService } from '@ngx-translate/core';
 })
 export class PartOfComponent {
 
+  protected translateService: TranslateService = inject(TranslateService);
+
   /** Document */
   @Input() record: any;
 
@@ -39,11 +40,6 @@ export class PartOfComponent {
   /** Css class for dd in template */
   ddCssClass = 'col-sm-6 col-md-8 mb-0';
 
-  /** constructor
-   * @param translateService - TranslateService to translate some strings.
-   */
-  constructor(private translateService: TranslateService) { }
-
   /**
    * Get "part of" label from host document type
    * @param hostDocument - host document
diff --git a/projects/shared/src/lib/view/entity-link.component.ts b/projects/shared/src/lib/view/entity-link.component.ts
index 627e03272..fc678f400 100644
--- a/projects/shared/src/lib/view/entity-link.component.ts
+++ b/projects/shared/src/lib/view/entity-link.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Entity } from '../class/entity';
 
@@ -37,6 +37,8 @@ import { Entity } from '../class/entity';
 })
 export class EntityLinkComponent implements OnInit {
 
+  private translateService: TranslateService = inject(TranslateService);
+
   /** Entity field metadata */
   @Input() entity: any;
 
@@ -61,12 +63,6 @@ export class EntityLinkComponent implements OnInit {
   /** Query params */
   queryParams: object = {};
 
-  /**
-   * Constructor
-   * @param translateService - TranslateService
-   */
-  constructor(private translateService: TranslateService) {}
-
   /** OnInit hook */
   ngOnInit(): void {
     const lang = this.translateService.currentLang;
diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts b/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
index d2e94cb44..7d7c0125c 100644
--- a/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
+++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
@@ -16,7 +16,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { HttpClient } from '@angular/common/http';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit } from '@angular/core';
 import { of } from 'rxjs';
 import { catchError } from 'rxjs/operators';
 
@@ -28,6 +28,8 @@ import { catchError } from 'rxjs/operators';
 })
 export class ThumbnailComponent implements OnInit {
 
+  protected httpClient: HttpClient = inject(HttpClient);
+
   /** Cover url */
   coverUrl: string;
 
@@ -49,12 +51,6 @@ export class ThumbnailComponent implements OnInit {
   /** Should the thumbnail be small ? */
   @Input() isSmall = false;
 
-  /**
-   * Constructor
-   * @param httpClient - HttpClient
-   */
-  constructor(private httpClient: HttpClient) {}
-
   /**
    * Get cover url
    * @returns string - url of the cover if cover exists.
diff --git a/projects/shared/src/public-api.ts b/projects/shared/src/public-api.ts
index b94e166ea..175e6f1f2 100644
--- a/projects/shared/src/public-api.ts
+++ b/projects/shared/src/public-api.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2023 RERO
+ * Copyright (C) 2020-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,11 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-/*
- * Public API Surface of shared
- */
-
 export * from './lib/api/base-api';
 export * from './lib/api/user-api.service';
 export * from './lib/class/core';
@@ -26,26 +21,21 @@ export * from './lib/class/entity';
 export * from './lib/class/holdings';
 export * from './lib/class/item-status';
 export * from './lib/class/user';
-
 export * from './lib/component/action-button/action-button.component';
 export * from './lib/component/core/brief-view/brief-view.component';
 export * from './lib/component/documents/document-brief-view/document-brief-view.component';
 export * from './lib/component/documents/files/files.component';
 export * from './lib/component/entities/entity-brief-view/entity-brief-view.component';
-export * from './lib/view/contribution/contribution.component';
-export * from './lib/view/entity-link.component';
-
+export * from './lib/component/open-close-button.component';
+export * from './lib/component/remote-search/remote-search.component';
 export * from './lib/directive/link-permissions.directive';
 export * from './lib/directive/no-content.directive';
 export * from './lib/directive/permissions.directive';
 export * from './lib/directive/rero-template.directive';
-
 export * from './lib/interface/i-availability';
 export * from './lib/modules/prime-ng-import/prime-ng-import.module';
-
 export * from './lib/paginator/paginator';
 export * from './lib/paginator/show-more-pager/show-more-pager.component';
-
 export * from './lib/pipe/entity-label.pipe';
 export * from './lib/pipe/extract-source-field.pipe';
 export * from './lib/pipe/get-translated-label.pipe';
@@ -61,19 +51,17 @@ export * from './lib/pipe/patron-blocked-message.pipe';
 export * from './lib/pipe/provision-activity.pipe';
 export * from './lib/pipe/safe-url.pipe';
 export * from './lib/pipe/url-active.pipe';
-
 export * from './lib/service/app-settings.service';
 export * from './lib/service/i-availability.service';
 export * from './lib/service/permissions.service';
-export * from './lib/service/search-bar-config.service';
 export * from './lib/service/user.service';
-
 export * from './lib/shared.module';
 export * from './lib/util/permissions';
 export * from './lib/utils/tools';
 export * from './lib/view/availability/availability.component';
 export * from './lib/view/brief/part-of/part-of.component';
+export * from './lib/view/contribution/contribution.component';
+export * from './lib/view/entity-link.component';
 export * from './lib/view/inherited-call-number/inherited-call-number.component';
 export * from './lib/view/thumbnail/thumbnail.component';
 export * from './tests/user';
-
diff --git a/tsconfig.json b/tsconfig.json
index 37d8b695e..23f6d449e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -33,6 +33,9 @@
       ],
       "moment": [
         "node_modules/moment/min/moment.min.js"
+      ],
+      "@rero/prime/*": [
+        "node_modules/@rero/ng-core/lib/record/editor/formly/primeng/*"
       ]
     },
     "useDefineForClassFields": false