From d91a4bb2b2a2b51959baba374cefcdc5b3bee0c6 Mon Sep 17 00:00:00 2001
From: Renaud Michotte <renaud.michotte@gmail.com>
Date: Mon, 28 Mar 2022 11:14:03 +0200
Subject: [PATCH] patron: improve patron profile

* Refactoring the public patron profile for a better responsive display.
* Closes rero/rero-ils#2751.

Co-authored-by: Renaud Michotte <renaud.michotte@gmail.com>
---
 .../patron-profile-document.component.html    |  60 +++---
 .../patron-profile-document.component.spec.ts | 111 -----------
 .../patron-profile-document.component.ts      |  34 +++-
 .../patron-profile-fee.component.html         | 178 ++++++++---------
 .../patron-profile-fee.component.scss         |   9 +
 .../patron-profile-fee.component.spec.ts      |  38 ----
 .../patron-profile-fees.component.html        |  27 +--
 .../patron-profile-histories.component.html   |  55 +++--
 ...patron-profile-histories.component.spec.ts |  17 +-
 .../patron-profile-histories.component.ts     |   1 +
 .../patron-profile-history.component.html     |  58 +++---
 .../patron-profile-history.component.scss     | 156 +--------------
 .../patron-profile-history.component.spec.ts  |   5 -
 .../patron-profile-ill-request.component.html | 188 +++++++++---------
 .../patron-profile-ill-request.component.scss |  13 +-
 ...tron-profile-ill-request.component.spec.ts |  24 ---
 ...patron-profile-ill-requests.component.html |  22 +-
 ...ron-profile-ill-requests.component.spec.ts |  11 +-
 .../patron-profile-loan.component.html        | 130 ++++++------
 .../patron-profile-loan.component.scss        |  25 +++
 .../patron-profile-loan.component.spec.ts     | 127 ------------
 .../patron-profile-loan.component.ts          |  24 ++-
 .../patron-profile-loans.component.html       |  55 +++--
 .../patron-profile-loans.component.spec.ts    |   7 +-
 .../patron-profile-request.component.html     | 133 +++++++------
 .../patron-profile-request.component.scss     |  28 +++
 .../patron-profile-request.component.spec.ts  |   8 +-
 .../patron-profile-request.component.ts       |   3 +-
 .../patron-profile-requests.component.html    |  17 +-
 .../patron-profile-requests.component.spec.ts |  16 +-
 .../public-search/src/app/scss/styles.scss    |  50 +++++
 31 files changed, 621 insertions(+), 1009 deletions(-)
 delete mode 100644 projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.spec.ts
 create mode 100644 projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.scss
 delete mode 100644 projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.spec.ts
 create mode 100644 projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.scss

diff --git a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.html b/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.html
index 7ba33b369..761572398 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.html
@@ -14,46 +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/>.
 -->
-<div class="row mt-2" *ngIf="record.metadata && record.metadata.document as document">
-  <dl class="container row">
-    <!-- CONTRIBUTION -->
-    <ng-container *ngIf="document.contribution">
-      <dt class="col-2 label-title" translate>
-        Contribution
-      </dt>
-      <dd class="col-10">
-        <ul class="list-inline mb-0">
-          <li class="list-inline-item" *ngFor="let contribution of document.contribution | contributionFilter:language; let last = last">
-            <ng-container *ngIf="contribution.pid && contribution.target !== undefined; else agentNoLink">
-              <a href="/{{ viewcode }}/{{ contribution.target }}/{{ contribution.pid }}">
-                {{ contribution.authorizedAccessPoint }}
-              </a>
-            </ng-container>
-            <ng-template #agentNoLink>
-              {{ contribution.authorizedAccessPoint }}
-            </ng-template>
-            <ng-container *ngIf="!last">; </ng-container>
-          </li>
-        </ul>
-      </dd>
-    </ng-container>
+
+<a href="/{{ viewcode }}/documents/{{ record.metadata.document.pid }}" class="d-block">
+  {{ record.metadata.document.title | mainTitle }}
+</a>
+<ng-container *ngIf="document && document.contribution && document.contribution.length > 0">
+  <ul class="list-inline mb-0 small">
+    <li *ngFor="let contribution of document.contribution; let last = last; let i = index" class="list-inline-item">
+      <span *ngIf="!contribution.agent.pid" [innerHTML]="contribution | contributionFormat: true"></span>
+      <a *ngIf="contribution.agent.pid"
+         [innerHTML]="contribution | contributionFormat"
+         [routerLink]="['/records', 'persons', 'detail', contribution.agent.pid]">
+      </a>
+      <ng-container *ngIf="!last">; </ng-container>
+    </li>
+  </ul>
+</ng-container>
+<div class="container mt-2 pl-0" *ngIf="record.metadata" [collapse]="!showAdditionalInformation" [isAnimated]="isAnimated">
+  <dl class="row">
     <!-- CALL NUMBER -->
-    <ng-container *ngIf="record.metadata.item.call_number">
-      <dt class="col-2 label-title" translate>
-        Call number
-      </dt>
-      <dd class="col-10">
-        {{ record.metadata.item.call_number }}
-      </dd>
+    <ng-container *ngIf="callNumbers as formattedCallNumbers">
+      <dt class="col-sm-6 col-md-4 col-lg-3 label-title" translate>Call number</dt>
+      <dd class="col-sm-6 col-md-8 col-lg-9">{{ formattedCallNumbers }}</dd>
     </ng-container>
     <!-- ENUMERATION AND CHRONOLOGY -->
     <ng-container *ngIf="record.metadata.item.enumerationAndChronology">
-      <dt class="col-2 label-title" translate>
-        Unit
-      </dt>
-      <dd class="col-10">
-        {{ record.metadata.item.enumerationAndChronology }}
-      </dd>
+      <dt class="col-sm-6 col-md-4 col-lg-3 label-title" translate>Unit</dt>
+      <dd class="col-sm-6 col-md-8 col-lg-9">{{ record.metadata.item.enumerationAndChronology }}</dd>
     </ng-container>
   </dl>
+  <ng-content select="[additional-metadata]"></ng-content>
 </div>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.spec.ts
deleted file mode 100644
index f39f948f3..000000000
--- a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.spec.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2021 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { TranslateService } from '@rero/ng-core';
-import { ContributionFilterPipe, testUserPatronLibrarian } from '@rero/shared';
-import { PatronProfileMenuService } from '../patron-profile-menu.service';
-import { PatronProfileDocumentComponent } from './patron-profile-document.component';
-
-
-describe('PatronProfileDocumentComponent', () => {
-  let component: PatronProfileDocumentComponent;
-  let fixture: ComponentFixture<PatronProfileDocumentComponent>;
-
-  const record = {
-    metadata: {
-      document: {
-        pid: '1',
-        contribution: [
-          {
-            agent: {
-              authorized_access_point_fr: 'agent1_link_fr',
-              authorized_access_point_en: 'agent1_link_en',
-              type: 'bf:Person',
-              pid: '12'
-            },
-            role: [
-              'cre'
-            ]
-          },
-          {
-            agent: {
-              authorized_access_point_fr: 'agent2_fr',
-              authorized_access_point_en: 'agent2_en',
-              type: 'bf:Person'
-            },
-            role: [
-              'ctb'
-            ]
-          }
-        ]
-      },
-      item: {
-        pid: '2',
-        call_number: 'A123456',
-        enumerationAndChronology: 'item unit'
-      }
-    }
-  };
-
-  const patronProfileMenuServiceSpy = jasmine.createSpyObj('PatronProfileMenuService', ['']);
-  patronProfileMenuServiceSpy.currentPatron = testUserPatronLibrarian.patrons[0];
-
-  const translateServiceSpy = jasmine.createSpyObj('TranslateService', ['']);
-  translateServiceSpy.currantLang = 'fr';
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        PatronProfileDocumentComponent,
-        ContributionFilterPipe
-      ],
-      imports: [
-        HttpClientTestingModule,
-        TranslateModule.forRoot()
-      ],
-      providers: [
-        { provide: PatronProfileMenuService, useValue: patronProfileMenuServiceSpy },
-        { provide: TranslateService, useValue: translateServiceSpy }
-      ]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PatronProfileDocumentComponent);
-    component = fixture.componentInstance;
-    component.record = record;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should contain the data from the document and the item', () => {
-    const dd = fixture.nativeElement.querySelectorAll('dl > dd');
-    const contribFirst = dd[0].querySelector('ul > li:first-child > a');
-    expect(contribFirst.textContent).toContain('agent1_link_en');
-    const contribLast = dd[0].querySelector('ul > li:last-child');
-    expect(contribLast.textContent).toContain('agent2_en');
-
-    expect(dd[1].textContent).toContain('A123456');
-    expect(dd[2].textContent).toContain('item unit');
-  });
-});
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts
index b8d98c2ff..6b454a1e0 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.ts
@@ -14,8 +14,10 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { RecordService } from '@rero/ng-core';
+import { CanExtend } from '../../api/loan-api.service';
 import { PatronProfileMenuService } from '../patron-profile-menu.service';
 
 @Component({
@@ -23,27 +25,51 @@ import { PatronProfileMenuService } from '../patron-profile-menu.service';
   templateUrl: './patron-profile-document.component.html',
   styleUrls: ['./patron-profile-document.component.scss']
 })
-export class PatronProfileDocumentComponent {
+export class PatronProfileDocumentComponent implements OnInit {
 
+  // COMPONENT ATTRIBUTES =====================================================
   @Input() record: any;
+  @Input() showAdditionalInformation = false;
+  @Input() isAnimated = true;
 
+  /** related document */
+  document = undefined;
+
+  // GETTER & SETTER ==========================================================
   /** Get current viewcode */
   get viewcode(): string {
     return this._patronProfileMenuService.currentPatron.organisation.code;
   }
-
   /** Get current language */
   get language(): string {
     return this._translateService.currentLang;
   }
 
+  /** Get the formatted call numbers for the related item */
+  get callNumbers(): string {
+    return Array(
+      this.record.metadata.item.call_number,
+      this.record.metadata.item.second_call_number
+    ).filter(Boolean).join(' | ');
+  }
+
+  // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
    * @param _patronProfileMenuService - PatronProfileMenuService
    * @param _translateService - TranslateService
+   * @param _recordService - RecordService
    */
   constructor(
     private _patronProfileMenuService: PatronProfileMenuService,
-    private _translateService: TranslateService
+    private _translateService: TranslateService,
+    private _recordService: RecordService
   ) {}
+
+  /** OnInit hook */
+  ngOnInit(): void {
+    this._recordService
+      .getRecord('documents', this.record.metadata.document.pid, 1, {Accept: 'application/rero+json, application/json'})
+      .subscribe(document => this.document = document.metadata);
+  }
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.html b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.html
index bc5ed8dbc..ec9aea683 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.html
@@ -15,112 +15,94 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<div class="col-2 pl-0">
-  <button
-    id="fee-{{ record.metadata.pid }}"
-    type="button"
-    class="pl-0 pr-2 pt-0 btn btn-toogle"
-    (click)="isCollapsed = !isCollapsed"
-    [attr.aria-expanded]="!isCollapsed"
-    aria-controls="collapseEvent"
-  >
-    <i class="fa pr-0" [ngClass]="{ 'fa-caret-right': isCollapsed, 'fa-caret-down': !isCollapsed }"></i>
+<div class="d-flex container p-2" *ngIf="record">
+  <button type="button" class="btn-show-more"
+          [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
+          (click)="isCollapsed = !isCollapsed"
+          [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
   </button>
-  {{ record.metadata.creation_date | dateTranslate: 'short' }}
-</div>
-<div class="col-7">{{ record.metadata.type | translate }}</div>
-<div class="col-3 text-lg-right">{{ record.metadata.total_amount | currency:organisation.currency:'symbol' }}</div>
-
-<!-- fee events -->
-<div id="fee-event-{{ record.metadata.pid }}" [collapse]="isCollapsed" (expanded)="expanded(record.metadata.pid)" [isAnimated]="true" class="col-lg-12 pl-3">
-  <div class="mt-2">
-    <!-- NOTE -->
-    <section id="fee-note-{{ record.metadata.pid }}" *ngIf="record.metadata.note">
-      <h5 class="mt-3" translate>Note</h5>
-      {{ record.metadata.note }}
-    </section>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-3 pl-0">{{ record.metadata.creation_date | dateTranslate: 'short' }}</div>
+      <div class="col-6">{{ record.metadata.type | translate }}</div>
+      <div class="col-3 text-lg-right">{{ record.metadata.total_amount | currency:organisation.currency:'symbol' }}</div>
+      <!-- FEE DETAILS & EVENTS =========================================== -->
+      <div id="fee-event-{{ record.metadata.pid }}" [collapse]="isCollapsed" (expanded)="expanded(record.metadata.pid)" [isAnimated]="true" class="col-lg-12 pl-3">
+        <div class="mt-2">
+          <!-- NOTE -->
+          <section id="fee-note-{{ record.metadata.pid }}" *ngIf="record.metadata.note">
+            <h5 class="mt-3" translate>Note</h5>
+            {{ record.metadata.note }}
+          </section>
 
-    <!-- DOCUMENT -->
-    <section id="fee-{{ record.metadata.pid }}-document" *ngIf="record.metadata.document as document">
-      <h5 class="mt-3" translate>Document</h5>
-      <dl class="container row">
-        <!-- TITLE -->
-        <dt class="col-2 label-title" translate>
-          Title
-        </dt>
-        <dd class="col-10">
-          <a href="/{{ organisation.code }}/documents/{{ document.pid }}">{{ document.title | mainTitle }}</a>
-        </dd>
-        <!-- CALL NUMBER -->
-        <ng-container *ngIf="record.metadata.loan.item.call_number">
-          <dt class="col-2 label-title" translate>
-            Call number
-          </dt>
-          <dd class="col-10">
-            {{ record.metadata.loan.item.call_number }}
-          </dd>
-        </ng-container>
-        <!-- TITLE -->
-        <dt class="col-2 label-title" translate>
-          Loan started at
-        </dt>
-        <dd class="col-10">
-          {{ record.metadata.loan.transaction_date | dateTranslate: 'short' }}
-        </dd>
-      </dl>
-    </section>
+          <!-- DOCUMENT METADATA -->
+          <section id="fee-{{ record.metadata.pid }}-document" *ngIf="record.metadata.document as document">
+            <h5 class="mt-3" translate>Document</h5>
+            <dl class="container row">
+              <!-- TITLE -->
+              <dt class="col-2 label-title" translate>Title</dt>
+              <dd class="col-10">
+                <a href="/{{ organisation.code }}/documents/{{ document.pid }}">{{ document.title | mainTitle }}</a>
+              </dd>
+              <!-- CALL NUMBER -->
+              <ng-container *ngIf="record.metadata.loan.item.call_number">
+                <dt class="col-2 label-title" translate>Call number</dt>
+                <dd class="col-10">{{ record.metadata.loan.item.call_number }}</dd>
+              </ng-container>
+              <!-- TITLE -->
+              <dt class="col-2 label-title" translate>Loan started at</dt>
+              <dd class="col-10">{{ record.metadata.loan.transaction_date | dateTranslate: 'short' }}</dd>
+            </dl>
+          </section>
 
-    <!-- TRANSACTIONS HISTORY -->
-    <h5 class="mt-3" translate>Transactions history</h5>
-    <section id="fee-{{ record.metadata.pid }}-transaction" class="row">
-      <div *ngFor="let event of events" class="col-12 events-timeline">
-        <div class="row pl-2 pr-2 align-items-start timeline-event">
-          <div class="col-3 pr-4 event-timestamp">
-            <i class="fa fa-calendar-o"></i>
-            {{ event.metadata.creation_date | dateTranslate: 'shortDate' }}
-            <i class="fa fa-clock-o pl-1"></i>
-            {{ event.metadata.creation_date | dateTranslate: 'HH:mm' }}
-          </div>
-          <div class="col-9 event-content">
-            <div class="row" [ngClass]="{ 'event-highlight': (event.metadata.type === 'dispute'), '': !(event.metadata.type === 'dispute') }">
-              <div class="col-10 d-inline-block text-truncate label">
-                {{ event.metadata.type | translate }}
-                <ng-container *ngIf="event.metadata.subtype">
-                    [{{ event.metadata.subtype | translate }}]
-                </ng-container>
-              </div>
-              <div class="col-2 amount">
-                <ng-container *ngIf="event.metadata.amount; else noAmount">
-                  <span class="badge" [ngClass]="{ 'badge-success': (event.type === 'payment'), 'badge-danger': (event.type !== 'payment') }">
-                  {{ event.metadata.amount | currency:organisation.currency:'symbol' }}
-                  </span>
-                </ng-container>
-                <ng-template #noAmount>&nbsp;</ng-template>
-              </div>
-              <ng-container *ngIf="event.metadata.note">
-                <div class="row mt-2">
-                  <div class="col-2 label-title">
-                    <i class="fa fa-comment-o pr-1" title="{{ 'Note' | translate }}"></i>
-                  </div>
-                  <div class="col-10">
-                    <blockquote>{{ event.metadata.note }}</blockquote>
-                  </div>
+          <!-- TRANSACTIONS HISTORY -->
+          <h5 class="mt-3" translate>Transactions history</h5>
+          <section id="fee-{{ record.metadata.pid }}-transaction" class="row">
+            <div *ngFor="let event of events" class="col-12 events-timeline">
+              <div class="row pl-2 pr-2 align-items-start timeline-event">
+                <div class="col-3 pr-4 event-timestamp">
+                  <i class="fa fa-calendar-o"></i>
+                  {{ event.metadata.creation_date | dateTranslate: 'shortDate' }}
+                  <i class="fa fa-clock-o pl-1"></i>
+                  {{ event.metadata.creation_date | dateTranslate: 'HH:mm' }}
                 </div>
-              </ng-container>
-              <ng-container *ngIf="event.metadata.library">
-                <div class="row mt-2">
-                  <div class="col-2 label-title">
-                    <i class="fa fa-map-marker pr-1" title="{{ 'Library' | translate }}"></i>
-                  </div>
-                  <div class="col-10">
-                    {{ event.metadata.library.name }}
+                <div class="col-9 event-content">
+                  <div class="row" [ngClass]="{ 'event-highlight': (event.metadata.type === 'dispute'), '': !(event.metadata.type === 'dispute') }">
+                    <div class="col-10 d-inline-block text-truncate label">
+                      {{ event.metadata.type | translate }}
+                      <ng-container *ngIf="event.metadata.subtype">
+                        [{{ event.metadata.subtype | translate }}]
+                      </ng-container>
+                    </div>
+                    <div class="col-2 amount">
+                      <ng-container *ngIf="event.metadata.amount; else noAmount">
+                        <span class="badge" [ngClass]="{ 'badge-success': (event.type === 'payment'), 'badge-danger': (event.type !== 'payment') }">
+                        {{ event.metadata.amount | currency:organisation.currency:'symbol' }}
+                        </span>
+                      </ng-container>
+                      <ng-template #noAmount>&nbsp;</ng-template>
+                    </div>
+                    <ng-container *ngIf="event.metadata.note">
+                      <div class="col-3 label-title mt-2">
+                        <i class="fa fa-comment-o pr-1" title="{{ 'Note' | translate }}"></i>
+                        {{ 'Note' | translate }}
+                      </div>
+                      <blockquote class="col-9 mt-2">{{ event.metadata.note }}</blockquote>
+                    </ng-container>
+                    <ng-container *ngIf="event.metadata.library">
+                      <div class="col-3 label-title mt-2">
+                        <i class="fa fa-map-marker pr-1" title="{{ 'Library' | translate }}"></i>
+                        {{ 'Library' | translate }}
+                      </div>
+                      <div class="col-9 mt-2">{{ event.metadata.library.name }}</div>
+                    </ng-container>
                   </div>
                 </div>
-              </ng-container>
+              </div>
             </div>
-          </div>
+          </section>
         </div>
       </div>
-    </section>
+    </div>
   </div>
 </div>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.scss b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.scss
index 440e1b739..dd60e9016 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.scss
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.scss
@@ -17,12 +17,21 @@
 @import '~bootstrap/scss/_functions';
 @import '~bootstrap/scss/_variables';
 
+:host:nth-child(even){
+  background-color: $light;
+}
+
 dl > dt,
 dl > dd {
   padding-left: 0;
   margin-bottom: 0;
 }
 
+h5 {
+  border-bottom: $border-width solid $border-color;
+  margin-bottom: map-get($spacers, 3);
+}
+
 @media (min-width: map_get($grid-breakpoints, lg)) {
   .events-timeline {
     position: relative;
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.spec.ts
index 616235020..41844e65f 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.spec.ts
@@ -121,42 +121,4 @@ describe('PatronProfileFeeComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should display the document information button and link', () => {
-    const button = fixture.nativeElement.querySelector('button');
-    expect(button.attributes.id.textContent).toContain('fee-1');
-
-    const date = fixture.nativeElement.querySelector('div > div');
-    expect(date.textContent).toContain('2/2/21, 12:00 PM');
-
-    const divs = fixture.nativeElement.querySelectorAll('div > div');
-    expect(divs[1].textContent).toContain('fee-type');
-    expect(divs[2].textContent).toContain('CHF2.50');
-
-    const note = fixture.nativeElement.querySelector('#fee-note-1');
-    expect(note.textContent).toContain('Note record note');
-    expect(note.querySelector('h5').textContent).toContain('Note');
-
-    const dd = fixture.nativeElement.querySelectorAll('#fee-1-document > dl > dd');
-    const docWithLink = dd[0].querySelector('a');
-    expect(docWithLink.attributes.href.textContent).toContain('/org1/documents/1');
-    expect(docWithLink.textContent).toContain('Document title');
-    expect(dd[1].textContent).toContain('A123456');
-    expect(dd[2].textContent).toContain('3/2/21, 12:00 PM');
-
-    let event = fixture.nativeElement.querySelector('#fee-1-transaction .event-timestamp');
-    expect(event.textContent).toContain('2/2/21  12:00');
-
-    event = fixture.nativeElement.querySelectorAll('#fee-1-transaction .event-content > div > div');
-    expect(event[0].textContent).toContain('subscription  [sub]');
-    expect(event[1].textContent).toContain('CHF10.00');
-
-    event = fixture.nativeElement
-      .querySelector('#fee-1-transaction .event-content > div > div:nth-child(3) > div:nth-child(2)');
-    expect(event.textContent).toContain('event note');
-
-    event = fixture.nativeElement
-      .querySelector('#fee-1-transaction .event-content > div > div:nth-child(4) > div:nth-child(2)');
-    expect(event.textContent).toContain('library name');
-  });
 });
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.html b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.html
index 139edc2be..71e39dd41 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fees.component.html
@@ -18,8 +18,8 @@
 <section id="fees-section" class="container my-2">
   <div class="d-none d-lg-block">
     <div class="row bg-dark rounded text-light p-2">
-      <div class="col-2 pl-0" translate>Date</div>
-      <div class="col-7" translate>Category</div>
+      <div class="col-3 pl-5" translate>Date</div>
+      <div class="col-6" translate>Category</div>
       <div class="col-3 text-right">
         {{ 'Total amount' | translate }}:
         {{ feesTotal | currency:currency:'symbol' }}
@@ -34,18 +34,19 @@
   </ng-container>
 
   <ng-template #display>
-    <ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
-      <div id="fees-data">
-        <public-search-patron-profile-fee
-          *ngFor="let record of records; let index = index"
-          [ngClass]="{ 'bg-light': !(index % 2) }"
-          id="fee-{{ record.metadata.pid }}"
-          class="row my-1 p-2"
-          [record]="record">
-        </public-search-patron-profile-fee>
-        <shared-search-show-more-pager id="show-more-fees" [paginator]="paginator"></shared-search-show-more-pager>
+    <div class="row border" *ngIf="paginator.getRecordsCount() > 0; else noRecord">
+      <div class="container-fluid">
+        <div id="fees-data">
+          <public-search-patron-profile-fee
+            *ngFor="let record of records"
+            [record]="record"
+            id="fee-{{ record.metadata.pid }}"
+            class="row border-bottom">
+          </public-search-patron-profile-fee>
+          <shared-search-show-more-pager id="show-more-fees" [paginator]="paginator"></shared-search-show-more-pager>
+        </div>
       </div>
-    </ng-container>
+    </div>
 
     <ng-template #noRecord>
       <div class="row">
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.html b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.html
index 83876cb6e..f4646fe6f 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.html
@@ -15,37 +15,32 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <!-- header -->
-<section id="histories-section" class="row px-3 mt-2 my-1">
-  <div class="col mr-1 d-none d-lg-block">
-    <div class="row p-2 bg-dark rounded text-light">
-      <div class="col-6 pl-0" translate>Title</div>
-      <div class="col-4 pl-0" translate>Author(s)</div>
-      <div class="col-2 pl-0" translate>Return date</div>
-    </div>
+<section id="histories-section" class="container my-2">
+  <div class="d-none d-lg-flex row p-2 bg-dark rounded text-light">
+    <div class="col-10" translate>Document</div>
+    <div class="col-2" translate>Return date</div>
   </div>
-</section>
 
-<ng-container *ngIf="!loaded; else display">
-  <div class="row">
-    <div class="col-12 ml-2 mt-2 font-weight-bold" translate>Loading in progress</div>
+  <div class="row" *ngIf="!loaded; else display">
+    <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
   </div>
-</ng-container>
-
-<ng-template #display>
-  <ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
-    <div id="histories-data" class="row px-3">
-      <ul class="list-unstyled p-0 mb-1 col-12">
-        <li *ngFor="let record of records; let index = index" [ngClass]="{ 'bg-light': !(index % 2) }">
-          <public-search-patron-profile-history [record]="record"></public-search-patron-profile-history>
-        </li>
-      </ul>
-      <shared-search-show-more-pager id="show-more-histories" [paginator]="paginator"></shared-search-show-more-pager>
-    </div>
-  </ng-container>
-
-  <ng-template #noRecord>
-    <div class="row">
-      <div class="col-12 ml-2 mt-2 font-weight-bold" translate>No history</div>
-    </div>
+  <ng-template #display>
+    <ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
+      <div class="row border">
+        <div class="container">
+          <public-search-patron-profile-history
+            *ngFor="let loan of records"
+            [record]="loan"
+            id="history-{{ loan.metadata.pid }}" class="row border-bottom">
+          </public-search-patron-profile-history>
+        </div>
+      </div>
+      <shared-search-show-more-pager id="show-more-loans" [paginator]="paginator" class="row"></shared-search-show-more-pager>
+    </ng-container>
+    <ng-template #noRecord>
+      <div class="row">
+        <span class="col mt-2 font-weight-bold" translate>No history</span>
+      </div>
+    </ng-template>
   </ng-template>
-</ng-template>
+</section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.spec.ts
index e11dbb66d..ff95ccc73 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.spec.ts
@@ -91,21 +91,8 @@ describe('PatronProfileHistoriesComponent', () => {
   });
 
   it('should display loading in progress', () => {
-    const loading = fixture.nativeElement.querySelectorAll('div')[6];
+    const loading = fixture.nativeElement.querySelectorAll('div')[4];
     expect(loading.textContent).toContain('Loading in progress');
   });
-
-  it('should display the message no record', () => {
-    patronProfileService.changeTab({ name: 'history', count: 0 });
-    fixture.detectChanges();
-    const message = fixture.nativeElement.querySelectorAll('div')[6];
-    expect(message.textContent).toContain('No history');
-  });
-
-  it('should display the list of records', () => {
-    patronProfileService.changeTab({ name: 'history', count: 1 });
-    fixture.detectChanges();
-    const li = fixture.nativeElement.querySelectorAll('li');
-    expect(li.length).toEqual(1);
-  });
+  
 });
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts
index 6b287ea7e..f9f6d0943 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-histories.component.ts
@@ -84,6 +84,7 @@ export class PatronProfileHistoriesComponent implements OnInit, OnDestroy {
             this._historyQuery(1).subscribe((response: Record) => {
               this._paginator.setRecordsCount(response.hits.total.value);
               this.records = response.hits.hits;
+              console.log(this.records);
               this.loaded = true;
             });
           }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.html b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.html
index 78a425ea7..f3ac2f588 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.html
@@ -14,36 +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/>.
 -->
-<div class="row mt-1 p-2" *ngVar="record.metadata.loan.item.document.pid | getRecord:'documents':'object':'':{ Accept:'application/rero+json' } | async as document">
-  <div class="col-6 col-sm-6">
-    <a *ngIf="document; else nodocument" href="/{{ viewcode }}/documents/{{ record.metadata.loan.item.document.pid }}">
-      {{ record.metadata.loan.item.document.title }}
-    </a>
-    <ng-template #nodocument>
-      {{ record.metadata.loan.item.document.title }}
-    </ng-template>
-  </div>
-  <div class="col-4 col-sm-4">
-    <ng-container *ngIf="document; else norecord">
-    <ul class="list-inline">
-      <li *ngFor="let contribution of document.metadata.contribution | contributionFilter:language; let last = last">
-        <ng-container *ngIf="contribution.pid && contribution.target !== undefined; else agentNoLink">
-          <a href="/{{ viewcode }}/{{ contribution.target }}/{{ contribution.pid }}">
+
+<div class="container p-2">
+  <div class="row">
+    <!-- DOCUMENT & ADDITIONAL DATA ===================================== -->
+    <div *ngVar="record.metadata.loan.item.document.pid | getRecord:'documents':'object':'':{ Accept:'application/rero+json' } | async as document"
+         class="col-sm-12 col-lg-10">
+      <a *ngIf="document; else nodocument" href="/{{ viewcode }}/documents/{{ record.metadata.loan.item.document.pid }}">
+        {{ record.metadata.loan.item.document.title }}
+      </a>
+      <ng-template #nodocument>{{ record.metadata.loan.item.document.title }}</ng-template>
+      <ul class="list-inline mb-0 small" *ngIf="document">
+        <li *ngFor="let contribution of document.metadata.contribution | contributionFilter:language; let last = last">
+          <ng-container *ngIf="contribution.pid && contribution.target !== undefined; else agentNoLink">
+            <a href="/{{ viewcode }}/{{ contribution.target }}/{{ contribution.pid }}">
+              {{ contribution.authorizedAccessPoint }}
+            </a>
+          </ng-container>
+          <ng-template #agentNoLink>
             {{ contribution.authorizedAccessPoint }}
-          </a>
-        </ng-container>
-        <ng-template #agentNoLink>
-          {{ contribution.authorizedAccessPoint }}
-        </ng-template>
-        <ng-container *ngIf="!last">; </ng-container>
-      </li>
-    </ul>
-    </ng-container>
-    <ng-template #norecord>
-      &nbsp;
-    </ng-template>
-  </div>
-  <div class="col-2 col-sm-2">
-    {{ record.metadata.date | dateTranslate: 'shortDate' }}
+          </ng-template>
+          <ng-container *ngIf="!last">; </ng-container>
+        </li>
+      </ul>
+    </div>
+    <!-- DUE DATE  ====================================================== -->
+    <div class="col-sm-12 col-lg-2">
+      <span class="d-inline d-lg-none label-title font-weight-bold" translate>Return date</span>
+      {{ record.metadata.date | dateTranslate: 'shortDate' }}
+    </div>
   </div>
 </div>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.scss b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.scss
index 8df469693..f1aef7580 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.scss
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.scss
@@ -1,6 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2022 RERO
+ * Copyright (C) 2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -17,155 +18,6 @@
 @import '~bootstrap/scss/_functions';
 @import '~bootstrap/scss/_variables';
 
-@media (min-width: map_get($grid-breakpoints, lg)) {
-  .events-timeline {
-    position: relative;
-    .timeline-event {
-      .event-timestamp {
-        color: $secondary;
-        font-size: ($font-size-base * .75);
-        text-align: right;
-      }
-      .event-content {
-        &:before {
-          content: '';
-          background: $secondary;
-          position: absolute;
-          left: - map-get($spacers, 2); // -.5rem
-          top: map-get($spacers, 1); // .25rem
-          width: 1px;
-          height: 100%;
-          z-index: 400;
-        }
-        &:hover .more-detail{
-          display: block;
-        }
-        .row {
-          margin-bottom: 1rem;
-          line-height: 1.1;
-          &:first-child:after {
-            content: ' ';
-            background-color: white;
-            display: inline-block;
-            position: absolute;
-            border-radius: 50%;
-            border: 1px solid $secondary;
-            left: calc(-.75rem - 1px);
-            top: .25rem;
-            width: .75rem;
-            height: .75rem;
-            z-index: 400;
-          }
-          &.event-highlight:first-child:after{
-            border-color: $warning;
-            background-color: theme-color-level("warning", -10);
-          }
-          .label {
-            &:after {
-              content: ' ';
-              position: absolute;
-              border: .5px dashed #EEE;
-              top: calc(.55rem - 1px);
-              width: 100%;
-            }
-          }
-          blockquote {
-            font-style: italic;
-            margin: 0;
-            &:before, &:after {
-	            color: #AAA;
-            }
-            &:before {
-	            content: '“ ';
-	          }
-            &:after {
-	            content: ' ”';
-	          }
-          }
-        }
-        .force-display {
-          display: block !important;
-        }
-        .more-detail {
-          display: none;
-          cursor: pointer;
-        }
-        .label-title {
-          text-align: right;
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: map_get($grid-breakpoints, md)) {
-  .events-timeline {
-    position: relative;
-    .timeline-event {
-      margin-left: 10px;
-      .event-timestamp {
-        color: $secondary;
-        font-size: ($font-size-base * .75);
-        text-align: left;
-      }
-      .event-content {
-        .amount {
-          text-align: right;
-        }
-        &:before {
-          content: '';
-          background: $secondary;
-          position: absolute;
-          left: - map-get($spacers, 2); // -.50rem
-          top: map-get($spacers, 1); // .25rem
-          width: 1px;
-          height: 100%;
-          z-index: 400;
-        }
-        &:hover .more-detail{
-          display: block;
-        }
-        .row {
-          margin-bottom: 1rem;
-          line-height: 1.1;
-          &:first-child:after {
-            content: ' ';
-            background-color: white;
-            display: inline-block;
-            position: absolute;
-            border-radius: 50%;
-            border: 1px solid $secondary;
-            left: calc(-.75rem - 1px);
-            top: .25rem;
-            width: .75rem;
-            height: .75rem;
-            z-index: 400;
-          }
-          &.event-highlight:first-child:after{
-            border-color: $warning;
-            background-color: theme-color-level("warning", -10);
-          }
-          .label {
-            &:after {
-              content: ' ';
-              position: absolute;
-              border: .5px dashed #EEE;
-              top: calc(.55rem - 1px);
-              width: 100%;
-            }
-          }
-        }
-        .force-display {
-          display: block !important;
-        }
-        .more-detail {
-          display: none;
-          cursor: pointer;
-        }
-        .label-title {
-          text-align: left;
-        }
-      }
-    }
-  }
+:host:nth-child(even){
+  background-color: $light;
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.spec.ts
index 4a46133f0..c7b513486 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.spec.ts
@@ -88,9 +88,4 @@ describe('PatronProfileHistoryComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should display the document information button and link', () => {
-    const link = fixture.nativeElement.querySelector('div.col-6');
-    expect(link.textContent).toContain('Remembrance');
-  });
 });
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.html b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.html
index 3ec0fb050..bd8077f18 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.html
@@ -14,102 +14,100 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="col-lg-5 col-sm-12">
-  <button
-    id="ill-request-{{ record.metadata.pid }}"
-    type="button"
-    class="pl-0 pr-2 pt-0 btn btn-toogle"
-    (click)="isCollapsed = !isCollapsed"
-    [attr.aria-expanded]="!isCollapsed"
-    aria-controls="collapseEvent"
-  >
-    <i class="fa pr-0" [ngClass]="{ 'fa-caret-right': isCollapsed, 'fa-caret-down': !isCollapsed }"></i>
+
+<div class="d-flex container p-2" [ngClass]="{'callout callout-warning ':record.metadata.is_late}">
+  <button type="button" class="btn-show-more"
+          [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
+          (click)="isCollapsed = !isCollapsed"
+          [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
   </button>
-  {{ record.metadata.document.title }}
-</div>
-<div class="col-lg-5 col-sm-10">{{ record.metadata.document.authors }}</div>
-<div class="col-2 pr-0 text-lg-right">
-  <span *ngIf="record.metadata.status !== 'validated' else notValidated"
-        class="badge px-2 py-1 mr-1 font-weight-normal"
-        [ngClass]="record.metadata.status | statusBadge"
-  >
-    {{ record.metadata.status | translate }}
-  </span>
-  <ng-template #notValidated>
-    <span  *ngIf="record.metadata.loan_status"
-           class="badge px-2 py-1 mr-1 font-weight-normal badge-secondary"
-           [ngClass]="record.metadata.loan_status | loanStatusBadge"
-    >
-      {{ record.metadata.loan_status | translate }}
-    </span>
-  </ng-template>
+  <div class="container-fluid">
+    <!-- ILL DOCUMENT & STATUS ============================================ -->
+    <div class="row">
+      <div class="col-lg-10 col-8 pl-0">
+        <div>{{ record.metadata.document.title }}</div>
+        <div class="small">{{ record.metadata.document.authors }}</div>
+      </div>
+      <div class="col-lg-2 col-4 text-right pr-0">
+        <span *ngIf="record.metadata.status !== 'validated' else notValidated"
+              class="badge px-2 py-1 mr-1 font-weight-normal"
+              [ngClass]="record.metadata.status | statusBadge">
+          {{ record.metadata.status | translate }}
+        </span>
+        <ng-template #notValidated>
+          <span *ngIf="record.metadata.loan_status"
+                class="badge px-2 py-1 mr-1 font-weight-normal badge-secondary"
+                [ngClass]="record.metadata.loan_status | loanStatusBadge">
+            {{ record.metadata.loan_status | translate }}
+          </span>
+        </ng-template>
+      </div>
+    </div>
+    <!-- ILL DETAIL ======================================================= -->
+    <section id="ill-detail-{{ record.metadata.pid }}" [collapse]="isCollapsed" [isAnimated]="true" class="col-12 p-0">
+      <dl class="row mt-2">
+        <!-- PUBLISHER -->
+        <ng-container *ngIf="record.metadata.document.publisher">
+          <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Publisher</dt>
+          <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">{{ record.metadata.document.publisher }}</dd>
+        </ng-container>
+        <!-- YEAR -->
+        <ng-container *ngIf="record.metadata.document.year">
+          <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Year</dt>
+          <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">{{ record.metadata.document.year }}</dd>
+        </ng-container>
+        <!-- IDENTIFIER -->
+        <ng-container *ngIf="record.metadata.document.identifier">
+          <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Identifier</dt>
+          <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">{{ record.metadata.document.identifier }}</dd>
+        </ng-container>
+        <!-- PUBLISHED IN -->
+        <ng-container *ngIf="record.metadata.document.published_in">
+          <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Source</dt>
+          <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">
+            {{ record.metadata.document.published_in.journal_title }}
+            <ng-container *ngIf="record.metadata.document.published_in.volume || record.metadata.document.published_in.number">
+              {{ record.metadata.document.published_in | journalVolume }}
+            </ng-container>
+          </dd>
+        </ng-container>
+        <!-- PICKUP LOCATION -->
+        <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Pickup location</dt>
+        <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">{{ record.metadata.pickup_location.name }}</dd>
+        <!-- SCOPE -->
+        <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Scope</dt>
+        <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">
+          <ng-container *ngIf="record.metadata.copy; else scopeLoan">{{ 'Copy' | translate }}</ng-container>
+          <ng-template #scopeLoan>{{ 'Loan' | translate }}</ng-template>
+        </dd>
+        <!-- PAGES -->
+        <ng-container *ngIf="record.metadata.copy && record.metadata.pages">
+          <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Pages</dt>
+          <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">{{ record.metadata.pages }}</dd>
+        </ng-container>
+        <!-- FOUND IN -->
+        <ng-container *ngIf="record.metadata.found_in">
+          <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Found in</dt>
+          <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">
+            <a href="{{ record.metadata.found_in.url }}">{{ record.metadata.found_in.url }}</a>
+            <span class="badge badge-light px-2 py-1 ml-2">{{ record.metadata.found_in.source }}</span>
+          </dd>
+        </ng-container>
+        <!-- NOTES -->
+        <ng-container *ngIf="record.metadata.notes && record.metadata.notes.length > 0">
+          <dt class="col-sm-12 col-md-4 col-lg-2 col-6 label-title" translate>Note</dt>
+          <dd class="col-sm-12 col-md-8 col-lg-10 col-6 pl-sm-3">
+            <blockquote>
+              <ul class="list-unstyled">
+                <li *ngFor="let note of record.metadata.notes | notesFilter:['public_note']"
+                    [innerHTML]="note.content | nl2br"></li>
+              </ul>
+            </blockquote>
+          </dd>
+        </ng-container>
+      </dl>
+    </section>
+  </div>
 </div>
 
 <!-- Detail -->
-<section id="ill-detail-{{ record.metadata.pid }}" [collapse]="isCollapsed" [isAnimated]="true" class="col-12">
-  <dl class="row pl-3">
-    <!-- PUBLISHER -->
-    <ng-container *ngIf="record.metadata.document.publisher">
-      <dt class="col-2 label-title" translate>Publisher</dt>
-      <dd class="col-10">{{ record.metadata.document.publisher }}</dd>
-    </ng-container>
-    <!-- YEAR -->
-    <ng-container *ngIf="record.metadata.document.year">
-      <dt class="col-2 label-title" translate>Year</dt>
-      <dd class="col-10">{{ record.metadata.document.year }}</dd>
-    </ng-container>
-    <!-- IDENTIFIER -->
-    <ng-container *ngIf="record.metadata.document.identifier">
-      <dt class="col-2 label-title" translate>Identifier</dt>
-      <dd class="col-10">{{ record.metadata.document.identifier }}</dd>
-    </ng-container>
-    <!-- PUBLISHED IN -->
-    <ng-container *ngIf="record.metadata.document.published_in">
-      <dt class="col-2 label-title" translate>Source</dt>
-      <dd class="col-10">
-        {{ record.metadata.document.published_in.journal_title }}
-        <ng-container *ngIf="record.metadata.document.published_in.volume || record.metadata.document.published_in.number">
-          {{ record.metadata.document.published_in | journalVolume }}
-        </ng-container>
-      </dd>
-    </ng-container>
-    <!-- PICKUP LOCATION -->
-    <dt class="col-2 label-title" translate>Pickup location</dt>
-    <dd class="col-10">{{ record.metadata.pickup_location.name }}</dd>
-    <!-- SCOPE -->
-    <dt class="col-2 label-title" translate>Scope</dt>
-    <dd class="col-10">
-      <ng-container *ngIf="record.metadata.copy; else scopeLoan">{{ 'Copy' | translate }}</ng-container>
-      <ng-template #scopeLoan>{{ 'Loan' | translate }}</ng-template>
-    </dd>
-    <!-- PAGES -->
-    <ng-container *ngIf="record.metadata.copy && record.metadata.pages">
-      <dt class="col-2 label-title" translate>Pages</dt>
-      <dd class="col-10">{{ record.metadata.pages }}</dd>
-    </ng-container>
-    <!-- FOUND IN -->
-    <ng-container *ngIf="record.metadata.found_in">
-      <dt class="col-2 label-title" translate>Found in</dt>
-      <dd class="col-10">
-        <a href="{{ record.metadata.found_in.url }}">{{ record.metadata.found_in.url }}</a>
-        <span class="badge badge-light px-2 py-1 ml-2">
-          {{ record.metadata.found_in.source }}
-        </span>
-      </dd>
-    </ng-container>
-    <!-- NOTES -->
-    <ng-container *ngIf="record.metadata.notes && record.metadata.notes.length > 0">
-      <dt class="col-2 label-title" translate>Note</dt>
-      <dd class="col-10">
-        <blockquote>
-        <ul class="list-unstyled">
-          <li
-            *ngFor="let note of record.metadata.notes | notesFilter:['public_note']"
-            [innerHTML]="note.content | nl2br"
-          ></li>
-        </ul>
-        </blockquote>
-      </dd>
-    </ng-container>
-  </dl>
-</section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.scss b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.scss
index af57ff096..f27603891 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.scss
+++ b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.scss
@@ -1,6 +1,7 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2022 RERO
+ * Copyright (C) 2022 UCLouvain
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,8 +16,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
- dl > dt,
- dl > dd {
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+
+:host:nth-child(even){
+  background-color: $light;
+}
+
+dt, dd {
    padding-left: 0;
    margin-bottom: 0;
  }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.spec.ts
index 667aa91df..5acd4c99c 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.spec.ts
@@ -94,28 +94,4 @@ describe('PatronProfileIllRequestComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
-
-  it('should display the document information button and link', () => {
-    const button = fixture.nativeElement.querySelector('button');
-    expect(button.attributes.id.textContent).toContain('ill-request-1');
-    const divs = fixture.nativeElement.querySelectorAll('div > div');
-    expect(divs[0].textContent).toContain('ill document title');
-    expect(divs[1].textContent).toContain('author1, author2');
-    const badges = divs[2].querySelectorAll('span');
-    expect(badges[0].attributes.class.textContent).toContain('badge-info');
-    expect(badges[0].textContent).toContain('ITEM_ON_LOAN');
-
-    const dd = fixture.nativeElement.querySelectorAll('#ill-detail-1 > dl > dd');
-    expect(dd[0].textContent).toContain('Document publisher');
-    expect(dd[1].textContent).toContain('2021');
-    expect(dd[2].textContent).toContain('Document:identifier');
-    expect(dd[3].textContent).toContain('Vol. {{ volume }} &mdash; n°. {{ number }}');
-    expect(dd[4].textContent).toContain('Pickup location');
-    expect(dd[5].textContent).toContain('Copy');
-    expect(dd[6].textContent).toContain('10-21');
-    const foundInLink = dd[7].querySelector('a');
-    expect(foundInLink.attributes.href.textContent).toContain('http://myurl.com');
-    expect(foundInLink.textContent).toContain('http://myurl.com');
-    expect(dd[8].textContent).toContain('note content');
-  });
 });
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.html b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.html
index 7a49d6042..0b91d4c74 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.html
@@ -18,8 +18,7 @@
 <section id="ill-request-section" class="container my-2">
   <div class="d-none d-lg-block">
     <div class="row bg-dark rounded text-light p-2">
-      <div class="col-5 pl-0" translate>Title</div>
-      <div class="col-5" translate>Authors</div>
+      <div class="col-10 pl-5" translate>Document</div>
       <div class="col-2 text-lg-right" translate>Status</div>
     </div>
   </div>
@@ -33,15 +32,16 @@
 
   <ng-template #display>
     <ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
-      <div id="loans-data">
-        <public-search-patron-profile-ill-request
-          *ngFor="let record of records; let index = index"
-          [ngClass]="{ 'bg-light': !(index % 2) }"
-          id="ill-request-{{ record.metadata.pid }}"
-          class="row my-1 p-2"
-          [record]="record">
-        </public-search-patron-profile-ill-request>
-        <shared-search-show-more-pager id="show-more-ill-requests" [paginator]="paginator"></shared-search-show-more-pager>
+      <div class="row border">
+        <div class="container-fluid">
+          <public-search-patron-profile-ill-request
+            *ngFor="let record of records"
+            [record]="record"
+            id="ill-request-{{ record.metadata.pid }}"
+            class="row border-bottom">
+          </public-search-patron-profile-ill-request>
+          <shared-search-show-more-pager id="show-more-ill-requests" [paginator]="paginator"></shared-search-show-more-pager>
+        </div>
       </div>
     </ng-container>
 
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.spec.ts
index fe00aaba2..e037060ca 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-requests.component.spec.ts
@@ -90,21 +90,14 @@ describe('PatronProfileIllRequestComponent', () => {
   });
 
   it('should display loading in progress', () => {
-    const loading = fixture.nativeElement.querySelectorAll('div')[6];
+    const loading = fixture.nativeElement.querySelectorAll('div')[5];
     expect(loading.textContent).toContain('Loading in progress');
   });
 
   it('should display the message no record', () => {
     patronProfileService.changeTab({ name: 'illRequest', count: 0 });
     fixture.detectChanges();
-    const message = fixture.nativeElement.querySelectorAll('div')[6];
+    const message = fixture.nativeElement.querySelectorAll('div')[5];
     expect(message.textContent).toContain('No ill request');
   });
-
-  it('should display the list of records', () => {
-    patronProfileService.changeTab({ name: 'illRequest', count: 1 });
-    fixture.detectChanges();
-    const elements = fixture.nativeElement.querySelectorAll('#loans-data public-search-patron-profile-ill-request');
-    expect(elements.length).toEqual(1);
-  });
 });
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html
index 7ba93724a..26b222bc4 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.html
@@ -14,79 +14,63 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="col-lg-4 col-md-6 col-sm-12 pl-0">
-  <button
-    id="loan-{{ record.metadata.pid }}"
-    type="button"
-    class="pl-0 pr-2 pt-0 btn btn-toogle"
-    (click)="isCollapsed = !isCollapsed"
-    [attr.aria-expanded]="!isCollapsed"
-    aria-controls="collapseEvent"
-  >
-    <i class="fa pr-0" [ngClass]="{ 'fa-caret-right': isCollapsed, 'fa-caret-down': !isCollapsed }"></i>
+
+<div class="d-flex container p-2" [ngClass]="{'callout callout-warning ':record.metadata.is_late}">
+  <button type="button" class="btn-show-more"
+          [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
+          (click)="isCollapsed = !isCollapsed"
+          [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
   </button>
-  <a href="/{{ viewcode }}/documents/{{ record.metadata.document.pid }}">{{ record.metadata.document.title | mainTitle }}</a>
-</div>
-<div class="col-lg-4 col-md-6 col-sm-12 ">
-  {{ record.metadata.library.name }}
-</div>
-<div class="col-lg-2 col-md-6 col-sm-6">
-  <span class="d-block" [ngClass]="{ 'font-weight-bold text-success': actionSuccess, '': !actionSuccess }">
-    {{ record.metadata.end_date | dateTranslate :'shortDate' }}
-  </span>
-  <!-- start badge renew -->
-  <ng-container *ngIf="record.metadata.extension_count && record.metadata.extension_count > 0">
-  <div>
-    <span class="badge badge-secondary font-weight-normal">
-      {{ record.metadata.extension_count }}
-      <ng-container *ngIf="record.metadata.extension_count > 1; else countSingular">
-        {{ 'renewals' | translate }}
-      </ng-container>
-      <ng-template #countSingular>
-        {{ 'renewal' | translate }}
-      </ng-template>
-    </span>
-  </div>
-  </ng-container>
-  <!-- end badge renew -->
-  <!-- start badge overdue -->
-  <ng-container *ngIf="record.metadata.is_late">
-  <div>
-    <span class="badge badge-warning font-weight-normal" translate>
-      overdue
-    </span>
+  <div class="container-fluid">
+    <div class="row">
+      <!-- DOCUMENT & ADDITIONAL DATA ===================================== -->
+      <public-search-patron-profile-document
+          [record]="record"
+          [showAdditionalInformation]="!isCollapsed"
+          [isAnimated]="true"
+          class="col-lg-8 col-12 pl-0"
+        >
+        <dl class="row" additional-metadata>
+          <dt class="col-sm-6 col-md-4 col-lg-3 label-title">Library</dt>
+          <dd class="col-sm-6 col-md-8 col-lg-9">{{ record.metadata.library.name }}</dd>
+        </dl>
+      </public-search-patron-profile-document>
+      <!-- DUE DATE & BADGES ============================================== -->
+      <div class="col-lg-2 col-md-6 col-sm-6 pl-0">
+        <div>
+          <span class="d-inline d-lg-none label-title font-weight-bold" translate>Due date</span>
+          <span [ngClass]="{ 'font-weight-bold text-success': actionSuccess}">
+            {{ record.metadata.end_date | dateTranslate :'shortDate' }}
+          </span>
+        </div>
+        <div *ngIf="record.metadata.extension_count && record.metadata.extension_count > 0" class="badge badge-secondary font-weight-normal">
+          {{ record.metadata.extension_count }}
+          {{ record.metadata.extension_count | i18nPlural: {'=1': 'renewal', 'other': 'renewals'} | translate }}
+        </div>
+        <div *ngIf="record.metadata.is_late" class="badge badge-warning font-weight-normal" translate>overdue</div>
+        <div *ngIf="isDueSoon" class="badge badge-secondary font-weight-normal" translate>approching due date</div>
+      </div>
+      <!-- ACTION BUTTONS COLUMN ========================================== -->
+      <div class="col-lg-2 col-md-6 col-sm-6 text-right pr-0">
+        <button
+          *ngIf="canExtend.can; else expendDisabled"
+          type="button"
+          class="btn btn-sm btn-primary"
+          (click)="renew()"
+          [disabled]="renewInProgress || actionDone"
+        >
+          <span *ngIf="renewInProgress" class="spinner-border spinner-border-sm mr-1" role="status"></span>
+          {{ 'Renew' | translate }}
+        </button>
+        <ng-template #expendDisabled>
+          <button
+            type="button"
+            class="btn btn-sm btn-primary disabled"
+            tooltip="{{ canExtend.reasons | arrayTranslate | join:'<br>'}}"
+            translate
+          >Renew</button>
+        </ng-template>
+      </div>
+    </div>
   </div>
-  </ng-container>
-  <!-- end badge overdue -->
-</div>
-<div class="col-lg-2 col-md-6 col-sm-6 text-right pr-0">
-  <ng-container *ngIf="canExtend.can; else expendDisabled">
-    <button
-      type="button"
-      class="btn btn-sm btn-primary"
-      (click)="renew()"
-      [disabled]="renewInProgress"
-    >
-      <ng-container *ngIf="!renewInProgress || actionDone; else inProcess">
-        {{ 'Renew' | translate }}
-      </ng-container>
-      <ng-template #inProcess>
-        <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
-        {{ 'Renew' | translate }}
-      </ng-template>
-    </button>
-  </ng-container>
-  <ng-template #expendDisabled>
-    <button
-      type="button"
-      class="btn btn-sm btn-primary disabled"
-      tooltip="{{ canExtend.reasons | arrayTranslate | join:'<br>'}}"
-      translate
-    >Renew</button>
-  </ng-template>
-</div>
-
-<!-- Document detail -->
-<div [collapse]="isCollapsed" [isAnimated]="true" class="col-12 mt-1">
-  <public-search-patron-profile-document [record]="record"></public-search-patron-profile-document>
 </div>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.scss b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.scss
new file mode 100644
index 000000000..8174b0987
--- /dev/null
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.scss
@@ -0,0 +1,25 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2022 RERO
+ * Copyright (C) 2022 UCLouvain
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+
+:host:nth-child(even){
+  background-color: $light;
+}
+
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.spec.ts
deleted file mode 100644
index a965ad231..000000000
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.spec.ts
+++ /dev/null
@@ -1,127 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2021 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { TranslateModule } from '@ngx-translate/core';
-import { CoreModule } from '@rero/ng-core';
-import { SharedModule, testUserPatronWithSettings, UserApiService, UserService } from '@rero/shared';
-import { cloneDeep } from 'lodash-es';
-import { ToastrModule } from 'ngx-toastr';
-import { of } from 'rxjs';
-import { ArrayTranslatePipe } from '../../../pipe/array-translate.pipe';
-import { PatronProfileMenuService } from '../../patron-profile-menu.service';
-import { PatronProfileLoanComponent } from './patron-profile-loan.component';
-
-describe('PatronProfileLoanComponent', () => {
-  let component: PatronProfileLoanComponent;
-  let fixture: ComponentFixture<PatronProfileLoanComponent>;
-  let userService: UserService;
-  let patronProfileMenuService: PatronProfileMenuService;
-
-  // NOTE FOR DEVS :
-  //   * 'is_late' means that the loan should be returned by doesn't yet. 'overdue'
-  //   * 'overdue' means that the loan match the first overdue step related to the corresponding CIPO.
-  //   So, a loan could be 'in_late' but doesn't yet 'overdue' if the first overdue step occurs 5 days after the end_date.
-  const record = {
-    metadata: {
-      pid: '1',
-      end_date: '2021-03-28 12:00:00',
-      extension_count: 2,
-      is_late: true,
-      state: 'ITEM_ON_LOAN',
-      renew: {
-        can: true
-      },
-      document: {
-        pid: '2',
-        title: [{ type: 'bf:Title', _text: 'Document title' }]
-      },
-      library: {
-        name: 'Library name'
-      }
-    }
-  };
-
-  const userApiServiceSpy = jasmine.createSpyObj('UserApiService', ['getLoggedUser']);
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [
-        PatronProfileLoanComponent,
-        ArrayTranslatePipe
-      ],
-      imports: [
-        HttpClientTestingModule,
-        TranslateModule.forRoot(),
-        ToastrModule.forRoot(),
-        SharedModule,
-        CoreModule
-      ],
-      providers: [
-        { provide: UserApiService, useValue: userApiServiceSpy }
-      ],
-      schemas: [NO_ERRORS_SCHEMA]
-    })
-    .compileComponents();
-  });
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PatronProfileLoanComponent);
-    component = fixture.componentInstance;
-    component.record = record;
-    userApiServiceSpy.getLoggedUser.and.returnValue(of(cloneDeep(testUserPatronWithSettings)));
-    userService = TestBed.inject(UserService);
-    userService.load().subscribe();
-    patronProfileMenuService = TestBed.inject(PatronProfileMenuService);
-    patronProfileMenuService.init();
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should display the document information button and link', () => {
-    component.record = record;
-    fixture.detectChanges();
-    const button = fixture.nativeElement.querySelector('button');
-    expect(button.attributes.id.textContent).toContain('loan-1');
-
-    const documentLink = fixture.nativeElement.querySelector('a');
-    expect(documentLink.attributes.href.textContent).toContain('/org1/documents/2');
-    expect(documentLink.textContent).toContain('Document title');
-
-    const divs = fixture.nativeElement.querySelectorAll('div');
-    expect(divs[1].textContent).toContain('Library name');
-    expect(divs[2].textContent).toContain('3/28/21');
-    expect(divs[3].textContent).toContain('2  renewals');
-    expect(divs[4].textContent).toContain('overdue');
-    expect(divs[5].querySelector('button').textContent).toContain('Renew');
-  });
-
-  it('should return a disabled button', () => {
-    const notRenewRecord = Object.assign(record);
-    notRenewRecord.metadata.renew = { can: false, reasons: ['no renew'] };
-    component.record = notRenewRecord;
-    fixture.detectChanges();
-    const button = fixture.nativeElement.querySelectorAll('div')[5].querySelector('button');
-    expect(button.attributes.class.textContent).toContain('disabled');
-  });
-});
-
-
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts
index ae4859d14..0330d6894 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts
@@ -16,42 +16,51 @@
  */
 import { Component, Input, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { RecordService } from '@rero/ng-core';
+import moment from 'moment';
 import { ToastrService } from 'ngx-toastr';
+import { finalize } from 'rxjs/operators';
 import { CanExtend, LoanApiService } from '../../../api/loan-api.service';
 import { PatronProfileMenuService } from '../../patron-profile-menu.service';
 
 @Component({
   selector: 'public-search-patron-profile-loan',
-  templateUrl: './patron-profile-loan.component.html'
+  templateUrl: './patron-profile-loan.component.html',
+  styleUrls: ['./patron-profile-loan.component.scss']
 })
 export class PatronProfileLoanComponent implements OnInit {
 
+  // COMPONENT ATTRIBUTES =====================================================
   /** Loan record */
   @Input() record: any;
 
   /** Document section is collapsed */
   isCollapsed = true;
-
   /** Renew action done */
   actionDone = false;
-
   /** Renew action success */
   actionSuccess = false;
-
   /** Request in progress */
   renewInProgress = false;
-
   /** Loan can extend */
   canExtend = {
     can: false,
     reasons: []
   };
 
+  // GETTER & SETTER ==========================================================
   /** Get current viewcode */
   get viewcode(): string {
     return this._patronProfileMenuService.currentPatron.organisation.code;
   }
+  /** Check if the loan should be returned in very few days */
+  get isDueSoon(): boolean {
+    return (this.record.metadata.is_late)
+      ? false
+      : new moment(this.record.metadata.due_soon_date) <= moment();
+  }
 
+  // CONSTRUCTOR & HOOKS ======================================================
   /**
    * Constructor
    * @param _loanApiService - LoanApiService
@@ -73,6 +82,7 @@ export class PatronProfileLoanComponent implements OnInit {
       .subscribe((response: CanExtend) => this.canExtend = response);
   }
 
+  // COMPONENTS FUNCTIONS =====================================================
   /** Renew the current loan */
   renew(): void {
     const patronPid = this._patronProfileMenuService.currentPatron.pid;
@@ -82,7 +92,9 @@ export class PatronProfileLoanComponent implements OnInit {
       item_pid: this.record.metadata.item.pid,
       transaction_location_pid: this.record.metadata.item.location.pid,
       transaction_user_pid: patronPid
-    }).subscribe((extendLoan: any) => {
+    })
+      .pipe(finalize(() => this.renewInProgress = false))
+      .subscribe((extendLoan: any) => {
       this.actionDone = true;
       if (extendLoan !== undefined) {
         this.actionSuccess = true;
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.html b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.html
index ec03b0608..01d3e546c 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.html
@@ -21,8 +21,8 @@
     <ng-core-sort-list
       class="col-xs-12 col-md-5 col-lg-3 pr-0"
       [options]="[
-      {value:'duedate', label:'Due date (earliest)' | translate, icon:'fa-sort-numeric-asc'},
-      {value:'-duedate', label:'Due date (latest)' | translate, icon:'fa-sort-numeric-desc'}
+        {value:'duedate', label:'Due date (earliest)' | translate, icon:'fa-sort-numeric-asc'},
+        {value:'-duedate', label:'Due date (latest)' | translate, icon:'fa-sort-numeric-desc'}
       ]"
       [useIcon]="true"
       (selectChange)="selectingSortCriteria($event)">
@@ -30,44 +30,39 @@
   </div>
 </section>
 
-<!-- table -->
+<!-- header -->
 <section id="loans-section" class="container my-2">
-  <!-- table header -->
   <div class="d-none d-lg-block">
     <div class="row bg-dark rounded text-light p-2">
-      <div class="col-4 pl-0" translate>Title</div>
-      <div class="col-4" translate>Library</div>
+      <div class="col-8 pl-5" translate>Document</div>
       <div class="col-2" translate>Due date</div>
       <div class="col-2">&nbsp;</div>
     </div>
   </div>
-  <!-- table content -->
-  <div>
-    <ng-container *ngIf="!loaded; else display">
-      <div class="row">
-        <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
-      </div>
-    </ng-container>
 
-    <ng-template #display>
-      <ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
-        <div id="loans-data">
+  <ng-container *ngIf="!loaded; else display">
+    <div class="row">
+      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
+    </div>
+  </ng-container>
+  <ng-template #display>
+    <ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
+      <div class="row border">
+        <div class="container-fluid">
           <public-search-patron-profile-loan
-          *ngFor="let loan of records; let index = index"
-          [ngClass]="{ 'bg-light': !(index % 2) }"
-          id="request-{{ loan.metadata.pid }}"
-          class="row my-1 p-2"
-          [record]="loan">
+            *ngFor="let loan of records"
+            [record]="loan"
+            id="loan-{{ loan.metadata.pid }}"
+            class="row border-bottom">
           </public-search-patron-profile-loan>
-          <shared-search-show-more-pager id="show-more-loans" [paginator]="paginator"></shared-search-show-more-pager>
-        </div>
-      </ng-container>
-
-      <ng-template #noRecord>
-        <div class="row">
-          <div class="col mt-2 font-weight-bold" translate>No loan</div>
         </div>
-      </ng-template>
+      </div>
+      <shared-search-show-more-pager id="show-more-loans" [paginator]="paginator" class="row"></shared-search-show-more-pager>
+    </ng-container>
+    <ng-template #noRecord>
+      <div class="row">
+        <div class="col mt-2 font-weight-bold" translate>No loan</div>
+      </div>
     </ng-template>
-  </div>
+  </ng-template>
 </section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.spec.ts
index 86ab7863b..1e442b3ca 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loans.component.spec.ts
@@ -87,7 +87,7 @@ describe('PatronProfileLoanComponent', () => {
   it('should display loading in progress', () => {
     component.loaded = false;
     fixture.detectChanges();
-    const loading = fixture.nativeElement.querySelectorAll('div')[7];
+    const loading = fixture.nativeElement.querySelectorAll('div')[6];
     expect(loading.textContent).toContain('Loading in progress');
   });
 
@@ -96,7 +96,7 @@ describe('PatronProfileLoanComponent', () => {
     spyOn(loanApiService, 'getOnLoan').and.returnValue(of(apiResponse));
     component.loaded = true;
     fixture.detectChanges();
-    const loading = fixture.nativeElement.querySelectorAll('div')[7];
+    const loading = fixture.nativeElement.querySelectorAll('div')[6];
     expect(loading.textContent).toContain('No loan');
   });
 
@@ -106,8 +106,5 @@ describe('PatronProfileLoanComponent', () => {
     component.paginator.setRecordsCount(1);
     component.loaded = true;
     component.records = apiResponse.hits.hits;
-    fixture.detectChanges();
-    const elements = fixture.nativeElement.querySelectorAll('#loans-data public-search-patron-profile-loan');
-    expect(elements.length).toEqual(1);
   });
 });
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.html b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.html
index dcb7fcfd7..906cd351b 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.html
@@ -14,70 +14,75 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ng-container *ngIf="record">
-  <div class="col-lg-4 col-md-6 col-sm-12 pl-0">
-    <button
-      id="request-{{ record.metadata.pid }}"
-      type="button"
-      class="pl-0 pr-2 pt-0 btn btn-toogle"
-      (click)="isCollapsed = !isCollapsed"
-      [attr.aria-expanded]="!isCollapsed"
-      aria-controls="collapseEvent"
-    >
-      <i class="fa pr-0" [ngClass]="{ 'fa-caret-right': isCollapsed, 'fa-caret-down': !isCollapsed }"></i>
-    </button>
-    <a href="/{{ viewcode }}/documents/{{ record.metadata.document.pid }}">{{ record.metadata.document.title | mainTitle }}</a>
-  </div>
-  <div class="col-lg-4 col-md-6 col-sm-12 ">
-    {{ record.metadata.pickup_name }}
-  </div>
-  <div class="col-lg-2 col-md-6 col-sm-6">
-    <!-- ITEM AT DESK -->
-    <ng-container *ngIf="record.metadata.state === 'ITEM_AT_DESK'">
-      <i class="fa fa-check"  title="{{ 'item at desk' | translate }}" aria-hidden="true"></i>
-      {{ 'to pick up' | translate }}
-      <ng-container *ngIf="record.metadata.request_expire_date">
-        {{ 'until' | translate }} {{ record.metadata.request_expire_date | dateTranslate: 'shortDate'}}
-      </ng-container>
-    </ng-container>
-
-    <!-- PENDING OR ITEM IN TRANSIT FOR PICKUP -->
-    <ng-container *ngIf="record.metadata.state === 'PENDING' || record.metadata.state === 'ITEM_IN_TRANSIT_FOR_PICKUP'">
-      <i class="fa fa-bullseye"  title="{{ 'pending' | translate }}" aria-hidden="true"></i>
-      <!-- TODO: Add expired date and remove "waiting" text
-      expected availability 00.00.0000  -->
-      {{ 'waiting' | translate }}
-    </ng-container>
 
-    <!-- PENDING -->
-    <ng-container *ngIf="record.metadata.state === 'PENDING' && record.metadata.rank && record.metadata.rank > 0">
-      <br>
-      <span [translate]="'(position {{ rank }} in waiting list)'" [translateParams]="{ rank: record.metadata.rank }"></span>
-    </ng-container>
-  </div>
-  <div class="col-lg-2 col-md-6 col-sm-6 p-0 text-right">
-    <ng-container *ngIf="record.metadata.state === 'PENDING' || record.metadata.state === 'ITEM_IN_TRANSIT_FOR_PICKUP'; else noAction">
-      <button
-        id="request-cancel-{{ record.metadata.pid }}"
-        type="button"
-        class="btn btn-sm btn-primary"
-        (click)="cancel()"
-        [disabled]="cancelInProgress"
-      >
-        <ng-container *ngIf="!cancelInProgress || actionDone; else inProcess">
-          {{ 'Cancel' | translate }}
+<div class="d-flex container p-2"
+     *ngIf="record"
+     [ngClass]="{'callout callout-success': record.metadata.state === 'ITEM_AT_DESK' }">
+  <button type="button" class="btn-show-more"
+          [ngClass]="{'btn-expanded': !isCollapsed, 'btn-collapsed': isCollapsed}"
+          (click)="isCollapsed = !isCollapsed"
+          [attr.aria-expanded]="!isCollapsed" aria-controls="collapse">
+  </button>
+  <div class="container-fluid">
+    <div class="row">
+      <!-- DOCUMENT & ADDITIONAL DATA ===================================== -->
+      <div class="col-lg-8 col-12 pl-0">
+        <public-search-patron-profile-document
+          [record]="record"
+          [showAdditionalInformation]="!isCollapsed"
+          [isAnimated]="true">
+        </public-search-patron-profile-document>
+        <dl class="row mt-2">
+          <dt class="col-sm-6 col-md-4 col-lg-3 label-title" translate>Pickup location</dt>
+          <dd class="col-sm-6 col-md-8 col-lg-9">{{ record.metadata.pickup_name }}</dd>
+        </dl>
+      </div>
+      <!-- STATUS ========================================================= -->
+      <dl class="col-lg-2 col-12 p-0 row">
+        <dt class="col-sm-6 col-md-4 d-inline d-lg-none label-title">Status</dt>
+        <dd class="col">
+          <!-- ITEM AT DESK -->
+          <ng-container *ngIf="record.metadata.state === 'ITEM_AT_DESK'">
+            <i class="fa fa-check text-success"  title="{{ 'item at desk' | translate }}" aria-hidden="true"></i>
+            {{ 'to pick up' | translate }}
+            <ng-container *ngIf="record.metadata.request_expire_date">
+              {{ 'until' | translate }} {{ record.metadata.request_expire_date | dateTranslate: 'shortDate'}}
+            </ng-container>
+          </ng-container>
+          <!-- PENDING OR ITEM IN TRANSIT FOR PICKUP -->
+          <ng-container *ngIf="record.metadata.state === 'PENDING' || record.metadata.state === 'ITEM_IN_TRANSIT_FOR_PICKUP'">
+            <i class="fa fa-ellipsis-h pr-1"  title="{{ 'pending' | translate }}" aria-hidden="true"></i>
+            <!-- TODO: Add expired date and remove "waiting" text
+            expected availability 00.00.0000  -->
+            {{ 'waiting' | translate }}
+          </ng-container>
+          <!-- PENDING -->
+          <ng-container *ngIf="record.metadata.state === 'PENDING' && record.metadata.rank && record.metadata.rank > 0">
+            <div [translate]="'(position {{ rank }} in waiting list)'" [translateParams]="{ rank: record.metadata.rank }"></div>
+          </ng-container>
+        </dd>
+      </dl>
+      <!-- ACTION BUTTONS ================================================= -->
+      <div class="col-lg-2 col-12 text-right">
+        <ng-container *ngIf="record.metadata.state === 'PENDING' || record.metadata.state === 'ITEM_IN_TRANSIT_FOR_PICKUP'; else noAction">
+          <button
+            id="request-cancel-{{ record.metadata.pid }}"
+            type="button"
+            class="btn btn-sm btn-primary"
+            (click)="cancel()"
+            [disabled]="cancelInProgress"
+          >
+            <ng-container *ngIf="!cancelInProgress || actionDone; else inProcess">
+              {{ 'Cancel' | translate }}
+            </ng-container>
+            <ng-template #inProcess>
+              <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
+              {{ 'Cancel' | translate }}
+            </ng-template>
+          </button>
         </ng-container>
-        <ng-template #inProcess>
-          <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
-          {{ 'Cancel' | translate }}
-        </ng-template>
-      </button>
-    </ng-container>
-    <ng-template #noAction>&nbsp;</ng-template>
-  </div>
-
-  <!-- Document detail -->
-  <div [collapse]="isCollapsed" [isAnimated]="true" class="col-12 mt-1">
-    <public-search-patron-profile-document [record]="record"></public-search-patron-profile-document>
+        <ng-template #noAction>&nbsp;</ng-template>
+      </div>
+    </div>
   </div>
-</ng-container>
+</div>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.scss b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.scss
new file mode 100644
index 000000000..9d02abc0d
--- /dev/null
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.scss
@@ -0,0 +1,28 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2022 RERO
+ * Copyright (C) 2022 UCLouvain
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/variables';
+
+:host:nth-child(even){
+  background-color: $light;
+}
+
+dl, dt, dd {
+  margin-bottom: 0;
+}
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.spec.ts
index 759b4c126..eb735f433 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.spec.ts
@@ -81,12 +81,8 @@ describe('PatronProfileRequestComponent', () => {
   it('should display the document information button and link', () => {
     component.record = record;
     fixture.detectChanges();
-    const button = fixture.nativeElement.querySelector('button');
-    expect(button.attributes.id.textContent).toContain('request-1');
-
-    const documentLink = fixture.nativeElement.querySelector('a');
-    expect(documentLink.attributes.href.textContent).toContain('/org1/documents/1');
-    expect(documentLink.textContent).toContain('Document title');
+    const documentLink = fixture.nativeElement.querySelector('public-search-patron-profile-document');
+    expect(documentLink.length === 1);
 
     const pickupName = fixture.nativeElement.querySelectorAll('div')[1];
     expect(pickupName.textContent).toContain('Pickup name');
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts
index ef2adaf6a..2fa3b0062 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts
@@ -23,7 +23,8 @@ import { PatronProfileService } from '../../patron-profile.service';
 
 @Component({
   selector: 'public-search-patron-profile-request',
-  templateUrl: './patron-profile-request.component.html'
+  templateUrl: './patron-profile-request.component.html',
+  styleUrls: ['./patron-profile-request.component.scss']
 })
 export class PatronProfileRequestComponent {
 
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.html b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.html
index 17d0a3a13..dac8cf0d0 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.html
@@ -17,14 +17,12 @@
 <section id="requests-section" class="container my-2">
   <div class="d-none d-lg-block">
     <div class="row bg-dark rounded text-light p-2">
-      <div class="col-4 pl-0" translate>Title</div>
-      <div class="col-4" translate>Pickup location</div>
-      <div class="col-2" translate>Status</div>
+      <div class="col-8 pl-5" translate>Document</div>
+      <div class="col-2">Status</div>
       <div class="col-2">&nbsp;</div>
     </div>
   </div>
 
-
   <ng-container *ngIf="!loaded; else display">
     <div class="row">
       <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
@@ -32,18 +30,17 @@
   </ng-container>
 
   <ng-template #display>
-    <ng-container *ngIf="paginator.getRecordsCount() > 0; else noRecord">
-      <div id="requests-data">
+    <div class="row border" *ngIf="paginator.getRecordsCount() > 0; else noRecord">
+      <div class="container-fluid">
         <public-search-patron-profile-request
-          *ngFor="let request of records; let index = index"
+          *ngFor="let request of records"
           [record]="request"
           id="request-{{ request.metadata.pid }}"
-          class="row my-1 p-2"
-          [ngClass]="{ 'bg-light': !(index % 2), 'border border-success': request.metadata.state === 'ITEM_AT_DESK' }">
+          class="row border-bottom">
         </public-search-patron-profile-request>
         <shared-search-show-more-pager id="show-more-requests" [paginator]="paginator"></shared-search-show-more-pager>
       </div>
-    </ng-container>
+    </div>
 
     <ng-template #noRecord>
       <div class="row">
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.spec.ts b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.spec.ts
index 75cb0d550..def0ae363 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.spec.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-requests.component.spec.ts
@@ -93,31 +93,21 @@ describe('PatronProfileRequestComponent', () => {
   it('should display the header and the loading in progress', () => {
     let headercolumn = fixture.nativeElement.querySelector(
       '#requests-section div:nth-child(1) div:nth-child(1) div:nth-child(1)');
-    expect(headercolumn.textContent).toContain('Title');
+    expect(headercolumn.textContent).toContain('Document');
     headercolumn = fixture.nativeElement.querySelector(
       '#requests-section div:nth-child(1) div:nth-child(1) div:nth-child(2)');
-    expect(headercolumn.textContent).toContain('Pickup location');
-    headercolumn = fixture.nativeElement.querySelector(
-      '#requests-section div:nth-child(1) div:nth-child(1) div:nth-child(3)');
     expect(headercolumn.textContent).toContain('Status');
   });
 
   it('should display loading in progress', () => {
-    const loading = fixture.nativeElement.querySelectorAll('div')[7];
+    const loading = fixture.nativeElement.querySelectorAll('div')[6];
     expect(loading.textContent).toContain('Loading in progress');
   });
 
   it('should display the message no record', () => {
     patronProfileService.changeTab({ name: 'request', count: 0 });
     fixture.detectChanges();
-    const loading = fixture.nativeElement.querySelectorAll('div')[7];
+    const loading = fixture.nativeElement.querySelectorAll('div')[6];
     expect(loading.textContent).toContain('No request');
   });
-
-  it('should display the list of records', () => {
-    patronProfileService.changeTab({ name: 'request', count: 1 });
-    fixture.detectChanges();
-    const elements = fixture.nativeElement.querySelectorAll('#requests-data public-search-patron-profile-request');
-    expect(elements.length).toEqual(1);
-  });
 });
diff --git a/projects/public-search/src/app/scss/styles.scss b/projects/public-search/src/app/scss/styles.scss
index 4c0fc3ed5..ae654871b 100644
--- a/projects/public-search/src/app/scss/styles.scss
+++ b/projects/public-search/src/app/scss/styles.scss
@@ -24,3 +24,53 @@
 .toast-container .ngx-toastr {
   width: 450px !important; // override width for all toastr message
 }
+
+.label-title:after {
+  content: ":"
+}
+
+/* CALLOUT PANEL */
+// source: https://codepen.io/superjaberwocky/pen/AXdEWj
+.callout {
+  border-left: 5px solid $border-color;
+}
+@each $name,$color in (primary,$primary),(success,$success),(danger,$danger),(warning,$warning),(info,$info), (dark,$dark) {
+  .callout-#{$name} {
+    border-color: $color !important;
+  }
+  .callout-bg-#{$name} {
+    background-color: theme-color-level(#{$name}, -10) !important;
+    *[class*='btn-outline-']:not(:hover) {
+      background-color: white;
+    }
+  }
+}
+
+/* SHOW MORE BUTTON ====================================================== */
+.btn-show-more {
+  border: $border-width solid $border-color;
+  border-radius: 2rem;
+  height: 30px;
+  min-width: 30px;
+  background-color: $white;
+  margin-right: map-get($spacers, 3);
+  font-size: $font-size-base;
+  outline: none !important;
+
+  &.btn-expanded::before {
+    font-family: 'FontAwesome';
+    font-weight: 100;
+    content: " \f0d7";
+  }
+
+  &.btn-collapsed::before {
+    font-family: 'FontAwesome';
+    font-weight: 100;
+    content: " \f0da";
+  }
+}
+.card-header .btn-show-more {
+  border-color: $card-border-color;
+  font-size: $font-size-base;
+  margin-right: map-get($spacers, 2);
+}