From e0b6b5d5e6dabbeabe53a2b122ae707cb5e8edc2 Mon Sep 17 00:00:00 2001
From: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
Date: Mon, 21 Oct 2024 11:58:00 +0200
Subject: [PATCH] chore: refactoring components/service for primeng

Co-Authored-by: Bertrand Zuchuat <bertrand.zuchuat@rero.ch>
---
 package-lock.json                             |   8 +-
 package.json                                  |   2 +-
 .../src/app/acquisition/acquisition.module.ts |  28 +-
 .../account-brief-view.component.html         |  31 +-
 .../account-brief-view.component.ts           |   4 +-
 .../account-detail-view.component.html        |  46 +-
 .../account-list/account-list.component.html  |  29 +-
 .../account-transfer.component.html           |  86 +++-
 .../account-transfer.component.ts             |   8 +-
 .../budgets-brief-view.component.ts           |   2 +-
 .../budget-detail-view.component.html         |  11 +-
 .../order-brief-view.component.html           |   2 +-
 .../order-detail-view.component.html          |  26 +-
 .../order-detail-view.component.ts            |   4 +
 .../order-line/order-line.component.html      |  33 +-
 .../order-lines/order-lines.component.html    |  25 +-
 .../order-email-form.component.html           |   1 -
 .../order-email-form.component.ts             |   7 +-
 .../order-summary.component.html              |   2 +-
 .../receipt-detail-view.component.html        |  16 +-
 .../receipt-form/order-receipt-form.ts        |   2 +-
 .../order-receipt-view.component.ts           |   7 +-
 .../receipt-list/receipt-list.component.html  |  25 +-
 .../receipt-summary.component.html            |  26 +-
 .../formly/type/repeat-section.type.ts        |  69 +++
 projects/admin/src/app/app.module.ts          |  15 +-
 .../checkin-action.component.html             |  36 +-
 .../circulation/checkin/checkin.component.ts  |  47 +-
 .../src/app/circulation/circulation.module.ts |  33 +-
 .../app/circulation/item/item.component.html  |  56 +--
 .../items-list/items-list.component.html      |  21 +-
 .../main-request/main-request.component.ts    |   7 +-
 .../patron/cancel-request-button.component.ts |   5 +-
 .../circulation/patron/card/card.component.ts |  17 +-
 .../change-password-form.component.html       |  29 +-
 .../change-password-form.component.ts         |   6 +-
 .../circulation-settings.component.html       |  18 +
 .../circulation-settings.component.spec.ts    |  38 ++
 .../circulation-settings.component.ts         | 108 +++++
 .../circulation-settings.service.spec.ts}     |  21 +-
 .../circulation-settings.service.ts           |  53 +++
 .../fixed-date-form.component.html            |  75 ++-
 .../fixed-date-form.component.ts              |  46 +-
 .../patron/loan/loan.component.html           |  25 +-
 .../circulation/patron/loan/loan.component.ts | 160 ++-----
 .../patron/main/main.component.html           | 109 +----
 .../circulation/patron/main/main.component.ts | 100 +++-
 .../patron-fee/patron-fee.component.ts        |   5 +-
 .../pending-item/pending-item.component.html  |  15 +-
 .../patron/pending/pending.component.html     |   2 +-
 .../patron/pending/pending.component.ts       |   3 +-
 .../patron/pickup/pickup.component.ts         |   2 +-
 .../patron/profile/profile.component.ts       |   3 +
 .../services/circulation.service.ts           |  83 +---
 .../services/loan-fixed-date.service.ts       |   2 +-
 .../services/patron-transaction.service.ts    |   5 +-
 .../issue-email/issue-email.component.html    |   3 +-
 .../issue-email/issue-email.component.ts      |  42 +-
 .../admin/src/app/guard/item-access.guard.ts  |  16 +-
 .../app/menu/menu-user/menu-user.component.ts |   4 +-
 .../menu/service/menu-translate.service.ts    |   2 +-
 .../src/app/menu/service/menu.service.ts      |  33 +-
 .../documents-brief-view.component.html       |  66 +--
 .../circulation-log.component.spec.ts         |   2 -
 .../circulation-logs-dialog.component.ts      |   4 +
 .../circulation-logs.component.html           | 134 +++---
 .../document-editor.component.spec.ts         |   9 +-
 .../document-editor.component.ts              |  11 +-
 .../exception-dates-edit.component.html       | 442 ++++++++----------
 .../exception-dates-list.component.html       |   6 +-
 .../exception-dates-list.component.ts         |   4 +
 .../libraries/library-form.service.ts         |   4 +-
 .../libraries/library.component.html          |   5 +-
 .../libraries/library.component.ts            |  16 +-
 .../user-id-editor.component.ts               |  15 +-
 .../address-type/address-type.component.html  |  60 +--
 .../address-type/address-type.component.ts    |   7 +-
 .../document-detail-view.component.html       | 202 +++-----
 .../document-detail-view.component.ts         |  20 +-
 .../document-detail.component.html            |  26 +-
 .../files-collections.component.html          |  11 +-
 .../files-collections.component.ts            |   4 +-
 .../upload-files/upload-files.component.html  |   5 +-
 .../upload-files/upload-files.component.ts    |  15 +-
 .../default-holding-item.component.html       | 101 ++--
 .../holding/holding.component.html            |  88 ++--
 .../holding/holding.component.ts              |   2 +
 .../serial-holding-item.component.html        |  86 ++--
 .../holdings/holdings.component.html          |  35 +-
 .../holdings/holdings.component.ts            |  22 +-
 .../item-request/item-request.component.html  | 116 ++---
 .../item-request/item-request.component.ts    |  16 +-
 .../received-issue.component.html             |  57 ++-
 .../serial-holding-detail-view.component.html | 104 ++---
 .../serial-holding-detail-view.component.ts   |   9 +-
 .../item-detail-view.component.html           |  90 ++--
 .../item-transactions.component.ts            |   9 +-
 .../library-detail-view.component.html        |  24 +-
 .../location/location.component.html          |  48 +-
 .../local-field/local-field.component.html    |  43 +-
 .../location-detail-view.component.html       |  60 +--
 .../organisation-detail-view.component.html   |  16 +-
 .../patron-types-detail-view.component.html   | 162 ++++---
 .../reports-list/reports-list.component.html  |  37 +-
 .../statistics-cfg-detail-view.component.html | 102 ++--
 .../statistics-cfg-detail-view.component.ts   |  34 +-
 .../template-detail-view.component.html       |   2 +-
 .../template-detail-view.component.ts         |   4 +-
 .../vendor-detail-view.component.html         |  45 +-
 .../add-entity-local-form.component.ts        |   4 +-
 .../remote/patrons-remote.service.ts          |   4 +-
 .../record/editor/type/field-custom.type.ts   |   2 +-
 .../operation-logs-dialog.component.html      |  13 +-
 .../operation-logs-dialog.component.ts        |   4 +
 .../operation-logs.component.html             |  68 ++-
 .../operation-logs.component.ts               |   2 +-
 projects/admin/src/app/scss/styles.scss       |  19 -
 .../service/app-initializer.service.spec.ts   |   2 -
 .../app/service/app-initializer.service.ts    |  14 +-
 .../src/app/service/issue.service.spec.ts     |   2 -
 .../admin/src/app/service/issue.service.ts    |   6 +-
 .../service/record.handle-error.service.ts    |   4 +-
 .../preview-email.component.html              |  66 ++-
 .../preview-email.component.scss              |   6 +-
 .../primeng-import/primeng-import.module.ts   |  16 +-
 .../src/app/app.module.ts                     |   6 -
 .../src/app/app-initializer.service.spec.ts   |   4 -
 projects/public-search/src/app/app.module.ts  |   2 -
 .../collection-brief.component.spec.ts        |   4 -
 .../patron-profile-fee.component.spec.ts      |   2 -
 .../patron-profile-loan.component.html        |   3 +-
 .../patron-profile-loan.component.ts          |   8 +-
 .../patron-profile-password.component.ts      |  10 +-
 ...atron-profile-personal-editor.component.ts |   9 +-
 .../patron-profile-personal.component.spec.ts |   2 -
 .../patron-profile-request.component.ts       |  10 +-
 .../patron-profile.component.spec.ts          |   4 -
 .../src/app/app.module.ts                     |   6 +-
 .../src/app/app.module.ts                     |   4 +-
 .../shared/src/lib/api/user-api.service.ts    |   7 +-
 .../action-button/action-button.component.ts  |  75 ++-
 .../component/open-close-button.component.ts  |  47 ++
 .../pipe/item-holdings-call-number.pipe.ts    |   4 +-
 projects/shared/src/lib/shared.module.ts      |  11 +-
 projects/shared/src/public-api.ts             |  17 +-
 145 files changed, 2436 insertions(+), 2156 deletions(-)
 create mode 100644 projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.html
 create mode 100644 projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.spec.ts
 create mode 100644 projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.ts
 rename projects/admin/src/app/{record/detail-view/document-detail-view/document-detail-view.component.scss => circulation/patron/loan/circulation-settings/circulation-settings.service.spec.ts} (58%)
 create mode 100644 projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.service.ts
 create mode 100644 projects/shared/src/lib/component/open-close-button.component.ts

diff --git a/package-lock.json b/package-lock.json
index 3e398b523..f2edf09c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,7 +38,7 @@
         "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",
@@ -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"
       }
diff --git a/package.json b/package.json
index 4d6aeb800..733e09f3d 100644
--- a/package.json
+++ b/package.json
@@ -96,7 +96,7 @@
     "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",
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/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 e5ddb6c46..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
@@ -21,6 +21,7 @@ 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 { 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';
@@ -99,7 +100,8 @@ export class AccountBriefViewComponent implements OnInit {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Account'),
-          detail: this.translateService.instant('Account deleted')
+          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-list/account-list.component.html b/projects/admin/src/app/acquisition/components/account/account-list/account-list.component.html
index 844910df0..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,13 +20,13 @@
     <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
@@ -34,18 +34,19 @@ <h1 translate>Acquisition accounts</h1>
       />
       <!-- 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-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 b3c758476..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
@@ -22,6 +22,7 @@ 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 { MessageService } from 'primeng/api';
 import { AcqAccountApiService } from '../../../api/acq-account-api.service';
@@ -118,14 +119,17 @@ export class AccountTransferComponent implements OnInit {
           this.messageService.add({
             severity: 'success',
             summary: this.translateService.instant('Account'),
-            detail: this.translateService.instant('Fund transfer successful!')
+            detail: this.translateService.instant('Fund transfer successful!'),
+            life: CONFIG.MESSAGE_LIFE
           });
           this.router.navigate(['/', 'acquisition', 'accounts']);
         },
         error: (err) => this.messageService.add({
           severity: 'error',
           summary: this.translateService.instant('Account'),
-          detail:this.translateService.instant(err.error.message)
+          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 a9565bf5a..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
@@ -23,7 +23,7 @@ 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"
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/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-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 83f677978..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
@@ -28,6 +28,7 @@ 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 { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'admin-acquisition-order-detail-view',
@@ -41,6 +42,7 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
   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 */
@@ -124,6 +126,8 @@ export class OrderDetailViewComponent implements DetailRecord, OnInit, OnDestroy
    */
   placeOrderDialog(): void {
     this.modalRef = this.dialogService.open(OrderEmailFormComponent, {
+      header: this.translateService.instant('Place order'),
+      width: '60vw',
       dismissableMask: true,
       data: {
         order: this.order
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-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-email-form/order-email-form.component.html b/projects/admin/src/app/acquisition/components/order/order-email-form/order-email-form.component.html
index 1ceba81df..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
@@ -26,7 +26,6 @@
     (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 b03604ec2..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
@@ -22,6 +22,7 @@ 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 { CONFIG } from '@rero/ng-core';
 import { MessageService } from 'primeng/api';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Subscription } from 'rxjs';
@@ -86,15 +87,15 @@ export class OrderEmailFormComponent implements OnInit, OnDestroy {
             this.messageService.add({
               severity: 'success',
               summary: this.translateService.instant('Order sent'),
-              detail: this.translateService.instant('order has been sent')
+              detail: this.translateService.instant('order has been sent'),
+              life: CONFIG.MESSAGE_LIFE
             });
           } else {
             this.messageService.add({
               severity: 'warn',
               summary: this.translateService.instant('Order delayed'),
               detail:  this.translateService.instant('order not yet send'),
-              sticky: true,
-              closable: true
+              life: CONFIG.MESSAGE_LIFE
             });
           }
           this.acqOrderApiService
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/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-form/order-receipt-form.ts b/projects/admin/src/app/acquisition/components/receipt/receipt-form/order-receipt-form.ts
index 98cb632c1..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
@@ -185,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 85a62be76..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
@@ -19,6 +19,7 @@ import { UntypedFormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
+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';
@@ -156,7 +157,8 @@ export class OrderReceiptViewComponent implements OnInit {
             this.messageService.add({
               severity: 'success',
               summary: this.translateService.instant('Receipt'),
-              detail: this.translateService.instant('Receipt operations were successful')
+              detail: this.translateService.instant('Receipt operations were successful'),
+              life: CONFIG.MESSAGE_LIFE
             });
           } else {
             this.messageService.add({
@@ -173,7 +175,8 @@ export class OrderReceiptViewComponent implements OnInit {
       this.messageService.add({
         severity: 'success',
         summary: this.translateService.instant('Receipt'),
-        detail: this.translateService.instant('Receipt operations were successful')
+        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-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-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/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/app.module.ts b/projects/admin/src/app/app.module.ts
index 82cd4dee3..69de42648 100644
--- a/projects/admin/src/app/app.module.ts
+++ b/projects/admin/src/app/app.module.ts
@@ -38,12 +38,7 @@ import {
 } from '@rero/ng-core';
 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 { FileUploadModule } from 'primeng/fileupload';
 import { MenubarModule } from 'primeng/menubar';
 import { TableModule } from "primeng/table";
@@ -181,6 +176,7 @@ 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';
@@ -191,7 +187,6 @@ 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.component';
 import { CipoPatronTypeItemTypeComponent } from './record/formly/type/cipo-patron-type-item-type/cipo-patron-type-item-type.component';
-import { AddEntityLocalFormComponent } from './record/editor/formly/primeng/entity-autocomplete/add-entity-local-form/add-entity-local-form.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,8 +206,8 @@ import { CurrentLibraryPermissionValidator } from './utils/permissions';
 import { CustomShortcutHelpComponent } from './widgets/custom-shortcut-help/custom-shortcut-help.component';
 import { FrontpageComponent } from './widgets/frontpage/frontpage.component';
 
-import { RemoteAutocompleteService as UiRemoteAutocompleteService } from './record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.service';
 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): () => Observable<any> {
@@ -363,18 +358,13 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     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 },
@@ -449,7 +439,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
       useFactory: (translate: TranslateService) => translate.currentLang,
       deps: [TranslateService],
     },
-    BsLocaleService,
     MainTitlePipe,
     TruncateTextPipe,
     CurrentLibraryPermissionValidator,
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.component.ts b/projects/admin/src/app/circulation/checkin/checkin.component.ts
index de15ec90c..90b497cbb 100644
--- a/projects/admin/src/app/circulation/checkin/checkin.component.ts
+++ b/projects/admin/src/app/circulation/checkin/checkin.component.ts
@@ -19,7 +19,7 @@ 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 { MessageService } from 'primeng/api';
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
@@ -98,7 +98,9 @@ export class CheckinComponent implements OnInit {
           this.messageService.add({
             severity: 'error',
             summary: this.translate.instant('Checkin'),
-            detail: this.translate.instant('Item or patron not found!')
+            detail: this.translate.instant('Item or patron not found!'),
+            sticky: true,
+            closable: true
           });
           this._resetSearchInput();
           return;
@@ -107,7 +109,8 @@ export class CheckinComponent implements OnInit {
           this.messageService.add({
             severity: 'warn',
             summary: this.translate.instant('Checkin'),
-            detail: this.translate.instant('The item contains requests')
+            detail: this.translate.instant('The item contains requests'),
+            life: CONFIG.MESSAGE_LIFE
           });
         }
         switch (item.actionDone) {
@@ -115,7 +118,8 @@ export class CheckinComponent implements OnInit {
             this.messageService.add({
               severity: 'warn',
               summary: this.translate.instant('Checkin'),
-              detail: this.translate.instant('The item has been returned from missing')
+              detail: this.translate.instant('The item has been returned from missing'),
+              life: CONFIG.MESSAGE_LIFE
             });
             break;
           case ItemAction.checkin:
@@ -128,7 +132,8 @@ export class CheckinComponent implements OnInit {
               this.messageService.add({
                 severity: 'warn',
                 summary: this.translate.instant('Checkin'),
-                detail: this.translate.instant('The item is in transit to {{ destination }}', {destination})
+                detail: this.translate.instant('The item is in transit to {{ destination }}', {destination}),
+                life: CONFIG.MESSAGE_LIFE
               });
             }
             break;
@@ -176,7 +181,9 @@ export class CheckinComponent implements OnInit {
           error: (error) => this.messageService.add({
             severity: 'error',
             summary: this.translate.instant('Checkin'),
-            detail: error.message
+            detail: error.message,
+            sticky: true,
+            closable: true
           })
       });
     } else {
@@ -205,19 +212,22 @@ export class CheckinComponent implements OnInit {
           this.messageService.add({
             severity: 'warn',
             summary: this.translate.instant('Checkin'),
-            detail: this.translate.instant('Patron not found!')
+            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.')
+            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, {
-            dismissableMask: true
+            header: this.translate.instant('Circulation action'),
+            width: '50vw',
           })
           ref.onClose.subscribe((action: string) => {
             if (action) {
@@ -244,7 +254,8 @@ export class CheckinComponent implements OnInit {
               this.messageService.add({
                 severity: 'warn',
                 summary: this.translate.instant('Checkin'),
-                detail: this.translate.instant('The item is already in the list.')
+                detail: this.translate.instant('The item is already in the list.'),
+                life: CONFIG.MESSAGE_LIFE
               });
               this._resetSearchInput();
             } else {
@@ -259,7 +270,9 @@ export class CheckinComponent implements OnInit {
       error: (error) => this.messageService.add({
         severity: 'error',
         summary: this.translate.instant('Checkin'),
-        detail: error.message
+        detail: error.message,
+        sticky: true,
+        closable: true
       })
     });
   }
@@ -289,8 +302,7 @@ export class CheckinComponent implements OnInit {
         severity: 'warn',
         summary: this.translate.instant('Checkin'),
         detail: message.join(),
-        sticky: true,
-        closable: true,
+        life: CONFIG.MESSAGE_LIFE
       });
     }
   }
@@ -327,8 +339,7 @@ export class CheckinComponent implements OnInit {
       severity: 'warn',
       summary: this.translate.instant('Checkin'),
       detail: message,
-      sticky: true,
-      closable: true
+      life: CONFIG.MESSAGE_LIFE
     });
     this._resetSearchInput();
   }
@@ -354,8 +365,10 @@ export class CheckinComponent implements OnInit {
       this.messageService.add({
         severity: 'error',
         summary: this.translate.instant('Checkin'),
-        detail: this.translate.instant('The item has fees')
-      })
+        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/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 bff8642f2..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
@@ -17,6 +17,7 @@
 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 { MessageService } from 'primeng/api';
@@ -175,7 +176,8 @@ export class MainRequestComponent implements OnInit, OnDestroy {
       this.messageService.add({
         severity: 'warn',
         summary: this.translateService.instant('request'),
-        detail: this.translateService.instant('No request corresponding to the given item has been found.')
+        detail: this.translateService.instant('No request corresponding to the given item has been found.'),
+        life: CONFIG.MESSAGE_LIFE
       });
       this._resetSearchInput();
     } else {
@@ -187,7 +189,8 @@ export class MainRequestComponent implements OnInit, OnDestroy {
           this.messageService.add({
             severity: 'warn',
             summary: this.translateService.instant('request'),
-            detail: this.translateService.instant('The item is ').concat(this.translateService.instant(newItem.status))
+            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/patron/cancel-request-button.component.ts b/projects/admin/src/app/circulation/patron/cancel-request-button.component.ts
index 944617b28..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,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, 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 { MessageService } from 'primeng/api';
 
@@ -78,7 +78,8 @@ export class CancelRequestButtonComponent {
         this.messageService.add({
           severity: 'warn',
           summary: this.translateService.instant('Request'),
-          detail: message
+          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 99fe2abd1..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
@@ -15,9 +15,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
-import moment from 'moment';
 import { getBootstrapLevel } from '../../../utils/utils';
 import { CirculationService } from '../../services/circulation.service';
+import { DateTime } from 'luxon';
 
 @Component({
   selector: 'admin-circulation-patron-detailed',
@@ -55,25 +55,24 @@ 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();
   }
 
   // COMPONENT FUNCTIONS ======================================================
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.ts b/projects/admin/src/app/circulation/patron/change-password-form/change-password-form.component.ts
index 45e7f0f1f..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
@@ -19,6 +19,7 @@ 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 { MessageService } from 'primeng/api';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
@@ -66,7 +67,8 @@ export class ChangePasswordFormComponent implements OnInit {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Patron'),
-          detail: this.translateService.instant('The patron password has been changed.')
+          detail: this.translateService.instant('The patron password has been changed.'),
+          life: CONFIG.MESSAGE_LIFE
         });
         this.closeModal();
       },
@@ -78,7 +80,7 @@ export class ChangePasswordFormComponent implements OnInit {
         this.messageService.add({
           severity: 'error',
           summary: this.translateService.instant('Patron'),
-          detail: this.translateService.instant('Update Patron Password'),
+          detail: `${this.translateService.instant('Update Patron Password')}.<br/>${error}`,
           sticky: true,
           closable: true
         });
diff --git a/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.html b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.html
new file mode 100644
index 000000000..46200504a
--- /dev/null
+++ b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.component.html
@@ -0,0 +1,18 @@
+<!--
+  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-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/record/detail-view/document-detail-view/document-detail-view.component.scss b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.service.spec.ts
similarity index 58%
rename from projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.scss
rename to projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.service.spec.ts
index 62eb75ca6..f5b6ab80c 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.scss
+++ b/projects/admin/src/app/circulation/patron/loan/circulation-settings/circulation-settings.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,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/>.
  */
-.btn-duplicate {
-  z-index: 2;
-  position: relative;
-}
+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.ts b/projects/admin/src/app/circulation/patron/loan/fixed-date-form/fixed-date-form.component.ts
index f30a48e3b..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,8 +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 { formatDate } from '@angular/common';
 import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Library } from '@app/admin/classes/library';
@@ -24,11 +22,8 @@ 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 { DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Subscription } from 'rxjs';
-import { CirculationService } from '../../../services/circulation.service';
-
 
 @Component({
   selector: 'admin-fixed-date-form',
@@ -40,7 +35,6 @@ export class FixedDateFormComponent implements OnInit, OnDestroy {
   private translateService: TranslateService = inject(TranslateService);
   private userService: UserService = inject(UserService);
   private recordService: RecordService = inject(RecordService);
-  private circulationService: CirculationService = inject(CirculationService);
 
   /** the date format to used */
   static DATE_FORMAT = 'YYYY-MM-DD';
@@ -57,15 +51,10 @@ 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: []
-  };
+
+  disabledDays: number[] = [];
+
+  today: Date = new Date();
 
   /** component subscriptions */
   private subscription = new Subscription();
@@ -76,14 +65,10 @@ export class FixedDateFormComponent implements OnInit, OnDestroy {
       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 */
@@ -104,23 +89,4 @@ export class FixedDateFormComponent implements OnInit, OnDestroy {
   closeModal() {
     this.dynamicDialogRef.close();
   }
-
-  /** 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);
-      }
-    });
-  }
 }
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 e82358f82..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, 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 { MessageService } from 'primeng/api';
-import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+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',
@@ -50,11 +39,9 @@ export class LoanComponent implements OnInit, OnDestroy {
   private translateService: TranslateService = inject(TranslateService);
   private patronService: PatronService = inject(PatronService);
   private userService: UserService = inject(UserService);
-  private dateTranslatePipe: DateTranslatePipe = inject(DateTranslatePipe);
   private circulationService: CirculationService = inject(CirculationService);
-  private loanFixedDateService: LoanFixedDateService = inject(LoanFixedDateService);
   private messageService: MessageService = inject(MessageService);
-  private dialogService: DialogService = inject(DialogService);
+  private circulationSettingsService: CirculationSettingsService = inject(CirculationSettingsService);
 
   dialogRef: DynamicDialogRef | undefined;
 
@@ -80,22 +67,11 @@ export class LoanComponent implements OnInit, OnDestroy {
   private subscription = new Subscription();
   /** checkout list sort criteria */
   private sortCriteria = '-transaction_date';
-  /** 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();
   }
 
   /**
@@ -104,25 +80,14 @@ 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);
   }
 
   /** OnInit hook */
@@ -153,11 +118,6 @@ export class LoanComponent implements OnInit, OnDestroy {
     }));
     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 */
@@ -193,7 +153,8 @@ export class LoanComponent implements OnInit, OnDestroy {
         this.messageService.add({
           severity: 'warn',
           summary: this.translateService.instant('Checkin'),
-          detail: this.translateService.instant('The item has a request')
+          detail: this.translateService.instant('The item has a request'),
+          life: CONFIG.MESSAGE_LIFE
         });
       }
       if (item.status === ItemStatus.IN_TRANSIT) {
@@ -201,7 +162,8 @@ export class LoanComponent implements OnInit, OnDestroy {
         this.messageService.add({
           severity: 'warn',
           summary: this.translateService.instant('Checkin'),
-          detail: this.translateService.instant('The item is in transit to {{ destination }}', {destination})
+          detail: this.translateService.instant('The item is in transit to {{ destination }}', {destination}),
+          life: CONFIG.MESSAGE_LIFE
         });
       }
     } else {
@@ -211,7 +173,9 @@ export class LoanComponent implements OnInit, OnDestroy {
             this.messageService.add({
               severity: 'error',
               summary: this.translateService.instant('Checkout'),
-              detail: this.translateService.instant('Item not found')
+              detail: this.translateService.instant('Item not found'),
+              sticky: true,
+              closable: true
             });
             this._resetSearchInput();
           } else {
@@ -219,7 +183,9 @@ export class LoanComponent implements OnInit, OnDestroy {
               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')
+                detail: this.translateService.instant('Checkout impossible: the item is already on loan for another patron'),
+                sticky: true,
+                closable: true
               });
               this._resetSearchInput();
             } else {
@@ -227,7 +193,9 @@ export class LoanComponent implements OnInit, OnDestroy {
                 this.messageService.add({
                   severity: 'error',
                   summary: this.translateService.instant('Checkout'),
-                  detail: this.translateService.instant('Checkout impossible: the item is requested by another patron')
+                  detail: this.translateService.instant('Checkout impossible: the item is requested by another patron'),
+                  sticky: true,
+                  closable: true
                 });
                 this._resetSearchInput();
               } else {
@@ -241,7 +209,9 @@ export class LoanComponent implements OnInit, OnDestroy {
           this.messageService.add({
             severity: 'error',
             summary: this.translateService.instant('Checkout'),
-            detail: this.translateService.instant(error.message)
+            detail: this.translateService.instant(error.message),
+            sticky: true,
+            closable: true
           });
           this._resetSearchInput();
         }
@@ -259,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(
@@ -287,11 +257,12 @@ export class LoanComponent implements OnInit, OnDestroy {
                 this.messageService.add({
                   severity: 'warn',
                   summary: this.translateService.instant('Checkin'),
-                  detail: this.translateService.instant('The item is in transit to {{ destination }}', {destination})
+                  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: {
@@ -299,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;
             }
@@ -343,7 +314,9 @@ export class LoanComponent implements OnInit, OnDestroy {
           this.messageService.add({
             severity: 'error',
             summary: this.translateService.instant('Circulation'),
-            detail: this.translateService.instant('An error occurred on the server: ') + errorMessage
+            detail: this.translateService.instant('An error occurred on the server: ') + errorMessage,
+            sticky: true,
+            closable: true
           });
         }
         this._resetSearchInput();
@@ -378,8 +351,7 @@ export class LoanComponent implements OnInit, OnDestroy {
         severity: 'warn',
         summary: this.translateService.instant('Checkin'),
         detail: message.join(),
-        sticky: true,
-        closable: true
+        life: CONFIG.MESSAGE_LIFE
       });
     }
   }
@@ -419,7 +391,8 @@ export class LoanComponent implements OnInit, OnDestroy {
         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.')
+          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
         });
       }
     }
@@ -434,7 +407,9 @@ export class LoanComponent implements OnInit, OnDestroy {
       this.messageService.add({
         severity: 'error',
         summary: this.translateService.instant('Checkin'),
-        detail: this.translateService.instant('The item has fees')
+        detail: this.translateService.instant('The item has fees'),
+        sticky: true,
+        closable: true
       });
     }
   }
@@ -466,59 +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.dialogRef = this.dialogService.open(FixedDateFormComponent, {
-      dismissableMask: true
-    });
-    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);
-        }
-      }
-    });
-  }
-
-  /**
-   * 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 206f975d4..aa99e8a55 100644
--- a/projects/admin/src/app/circulation/patron/main/main.component.ts
+++ b/projects/admin/src/app/circulation/patron/main/main.component.ts
@@ -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',
@@ -43,6 +45,7 @@ export class MainComponent implements OnInit, OnDestroy {
   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 */
@@ -109,6 +112,9 @@ export class MainComponent implements OnInit, OnDestroy {
 
   historyCount = 0;
 
+  items: MenuItem[] | undefined;
+
+  activeItem: MenuItem | undefined;
 
   // GETTER & SETTER ====================================================
   /**
@@ -129,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();
@@ -172,6 +184,7 @@ export class MainComponent implements OnInit, OnDestroy {
               this.feesTotalAmount = (total > 0) ? total : 0;
             }
           );
+          this.initializeMenu();
         });
       }
     });
@@ -202,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
@@ -222,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/patron-fee/patron-fee.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-fee/patron-fee.component.ts
index 96ac4b2ab..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
@@ -19,7 +19,7 @@ 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 { MessageService } from 'primeng/api';
@@ -87,7 +87,8 @@ export class PatronFeeComponent implements OnInit {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Patron transaction'),
-          detail: this.translateService.instant('Added a new fee.')
+          detail: this.translateService.instant('Added a new fee.'),
+          life: CONFIG.MESSAGE_LIFE
         });
       },
       error: () => this.messageService.add({
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.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 d61b9389e..18ca2ca79 100644
--- a/projects/admin/src/app/circulation/patron/pending/pending.component.ts
+++ b/projects/admin/src/app/circulation/patron/pending/pending.component.ts
@@ -54,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.component.ts b/projects/admin/src/app/circulation/patron/pickup/pickup.component.ts
index 62a0d7062..fd254e435 100644
--- a/projects/admin/src/app/circulation/patron/pickup/pickup.component.ts
+++ b/projects/admin/src/app/circulation/patron/pickup/pickup.component.ts
@@ -52,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 9658d811e..7f035d573 100644
--- a/projects/admin/src/app/circulation/patron/profile/profile.component.ts
+++ b/projects/admin/src/app/circulation/patron/profile/profile.component.ts
@@ -20,6 +20,7 @@ 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',
@@ -30,6 +31,7 @@ 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;
@@ -77,6 +79,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
    */
   updatePatronPassword(patron) {
     this.dialogService.open(ChangePasswordFormComponent, {
+      header: this.translateService.instant('Update Patron Password'),
       data: {
         patron
       }
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 4b1fb4b40..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
@@ -58,7 +58,7 @@ export class LoanFixedDateService {
    * 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)) {
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 404333a02..7c54e9814 100644
--- a/projects/admin/src/app/circulation/services/patron-transaction.service.ts
+++ b/projects/admin/src/app/circulation/services/patron-transaction.service.ts
@@ -23,7 +23,7 @@ import {
 } from '@app/admin/classes/patron-transaction';
 import { RouteToolService } from '@app/admin/routes/route-tool.service';
 import { TranslateService } from '@ngx-translate/core';
-import { Record, RecordService } from '@rero/ng-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';
@@ -239,7 +239,8 @@ export class PatronTransactionService {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Patron'),
-          detail: this.translateService.instant('{{ type }} registered', {type: translateType})
+          detail: this.translateService.instant('{{ type }} registered', {type: translateType}),
+          life: CONFIG.MESSAGE_LIFE
         });
       },
       (error) => {
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 68b02ada0..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"
@@ -26,7 +26,6 @@
     (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 86281087c..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
@@ -19,7 +19,7 @@ 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 { NgCoreTranslateService, RecordService } from '@rero/ng-core';
+import { CONFIG, NgCoreTranslateService, RecordService } from '@rero/ng-core';
 import { MessageService } from 'primeng/api';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
 
@@ -54,20 +54,29 @@ export class IssueEmailComponent implements OnInit {
   ngOnInit(): void {
     this.record = this.dynamicDialogConfig.data.record;
     this.itemApiService.getPreviewByItemPid(this.record.metadata.pid)
-      .subscribe((response: any) => {
-        if (response.error) {
-          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
-          });
-          this.closeDialog();
-        } else {
-          this.suggestions = Tools.processRecipientSuggestions(response.recipient_suggestions);
-          this.response = response;
-        }
+      .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
+        })
       });
   }
 
@@ -77,7 +86,8 @@ export class IssueEmailComponent implements OnInit {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Claim'),
-          detail: this.translateService.instant('A new claim has been created.')
+          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'})
diff --git a/projects/admin/src/app/guard/item-access.guard.ts b/projects/admin/src/app/guard/item-access.guard.ts
index 31913062b..20f4b6108 100644
--- a/projects/admin/src/app/guard/item-access.guard.ts
+++ b/projects/admin/src/app/guard/item-access.guard.ts
@@ -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 { 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 { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
 import { UserService } from '@rero/shared';
 import { MessageService } from 'primeng/api';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 
 
 @Injectable({
@@ -64,7 +63,8 @@ export class ItemAccessGuard implements CanActivate {
             this.messageService.add({
               severity: 'warn',
               summary: this.translateService.instant('item'),
-              detail: this.translateService.instant('Access denied')
+              detail: this.translateService.instant('Access denied'),
+              life: CONFIG.MESSAGE_LIFE
             });
             // Redirect to homepage
             this.router.navigate(['/']);
@@ -74,7 +74,8 @@ export class ItemAccessGuard implements CanActivate {
             this.messageService.add({
               severity: 'warn',
               summary: this.translateService.instant('item'),
-              detail: this.translateService.instant('Access denied')
+              detail: this.translateService.instant('Access denied'),
+              life: CONFIG.MESSAGE_LIFE
             });
             // Redirect to homepage
             this.router.navigate(['/']);
@@ -85,7 +86,8 @@ export class ItemAccessGuard implements CanActivate {
           this.messageService.add({
             severity: 'warn',
             summary: this.translateService.instant('item'),
-            detail: this.translateService.instant('Item not found')
+            detail: this.translateService.instant('Item not found'),
+            life: CONFIG.MESSAGE_LIFE
           });
           // Redirect to homepage on error
           this.router.navigate(['/']);
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 9015dde51..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
@@ -49,12 +49,14 @@ export class MenuUserComponent implements OnInit, OnDestroy {
     this.subscription.add(
       this.menuService.generateMenuLibrary$().subscribe((menu: any) => {
         this.items = [menu.menu, ...this.items];
-        this.libraryService.switch(menu.libraryActive);
       })
     );
     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 {
diff --git a/projects/admin/src/app/menu/service/menu-translate.service.ts b/projects/admin/src/app/menu/service/menu-translate.service.ts
index e188c3f3f..63036e574 100644
--- a/projects/admin/src/app/menu/service/menu-translate.service.ts
+++ b/projects/admin/src/app/menu/service/menu-translate.service.ts
@@ -34,7 +34,7 @@ export class MenuTranslateService {
   }
 
   // Available variables for menu definitions.
-  private REPLACEMENT_VARIABLES = {
+  public REPLACEMENT_VARIABLES = {
     $currentLibrary: () => this.userService.user.currentLibrary,
     $currentOrganisation: () => this.userService.user.currentOrganisation,
     $symbolName: () => this.userService.user.symbolName,
diff --git a/projects/admin/src/app/menu/service/menu.service.ts b/projects/admin/src/app/menu/service/menu.service.ts
index cef104dae..f96f9d876 100644
--- a/projects/admin/src/app/menu/service/menu.service.ts
+++ b/projects/admin/src/app/menu/service/menu.service.ts
@@ -136,10 +136,16 @@ export class MenuService {
   }
 
   public updateLibraryLink(library: ISwitchLibrary): void {
-    this.appMenuItems
+    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)
-    .routerLink = ['/', 'records', 'libraries', 'detail', library.pid];
+    .find((item: MenuItem) => item.id === MENU_IDS.APP.ADMIN.MY_LIBRARY);
+    const routerLink = [...item.routerLink];
+    routerLink[4] = library.pid;
+    item.routerLink = routerLink;
+  }
+
+  public updateLibraryQueryParams(library: ISwitchLibrary): void {
+    this.updateQueryParams(this.appMenuItems, library);
   }
 
   public logout(): void {
@@ -168,4 +174,25 @@ export class MenuService {
       return item;
     });
   }
+
+  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 menuItems;
+  }
+
+  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/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/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 f6cbb890e..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,7 +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 { UserService } from '@rero/shared';
 import { userTestingService } from 'projects/admin/tests/utils';
 import { CirculationLogComponent } from './circulation-log.component';
@@ -83,7 +82,6 @@ describe('CirculationLogComponent', () => {
       ],
       providers: [
           { provide: UserService, useValue: userTestingService },
-          BsLocaleService
       ]
     })
     .compileComponents();
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 f84959791..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
@@ -18,6 +18,7 @@ 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',
@@ -39,6 +40,7 @@ import { CirculationLogsComponent } from './circulation-logs.component';
 export class CirculationLogsDialogComponent {
 
   private dialogService: DialogService = inject(DialogService);
+  private translateService: TranslateService = inject(TranslateService);
 
   // COMPONENT ATTRIBUTES =====================================================
   /** Resource pid */
@@ -56,7 +58,9 @@ export class CirculationLogsDialogComponent {
   /** Open operation logs dialog */
   openDialog(): void {
     this.dialogService.open(CirculationLogsComponent, {
+      header: this.translateService.instant('Circulation history'),
       dismissableMask: true,
+      width: '60vw',
       data: {
         resourcePid: this.resourcePid,
         resourceType: this.resourceType
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/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 63553941b..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
@@ -18,7 +18,7 @@
 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 { AbstractCanDeactivateComponent, CONFIG, RecordService } from '@rero/ng-core';
 import { MessageService } from 'primeng/api';
 import { combineLatest } from 'rxjs';
 import { EditorService } from '../../../service/editor.service';
@@ -59,7 +59,8 @@ export class DocumentEditorComponent extends AbstractCanDeactivateComponent {
           this.messageService.add({
             severity: 'warn',
             summary: this.translateService.instant('Import'),
-            detail: this.translateService.instant('Does not exists on the remote server!')
+            detail: this.translateService.instant('Does not exists on the remote server!'),
+            life: CONFIG.MESSAGE_LIFE
           });
         }
       }
@@ -81,13 +82,15 @@ export class DocumentEditorComponent extends AbstractCanDeactivateComponent {
           this.messageService.add({
             severity: 'success',
             summary: this.translateService.instant('Duplicate'),
-            detail: this.translateService.instant('Document duplicated')
+            detail: this.translateService.instant('Document duplicated'),
+            life: CONFIG.MESSAGE_LIFE
           });
         } else {
           this.messageService.add({
             severity: 'warn',
             summary: this.translateService.instant('Duplicate'),
-            detail: this.translateService.instant('This document does not exists!')
+            detail: this.translateService.instant('This document does not exists!'),
+            life: CONFIG.MESSAGE_LIFE
           });
         }
       }
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-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 c05836f6e..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
@@ -18,6 +18,7 @@ import { ChangeDetectorRef, Component, inject, Input } from '@angular/core';
 import { ExceptionDates, Library } from '@app/admin/classes/library';
 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,6 +28,7 @@ export class ExceptionDatesListComponent {
 
   private dialogService: DialogService = inject(DialogService);
   private changeDetectorRef: ChangeDetectorRef = inject(ChangeDetectorRef);
+  private translateService: TranslateService = inject(TranslateService);
 
   private dynamicDialogRef: DynamicDialogRef | undefined;
 
@@ -34,6 +36,8 @@ export class ExceptionDatesListComponent {
 
   addException(): void {
     this.dynamicDialogRef = this.dialogService.open(ExceptionDatesEditComponent, {
+      header: this.translateService.instant('Exception'),
+      width: '50vw',
       data: {
         exceptionDate: null
       }
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 bf0461021..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
@@ -46,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'); }
@@ -82,7 +82,7 @@ export class LibraryFormService {
         billing_informations: this._buildAcqInformation()
       }),
       rollover_settings: this.fb.group({
-        account_transfer: [this.accountDefaultTransfertOption, [Validators.required]]
+        account_transfer: [this.accountDefaultTransferOption, [Validators.required]]
       })
     });
     this._initializeOpeningHours();
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 988a7fe0e..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
@@ -21,7 +21,7 @@ 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, cleanDictKeys, RecordService, removeEmptyValues, UniqueValidator } from '@rero/ng-core';
+import { AbstractCanDeactivateComponent, ApiService, cleanDictKeys, CONFIG, RecordService, removeEmptyValues, UniqueValidator } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
 import { MessageService } from 'primeng/api';
 import { Subscription } from 'rxjs';
@@ -147,14 +147,17 @@ export class LibraryComponent extends AbstractCanDeactivateComponent implements
             this.messageService.add({
               severity: 'success',
               summary: this.translateService.instant('libraries'),
-              detail: this.translateService.instant('Record Updated!')
+              detail: this.translateService.instant('Record Updated!'),
+              life: CONFIG.MESSAGE_LIFE
             });
             this.router.navigate(['records', 'libraries', 'detail', this.library.pid]);
           },
           error: (error) => this.messageService.add({
             severity: 'error',
             summary: this.translateService.instant('libraries'),
-            detail: error.title
+            detail: error.title,
+            sticky: true,
+            closable: true
           })
       });
     } else {
@@ -166,14 +169,17 @@ export class LibraryComponent extends AbstractCanDeactivateComponent implements
             this.messageService.add({
               severity: 'success',
               summary: this.translateService.instant('libraries'),
-              detail: this.translateService.instant('Record created!')
+              detail: this.translateService.instant('Record created!'),
+              life: CONFIG.MESSAGE_LIFE
             });
             this.router.navigate(['records', 'libraries', 'detail', record.metadata.pid]);
           },
           error: (error) => this.messageService.add({
             severity: 'error',
             summary: this.translateService.instant('libraries'),
-            detail: error.title
+            detail: error.title,
+            sticky: true,
+            closable: true
           })
       });
     }
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 1c5dc52ef..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
@@ -18,7 +18,7 @@ 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 { JSONSchema7, NgCoreTranslateService, processJsonSchema, RecordService, removeEmptyValues } from '@rero/ng-core';
+import { CONFIG, JSONSchema7, NgCoreTranslateService, processJsonSchema, RecordService, removeEmptyValues } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
 import { MessageService } from 'primeng/api';
 import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
@@ -146,7 +146,8 @@ export class UserIdEditorComponent implements OnInit {
           this.messageService.add({
             severity: 'warn',
             summary: this.translateService.instant('User'),
-            detail: this.translateService.instant('User not found.')
+            detail: this.translateService.instant('User not found.'),
+            life: CONFIG.MESSAGE_LIFE
           })
           return null;
         }
@@ -168,7 +169,8 @@ export class UserIdEditorComponent implements OnInit {
             this.messageService.add({
               severity: 'info',
               summary: this.translateService.instant('User'),
-              detail: this.translateService.instant('This person is already registered in your organisation.')
+              detail: this.translateService.instant('This person is already registered in your organisation.'),
+              life: CONFIG.MESSAGE_LIFE
             });
             return of(null);
           }
@@ -176,7 +178,8 @@ export class UserIdEditorComponent implements OnInit {
         this.messageService.add({
           severity: 'info',
           summary: this.translateService.instant('User'),
-          detail: this.translateService.instant('The personal data has been successfully linked to this patron.')
+          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;
@@ -201,7 +204,9 @@ export class UserIdEditorComponent implements OnInit {
       this.messageService.add({
         severity: 'error',
         summary: this.translateService.instant('User'),
-        detail: this.translateService.instant('The form contains errors.')
+        detail: this.translateService.instant('The form contains errors.'),
+        sticky: true,
+        closable: true
       });
       return;
     }
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/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 95e6470ad..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
@@ -26,8 +26,7 @@ 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 {
 
@@ -64,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) {
@@ -106,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, {
@@ -195,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/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 0a5c86cf6..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
@@ -19,6 +19,7 @@ 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 { CONFIG } from '@rero/ng-core';
 import { MessageService } from 'primeng/api';
 import { Subscription } from 'rxjs';
 
@@ -105,7 +106,8 @@ export class FilesCollectionsComponent implements OnInit, OnDestroy {
     this.messageService.add({
       severity: 'success',
       summary: this.translateService.instant('File'),
-      detail: this.translateService.instant('Collections have been saved successfully.')
+      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 a1c97857a..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
@@ -17,7 +17,7 @@
 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 { Record } from '@rero/ng-core';
+import { CONFIG, Record } from '@rero/ng-core';
 import { NgxSpinnerService } from 'ngx-spinner';
 import { ConfirmationService, MessageService } from 'primeng/api';
 import { FileUpload } from 'primeng/fileupload';
@@ -94,7 +94,8 @@ export class UploadFilesComponent implements OnInit {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('File'),
-          detail: this.translateService.instant('Metadata have been saved successfully.')
+          detail: this.translateService.instant('Metadata have been saved successfully.'),
+          life: CONFIG.MESSAGE_LIFE
         });
       });
   }
@@ -168,7 +169,9 @@ export class UploadFilesComponent implements OnInit {
             this.messageService.add({
               severity: 'error',
               summary: this.translateService.instant('File'),
-              detail: msg
+              detail: msg,
+              sticky: true,
+              closable: true
             });
             return of([]);
           }),
@@ -178,7 +181,8 @@ export class UploadFilesComponent implements OnInit {
             this.messageService.add({
               severity: 'success',
               summary: this.translateService.instant('File'),
-              detail: this.translateService.instant('File uploaded successfully.')
+              detail: this.translateService.instant('File uploaded successfully.'),
+              life: CONFIG.MESSAGE_LIFE
             });
             this.nUploadedFiles = 0;
           }),
@@ -259,7 +263,8 @@ export class UploadFilesComponent implements OnInit {
             this.messageService.add({
               severity: 'success',
               summary: this.translateService.instant('File'),
-              detail: this.translateService.instant('File removed successfully.')
+              detail: this.translateService.instant('File removed successfully.'),
+              life: CONFIG.MESSAGE_LIFE
             });
             return true;
           })
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/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 db86088d0..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
@@ -109,6 +109,8 @@ export class HoldingComponent implements OnInit, OnDestroy {
    */
   addRequest(recordPid: string, recordType: string): void {
     const ref: DynamicDialogRef = this.dialogService.open(ItemRequestComponent, {
+      header: this.translateService.instant('Item Request'),
+      width: '30vw',
       data: { recordPid, recordType }
     });
     ref.onClose.subscribe((value?: boolean) => {
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 e785b7719..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
@@ -16,12 +16,14 @@
  */
 
 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',
@@ -33,7 +35,8 @@ export class HoldingsComponent implements OnInit {
   private holdingsApiService: HoldingsApiService = inject(HoldingsApiService);
   private recordUiService: RecordUiService = inject(RecordUiService);
   private recordPermissionService: RecordPermissionService = inject(RecordPermissionService);
-  private translateService: TranslateService
+  private translateService: TranslateService = inject(TranslateService);
+  private router: Router = inject(Router);
 
   // COMPONENT ATTRIBUTES =====================================================
   /** Document */
@@ -43,6 +46,8 @@ export class HoldingsComponent implements OnInit {
   /** Restrict the functionality of interface */
   @Input() isCurrentOrganisation = true;
 
+  options: any[];
+
   /** Holdings total */
   holdingsTotal = 0;
   /** Current page */
@@ -93,6 +98,10 @@ export class HoldingsComponent implements OnInit {
 
   /** 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);
@@ -147,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 af232d9c8..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
@@ -19,7 +19,7 @@ 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 { User, UserService } from '@rero/shared';
 import { MessageService } from 'primeng/api';
@@ -81,12 +81,9 @@ export class ItemRequestComponent implements OnInit {
   /** OnInit hook */
   ngOnInit() {
     this.currentUser = this.userService.user;
-    const initialState: any = this.dynamicDialogConfig.data.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();
@@ -125,10 +122,11 @@ export class ItemRequestComponent implements OnInit {
           this.messageService.add({
             severity: 'success',
             summary: this.translateService.instant('Item request'),
-            detail: this.translateService.instant('Request registered.')
+            detail: this.translateService.instant('Request registered.'),
+            life: CONFIG.MESSAGE_LIFE
           });
         },
-        error: (error: unknown) => this.messageService.add({
+        error: () => this.messageService.add({
           severity: 'error',
           summary: this.translateService.instant('Item request'),
           detail: this.translateService.instant('An error has occurred. Please try again.'),
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/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 e21cea5b2..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
@@ -19,7 +19,7 @@ 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 { TranslateService } from '@ngx-translate/core';
-import { Record, RecordService } from '@rero/ng-core';
+import { CONFIG, Record, RecordService } from '@rero/ng-core';
 import { IPermissions, IssueItemStatus, PERMISSIONS, PermissionsService, UserService } from '@rero/shared';
 import { MessageService } from 'primeng/api';
 
@@ -133,7 +133,8 @@ export class SerialHoldingDetailViewComponent implements OnInit {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Issue'),
-          detail: this.translateService.instant('New issue created.')
+          detail: this.translateService.instant('New issue created.'),
+          life: CONFIG.MESSAGE_LIFE
         });
         // change item structure to have same structure as received items
         const item = {
@@ -148,7 +149,9 @@ export class SerialHoldingDetailViewComponent implements OnInit {
         this.messageService.add({
           severity: 'error',
           summary: this.translateService.instant('Issue creation failed!'),
-          detail: `[${error.status}-${error.statusText}] ${error.error.message}`
+          detail: `[${error.status}-${error.statusText}] ${error.error.message}`,
+          sticky: true,
+          closable: true
         });
       }
     });
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-transactions/item-transactions.component.ts b/projects/admin/src/app/record/detail-view/item-detail-view/item-transactions/item-transactions.component.ts
index d3c6165e9..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
@@ -18,6 +18,7 @@
 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 { MessageService } from 'primeng/api';
 import { DialogService } from 'primeng/dynamicdialog';
@@ -76,6 +77,8 @@ export class ItemTransactionsComponent implements OnInit, OnDestroy {
    */
   addRequest(): void {
     const ref = this.dialogService.open(ItemRequestComponent, {
+      header: this.translateService.instant('Item request'),
+      width: '40vw',
       data: { recordPid: this.itemPid, recordType: 'item' }
     });
     this.subscription.add(
@@ -99,7 +102,8 @@ export class ItemTransactionsComponent implements OnInit, OnDestroy {
         this.messageService.add({
           severity: 'warn',
           summary: this.translateService.instant('Request'),
-          detail: this.translateService.instant('The pending request has been cancelled.')
+          detail: this.translateService.instant('The pending request has been cancelled.'),
+          life: CONFIG.MESSAGE_LIFE
         });
         this.requestEvent.emit();
         this._refreshRequestList();
@@ -117,7 +121,8 @@ export class ItemTransactionsComponent implements OnInit, OnDestroy {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Request'),
-          detail: this.translateService.instant('The pickup location has been changed.')
+          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/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/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/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/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/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/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 d97fa37ef..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
@@ -16,18 +16,21 @@
  */
 import { HttpClient } from "@angular/common/http";
 import { Component, inject, OnDestroy, OnInit } from '@angular/core';
-import { ApiService } from "@rero/ng-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 {
 
   private httpClient: HttpClient = inject(HttpClient);
-  private apiService: ApiService = inject(ApiService);
+  private appConfigService: AppConfigService = inject(AppConfigService);
+  private translateService: TranslateService = inject(TranslateService);
 
   /** Observable resolving record data */
   record$: Observable<any>;
@@ -41,6 +44,9 @@ export class StatisticsCfgDetailViewComponent implements DetailRecord, OnInit, O
   // 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();
 
@@ -62,10 +68,28 @@ export class StatisticsCfgDetailViewComponent implements DetailRecord, OnInit, O
     if (this.liveData != null) {
       return;
     }
+    this.liveDataError = undefined;
     const { pid } = this.record.metadata;
-    const baseUrl = this.apiService.endpointPrefix;
+    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 3aa5c0635..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
@@ -41,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;
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/editor/formly/primeng/entity-autocomplete/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
index e12adc25a..f7deac104 100644
--- a/projects/admin/src/app/record/editor/formly/primeng/entity-autocomplete/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
@@ -106,7 +106,9 @@ export class AddEntityLocalFormComponent implements OnInit, OnDestroy {
         error: () => this.messageService.add({
           severity: 'error',
           summary: this.translateService.instant('Add local entity'),
-          detail: this.translateService.instant('Data submission generated an error.')
+          detail: this.translateService.instant('Data submission generated an error.'),
+          sticky: true,
+          closable: true
         })
       }));
     }
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
index 6bbd916ce..b142141df 100644
--- 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
@@ -16,7 +16,7 @@
  */
 import { inject, Injectable } from '@angular/core';
 import { IRemoteAutocomplete } from './i-remote-autocomplete';
-import { ApiService, RecordService, SuggestionMetadata } from '@rero/ng-core';
+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';
@@ -74,7 +74,7 @@ export class PatronsRemoteService implements IRemoteAutocomplete {
       );
   }
 
-  private getPatronsRef(metadata: any, query: string): SuggestionMetadata {
+  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/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 39157f68e..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
@@ -18,6 +18,7 @@ import { Component, inject, Input } from '@angular/core';
 import { IPermissions, PERMISSIONS } from '@rero/shared';
 import { DialogService } from 'primeng/dynamicdialog';
 import { OperationLogsComponent } from '../operation-logs.component';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'admin-operation-logs-dialog',
@@ -26,6 +27,7 @@ import { OperationLogsComponent } from '../operation-logs.component';
 export class OperationLogsDialogComponent {
 
   private dialogService: DialogService = inject(DialogService);
+  private translateService: TranslateService = inject(TranslateService);
 
   /** Resource type */
   @Input() resourceType: string;
@@ -39,7 +41,9 @@ export class OperationLogsDialogComponent {
   /** Open operation logs dialog */
   openDialog(): void {
     this.dialogService.open(OperationLogsComponent, {
+      header: this.translateService.instant('Operation history'),
       dismissableMask: true,
+      width: '60vw',
       data: {
         resourceType: this.resourceType,
         resourcePid: this.resourcePid
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 84bb74a31..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
@@ -66,7 +66,7 @@ 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');
diff --git a/projects/admin/src/app/scss/styles.scss b/projects/admin/src/app/scss/styles.scss
index 1b8f0480d..8da9ea582 100644
--- a/projects/admin/src/app/scss/styles.scss
+++ b/projects/admin/src/app/scss/styles.scss
@@ -356,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 65954cf09..3094138f9 100644
--- a/projects/admin/src/app/service/app-initializer.service.ts
+++ b/projects/admin/src/app/service/app-initializer.service.ts
@@ -22,6 +22,7 @@ import { switchMap, tap } from 'rxjs/operators';
 import { AppConfigService } from './app-config.service';
 import { OrganisationService } from './organisation.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'
@@ -34,15 +35,22 @@ export class AppInitializerService {
   private appConfigService: AppConfigService = inject(AppConfigService);
   private translateService: NgCoreTranslateService = inject(NgCoreTranslateService);
   private remoteAutocompleteFactoryService: RemoteAutocompleteFactoryService = inject(RemoteAutocompleteFactoryService);
+  private librarySwitchStorageService: LibrarySwitchStorageService = inject(LibrarySwitchStorageService);
 
   load(): Observable<any> {
     return this.userService.load().pipe(
       tap((user: User) => {
         this.remoteAutocompleteFactoryService.init();
         if (user.hasAdminUiAccess) {
-          // 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);
diff --git a/projects/admin/src/app/service/issue.service.spec.ts b/projects/admin/src/app/service/issue.service.spec.ts
index b9b7d5e09..9fa0b781a 100644
--- a/projects/admin/src/app/service/issue.service.spec.ts
+++ b/projects/admin/src/app/service/issue.service.spec.ts
@@ -20,7 +20,6 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
 import { IssueItemStatus } from '@rero/shared';
-import { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { IssueEmailComponent } from '../components/issues/issue-email/issue-email.component';
 import { PreviewEmailModule } from '../shared/preview-email/preview-email.module';
 import { IssueService } from './issue.service';
@@ -46,7 +45,6 @@ describe('IssueService', () => {
       providers: [
         PreviewEmailModule,
         CommonModule,
-        BsLocaleService,
         IssueService
       ]
     });
diff --git a/projects/admin/src/app/service/issue.service.ts b/projects/admin/src/app/service/issue.service.ts
index bc6f938e0..bfb0c6ebb 100644
--- a/projects/admin/src/app/service/issue.service.ts
+++ b/projects/admin/src/app/service/issue.service.ts
@@ -19,11 +19,13 @@ import { inject, Injectable } from '@angular/core';
 import { IssueItemStatus } from '@rero/shared';
 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 {
 
   private dialogService: DialogService = inject(DialogService);
+  private translateService: TranslateService = inject(TranslateService);
 
   /**
    * Is Allow claim
@@ -38,12 +40,14 @@ export class IssueService {
   }
 
   /**
-   * Opens a claim dialog
+   * Open a claim dialog
    * @param record the item
    * @return DynamicDialogRef
    */
   openClaimEmailDialog(record: any): DynamicDialogRef {
     return this.dialogService.open(IssueEmailComponent, {
+      header: this.translateService.instant('Claim'),
+      width: '60vw',
       dismissableMask: true,
       data: { record }
     });
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 94f847890..8c37cd666 100644
--- a/projects/admin/src/app/service/record.handle-error.service.ts
+++ b/projects/admin/src/app/service/record.handle-error.service.ts
@@ -43,7 +43,9 @@ export class RecordHandleErrorService extends CoreRecordHandleErrorService {
         detail: this.translateService.instant(
           'Your request to the external server has failed. Try again later ({{ statusCode }}).', {
             statusCode: error.status
-        })
+        }),
+        sticky: true,
+        closable: true
       });
       this.spinner.hide();
       return NEVER;
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 9431f4ff5..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
@@ -29,10 +29,16 @@ 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 { CardModule } from 'primeng/card';
+import { TableModule } from 'primeng/table';
+import { FieldsetModule } from 'primeng/fieldset';
 
 @NgModule({
   exports: [
@@ -51,7 +57,13 @@ import { TooltipModule } from 'primeng/tooltip';
     SkeletonModule,
     TagModule,
     TooltipModule,
-    NgCoreFormlyRemoteAutocompleteModule
+    NgCoreFormlyRemoteAutocompleteModule,
+    RadioButtonModule,
+    MessagesModule,
+    TabViewModule,
+    CardModule,
+    TableModule,
+    FieldsetModule
   ]
 })
 export class PrimengImportModule { }
diff --git a/projects/public-patron-profile/src/app/app.module.ts b/projects/public-patron-profile/src/app/app.module.ts
index 7e50d1edf..72384ba51 100644
--- a/projects/public-patron-profile/src/app/app.module.ts
+++ b/projects/public-patron-profile/src/app/app.module.ts
@@ -28,9 +28,6 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
 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 { 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 {
@@ -109,9 +106,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
       },
       isolate: false
     }),
-    TabsModule.forRoot(),
-    TooltipModule.forRoot(),
-    CollapseModule.forRoot(),
     SharedModule,
     LoadingBarHttpClientModule,
     LoadingBarModule
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.module.ts b/projects/public-search/src/app/app.module.ts
index b818e3e7d..f9957b07a 100644
--- a/projects/public-search/src/app/app.module.ts
+++ b/projects/public-search/src/app/app.module.ts
@@ -26,7 +26,6 @@ import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
 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 { BsLocaleService } from 'ngx-bootstrap/datepicker';
 import { AppConfigService } from './app-config.service';
 import { AppInitializerService } from './app-initializer.service';
 import { AppRoutingModule } from './app-routing.module';
@@ -79,7 +78,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
         { 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]
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/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-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 00a070333..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
@@ -17,6 +17,7 @@
 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 { MessageService } from 'primeng/api';
@@ -115,13 +116,16 @@ export class PatronProfileLoanComponent implements OnInit {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Success'),
-          detail: this.translateService.instant('The item has been renewed.')
+          detail: this.translateService.instant('The item has been renewed.'),
+          life: CONFIG.MESSAGE_LIFE
         });
       } else {
         this.messageService.add({
           severity: 'error',
           summary: this.translateService.instant('Error'),
-          detail: this.translateService.instant('Error during the renewal of the item.')
+          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-password/patron-profile-password.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.ts
index 3d596dcad..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,11 +15,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { DOCUMENT } from '@angular/common';
-import { Component, ElementRef, inject, 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 { MessageService } from 'primeng/api';
 import { of } from 'rxjs';
@@ -126,7 +127,9 @@ export class PatronProfilePasswordComponent {
       this.messageService.add({
         severity: 'error',
         summary: this.translateService.instant('Error'),
-        detail: this.translateService.instant('The form contains errors.')
+        detail: this.translateService.instant('The form contains errors.'),
+        sticky: true,
+        closable: true
       });
       return;
     }
@@ -144,7 +147,8 @@ export class PatronProfilePasswordComponent {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Success'),
-          detail: this.translateService.instant(response.message)
+          detail: this.translateService.instant(response.message),
+          life: CONFIG.MESSAGE_LIFE
         });
         // Close password form and show personal data
         this._redirect();
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 c64a80148..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
@@ -21,7 +21,7 @@ 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 { MessageService } from 'primeng/api';
 import { Subscription, forkJoin, of } from 'rxjs';
@@ -175,7 +175,9 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
       this.messageService.add({
         severity: 'error',
         summary: this.translateService.instant('Error'),
-        detail: this.translateService.instant('The form contains errors.')
+        detail: this.translateService.instant('The form contains errors.'),
+        sticky: true,
+        closable: true
       });
       return;
     }
@@ -188,7 +190,8 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
           this.messageService.add({
             severity: 'success',
             summary: this.translateService.instant('Success'),
-            detail: this.translateService.instant('Your personal data has been updated.')
+            detail: this.translateService.instant('Your personal data has been updated.'),
+            life: CONFIG.MESSAGE_LIFE
           });
           this.redirect();
         },
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-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 ff280a31a..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
@@ -16,10 +16,11 @@
  */
 import { Component, inject, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+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';
-import { MessageService } from 'primeng/api';
 
 @Component({
   selector: 'public-search-patron-profile-request',
@@ -69,14 +70,17 @@ export class PatronProfileRequestComponent {
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Success'),
-          detail: this.translateService.instant('The request has been cancelled.')
+          detail: this.translateService.instant('The request has been cancelled.'),
+          life: CONFIG.MESSAGE_LIFE
         });
       } else {
         this.cancelInProgress = false;
         this.messageService.add({
           severity: 'error',
           summary: this.translateService.instant('Error'),
-          detail: this.translateService.instant('Error during the cancellation of the request.')
+          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.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-user-password-change/src/app/app.module.ts b/projects/public-user-password-change/src/app/app.module.ts
index 427817fd1..f3b5b4893 100644
--- a/projects/public-user-password-change/src/app/app.module.ts
+++ b/projects/public-user-password-change/src/app/app.module.ts
@@ -27,11 +27,10 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
 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';
-import { Observable } from 'rxjs';
 
 /** function to instantiate the application  */
 export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
@@ -67,7 +66,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     SharedModule,
     LoadingBarHttpClientModule,
     LoadingBarModule,
-    TooltipModule.forRoot(),
   ],
   providers: [
     { provide: TranslateService, useClass: NgCoreTranslateService },
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 a4a3255c7..39829f35b 100644
--- a/projects/public-user-profile-edit/src/app/app.module.ts
+++ b/projects/public-user-profile-edit/src/app/app.module.ts
@@ -26,11 +26,10 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
 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';
-import { Observable } from 'rxjs';
 
 /** function to instantiate the application  */
 export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
@@ -61,7 +60,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     SharedModule,
     LoadingBarHttpClientModule,
     LoadingBarModule,
-    TooltipModule.forRoot(),
   ],
   providers: [
     { provide: TranslateService, useClass: NgCoreTranslateService },
diff --git a/projects/shared/src/lib/api/user-api.service.ts b/projects/shared/src/lib/api/user-api.service.ts
index cebe36ccf..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 { inject, Injectable } from '@angular/core';
-import { ApiService } from '@rero/ng-core';
+import { CoreConfigService } from '@rero/ng-core';
 import { Observable } from 'rxjs';
 import { User } from '../class/user';
 
@@ -27,7 +26,7 @@ import { User } from '../class/user';
 export class UserApiService {
 
   protected httpClient: HttpClient = inject(HttpClient);
-  protected apiService: ApiService = inject(ApiService);
+  protected configService: CoreConfigService = inject(CoreConfigService);
 
   /**
    * Get logged user
@@ -50,7 +49,7 @@ export class UserApiService {
       new_password: password,
       new_password_confirm: password
     };
-    const url = `${this.apiService.endpointPrefix}/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/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/pipe/item-holdings-call-number.pipe.ts b/projects/shared/src/lib/pipe/item-holdings-call-number.pipe.ts
index 092980ed0..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
@@ -46,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: {
@@ -73,6 +73,4 @@ export class ItemHoldingsCallNumberPipe implements PipeTransform {
       }));
     }
   }
-
-
 }
diff --git a/projects/shared/src/lib/shared.module.ts b/projects/shared/src/lib/shared.module.ts
index 65512fab5..934da6607 100644
--- a/projects/shared/src/lib/shared.module.ts
+++ b/projects/shared/src/lib/shared.module.ts
@@ -19,8 +19,6 @@ 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';
@@ -57,6 +55,7 @@ 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 { OpenCloseButtonComponent } from './component/open-close-button.component';
 
 @NgModule({
   declarations: [
@@ -95,7 +94,8 @@ import { ThumbnailComponent } from './view/thumbnail/thumbnail.component';
     DocumentBriefViewComponent,
     IdentifiedByLabelPipe,
     FilesComponent,
-    RemoteSearchComponent
+    RemoteSearchComponent,
+    OpenCloseButtonComponent
   ],
   exports: [
     CommonModule,
@@ -128,15 +128,14 @@ import { ThumbnailComponent } from './view/thumbnail/thumbnail.component';
     EntityLinkComponent,
     DocumentBriefViewComponent,
     FilesComponent,
-    RemoteSearchComponent
+    RemoteSearchComponent,
+    OpenCloseButtonComponent
   ],
   imports: [
     CommonModule,
     CoreModule,
     RecordModule,
     RouterModule,
-    TooltipModule.forRoot(),
-    PopoverModule.forRoot(),
     PrimeNgImportModule
   ],
   providers: [
diff --git a/projects/shared/src/public-api.ts b/projects/shared/src/public-api.ts
index 619d76803..175e6f1f2 100644
--- a/projects/shared/src/public-api.ts
+++ b/projects/shared/src/public-api.ts
@@ -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,27 +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/component/open-close-button.component';
 export * from './lib/component/remote-search/remote-search.component';
-export * from './lib/view/contribution/contribution.component';
-export * from './lib/view/entity-link.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';
@@ -62,17 +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/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';