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 447fb1c2d..d2062d370 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-2024 RERO
+  Copyright (C) 2021-2025 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,15 +14,14 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div (window:keypress)="checkinItemOnEnterKey($event)">
-  <div class="font-weight-bold" translate>
+<div class="font-bold mb-3" translate>
     One item and one patron were found.
-  </div>
 </div>
-<div>
+<div class="flex gap-2" (keyup.enter)="checkinItemOnEnterKey($event)">
   <p-button
     id="action-patron"
     icon="fa fa-user"
+    styleClass="outline-none"
     [label]="'Patron account'|translate"
     outlined
     (onClick)="setAction('patron')"
@@ -30,6 +29,7 @@
   <p-button
     id="action-item"
     icon="fa fa-file-o"
+    styleClass="outline-none"
     [label]="'Checkin the item'|translate"
     outlined
     (onClick)="setAction('item')"
diff --git a/projects/admin/src/app/circulation/checkin/checkin.component.html b/projects/admin/src/app/circulation/checkin/checkin.component.html
index 78e716f89..92521d099 100644
--- a/projects/admin/src/app/circulation/checkin/checkin.component.html
+++ b/projects/admin/src/app/circulation/checkin/checkin.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2023 RERO
+  Copyright (C) 2019-2025 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -17,34 +17,24 @@
 -->
 <h4 translate>Checkout/checkin</h4>
 <section class="content">
-  <div class="row">
-    <div class="col col-md-6 mb-4">
-      <ng-core-search-input
-        [placeholder]="placeholder | translate"
-        [searchText]="searchText"
-        [focus]="searchInputFocus"
-        [disabled]="searchInputDisabled"
-        (search)="searchValueUpdated($event)"
-      >
-      </ng-core-search-input>
-    </div>
-    <div class="col col-md-6 mb-4">
-      <admin-circulation-patron-detailed
+  <div class="flex flex-column gap-3">
+    <ng-core-search-input
+    [placeholder]="placeholder | translate"
+    [searchText]="searchText"
+    [focus]="searchInputFocus"
+    [disabled]="searchInputDisabled"
+    (search)="searchValueUpdated($event)"
+  />
+  <admin-circulation-patron-detailed
         [patron]="patronInfo"
         [barcode]="barcode"
         [linkMode]="'circulation'"
         [clearPatronButton]="false"
-      >
-      </admin-circulation-patron-detailed>
-    </div>
-  </div>
+      />
 
-  <div class="row">
-    <div class="col-md-12">
       <admin-circulation-items-list
         [checkedInItems]="items"
-        (hasFeesEmitter)="hasFees($event)">
-      </admin-circulation-items-list>
-    </div>
+        (hasFeesEmitter)="hasFees($event)"
+      />
   </div>
 </section>
diff --git a/projects/admin/src/app/circulation/checkin/checkin.component.ts b/projects/admin/src/app/circulation/checkin/checkin.component.ts
index 90b497cbb..31cd06833 100644
--- a/projects/admin/src/app/circulation/checkin/checkin.component.ts
+++ b/projects/admin/src/app/circulation/checkin/checkin.component.ts
@@ -155,7 +155,7 @@ export class CheckinComponent implements OnInit {
               item.notes = [];
             }
             item.notes.push({
-              content: error.error.status.replace(/^error:/, '').trim(),
+              content: this.processErrorMessage(error.error.status),
               type: ItemNoteType.API
             });
             this.items.unshift(item);
@@ -163,6 +163,14 @@ export class CheckinComponent implements OnInit {
             // catch this error to display it as a Toast message.
             this._checkinErrorManagement(error, item);
           });
+        } else if (error.error) {
+          this.messageService.add({
+            severity: 'warn',
+            summary: this.translate.instant('Checkin'),
+            detail: this.processErrorMessage(error.error.status),
+            life: CONFIG.MESSAGE_LIFE
+          });
+          this._resetSearchInput();
         }
       }
     });
@@ -227,7 +235,8 @@ export class CheckinComponent implements OnInit {
         if (patron.total.value === 1 && item.total.value === 1) {
           const ref: DynamicDialogRef = this.dialogService.open(CheckinActionComponent, {
             header: this.translate.instant('Circulation action'),
-            width: '50vw',
+            focusOnShow: false,
+            width: '25vw',
           })
           ref.onClose.subscribe((action: string) => {
             if (action) {
@@ -316,7 +325,7 @@ export class CheckinComponent implements OnInit {
   private _checkinErrorManagement(error: any, item: Item) {
     // get the error message from the raised error. This will be the Toast message core.
     let message = (error.hasOwnProperty('error') && error.error.hasOwnProperty('status'))
-      ? error.error.status.replace(/^error:/, '').trim()
+      ? this.processErrorMessage(error.error.status)
       : error.message;
     message = this.translate.instant(message);
     message += `<br/>${this.translate.instant('Status')}: ${this.translate.instant(item.status.toString())}`;
@@ -372,6 +381,10 @@ export class CheckinComponent implements OnInit {
     }
   }
 
+  private processErrorMessage(message: string): string {
+    return message.replace(/^error:/, '').trim();
+  }
+
   /** Reset search input */
   private _resetSearchInput(): void {
     setTimeout(() => {
diff --git a/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.scss b/projects/admin/src/app/circulation/circulation-main.component.ts
similarity index 52%
rename from projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.scss
rename to projects/admin/src/app/circulation/circulation-main.component.ts
index ab7813f28..e3b5a0340 100644
--- a/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.scss
+++ b/projects/admin/src/app/circulation/circulation-main.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019 RERO
+ * Copyright (C) 2024-2025 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,24 +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/>.
  */
+import { Component } from '@angular/core';
 
- @import 'bootstrap/scss/functions';
- @import 'bootstrap/scss/variables';
-
-.item {
-  margin-bottom: $spacer * .25 !important;
-  padding: $spacer * .25 !important;
-  border: $border-width solid $border-color;
-  border-radius: $border-radius;
-  position: relative;
-
-  &:hover{
-     background-color: $light;
-  }
-
-  div.actions {
-    position: absolute;
-    top: $spacer * .25;
-    right: 15px;
-  }
+@Component({
+  selector: 'admin-circulation-main',
+  template: `
+    <router-outlet></router-outlet>
+    <p-toast>
+      <ng-template let-message pTemplate="message">
+        <div class="flex flex-column align-items-start flex-grow-1">
+          <div class="font-medium text-lg text-900">
+            {{ message.summary }}
+          </div>
+          <p [innerHtml]="message.detail"></p>
+        </div>
+      </ng-template>
+    </p-toast>
+    <p-confirmDialog />
+  `
+})
+export class CirculationMainComponent {
 }
diff --git a/projects/admin/src/app/circulation/circulation-routing.module.ts b/projects/admin/src/app/circulation/circulation-routing.module.ts
index c2de9654c..e0a76f98a 100644
--- a/projects/admin/src/app/circulation/circulation-routing.module.ts
+++ b/projects/admin/src/app/circulation/circulation-routing.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,7 +14,6 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { PERMISSIONS } from '@rero/shared';
@@ -30,67 +29,76 @@ import { PendingComponent } from './patron/pending/pending.component';
 import { PickupComponent } from './patron/pickup/pickup.component';
 import { ProfileComponent } from './patron/profile/profile.component';
 import { keepHistoryGuard } from './guard/keep-history.guard';
+import { CirculationMainComponent } from './circulation-main.component';
 
 const routes: Routes = [
   {
     path: '',
-    redirectTo: 'checkout',
-    pathMatch: 'full'
-  },
-  {
-    path: 'patron/:barcode',
-    component: MainComponent,
+    component: CirculationMainComponent,
     children: [
       {
         path: '',
-        redirectTo: 'loan',
-        pathMatch: 'full'
-      },
-      {
-        path: 'loan',
-        component: LoanComponent,
-        canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+        redirectTo: 'checkout',
+        pathMatch: 'full',
       },
       {
-        path: 'pickup',
-        component: PickupComponent,
+        path: 'checkout',
+        component: CheckinComponent,
         canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
       },
       {
-        path: 'pending',
-        component: PendingComponent,
+        path: 'requests',
+        component: MainRequestComponent,
         canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
       },
       {
-        path: 'ill',
-        component: IllRequestComponent,
-        canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+        path: 'patron/:barcode',
+        component: MainComponent,
+        children: [
+          {
+            path: '',
+            redirectTo: 'loan',
+            pathMatch: 'full'
+          },
+          {
+            path: 'loan',
+            component: LoanComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'pickup',
+            component: PickupComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'pending',
+            component: PendingComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'ill',
+            component: IllRequestComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'profile',
+            component: ProfileComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'fees',
+            component: PatronTransactionsComponent,
+            canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          },
+          {
+            path: 'history',
+            component: HistoryComponent,
+            canActivate: [ keepHistoryGuard, PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
+          }
+        ]
       },
-      {
-        path: 'profile',
-        component: ProfileComponent,
-        canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
-      },
-      {
-        path: 'fees',
-        component: PatronTransactionsComponent,
-        canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
-      },
-      {
-        path: 'history',
-        component: HistoryComponent,
-        canActivate: [ keepHistoryGuard, PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
-      }
     ]
-  }, {
-      path: 'checkout',
-      component: CheckinComponent,
-      canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
-    }, {
-    path: 'requests',
-    component: MainRequestComponent,
-    canActivate: [ PermissionGuard ], data: { permissions: [ PERMISSIONS.CIRC_ADMIN ] }
-  }
+  },
 ];
 
 @NgModule({
diff --git a/projects/admin/src/app/circulation/circulation.module.ts b/projects/admin/src/app/circulation/circulation.module.ts
index 833bf3791..32ef718a9 100644
--- a/projects/admin/src/app/circulation/circulation.module.ts
+++ b/projects/admin/src/app/circulation/circulation.module.ts
@@ -20,6 +20,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FormlyModule } from '@ngx-formly/core';
 import { RecordModule } from '@rero/ng-core';
 import { SharedModule } from '@rero/shared';
+import { AccordionModule } from 'primeng/accordion';
 import { ButtonModule } from 'primeng/button';
 import { DynamicDialogModule } from 'primeng/dynamicdialog';
 import { InputSwitchModule } from 'primeng/inputswitch';
@@ -32,6 +33,7 @@ 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';
+import { CirculationMainComponent } from './circulation-main.component';
 import { CirculationRoutingModule } from './circulation-routing.module';
 import { ItemComponent } from './item/item.component';
 import { ItemsListComponent } from './items-list/items-list.component';
@@ -54,7 +56,7 @@ import { PatronFeeComponent } from './patron/patron-transactions/patron-fee/patr
 import {
   PatronTransactionEventFormComponent
 } from './patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component';
-import { PatronTransactionEventComponent } from './patron/patron-transactions/patron-transaction-event/patron-transaction-event.component';
+import { PatronTransactionHistoryComponent } from './patron/patron-transactions/patron-transaction/patron-transaction-history/patron-transaction-history.component';
 import {
   DefaultTransactionDetailComponent
 } from './patron/patron-transactions/patron-transaction/default-transaction-detail/default-transaction-detail.component';
@@ -69,6 +71,7 @@ import { PickupItemComponent } from './patron/pickup/pickup-item/pickup-item.com
 import { PickupComponent } from './patron/pickup/pickup.component';
 import { ProfileComponent } from './patron/profile/profile.component';
 import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
+import { ScrollPanelModule } from 'primeng/scrollpanel';
 
 @NgModule({
     declarations: [
@@ -87,7 +90,6 @@ import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
         PickupItemComponent,
         PatronTransactionsComponent,
         PatronTransactionComponent,
-        PatronTransactionEventComponent,
         PatronTransactionEventFormComponent,
         OverdueTransactionComponent,
         DefaultTransactionDetailComponent,
@@ -106,7 +108,9 @@ import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
         IllRequestComponent,
         IllRequestItemComponent,
         JournalVolumePipe,
-        CirculationSettingsComponent
+        CirculationSettingsComponent,
+        CirculationMainComponent,
+        PatronTransactionHistoryComponent
     ],
     imports: [
         CirculationRoutingModule,
@@ -124,8 +128,10 @@ import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
         RippleModule,
         MessagesModule,
         InputSwitchModule,
-        SplitButtonModule
-    ],
+        SplitButtonModule,
+        AccordionModule,
+        ScrollPanelModule
+      ],
     providers: [
       CurrencyPipe
     ]
diff --git a/projects/admin/src/app/circulation/circulation.scss b/projects/admin/src/app/circulation/circulation.scss
deleted file mode 100644
index 2e8057c8b..000000000
--- a/projects/admin/src/app/circulation/circulation.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2023-2024 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
- @import 'bootstrap/scss/functions';
- @import 'bootstrap/scss/variables';
-
- .item {
-   margin-bottom: map-get($spacers, 1) !important;
-   padding: map-get($spacers, 1) !important;
-   border: $border-width solid $border-color;
-   border-radius: $border-radius;
-   position: relative;
-
-   &:hover{
-     background-color: $light;
-   }
-
-   div.actions {
-     position: absolute;
-     top: map-get($spacers, 1);
-     right: 15px;
-   }
- }
diff --git a/projects/admin/src/app/circulation/items-list/items-list.component.scss b/projects/admin/src/app/circulation/circulationStatistics.ts
similarity index 70%
rename from projects/admin/src/app/circulation/items-list/items-list.component.scss
rename to projects/admin/src/app/circulation/circulationStatistics.ts
index 8fc910644..c48a4c7e8 100644
--- a/projects/admin/src/app/circulation/items-list/items-list.component.scss
+++ b/projects/admin/src/app/circulation/circulationStatistics.ts
@@ -1,7 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
- * Copyright (C) 2022 UCLouvain
+ * Copyright (C) 2019-2025 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,11 +14,12 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-
-.btn-show-more {
-  background-color: transparent !important;
-  color: $white;
+export class CirculationStatistics {
+  static FEES = 'fees';
+  static FEES_ENGAGED = 'fees_engaged';
+  static HISTORY = 'history';
+  static ILL = 'ill';
+  static LOAN = 'loan';
+  static PENDING = 'pending';
+  static PICKUP = 'pickup';
 }
diff --git a/projects/admin/src/app/circulation/item/item.component.html b/projects/admin/src/app/circulation/item/item.component.html
index 3f520a4a4..a676fd7a0 100644
--- a/projects/admin/src/app/circulation/item/item.component.html
+++ b/projects/admin/src/app/circulation/item/item.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2024 RERO
+  Copyright (C) 2019-2025 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -16,50 +16,35 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (item && !(item.loading || false)) {
-  <div [ngClass]="{
-         'callout callout-warning': needCallout(item, 'warning') || (item.actionDone === itemAction.checkin && totalAmountOfFee > 0) || !item.loan,
-         'text-secondary': item.status !== ItemStatus.ON_LOAN
-       }"
-       class="row d-flex align-items-start item">
-
-    <!-- ACTION BUTTONS -->
-    <div class="actions">
-      @if (patron) {
-        <p-button
-          icon="fa fa-refresh pr-1"
-          [label]="'Renew'|translate"
-          severity="secondary"
-          outlined
-          [disabled]="!item.actions.includes(itemAction.extend_loan)"
-          [id]="item.barcode | idAttribute:{prefix: 'item', suffix: 'renew-button'}"
-          (onClick)="extendLoanClick($event)"
-        />
-      }
-    </div>
+  <div class="grid grid-nogutter align-items-start p-2" [ngClass]="{
+      'callout callout-warning': needCallout(item, 'warning') || (item.actionDone === itemAction.checkin && totalAmountOfFee > 0) || !item.loan,
+      'text-color-secondary': item.status !== ItemStatus.ON_LOAN
+    }"
+  >
     <!-- BARCODE -->
-    <div name="barcode" class="col-2 d-flex">
+    <div name="barcode" class="col-3 flex gap-2">
       @if (!item.actions || item.loan || totalAmountOfFee || item.pending_loans || notifications$) {
         <shared-open-close-button [collapsed]="isCollapsed" (status)="isCollapsed = $event" />
       }
-      <div>
+      <div class="flex flex-column gap-2">
         <a [routerLink]="['/records','items','detail', item.pid]">{{ item.barcode }}</a>
         @if (isCollapsed) {
-          <shared-inherited-call-number class="d-block small" [item]="item"></shared-inherited-call-number>
+          <shared-inherited-call-number class="d-block small" [item]="item" />
         }
       </div>
       @if (item.actionDone) {
         @if ((item.actionDone === itemAction.checkin && item.getNote('checkin_note')) ||
         (item.actionDone === itemAction.checkout && item.getNote('checkout_note'))) {
-          <i class="fa fa-exclamation-triangle text-warning mt-1 ml-auto"></i>
+          <i class="fa fa-exclamation-triangle text-warning mt-1 ml-auto mr-2"></i>
         }
       } @else {
         @if (!item.actions) {
-          <i class="fa fa-exclamation-triangle text-warning mt-1 ml-auto"></i>
+          <i class="fa fa-exclamation-triangle text-warning mt-1 ml-auto mr-2"></i>
         }
       }
     </div>
     <!-- TITLE -->
-    <div name="title" class="col-lg-6">
+    <div name="title" class="col-5">
       <a [routerLink]="['/records','documents','detail', item.document.pid]">
         @if (item.document?.title) {
           {{ isCollapsed ? (item.document.title | mainTitle | truncateText: 12) : item.document.title | mainTitle }}
@@ -73,139 +58,45 @@
         <span class="badge badge-info">{{ item.enumerationAndChronology }}</span>
       }
       @if (document) {
-        <shared-contribution [contributions]="document?.contribution"></shared-contribution>
+        <shared-contribution [contributions]="document?.contribution" />
       }
-    </div>
-    <!-- CIRCULATION INFO -->
-    <div name="circ-info" class="col-2">
-      @if (item.loan) {
-        <ul class="list-unstyled mb-0">
-          @switch (item.status) {
-            @case ('on_loan') {
-              <li name="status">
-                {{ item.status | translate }}
-                <i class="fa fa-arrow-right" aria-hidden="true"></i>
-                <span [class.text-warning]="loan && loan.expired">
-                  {{ item.loan.dueDate | dateTranslate :'shortDate' }}
-                </span>
-              </li>
-            }
-            @case ('in_transit') {
-              <li name="status">
-                {{ item.status | translate }}
-                @if (getTransitLocationPid() | getRecord: 'locations' | async; as location) {
-                    ({{ 'to' | translate }}
-                    @if (item.loan && item.loan.state === 'ITEM_IN_TRANSIT_FOR_PICKUP') {
-                      {{ $any(location).metadata.pickup_name }}
-                    } @else {
-                      {{ $any(location).metadata.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
-                    })
-                }
-              </li>
-            }
-            @case ('on_shelf') {
-              <li name="status">{{ item.status | translate }}</li>
-            }
-            @case ('at_desk') {
-              <li>
-                {{ item.status | translate }}
-                @if (item.loan && item.loan.pickup_location) {
-                  ({{ item.loan.pickup_location.pickup_name }})
-                }
-                @if (!item.loan && item.pending_loans && item.pending_loans.length > 0 && item.pending_loans[0].pickup_location) {
-                  ({{ item.pending_loans[0].pickup_location.pickup_name }})
 
-                }
-              </li>
-            }
-            @default {
-              <li name="status">{{ item.status | translate }}</li>
-            }
-          }
-          <!-- RENEWALS, FEES, REQUESTS -->
-          <li>
-            @if (isCollapsed && item.loan && item.loan.extension_count && (!item.actionDone || item.actionDone !== itemAction.checkin)) {
-              <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) {
-              <p-tag [title]="'Fees'|translate" severity="warning" styleClass="mr-1">
-                {{ totalAmountOfFee | currency: organisation.default_currency }}
-              </p-tag>
-            }
-            @if (isCollapsed && item.pending_loans && item.pending_loans.length) {
-              <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>
-              </p-tag>
-            }
-          </li>
-        </ul>
-      } @else {
-        {{ item.status | translate }}
-      }
-    </div>
-    <!-- ACTION DONE -->
-    <div name="action-done" class="col-2">
-      @if (item.actionDone) {
-        @switch (item.actionDone) {
-          @case (itemAction.checkin) {
-            <i class="fa fa-arrow-circle-o-down text-success align-baseline" aria-hidden="true"></i>
-            <span class="align-baseline ml-1" translate>checked in</span>
-          }
-          @case (itemAction.checkout) {
-            <i class="fa fa-arrow-circle-o-right text-success align-baseline" aria-hidden="true"></i>
-            <span class="align-baseline ml-1" translate>checked out</span>
-          }
-          @case (itemAction.extend_loan) {
-            <i class="fa fa-refresh text-success align-baseline" aria-hidden="true"></i>
-            <span class="align-baseline ml-1" translate>renewed</span>
-          }
-          @default {
-            <span class="align-baseline">{{ item.actionDone | translate }}</span>
-          }
-        }
-      }
-    </div>
-    <!-- COLLAPSED DETAILS -->
+      <!-- COLLAPSED DETAILS -->
     @if (!isCollapsed) {
-      <div name="collapsed-details" class="col-12 mt-2">
-        <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>
+      <div class="mt-2">
+        <dl class="metadata">
+          <dt translate>Call number</dt>
+          <dd>
+            <shared-inherited-call-number [item]="item" />
           </dd>
           @if (item.enumerationAndChronology) {
-            <dt class="offset-1 col-sm-3 col-md-2 col-lg-1 label-title" translate>Unit</dt>
-            <dd class="col-sm-8 col-md-9 col-lg-10">
+            <dt translate>Unit</dt>
+            <dd>
               {{ item.enumerationAndChronology }}
             </dd>
           }
           @if (item.location.pid | getRecord: 'locations' | async; as location) {
-            <dt class="offset-1 col-sm-3 col-md-2 col-lg-1 label-title" translate>Location</dt>
-            <dd class="col-sm-8 col-md-9 col-lg-10">
+            <dt translate>Location</dt>
+            <dd>
               {{ $any(location).metadata.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}:
               {{ $any(location).metadata.name }}
             </dd>
           }
           @if (item.temporary_location) {
-            <dt class="offset-1 col-sm-3 col-md-2 col-lg-1 label-title" translate>Temporary location</dt>
-            <dd class="col-sm-8 col-md-9 col-lg-10">
+            <dt translate>Temporary location</dt>
+            <dd>
               {{ item.temporary_location.name }}
             </dd>
           }
           @if (item.collections && item.collections.length > 0) {
-            <dt class="offset-1 col-sm-3 col-md-2 col-lg-1 label-title" translate>Exhibition/course</dt>
-            <dd class="col-sm-8 col-md-9 col-lg-10">
+            <dt translate>Exhibition/course</dt>
+            <dd>
               {{ item.collections.join(', ') }}
             </dd>
           }
           @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">
+            <dt translate>Renewals</dt>
+            <dd>
               <p-tag severity="secondary" styleClass="mr-1">
                 {{ item.loan.extension_count }}
                 <i class="fa fa-refresh ml-1"></i>
@@ -213,14 +104,14 @@
             </dd>
           }
           @if (item.loan && item.actionDone === 'checkin' && item?.loan?.last_end_date) {
-            <dt class="offset-1 col-sm-3 col-md-2 col-lg-1 label-title" translate>Due date</dt>
-            <dd name="due_date" class="col-sm-8 col-md-9 col-lg-10">
+            <dt translate>Due date</dt>
+            <dd>
               {{ item.loan.last_end_date | dateTranslate :'shortDate' }}
             </dd>
           }
           @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">
+            <dt translate>Fees</dt>
+            <dd>
               <p-tag severity="warning" styleClass="mr-1">
                 {{ totalAmountOfFee | currency: organisation.default_currency }}
               </p-tag>
@@ -228,12 +119,12 @@
           }
           @if (item.loan && notifications$ | async; as notifications) {
             @if (notifications.length > 0) {
-              <dt class="offset-1 col-sm-3 col-md-2 col-lg-1 label-title" translate>Notifications</dt>
-              <dd name="notifications" class="col-sm-8 col-md-9 col-lg-10">
-                <ul class="list-unstyled mb-0">
+              <dt translate>Notifications</dt>
+              <dd>
+                <ul class="list-none m-0 p-0">
                   @for (notification of notifications; track notification) {
                     <li>
-                      <span class="text-secondary small">
+                      <span class="text-color-secondary small">
                         {{ notification.metadata.process_date
                             ? (notification.metadata.process_date | dateTranslate :'short')
                             : (notification.metadata.creation_date | dateTranslate : 'shortDate')
@@ -249,8 +140,8 @@
             }
           }
           @if (item.pending_loans) {
-            <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">
+            <dt translate>Requests</dt>
+            <dd>
               @if (item.pending_loans.length > 1) {
                 <p-tag severity="info" styleClass="mr-1">
                   {{ item.pending_loans.length }}
@@ -259,7 +150,7 @@
               }
               @for (request of item.pending_loans; track request) {
                 <p-tag severity="secondary" styleClass="mr-1">
-                  <i class="fa fa-shopping-basket pr-1"></i>
+                  <i class="fa fa-shopping-basket"></i>&nbsp;
                   <a class="text-white" [routerLink]="['/circulation', 'patron', request.patron.barcode, 'loan']">{{ request.patron.name }}</a>
                 </p-tag>
               }
@@ -267,47 +158,174 @@
           }
 
           @for (note of getCirculationNoteForAction(); track note) {
-            <dd class="col-1 text-right pr-1"><i class="fa fa-sticky-note-o text-warning"></i></dd>
-            <dt class="col-sm-3 col-md-2 col-lg-1 label-title">
-            @if (note.type !== NOTEAPI) {
-              {{ note.type | translate }}
-            } @else {
-              {{ 'Note' | translate }}
-            }
+            <dt>
+              @if (note.type !== NOTEAPI) {
+                {{ note.type | translate }}
+              } @else {
+                {{ 'Note' | translate }}
+              }
             </dt>
-            <dd name="checkin-note" class="col-sm-8 col-md-9 col-lg-10 text-justify">{{ note.content }}</dd>
+            <dd>{{ note.content }}</dd>
           }
-          @if (debugMode) {
-            <dd class="col-1 text-right pr-1"><i class="fa fa-bug text-danger"></i></dd>
-            <dt class="col-1 label-title text-danger" translate>Debug</dt>
-            @if (loan) {
-              <dd class="col-5">
-                <pre class="border p-3">{{ loan | json }}<legend>loan</legend></pre>
-              </dd>
-              @if (loan | getLoanCipo | async; as cipo) {
-                <dd class="col-5">
-                  <pre class="border p-3">{{ cipo | json }}<legend>
-                      <a [routerLink]="['/records', 'circ_policies', 'detail', cipo.pid]" target="_circulation">
-                        <i class="fa fa-external-link pr-2"></i>cipo
-                      </a>
-                    </legend></pre>
-                </dd>
-              }
-            } @else {
-              <dd class="col-5">
-                <pre class="border p-3">{{ item | json }}<legend>item</legend></pre>
-              </dd>
+        </dl>
+      </div>
+    }
+    </div>
+    <!-- CIRCULATION INFO -->
+    <div name="circ-info" class="col-2">
+      @if (item.loan) {
+        <ul class="list-none m-0 p-0">
+          @switch (item.status) {
+            @case ('on_loan') {
+              <li>
+                {{ item.status | translate }}
+                <i class="fa fa-arrow-right" aria-hidden="true"></i>
+                <span [class.text-warning]="loan && loan.expired">
+                  {{ item.loan.dueDate | dateTranslate :'shortDate' }}
+                </span>
+              </li>
+            }
+            @case ('in_transit') {
+              <li>
+                {{ item.status | translate }}
+                @if (getTransitLocationPid() | getRecord: 'locations' | async; as location) {
+                    ({{ 'to' | translate }}
+                    @if (item.loan && item.loan.state === 'ITEM_IN_TRANSIT_FOR_PICKUP') {
+                      {{ $any(location).metadata.pickup_name }}
+                    } @else {
+                      {{ $any(location).metadata.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
+                    })
+                }
+              </li>
+            }
+            @case ('on_shelf') {
+              <li>{{ item.status | translate }}</li>
+            }
+            @case ('at_desk') {
+              <li>
+                {{ item.status | translate }}
+                @if (item.loan && item.loan.pickup_location) {
+                  ({{ item.loan.pickup_location.pickup_name }})
+                }
+                @if (!item.loan && item.pending_loans && item.pending_loans.length > 0 && item.pending_loans[0].pickup_location) {
+                  ({{ item.pending_loans[0].pickup_location.pickup_name }})
+
+                }
+              </li>
+            }
+            @default {
+              <li>{{ item.status | translate }}</li>
             }
           }
-        </dl>
-        @if (canUseDebugMode) {
-          <button class="float-right btn btn-sm btn-outline-warning mr-2"
-                  [class.btn-hover]="debugMode"
-                  (click)="debugMode=!debugMode">
-            <i class="fa fa-bug pr-1"></i>
-            <i class="fa" [ngClass]="debugMode ? 'fa-toggle-on' : 'fa-toggle-off'"></i>
-          </button>
+          <!-- RENEWALS, FEES, REQUESTS -->
+          <li class="mt-1">
+            @if (isCollapsed && item.loan && item.loan.extension_count && (!item.actionDone || item.actionDone !== itemAction.checkin)) {
+              <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) {
+              <p-tag [title]="'Fees'|translate" severity="warning" styleClass="mr-1">
+                {{ totalAmountOfFee | currency: organisation.default_currency }}
+              </p-tag>
+            }
+            @if (isCollapsed && item.pending_loans && item.pending_loans.length) {
+              <p-tag [title]="'Requests'|translate" severity="secondary" styleClass="mr-1">
+                <i class="fa fa-shopping-basket"></i>&nbsp;
+                <a class="text-white" [routerLink]="['/circulation', 'patron', item.pending_loans[0].patron.barcode, 'loan']">
+                  {{ item.pending_loans[0].patron.name }}
+                </a>
+              </p-tag>
+            }
+          </li>
+        </ul>
+      } @else {
+        {{ item.status | translate }}
+      }
+    </div>
+    <!-- ACTION DONE -->
+    <div name="action-done" class="col-2">
+      <div class="flex justify-content-end">
+        @if (item.actionDone) {
+          <div class="flex gap-2 p-disabled" pButton severity="secondary" outlined>
+            @switch (item.actionDone) {
+              @case (itemAction.checkin) {
+                <i class="fa fa-arrow-circle-o-down text-success" aria-hidden="true"></i>
+                <span translate>checked in</span>
+              }
+              @case (itemAction.checkout) {
+                <i class="fa fa-arrow-circle-o-right text-success" aria-hidden="true"></i>
+                <span translate>checked out</span>
+              }
+              @case (itemAction.extend_loan) {
+                <i class="fa fa-refresh text-success" aria-hidden="true"></i>
+                <span translate>renewed</span>
+              }
+              @default {
+                <span>{{ item.actionDone | translate }}</span>
+              }
+            }
+          </div>
         }
+        @if (patron && !item.actionDone) {
+            <p-button
+              icon="fa fa-refresh"
+              [label]="'Renew'|translate"
+              severity="secondary"
+              outlined
+              [disabled]="!item.actions.includes(itemAction.extend_loan)"
+              [id]="item.barcode | idAttribute:{prefix: 'item', suffix: 'renew-button'}"
+              (onClick)="extendLoanClick($event)"
+            />
+        }
+      </div>
+      @if (canUseDebugMode && !isCollapsed) {
+        <div class="flex justify-content-end mt-2">
+          <p-button [icon]="debugMode ? 'fa fa-toggle-on' : 'fa fa-toggle-off'" [outlined]="true" severity="warning" (onClick)="debugMode=!debugMode">
+            <i class="fa fa-bug"></i>
+          </p-button>
+        </div>
+      }
+    </div>
+    @if (debugMode && !isCollapsed) {
+      <div class="col">
+        <h5 class="text-error"><i class="fa fa-bug"></i>&nbsp;{{ 'Debug' | translate }}</h5>
+        <div class="grid">
+          @if (loan) {
+            <div class="lg:col-6 col-12">
+              <div class="flex flex-column border-1 surface-border border-round p-2 bg-white">
+                <h5 translate>Loan</h5>
+                <p-scrollPanel styleClass="w-full" [style]="{ height: '500px' }">
+                  <pre class="text-sm">{{ loan | json }}</pre>
+                </p-scrollPanel>
+              </div>
+            </div>
+            <div class="lg:col-6 col-12">
+              @if (loan | getLoanCipo | async; as cipo) {
+                <div class="flex flex-column border-1 surface-border border-round p-2 bg-white">
+                  <h5>
+                    {{ 'Circulation policy' | translate }}&nbsp;
+                    <a [routerLink]="['/records', 'circ_policies', 'detail', cipo.pid]" target="_circulation">
+                      <i class="fa fa-external-link"></i>
+                    </a>
+                  </h5>
+                  <p-scrollPanel styleClass="w-full" [style]="{ height: '500px' }">
+                    <pre class="text-sm">{{ cipo | json }}</pre>
+                  </p-scrollPanel>
+                </div>
+              }
+            </div>
+          } @else {
+            <div class="col">
+              <div class="flex flex-column border-1 surface-border border-round p-2 bg-white">
+                <h5 translate>Item</h5>
+                <p-scrollPanel styleClass="w-full" [style]="{ height: '500px' }">
+                  <pre class="text-sm">{{ item | json }}</pre>
+                </p-scrollPanel>
+              </div>
+            </div>
+          }
+        </div>
       </div>
     }
   </div>
diff --git a/projects/admin/src/app/circulation/item/item.component.ts b/projects/admin/src/app/circulation/item/item.component.ts
index f2bc990cb..1998972ba 100644
--- a/projects/admin/src/app/circulation/item/item.component.ts
+++ b/projects/admin/src/app/circulation/item/item.component.ts
@@ -30,8 +30,7 @@ import { map } from 'rxjs/operators';
 
 @Component({
   selector: 'admin-item',
-  templateUrl: './item.component.html',
-  styleUrls: ['../circulation.scss']
+  templateUrl: './item.component.html'
 })
 export class ItemComponent implements OnInit {
 
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 6e58e63a3..8164e4fd7 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,44 +21,53 @@
 }
 @if ((checkedOutItems && checkedOutItems.length > 0) || (checkedInItems && checkedInItems.length > 0)) {
   <!-- HEADER -->
-  <div class="grid mb-1 d-flex align-items-center bg-dark text-white rounded p-1">
-    <div class="col-2" >
-      <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) {
-        <p-button
-          id="renew-all-button"
-          [label]="'Renew all'|translate"
-          [disabled]="loansToExtend.length < 1"
-          styleClass="float-right my-1"
-          (onClick)="extendAllLoansClick()"
+   <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+        <div class="grid grid-nogutter py-3 px-2 m-1 text-lg font-bold align-items-center border-bottom-1 surface-border">
+          <div class="col-3 flex gap-2 align-items-center">
+            <div>
+              <shared-open-close-button (status)="allCollapsed = $event" />
+            </div>
+            <div translate>Item</div>
+          </div>
+          <div class="col-5" translate>Document</div>
+          <div class="col-2" translate>Circulation info</div>
+          <div class="col-2 flex justify-content-end">
+            @if (patron) {
+              <p-button
+                id="renew-all-button"
+                [label]="'Renew all'|translate"
+                [disabled]="loansToExtend.length < 1"
+                (onClick)="extendAllLoansClick()"
+              />
+            }
+          </div>
+        </div>
+    </ng-template>
+
+    <div class="alternate-color">
+      <!-- CHECKED OUT ITEMS -->
+      @for (item of checkedOutItems; track item) {
+        <admin-item
+          [patron]="patron"
+          [item]="item"
+          [attr.id]="item.barcode | idAttribute:{prefix: 'item'}"
+          [isCollapsed]="allCollapsed"
+          (extendLoanClicked)="extendLoanClick($event, item)"
         />
       }
-    </div>
-  </div>
 
-  <!-- CHECKED OUT ITEMS -->
-  @for (item of checkedOutItems; track item) {
-    <admin-item [patron]="patron"
-                [item]="item"
-                [attr.id]="item.barcode | idAttribute:{prefix: 'item'}"
-                [isCollapsed]="allCollapsed"
-                (extendLoanClicked)="extendLoanClick($event, item)">
-    </admin-item>
-  }
-
-  <!-- CHECKED IN ITEMS -->
-  <!--   Callout border for [TRANSIT|REQUEST|FEE] -->
-  @for (item of checkedInItems; track item) {
-    <admin-item [patron]="patron"
-                [item]="item"
-                [attr.id]="item.barcode | idAttribute:{prefix: 'item'}"
-                [isCollapsed]="allCollapsed"
-                (hasFeesEmitter)="hasFees($event)">
-    </admin-item>
-  }
+      <!-- CHECKED IN ITEMS -->
+      <!-- Callout border for [TRANSIT|REQUEST|FEE] -->
+      @for (item of checkedInItems; track item) {
+        <admin-item
+          [patron]="patron"
+          [item]="item"
+          [attr.id]="item.barcode | idAttribute:{prefix: 'item'}"
+          [isCollapsed]="allCollapsed"
+          (hasFeesEmitter)="hasFees($event)"
+        />
+      }
+    </div>
+  </p-card>
 }
diff --git a/projects/admin/src/app/circulation/items-list/items-list.component.ts b/projects/admin/src/app/circulation/items-list/items-list.component.ts
index 6b90bcd1b..a755f7e98 100644
--- a/projects/admin/src/app/circulation/items-list/items-list.component.ts
+++ b/projects/admin/src/app/circulation/items-list/items-list.component.ts
@@ -21,7 +21,6 @@ import { ItemAction } from '../../classes/items';
 
 @Component({
   selector: 'admin-circulation-items-list',
-  styleUrls: ['./items-list.component.scss'],
   templateUrl: './items-list.component.html'
 })
 export class ItemsListComponent implements OnInit{
diff --git a/projects/admin/src/app/circulation/main-request/main-request.component.html b/projects/admin/src/app/circulation/main-request/main-request.component.html
index dd265ff9c..0c73d4620 100644
--- a/projects/admin/src/app/circulation/main-request/main-request.component.html
+++ b/projects/admin/src/app/circulation/main-request/main-request.component.html
@@ -25,30 +25,49 @@
     />
   </div>
   <!-- Sorting loans -->
-  <div class="col-6 flex align-items-end justify-content-end">
-    <!-- collapsed ? -->
-    <div>
-      <p-inputSwitch id="collapse-detail" [(ngModel)]="isDetailCollapsed" />
-      <label for="collapse-detail" translate>Collapse details</label>
-    </div>
+  <div class="col-6">
     <!-- auto refresh -->
-    <div class="ml-2">
-      <p-inputSwitch id="auto-refresh" [ngModel]="refreshInterval > 0" (onChange)="enableAutoRefresh($event.checked)" />
-      <label for="auto-refresh" translate>Auto refresh</label>
+    <div class="flex gap-2 w-full align-items-center">
+      <div class="flex flex-grow-1 gap-2 justify-content-start">
+        <p-inputSwitch id="auto-refresh" [ngModel]="refreshInterval > 0" (onChange)="enableAutoRefresh($event.checked)" />
+        <label for="auto-refresh" translate>Auto refresh</label>
+      </div>
+      <div class="flex gap-2 justify-content-end">
+        @if (refreshInterval > 0) {
+          <p-dropdown [options]="refreshOptions" (onChange)="selectingIntervalTimer($event.value)">
+            <ng-template let-item pTemplate="selectedItem">
+              <div class="flex align-items-center gap-2">
+                <i [class]="item.icon"></i>
+                <div>{{ item.label }}</div>
+              </div>
+            </ng-template>
+            <ng-template let-item pTemplate="item">
+              <div class="flex align-items-center gap-2">
+                <i [class]="item.icon"></i>
+                <div>{{ item.label }}</div>
+              </div>
+            </ng-template>
+          </p-dropdown>
+
+        }
+        <!-- Sorting loans -->
+        <p-dropdown [options]="sortingCriteria" (onChange)="selectingSortCriteria($event)">
+          <ng-template let-item pTemplate="selectedItem">
+            <div class="flex align-items-center gap-2">
+              <i [class]="item.icon"></i>
+              <div>{{ item.label }}</div>
+            </div>
+          </ng-template>
+          <ng-template let-item pTemplate="item">
+            <div class="flex align-items-center gap-2">
+              <i [class]="item.icon"></i>
+              <div>{{ item.label }}</div>
+            </div>
+          </ng-template>
+        </p-dropdown>
+      </div>
+
     </div>
-    @if (refreshInterval > 0) {
-      <ng-core-menu-sort
-        class="pl-3"
-        [config]="sortingCriteria"
-        (selectChange)="selectingIntervalTimer($event)"
-      />
-    }
-    <!-- Sorting loans -->
-    <ng-core-menu-sort
-      class="pl-3"
-      [config]="sortingCriteria"
-      (selectChange)="selectingSortCriteria($event)"
-    />
   </div>
 </div>
 
@@ -56,7 +75,6 @@
   <div class="col">
     <admin-circulation-requested-items-list
       [items]="items"
-      [isCollapsed]="isDetailCollapsed"
       (requestValidated)="searchValueUpdated($event)"
     />
   </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 433da8321..31d466297 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
@@ -38,24 +38,24 @@ export class MainRequestComponent implements OnInit, OnDestroy {
   // COMPONENT ATTRIBUTES ==================================================================
   /** options used for auto-refresh select box */
   public refreshOptions = [
-    {value: '15000', label: '15 s', icon: 'fa-clock-o'},
-    {value: '30000', label: '30 s', icon: 'fa-clock-o'},
-    {value: '60000', label: '1 m', icon: 'fa-clock-o'},
-    {value: '300000', label: '5 m', icon: 'fa-clock-o'},
-    {value: '600000', label: '10 m', icon: 'fa-clock-o'},
-    {value: '3000000', label: '30 m', icon: 'fa-clock-o'}
+    {value: '15000', label: '15 s', icon: 'fa fa-clock-o'},
+    {value: '30000', label: '30 s', icon: 'fa fa-clock-o'},
+    {value: '60000', label: '1 m', icon: 'fa fa-clock-o'},
+    {value: '300000', label: '5 m', icon: 'fa fa-clock-o'},
+    {value: '600000', label: '10 m', icon: 'fa fa-clock-o'},
+    {value: '3000000', label: '30 m', icon: 'fa fa-clock-o'}
   ];
 
   /** options used to sort requested items list */
   public sortingCriteria = [
-    {value: 'requestdate', label: this.translateService.instant('Request date'), icon: 'fa-sort-numeric-asc'},
-    {value: '-requestdate', label: this.translateService.instant('Request date (desc)'), icon: 'fa-sort-numeric-desc'},
-    {value: 'callnumber', label: this.translateService.instant('Call number'), icon: 'fa-sort-alpha-asc'},
-    {value: '-callnumber', label: this.translateService.instant('Call number (desc)'), icon: 'fa-sort-alpha-desc'},
-    {value: 'location', label: this.translateService.instant('Location'), icon: 'fa-sort-alpha-asc'},
-    {value: '-location', label: this.translateService.instant('Location (desc)'), icon: 'fa-sort-alpha-desc'},
-    {value: 'pickuplocation', label: this.translateService.instant('Pick-up location'), icon: 'fa-sort-alpha-asc'},
-    {value: '-pickuplocation', label: this.translateService.instant('Pick-up location (desc)'), icon: 'fa-sort-alpha-desc'},
+    {value: 'requestdate', label: this.translateService.instant('Request date'), icon: 'fa fa-sort-numeric-asc'},
+    {value: '-requestdate', label: this.translateService.instant('Request date (desc)'), icon: 'fa fa-sort-numeric-desc'},
+    {value: 'callnumber', label: this.translateService.instant('Call number'), icon: 'fa fa-sort-alpha-asc'},
+    {value: '-callnumber', label: this.translateService.instant('Call number (desc)'), icon: 'fa fa-sort-alpha-desc'},
+    {value: 'location', label: this.translateService.instant('Location'), icon: 'fa fa-sort-alpha-asc'},
+    {value: '-location', label: this.translateService.instant('Location (desc)'), icon: 'fa fa-sort-alpha-desc'},
+    {value: 'pickuplocation', label: this.translateService.instant('Pick-up location'), icon: 'fa fa-sort-alpha-asc'},
+    {value: '-pickuplocation', label: this.translateService.instant('Pick-up location (desc)'), icon: 'fa fa-sort-alpha-desc'},
   ];
 
   /** the placeholder string used on the */
@@ -66,8 +66,6 @@ export class MainRequestComponent implements OnInit, OnDestroy {
   public items = null;
   /** the interval (in millis) between 2 calls of requested items (0 = no refresh) */
   public refreshInterval = 0;
-  /** is the requested items detail should be collapsed or not */
-  public isDetailCollapsed = true;
   /** Focus attribute of the search input */
   public searchInputFocus = true;
   /** Disabled attribute of the search input */
diff --git a/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.html b/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.html
index 1ee714091..9a0912b43 100644
--- a/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.html
+++ b/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.html
@@ -1,6 +1,6 @@
 <!--
  RERO ILS UI
-  Copyright (C) 2019-2024 RERO
+  Copyright (C) 2019-2025 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -15,8 +15,26 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (document) {
-  <div class="grid p-2 mb-1 align-middle item" [ngClass]="getCallout()" id="request-{{item.barcode}}">
-    <div class="actions">
+  <div class="grid grid-nogutter p-2" [ngClass]="getCallout()" id="request-{{ item.barcode }}">
+    <div class="col-3">
+      <div class="flex align-items-start gap-2">
+        <shared-open-close-button [collapsed]="isCollapsed" (status)="isCollapsed = $event" />
+        <a [routerLink]="['/records','items','detail', item.pid]">{{ item.barcode }}</a>
+      </div>
+    </div>
+    <div name="title" class="col-4">
+      @if (document.title | mainTitle; as title) {
+        <a [routerLink]="['/records','documents','detail', document.pid]">
+          {{ title }}
+        </a><br/>
+      }
+      <shared-contribution [contributions]="document?.contribution" />
+    </div>
+    <div class="col-2">
+      <shared-inherited-call-number [item]="item" />
+    </div>
+    <div class="col-2">{{ item.loan.creation_date | dateTranslate :'medium' }}</div>
+    <div class="col-1 flex justify-content-end">
       @if (item.loan.state === LoanState.PENDING) {
         <p-button
           icon="fa fa-check"
@@ -27,62 +45,42 @@
         />
       }
     </div>
-    <!-- FIRST ROW :: item-barcode, document-title, requester-name, request-date -->
-    <div class="col-2">
-      <shared-open-close-button (status)="isCollapsed = $event" />
-      <a [routerLink]="['/records','items','detail', item.pid]">{{ item.barcode }}</a>
-    </div>
-    <div name="title" class="col-lg-5">
-      @if (document.title | mainTitle; as title) {
-        <a [routerLink]="['/records','documents','detail', document.pid]">
-          {{ title }}
-        </a><br/>
+  @if (!isCollapsed) {
+    <dl class="metadata ml-1">
+      <!-- Unit -->
+      @if (item.enumerationAndChronology) {
+        <dt translate>Unit</dt>
+        <dd>{{ item.enumerationAndChronology }}</dd>
       }
-      <shared-contribution [contributions]="document?.contribution"></shared-contribution>
-    </div>
-    <div name="call-number" class="col-2">
-      <shared-inherited-call-number [item]="item"></shared-inherited-call-number>
-    </div>
-    <div name="transaction-date" class="col-2">{{ item.loan.creation_date | dateTranslate :'medium' }}</div>
-    <!-- NEXT-ROWS :: request detail -->
-    @if (!isCollapsed) {
-      <div class="col-12 mt-2">
-        <dl class="row">
-          <!-- Unit -->
-          @if (item.enumerationAndChronology) {
-            <dt class="col-2 label-title text-right" translate>Unit</dt>
-            <dd class="col-10">{{ item.enumerationAndChronology }}</dd>
-          }
-          <!-- Patron information -->
-          <dt class="col-2 label-title text-right" translate>Requested by</dt>
-          <dd class="col-10">
-            <a name="patron-name" [routerLink]="['/circulation', 'patron', item.loan.patron.barcode]">
-              {{ item.loan.patron.name }}
-            </a>
-          </dd>
-          <!-- item shelf location + destination -->
-          <dt class="col-2 label-title text-right" translate>Location</dt>
-          <dd  name="location" class="col-10">
-            {{ item.library.name }} -
-            @if (item.temporary_location?.name) {
-              {{ item.temporary_location.name }}
-            } @else {
-              {{ item.location.name }}
-            }
+      <!-- Patron information -->
+      <dt translate>Requested by</dt>
+      <dd>
+        <a name="patron-name" [routerLink]="['/circulation', 'patron', item.loan.patron.barcode]">
+          {{ item.loan.patron.name }}
+        </a>
+      </dd>
+      <!-- item shelf location + destination -->
+      <dt translate>Location</dt>
+      <dd>
+        {{ item.library.name }} -
+        @if (item.temporary_location?.name) {
+          {{ item.temporary_location.name }}
+        } @else {
+          {{ item.location.name }}
+        }
 
-          </dd>
-          <dt class="col-2 label-title text-right" translate>Pick-up location</dt>
-          <dd name="pickup-location" class="col-10">
-            <i class="fa fa-truck fa-flip-horizontal"></i>
-            <i class="fa fa-long-arrow-right mx-1"></i>
-            @if (item.loan.pickup_location.pickup_name) {
-              {{ item.loan.pickup_location.pickup_name }}
-            } @else {
-              {{ item.loan.pickup_location.library_name }}: {{ item.loan.pickup_location.name }}
-            }
-          </dd>
-        </dl>
-      </div>
-    }
+      </dd>
+      <dt translate>Pick-up location</dt>
+      <dd class="flex gap-1">
+        <i class="fa fa-truck fa-flip-horizontal"></i>
+        <i class="fa fa-long-arrow-right"></i>
+        @if (item.loan.pickup_location.pickup_name) {
+          {{ item.loan.pickup_location.pickup_name }}
+        } @else {
+          {{ item.loan.pickup_location.library_name }}: {{ item.loan.pickup_location.name }}
+        }
+      </dd>
+    </dl>
+  }
   </div>
 }
diff --git a/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.ts b/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.ts
index 1cac3d87b..f71920aee 100644
--- a/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.ts
+++ b/projects/admin/src/app/circulation/main-request/requested-item/requested-item.component.ts
@@ -21,8 +21,7 @@ import { RecordService } from '@rero/ng-core';
 
 @Component({
   selector: 'admin-requested-item',
-  templateUrl: './requested-item.component.html',
-  styleUrls: ['./requested-item.component.scss']
+  templateUrl: './requested-item.component.html'
 })
 export class RequestedItemComponent implements OnInit {
 
@@ -67,7 +66,6 @@ export class RequestedItemComponent implements OnInit {
   getCallout() {
     return (this.callout !== null)
       ? `callout ${this.callout}`
-      : 'border rounded';
+      : null;
   }
-
 }
diff --git a/projects/admin/src/app/circulation/main-request/requested-items-list/requested-items-list.component.html b/projects/admin/src/app/circulation/main-request/requested-items-list/requested-items-list.component.html
index 5eaee360f..41b91b6e3 100644
--- a/projects/admin/src/app/circulation/main-request/requested-items-list/requested-items-list.component.html
+++ b/projects/admin/src/app/circulation/main-request/requested-items-list/requested-items-list.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2024 RERO
+  Copyright (C) 2019-2025 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,25 +14,40 @@
   You 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="grid mb-1 py-2 flex align-items-center bg-dark text-white rounded">
-  <div class="col-2" translate>Item</div>
-  <div class="col-5" translate>Document</div>
-  <div class="col-2" translate>Call number</div>
-  <div class="col-2" translate>Request date</div>
-</div>
-
-@if (items) {
-  @if (items.length > 0) {
-    @for (item of items; track item) {
-      <admin-requested-item
-        [item]="item"
-        [isCollapsed]="isCollapsed"
-        [callout]="getItemCallout(item)"
-        (requestValidated)="validateRequest($event)"
-      ></admin-requested-item>
+@defer (when items) {
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+      <div class="hidden md:flex bg-blue-900 text-white p-2 text-lg font-bold border-round-top">
+        <div class="grid grid-nogutter bg-dark rounded text-light w-full align-items-center">
+          <div class="col-3">
+            <div class="flex gap-2 align-items-center">
+              <shared-open-close-button (status)="isCollapsed = $event" />
+              <span translate>Item</span>
+            </div>
+          </div>
+          <div class="col-4" translate>Document</div>
+          <div class="col-2" translate>Call number</div>
+          <div class="col-2" translate>Request date</div>
+        </div>
+      </div>
+    </ng-template>
+    @if (items.length > 0) {
+      <div class="alternate-color">
+        @for (item of items; track item) {
+          <admin-requested-item
+            [item]="item"
+            [isCollapsed]="isCollapsed"
+            [callout]="getItemCallout(item)"
+            (requestValidated)="validateRequest($event)"
+          />
+        }
+      </div>
+    } @else {
+      <div class="mx-3 my-4 font-bold">
+        {{ 'no request to validate' | translate }}
+      </div>
     }
-  } @else {
-    {{ 'no request to validate' | translate }}
-  }
+  </p-card>
+} @placeholder {
+  <div class="font-bold mx-2 my-4" translate>Loading in progress</div>
 }
diff --git a/projects/admin/src/app/circulation/main-request/requested-items-list/requested-items-list.component.ts b/projects/admin/src/app/circulation/main-request/requested-items-list/requested-items-list.component.ts
index c0bc2cb0e..e31dd851c 100644
--- a/projects/admin/src/app/circulation/main-request/requested-items-list/requested-items-list.component.ts
+++ b/projects/admin/src/app/circulation/main-request/requested-items-list/requested-items-list.component.ts
@@ -28,11 +28,12 @@ export class RequestedItemsListComponent implements OnChanges {
   // COMPONENT ATTRIBUTES ====================================================
   /** Item list */
   @Input() items: any[];
-  /** Is the item detail should be collapsed */
-  @Input() isCollapsed: boolean;
+
   /** event emit when a request is validated */
   @Output() requestValidated = new EventEmitter();
 
+  /** Is the item detail should be collapsed */
+  isCollapsed: boolean = true;
 
   /** the know item barcode list */
   private knownItemBarcodes: Array<string> = null;
@@ -68,5 +69,4 @@ export class RequestedItemsListComponent implements OnChanges {
   validateRequest(itemBarcode: string) {
     this.requestValidated.emit(itemBarcode);
   }
-
 }
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 35061e00c..ada05bbd7 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
@@ -24,22 +24,17 @@ import { MessageService } from 'primeng/api';
 @Component({
   selector: 'admin-cancel-request-button',
   template: `
-  @if (canCancelRequest()) {
     <p-button
-      icon="fa fa-trash-o"
+      class="pointer-events-auto"
+      icon="fa fa-trash"
       severity="danger"
       outlined
+      [pTooltip]="'The request cannot be cancelled'|translate"
+      tooltipPosition="top"
+      [disabled]="!canCancelRequest()"
+      [tooltipDisabled]="canCancelRequest()"
       (onClick)="showCancelRequestDialog($event)"
     />
-  } @else {
-    <p-button
-      icon="fa fa-trash-o"
-      severity="danger"
-      [title]="'The request cannot be cancelled'|translate"
-      outlined
-      [disabled]="true"
-    />
-  }
   `
 })
 export class CancelRequestButtonComponent {
diff --git a/projects/admin/src/app/circulation/patron/card/card.component.html b/projects/admin/src/app/circulation/patron/card/card.component.html
index 5f66fdb1b..3a954e7e6 100644
--- a/projects/admin/src/app/circulation/patron/card/card.component.html
+++ b/projects/admin/src/app/circulation/patron/card/card.component.html
@@ -15,11 +15,11 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (patron?.patron) {
-  <div class="m-0" [ngClass]="{'text-muted': !clearPatronButton}">
+  <div [ngClass]="{'text-muted': !clearPatronButton}">
     <div class="grid">
-      <div class="col-6">
+      <div class="col-6 mt-0">
         <div class="flex w-full">
-          <div class="flex mr-3 align-items-center">
+          <div class="flex mr-4 align-items-center">
             <i class="fa fa-user fa-5x" aria-hidden="true"></i>
           </div>
           <div class="flex w-full">
@@ -55,18 +55,20 @@ <h3>
               </div>
             </div>
           </div>
-          <div class="flex">
-            <p-button icon="fa fa-close" severity="danger" outlined (onClick)="clear()"></p-button>
-          </div>
+          @if (clearPatronButton) {
+            <div class="flex">
+              <p-button icon="fa fa-close" severity="danger" outlined (onClick)="clear()"></p-button>
+            </div>
+          }
         </div>
         <!-- NOTES-->
         @if (patron.notes) {
           <p-messages class="w-full" severity="warn" [enableService]="false" [closable]="false" showTransitionOptions="0ms">
             <ng-template pTemplate>
-              <ul class="list-unstyled mb-0">
+              <ul class="list-none mb-0">
                 @for (note of patron.notes; track note) {
                   <li>
-                    <span class="font-bold">{{ note.type | translate | ucfirst }}</span>
+                    <span class="font-bold text-xl">{{ note.type | translate | ucfirst }}</span>
                     <p [innerHTML]="note.content | nl2br"></p>
                   </li>
                 }
@@ -75,7 +77,7 @@ <h3>
           </p-messages>
         }
       </div>
-      <div class="col-6">
+      <div class="col-6 mt-0">
         <!-- Circulation message -->
         @if (displayCirculationMessages) {
             @if (patron.circulation_information) {
@@ -88,14 +90,12 @@ <h3>
                 />
               }
             }
-            @for (message of circulationMessages; track message) {
-              <p-messages
-                [value]="[{ severity: getMessageSeverity(message.type), detail: message.content }]"
-                [closable]="false"
-                [enableService]="false"
-                showTransitionOptions="0ms"
-              />
-            }
+            <p-messages
+              [value]="circulationMessages"
+              [closable]="false"
+              [enableService]="false"
+              showTransitionOptions="0ms"
+            />
         }
       </div>
     </div>
diff --git a/projects/admin/src/app/circulation/patron/card/card.component.scss b/projects/admin/src/app/circulation/patron/card/card.component.scss
index a3ed182c0..220c186e6 100644
--- a/projects/admin/src/app/circulation/patron/card/card.component.scss
+++ b/projects/admin/src/app/circulation/patron/card/card.component.scss
@@ -29,3 +29,7 @@
     visibility: hidden;
   }
 }
+
+.p-message {
+  @extend .mt-0;
+}
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 a0ee6920d..d9de70be1 100644
--- a/projects/admin/src/app/circulation/patron/card/card.component.ts
+++ b/projects/admin/src/app/circulation/patron/card/card.component.ts
@@ -14,17 +14,16 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, inject, Input, Output } from '@angular/core';
+import { Component, EventEmitter, inject, Input, OnInit, Output } from '@angular/core';
 import { DateTime } from 'luxon';
 import { getSeverity } from '../../../utils/utils';
 import { CirculationService } from '../../services/circulation.service';
 
 @Component({
   selector: 'admin-circulation-patron-detailed',
-  templateUrl: './card.component.html',
-  styleUrls: ['./card.component.scss']
+  templateUrl: './card.component.html'
 })
-export class CardComponent {
+export class CardComponent implements OnInit {
 
   private circulationService: CirculationService = inject(CirculationService);
 
@@ -42,40 +41,38 @@ export class CardComponent {
   /** event emitter when the close button are fired */
   @Output() clearPatron = new EventEmitter<any>();
 
-  // GETTER & SETTER ==========================================================
-  /** Build the link used on the patron name */
-  get patronLink(): string {
+  /** Link used on the patron name */
+  patronLink: string;
+  /** it's the birthday of the patron */
+  isBirthday: boolean = false;
+  /** Patron age */
+  patronAge: number;
+  /** circulation messages about the loaded patron if exists */
+  circulationMessages: {severity: string, detail: string}[] = [];
+
+  ngOnInit(): void {
     if (this.patron) {
-      return (this.linkMode === 'detail')
+      this.patronLink = (this.linkMode === 'detail')
         ? '/records/patrons/detail/' + this.patron.pid
         : '/circulation/patron/' + this.barcode + '/loan';
     }
-  }
 
-  /** Get the patron age */
-  get patronAge(): number {
     if (this.patron && this.patron.birth_date) {
-      const birthDate = DateTime.fromISO(this.patron.birth_date);
-      return Math.floor(DateTime.now().diff(birthDate, 'years').years);
+      const today = DateTime.now().toFormat('M-dd');
+      const birthDate = DateTime.fromISO(this.patron.birth_date).toFormat('M-dd');
+      if (today === birthDate) {
+        this.isBirthday = true;
+      }
     }
-  }
 
-  /** Defined if it's the birthday of the patron */
-  get isBirthday(): boolean {
     if (this.patron && this.patron.birth_date) {
-      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;
+      this.patronAge = Math.floor(DateTime.now().diff(birthDate, 'years').years);
     }
-    return false;
-  }
 
-  /** Get the circulation messages about the loaded patron if exists */
-  get circulationMessages(): Array<{type: string, content: string}> {
-    return this.circulationService.messages();
+    this.circulationMessages = this.circulationService.messages();
   }
 
-  // COMPONENT FUNCTIONS ======================================================
   /** Clear current patron */
   clear(): void {
     if (this.patron) {
@@ -91,5 +88,4 @@ export class CardComponent {
   getMessageSeverity(level: string): string {
     return getSeverity(level);
   }
-
 }
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 335b2291f..5222a705e 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,15 +15,15 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (form) {
-<form [formGroup]="form" (ngSubmit)="submit(patron, model)">
-  <formly-form [form]="form" [fields]="formFields" [model]="model" />
-  <div class="text-right">
-    <p-button
-      type="submit"
-      id="change-password-submit-button"
-      [label]="'Submit'|translate"
-      [disabled]="!form.valid"
-    />
-  </div>
-</form>
+  <form [formGroup]="form" (ngSubmit)="submit(patron, model)">
+    <formly-form [form]="form" [fields]="formFields" [model]="model" />
+    <div class="flex justify-content-end mt-2">
+      <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 26fcabf94..15083811a 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
@@ -95,12 +95,12 @@ export class ChangePasswordFormComponent implements OnInit {
         {
           key: 'password',
           type: 'passwordGenerator',
-          focus: true,
           props: {
+            class: 'surface-100',
             api: "/api/user/password/generate",
-            label: this.translateService.instant('New password'),
+            label: 'New password',
             required: true,
-            keydown: (field, event) => {
+            keydown: (_, event) => {
               if (event.key === 'Enter') {
                 event.preventDefault();
               }
diff --git a/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.html b/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.html
index f2851b3f0..8bd20e7a3 100644
--- a/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.html
+++ b/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.html
@@ -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/>.
 -->
-<div class="col" *ngVar="log.metadata.loan.item.document.pid | getRecord:'documents':'object':'':{ Accept:'application/rero+json' } | async as document">
+<div *ngVar="log.metadata.loan.item.document.pid | getRecord:'documents':'object':'':{ Accept:'application/rero+json' } | async as document">
   <!-- Basic loan information's -->
-  <div class="row">
-    <div class="col-sm-6 position-relative">
+  <div class="grid grid-nogutter p-2">
+    <div class="col-6 flex gap-2">
       <shared-open-close-button (status)="isCollapsed = $event; loadCheckout()" />
       @if (document) {
         <a [routerLink]="['/records','documents','detail', log.metadata.loan.item.document.pid]">
@@ -27,25 +27,23 @@
         {{ log.metadata.loan.item.document.title }}
       }
       @if (log.metadata.loan.item.enumerationAndChronology) {
-        <span class="badge badge-info">{{ log.metadata.loan.item.enumerationAndChronology }}</span>
+        <p-tag severity="info" [value]="log.metadata.loan.item.enumerationAndChronology" />
       }
     </div>
-    <div class="col-sm-4">
+    <div class="col-4">
       @if (document?.metadata?.contribution && document.metadata.contribution.length > 0) {
         <shared-contribution [contributions]="document.metadata.contribution" [limitRecord]="3" />
-      } @else {
-        &nbsp;
       }
     </div>
-    <div class="col-sm-2">
+    <div class="col-2">
       {{ log.metadata.date | dateTranslate: 'short' }}
     </div>
   </div>
   <!-- Transaction history check-in / checkout -->
   @if (!isCollapsed) {
-    <div class="mt-1">
+    <div class="m-2">
       @if (log.metadata.loan.item.pid | getRecord:'items' | async; as item) {
-        <div class="row">
+        <div class="grid">
           <div class="col-2 font-weight-bold" translate>Item</div>
           <div class="col-10">
             <a [routerLink]="['/records', 'items', 'detail', $any(item).metadata.pid]">
@@ -63,50 +61,44 @@
         </div>
       }
       <h6 class="mt-2" translate>Transaction history</h6>
-      <section class="col events-timeline">
-        <!-- check-in event -->
-        <div class="row pl-2 pr-2 align-items-start timeline-event">
-          <div class="col-lg-2 pr-4 text-right event-timestamp">
-            <i class="fa fa-calendar-o"></i> {{ log.metadata.date | dateTranslate: 'short' }}
-          </div>
-          <div class="col-lg-10 event-content">
-            <div class="row">
-              <div class="col-3 pl-3">
-                <i class="fa fa-angle-double-left text-success pr-2"></i>
-                {{ 'Checkin' | translate }}
-              </div>
-              <div class="col-9">
-                <ng-container
-                  [ngTemplateOutlet]="logLibrary"
-                  [ngTemplateOutletContext]="{ $implicit: log.metadata.loan.transaction_location }"
-                />
+      <p-timeline [value]="events">
+        <ng-template pTemplate="marker" let-event>
+          <span
+            class="flex w-1rem h-1rem align-items-center justify-content-center text-white border-circle z-1 shadow-1"
+            [ngClass]="{
+              'bg-green-200': event.type === 'Checkin',
+              'bg-red-200': event.type === 'Checkout'
+            }"
+          ></span>
+        </ng-template>
+        <ng-template pTemplate="content" let-event>
+          <div class="grid">
+            <div class="col-3">
+              <div class="flex gap-2">
+                <i class="fa" [ngClass]="{
+                  'fa-angle-double-left': event.type === 'Checkin',
+                  'fa-angle-double-right': event.type === 'Checkout',
+                }"></i>
+                <span>
+                  {{ event.type | translate }}
+                </span>
               </div>
             </div>
-          </div>
-        </div>
-        <!-- checkout event -->
-        @if (checkout) {
-          <div class="row pl-2 pr-2 align-items-start timeline-event">
-            <div class="col-lg-2 pr-4 text-right event-timestamp">
-              <i class="fa fa-calendar-o"></i> {{ checkout.metadata.date | dateTranslate: 'short' }}
-            </div>
-            <div class="col-lg-10 event-content">
-              <div class="row">
-                <div class="col-3 pl-3">
-                  <i class="fa fa-angle-double-right text-danger pr-2"></i>
-                  {{ 'Checkout' | translate }}
-                </div>
-                <div class="col-9">
-                  <ng-container
-                    [ngTemplateOutlet]="logLibrary"
-                    [ngTemplateOutletContext]="{ $implicit: checkout.metadata.loan.transaction_location }"
-                  />
-                </div>
-              </div>
+            <div class="col-9">
+              <ng-container
+              [ngTemplateOutlet]="logLibrary"
+              [ngTemplateOutletContext]="{ $implicit: event.loan.transaction_location }"
+            />
             </div>
           </div>
-        }
-      </section>
+        </ng-template>
+        <ng-template pTemplate="opposite" let-event>
+          <small class="p-text-secondary">
+            <i class="fa fa-calendar-o"></i> {{ event.date | dateTranslate: 'shortDate' }}
+            <i class="fa fa-clock-o pl-1"></i> {{ event.date | dateTranslate: 'HH:mm:ss' }}
+          </small>
+        </ng-template>
+      </p-timeline>
     </div>
   }
 </div>
diff --git a/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.ts b/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.ts
index 9987dcc62..16685b006 100644
--- a/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.ts
+++ b/projects/admin/src/app/circulation/patron/history/history-log/history-log.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2024 RERO
+ * Copyright (C) 2021-2025 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
@@ -37,15 +37,23 @@ export class HistoryLogComponent {
   provisionActivityType = ProvisionActivityType;
 
   /** Checkout record operation logs */
-  checkout: any = null;
+  checkoutLoaded: boolean = false;
+
+  events: any[] = [];
 
   /** Load checkout */
   loadCheckout() {
-    if (this.checkout === null) {
+    if (!this.checkoutLoaded) {
       this.operationLogsApiService
         .getHistoryByLoanPid(this.log.metadata.loan.pid, 'checkout')
         .subscribe((log: any) => {
-          this.checkout = log;
+          this.checkoutLoaded = true;
+          this.log.metadata['type'] = 'Checkin';
+          this.events = [this.log.metadata];
+          if (log) {
+            log.metadata['type'] = 'Checkout';
+            this.events.push(log.metadata);
+          }
         });
     }
   }
diff --git a/projects/admin/src/app/circulation/patron/history/history.component.html b/projects/admin/src/app/circulation/patron/history/history.component.html
index 5b3188c9c..24d79ff07 100644
--- a/projects/admin/src/app/circulation/patron/history/history.component.html
+++ b/projects/admin/src/app/circulation/patron/history/history.component.html
@@ -1,6 +1,6 @@
 <!--
  RERO ILS UI
- Copyright (C) 2020-2024 RERO
+ Copyright (C) 2020-2025 RERO
 
  This program is free software: you can redistribute it and/or modify
  it under the terms of the GNU Affero General Public License as published by
@@ -17,20 +17,18 @@
 @if (historyLogs$ | async; as logs) {
   <section class="content">
     @if (logs.length > 0) {
-      <!-- HEADER -->
-      <div class="row p-2 mb-1 bg-dark rounded text-light">
-        <div class="col-sm-6" translate>Title</div>
-        <div class="col-sm-4" translate>Authors</div>
-        <div class="col-sm-2" translate>Return date</div>
+      <div class="grid grid-nogutter p-3 m-1 text-lg font-bold align-items-center border-top-1 border-bottom-1 surface-border">
+        <div class="col-6" translate>Title</div>
+        <div class="col-4" translate>Authors</div>
+        <div class="col-2" translate>Return date</div>
+      </div>
+      <div class="alternate-color">
+        @for (log of logs; track log) {
+          <admin-history-log [log]="log" />
+        }
       </div>
-      <!-- LINES -->
-      @for (log of logs; track log) {
-        <admin-history-log [log]="log" class="row mb-1 p-1 border rounded"></admin-history-log>
-      }
     } @else {
-      {{ 'No history.' | translate }}
+      <div class="mt-3 font-bold" translate>No history.</div>
     }
   </section>
 }
-
-
diff --git a/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.html b/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.html
index 128f8a1aa..a100d8cbf 100644
--- a/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.html
+++ b/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.html
@@ -15,9 +15,9 @@
  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="row item">
+<div class="grid grid-nogutter p-2">
   <!-- MAIN ROW :: title, authors, status and action buttons ============== -->
-  <div class="col-4 d-flex">
+  <div class="col-4 flex gap-1">
     <shared-open-close-button (status)="isCollapsed = $event" />
     <div>
       {{ record.metadata.document.title }}
@@ -39,35 +39,35 @@
   </div>
   <!-- DETAIL ROWS :: collapsible detail information's -->
   @if (!isCollapsed) {
-    <div name="collapsed-details" class="col-12 mt-2">
-      <dl class="row">
+    <div class="col">
+      <dl class="metadata">
         <!-- PUBLISHER -->
         @if (record.metadata.document.publisher) {
-          <dt class="offset-1 col-1 label-title" translate>Publisher</dt>
-          <dd class="col-10 mb-0">{{ record.metadata.document.publisher }}</dd>
+          <dt translate>Publisher</dt>
+          <dd>{{ record.metadata.document.publisher }}</dd>
         }
         <!-- YEAR -->
         @if (record.metadata.document.year) {
-          <dt class="offset-1 col-1 label-title" translate>Year</dt>
-          <dd class="col-10 mb-0">{{ record.metadata.document.year }}</dd>
+          <dt translate>Year</dt>
+          <dd>{{ record.metadata.document.year }}</dd>
         }
         <!-- IDENTIFIER -->
         @if (record.metadata.document.identifier) {
-          <dt class="offset-1 col-1 label-title" translate>Identifier</dt>
-          <dd class="col-10 mb-0">{{ record.metadata.document.identifier }}</dd>
+          <dt translate>Identifier</dt>
+          <dd>{{ record.metadata.document.identifier }}</dd>
         }
         <!-- SOURCE -->
         @if (record.metadata.document.source) {
-          <dt class="offset-1 col-1 label-title" translate>Source</dt>
-          <dd class="col-10 mb-0">
+          <dt translate>Source</dt>
+          <dd>
             @if (record.metadata.document.source.volume || record.metadata.document.source.number) {
               {{ record.metadata.document.source | journalVolume }}
             }
           </dd>
         }
         <!-- SCOPE -->
-        <dt class="offset-1 col-1 label-title" translate>Scope</dt>
-        <dd class="col-10 mb-0">
+        <dt translate>Scope</dt>
+        <dd>
           @if (record.metadata.copy) {
             {{ 'Copy' | translate }}
           } @else {
@@ -76,33 +76,31 @@
         </dd>
         <!-- PAGES -->
         @if (record.metadata.copy && record.metadata.pages) {
-          <dt class="offset-1 col-1 label-title" translate>Pages</dt>
-          <dd class="col-10 mb-0">{{ record.metadata.pages }}</dd>
+          <dt translate>Pages</dt>
+          <dd>{{ record.metadata.pages }}</dd>
         }
         <!-- FOUND IN -->
         @if (record.metadata.found_in) {
-          <dt class="offset-1 col-1 label-title" translate>Found in</dt>
-          <dd class="col-10 mb-0">
+          <dt translate>Found in</dt>
+          <dd>
             <a href="{{ record.metadata.found_in.url }}">{{ record.metadata.found_in.url }}</a>
             <p-tag class="ml-2" severity="secondary" [value]="record.metadata.found_in.source" />
           </dd>
         }
         <!-- STATUS -->
-        <dt class="offset-1 col-1 label-title" translate>Request status</dt>
-        <dd class="col-10 mb-0">
+        <dt translate>Request status</dt>
+        <dd>
           <p-tag [severity]="badgeColor(record.metadata.status)" [value]="record.metadata.status|translate" />
         </dd>
         <!-- NOTES -->
         @if (record.metadata.notes && record.metadata.notes.length > 0) {
-          <dt class="offset-1 col-1 label-title" translate>Note</dt>
-          <dd class="col-10 mb-0">
-            <blockquote>
-              <ul class="list-unstyled">
-                @for (note of record.metadata.notes; track note) {
-                  <li [innerHTML]="note.content | nl2br"></li>
-                }
-              </ul>
-            </blockquote>
+          <dt translate>Note</dt>
+          <dd>
+            <ul class="list-none p-0 m-0">
+              @for (note of record.metadata.notes; track note) {
+                <li [innerHTML]="note.content | nl2br"></li>
+              }
+            </ul>
           </dd>
         }
       </dl>
diff --git a/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.ts b/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.ts
index effe50a4f..42d9d33a2 100644
--- a/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.ts
+++ b/projects/admin/src/app/circulation/patron/ill-request/ill-request-item/ill-request-item.component.ts
@@ -20,8 +20,7 @@ import { getTagSeverityFromStatus } from '@app/admin/utils/utils';
 
 @Component({
   selector: 'admin-ill-request-item',
-  templateUrl: './ill-request-item.component.html',
-  styleUrls: ['../../../circulation.scss']
+  templateUrl: './ill-request-item.component.html'
 })
 export class IllRequestItemComponent {
 
diff --git a/projects/admin/src/app/circulation/patron/ill-request/ill-request.component.html b/projects/admin/src/app/circulation/patron/ill-request/ill-request.component.html
index 1b0c09676..d8a7a67d8 100644
--- a/projects/admin/src/app/circulation/patron/ill-request/ill-request.component.html
+++ b/projects/admin/src/app/circulation/patron/ill-request/ill-request.component.html
@@ -1,6 +1,6 @@
 <!--
  RERO ILS UI
- Copyright (C) 2023-2024 RERO
+ Copyright (C) 2023-2025 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,22 +14,29 @@
  You 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 (illRequests$ | async; as illRequests) {
-  <section class="content">
-    @if (illRequests.length > 0) {
-      <!-- HEADER -->
-      <div class="row p-2 mb-1 bg-dark rounded text-light">
-        <div class="col-4" translate>Document</div>
+@if(illRequests$ | async; as illRequests) {
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+      <div class="grid grid-nogutter py-3 px-2 m-1 text-lg font-bold align-items-center border-bottom-1 surface-border">
+          <div class="col-4" translate>Document</div>
         <div class="col-3" translate>Pickup location</div>
         <div class="col-2" translate>Request date</div>
         <div class="col-2" translate>Loan status</div>
-        <div class="col-1" translate>&nbsp;</div>
+        <div class="col-1" translate></div>
+      </div>
+    </ng-template>
+    @if (illRequests.length > 0) {
+      <div class="alternate-color">
+        @for (record of illRequests; track record) {
+          <admin-ill-request-item [record]="record" />
+        }
       </div>
-      @for (record of illRequests; track record) {
-        <admin-ill-request-item [record]="record"></admin-ill-request-item>
-      }
     } @else {
-      {{ 'No ill request.' | translate }}
+      <div class="mx-3 my-4 font-bold" translate>
+        No ill request.
+      </div>
     }
-  </section>
+  </p-card>
+} @else {
+  <div class="font-bold mx-2 my-4" translate>Loading in progress</div>
 }
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
index a267a1731..28b057a9f 100644
--- 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
@@ -63,8 +63,8 @@ export class CirculationSettingsComponent implements OnInit {
   private openFixedEndDateDialog(): void {
     this.dialogRef = this.dialogService.open(FixedDateFormComponent, {
       header: this.translateService.instant('Choose a due date'),
+      focusOnShow: false,
       width: '30vw',
-      height: '600px'
     });
     this.dialogRef.onClose.subscribe((result?: any) => {
       if (result && 'action' in result && result.action === 'submit') {
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 833e66cfe..acbfbd274 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,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020-2024 RERO
+  Copyright (C) 2020-2025 RERO
   Copyright (C) 2020-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -16,50 +16,54 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <form [formGroup]="formGroup" (ngSubmit)="onSubmitForm()">
-  <div class="form-group">
+  <div class="flex flex-column gap-2">
     <p-calendar
+      appendTo="body"
       id="end-date"
       appendTo="body"
       formControlName="endDate"
+      styleClass="w-full"
       [showIcon]="true"
       [iconDisplay]="'input'"
       firstDayOfWeek="1"
-      [ngClass]="{'is-invalid': formGroup.controls.endDate.touched && formGroup.controls.endDate.invalid}"
+      [ngClass]="{'border-warning': 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="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>
+      @if (formGroup.controls.endDate.valid || !formGroup.controls.endDate.touched) {
+        <span class="text-warning flex gap-1">
+          <i class="fa fa-exclamation-triangle"></i>
+          {{ 'This date will override the circulation policy behavior' | translate }}
+        </span>
+      }
+      @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="flex gap-1">
+      <p-checkbox [binary]="true" inputId="remember" formControlName="remember" />
+      <label for="remember" translate>Remember this date in current session</label>
+    </div>
   </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>
+
+  <div class="mt-3 flex gap-1 justify-content-end">
+    <p-button [label]="'Cancel' |translate" severity="danger" outlined (onClick)="closeModal()" />
+    <p-button type="submit" [label]="'Apply' |translate" [disabled]="this.formGroup.invalid" />
   </div>
 </form>
 
 <ng-template #errorMessage let-message='message'>
-  <small class="form-text text-danger">
-    <i class="fa fa-times-circle pr-1"></i>
+  <span class="text-error flex gap-1">
+    <i class="fa fa-times-circle"></i>
     {{ message }}
-  </small>
+  </span>
 </ng-template>
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 1f7914ef7..4a99413b9 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
@@ -19,7 +19,6 @@ import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Library } from '@app/admin/classes/library';
 import { DateValidators } from '@app/admin/utils/validators';
-import { TranslateService } from '@ngx-translate/core';
 import { RecordService } from '@rero/ng-core';
 import { UserService } from '@rero/shared';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
@@ -32,7 +31,6 @@ import { Subscription } from 'rxjs';
 export class FixedDateFormComponent implements OnInit, OnDestroy {
 
   private dynamicDialogRef: DynamicDialogRef = inject(DynamicDialogRef);
-  private translateService: TranslateService = inject(TranslateService);
   private userService: UserService = inject(UserService);
   private recordService: RecordService = inject(RecordService);
 
@@ -46,7 +44,7 @@ export class FixedDateFormComponent implements OnInit, OnDestroy {
         DateValidators.DATE_FORMAT
       )
     ]),
-    remember: new FormControl(false)
+    remember: new FormControl<boolean>(false)
   });
 
   disabledDays: number[] = [];
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 ad9747bc7..97c5ecb7f 100644
--- a/projects/admin/src/app/circulation/patron/loan/loan.component.html
+++ b/projects/admin/src/app/circulation/patron/loan/loan.component.html
@@ -15,10 +15,10 @@
   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">
-      <div class="row d-flex">
-        <div class="col pr-0">
+  <div class="grid mb-4">
+    <div class="col-6">
+      <div class="flex gap-1">
+        <div class="flex-grow-1">
           <ng-core-search-input
             [placeholder]="'Checkout/checkin: please enter an item barcode.' | translate"
             [searchText]="searchText"
@@ -27,12 +27,12 @@
             [disabled]="searchInputDisabled"
           />
         </div>
-        <div class="col-sm-2 col-md-1 align-self-end pl-1">
+        <div class="align-self-end pl-1">
           <admin-circulation-settings />
         </div>
       </div>
       @if (checkoutSettings) {
-        <div class="row col mt-1">
+        <div class="flex gap-1 mt-2">
           @for (setting of checkoutSettings; track setting) {
             <p-tag [severity]="setting.extra?.severity || 'warning'">
               {{ setting.label }}
@@ -42,24 +42,36 @@
         </div>
       }
     </div>
-    <div class="col"></div>
     <!-- Sorting loans -->
-    <div class="col-md-4 d-flex align-items-end justify-content-end">
-      <ng-core-menu-sort
-        [config]="[
-          {value:'-transactiondate', label:'Transaction date (desc)' | translate, icon:'fa-sort-numeric-desc'},
-          {value:'transactiondate', label:'Transaction date' | translate, icon:'fa-sort-numeric-asc'},
-          {value:'-duedate', label:'Due date (desc)' | translate, icon:'fa-sort-numeric-desc'},
-          {value:'duedate', label:'Due date' | translate, icon:'fa-sort-numeric-asc'},
-          {value:'-location', label:'Location (desc)' | translate, icon: 'fa-sort-numeric-desc'},
-          {value:'location', label:'Location' | translate, icon: 'fa-sort-numeric-asc'}
+    <div class="col-6 flex align-items-start justify-content-end">
+      <p-dropdown
+        [options]="[
+          {value:'-transactiondate', label:'Transaction date (desc)' | translate, icon:'fa fa-sort-numeric-desc'},
+          {value:'transactiondate', label:'Transaction date' | translate, icon:'fa fa-sort-numeric-asc'},
+          {value:'-duedate', label:'Due date (desc)' | translate, icon:'fa fa-sort-numeric-desc'},
+          {value:'duedate', label:'Due date' | translate, icon:'fa fa-sort-numeric-asc'},
+          {value:'-location', label:'Location (desc)' | translate, icon: 'fa fa-sort-numeric-desc'},
+          {value:'location', label:'Location' | translate, icon: 'fa fa-sort-numeric-asc'}
         ]"
-        (selectChange)="selectingSortCriteria($event)"
-      />
+        (onChange)="selectingSortCriteria($event)"
+      >
+        <ng-template let-item pTemplate="selectedItem">
+          <div class="flex align-items-center gap-2">
+            <i [class]="item.icon"></i>
+            <div>{{ item.label }}</div>
+          </div>
+        </ng-template>
+        <ng-template let-item pTemplate="item">
+          <div class="flex align-items-center gap-2">
+            <i [class]="item.icon"></i>
+            <div>{{ item.label }}</div>
+          </div>
+        </ng-template>
+      </p-dropdown>
     </div>
   </div>
-  <div class="row">
-    <div class="col-md-12">
+  <div class="grid">
+    <div class="col-12">
       <admin-circulation-items-list
         [checkedOutItems]="checkedOutItems"
         [checkedInItems]="checkedInItems"
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 68d102297..a9e688d6f 100644
--- a/projects/admin/src/app/circulation/patron/loan/loan.component.ts
+++ b/projects/admin/src/app/circulation/patron/loan/loan.component.ts
@@ -22,8 +22,10 @@ import { TranslateService } from '@ngx-translate/core';
 import { CONFIG, DateTranslatePipe } from '@rero/ng-core';
 import { ItemStatus, UserService } from '@rero/shared';
 import { MessageService } from 'primeng/api';
+import { DropdownChangeEvent } from 'primeng/dropdown';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
 import { forkJoin, Subscription } from 'rxjs';
+import { CirculationStatistics } from '../../circulationStatistics';
 import { CirculationService } from '../../services/circulation.service';
 import { LoanFixedDateService } from '../../services/loan-fixed-date.service';
 import { CirculationSettingsService, ICirculationSetting } from './circulation-settings/circulation-settings.service';
@@ -261,8 +263,8 @@ export class LoanComponent implements OnInit, OnDestroy {
                   life: CONFIG.MESSAGE_LIFE
                 });
               }
-              this.circulationService.statisticsDecrease('loans');
-              this.circulationService.statisticsIncrease('history');
+              this.circulationService.statisticsDecrease(CirculationStatistics.LOAN);
+              this.circulationService.statisticsIncrease(CirculationStatistics.HISTORY);
               break;
             }
             case ItemAction.checkout: {
@@ -270,12 +272,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.statisticsIncrease('loans');
+              this.circulationService.statisticsIncrease(CirculationStatistics.LOAN);
               // 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.statisticsIncrease('pickup');
+                this.circulationService.statisticsIncrease(CirculationStatistics.PICKUP);
               }
               break;
             }
@@ -418,9 +420,8 @@ export class LoanComponent implements OnInit, OnDestroy {
    * Allow to sort the checkout items list using a sort criteria
    * @param sortCriteria: the srt criteria to use for sorting the list
    */
-
-  selectingSortCriteria(sortCriteria: string): void {
-    switch (sortCriteria) {
+  selectingSortCriteria(sortCriteria: DropdownChangeEvent): void {
+    switch (sortCriteria.value) {
       case 'duedate':
         this.checkedOutItems.sort((a, b) => a.loan.end_date.diff(b.loan.end_date));
         break;
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 7195516ed..a020648d9 100644
--- a/projects/admin/src/app/circulation/patron/main/main.component.html
+++ b/projects/admin/src/app/circulation/patron/main/main.component.html
@@ -14,47 +14,31 @@
  You 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 (patron) {
-  <div class="col mb-4">
-    <admin-circulation-patron-detailed
-      [patron]="patron"
-      [barcode]="barcode"
-      [displayCirculationMessages]="true"
-      (clearPatron)="clearPatron()"
-    ></admin-circulation-patron-detailed>
-  </div>
-
-  <div class="col">
-    <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) {
-            @if (item.tag.withCurrency) {
-              <p-badge
-                [severity]="item.tag.severity || 'info'"
-                [value]="item.tag.statistics()[item.id] | currency: organisation.default_currency"
-              />
-            } @else {
-              <p-badge [severity]="item.tag.severity || 'info'" [value]="item.tag.statistics()[item.id]" />
-            }
+@if (patron && items) {
+  <admin-circulation-patron-detailed
+    [patron]="patron"
+    [barcode]="barcode"
+    [displayCirculationMessages]="true"
+    (clearPatron)="clearPatron()"
+  />
+  <p-tabMenu [model]="items" [activeItem]="activeItem" (activeItemChange)="onActiveItemChange($event)">
+    <ng-template pTemplate="item" let-item>
+      <a pRipple class="p-menuitem-link flex gap-2">
+        <span>{{ item.label }}</span>
+        @if (item.tag?.statistics && item.tag?.statistics()[item.id] && item.tag?.statistics()[item.id] > 0) {
+          @if (item.tag.withCurrency) {
+            <p-badge
+              [severity]="item.tag.severity || 'info'"
+              [value]="item.tag.statistics()[item.id] | currency: organisation.default_currency"
+            />
+          } @else {
+            <p-badge [severity]="item.tag.severity || 'info'" [value]="item.tag.statistics()[item.id]" />
           }
-        </a>
-      </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 text-900">
-          {{ message.summary }}
-        </div>
-        <p [innerHtml]="message.detail"></p>
-      </div>
+        }
+      </a>
     </ng-template>
-  </p-toast>
-  <p-confirmDialog />
+  </p-tabMenu>
+  <div class="mt-4">
+    <router-outlet />
+  </div>
 }
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 a127e3674..67918615a 100644
--- a/projects/admin/src/app/circulation/patron/main/main.component.ts
+++ b/projects/admin/src/app/circulation/patron/main/main.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2019-2024 RERO
+ * Copyright (C) 2019-2025 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -19,14 +19,15 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { LoanState } from '@app/admin/classes/loans';
 import { OrganisationService } from '@app/admin/service/organisation.service';
 import { PatronService } from '@app/admin/service/patron.service';
+import { getSeverity } from '@app/admin/utils/utils';
 import { HotkeysService } from '@ngneat/hotkeys';
 import { TranslateService } from '@ngx-translate/core';
 import { RecordService } from '@rero/ng-core';
 import { MenuItem } from 'primeng/api';
-import { Subscription } from 'rxjs';
+import { forkJoin, Subscription, switchMap, tap } from 'rxjs';
 import { OperationLogsApiService } from '../../../api/operation-logs-api.service';
+import { CirculationStatistics } from '../../circulationStatistics';
 import { CirculationService } from '../../services/circulation.service';
-import { PatronTransactionService } from '../../services/patron-transaction.service';
 
 @Component({
   selector: 'admin-main',
@@ -37,7 +38,6 @@ export class MainComponent implements OnInit, OnDestroy {
   private route: ActivatedRoute = inject(ActivatedRoute);
   private router: Router = inject(Router);
   private patronService: PatronService = inject(PatronService);
-  private patronTransactionService: PatronTransactionService = inject(PatronTransactionService);
   private organisationService: OrganisationService = inject(OrganisationService);
   private hotKeysService: HotkeysService = inject(HotkeysService);
   private translateService: TranslateService = inject(TranslateService);
@@ -99,18 +99,12 @@ export class MainComponent implements OnInit, OnDestroy {
   /** the current patron barcode */
   barcode: string;
 
-  /** Subscription to current patron */
-  private _patronSubscription$: Subscription;
-
-  /** Subscription to the fees accounting operation subject (allowing to know if some fees are paid, deleted, ...) */
-  private _patronFeesOperationSubscription$: Subscription;
-
-  historyCount = 0;
-
   items: MenuItem[] | undefined;
 
   activeItem: MenuItem | undefined;
 
+  subscription = new Subscription();
+
   // GETTER & SETTER ====================================================
   /**
    * Get current organisation
@@ -139,12 +133,7 @@ export class MainComponent implements OnInit, OnDestroy {
   /** OnDestroy hook */
   ngOnDestroy(): void {
     this._unregisterShortcuts();
-    if (this._patronFeesOperationSubscription$) {
-      this._patronFeesOperationSubscription$.unsubscribe();
-    }
-    if (this._patronSubscription$) {
-      this._patronSubscription$.unsubscribe();
-    }
+    this.subscription.unsubscribe();
     this.patronService.clearPatron();
   }
 
@@ -155,30 +144,44 @@ export class MainComponent implements OnInit, OnDestroy {
    */
   load(barcode: string): void {
     this.barcode = barcode;
-    this._patronSubscription$ = this.patronService.getPatron(barcode).subscribe((patron: any) => {
-      if (patron) {
-        this.patron = patron;
-        // We need to unregister/register the shortcuts after the patron was loaded. Otherwise, the patron could be considered has
-        // null and this will cause error for navigation url construction
-        this._unregisterShortcuts();
-        this._registerShortcuts();
-        // Load count history only if the patron has keep history
-        if (patron.keep_history) {
-          this.operationLogsApiService.getCheckInHistory(patron.pid, 1, 1).subscribe((result: any) => {
-            this.historyCount = this.recordService.totalHits(result.hits.total);
-          });
-        }
-        this.patronService.getCirculationInformations(patron.pid).subscribe((data) => {
+
+    this.subscription.add(
+      this.patronService.getPatron(barcode)
+      .pipe(
+        tap((patron: any) => this.patron = patron),
+        tap(() => {
+          // We need to unregister/register the shortcuts after the patron was loaded.
+          // Otherwise, the patron could be considered has null and this will
+          // cause error for navigation url construction
+          this._unregisterShortcuts();
+          this._registerShortcuts();
+        }),
+        switchMap((patron: any) => {
+          const circulationInformations$ = this.patronService.getCirculationInformations(patron.pid);
+          const checkInHistory$ = this.operationLogsApiService.getCheckInHistory(patron.pid, 1, 1);
+          const overduesPreview$ = this.patronService.getOverduesPreview(this.patron.pid);
+          return forkJoin([circulationInformations$, checkInHistory$, overduesPreview$]);
+        }),
+        tap(([informations, checkInHistory, overduesPreview]: any) => {
           this.circulationService.clear();
-          this.circulationService.statisticsIncrease('fees', data.fees.engaged + data.fees.preview);
-          this._parseStatistics(data.statistics || {});
-          for (const message of (data.messages || [])) {
-            this.circulationService.addCirculationMessage(message as any);
+          this.circulationService.statisticsIncrease(CirculationStatistics.FEES_ENGAGED, informations.fees.engaged);
+          this.circulationService.statisticsIncrease(CirculationStatistics.FEES, informations.fees.engaged);
+          this._parseStatistics(informations.statistics || {});
+          for (const message of (informations.messages || [])) {
+            this.circulationService.addCirculationMessage({
+              severity: getSeverity(message.type),
+              detail: message.content
+            });
           }
-          this.initializeMenu();
-        });
-      }
-    });
+          overduesPreview.map((overdue: any) => this.circulationService.statisticsIncrease(CirculationStatistics.FEES, overdue.fees.total));
+          if (this.patron.keep_history) {
+            this.circulationService.statisticsIncrease(CirculationStatistics.HISTORY, this.recordService.totalHits(checkInHistory.hits.total));
+          }
+        }),
+        tap(() => this.initializeMenu(this.patron.keep_history))
+      )
+      .subscribe()
+    );
   }
 
   /** reset the patron currently viewed */
@@ -215,34 +218,28 @@ export class MainComponent implements OnInit, OnDestroy {
       switch (key) {
         case LoanState[LoanState.PENDING]:
         case LoanState[LoanState.ITEM_IN_TRANSIT_FOR_PICKUP]:
-          this.circulationService.statisticsIncrease('pending', Number(data[key]));
+          this.circulationService.statisticsIncrease(CirculationStatistics.PENDING, Number(data[key]));
           break;
         case LoanState[LoanState.ITEM_AT_DESK]:
-          this.circulationService.statisticsIncrease('pickup',  Number(data[key]));
+          this.circulationService.statisticsIncrease(CirculationStatistics.PICKUP,  Number(data[key]));
           break;
         case LoanState[LoanState.ITEM_ON_LOAN]:
-          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.statisticsIncrease('history',  Number(data[key]));
+          this.circulationService.statisticsIncrease(CirculationStatistics.LOAN,  Number(data[key]));
           break;
         case 'ill_requests':
-          this.circulationService.statisticsIncrease('ill', Number(data[key]));
+          this.circulationService.statisticsIncrease(CirculationStatistics.ILL, Number(data[key]));
           break;
       }
     }
   }
 
-  private initializeMenu(): void {
+  private initializeMenu(keepHistory: boolean): void {
     this.items = [
       {
         id: 'loan',
         label: this.translateService.instant('On loan'),
         routerLink: ['/circulation', 'patron', this.barcode, 'loan'],
         tag: {
-          severity: 'info',
           statistics: this.circulationService.statistics
         }
       },
@@ -251,7 +248,6 @@ export class MainComponent implements OnInit, OnDestroy {
         label: this.translateService.instant('To pick up'),
         routerLink: ['/circulation', 'patron', this.barcode, 'pickup'],
         tag: {
-          severity: 'info',
           statistics: this.circulationService.statistics
         }
       },
@@ -260,7 +256,6 @@ export class MainComponent implements OnInit, OnDestroy {
         label: this.translateService.instant('Pending'),
         routerLink: ['/circulation', 'patron', this.barcode, 'pending'],
         tag: {
-          severity: 'info',
           statistics: this.circulationService.statistics
         }
       },
@@ -269,7 +264,6 @@ export class MainComponent implements OnInit, OnDestroy {
         label: this.translateService.instant('Interlibrary loan'),
         routerLink: ['/circulation', 'patron', this.barcode, 'ill'],
         tag: {
-          severity: 'info',
           statistics: this.circulationService.statistics
         }
       },
@@ -289,11 +283,14 @@ export class MainComponent implements OnInit, OnDestroy {
         }
       }
     ];
-    if (this.patron.keep_history) {
+    if (keepHistory) {
       this.items.push({
         id: 'history',
         label: this.translateService.instant('History'),
-        routerLink: ['/circulation', 'patron', this.barcode, 'history']
+        routerLink: ['/circulation', 'patron', this.barcode, 'history'],
+        tag: {
+          statistics: this.circulationService.statistics
+        }
       });
     }
 
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/overdue-transaction/overdue-transaction.component.html b/projects/admin/src/app/circulation/patron/patron-transactions/overdue-transaction/overdue-transaction.component.html
index d6058937a..52d2628b1 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/overdue-transaction/overdue-transaction.component.html
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/overdue-transaction/overdue-transaction.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2024 RERO
+  Copyright (C) 2021-2025 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,60 +15,53 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (transaction !== undefined && transaction.fees.total > 0) {
-  <div class="col mr-1 p-2 border rounded">
-    <div class="row">
-      <div class="col-lg-2">
-        <shared-open-close-button (status)="isCollapsed = $event" />
-        {{ transaction.loan.end_date.toDate() | dateTranslate :'shortDate' }}
-      </div>
-      <div class="col-lg-7 d-inline-block text-truncate">
-        @if (document && document.title | mainTitle; as title) {
-          <a [routerLink]="['/records','documents','detail', document.pid]">
-            {{ title | truncateText: 15 }}
-          </a>
-        }
-      </div>
-      <div class="col-lg-2 text-lg-right">{{ transaction.fees.total | currency: organisation.default_currency }}</div>
-      <div class="col-lg-1"></div>
+  <div class="mr-1 p-2">
+  <div class="grid grid-nogutter align-items-start">
+    <div class="col-2 flex gap-2">
+      <shared-open-close-button (status)="isCollapsed = $event" />
+      {{ transaction.loan.end_date | dateTranslate :'shortDate' }}
     </div>
-    @if (!isCollapsed) {
-      <div class="mt-2">
-        <!-- Transaction detail -->
-        <h6 translate>Details</h6>
-        <section class="offset-md-1 mb-3">
-          @if (item) {
-            <div class="row">
-              <div class="col-sm-2 label-title text-right" translate>Item</div>
-              <a class="col" [routerLink]="['/records','items','detail', item.pid]">{{ item.barcode }}</a>
-            </div>
-            <div class="row">
-              <div class="col-sm-2 label-title text-right" translate>Call number</div>
-              <shared-inherited-call-number [item]="item" class="col"></shared-inherited-call-number>
-            </div>
-            <div class="row">
-              <div class="col-sm-2 label-title text-right" translate>Borrowed on</div>
-              <div class="col">{{ transaction.loan.start_date.toDate() | dateTranslate :'short' }}</div>
+    <div class="col-7">
+      @if (document && document.title | mainTitle; as title) {
+        <a [routerLink]="['/records','documents','detail', document.pid]">
+          {{ title | truncateText: 15 }}
+        </a>
+      }
+    </div>
+    <div class="col-2 flex justify-content-end">{{ transaction.fees.total | currency: organisation.default_currency }}</div>
+  </div>
+  @if (!isCollapsed) {
+    <div class="mt-2">
+      <h6 translate>Details</h6>
+      <section class="mb-3">
+        @if (item) {
+          <div class="grid grid-nogutter">
+            <div class="col-2" translate>Item</div>
+            <div class="col-10">
+              <a [routerLink]="['/records','items','detail', item.pid]">{{ item.barcode }}</a>
             </div>
-            <div class="row" *ngVar="transaction.loan.transaction_location_pid | getRecord: 'locations' | async as location">
-              <div class="col-sm-2 label-title text-right" translate>Borrowed at</div>
-              <div class="col">
-                {{ location.metadata.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}: {{ location.metadata.name }}
-              </div>
+            <div class="col-2" translate>Call number</div>
+            <div class="col-10">
+              <shared-inherited-call-number [item]="item" />
             </div>
-          }
-        </section>
-        <!-- Transaction history -->
-        <h6 translate>Transaction history</h6>
-        <div class="events-timeline">
-          @for (event of transaction.fees.steps; track event) {
-            <admin-patron-transaction-event
-              [event]="event"
-              class="row pl-2 pr-2 align-items-start timeline-event"
-            />
-          }
-        </div>
-      </div>
-    }
-  </div>
+            <div class="col-2" translate>Borrowed on</div>
+            <div class="col-10">{{ transaction.loan.start_date | dateTranslate :'short' }}</div>
+            <ng-container *ngVar="transaction.loan.transaction_location_pid | getRecord: 'locations' | async as location">
+              @if (location) {
+                <div class="col-2" translate>Borrowed at</div>
+                <div class="col-10">
+                  {{ location.metadata.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}: {{ location.metadata.name }}
+                </div>
+              }
+            </ng-container>
+          </div>
+        }
+      </section>
+
+      <h6 translate>Transaction history</h6>
+      <admin-patron-transaction-history [events]="transaction.fees.steps" />
+    </div>
+  }
+</div>
 }
 
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-fee/patron-fee.component.html b/projects/admin/src/app/circulation/patron/patron-transactions/patron-fee/patron-fee.component.html
index f343f9dcb..1b0e11bdd 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-fee/patron-fee.component.html
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-fee/patron-fee.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2022-2024 RERO
+  Copyright (C) 2022-2025 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -16,10 +16,10 @@
 -->
 @defer (when formFields) {
   <form [formGroup]="form" (ngSubmit)="submit(model)">
-    <formly-form [form]="form" [fields]="formFields" [model]="model"></formly-form>
-    <div class="text-right">
+    <formly-form [form]="form" [fields]="formFields" [model]="model" />
+    <div class="flex justify-content-end gap-1 mt-2">
       <p-button [label]="'Cancel'|translate" severity="danger" outlined (onClick)="closeModal()" />
-      <p-button styleClass="ml-1" [label]="'Save'|translate" type="submit" [disabled]="!form.valid" />
+      <p-button [label]="'Save'|translate" type="submit" [disabled]="!form.valid" />
     </div>
   </form>
 }
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 2a757c498..62d84a76e 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
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022-2024 RERO
+ * Copyright (C) 2022-2025 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,6 +17,7 @@
 import { getCurrencySymbol } from '@angular/common';
 import { Component, inject, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
+import { CirculationStatistics } from '@app/admin/circulation/circulationStatistics';
 import { CirculationService } from '@app/admin/circulation/services/circulation.service';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { TranslateService } from '@ngx-translate/core';
@@ -30,8 +31,7 @@ import { OrganisationService } from 'projects/admin/src/app/service/organisation
 
 @Component({
   selector: 'admin-patron-fee',
-  templateUrl: './patron-fee.component.html',
-  styles: ['.p-inputtext { width: 100%; padding: 0 }']
+  templateUrl: './patron-fee.component.html'
 })
 export class PatronFeeComponent implements OnInit {
 
@@ -74,7 +74,8 @@ export class PatronFeeComponent implements OnInit {
     }
     this.patronTransactionApiService.addFee(model).subscribe({
       next: () => {
-        this.circulationService.statisticsIncrease('fees', model.total_amount);
+        this.circulationService.statisticsIncrease(CirculationStatistics.FEES_ENGAGED, model.total_amount);
+        this.circulationService.statisticsIncrease(CirculationStatistics.FEES, model.total_amount);
         this.closeModal();
         this.messageService.add({
           severity: 'success',
@@ -100,6 +101,7 @@ export class PatronFeeComponent implements OnInit {
 
   /** Init form model */
   private _initForm(properties: any): void {
+    console.log(properties.type);
     this.formFields = [{
       key: 'type',
       type: 'select',
@@ -132,13 +134,17 @@ export class PatronFeeComponent implements OnInit {
       props: {
         label: 'Date',
         required: true,
-        dateFormat: 'yy-mm-dd',
+        dateFormat: 'yy-mm-dd'
       }
     }];
 
     // Default model value
     this.model = {
-      type: null,
+      type: {
+        label: this.translateService.instant(properties.type.default),
+        value: properties.type.default,
+        data: properties.type.default
+      },
       total_amount: null,
       creation_date: new Date(),
       patron: {
@@ -165,7 +171,11 @@ export class PatronFeeComponent implements OnInit {
 
 /** Interface to define fields on form */
 export interface FeeFormModel {
-  type: string;
+  type: {
+    label: string,
+    value: string,
+    data: string
+  };
   total_amount: number;
   note?: string;
   creation_date: any;
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.html b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.html
index e5a5f41e8..b6981e396 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.html
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020-2024 RERO
+  Copyright (C) 2020-2025 RERO
 
   This program is free software: you can redistribute it and/or modify
   it under the terms of the GNU Affero General Public License as published by
@@ -16,27 +16,31 @@
 -->
 @if (transactions) {
   <form [formGroup]="form" (ngSubmit)="onSubmitForm()">
+    <formly-form [form]="form" [fields]="formFields" [model]="model" />
+
+    <p-scrollPanel class="m-4 w-full" [style]="{ 'max-height': '500px' }">
     @for (transaction of transactions; track transaction) {
       <p-panel styleClass="mb-2" [header]="transaction.type|translate">
         <div class="card-text">
           @if (transaction.note) {
-            <div class="row">
-              <label class="col-4 label-title" translate>Note</label>
+            <div class="grid">
+              <label class="col-4" translate>Note</label>
               <span class="col-8">{{ transaction.note }}</span>
             </div>
           }
-          <div class="row">
-            <label class="col-4 label-title" translate>Creation date</label>
+          <div class="grid">
+            <label class="col-4" translate>Creation date</label>
             <span class="col-8">{{ transaction.creation_date | dateTranslate: 'shortDate' }}</span>
           </div>
-          <div class="row">
-            <label class="col-4 label-title" translate>Total amount</label>
+          <div class="grid">
+            <label class="col-4" translate>Total amount</label>
             <span class="col-8">{{ transaction.total_amount | currency: organisation.default_currency }}</span>
           </div>
         </div>
       </p-panel>
     }
-    <formly-form [form]="form" [fields]="formFields" [model]="model"></formly-form>
+    </p-scrollPanel>
+
     <div class="flex justify-content-end">
       <p-button type="submit" [label]="'Save'|translate" [disabled]="this.form.status !== 'VALID'" />
     </div>
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.ts
index 92eb05191..3833d9e63 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.ts
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event-form/patron-transaction-event-form.component.ts
@@ -17,6 +17,8 @@
 import { getCurrencySymbol } from '@angular/common';
 import { Component, inject, OnInit } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
+import { CirculationStatistics } from '@app/admin/circulation/circulationStatistics';
+import { CirculationService } from '@app/admin/circulation/services/circulation.service';
 import { PatronTransactionService } from '@app/admin/circulation/services/patron-transaction.service';
 import { PatronTransaction } from '@app/admin/classes/patron-transaction';
 import { OrganisationService } from '@app/admin/service/organisation.service';
@@ -36,6 +38,7 @@ export class PatronTransactionEventFormComponent implements OnInit {
   private translateService: TranslateService = inject(TranslateService);
   private organisationService: OrganisationService = inject(OrganisationService);
   private patronTransactionService: PatronTransactionService = inject(PatronTransactionService);
+  private circulationService: CirculationService = inject(CirculationService);
 
   /** the transactions to perform with this form */
   transactions: Array<PatronTransaction>;
@@ -191,6 +194,8 @@ export class PatronTransactionEventFormComponent implements OnInit {
           ? transaction.total_amount
           : residualAmount;
         this.patronTransactionService.payPatronTransaction(transaction, transactionAmount, formValues.method);
+        this.circulationService.statisticsDecrease(CirculationStatistics.FEES_ENGAGED, transactionAmount);
+        this.circulationService.statisticsDecrease(CirculationStatistics.FEES, transactionAmount);
         // DEV NOTES : We use the below syntax to avoid floating-number precision drift.
         //   on each iteration we 'round' the residual amount to a float with 2 decimals precision.
         //   --> with this syntax : (7.8 - 2 - 2 - 2) = 1.8
@@ -207,6 +212,8 @@ export class PatronTransactionEventFormComponent implements OnInit {
     } else if (this.action === 'cancel') {
       for (const transaction of this.transactions) {
         this.patronTransactionService.cancelPatronTransaction(transaction, formValues.amount, formValues.comment);
+        this.circulationService.statisticsDecrease(CirculationStatistics.FEES_ENGAGED, formValues.amount);
+        this.circulationService.statisticsDecrease(CirculationStatistics.FEES, formValues.amount);
       }
     }
     this.dynamicDialogRef.close();
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.html b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.html
deleted file mode 100644
index 3f4450bda..000000000
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.html
+++ /dev/null
@@ -1,109 +0,0 @@
-<!--
-  RERO ILS UI
-  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
-  the Free Software Foundation, version 3 of the License.
-
-  This program is distributed in the hope that it will be useful,
-  but WITHOUT ANY WARRANTY; without even the implied warranty of
-  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-  GNU Affero General Public License for more details.
-
-  You should have received a copy of the GNU Affero General Public License
-  along with this program.  If not, see <http://www.gnu.org/licenses/>.
--->
-@if (event !== undefined) {
-  <div class="col-lg-3 pr-4 text-right event-timestamp">
-    <i class="fa fa-calendar-o"></i> {{ event.creation_date | dateTranslate: 'shortDate' }}
-    <i class="fa fa-clock-o pl-1"></i> {{ event.creation_date | dateTranslate: 'HH:mm:ss' }}
-  </div>
-  <div class="col-lg-9 event-content">
-    <div class="row mb-1" [ngClass]="{'event-highlight': event.type === patronTransactionEventType.DISPUTE}">
-      <div class="col-lg-9 d-inline-block text-truncate label">{{ label }}</div>
-      <div class="col-lg-2 text-lg-right">
-        @if (event.type !== patronTransactionEventType.DISPUTE) {
-          <span class="badge"
-                [ngClass]="{'badge-danger': event.type === patronTransactionEventType.FEE,
-                            'badge-success': event.type === patronTransactionEventType.PAYMENT,
-                            'badge-info': event.type === patronTransactionEventType.CANCEL}">
-            {{ event.amount | currency: organisation.default_currency }}
-          </span>
-        }
-      </div>
-      <div class="col-lg-1 text-center more-detail" [ngClass]="{'force-display': !isCollapsed}">
-        @if (event.pid) {
-          <i  class="fa"
-              [ngClass]="{'fa-eye': isCollapsed, 'fa-eye-slash': !isCollapsed}"
-              (click)="isCollapsed=!isCollapsed"></i>
-        }
-      </div>
-    </div>
-    @if (!isCollapsed) {
-      @if (event.note) {
-        <div class="row">
-          <div class="col-2 offset-1 label-title">
-            <i class="fa fa-comment-o pr-1"></i>
-            {{ 'Note' | translate }}
-          </div>
-          <div class="col-9">{{ event.note }}</div>
-        </div>
-      }
-      @if (event.operator) {
-        @if (event.operator.pid | getRecord:'patrons' | async; as operator) {
-          <div class="row">
-            <div class="col-2 offset-1 label-title">
-              <i class="fa fa-user pr-1"></i>
-              {{ 'Operator' | translate }}
-            </div>
-            <div class="col-9">
-              @if ($any(operator).metadata.last_name) {
-                {{ $any(operator).metadata.last_name }}
-              }
-              @if ($any(operator).metadata.last_name && $any(operator).metadata.first_name) {
-                ,
-              }
-              @if ($any(operator).metadata.first_name) {
-                {{ $any(operator).metadata.first_name }}
-              }
-            </div>
-          </div>
-        }
-      }
-      @if (event.library) {
-        @if (event.library.pid | getRecord:'libraries' | async; as library) {
-          <div class="row">
-            <div class="col-2 offset-1 label-title">
-              <i class="fa fa-map-marker pr-1"></i>
-              {{ 'Library' | translate }}
-            </div>
-            <div class="col-9">{{ $any(library).metadata.name }}</div>
-          </div>
-        }
-      }
-      @if (event.steps) {
-        @for (step of event.steps; track step; let first = $first) {
-          <div class="row mb-1">
-            <div class="col-2 offset-1" [class.label-title]="first">
-              @if (first) {
-                <i class="fa fa-cubes pr-1"></i>{{ 'Steps' | translate }}
-              }
-            </div>
-            <div class="col-7">{{ step.timestamp | dateTranslate: 'shortDate' }}</div>
-            <div class="col-2">
-              @if (event.type !== patronTransactionEventType.DISPUTE) {
-                <span class="badge"
-                      [ngClass]="{'badge-danger': event.type === patronTransactionEventType.FEE,
-                                  'badge-success': event.type === patronTransactionEventType.PAYMENT,
-                                  'badge-info': event.type === patronTransactionEventType.CANCEL}">
-                  {{ step.amount | currency: organisation.default_currency }}
-                </span>
-              }
-            </div>
-          </div>
-        }
-      }
-    }
-  </div>
-}
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.spec.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.spec.ts
deleted file mode 100644
index 143223d7d..000000000
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.spec.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/*
- * RERO ILS UI
- * 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
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { CirculationModule } from '../../../circulation.module';
-import { PatronTransactionEventComponent } from './patron-transaction-event.component';
-
-describe('PatronTransactionEventComponent', () => {
-  let component: PatronTransactionEventComponent;
-  let fixture: ComponentFixture<PatronTransactionEventComponent>;
-
-  beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
-      imports: [
-        TranslateModule.forRoot(),
-        HttpClientTestingModule,
-        CirculationModule
-      ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PatronTransactionEventComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.ts
deleted file mode 100644
index 84f07b5ea..000000000
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction-event/patron-transaction-event.component.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-/*
- * RERO ILS UI
- * 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
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { Component, inject, Input } from '@angular/core';
-import { TranslateService } from '@ngx-translate/core';
-import { OrganisationService } from '@app/admin/service/organisation.service';
-import { PatronTransactionEvent, PatronTransactionEventType } from '@app/admin/classes/patron-transaction';
-
-@Component({
-  selector: 'admin-patron-transaction-event',
-  templateUrl: './patron-transaction-event.component.html'
-})
-export class PatronTransactionEventComponent {
-
-  private organisationService: OrganisationService = inject(OrganisationService);
-  private translateService: TranslateService = inject(TranslateService);
-
-  /** the event ot display */
-  @Input() event: PatronTransactionEvent;
-
-  /** is the transaction event is collapsed */
-  isCollapsed = true;
-
-  /** store a reference to enum to use in html template */
-  patronTransactionEventType = PatronTransactionEventType;
-
-  /** Get current organisation
-   *  @return: current organisation
-   */
-  get organisation() {
-    return this.organisationService.organisation;
-  }
-
-  /**
-   * Get the best possible label of the transaction event
-   * @return label to display as string
-   */
-  get label(): string {
-    return (this.event.subtype)
-      ? `${this.translateService.instant(this.event.type.toString())} [${this.translateService.instant(this.event.subtype)}]`
-      : this.translateService.instant(this.event.type.toString());
-  }
-}
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/default-transaction-detail/default-transaction-detail.component.html b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/default-transaction-detail/default-transaction-detail.component.html
index 217a94711..691e36d5b 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/default-transaction-detail/default-transaction-detail.component.html
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/default-transaction-detail/default-transaction-detail.component.html
@@ -15,8 +15,8 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (transaction?.note) {
-  <div class="row">
-    <div class="col-sm-2 label-title text-right" translate>Note</div>
-    <div class="col-sm-10">{{ transaction.note }}</div>
+  <div class="grid">
+    <div class="col-2" translate>Note</div>
+    <div class="col-10">{{ transaction.note }}</div>
   </div>
 }
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/overdue-transaction-detail/overdue-transaction-detail.component.html b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/overdue-transaction-detail/overdue-transaction-detail.component.html
index ff3a9ae17..7e03f7079 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/overdue-transaction-detail/overdue-transaction-detail.component.html
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/overdue-transaction-detail/overdue-transaction-detail.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2019-2024 RERO
+  Copyright (C) 2019-2025 RERO
   Copyright (C) 2019-2023 UCLouvain
 
   This program is free software: you can redistribute it and/or modify
@@ -16,38 +16,32 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (transaction) {
-  @if (transaction.note) {
-    <div class="col-sm-2 label-title text-right" translate>Note</div>
-    <div class="col-sm-10">{{ transaction.note }}</div>
-  }
-  @if (transaction.document !== null) {
-    @if (transaction.document.pid | getRecord:'documents' | async; as document) {
-      <div class="row">
-        <div class="col-sm-2 label-title text-right" translate>Document</div>
-        <div class="col-sm-10">
-          @if ($any(document).metadata.title | mainTitle; as title) {
-            <a [routerLink]="['/records','documents','detail', transaction.document.pid]">
-              {{ title | truncateText: 15 }}
-            </a>
-          }
-        </div>
+  <div class="grid">
+    @if (transaction.note) {
+      <div class="col-2" translate>Note</div>
+      <div class="col-10">{{ transaction.note }}</div>
+    }
+    @if (transaction.document !== null && transaction.document.pid | getRecord:'documents' | async; as document) {
+      <div class="col-2" translate>Document</div>
+      <div class="col-10">
+        @if ($any(document).metadata.title | mainTitle; as title) {
+          <a [routerLink]="['/records','documents','detail', transaction.document.pid]">
+            {{ title | truncateText: 15 }}
+          </a>
+        }
       </div>
     }
-  }
-  @if (item) {
-    <div class="row">
-      <div class="col-sm-2 label-title text-right" translate>Item</div>
-      <div class="col-sm-10">
+    @if (item) {
+      <div class="col-2" translate>Item</div>
+      <div class="col-10">
         <a [routerLink]="['/records','items','detail', item.pid]">{{ item.barcode }}</a>
       </div>
-    </div>
-  }
-  @if (transaction.loan !== null) {
-    @if (transaction.loan.pid | getRecord: 'loans' | async; as loan) {
-      <div class="row">
-        <div class="col-sm-2 label-title text-right" translate>Loan started at</div>
-        <div class="col-sm-10">{{ $any(loan).metadata.start_date | dateTranslate: 'shortDate' }}</div>
-      </div>
     }
-  }
+    @if (transaction.loan !== null) {
+      @if (transaction.loan.pid | getRecord: 'loans' | async; as loan) {
+        <div class="col-2" translate>Loan started at</div>
+        <div class="col-10">{{ $any(loan).metadata.start_date | dateTranslate: 'shortDate' }}</div>
+      }
+    }
+  </div>
 }
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction-history/patron-transaction-history.component.html b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction-history/patron-transaction-history.component.html
new file mode 100644
index 000000000..b329e9b01
--- /dev/null
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction-history/patron-transaction-history.component.html
@@ -0,0 +1,118 @@
+<!--
+  RERO ILS UI
+  Copyright (C) 2019-2025 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-timeline [value]="events()">
+  <ng-template pTemplate="marker" let-event>
+    <span
+      class="flex w-1rem h-1rem align-items-center justify-content-center text-white border-circle z-1 shadow-1"
+      [ngClass]="{
+        'bg-orange-200': event.type === patronTransactionEventType.DISPUTE,
+        'bg-red-200': event.type === patronTransactionEventType.FEE,
+        'bg-green-200': event.type === patronTransactionEventType.PAYMENT,
+        'bg-blue-200': event.type === patronTransactionEventType.CANCEL
+      }"
+    >
+    </span>
+  </ng-template>
+  <ng-template pTemplate="content" let-event>
+    <div class="flex gap-2">
+      <div>{{ eventLabel(event) }}</div>
+        @if (event.type !== patronTransactionEventType.DISPUTE) {
+          <p-tag
+            [value]="event.amount | currency: organisation.default_currency"
+            [severity]="tagSeverity(event)"
+          />
+        }
+        @if (event.pid) {
+          <i
+            class="fa"
+            [ngClass]="{'fa-eye': hideShowEye('event-' + event.pid), 'fa-eye-slash': !hideShowEye('event-' + event.pid)}"
+            (click)="hideShowEvent('event-' + event.pid)"></i>
+        }
+      </div>
+      <div id="event-{{ event.pid }}" class="my-2" [hidden]="true">
+        @if (event.note) {
+          <div class="grid">
+            <div class="col-3">
+              <i class="fa fa-comment-o"></i>&nbsp;
+              {{ 'Note' | translate }}
+            </div>
+            <div class="col-8">{{ event.note }}</div>
+          </div>
+        }
+        @if (event.operator) {
+          @if (event.operator.pid | getRecord:'patrons' | async; as operator) {
+            <div class="grid">
+              <div class="col-3">
+                <i class="fa fa-user"></i>&nbsp;
+                {{ 'Operator' | translate }}
+              </div>
+              <div class="col-8">
+                @if ($any(operator).metadata.last_name) {
+                  {{ $any(operator).metadata.last_name }}
+                }
+                @if ($any(operator).metadata.last_name && $any(operator).metadata.first_name) {
+                  ,
+                }
+                @if ($any(operator).metadata.first_name) {
+                  {{ $any(operator).metadata.first_name }}
+                }
+              </div>
+            </div>
+          }
+        }
+        @if (event.library) {
+          @if (event.library.pid | getRecord:'libraries' | async; as library) {
+            <div class="grid">
+              <div class="col-3">
+                <i class="fa fa-map-marker"></i>&nbsp;
+                {{ 'Library' | translate }}
+              </div>
+              <div class="col-8">{{ $any(library).metadata.name }}</div>
+            </div>
+          }
+        }
+        @if (event.steps) {
+          @for (step of event.steps; track step; let first = $first) {
+            <div class="grid mb-1">
+              <div class="col-3" [class.label-title]="first">
+                @if (first) {
+                  <i class="fa fa-cubes"></i>&nbsp;
+                  {{ 'Steps' | translate }}
+                }
+              </div>
+              <div class="col-7">{{ step.timestamp | dateTranslate: 'shortDate' }}</div>
+              <div class="col-2">
+                @if (event.type !== patronTransactionEventType.DISPUTE) {
+                  <p-tag
+                    [value]="step.amount | currency: organisation.default_currency"
+                    [severity]="tagSeverity(event)"
+                  />
+                }
+              </div>
+            </div>
+          }
+        }
+      </div>
+  </ng-template>
+
+  <ng-template pTemplate="opposite" let-event>
+    <small class="p-text-secondary">
+      <i class="fa fa-calendar-o"></i> {{ event.creation_date | dateTranslate: 'shortDate' }}
+      <i class="fa fa-clock-o pl-1"></i> {{ event.creation_date | dateTranslate: 'HH:mm:ss' }}
+    </small>
+  </ng-template>
+</p-timeline>
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction-history/patron-transaction-history.component.spec.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction-history/patron-transaction-history.component.spec.ts
new file mode 100644
index 000000000..621919342
--- /dev/null
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction-history/patron-transaction-history.component.spec.ts
@@ -0,0 +1,39 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2019-2025 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 { PatronTransactionHistoryComponent } from './patron-transaction-history.component';
+
+describe('PatronTransactionHistoryComponent', () => {
+  let component: PatronTransactionHistoryComponent;
+  let fixture: ComponentFixture<PatronTransactionHistoryComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PatronTransactionHistoryComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(PatronTransactionHistoryComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction-history/patron-transaction-history.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction-history/patron-transaction-history.component.ts
new file mode 100644
index 000000000..5806e3db2
--- /dev/null
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction-history/patron-transaction-history.component.ts
@@ -0,0 +1,64 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2019-2025 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+import { Component, inject, input } from '@angular/core';
+import { PatronTransactionEventType } from '@app/admin/classes/patron-transaction';
+import { OrganisationService } from '@app/admin/service/organisation.service';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'admin-patron-transaction-history',
+  templateUrl: './patron-transaction-history.component.html'
+})
+export class PatronTransactionHistoryComponent {
+
+  private translateService: TranslateService = inject(TranslateService);
+  private organisationService: OrganisationService = inject(OrganisationService);
+
+  events = input.required<[]>();
+
+  patronTransactionEventType = PatronTransactionEventType;
+
+  get organisation() {
+    return this.organisationService.organisation;
+  }
+
+  eventLabel(event: any): string {
+    return (event.subtype)
+      ? `${this.translateService.instant(event.type.toString())} [${this.translateService.instant(event.subtype)}]`
+      : this.translateService.instant(event.type.toString());
+  }
+
+  tagSeverity(event: any) {
+    switch(event.type) {
+      case this.patronTransactionEventType.FEE:
+        return 'danger';
+      case this.patronTransactionEventType.PAYMENT:
+        return 'success';
+      case this.patronTransactionEventType.CANCEL:
+        return 'info';
+    }
+  }
+
+  hideShowEye(event: string): boolean {
+    return document.getElementById(event).hidden;
+  }
+
+  hideShowEvent(event: string): void {
+    const element = document.getElementById(event);
+    element.hidden = !element.hidden;
+  }
+}
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.html b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.html
index 200725bb6..fbfe3529f 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.html
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2021-2024 RERO
+  Copyright (C) 2021-2025 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,20 +15,22 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (transaction !== undefined) {
-  <div [ngClass]="{ 'callout callout-warning': isDisputed(), 'border rounded': !isDisputed()}" class="col mr-1 p-2">
-    <div class="row">
-      <div class="col-lg-2">
+  <div [ngClass]="{ 'callout callout-warning': isDisputed(), 'border rounded': !isDisputed()}" class="mr-1 p-2">
+    <div class="grid grid-nogutter align-items-start">
+      <div class="col-2 flex gap-2">
         <shared-open-close-button (status)="isCollapsed = $event" />
-        {{ transaction.creation_date | dateTranslate :'shortDate' }}
+        <div>
+          {{ transaction.creation_date | dateTranslate :'shortDate' }}
+        </div>
       </div>
-      <div class="col-lg-4 d-inline-block text-truncate">{{ transaction.type | translate }}</div>
-      <div class="col-lg-3 d-inline-block text-truncate">
+      <div class="col-3">{{ transaction.type | translate }}</div>
+      <div class="col-3">
         @if (transaction.library) {
           <span>{{ transaction.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}</span>
         }
       </div>
-      <div class="col-lg-2 text-lg-right">{{ transactionAmount | currency: organisation.default_currency }}</div>
-      <div class="col-md-1 text-left pl-0 mb-2" dropdown>
+      <div class="col-2 flex justify-content-end">{{ transactionAmount | currency: organisation.default_currency }}</div>
+      <div class="col-2 flex justify-content-end" dropdown>
         @if (transaction.status === patronTransactionStatus.OPEN) {
           <p-dropdown
             [placeholder]="'Action'|translate"
@@ -43,17 +45,13 @@
       <div class="mt-2">
         <!-- Transaction detail -->
         <h6 translate>Details</h6>
-        <section class="offset-md-1 mb-3" [ngSwitch]="transaction?.type">
+        <section class="mb-3" [ngSwitch]="transaction?.type">
           <admin-overdue-transaction-detail [transaction]="transaction" *ngSwitchCase="'overdue'" />
           <admin-default-transaction-detail [transaction]="transaction" *ngSwitchDefault />
         </section>
         <!-- Transaction history -->
         <h6 translate>Transaction history</h6>
-        <div class="events-timeline">
-          @for (event of transaction.get_events(); track event) {
-            <admin-patron-transaction-event [event]="event" class="row pl-2 pr-2 align-items-start timeline-event" />
-          }
-        </div>
+        <admin-patron-transaction-history [events]="transaction.get_events()" />
       </div>
     }
   </div>
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.ts
index b9d971d99..b23069f99 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.ts
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transaction/patron-transaction.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2024 RERO
+ * Copyright (C) 2021-2025 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -54,6 +54,9 @@ export class PatronTransactionComponent implements OnInit {
   menuItems: MenuItem[] = [];
   menuSelectedAction = undefined;
 
+  /** store a reference to enum to use in html template */
+  patronTransactionEventType = PatronTransactionEventType;
+
   // GETTER & SETTER ================================================
   /** get the total amount for a patron transaction :
    *  If transaction is still open, then return the total transaction amount
@@ -119,6 +122,7 @@ export class PatronTransactionComponent implements OnInit {
   patronTransactionAction(action: string, mode?: string): void {
     this.dialogService.open(PatronTransactionEventFormComponent, {
       header: this.translateService.instant(action),
+      focusOnShow: false,
       width: '40vw',
       data: {
         action,
@@ -151,4 +155,30 @@ export class PatronTransactionComponent implements OnInit {
       }
     ];
   }
+
+  eventLabel(event: any): string {
+    return (event.subtype)
+      ? `${this.translateService.instant(event.type.toString())} [${this.translateService.instant(event.subtype)}]`
+      : this.translateService.instant(event.type.toString());
+  }
+
+  tagSeverity(event: any) {
+    switch(event.type) {
+      case this.patronTransactionEventType.FEE:
+        return 'danger';
+      case this.patronTransactionEventType.PAYMENT:
+        return 'success';
+      case this.patronTransactionEventType.CANCEL:
+        return 'info';
+    }
+  }
+
+  hideShowEye(event: string): boolean {
+    return document.getElementById(event).hidden;
+  }
+
+  hideShowEvent(event: string): void {
+    const element = document.getElementById(event);
+    element.hidden = !element.hidden;
+  }
 }
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.html b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.html
index 65cb5f2ff..1305c3680 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.html
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.html
@@ -1,6 +1,6 @@
 <!--
  RERO ILS UI
-  Copyright (C) 2020-2024 RERO
+  Copyright (C) 2020-2025 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,33 +15,32 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <section class="content">
-  <p-tabView (onChange)="tabChange($event)">
-    <p-tabPanel>
+  <p-accordion [activeIndex]="0" (onOpen)="accordionOpen($event)">
+    <p-accordionTab>
       <ng-template pTemplate="header">
-        <span translate>Engaged fees</span>
-        @if (statistics()['fees'] > 0) {
-          <p-tag severity="warning" class="ml-2">
-            {{ statistics()['fees'] | currency: organisation.default_currency }}
-          </p-tag>
-        }
+        <div class="flex w-full">
+          <h6 class="flex flex-grow-1" translate>Engaged fees</h6>
+          @if (statistics()['fees_engaged'] > 0) {
+            <p-tag severity="warning" class="mr-2">
+              {{ statistics()['fees_engaged'] | currency: organisation.default_currency }}
+            </p-tag>
+          }
+        </div>
       </ng-template>
-      <div class="text-right my-2">
-        <p-button
-          icon="fa fa-plus"
-          [label]="'Add a fee'|translate"
-          (onClick)="addFee()"
-        />
+      <div class="flex justify-content-end my-2">
+        <p-button size="small" icon="fa fa-plus" [label]="'Add a fee'|translate" (onClick)="addFee()" />
       </div>
       @if (tabs.engagedFees.transactions.length > 0) {
-        <div class="row mb-1 d-flex align-items-center bg-dark text-white rounded">
-          <div class="col-2 pl-20" translate>Date</div>
-          <div class="col-4" translate>Category</div>
+        <div class="grid grid-nogutter p-3 m-1 text-lg font-bold align-items-center border-top-1 border-bottom-1 surface-border">
+          <div class="col-2" translate>Date</div>
+          <div class="col-3" translate>Category</div>
           <div class="col-3" translate>Library</div>
-          <div class="col-2 text-right">
-            {{ 'Total amount' | translate }}: {{ statistics()['fees'] | currency: organisation.default_currency }}
+          <div class="col-2 text-right pr-2">
+            {{ 'Total amount' | translate }}: {{ statistics()['fees_engaged'] | currency: organisation.default_currency }}
           </div>
-          <div class="col-1 pl-0">
+          <div class="col-2 flex justify-content-end">
             <p-splitButton
+              size="sm"
               [label]="'Pay all'|translate"
               [disabled]="tabs.engagedFees.totalAmount <= 0"
               [model]="actions"
@@ -49,56 +48,71 @@
             />
           </div>
         </div>
-        @for (t of tabs.engagedFees.transactions; track t) {
-          <admin-patron-transaction [transaction]="t" class="row mb-1" />
-        }
+        <div class="alternate-color">
+          @for (t of tabs.engagedFees.transactions; track t) {
+            <admin-patron-transaction [transaction]="t" />
+          }
+        </div>
       } @else {
-        {{ 'No pending fee for this patron' | translate }}
+        <div class="mt-3 font-bold">
+          {{ 'No pending fee for this patron' | translate }}
+        </div>
       }
-    </p-tabPanel>
+    </p-accordionTab>
 
-    <p-tabPanel>
+    <p-accordionTab>
       <ng-template pTemplate="header">
-        <span translate>Overdue preview fees</span>
-        @if (tabs.overduePreviewFees.totalAmount > 0) {
-          <p-tag severity="secondary" class="ml-2">
-            {{ tabs.overduePreviewFees.totalAmount | currency: organisation.default_currency }}
-          </p-tag>
-        }
+        <div class="flex w-full">
+          <h6 class="flex flex-grow-1" translate>Overdue preview fees</h6>
+          @if (tabs.overduePreviewFees.totalAmount > 0) {
+            <p-tag severity="secondary" class="mr-2">
+              {{ tabs.overduePreviewFees.totalAmount | currency: organisation.default_currency }}
+            </p-tag>
+          }
+        </div>
       </ng-template>
       @if (tabs.overduePreviewFees.transactions.length > 0) {
-        <div class="row mb-1 d-flex align-items-center bg-dark text-white rounded">
-          <div class="col-2 pl-20 my-2" translate>Due date</div>
+        <div class="grid grid-nogutter p-3 m-1 text-lg font-bold align-items-center border-top-1 border-bottom-1 surface-border">
+          <div class="col-2" translate>Due date</div>
           <div class="col-7" translate>Document</div>
           <div class="col-2 text-right">
             {{ 'Total amount' | translate }}: {{ tabs.overduePreviewFees.totalAmount | currency: organisation.default_currency }}
           </div>
           <div class="col-1"></div>
         </div>
-        @for (t of tabs.overduePreviewFees.transactions; track t) {
-          <admin-overdue-transaction [transaction]="t" class="row mb-1" />
-        }
+        <div class="alternate-color">
+          @for (t of tabs.overduePreviewFees.transactions; track t) {
+            <admin-overdue-transaction [transaction]="t" />
+          }
+        </div>
       } @else {
-        {{ 'No overdue fees for this patron' | translate }}
+        <div class="mt-3 font-bold">
+          {{ 'No overdue fees for this patron' | translate }}
+        </div>
       }
-    </p-tabPanel>
+    </p-accordionTab>
 
-    <p-tabPanel>
+    <p-accordionTab>
       <ng-template pTemplate="header">
-        <span translate>History</span>
+        <h6 translate>History</h6>
       </ng-template>
       @if (tabs.historyFees.transactions !== null && tabs.historyFees.transactions.length > 0) {
-        <div class="row mb-1 d-flex align-items-center bg-dark text-white rounded">
-          <div class="col-2 pl-20 my-2" translate>Date</div>
-          <div class="col-4" translate>Category</div>
-          <div class="col-5" translate>Library</div>
+        <div class="grid grid-nogutter p-3 m-1 text-lg font-bold align-items-center border-top-1 border-bottom-1 surface-border">
+          <div class="col-2" translate>Date</div>
+          <div class="col-3" translate>Category</div>
+          <div class="col-3" translate>Library</div>
+          <div class="col-2 flex justify-content-end" translate>Amount</div>
+        </div>
+        <div class="alternate-color">
+          @for (t of tabs.historyFees.transactions; track t) {
+            <admin-patron-transaction [transaction]="t" />
+          }
         </div>
-        @for (t of tabs.historyFees.transactions; track t) {
-          <admin-patron-transaction class="row mb-1 align-items-start" [transaction]="t" />
-        }
       } @else {
-        {{ 'No fee history for this patron' | translate }}
+        <div class="mt-3 font-bold">
+          {{ 'No fee history for this patron' | translate }}
+        </div>
       }
-    </p-tabPanel>
-  </p-tabView>
+    </p-accordionTab>
+  </p-accordion>
 </section>
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.scss b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.scss
deleted file mode 100644
index 98691563d..000000000
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.scss
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2021 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import '../../../scss/variables';
-
-.vertical-tabs-panes{
-  min-height: 400px;
-  margin: map_get($spacers, 3);
-
-  .tabs-list{
-
-    padding: 0;
-    border-right: 1px solid $border-color;
-
-    ul {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-
-      li{
-        padding: map-get($spacers, 1);
-        border-bottom: 1px solid $border-color;
-        border-right: 1px solid $border-color;
-        margin-right: -1px;
-
-        .btn {
-          text-align: left;
-          strong {
-            text-transform: uppercase;
-            font-size: 0.75rem;
-          }
-          .float-right{
-            margin-top: map-get($spacers, 1);
-          }
-          .badge{
-            font-weight: normal !important;
-          }
-          .badge-secondary.badge-opacity-30{
-            background-color: rgba($secondary, .3);
-          }
-          &:focus{
-            box-shadow: none;
-          }
-          &:hover{
-            text-decoration: none;
-            color: $link-color;
-          }
-        }
-
-        &.open-tab {
-          background-color: white;
-          border-right-color: white;
-        }
-        &:not(.open-tab):hover {
-          background-color: #DDD;
-        }
-      }
-
-    }
-  }
-
-  .tabs-content {
-    padding: map_get($spacers, 2) map-get($spacers, 4);
-  }
-}
diff --git a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.ts b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.ts
index a533320c6..267651191 100644
--- a/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.ts
+++ b/projects/admin/src/app/circulation/patron/patron-transactions/patron-transactions.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021-2024 RERO
+ * Copyright (C) 2021-2025 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
@@ -24,17 +24,16 @@ import { TranslateService } from '@ngx-translate/core';
 import { UserService } from '@rero/shared';
 import { MenuItem } from 'primeng/api';
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { TabViewChangeEvent } from 'primeng/tabview';
 import { Subscription } from 'rxjs';
 import { CirculationService } from '../../services/circulation.service';
 import { PatronTransactionService } from '../../services/patron-transaction.service';
 import { PatronFeeComponent } from './patron-fee/patron-fee.component';
 import { PatronTransactionEventFormComponent } from './patron-transaction-event-form/patron-transaction-event-form.component';
+import { AccordionTabOpenEvent } from 'primeng/accordion';
 
 @Component({
   selector: 'admin-patron-transactions',
-  templateUrl: './patron-transactions.component.html',
-  styleUrls: ['./patron-transactions.component.scss']
+  templateUrl: './patron-transactions.component.html'
 })
 export class PatronTransactionsComponent implements OnInit, OnDestroy {
 
@@ -138,8 +137,9 @@ export class PatronTransactionsComponent implements OnInit, OnDestroy {
     ];
   }
 
-  tabChange(event: TabViewChangeEvent) {
-    if (event.index !== 0) {
+  accordionOpen(event: AccordionTabOpenEvent): void {
+    // 2 = Transaction history
+    if (event.index === 2) {
       this.loadFeesHistory();
     }
   }
@@ -160,6 +160,7 @@ export class PatronTransactionsComponent implements OnInit, OnDestroy {
   payAllTransactions(): void {
     this.dialogService.open(PatronTransactionEventFormComponent, {
       header: this.translateService.instant('Pay'),
+      focusOnShow: false,
       width: '50vw',
       data: {
         action: 'pay',
@@ -173,6 +174,7 @@ export class PatronTransactionsComponent implements OnInit, OnDestroy {
   payAllTransactionsInMyLibrary(): void {
     this.dialogService.open(PatronTransactionEventFormComponent, {
       header: this.translateService.instant('Pay for my library'),
+      focusOnShow: false,
       width: '50vw',
       data: {
         action: 'pay',
@@ -186,6 +188,7 @@ export class PatronTransactionsComponent implements OnInit, OnDestroy {
   addFee(): void {
     this.dynamicDialogRef = this.dialogService.open(PatronFeeComponent, {
       header: this.translateService.instant('New fee'),
+      focusOnShow: false,
       width: '30vw',
       data: {
         patronPid: this.patron.pid,
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 9a2265f31..dca573737 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
@@ -15,45 +15,48 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (item && document) {
-  <!-- FIRST ROW : barcode, title, availability, action button -->
-  <div class="col-2">
-    <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) {
-      <a [routerLink]="['/records', 'documents', 'detail', document.pid]">
-        {{ title }}
-      </a>
-      @if (item.enumerationAndChronology) {
-        <span class="badge badge-info">{{ item.enumerationAndChronology }}</span>
+  <div class="grid grid-nogutter p-2">
+    <!-- FIRST ROW : barcode, title, availability, action button -->
+    <div class="col-3 flex align-items-start gap-2">
+      <div>
+        <shared-open-close-button (status)="isCollapsed = $event" />
+      </div>
+      <div>
+        <a [routerLink]="['/records', 'items', 'detail', item.pid]">{{ item.barcode }}</a>
+      </div>
+    </div>
+    <div class="col-6">
+      @if (document.title | mainTitle; as title) {
+        <a [routerLink]="['/records', 'documents', 'detail', document.pid]">
+          {{ title }}
+        </a>
+        @if (item.enumerationAndChronology) {
+          <p-tag severity="info" [value]="item.enumerationAndChronology" />
+        }
+        <br/>
       }
-      <br/>
-    }
-    <shared-contribution [contributions]="document?.contribution" />
-  </div>
-  <div class="col-2">{{ loan.created | dateTranslate: 'short' }}</div>
-  <div class="col-2">-<!-- TODO :: display the computed expected_date --></div>
-  <div class="col-1 text-right">
-    <admin-cancel-request-button [loan]="loan" (cancelRequestEvent)="cancelRequest($event)" />
-  </div>
-  <!-- SECOND ROW: item detail -->
-  @if (!isCollapsed) {
-    <div class="col-12">
-      <dl class="grid">
-        <!-- position into queue -->
-        <dt class="offset-1 col-1 label-title" translate>Position</dt>
-        <dd class="col-10">
-          <p-badge severity="info" value="{{ loan.metadata.rank }} / {{ item.current_pending_requests }}" />
-        </dd>
-        <!-- item location -->
-        @if (item.location.pid | getRecord: 'locations' | async; as location) {
-          <dt class="offset-1 col-1 label-title" translate>Location</dt>
-          <dd class="col-10">
-            {{ $any(location).metadata.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}: {{ item.location.name }}
+      <shared-contribution [contributions]="document?.contribution" />
+
+      @if (!isCollapsed) {
+        <dl class="metadata pl-0">
+          <!-- position into queue -->
+          <dt translate>Position</dt>
+          <dd>
+            <p-badge severity="info" value="{{ loan.metadata.rank }} / {{ item.current_pending_requests }}" />
           </dd>
-        }
-      </dl>
+          <!-- item location -->
+          @if (item.location.pid | getRecord: 'locations' | async; as location) {
+            <dt translate>Location</dt>
+            <dd>
+              {{ $any(location).metadata.library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}: {{ item.location.name }}
+            </dd>
+          }
+        </dl>
+      }
     </div>
-  }
+    <div class="col-2">{{ loan.created | dateTranslate: 'short' }}</div>
+    <div class="col-1 flex justify-content-end">
+      <admin-cancel-request-button [loan]="loan" (cancelRequestEvent)="cancelRequest($event)" />
+    </div>
+  </div>
 }
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 eba34eaff..35036c882 100644
--- a/projects/admin/src/app/circulation/patron/pending/pending.component.html
+++ b/projects/admin/src/app/circulation/patron/pending/pending.component.html
@@ -1,6 +1,6 @@
 <!--
  RERO ILS UI
- Copyright (C) 2020-2024 RERO
+ Copyright (C) 2020-2025 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,31 @@
  You 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">
-  @if (loans && loans.length > 0) {
-    <div>
-      <!-- HEADER -->
-      <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>
+@defer(when loans) {
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+      <div class="grid grid-nogutter py-3 px-2 m-1 text-lg font-bold align-items-center border-bottom-1 surface-border">
+        <div class="col-3" translate>Item</div>
+        <div class="col-6" translate>Title</div>
         <div class="col-2" translate>Request date</div>
-        <div class="col-2" translate>Expected availability</div>
-        <div class="col-1" translate>&nbsp;</div>
       </div>
-      @for (loan of loans; track loan) {
-        <div>
+    </ng-template>
+    @if (loans.length > 0) {
+      <div class="alternate-color">
+        @for (loan of loans; track loan) {
           <admin-pending-item
-            class="row p-2 mb-1 border rounded align-middle"
             [loan]="loan"
             (cancelRequestEvent)="cancelRequest($event)"
           />
-        </div>
-      }
-    </div>
-  } @else {
-    {{ 'No items' | translate }}
-  }
-</section>
+        }
+      </div>
+    } @else {
+      <div class="mx-3 my-4 font-bold" translate>
+        No items
+      </div>
+    }
+  </p-card>
+} @placeholder {
+  <div class="font-bold mx-2 my-4" translate>Loading in progress</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 18ca2ca79..8337eb89c 100644
--- a/projects/admin/src/app/circulation/patron/pending/pending.component.ts
+++ b/projects/admin/src/app/circulation/patron/pending/pending.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2024 RERO
+ * Copyright (C) 2020-2025 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,6 +17,7 @@
 
 import { Component, inject, OnInit } from '@angular/core';
 import { PatronService } from '../../../service/patron.service';
+import { CirculationStatistics } from '../../circulationStatistics';
 import { CirculationService } from '../../services/circulation.service';
 
 @Component({
@@ -54,7 +55,6 @@ 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.statisticsDecrease('pending', 1);
-    //this.circulationService.circulationInformations.statistics['pending'] -= 1;
+    this.circulationService.statisticsDecrease(CirculationStatistics.PENDING, 1);
   }
 }
diff --git a/projects/admin/src/app/circulation/patron/pickup/pickup-item/pickup-item.component.html b/projects/admin/src/app/circulation/patron/pickup/pickup-item/pickup-item.component.html
index 5a923f076..b716edb52 100644
--- a/projects/admin/src/app/circulation/patron/pickup/pickup-item/pickup-item.component.html
+++ b/projects/admin/src/app/circulation/patron/pickup/pickup-item/pickup-item.component.html
@@ -14,32 +14,34 @@
  You 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 (item && loan) {
-  <div class="col-2">
-    <a [routerLink]="['/records', 'items', 'detail', item.pid]">{{ item.barcode }}</a>
-  </div>
-  <div class="col-4">
-    @if (document.title | mainTitle; as title) {
-      <a [routerLink]="['/records', 'documents', 'detail', document.pid]">
-        {{ title }}
-      </a>
-      @if (item.enumerationAndChronology) {
-        <span class="badge badge-info">{{ item.enumerationAndChronology }}</span>
-      }<br/>
-    }
-    <shared-contribution [contributions]="document?.contribution" />
-  </div>
-  <div class="col-3">
-    {{ loan.metadata.pickup_location_pid | getRecord: 'locations' : 'field' : 'pickup_name' | async }}
-  </div>
-  <div class="col-2">
-    @if (loan.metadata.request_expire_date) {
-      {{ loan.metadata.request_expire_date | dateTranslate:'shortDate' }}
-    } @else {
-      {{ 'Unknown' | translate }}
-    }
-  </div>
-  <div class="col-1 text-right">
-    <admin-cancel-request-button [loan]="loan" (cancelRequestEvent)="cancelRequest($event)" />
+@if (item) {
+  <div class="grid grid-nogutter p-2">
+    <div class="col-2">
+      <a [routerLink]="['/records', 'items', 'detail', item.pid]">{{ item.barcode }}</a>
+    </div>
+    <div class="col-4">
+      @if (document.title | mainTitle; as title) {
+        <a [routerLink]="['/records', 'documents', 'detail', document.pid]">
+          {{ title }}
+        </a>
+        @if (item.enumerationAndChronology) {
+          <p-tag severity="info" [value]="item.enumerationAndChronology" />
+        }<br/>
+      }
+      <shared-contribution [contributions]="document?.contribution" />
+    </div>
+    <div class="col-3">
+      {{ loan.metadata.pickup_location_pid | getRecord: 'locations' : 'field' : 'pickup_name' | async }}
+    </div>
+    <div class="col-2">
+      @if (loan.metadata.request_expire_date) {
+        {{ loan.metadata.request_expire_date | dateTranslate:'shortDate' }}
+      } @else {
+        {{ 'Unknown' | translate }}
+      }
+    </div>
+    <div class="col-1 flex justify-content-end">
+      <admin-cancel-request-button [loan]="loan" (cancelRequestEvent)="cancelRequest($event)" />
+    </div>
   </div>
 }
diff --git a/projects/admin/src/app/circulation/patron/pickup/pickup.component.html b/projects/admin/src/app/circulation/patron/pickup/pickup.component.html
index 8949f7df8..b54704c94 100644
--- a/projects/admin/src/app/circulation/patron/pickup/pickup.component.html
+++ b/projects/admin/src/app/circulation/patron/pickup/pickup.component.html
@@ -14,26 +14,31 @@
  You 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">
-  @if (loans && loans.length > 0) {
-    <div>
-      <!-- HEADER -->
-      <div class="row p-2 mb-1 bg-dark rounded text-light row">
+@defer(when loans) {
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+      <div class="grid grid-nogutter p-3 m-1 text-lg font-bold align-items-center border-bottom-1 surface-border">
         <div class="col-2" translate>Item</div>
         <div class="col-4" translate>Title</div>
         <div class="col-3" translate>Pickup location</div>
         <div class="col-2" translate>To pick-up until</div>
-        <div class="col-1">&nbsp;</div>
       </div>
-      @for (loan of loans; track loan) {
-        <admin-pickup-item
-          [loan]="loan"
-          class="row p-2 mb-1 border rounded align-middle"
-          (cancelRequestEvent)="cancelRequest($event)"
-        />
-      }
-    </div>
-  } @else {
-    {{ 'No items' | translate }}
-  }
-</section>
+    </ng-template>
+    @if (loans.length > 0) {
+      <div class="alternate-color">
+        @for (loan of loans; track loan) {
+          <admin-pickup-item
+            [loan]="loan"
+            (cancelRequestEvent)="cancelRequest($event)"
+          />
+        }
+      </div>
+    } @else {
+      <div class="mx-3 my-4 font-bold" translate>
+        No items
+      </div>
+    }
+  </p-card>
+} @placeholder {
+  <div class="font-bold mx-2 my-4" translate>Loading in progress</div>
+}
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 fd254e435..8a7f42605 100644
--- a/projects/admin/src/app/circulation/patron/pickup/pickup.component.ts
+++ b/projects/admin/src/app/circulation/patron/pickup/pickup.component.ts
@@ -17,6 +17,7 @@
 
 import { Component, inject, OnInit } from '@angular/core';
 import { PatronService } from '../../../service/patron.service';
+import { CirculationStatistics } from '../../circulationStatistics';
 import { CirculationService } from '../../services/circulation.service';
 
 @Component({
@@ -52,6 +53,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.statisticsDecrease('pickup', 1);
+    this.circulationService.statisticsDecrease(CirculationStatistics.PICKUP, 1);
   }
 }
diff --git a/projects/admin/src/app/circulation/patron/profile/profile.component.html b/projects/admin/src/app/circulation/patron/profile/profile.component.html
index 3825e4f1c..5a5262ff3 100644
--- a/projects/admin/src/app/circulation/patron/profile/profile.component.html
+++ b/projects/admin/src/app/circulation/patron/profile/profile.component.html
@@ -1,6 +1,6 @@
 <!--
   RERO ILS UI
-  Copyright (C) 2020-2024 RERO
+  Copyright (C) 2020-2025 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,234 +14,171 @@
   You 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 (currentPatron$ | async; as patron) {
-  <article>
-    <section class="m-2 p-2">
-      <!-- USERNAME -->
-      <dl class="row mb-0">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Username</dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          {{ $any(patron).username }}
-        </dd>
-      </dl>
-      <!-- STREET -->
-      <dl class="row mb-0">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Street</dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          {{ $any(patron).street }}
-        </dd>
-      </dl>
-      <!-- CITY -->
-      <dl class="row mb-0">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>City</dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          {{ $any(patron).postal_code }} {{ $any(patron).city }}
+@defer(when patron) {
+  <dl class="metadata">
+    <dt translate>Username</dt>
+    <dd>
+      {{ $any(patron).username }}
+    </dd>
+    <dt translate>Street</dt>
+    <dd>
+      {{ $any(patron).street }}
+    </dd>
+    <dt translate>City</dt>
+    <dd>
+      {{ $any(patron).postal_code }} {{ $any(patron).city }}
+    </dd>
+    @if ($any(patron).country) {
+      <dt translate>Country</dt>
+      <dd>
+        {{ 'country_' + $any(patron).country | translate }}
+      </dd>
+    }
+    @if ($any(patron).home_phone) {
+      <dt translate>Home phone number</dt>
+      <dd>
+        {{ $any(patron).home_phone }}
+      </dd>
+    }
+    @if ($any(patron).business_phone) {
+      <dt translate>Business phone number</dt>
+      <dd>
+        {{ $any(patron).business_phone }}
+      </dd>
+    }
+    @if ($any(patron).mobile_phone) {
+      <dt translate>Mobile phone</dt>
+      <dd>
+        {{ $any(patron).mobile_phone }}
+      </dd>
+    }
+    @if ($any(patron).other_phone) {
+      <dt translate>Other phone</dt>
+      <dd>
+        {{ $any(patron).other_phone }}
+      </dd>
+    }
+    @if ($any(patron).email) {
+      <dt>Email</dt>
+      <dd>
+        {{ $any(patron).email }}
+      </dd>
+    }
+    @if ($any(patron).source) {
+      <dt translate>Source</dt>
+      <dd>
+        {{ $any(patron).source }}
+      </dd>
+    }
+    @if ($any(patron).local_code) {
+      <dt translate>Local code</dt>
+      <dd>
+        {{ $any(patron).local_code }}
+      </dd>
+    }
+    <dt translate>Keep history</dt>
+    <dd>
+      <i class="fa" [ngClass]="$any(patron).keep_history ? 'fa-check text-success' : 'fa-times text-error'"
+        aria-hidden="true">
+      </i>
+    </dd>
+  </dl>
+
+  @if ($any(patron).second_address) {
+    <h4 class="mt-3" translate>Second address</h4>
+    <dl class="metadata">
+      @if ($any(patron).second_address.street) {
+        <dt translate>Street</dt>
+        <dd>
+          {{ $any(patron).second_address.street }}
         </dd>
-      </dl>
-      <!-- Country -->
-      @if ($any(patron).country) {
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Country</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ 'country_' + $any(patron).country | translate }}
-          </dd>
-        </dl>
-      }
-      <!-- PHONE -->
-      @if ($any(patron).home_phone) {
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Home phone number</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ $any(patron).home_phone }}
-          </dd>
-        </dl>
-      }
-      @if ($any(patron).business_phone) {
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Business phone number</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ $any(patron).business_phone }}
-          </dd>
-        </dl>
-      }
-      @if ($any(patron).mobile_phone) {
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Mobile phone</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ $any(patron).mobile_phone }}
-          </dd>
-        </dl>
-      }
-      @if ($any(patron).other_phone) {
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Other phone</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ $any(patron).other_phone }}
-          </dd>
-        </dl>
-      }
-      <!-- EMAIL -->
-      @if ($any(patron).email) {
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title">Email</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ $any(patron).email }}
-          </dd>
-        </dl>
       }
-      <!-- SOURCE -->
-      @if ($any(patron).source) {
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Source</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ $any(patron).source }}
-          </dd>
-        </dl>
-      }
-      <!-- Local Code -->
-      @if ($any(patron).local_code) {
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Local code</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ $any(patron).local_code }}
-          </dd>
-        </dl>
+      @if ($any(patron).second_address.postal_code ||  $any(patron).second_address.city) {
+        <dt translate>City</dt>
+        <dd>
+          @if ($any(patron).second_address.postal_code) {
+            {{ $any(patron).second_address.postal_code }}
+          }
+          @if ($any(patron).second_address.city) {
+            {{ $any(patron).second_address.city }}
+          }
+        </dd>
       }
-      <!-- Keep history -->
-      <dl class="row mb-0">
-        <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Keep history</dt>
-        <dd class="col-sm-7 col-md-8 mb-0">
-          <i class="fa" [ngClass]="$any(patron).keep_history ? 'fa-check text-success' : 'fa-times text-danger'"
-            aria-hidden="true">
-          </i>
+      @if ($any(patron).second_address.country) {
+        <dt translate>Country</dt>
+        <dd>
+          {{ 'country_' + $any(patron).second_address.country | translate }}
         </dd>
-      </dl>
-      @if (canUpdate()) {
-        <p-button
-          id="profile-change-password-button"
-          outlined
-          [label]="'Change Password'|translate"
-          (onClick)="updatePatronPassword(patron)"
-        />
       }
-    </section>
+    </dl>
+  }
 
-    @if ($any(patron).second_address) {
-      <section class="m-2 p-2">
-        <h5 class="mb-0" translate>Second address</h5>
-        <!-- STREET -->
-        @if ($any(patron).second_address.street) {
-          <dl class="row mb-0">
-            <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Street</dt>
-            <dd class="col-sm-7 col-md-8 mb-0">
-              {{ $any(patron).second_address.street }}
-            </dd>
-          </dl>
-        }
-        <!-- CITY -->
-        @if ($any(patron).second_address.postal_code ||  $any(patron).second_address.city) {
-          <dl class="row mb-0">
-            <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>City</dt>
-            <dd class="col-sm-7 col-md-8 mb-0">
-              @if ($any(patron).second_address.postal_code) {
-                {{ $any(patron).second_address.postal_code }}
-              }
-              @if ($any(patron).second_address.city) {
-                {{ $any(patron).second_address.city }}
-              }
-            </dd>
-          </dl>
-        }
-        <!-- Country -->
-        @if ($any(patron).second_address.country) {
-          <dl class="row mb-0">
-            <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Country</dt>
-            <dd class="col-sm-7 col-md-8 mb-0">
-              {{ 'country_' + $any(patron).second_address.country | translate }}
-            </dd>
-          </dl>
+  @if ($any(patron).isLibrarian) {
+    <h4 class="mt-3" translate>Librarian Information</h4>
+    <dl class="metadata">
+      <dt translate>Library</dt>
+      <dd>
+        {{ $any(patron).library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
+      </dd>
+    </dl>
+  }
+  @if ($any(patron).patron) {
+    <h4 class="mt-3" translate>Patron Information</h4>
+    <dl class="metadata">
+      <dt>
+        <span [ngPlural]="$any(patron).roles.length">
+          <ng-template ngPluralCase="0" translate>Role</ng-template>
+          <ng-template ngPluralCase="=1" translate>Role</ng-template>
+          <ng-template ngPluralCase="other" translate>Roles</ng-template>
+        </span>
+      </dt>
+      <dd>
+        @for (role of $any(patron).roles; track role; let last=$last) {
+          {{ role | translate }}{{ last ? '' : ', ' }}
         }
-      </section>
-    }
-
-    @if ($any(patron).isLibrarian) {
-      <section class="m-2 p-2">
-        <h5 class="mb-0" translate>Librarian Information</h5>
-        <!-- 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">
-            {{ $any(patron).library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}
-          </dd>
-        </dl>
-      </section>
-    }
-    @if ($any(patron).patron) {
-      <section class="m-2 p-2">
-        <h5 class="mb-0" translate>Patron Information</h5>
-        <!-- ROLES -->
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title">
-            <span [ngPlural]="$any(patron).roles.length">
-              <ng-template ngPluralCase="0" translate>Role</ng-template>
-              <ng-template ngPluralCase="=1" translate>Role</ng-template>
-              <ng-template ngPluralCase="other" translate>Roles</ng-template>
-            </span>
-          </dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            @for (role of $any(patron).roles; track role; let last=$last) {
-              {{ role | translate }}{{ last ? '' : ', ' }}
+      </dd>
+      <dt translate>Patron's barcodes or cards number</dt>
+      <dd>
+        <a [routerLink]="['/circulation', 'patron', $any(patron).patron.barcode[0]]">
+          {{ $any(patron).patron.barcode | join: ', '}}
+        </a>
+      </dd>
+      <dt translate>Type</dt>
+      <dd>
+        {{ $any(patron).patron.type.pid | getRecord: 'patron_types' : 'field' : 'name' | async }}
+      </dd>
+      <dt translate>Account expiration</dt>
+      <dd>
+        {{ $any(patron).patron.expiration_date | dateTranslate:'mediumDate' }}
+      </dd>
+      @if ($any(patron).libraries && $any(patron).libraries.length > 0) {
+        <dt translate>Affiliation libraries</dt>
+        <dd>
+          <ul class="list-none p-0 m-0">
+            @for (library of $any(patron).libraries; track library) {
+              <li>{{ library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}</li>
             }
-          </dd>
-        </dl>
-        <!-- BARCODE -->
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Patron's barcodes or cards number</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            <a [routerLink]="['/circulation', 'patron', $any(patron).patron.barcode[0]]">
-              {{ $any(patron).patron.barcode | join: ', '}}
-            </a>
-          </dd>
-        </dl>
-        <!-- TYPE -->
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Type</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ $any(patron).patron.type.pid | getRecord: 'patron_types' : 'field' : 'name' | async }}
-          </dd>
-        </dl>
-        <!-- ACCOUNT EXPIRATION -->
-        <dl class="row mb-0">
-          <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Account expiration</dt>
-          <dd class="col-sm-7 col-md-8 mb-0">
-            {{ $any(patron).patron.expiration_date | dateTranslate:'mediumDate' }}
-          </dd>
-        </dl>
-        @if ($any(patron).libraries && $any(patron).libraries.length > 0) {
-          <dl class="row mb-0">
-            <dt class="col-sm-3 offset-sm-2 offset-md-0 label-title" translate>Affiliation libraries</dt>
-            <dd class="col-sm-7 col-md-8 mb-0">
-              <ul class="list-unstyled">
-                @for (library of $any(patron).libraries; track library) {
-                  <li>{{ library.pid | getRecord: 'libraries' : 'field' : 'name' | async }}</li>
-                }
-              </ul>
-            </dd>
-          </dl>
-        }
-      </section>
-    }
+          </ul>
+        </dd>
+      }
+    </dl>
+  }
 
-    @if (canUpdate()) {
+  @if (canUpdate()) {
+    <div class="flex gap-2 mt-3">
+      <p-button
+        id="profile-change-password-button"
+        outlined
+        [label]="'Change Password'|translate"
+        (onClick)="updatePatronPassword(patron)"
+      />
       <p-button
         id="profile-edit-button"
-        icon="fa fa-pencil"
         [label]="'Edit' | translate"
         [routerLink]="['/records','patrons','edit', $any(patron).pid]"
       />
-    }
-
-  </article>
+    </div>
+  }
+} @placeholder {
+  <div class="font-bold mx-2 my-4" translate>Loading in progress</div>
 }
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 7f035d573..6e912db57 100644
--- a/projects/admin/src/app/circulation/patron/profile/profile.component.ts
+++ b/projects/admin/src/app/circulation/patron/profile/profile.component.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2024 RERO
+ * Copyright (C) 2020-2025 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,7 +16,7 @@
  */
 import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { DialogService } from 'primeng/dynamicdialog';
-import { Subscription } from 'rxjs';
+import { Subscription, switchMap, tap } 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';
@@ -34,7 +34,7 @@ export class ProfileComponent implements OnInit, OnDestroy {
   private translateService: TranslateService = inject(TranslateService);
 
   /** Current patron */
-  currentPatron$: any;
+  patron: any;
 
   /** Observable subscription */
   private subscription = new Subscription();
@@ -42,20 +42,14 @@ export class ProfileComponent implements OnInit, OnDestroy {
   /** Patron permission */
   private permissions: any;
 
-  /**
-   * Component initialization.
-   */
   ngOnInit() {
-    this.currentPatron$ = this.patronService.currentPatron$;
-    this.subscription = this.currentPatron$.subscribe((patron: any) => {
-      if (patron && patron.pid) {
-        this.recordPermission.getPermission('patrons', patron.pid).subscribe(
-          perm => {
-            this.permissions = perm;
-          }
-        );
-      }
-    });
+    this.subscription.add(
+      this.patronService.currentPatron$.pipe(
+        tap((patron: any) => this.patron = patron),
+        switchMap((patron: any) => this.recordPermission.getPermission('patrons', patron.pid)),
+        tap(permissions => this.permissions = permissions),
+      ).subscribe()
+    );
   }
 
   /**
@@ -80,9 +74,12 @@ export class ProfileComponent implements OnInit, OnDestroy {
   updatePatronPassword(patron) {
     this.dialogService.open(ChangePasswordFormComponent, {
       header: this.translateService.instant('Update Patron Password'),
+      focusOnShow: false,
+      width: '30vw',
+      dismissableMask: true,
       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 7d9653f86..d8325c43b 100644
--- a/projects/admin/src/app/circulation/services/circulation.service.ts
+++ b/projects/admin/src/app/circulation/services/circulation.service.ts
@@ -21,7 +21,7 @@ import { Injectable, signal, WritableSignal } from '@angular/core';
 })
 export class CirculationService {
 
-  messages: WritableSignal<{type: string, content: string}[]> = signal([]);
+  messages: WritableSignal<{severity: string, detail: string}[]> = signal([]);
   statistics: WritableSignal<{[key: string]: number}> = signal({});
 
   statisticsIncrease(type: string, increment: number = 1): void {
@@ -45,7 +45,7 @@ export class CirculationService {
     this.statistics.set(stats);
   }
 
-  addCirculationMessage(message: {type: string, content: string}): void {
+  addCirculationMessage(message: {severity: string, detail: string}): void {
     this.messages.set([...this.messages(), message]);
   }
 
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 935aa385c..a51893330 100644
--- a/projects/admin/src/app/circulation/services/patron-transaction.service.ts
+++ b/projects/admin/src/app/circulation/services/patron-transaction.service.ts
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2020-2024 RERO
+ * Copyright (C) 2020 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -28,7 +28,6 @@ import { UserService } from '@rero/shared';
 import { MessageService } from 'primeng/api';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { map } from 'rxjs/operators';
-import { CirculationService } from './circulation.service';
 
 @Injectable({
   providedIn: 'root'
@@ -39,11 +38,12 @@ export class PatronTransactionService {
   private userService: UserService = inject(UserService);
   private routeToolService: RouteToolService = inject(RouteToolService);
   private translateService: TranslateService = inject(TranslateService);
-  private messageService = inject(MessageService);
-  private circulationService: CirculationService = inject(CirculationService);
+  private messageService: MessageService = inject(MessageService);
 
   /** subject containing current loaded PatronTransactions */
   patronTransactionsSubject$: BehaviorSubject<Array<PatronTransaction>> = new BehaviorSubject([]);
+  /** subject emitting accounting transaction about patron fees */
+  patronFeesOperationSubject$: Subject<number> = new Subject();
 
   /**
    * Allow to build the query to send through the API to retrieve desired data
@@ -89,7 +89,7 @@ export class PatronTransactionService {
     ).pipe(
       map((data: Record) => data.hits),
       map(hits => this.recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
-      map(hits => hits.map(hit => new PatronTransaction(hit.metadata)))
+      map(hits => hits.map( hit => new PatronTransaction(hit.metadata)))
     );
   }
 
@@ -105,7 +105,7 @@ export class PatronTransactionService {
     return this.recordService.getRecords('patron_transactions', query, 1, RecordService.MAX_REST_RESULTS_SIZE).pipe(
       map((data: Record) => data.hits),
       map(hits => this.recordService.totalHits(hits.total) === 0 ? [] : hits.hits),
-      map(hits => hits.map( hit => new PatronTransaction(hit.metadata)))
+      map(hits => hits.map(hit => new PatronTransaction(hit.metadata)))
     );
   }
 
@@ -195,7 +195,8 @@ export class PatronTransactionService {
     record.type = PatronTransactionEventType.PAYMENT;
     record.subtype = paymentMethod;
     record.amount = amount;
-    this._createTransactionEvent(record, transaction.patron.pid, amount);
+    this.patronFeesOperationSubject$.next(0 - amount);
+    this._createTransactionEvent(record, transaction.patron.pid);
   }
 
   /**
@@ -221,7 +222,8 @@ export class PatronTransactionService {
     record.type = PatronTransactionEventType.CANCEL;
     record.amount = amount;
     record.note = reason;
-    this._createTransactionEvent(record, transaction.patron.pid, amount);
+    this.patronFeesOperationSubject$.next(0 - amount);
+    this._createTransactionEvent(record, transaction.patron.pid);
   }
 
   /**
@@ -229,12 +231,11 @@ export class PatronTransactionService {
    * @param record - data to send through the API
    * @param affectedPatron - the user pid affected by this new transaction event
    */
-  private _createTransactionEvent(record: any, affectedPatron: string, amount: number = 0) {
-    const translateType = this.translateService.instant(record.type);
+  private _createTransactionEvent(record: any, affectedPatron: string) {
     this.recordService.create('patron_transaction_events', record).subscribe({
       next: () => {
-        this.circulationService.statisticsDecrease('fees', amount);
         this.emitPatronTransactionByPatron(affectedPatron, undefined, 'open');
+        const translateType = this.translateService.instant(record.type);
         this.messageService.add({
           severity: 'success',
           summary: this.translateService.instant('Patron'),
@@ -247,6 +248,7 @@ export class PatronTransactionService {
           ? error.message.message
           : 'Server error :: ' + (error.title || error.toString());
         const message = '[' + error.status + ' - ' + error.statusText + '] ' + errorMessage;
+        const translateType = this.translateService.instant(record.type);
         this.messageService.add({
           severity: 'error',
           summary: this.translateService.instant('{{ type }} creation failed!', { type: translateType }),
@@ -255,6 +257,6 @@ export class PatronTransactionService {
           closable: true
         });
       }
-    });
+  });
   }
 }
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 a4031a085..8d9d8f596 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
@@ -212,6 +212,7 @@ export class ItemRequestComponent implements OnInit {
             key: 'pickupPid',
             type: 'select',
             props: {
+              appendTo: 'body',
               label: this.translateService.instant('Pickup location'),
               required: true,
               placeholder: this.translateService.instant('Select…'),
diff --git a/projects/admin/src/app/scss/styles.scss b/projects/admin/src/app/scss/styles.scss
index fbabd8180..788ec48bb 100644
--- a/projects/admin/src/app/scss/styles.scss
+++ b/projects/admin/src/app/scss/styles.scss
@@ -42,6 +42,7 @@
   @import '../record/detail-view/permission-detail-view/permission-detail-view.component.scss';
   @import '../migration/conversion/record/detail-view/migration-data/migration-data.component.scss';
   @import '../acquisition/components/account/account-detail-view/account-detail-view.component.scss';
+  @import '../circulation/patron/card/card.component.scss';
 }
 
 @layer rero-ils-ui {
@@ -68,3 +69,7 @@
     background: transparent;
   }
 }
+
+ng-core-editor-field-password-generator {
+  @extend .w-full;
+}
diff --git a/projects/admin/src/app/service/loan.service.ts b/projects/admin/src/app/service/loan.service.ts
index 8993720f1..8d3899537 100644
--- a/projects/admin/src/app/service/loan.service.ts
+++ b/projects/admin/src/app/service/loan.service.ts
@@ -152,11 +152,11 @@ export class LoanService {
   cancelRequestDialog(event: Event, accept?: Function, reject?: Function): void {
     const confirmation: Confirmation = {
       target: event.target as EventTarget,
+      icon: 'fa fa-exclamation-triangle',
       header: this.translateService.instant('Cancel request'),
       message: this.translateService.instant('Do you really want to cancel the request?'),
       acceptLabel: this.translateService.instant('Yes'),
-      rejectLabel: this.translateService.instant('No'),
-      dismissableMask: true,
+      rejectLabel: this.translateService.instant('No')
     };
     if (accept) {
       confirmation.accept = accept;
diff --git a/projects/shared/src/scss/styles.scss b/projects/shared/src/scss/styles.scss
index ff7fd8a88..e73232ad2 100644
--- a/projects/shared/src/scss/styles.scss
+++ b/projects/shared/src/scss/styles.scss
@@ -15,6 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+@import "node_modules/@rero/ng-core/assets/scss/variables";
 @import "node_modules/@rero/ng-core/assets/scss/ng-core";
 @import "../lib/component/documents/files/files.component.scss";
 @import "../lib/view/contribution/contribution.component.scss";