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..55593f073 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
@@ -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" (window:keypress)="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.ts b/projects/admin/src/app/circulation/checkin/checkin.component.ts
index 90b497cbb..b02630e76 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,7 @@ 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',
+            width: '25vw',
           })
           ref.onClose.subscribe((action: string) => {
             if (action) {
@@ -316,7 +324,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 +380,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/items-list/items-list.component.scss b/projects/admin/src/app/circulation/circulation-main.component.ts
similarity index 52%
rename from projects/admin/src/app/circulation/items-list/items-list.component.scss
rename to projects/admin/src/app/circulation/circulation-main.component.ts
index 8fc910644..b841f059f 100644
--- a/projects/admin/src/app/circulation/items-list/items-list.component.scss
+++ b/projects/admin/src/app/circulation/circulation-main.component.ts
@@ -1,7 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2022 RERO
- * Copyright (C) 2022 UCLouvain
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,11 +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';
-
-.btn-show-more {
-  background-color: transparent !important;
-  color: $white;
+@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" style="flex: 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..e7297304e 100644
--- a/projects/admin/src/app/circulation/circulation.module.ts
+++ b/projects/admin/src/app/circulation/circulation.module.ts
@@ -32,6 +32,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';
@@ -106,7 +107,8 @@ import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
         IllRequestComponent,
         IllRequestItemComponent,
         JournalVolumePipe,
-        CirculationSettingsComponent
+        CirculationSettingsComponent,
+        CirculationMainComponent
     ],
     imports: [
         CirculationRoutingModule,
@@ -125,7 +127,7 @@ import { GetLoanCipoPipe } from './pipe/get-loan-cipo.pipe';
         MessagesModule,
         InputSwitchModule,
         SplitButtonModule
-    ],
+      ],
     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/item/item.component.html b/projects/admin/src/app/circulation/item/item.component.html
index 3f520a4a4..0a4002359 100644
--- a/projects/admin/src/app/circulation/item/item.component.html
+++ b/projects/admin/src/app/circulation/item/item.component.html
@@ -16,32 +16,17 @@
   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-2 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>
@@ -59,7 +44,7 @@
       }
     </div>
     <!-- TITLE -->
-    <div name="title" class="col-lg-6">
+    <div name="title" class="col-6">
       <a [routerLink]="['/records','documents','detail', item.document.pid]">
         @if (item.document?.title) {
           {{ isCollapsed ? (item.document.title | mainTitle | truncateText: 12) : item.document.title | mainTitle }}
@@ -75,137 +60,43 @@
       @if (document) {
         <shared-contribution [contributions]="document?.contribution"></shared-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">
+      <div class="mt-2">
+        <dl class="metadata pl-0">
+          <dt translate>Call number</dt>
+          <dd>
             <shared-inherited-call-number [item]="item"></shared-inherited-call-number>
           </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 }}
@@ -267,47 +158,170 @@
           }
 
           @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 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">
+      <div class="flex justify-content-end gap-3">
+        @if (item.actionDone) {
+          <div class="align-content-center">
+            @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>
         }
+        @if (patron) {
+          <div class="align-content-center">
+            <p-button
+            icon="fa fa-refresh pr-1"
+            [label]="'Renew'|translate"
+            severity="secondary"
+            [outlined]="true"
+            [disabled]="!item.actions.includes(itemAction.extend_loan)"
+            [id]="item.barcode | idAttribute:{prefix: 'item', suffix: 'renew-button'}"
+            (onClick)="extendLoanClick($event)"
+          />
+          </div>
+        }
+      </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">
+                <h4 translate>Loan</h4>
+                <pre class="overflow-auto max-h-30rem">{{ loan | json }}</pre>
+              </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">
+                  <h4>
+                    {{ 'Circulation policy' | translate }}&nbsp;
+                    <a [routerLink]="['/records', 'circ_policies', 'detail', cipo.pid]" target="_circulation">
+                      <i class="fa fa-external-link"></i>
+                    </a>
+                  </h4>
+                  <pre class="overflow-auto max-h-30rem">{{ cipo | json }}</pre>
+                </div>
+              }
+            </div>
+          } @else {
+            <div class="col">
+              <div class="flex flex-column border-1 surface-border border-round p-2 bg-white">
+                <h4 translate>Item</h4>
+                <pre class="overflow-auto max-h-30rem">{{ item | json }}</pre>
+              </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..ef7aad22a 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,52 @@
 }
 @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="hidden md:flex grid grid-nogutter bg-blue-900 text-white p-2 text-lg font-bold border-round-top align-items-center">
+          <div class="col-2 flex gap-2 align-items-center">
+            <div>
+              <shared-open-close-button (status)="allCollapsed = $event" />
+            </div>
+            <div translate>Item</div>
+          </div>
+          <div class="col-6" translate>Document</div>
+          <div class="col-3" translate>Circulation info</div>
+          <div class="col-1 flex justify-content-end">
+            <p-button
+              id="renew-all-button"
+              [label]="'Renew all'|translate"
+              [disabled]="loansToExtend.length < 1"
+              styleClass="float-right my-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..fcc86c679 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
@@ -15,24 +15,14 @@
   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">
-      @if (item.loan.state === LoanState.PENDING) {
-        <p-button
-          icon="fa fa-check"
-          [label]="'Validate'|translate"
-          [id]="item.barcode | idAttribute:{prefix: 'item', suffix: 'validate-button'}"
-          outlined
-          (onClick)="validateRequest()"
-        />
-      }
-    </div>
-    <!-- FIRST ROW :: item-barcode, document-title, requester-name, request-date -->
+  <div class="grid grid-nogutter p-2" [ngClass]="getCallout()" id="request-{{item.barcode}}">
     <div class="col-2">
-      <shared-open-close-button (status)="isCollapsed = $event" />
-      <a [routerLink]="['/records','items','detail', item.pid]">{{ item.barcode }}</a>
+      <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-lg-5">
+    <div name="title" class="col-5">
       @if (document.title | mainTitle; as title) {
         <a [routerLink]="['/records','documents','detail', document.pid]">
           {{ title }}
@@ -40,49 +30,57 @@
       }
       <shared-contribution [contributions]="document?.contribution"></shared-contribution>
     </div>
-    <div name="call-number" class="col-2">
+    <div 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 }}
-            }
+    <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"
+          [label]="'Validate'|translate"
+          [id]="item.barcode | idAttribute:{prefix: 'item', suffix: 'validate-button'}"
+          outlined
+          (onClick)="validateRequest()"
+        />
+      }
+    </div>
+  @if (!isCollapsed) {
+    <dl class="metadata ml-1">
+      <!-- Unit -->
+      @if (item.enumerationAndChronology) {
+        <dt translate>Unit</dt>
+        <dd>{{ item.enumerationAndChronology }}</dd>
+      }
+      <!-- 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>
+        <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>
 }
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..b7cc3e234 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
@@ -67,7 +67,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..01d65f304 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
@@ -14,25 +14,42 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
+@defer (when items) {
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+      <div class="hidden md:flex grid grid-nogutter 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-2">
+            <div class="flex gap-2 align-items-center">
+              <shared-open-close-button (status)="isCollapsed = $event" />
+              <span translate>Item</span>
+            </div>
 
-<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>
+          </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 class="col-1"></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)"
+          ></admin-requested-item>
+        }
+      </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..fbc2e9d2d 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">
@@ -63,10 +63,10 @@ <h3>
         @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 +75,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 +88,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.ts b/projects/admin/src/app/circulation/patron/card/card.component.ts
index a0ee6920d..f08a6ab40 100644
--- a/projects/admin/src/app/circulation/patron/card/card.component.ts
+++ b/projects/admin/src/app/circulation/patron/card/card.component.ts
@@ -14,7 +14,7 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, EventEmitter, 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';
@@ -24,7 +24,7 @@ import { CirculationService } from '../../services/circulation.service';
   templateUrl: './card.component.html',
   styleUrls: ['./card.component.scss']
 })
-export class CardComponent {
+export class CardComponent implements OnInit {
 
   private circulationService: CirculationService = inject(CirculationService);
 
@@ -42,40 +42,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 +89,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 8e105c0bf..1063b7435 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
@@ -17,7 +17,7 @@
 @if (form) {
 <form [formGroup]="form" (ngSubmit)="submit(patron, model)">
   <formly-form [form]="form" [fields]="formFields" [model]="model"></formly-form>
-  <div class="text-right">
+  <div class="text-right mt-2">
     <p-button
       type="submit"
       id="change-password-submit-button"
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..0aac66949 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
@@ -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/>.
 -->
+ <!--
 @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>
         <div class="col-3" translate>Pickup location</div>
@@ -33,3 +33,34 @@
     }
   </section>
 }
+-->
+
+
+@if(illRequests$ | async; as illRequests) {
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+      <div class="hidden md:flex grid grid-nogutter 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 py-2">
+          <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></div>
+        </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>
+    } @else {
+      <div class="mx-3 my-4 font-bold" translate>
+        No ill request.
+      </div>
+    }
+  </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..7b7794923 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
@@ -64,7 +64,6 @@ export class CirculationSettingsComponent implements OnInit {
     this.dialogRef = this.dialogService.open(FixedDateFormComponent, {
       header: this.translateService.instant('Choose a due date'),
       width: '30vw',
-      height: '600px'
     });
     this.dialogRef.onClose.subscribe((result?: any) => {
       if (result && 'action' in result && result.action === 'submit') {
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 49c5a129c..f77315d85 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
@@ -16,49 +16,53 @@
   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"
       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>
+      @if (formGroup.controls.endDate.valid || !formGroup.controls.endDate.touched) {
+        <span class="text-warning">
+          <i class="fa fa-exclamation-triangle pr-1"></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>
-  <div class="form-group form-check">
-    <input type="checkbox" class="form-check-input" id="remember" formControlName="remember">
-    <label class="form-check-label" for="remember" translate>Remember this date in current session</label>
-  </div>
-  {{ formGroup.controls.endDate['errorMessages'] | json }}
-  <div class="modal-footer">
-    <button type="button" class="btn btn-outline-danger" (click)="closeModal()" translate>Cancel</button>
-    <button type="submit" class="btn btn-primary" [disabled]="this.formGroup.invalid" translate>Apply</button>
+
+  <div class="mt-3 flex gap-1 justify-content-end">
+    <p-button [label]="'Cancel' |translate" severity="danger" [outlined]="true" (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">
+  <span class="text-error">
     <i class="fa fa-times-circle pr-1"></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..71b308c4c 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,20 +42,32 @@
         </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">
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..a839720dd 100644
--- a/projects/admin/src/app/circulation/patron/loan/loan.component.ts
+++ b/projects/admin/src/app/circulation/patron/loan/loan.component.ts
@@ -27,6 +27,7 @@ import { forkJoin, Subscription } from 'rxjs';
 import { CirculationService } from '../../services/circulation.service';
 import { LoanFixedDateService } from '../../services/loan-fixed-date.service';
 import { CirculationSettingsService, ICirculationSetting } from './circulation-settings/circulation-settings.service';
+import { DropdownChangeEvent } from 'primeng/dropdown';
 
 @Component({
   selector: 'admin-loan',
@@ -418,9 +419,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..ec7ecdcfb 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,32 @@
  You 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>
+@if (patron && items) {
+  <admin-circulation-patron-detailed
+    [patron]="patron"
+    [barcode]="barcode"
+    [displayCirculationMessages]="true"
+    (clearPatron)="clearPatron()"
+  ></admin-circulation-patron-detailed>
 
-  <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]" />
-            }
+  <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]" />
           }
-        </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></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..aceec35b5 100644
--- a/projects/admin/src/app/circulation/patron/main/main.component.ts
+++ b/projects/admin/src/app/circulation/patron/main/main.component.ts
@@ -26,7 +26,7 @@ import { MenuItem } from 'primeng/api';
 import { Subscription } from 'rxjs';
 import { OperationLogsApiService } from '../../../api/operation-logs-api.service';
 import { CirculationService } from '../../services/circulation.service';
-import { PatronTransactionService } from '../../services/patron-transaction.service';
+import { getSeverity } from '@app/admin/utils/utils';
 
 @Component({
   selector: 'admin-main',
@@ -37,7 +37,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);
@@ -173,7 +172,10 @@ export class MainComponent implements OnInit, OnDestroy {
           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.addCirculationMessage({
+              severity: getSeverity(message.type),
+              detail: message.content
+            });
           }
           this.initializeMenu();
         });
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..e3b570caf 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,50 @@
   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-2">
+      <div class="flex align-items-center gap-2">
+        <div>
+          <shared-open-close-button (status)="isCollapsed = $event" />
+        </div>
+        <div>
+          <a class="ml-1" [routerLink]="['/records', 'items', 'detail', item.pid]">{{ item.barcode }}</a>
+        </div>
+      </div>
+    </div>
+    <div class="col-7">
+      @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..fbb1fd5d1 100644
--- a/projects/admin/src/app/circulation/patron/pending/pending.component.html
+++ b/projects/admin/src/app/circulation/patron/pending/pending.component.html
@@ -14,28 +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/>.
 -->
-<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>
-        <div class="col-2" translate>Request date</div>
-        <div class="col-2" translate>Expected availability</div>
-        <div class="col-1" translate>&nbsp;</div>
+@defer(when loans) {
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+      <div class="hidden md:flex grid grid-nogutter bg-blue-900 text-white p-2 text-lg font-bold border-round-top align-items-center">
+        <div class="grid grid-nogutter bg-dark rounded text-light w-full align-items-center py-2">
+          <div class="col-2" translate>Item</div>
+          <div class="col-7" translate>Title</div>
+          <div class="col-2" translate>Request date</div>
+          <div class="col-1" translate>&nbsp;</div>
+        </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/pickup/pickup-item/pickup-item.component.html b/projects/admin/src/app/circulation/patron/pickup/pickup-item/pickup-item.component.html
index 5a923f076..6e524775f 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,7 +14,7 @@
  You should have received a copy of the GNU Affero General Public License
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-@if (item && loan) {
+<div class="grid grid-nogutter p-2">
   <div class="col-2">
     <a [routerLink]="['/records', 'items', 'detail', item.pid]">{{ item.barcode }}</a>
   </div>
@@ -24,7 +24,7 @@
         {{ title }}
       </a>
       @if (item.enumerationAndChronology) {
-        <span class="badge badge-info">{{ item.enumerationAndChronology }}</span>
+        <p-tag severity="info" [value="item.enumerationAndChronology" />
       }<br/>
     }
     <shared-contribution [contributions]="document?.contribution" />
@@ -39,7 +39,7 @@
       {{ 'Unknown' | translate }}
     }
   </div>
-  <div class="col-1 text-right">
+  <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..890c2051b 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,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/>.
 -->
-<section class="content">
-  @if (loans && loans.length > 0) {
-    <div>
-      <!-- HEADER -->
-      <div class="row p-2 mb-1 bg-dark rounded text-light row">
-        <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>
+@defer(when loans) {
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+      <div class="hidden md:flex grid grid-nogutter 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 py-2">
+          <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"></div>
+        </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/profile/profile.component.html b/projects/admin/src/app/circulation/patron/profile/profile.component.html
index 3825e4f1c..8aa95e456 100644
--- a/projects/admin/src/app/circulation/patron/profile/profile.component.html
+++ b/projects/admin/src/app/circulation/patron/profile/profile.component.html
@@ -14,234 +14,172 @@
   You 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-danger'"
+        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..565b4eb4f 100644
--- a/projects/admin/src/app/circulation/patron/profile/profile.component.ts
+++ b/projects/admin/src/app/circulation/patron/profile/profile.component.ts
@@ -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,12 +42,9 @@ 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) => {
+    this.subscription = this.patronService.currentPatron$.subscribe((patron: any) => {
+      this.patron = patron;
       if (patron && patron.pid) {
         this.recordPermission.getPermission('patrons', patron.pid).subscribe(
           perm => {
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/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 c4c9e1c0b..7fee98ef2 100644
--- a/projects/admin/src/app/scss/styles.scss
+++ b/projects/admin/src/app/scss/styles.scss
@@ -52,3 +52,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";