diff --git a/angular.json b/angular.json
index 24a30d169..24d3f0227 100644
--- a/angular.json
+++ b/angular.json
@@ -41,13 +41,7 @@
               }
             ],
             "styles": [
-              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeflex/primeflex.min.css",
-              "node_modules/ngx-spinner/animations/ball-zig-zag.css",
-              "projects/admin/src/app/scss/styles.scss",
-              "projects/shared/src/scss/styles.scss"
+              "projects/admin/src/app/scss/styles.scss"
             ],
             "scripts": [],
             "vendorChunk": true,
@@ -77,7 +71,7 @@
                 {
                   "type": "initial",
                   "maximumWarning": "2.5mb",
-                  "maximumError": "7mb"
+                  "maximumError": "9mb"
                 },
                 {
                   "type": "anyComponentStyle",
@@ -113,7 +107,6 @@
             "tsConfig": "projects/admin/tsconfig.spec.json",
             "karmaConfig": "projects/admin/karma.conf.js",
             "assets": [],
-            "styles": ["projects/admin/src/app/scss/styles.scss"],
             "scripts": []
           }
         },
@@ -169,15 +162,15 @@
               }
             ],
             "styles": [
-              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeflex/primeflex.min.css",
-              "node_modules/ngx-spinner/animations/ball-zig-zag.css",
-              "projects/public-search/src/app/scss/styles.scss",
-              "projects/shared/src/scss/styles.scss"
+              "projects/public-search/src/app/scss/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -277,11 +270,7 @@
               }
             ],
             "styles": [
-              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeflex/primeflex.min.css",
-              "projects/shared/src/scss/styles.scss"
+              "projects/public-search/src/app/scss/bootstrap_styles.scss"
             ],
             "scripts": [],
             "vendorChunk": true,
@@ -299,6 +288,9 @@
                   "with": "projects/public-search/src/environments/environment.prod.ts"
                 }
               ],
+              "styles": [
+                "projects/public-search/src/app/scss/styles.scss"
+              ],
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
@@ -405,10 +397,7 @@
               }
             ],
             "styles": [
-              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeflex/primeflex.min.css"
+              "projects/public-search/src/app/scss/styles.scss"
             ],
             "scripts": [],
             "vendorChunk": true,
@@ -556,12 +545,7 @@
               }
             ],
             "styles": [
-              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeflex/primeflex.min.css",
-              "projects/public-search/src/app/scss/styles.scss",
-              "projects/shared/src/scss/styles.scss"
+              "projects/public-search/src/app/scss/styles.scss"
             ],
             "scripts": [],
             "vendorChunk": true,
@@ -673,13 +657,15 @@
               }
             ],
             "styles": [
-              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeflex/primeflex.min.css",
-              "projects/shared/src/scss/styles.scss"
+              "projects/public-search/src/app/scss/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
@@ -781,13 +767,15 @@
               }
             ],
             "styles": [
-              "node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
-              "node_modules/primeng/resources/primeng.min.css",
-              "node_modules/primeicons/primeicons.css",
-              "node_modules/primeflex/primeflex.min.css",
-              "projects/shared/src/scss/styles.scss"
+              "projects/public-search/src/app/scss/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
           },
           "configurations": {
             "production": {
diff --git a/package-lock.json b/package-lock.json
index e79b9c8b1..70d75668b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,7 +28,7 @@
         "@ngx-loading-bar/http-client": "^6.0.0",
         "@ngx-loading-bar/router": "^6.0.0",
         "@ngx-translate/core": "^15.0.0",
-        "@rero/ng-core": "^17.2.3",
+        "@rero/ng-core": "^17.3.0",
         "@swimlane/ngx-charts": "^20.5.0",
         "@vpoppy/ngx-translate-extract": "^9.0.0",
         "bootstrap": "^4.6.2",
@@ -42,8 +42,8 @@
         "marked": "^10.0.0",
         "ngx-spinner": "^16.0.0",
         "primeflex": "^3.3.1",
-        "primeicons": "^6.0.1",
-        "primeng": "^17.14.1",
+        "primeicons": "^7.0.0",
+        "primeng": "^17.18.0",
         "rxjs": "^7.8.1",
         "simple-isbn": "^1.1.5",
         "tslib": "^2.6.0",
@@ -4003,9 +4003,9 @@
       }
     },
     "node_modules/@rero/ng-core": {
-      "version": "17.2.3",
-      "resolved": "https://registry.npmjs.org/@rero/ng-core/-/ng-core-17.2.3.tgz",
-      "integrity": "sha512-K5isydJVTrWYXV6ZnpG+xEfDqDXa5yCezgWNdr7P8P3HiOtnKZg4GZ1xEwvS46sPMmQdV/+l93xN6MjLQQIfiA==",
+      "version": "17.3.0",
+      "resolved": "https://registry.npmjs.org/@rero/ng-core/-/ng-core-17.3.0.tgz",
+      "integrity": "sha512-QNdrfZ41JmSt4I3RTfcc/VCtIGYDTscj9v9DajNJGvEZM9dakQkFyT6+w7c+p5UF4Te7tM9fdAXCfuCuHTmvFg==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -12902,9 +12902,9 @@
       "integrity": "sha512-zaOq3YvcOYytbAmKv3zYc+0VNS9Wg5d37dfxZnveKBFPr7vEIwfV5ydrpiouTft8MVW6qNjfkaQphHSnvgQbpQ=="
     },
     "node_modules/primeicons": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
-      "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA=="
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-7.0.0.tgz",
+      "integrity": "sha512-jK3Et9UzwzTsd6tzl2RmwrVY/b8raJ3QZLzoDACj+oTJ0oX7L9Hy+XnVwgo4QVKlKpnP/Ur13SXV/pVh4LzaDw=="
     },
     "node_modules/primelocale": {
       "version": "1.0.3",
diff --git a/package.json b/package.json
index 172f0bd59..a8d05172d 100644
--- a/package.json
+++ b/package.json
@@ -78,15 +78,15 @@
     "@angular/platform-browser-dynamic": "^17.1.0",
     "@angular/router": "^17.1.0",
     "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
-    "@ngneat/hotkeys": "^4.0.0",
     "@ng-bootstrap/ng-bootstrap": "^16.0.0",
+    "@ngneat/hotkeys": "^4.0.0",
     "@ngx-formly/core": "^6.3.6",
     "@ngx-formly/primeng": "^6.3.6",
     "@ngx-loading-bar/core": "^6.0.0",
     "@ngx-loading-bar/http-client": "^6.0.0",
     "@ngx-loading-bar/router": "^6.0.0",
     "@ngx-translate/core": "^15.0.0",
-    "@rero/ng-core": "^17.2.3",
+    "@rero/ng-core": "^17.3.0",
     "@swimlane/ngx-charts": "^20.5.0",
     "@vpoppy/ngx-translate-extract": "^9.0.0",
     "bootstrap": "^4.6.2",
@@ -100,8 +100,8 @@
     "marked": "^10.0.0",
     "ngx-spinner": "^16.0.0",
     "primeflex": "^3.3.1",
-    "primeicons": "^6.0.1",
-    "primeng": "^17.14.1",
+    "primeicons": "^7.0.0",
+    "primeng": "^17.18.0",
     "rxjs": "^7.8.1",
     "simple-isbn": "^1.1.5",
     "tslib": "^2.6.0",
diff --git a/projects/admin/src/app/acquisition/acquisition.scss b/projects/admin/src/app/acquisition/acquisition.scss
index f763d9579..256beaf66 100644
--- a/projects/admin/src/app/acquisition/acquisition.scss
+++ b/projects/admin/src/app/acquisition/acquisition.scss
@@ -19,13 +19,16 @@
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
 @import '../scss/variables';
+// @import "primeflex/primeflex";
+// @import "@rero/ng-core/assets/scss/ng-core";
 
 .account {
 
   $DEPTH-PADDING: 50px;
   $MAX-DEPTH: 10;
 
-  margin-bottom: map-get($spacers, 1);
+  // @extend .mb-1;
+
 
   &:hover{
     background-color: #F8F8F8;
@@ -53,7 +56,7 @@
 // ===========================================================================
 .receipt {
   .account-number {
-    font-size: $small-font-size;
+    // @extend .text-sm;
     color: $secondary;
     font-weight: bold;
     &:before {
diff --git a/projects/admin/src/app/acquisition/formly/wrapper/input-no-label.wrapper.ts b/projects/admin/src/app/acquisition/formly/wrapper/input-no-label.wrapper.ts
index 89d27689b..f50e8a7b4 100644
--- a/projects/admin/src/app/acquisition/formly/wrapper/input-no-label.wrapper.ts
+++ b/projects/admin/src/app/acquisition/formly/wrapper/input-no-label.wrapper.ts
@@ -23,8 +23,8 @@ template: `
   <div class="my-2">
     <ng-container #fieldComponent></ng-container>
     @if (showError) {
-      <div class="invalid-feedback d-block">
-        <formly-validation-message [field]="field"></formly-validation-message>
+      <div class="text-error my-2">
+        <formly-validation-message [field]="field" />
       </div>
     }
   </div>
diff --git a/projects/admin/src/app/app.module.ts b/projects/admin/src/app/app.module.ts
index 7fee58ed9..9df1c619c 100644
--- a/projects/admin/src/app/app.module.ts
+++ b/projects/admin/src/app/app.module.ts
@@ -58,9 +58,7 @@ import { MenuDashboardComponent } from './menu/menu-dashboard/menu-dashboard.com
 import { MenuDisplayComponent } from './menu/menu-display/menu-display.component';
 import { MenuUserComponent } from './menu/menu-user/menu-user.component';
 import { CountryCodeTranslatePipe } from './pipe/country-code-translate.pipe';
-import { DocumentProvisionActivityPipe } from './pipe/document-provision-activity.pipe';
 import { ItemInCollectionPipe } from './pipe/item-in-collection.pipe';
-import { MainTitleRelationPipe } from './pipe/main-title-relation.pipe';
 import { MarcPipe } from './pipe/marc.pipe';
 import { NotesFormatPipe } from './pipe/notes-format.pipe';
 import { PatronNamePipe } from './pipe/patron-name.pipe';
@@ -99,13 +97,6 @@ import { CircPolicyDetailViewComponent } from './record/detail-view/circ-policy-
 import { CollectionDetailViewComponent } from './record/detail-view/collection-detail-view/collection-detail-view.component';
 import { CollectionItemsComponent } from './record/detail-view/collection-detail-view/collection-items/collection-items.component';
 import { DialogImportComponent } from './record/detail-view/document-detail-view/dialog-import/dialog-import.component';
-import { DescriptionZoneComponent } from './record/detail-view/document-detail-view/document-description/description-zone/description-zone.component';
-import {
-  DocumentDescriptionComponent
-} from './record/detail-view/document-detail-view/document-description/document-description.component';
-import {
-  OtherEditionComponent
-} from './record/detail-view/document-detail-view/document-description/other-edition/other-edition.component';
 import { DocumentDetailViewComponent } from './record/detail-view/document-detail-view/document-detail-view.component';
 import { DocumentDetailComponent } from './record/detail-view/document-detail-view/document-detail/document-detail.component';
 import { EntitiesRelatedComponent } from './record/detail-view/document-detail-view/entities-related/entities-related.component';
@@ -203,9 +194,9 @@ import { CurrentLibraryPermissionValidator } from './utils/permissions';
 import { CustomShortcutHelpComponent } from './widgets/custom-shortcut-help/custom-shortcut-help.component';
 import { FrontpageComponent } from './widgets/frontpage/frontpage.component';
 
+import { HotkeysShortcutPipe } from '@ngneat/hotkeys';
 import { EntityAutocompleteComponent } from './record/editor/formly/primeng/entity-autocomplete/entity-autocomplete.component';
 import { RemoteAutocompleteService as UiRemoteAutocompleteService } from './record/editor/formly/primeng/remote-autocomplete/remote-autocomplete.service';
-import { HotkeysShortcutPipe } from '@ngneat/hotkeys';
 
 /** Init application factory */
 export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
@@ -292,11 +283,6 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     CirculationLogComponent,
     ItemInCollectionPipe,
     CountryCodeTranslatePipe,
-    DocumentDescriptionComponent,
-    OtherEditionComponent,
-    DescriptionZoneComponent,
-    DocumentProvisionActivityPipe,
-    MainTitleRelationPipe,
     HoldingOrganisationComponent,
     ExpectedIssueComponent,
     ReceivedIssueComponent,
diff --git a/projects/admin/src/app/circulation/main-request/main-request.component.html b/projects/admin/src/app/circulation/main-request/main-request.component.html
index b75250f6d..dd265ff9c 100644
--- a/projects/admin/src/app/circulation/main-request/main-request.component.html
+++ b/projects/admin/src/app/circulation/main-request/main-request.component.html
@@ -37,18 +37,16 @@
       <label for="auto-refresh" translate>Auto refresh</label>
     </div>
     @if (refreshInterval > 0) {
-      <ng-core-sort-list
+      <ng-core-menu-sort
         class="pl-3"
-        [options]="refreshOptions"
-        [useIcon]="true"
+        [config]="sortingCriteria"
         (selectChange)="selectingIntervalTimer($event)"
       />
     }
     <!-- Sorting loans -->
-    <ng-core-sort-list
+    <ng-core-menu-sort
       class="pl-3"
-      [options]="sortingCriteria"
-      [useIcon]="true"
+      [config]="sortingCriteria"
       (selectChange)="selectingSortCriteria($event)"
     />
   </div>
diff --git a/projects/admin/src/app/circulation/patron/loan/loan.component.html b/projects/admin/src/app/circulation/patron/loan/loan.component.html
index d2bbcd8b0..ad9747bc7 100644
--- a/projects/admin/src/app/circulation/patron/loan/loan.component.html
+++ b/projects/admin/src/app/circulation/patron/loan/loan.component.html
@@ -45,8 +45,8 @@
     <div class="col"></div>
     <!-- Sorting loans -->
     <div class="col-md-4 d-flex align-items-end justify-content-end">
-      <ng-core-sort-list
-        [options]="[
+      <ng-core-menu-sort
+        [config]="[
           {value:'-transactiondate', label:'Transaction date (desc)' | translate, icon:'fa-sort-numeric-desc'},
           {value:'transactiondate', label:'Transaction date' | translate, icon:'fa-sort-numeric-asc'},
           {value:'-duedate', label:'Due date (desc)' | translate, icon:'fa-sort-numeric-desc'},
@@ -54,7 +54,6 @@
           {value:'-location', label:'Location (desc)' | translate, icon: 'fa-sort-numeric-desc'},
           {value:'location', label:'Location' | translate, icon: 'fa-sort-numeric-asc'}
         ]"
-        [useIcon]="true"
         (selectChange)="selectingSortCriteria($event)"
       />
     </div>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html
index 1d4842e0d..bb55a6a77 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html
+++ b/projects/admin/src/app/record/detail-view/document-detail-view/document-detail-view.component.html
@@ -276,7 +276,7 @@ <h3 id="{{ 'doc-altgr-title-' + i }}">{{ altgr_title }}</h3>
     <ng-template pTemplate="header">
       <i class="fa fa-bars mr-1"></i> {{ "Description" | translate }}
     </ng-template>
-    <admin-document-description [record]="record" />
+    <shared-document-description [record]="record" />
   </p-tabPanel>
 
   <!-- ENTITIES RELATED -->
diff --git a/projects/admin/src/app/scss/styles.scss b/projects/admin/src/app/scss/styles.scss
index 8da9ea582..6cfa296b8 100644
--- a/projects/admin/src/app/scss/styles.scss
+++ b/projects/admin/src/app/scss/styles.scss
@@ -16,9 +16,23 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+ :root {
+  font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto,
+    "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+    Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 0.875rem;
+}
+
+@layer bootstrap, rero-ils-ui, primeng;
+@import '../../../../shared/src/scss/styles.scss';
 @import 'font-awesome/scss/font-awesome';
+@layer bootstrap {
 @import 'variables';
 @import 'bootstrap/scss/bootstrap';
+@import 'bootstrap/scss/_functions';
+@import 'bootstrap/scss/_mixins';
+@import 'bootstrap/scss/_variables';
 
 
 html [type=button] {
@@ -94,12 +108,6 @@ button.disabled {
   border-bottom: 0;
 }
 
-.rero-ils-external-link:after {
-  font-family: 'FontAwesome';
-  font-size: $font-size-very-small;
-  vertical-align: top;
-  content: " \f08e";
-}
 
 span.no-data {
   font-style: italic;
@@ -405,3 +413,4 @@ pre {
     }
   }
 }
+}
diff --git a/projects/admin/src/index.html b/projects/admin/src/index.html
index f255303cf..4572e3091 100644
--- a/projects/admin/src/index.html
+++ b/projects/admin/src/index.html
@@ -9,6 +9,6 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
 </head>
 <body class="d-flex flex-column">
-    <admin-root></admin-root>
+    <admin-root class="rero-ils-ui"></admin-root>
 </body>
 </html>
diff --git a/projects/public-holdings-items/src/app/app.module.ts b/projects/public-holdings-items/src/app/app.module.ts
index a0c79a181..b05a8351d 100644
--- a/projects/public-holdings-items/src/app/app.module.ts
+++ b/projects/public-holdings-items/src/app/app.module.ts
@@ -29,15 +29,19 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { CoreConfigService, CoreModule, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
 import { SharedModule } from '@rero/shared';
+import { AccordionModule } from 'primeng/accordion';
+import { DividerModule } from 'primeng/divider';
+import { DocumentDetailViewComponent } from 'projects/public-search/src/app/document-detail/document-detail-view/document-detail-view.component';
+import { ElectronicHoldingsComponent } from 'projects/public-search/src/app/document-detail/document-detail-view/holdings/electronic-holdings/electronic-holdings.component';
 import { HoldingComponent } from 'projects/public-search/src/app/document-detail/holdings/holding/holding.component';
 import { HoldingsComponent } from 'projects/public-search/src/app/document-detail/holdings/holdings.component';
 import { ItemsComponent } from 'projects/public-search/src/app/document-detail/holdings/items/items.component';
 import { ItemComponent } from 'projects/public-search/src/app/document-detail/item/item.component';
 import { PickupLocationComponent } from 'projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component';
 import { RequestComponent } from 'projects/public-search/src/app/document-detail/request/request.component';
+import { Observable } from 'rxjs';
 import { AppConfigService } from './app-config-service.service';
 import { AppInitializerService } from './app-initializer.service';
-import { Observable } from 'rxjs';
 
 /** function to instantiate the application  */
 export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
@@ -51,11 +55,15 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
         ItemComponent,
         ItemsComponent,
         PickupLocationComponent,
-        RequestComponent
+        RequestComponent,
+        DocumentDetailViewComponent,
+        ElectronicHoldingsComponent
     ],
     imports: [
+      AccordionModule,
         BrowserModule,
         BrowserAnimationsModule,
+        DividerModule,
         RouterModule.forRoot([]),
         HttpClientModule,
         FormsModule,
@@ -90,9 +98,9 @@ export class AppModule implements DoBootstrap {
   private injector: Injector = inject(Injector);
 
   ngDoBootstrap(): void {
-    if (!customElements.get('public-search-holdings')) {
-      const searchBar = createCustomElement(HoldingsComponent, { injector: this.injector });
-      customElements.define('public-search-holdings', searchBar);
+    if (!customElements.get('public-search-document')) {
+      const searchBar = createCustomElement(DocumentDetailViewComponent, { injector: this.injector });
+      customElements.define('public-search-document', searchBar);
     }
   }
 }
diff --git a/projects/public-holdings-items/src/index.html b/projects/public-holdings-items/src/index.html
index 3e58eef95..ad9c950a8 100644
--- a/projects/public-holdings-items/src/index.html
+++ b/projects/public-holdings-items/src/index.html
@@ -23,24 +23,36 @@
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <!-- keep this to check that the webcomponent is isolated.-->
     <link
       href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
       rel="stylesheet"
       integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
       crossorigin="anonymous"
     />
-    <link
+    <!-- <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
       integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
       crossorigin="anonymous"
-    />
+    /> -->
+    <style>
+      .container {
+        width: 960px;
+        margin: auto;
+      }
+    </style>
   </head>
   <body class="d-flex flex-column">
     <div class="container">
       <div class="align-self-center justify-content-between row">
         <h4 class="col-12">Document holdings items</h4>
-        <public-search-holdings documentpid="2000150" viewcode="global" class="col-12"></public-search-holdings>
+        <div class="col rero-ils-ui">
+        <public-search-document showinfo="true"
+        documentpid="679" viewcode="global" class="rero-ils-ui" >
+          <more-info>For babeltec.</more-info>
+        </public-search-holdings>
+      </div>
       </div>
     </div>
   </body>
diff --git a/projects/public-patron-profile/src/app/app.module.ts b/projects/public-patron-profile/src/app/app.module.ts
index 4d19b7546..90f8c9456 100644
--- a/projects/public-patron-profile/src/app/app.module.ts
+++ b/projects/public-patron-profile/src/app/app.module.ts
@@ -14,19 +14,14 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { HttpClient, HttpClientModule, HttpClientXsrfModule } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, inject, Injector, NgModule } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';
-import { FormlyModule } from '@ngx-formly/core';
-import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
-import { LoadingBarModule } from '@ngx-loading-bar/core';
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-import { CoreConfigService, CoreModule, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
+import { CoreConfigService, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
 import { SharedModule } from '@rero/shared';
 import { PatronProfileDocumentComponent } from 'projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component';
 import { PatronProfileFeeComponent } from 'projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component';
@@ -54,11 +49,9 @@ import { PatronProfileComponent } from 'projects/public-search/src/app/patron-pr
 import { ArrayTranslatePipe } from 'projects/public-search/src/app/pipe/array-translate.pipe';
 import { JournalVolumePipe } from 'projects/public-search/src/app/pipe/journal-volume.pipe';
 import { LoanStatusBadgePipe } from 'projects/public-search/src/app/pipe/loan-status-badge.pipe';
-import { StatusBadgePipe } from 'projects/public-search/src/app/pipe/status-badge.pipe';
 import { Observable } from 'rxjs';
 import { AppConfigService } from './app-config-service.service';
 import { AppInitializerService } from './app-initializer.service';
-import { TabViewModule } from 'primeng/tabview';
 
 /** function to instantiate the application  */
 export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
@@ -84,22 +77,12 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     PatronProfileHistoryComponent,
     PatronProfileMenuComponent,
     JournalVolumePipe,
-    StatusBadgePipe,
     LoanStatusBadgePipe
   ],
   imports: [
-    BrowserModule,
     BrowserAnimationsModule,
-    RouterModule.forRoot([]),
-    HttpClientModule,
-    HttpClientXsrfModule,
-    FormsModule,
-    FormlyModule.forRoot(),
-    FormlyPrimeNGModule,
-    CoreModule,
     RecordModule,
-    ReactiveFormsModule,
-    TabViewModule,
+    RouterModule.forRoot([]),
     TranslateModule.forRoot({
       loader: {
         provide: BaseTranslateLoader,
@@ -109,8 +92,7 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
       isolate: false
     }),
     SharedModule,
-    LoadingBarHttpClientModule,
-    LoadingBarModule
+    LoadingBarHttpClientModule
   ],
   providers: [
     { provide: TranslateService, useClass: NgCoreTranslateService },
diff --git a/projects/public-patron-profile/src/index.html b/projects/public-patron-profile/src/index.html
index 0b24b4e77..47919c40f 100644
--- a/projects/public-patron-profile/src/index.html
+++ b/projects/public-patron-profile/src/index.html
@@ -29,20 +29,25 @@
       integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
       crossorigin="anonymous"
     />
-    <link
+    <!-- <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
       integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
       crossorigin="anonymous"
-    />
+    /> -->
+    <style>
+      :root {
+        font-size: 1rem;
+      }
+      .container {
+        max-width: 960px;
+        margin: auto;
+      }
+    </style>
   </head>
-  <body class="d-flex flex-column">
-    <container>
-      <div class="align-self-center justify-content-between ml-5 mb-5">
-        <div class="container mt-2">
-          <public-patron-profile language="fr" viewcode="aoste"></public-patron-profile>
-        </div>
-      </div>
-    </container>
+  <body>
+    <div class="container">
+      <public-patron-profile language="fr" viewcode="aoste" class="rero-ils-ui" />
+    </div>
   </body>
 </html>
diff --git a/projects/public-search/src/app/api/holdings-api.service.ts b/projects/public-search/src/app/api/holdings-api.service.ts
index 84b038285..690556598 100644
--- a/projects/public-search/src/app/api/holdings-api.service.ts
+++ b/projects/public-search/src/app/api/holdings-api.service.ts
@@ -42,8 +42,7 @@ export class HoldingsApiService extends BaseApi implements IAvailabilityService
    */
   getHoldingsByDocumentPidAndViewcode(
     documentPid: string, viewcode: string, page: number, itemsPerPage: number = 5): Observable<QueryResponse> {
-    const query = `document.pid:${documentPid}
-    AND ((holdings_type:standard AND public_items_count:[1 TO *]) OR holdings_type:serial)`;
+    const query = `document.pid:${documentPid} AND ((holdings_type:standard AND public_items_count:[1 TO *]) OR holdings_type:serial) NOT _masked:true`;
     return this.recordService
     .getRecords(
       'holdings', query, page, itemsPerPage, undefined, { view: viewcode },
@@ -51,6 +50,22 @@ export class HoldingsApiService extends BaseApi implements IAvailabilityService
     ).pipe(map((response: Record) => response.hits));
   }
 
+  /**
+   * Get Electronic Holdings by document pid and viewcode
+   * @param documentPid - string
+   * @param viewcode - string
+   * @return Observable
+   */
+    getElectronicHoldingsByDocumentPidAndViewcode(
+      documentPid: string, viewcode: string, page: number, itemsPerPage: number = 5): Observable<QueryResponse> {
+      const query = `document.pid:${documentPid} AND  holdings_type:electronic NOT _masked:true`;
+      return this.recordService
+      .getRecords(
+        'holdings', query, page, itemsPerPage, undefined, { view: viewcode },
+        BaseApi.reroJsonheaders, 'organisation_library_location'
+      ).pipe(map((response: Record) => response.hits));
+    }
+
   /**
    * Holding Can request
    * @param holdingPid - Holding pid
diff --git a/projects/public-search/src/app/app.module.ts b/projects/public-search/src/app/app.module.ts
index f9957b07a..3115623c3 100644
--- a/projects/public-search/src/app/app.module.ts
+++ b/projects/public-search/src/app/app.module.ts
@@ -25,7 +25,7 @@ import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
 import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
 import { BucketNameService as CoreBucketNameService, CoreConfigService, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
-import { RemoteSearchComponent, SharedModule, UserService } from '@rero/shared';
+import { PrimeNgImportModule, RemoteSearchComponent, SharedModule, UserService } from '@rero/shared';
 import { AppConfigService } from './app-config.service';
 import { AppInitializerService } from './app-initializer.service';
 import { AppRoutingModule } from './app-routing.module';
@@ -38,6 +38,7 @@ import { CustomRequestInterceptor } from './interceptor/custom-request.intercept
 import { MainComponent } from './main/main.component';
 import { BucketNameService } from './service/bucket-name.service';
 import { Observable } from 'rxjs';
+import { DividerModule } from 'primeng/divider';
 
 /** function to instantiate the application  */
 export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
@@ -57,8 +58,8 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
         BrowserModule,
         BrowserAnimationsModule,
         AppRoutingModule,
-        HttpClientModule,
         RecordModule,
+        DividerModule,
         TranslateModule.forRoot({
             loader: {
                 provide: BaseTranslateLoader,
@@ -69,8 +70,7 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
         }),
         SharedModule,
         LoadingBarHttpClientModule,
-        LoadingBarRouterModule,
-        LoadingBarModule
+        LoadingBarRouterModule
     ],
     providers: [
         { provide: APP_INITIALIZER, useFactory: appInitFactory, deps: [AppInitializerService, UserService], multi: true },
diff --git a/projects/public-search/src/app/collection-brief/collection-brief.component.html b/projects/public-search/src/app/collection-brief/collection-brief.component.html
index b59700644..f8441638a 100644
--- a/projects/public-search/src/app/collection-brief/collection-brief.component.html
+++ b/projects/public-search/src/app/collection-brief/collection-brief.component.html
@@ -16,13 +16,13 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (record) {
-  <h5 class="mb-0 card-title">
+  <h4>
     <a id="collection-link" [href]="detailUrl.link">{{ record.metadata.title }}</a>
     @if (record.metadata.collection_id) {
       ({{ record.metadata.collection_id }})
     }
-  </h5>
-  <div class="card-text">
+  </h4>
+  <div>
     @if (record.metadata.teachers) {
       <div id="collection-teacher">
         @for (teacher of record.metadata.teachers; track teacher; let last = $last) {
diff --git a/projects/public-search/src/app/document-brief/document-brief.component.html b/projects/public-search/src/app/document-brief/document-brief.component.html
index 1d86b50bd..0a5710e58 100644
--- a/projects/public-search/src/app/document-brief/document-brief.component.html
+++ b/projects/public-search/src/app/document-brief/document-brief.component.html
@@ -16,39 +16,30 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (record) {
-  <article class="row">
-    <shared-thumbnail [record]="record" [isSmall]="true" class="col-sm-12 col-md-4 col-lg-2"></shared-thumbnail>
-    <div class="col-sm-12 col-md-8 col-lg-10">
+  <article class="grid">
+    <div class="col-12 md:col-4 lg:col-2">
+      <shared-thumbnail [record]="record" [isSmall]="true" />
+    </div>
+    <div class="col-12 md:col-8 lg:col-10">
       <!-- document title -->
       <h4 class="mb-1">
         <a target="_self" [href]="detailUrl.link | safeUrl">{{ record.metadata.title | mainTitle }}</a>
       </h4>
       <!-- contributions -->
-      <shared-contribution [contributions]="record.metadata?.contribution" [view]="viewcode"></shared-contribution>
+      <shared-contribution [contributions]="record.metadata?.contribution" [view]="viewcode" />
       <!-- provision activity publications -->
       @if (provisionActivityPublications.length > 0) {
-        <ul class="list-unstyled">
+        <ul class="list-none mb-0 p-0">
           @for (publication of provisionActivityPublications; track publication) {
             <li>{{ publication.value }}</li>
           }
         </ul>
       }
-      <!-- explanation -->
-      @if (record.explanation) {
-        <a class="badge badge-info collapsed"
-            data-toggle="collapse" href="#{{ 'score' + record.metadata.pid }}"
-            aria-expanded="false">
-            score: {{ record.explanation.value }}
-        </a>
-        <pre class="collapse border border-secondary mt-1" id="{{ 'score' + record.metadata.pid }}">
-          {{ record.explanation | json }}
-        </pre>
-      }
       <!-- part of -->
-      <shared-part-of [record]="record" [viewcode]="viewcode" [isPublicView]="true"></shared-part-of>
+      <shared-part-of [record]="record" [viewcode]="viewcode" [isPublicView]="true" />
       <!-- edition statement -->
       @if (record.metadata.editionStatement) {
-        <ul class="list-unstyled mb-0">
+        <ul class="list-none mb-0 p-0">
           @for (edition of record.metadata.editionStatement; track edition) {
             <li>{{ edition._text[0].value }}</li>
           }
@@ -61,7 +52,7 @@ <h4 class="mb-1">
           [record]="record"
           [apiService]="documentApiService"
           [viewcode]="viewcode"
-        ></shared-availability>
+        />
       }
     </div>
   </article>
diff --git a/projects/public-search/src/app/document-brief/document-brief.component.ts b/projects/public-search/src/app/document-brief/document-brief.component.ts
index f48f2b173..1a6135432 100644
--- a/projects/public-search/src/app/document-brief/document-brief.component.ts
+++ b/projects/public-search/src/app/document-brief/document-brief.component.ts
@@ -15,7 +15,8 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, Input } from '@angular/core';
+import { Component, inject, Input } from '@angular/core';
+import { DocumentApiService } from '../api/document-api.service';
 
 @Component({
   selector: 'public-search-document-brief',
@@ -26,6 +27,7 @@ export class DocumentBriefComponent {
 
   public coverUrl: string;
   private pathArray = window.location.pathname.split('/');
+  public documentApiService: DocumentApiService = inject(DocumentApiService);
   private _record: any;
 
   @Input() detailUrl: string;
diff --git a/projects/public-search/src/app/document-detail/document-detail-view/document-detail-view.component.html b/projects/public-search/src/app/document-detail/document-detail-view/document-detail-view.component.html
new file mode 100644
index 000000000..55cc67052
--- /dev/null
+++ b/projects/public-search/src/app/document-detail/document-detail-view/document-detail-view.component.html
@@ -0,0 +1,38 @@
+<!--
+  RERO ILS UI
+  Copyright (C) 2021-2024 RERO
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  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/>.
+-->
+
+<ngx-loading-bar [includeSpinner]="false" height="3px" />
+
+@if (document) {
+<p-tabView [activeIndex]="0">
+  <p-tabPanel [header]="'Get' | translate">
+    <shared-doc-files [documentPid]="document.metadata.pid" />
+    <public-search-holdings [viewcode]="viewcode" [documentPid]="document.metadata.pid" />
+    <public-search-electronic-holdings [viewcode]="viewcode" [documentPid]="document.metadata.pid" />
+  </p-tabPanel>
+
+  <p-tabPanel [header]="'Description' | translate">
+    <shared-document-description [record]="document" />
+  </p-tabPanel>
+
+  @if (showinfo) {
+  <p-tabPanel [header]="'More Info' | translate">
+    <ng-content select="more-info"></ng-content>
+  </p-tabPanel>
+  }
+</p-tabView>
+}
diff --git a/projects/public-search/src/app/document-detail/document-detail-view/document-detail-view.component.ts b/projects/public-search/src/app/document-detail/document-detail-view/document-detail-view.component.ts
new file mode 100644
index 000000000..c37f24e9a
--- /dev/null
+++ b/projects/public-search/src/app/document-detail/document-detail-view/document-detail-view.component.ts
@@ -0,0 +1,41 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2021-2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { RecordService } from '@rero/ng-core';
+import { AppSettingsService } from '@rero/shared';
+
+@Component({
+  selector: 'public-search-document-detail-vew',
+  templateUrl: './document-detail-view.component.html',
+})
+export class DocumentDetailViewComponent implements OnInit {
+  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+  private recordService: RecordService = inject(RecordService);
+
+  @Input() viewcode: string;
+  @Input() documentpid: string;
+  @Input() showinfo = false;
+  document = null;
+
+  /** OnInit hook */
+  ngOnInit(): void {
+    // Set view code to app settings
+    this.appSettingsService.currentViewCode = this.viewcode;
+    this.recordService.getRecord('documents', this.documentpid).subscribe((doc) => (this.document = doc));
+  }
+}
diff --git a/projects/public-search/src/app/document-detail/document-detail-view/holdings/electronic-holdings/electronic-holdings.component.html b/projects/public-search/src/app/document-detail/document-detail-view/holdings/electronic-holdings/electronic-holdings.component.html
new file mode 100644
index 000000000..5b99fcda4
--- /dev/null
+++ b/projects/public-search/src/app/document-detail/document-detail-view/holdings/electronic-holdings/electronic-holdings.component.html
@@ -0,0 +1,45 @@
+<!--
+  RERO ILS UI
+  Copyright (C) 2024 RERO
+
+  This program is free software: you can redistribute it and/or modify
+  it under the terms of the GNU Affero General Public License as published by
+  the Free Software Foundation, version 3 of the License.
+
+  This program is distributed in the hope that it will be useful,
+  but WITHOUT ANY WARRANTY; without even the implied warranty of
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  GNU Affero General Public License for more details.
+
+  You should have received a copy of the GNU Affero General Public License
+  along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+@if (holdings.length > 0) {
+<p-card class="p-card-body-p-0">
+  <ng-template pTemplate="header">
+      <div class="hidden md:flex grid grid-nogutter bg-blue-900 text-white p-2 text-lg font-bold">
+        <div class="col-6" translate>Library</div>
+        <div class="col-3" translate>Platform</div>
+      </div>
+  </ng-template>
+
+  <div class="alternate-color">
+  @for(holding of holdings; track holding) {
+    @for (location of holding.metadata.electronic_location; track location) {
+  <div class="grid grid-nogutter p-2">
+      <div class="col-6">
+      {{holding.metadata.library.name}}
+      </div>
+      <div class="col-3 capitalize">
+      {{location.source}}
+      </div>
+      <div class="col-3 flex justify-content-end">
+      <a href="{{location.uri}}" class="p-button text-sm" target="_blank"><i class="fa fa-external-link pr-1" ></i>{{ 'Online access' | translate}}</a>
+      </div>
+  </div>
+    }
+  }
+</div>
+</p-card>
+}
diff --git a/projects/public-search/src/app/document-detail/document-detail-view/holdings/electronic-holdings/electronic-holdings.component.ts b/projects/public-search/src/app/document-detail/document-detail-view/holdings/electronic-holdings/electronic-holdings.component.ts
new file mode 100644
index 000000000..428f813e4
--- /dev/null
+++ b/projects/public-search/src/app/document-detail/document-detail-view/holdings/electronic-holdings/electronic-holdings.component.ts
@@ -0,0 +1,39 @@
+/*
+ * RERO ILS UI
+ * Copyright (C) 2021-2024 RERO
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, version 3 of the License.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import { Component, inject, Input, OnInit } from '@angular/core';
+import { HoldingsApiService } from 'projects/public-search/src/app/api/holdings-api.service';
+
+@Component({
+  selector: 'public-search-electronic-holdings',
+  templateUrl: './electronic-holdings.component.html'
+})
+export class ElectronicHoldingsComponent implements OnInit{
+
+  private holdingsApiService: HoldingsApiService = inject(HoldingsApiService);
+
+  @Input() documentPid;
+  @Input() viewcode;
+
+  holdings = [];
+
+  ngOnInit(): void {
+      const query = `document.pid:${this.documentPid} AND holdings_type:electronic NOT _masked:true`;
+      this.holdingsApiService.getElectronicHoldingsByDocumentPidAndViewcode(this.documentPid, this.viewcode, 1, 100).subscribe((hits: any) => this.holdings = hits.hits);
+  }
+
+}
diff --git a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html
index 0ec6ea9ee..cd858157d 100644
--- a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html
+++ b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.html
@@ -15,92 +15,97 @@
   You 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="card-header p-2">
-  <!-- MAIN ROW ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
-  <div class="row">
-    <div id="holding-location-{{ holding.metadata.pid }}" class="col-sm-12 col-md-3 d-flex">
-      <shared-open-close-button (status)="isCollapsed = $event" />
-      <span>{{ holding.metadata.library.name }}: {{ holding.metadata.location.name }}</span>
-    </div>
-    <div id="holding-category-name-{{ holding.metadata.pid }}" class="col-sm-12 col-md-2">
-      {{ holding.metadata.circulation_category.circulation_information | getTranslatedLabel : language }}
-    </div>
-    <div class="col-sm-12 col-md-2">
-      <span [hidden]="holding.metadata.public_items_count === 0">
-        {{ holding.metadata.public_items_count }}
-        {{ holding.metadata.public_items_count | i18nPlural: { '=0': 'item', '=1': 'item', 'other': 'items' } | translate }}
-      </span>
-    </div>
-    <div id="holding-available-{{ holding.metadata.pid }}" class="col-sm-12 col-md-3">
-      <span [hidden]="!collapsed">
-        @if (holding.metadata.holdings_type === 'serial') {
-            <i class="fa fa-circle text-warning"></i>
-            {{ 'see collections and items' | translate }}
-        } @else {
-          <shared-availability recordType="holding" [record]="holding" [apiService]="holdingApiService"></shared-availability>
+  <p-accordionTab>
+    <ng-template pTemplate="header">
+      <!-- MAIN ROW ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
+       <div class="w-full">
+      <div class="grid mb-3">
+        <div id="holding-location-{{ holding.metadata.pid }}" class="col-12 md:col-5">
+          {{ holding.metadata.library.name }}:&nbsp;{{ holding.metadata.location.name }}
+        </div>
+        <div id="holding-category-name-{{ holding.metadata.pid }}" class="col-12 md:col-2">
+          {{ holding.metadata.circulation_category.circulation_information | getTranslatedLabel : language }}
+        </div>
+        <div class="col-12 md:col-2">
+          @if (holding.metadata.public_items_count > 0) {
+            {{ holding.metadata.public_items_count }}
+            {{ holding.metadata.public_items_count | i18nPlural: { '=0': 'item', '=1': 'item', 'other': 'items' } | translate }}
         }
-      </span>
-    </div>
-  </div>
-  <!-- SERIAL HOLDING INFORMATION'S -->
-  @if (holding.metadata.holdings_type === 'serial') {
-    <dl class="row ml-1 pt-3">
-      <!-- CALL NUMBER -->
-      @if (holding.metadata.call_number) {
-        <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Call number</dt>
-        <dd id="holding-call-number-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">
-          {{ holding.metadata.call_number }}
-          @if (holding.metadata.second_call_number) {
-            | {{ holding.metadata.second_call_number }}
+        </div>
+        <div id="holding-available-{{ holding.metadata.pid }}" class="col-12 md:col-3">
+          @if (holding.metadata.holdings_type === 'serial') {
+              <i class="fa fa-circle text-warning"></i>
+              {{ 'see collections and items' | translate }}
+          } @else {
+            <shared-availability recordType="holding" [record]="holding" [apiService]="holdingApiService" />
           }
-        </dd>
-      }
-      <!-- ENUMERATION AND CHRONOLOGY -->
-      @if (holding.metadata.enumerationAndChronology) {
-        <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Available collection</dt>
-        <dd id="holding-enum-chro-{{ holding.metadata.pid }}"
-            class="col-lg-9 col-sm-8 mb-0"
-            [innerHTML]="holding.metadata.enumerationAndChronology | nl2br">
-        </dd>
-      }
-      <!-- SUPPLEMENTARY CONTENT -->
-      @if (holding.metadata.supplementaryContent) {
-        <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Supplementary content</dt>
-        <dd id="holding-sup-content-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">{{ holding.metadata.supplementaryContent }}</dd>
-      }
-      <!-- INDEX -->
-      @if (holding.metadata.index) {
-        <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Indexes</dt>
-        <dd id="holding-index-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">{{ holding.metadata.index }}</dd>
-      }
-      <!-- MISSING ISSUES -->
-      @if (holding.metadata.missing_issues) {
-        <dt class="col-lg-3 col-sm-4 label-title mb-0" translate>Missing issues</dt>
-        <dd id="holding-missing-issues-{{ holding.metadata.pid }}" class="col-lg-9 col-sm-8 mb-0">{{ holding.metadata.missing_issues }}</dd>
-      }
-      <!-- NOTE -->
-      @if (holding.metadata.notes) {
-        @for (note of holding.metadata.notes | notesFilter : noteAuthorizedTypes; track note) {
-          <dt class="col-sm-4 col-lg-3 label-title mb-0">
-            <i class="fa fa-sticky-note-o pr-2"></i>
-            {{ note.type | translate }}
-          </dt>
-          <dd class="col-sm-8 col-lg-9 mb-0" [innerHTML]="note.content | nl2br"></dd>
-        }
+        </div>
+      </div>
+      <!-- SERIAL HOLDING INFORMATION'S -->
+      @if (holding.metadata.holdings_type === 'serial') {
+        <dl class="metadata">
+          <!-- CALL NUMBER -->
+          @if (holding.metadata.call_number) {
+            <dt translate>Call number</dt>
+            <dd id="holding-call-number-{{ holding.metadata.pid }}">
+              {{ holding.metadata.call_number }}
+              @if (holding.metadata.second_call_number) {
+                | {{ holding.metadata.second_call_number }}
+              }
+            </dd>
+          }
+          <!-- ENUMERATION AND CHRONOLOGY -->
+          @if (holding.metadata.enumerationAndChronology) {
+            <dt translate>Available collection</dt>
+            <dd id="holding-enum-chro-{{ holding.metadata.pid }}"
+                [innerHTML]="holding.metadata.enumerationAndChronology | nl2br">
+            </dd>
+          }
+          <!-- SUPPLEMENTARY CONTENT -->
+          @if (holding.metadata.supplementaryContent) {
+            <dt translate>Supplementary content</dt>
+            <dd id="holding-sup-content-{{ holding.metadata.pid }}">
+              {{ holding.metadata.supplementaryContent }}
+            </dd>
+          }
+          <!-- INDEX -->
+          @if (holding.metadata.index) {
+            <dt translate>Indexes</dt>
+            <dd id="holding-index-{{ holding.metadata.pid }}">
+              {{ holding.metadata.index }}
+            </dd>
+          }
+          <!-- MISSING ISSUES -->
+          @if (holding.metadata.missing_issues) {
+            <dt translate>Missing issues</dt>
+            <dd id="holding-missing-issues-{{ holding.metadata.pid }}">
+              {{ holding.metadata.missing_issues }}
+            </dd>
+          }
+          <!-- NOTE -->
+          @if (holding.metadata.notes) {
+            @for (note of holding.metadata.notes | notesFilter : noteAuthorizedTypes; track note) {
+              <dt>
+                <i class="fa fa-sticky-note-o pr-2"></i>
+                {{ note.type | translate }}
+              </dt>
+              <dd [innerHTML]="note.content | nl2br"></dd>
+            }
+          }
+        </dl>
       }
-    </dl>
-  }
-</div>
-@if (!collapsed) {
+    </div>
+  </ng-template>
   @if (holding.metadata.public_items_count > 0) {
-    <public-search-items [holding]="holding" [viewcode]="viewcode"></public-search-items>
+    <public-search-items [holding]="holding" [viewcode]="viewcode" />
   }
   <public-search-request
     [record]="holding"
     recordType="holding"
     [viewcode]="viewcode"
     [holdingsItemsCount]="holding.metadata.public_items_count"
-    class="w-100"
+    class="w-full"
     [ngClass]="{'mt-2': holding.metadata.public_items_count === 0}"
-  ></public-search-request>
-}
+  />
+</p-accordionTab>
+
diff --git a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.scss b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.scss
index c6f346e6a..689688b1f 100644
--- a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.scss
+++ b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.scss
@@ -16,20 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-
-a.collapse-link i {
-  min-width: 16px
-}
-
-.label-title:after {
-  content: ":"
-}
-
-dl.holdings-data {
-  margin-left: map-get($spacers, 4);
-  dd, dt {
-    margin: 0;
+public-search-holding, [public-search-holding] {
+  .p-accordion-header {
+    @extend .surface-100;
+    a.p-accordion-header-link {
+      background: none;
+    }
   }
 }
diff --git a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts
index e366f54a9..d2cabe161 100644
--- a/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts
+++ b/projects/public-search/src/app/document-detail/holdings/holding/holding.component.ts
@@ -18,15 +18,16 @@
 import { Component, inject, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { HoldingsNoteType } from '@rero/shared';
+import { HoldingsApiService } from '../../../api/holdings-api.service';
 
 @Component({
-  selector: 'public-search-holding',
-  templateUrl: './holding.component.html',
-  styleUrls: ['./holding.component.scss']
+  selector: 'public-search-holding, [public-search-holding]',
+  templateUrl: './holding.component.html'
 })
 export class HoldingComponent {
 
   private translateService: TranslateService = inject(TranslateService);
+  public holdingApiService: HoldingsApiService = inject(HoldingsApiService);
 
   // COMPONENT ATTRIBUTES =====================================================
   /** Holdings record */
@@ -35,9 +36,6 @@ export class HoldingComponent {
   /** View code */
   @Input() viewcode: string;
 
-  /** Is collapsed holdings */
-  @Input() collapsed = true;
-
   /** Authorized types of note */
   noteAuthorizedTypes: string[] = [HoldingsNoteType.GENERAL, HoldingsNoteType.ACCESS];
 
diff --git a/projects/public-search/src/app/document-detail/holdings/holdings.component.html b/projects/public-search/src/app/document-detail/holdings/holdings.component.html
index 268c4ab8f..50cab05af 100644
--- a/projects/public-search/src/app/document-detail/holdings/holdings.component.html
+++ b/projects/public-search/src/app/document-detail/holdings/holdings.component.html
@@ -14,23 +14,45 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ngx-loading-bar [includeSpinner]="false" height="3px"></ngx-loading-bar>
-
-<shared-doc-files [documentPid]="documentpid"></shared-doc-files>
 
 @if (holdings.length > 0) {
-  @for (holding of holdings; track holding) {
-    <public-search-holding [holding]="holding"
-                            [viewcode]="viewcode"
-                            [collapsed]="holdingsTotal > 1"
-                            [attr.id]="holding.metadata.pid | idAttribute : {prefix: 'holding'}"
-                            class="card mt-2 w-100">
-    </public-search-holding>
+  @if (!user.roles.includes('patron')) {
+    <p-messages
+      [value]="[
+        {
+          severity: 'warn',
+          detail: 'Log in to see request options' | translate
+        }
+      ]"
+      [closable]="false"
+      [enableService]="false"
+      showTransitionOptions="0ms"
+    />
   }
+  <p-accordion multiple="true" [activeIndex]="[0]">
+    @for (holding of holdings; track holding) {
+      <div
+        class="my-2 border-1 surface-border border-round"
+        public-search-holding
+        [holding]="holding"
+        [viewcode]="viewcode"
+        [attr.id]="holding.metadata.pid | idAttribute : { prefix: 'holding' }"
+      ></div>
+    }
+  </p-accordion>
   @if (isLinkShowMore) {
-    <button class="btn btn-link p-0 pr-1 show-more-holdings" (click)="showMore($event)">
-      <i class="fa fa-plus-square-o"></i> {{ 'Show more' | translate }}
-    </button>
-    <small>({{ hiddenHoldings }})</small>
+  <p-button severity="secondary" [text]="true" (onClick)="showMore($event)">
+    <div>
+      <i class="fa fa-plus-square-o"></i>&nbsp;{{
+        "Show more" | translate
+      }}&nbsp;<small>({{ hiddenHoldings }})</small>
+    </div>
+  </p-button>
   }
+  <a
+    class="p-button"
+    href="/{{ viewcode }}/ill_requests/new?record_pid={{ documentPid }}"
+    translate
+    >Interlibrary loan</a
+  >
 }
diff --git a/projects/public-search/src/app/document-detail/holdings/holdings.component.ts b/projects/public-search/src/app/document-detail/holdings/holdings.component.ts
index 23286f848..7403cb1ac 100644
--- a/projects/public-search/src/app/document-detail/holdings/holdings.component.ts
+++ b/projects/public-search/src/app/document-detail/holdings/holdings.component.ts
@@ -1,6 +1,5 @@
 /*
- * RERO ILS UI
- * Copyright (C) 2021-2024 RERO
+ * RERO IL-2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -14,29 +13,28 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, inject, Input, OnInit } from '@angular/core';
+import { Component, inject, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { TranslateService } from '@ngx-translate/core';
-import { AppSettingsService } from '@rero/shared';
-import { Observable } from 'rxjs';
+import { AppSettingsService, User, UserService } from '@rero/shared';
+import { Observable, switchMap, tap } from 'rxjs';
 import { HoldingsApiService } from '../../api/holdings-api.service';
 import { QueryResponse } from '../../record';
+import { RecordService } from '@rero/ng-core';
 
 @Component({
   selector: 'public-search-holdings',
-  templateUrl: './holdings.component.html'
+  templateUrl: './holdings.component.html',
 })
 export class HoldingsComponent implements OnInit {
-
   private holdingsApiService: HoldingsApiService = inject(HoldingsApiService);
   private translateService: TranslateService = inject(TranslateService);
-  private appSettingsService: AppSettingsService = inject(AppSettingsService);
+  private userService: UserService = inject(UserService);
 
   // COMPONENTS ATTRIBUTES ====================================================
   /** View code */
   @Input() viewcode: string;
-  /** Document pid */
-  @Input() documentpid: string;
+  @Input() documentPid: string;
 
   /** Holdings total */
   holdingsTotal = 0;
@@ -48,13 +46,17 @@ export class HoldingsComponent implements OnInit {
   /** Holdings per page */
   private holdingsPerPage = 10;
 
+  get user(): User {
+    return this.userService.user;
+  }
+
   // GETTER & SETTER ==========================================================
   /**
    * Is the link `show more holdings` must be displayed
    * @return boolean
    */
   get isLinkShowMore() {
-    return this.holdingsTotal > 0 && ((this.page * this.holdingsPerPage) < this.holdingsTotal);
+    return this.holdingsTotal > 0 && this.page * this.holdingsPerPage < this.holdingsTotal;
   }
 
   /**
@@ -62,32 +64,35 @@ export class HoldingsComponent implements OnInit {
    * @return string
    */
   get hiddenHoldings(): string {
-    const count = this.holdingsTotal - (this.page * this.holdingsPerPage);
+    const count = this.holdingsTotal - this.page * this.holdingsPerPage;
     if (count <= 0) {
       return '';
     }
-    const linkText = (count > 1)
-      ? _('{{ counter }} hidden holdings')
-      : _('{{ counter }} hidden holding');
+    const linkText = count > 1 ? _('{{ counter }} hidden holdings') : _('{{ counter }} hidden holding');
     return this.translateService.instant(linkText, { counter: count });
   }
 
   /** OnInit hook */
   ngOnInit(): void {
     // Set view code to app settings
-    this.appSettingsService.currentViewCode = this.viewcode;
-    this._holdingsQuery(1).subscribe((response: QueryResponse) => {
-      this.holdingsTotal = response.total.value;
-      this.holdings = response.hits;
-    });
+    this._holdingsQuery(1)
+      .pipe(
+        tap((response: QueryResponse) => {
+          this.holdingsTotal = response.total.value;
+          this.holdings = response.hits;
+        })
+      )
+      .subscribe();
   }
 
   // COMPONENT FUNCTIONS ======================================================
   /** Handler when 'show more holdings' link is clicked. */
   showMore(event: Event) {
-    event.preventDefault();  // Doesn't follow any `href` link
+    event.preventDefault(); // Doesn't follow any `href` link
     this.page++;
-    this._holdingsQuery(this.page).subscribe((response: QueryResponse) => this.holdings = this.holdings.concat(response.hits));
+    this._holdingsQuery(this.page).subscribe(
+      (response: QueryResponse) => (this.holdings = this.holdings.concat(response.hits))
+    );
   }
 
   /**
@@ -96,7 +101,11 @@ export class HoldingsComponent implements OnInit {
    * @return Observable
    */
   private _holdingsQuery(page: number): Observable<QueryResponse> {
-    return this.holdingsApiService
-      .getHoldingsByDocumentPidAndViewcode(this.documentpid, this.viewcode, page, this.holdingsPerPage);
+    return this.holdingsApiService.getHoldingsByDocumentPidAndViewcode(
+      this.documentPid,
+      this.viewcode,
+      page,
+      this.holdingsPerPage
+    );
   }
 }
diff --git a/projects/public-search/src/app/document-detail/holdings/items/items.component.html b/projects/public-search/src/app/document-detail/holdings/items/items.component.html
index b5f156b8f..b8f96e33f 100644
--- a/projects/public-search/src/app/document-detail/holdings/items/items.component.html
+++ b/projects/public-search/src/app/document-detail/holdings/items/items.component.html
@@ -15,23 +15,32 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<div class="card-body p-2">
-  @if (items.length > 0) {
-    @for (item of items; track item; let index = $index) {
+<div>
+@if (items.length > 0) {
+
+  <div class="alternate-color">
+  @for (item of items; track item) {
+    <div>
       <public-search-item
         context="holding"
         [item]="item"
         [viewcode]="viewcode"
-        [index]="index"
-      ></public-search-item>
-    }
-    @if (isLinkShowMore) {
-      <button type="button" class="btn btn-link pr-1" (click)="showMore()">
-        <i class="fa fa-plus-square-o"></i> {{ 'Show more' | translate }}
-      </button>
-      <small>({{ hiddenItems }})</small>
-    }
-  } @else {
-    <div class="card-body pl-4" translate>No item received.</div>
+      />
+    </div>
+  }
+  </div>
+  @if (isLinkShowMore) {
+    <p-button
+      severity="secondary"
+      [text]="true"
+      (onClick)="showMore()"
+    >
+    <div>
+      <i class="fa fa-plus-square-o"></i>&nbsp;{{'Show more' | translate}}&nbsp;<small>({{ hiddenItems }})</small>
+    </div>
+  </p-button>
   }
+} @else {
+  <div translate>No item received.</div>
+}
 </div>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.scss b/projects/public-search/src/app/document-detail/holdings/items/items.component.scss
similarity index 91%
rename from projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.scss
rename to projects/public-search/src/app/document-detail/holdings/items/items.component.scss
index bef22e57c..fbdbf04b3 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-document/patron-profile-document.component.scss
+++ b/projects/public-search/src/app/document-detail/holdings/items/items.component.scss
@@ -1,6 +1,6 @@
 /*
  * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,6 +15,4 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-dl, dt, dd {
-  margin-bottom: 0;
-}
+// @import 'primeflex/primeflex';
diff --git a/projects/public-search/src/app/document-detail/holdings/items/items.component.ts b/projects/public-search/src/app/document-detail/holdings/items/items.component.ts
index 4904339e8..dfd62420a 100644
--- a/projects/public-search/src/app/document-detail/holdings/items/items.component.ts
+++ b/projects/public-search/src/app/document-detail/holdings/items/items.component.ts
@@ -22,7 +22,8 @@ import { QueryResponse } from '../../../record';
 
 @Component({
   selector: 'public-search-items',
-  templateUrl: './items.component.html'
+  templateUrl: './items.component.html',
+  styleUrl: './items.component.scss'
 })
 export class ItemsComponent implements OnInit {
 
diff --git a/projects/public-search/src/app/document-detail/item/item.component.html b/projects/public-search/src/app/document-detail/item/item.component.html
index 7c2fde0c0..22765e1a4 100644
--- a/projects/public-search/src/app/document-detail/item/item.component.html
+++ b/projects/public-search/src/app/document-detail/item/item.component.html
@@ -15,21 +15,18 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-detail'}"
-     class="mx-1"
-     [class]="{'bg-light': index % 2 === 0}">
-  <dl class="m-0 py-2 row">
+  <dl class="metadata p-2 mb-2">
     <!-- LIBRARY AND LOCATION -->
     @if (context === 'book') {
-      <dt class="mb-0 col-3 label-title" translate>Location</dt>
-      <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-location'}" class="mb-0 col-9">
+      <dt translate>Location</dt>
+      <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-location'}">
         {{ item.metadata.library.name }}: {{ item.metadata.location.name }}
       </dd>
     }
     <!-- CALL NUMBER -->
     @if (item.metadata.call_number) {
-      <dt class="mb-0 col-3 label-title" translate>Call number</dt>
-      <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-call-number'}" class="mb-0 col-9">
+      <dt translate>Call number</dt>
+      <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-call-number'}">
         {{ item.metadata.call_number }}
         @if (item.metadata.second_call_number) {
           | {{ item.metadata.second_call_number }}
@@ -38,8 +35,8 @@
     }
     <!-- ITEM IN COLLECTION -->
     @if (item.metadata.in_collection) {
-      <dt class="mb-0 col-3 label-title" translate>Temporary location</dt>
-      <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-location-temporary'}" class="mb-0 col-9">
+      <dt translate>Temporary location</dt>
+      <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-location-temporary'}">
         @for (collection of item.metadata.in_collection; track collection; let last = $last) {
           <a href="/{{ collection.viewcode }}/collections/{{ collection.pid }}">{{ collection.title }}</a>
           {{ last ? '' : '; ' }}
@@ -47,8 +44,8 @@
       </dd>
     } @else {
       @if (item.metadata.temporary_location) {
-        <dt class="mb-0 col-3 label-title" translate>Temporary location</dt>
-        <dd class="mb-0 col-9">
+        <dt translate>Temporary location</dt>
+        <dd>
           <i class="fa fa-exclamation-triangle text-warning" aria-hidden="true"></i>
           {{ item.metadata.temporary_location.name }}
         </dd>
@@ -56,45 +53,44 @@
     }
     <!-- ITEM CIRCULATION INFORMATION -->
     @if (circulationInformation) {
-      <dt class="mb-0 col-3 label-title" translate>Circulation information</dt>
-      <dd class="mb-0 col-9">
+      <dt translate>Circulation information</dt>
+      <dd>
         <i class="fa fa-exclamation-triangle text-warning" aria-hidden="true"></i>
         {{ circulationInformation }}
       </dd>
     }
     <!-- ENUMERATION AND CHRONOLOGY -->
     @if (item.metadata.enumerationAndChronology) {
-      <dt class="mb-0 col-3 label-title" translate>Unit</dt>
-      <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-enum-chrono'}" class="mb-0 col-9">
+      <dt translate>Unit</dt>
+      <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-enum-chrono'}">
         {{ item.metadata.enumerationAndChronology }}
       </dd>
     }
     <!-- BARCODE -->
-    <dt class="mb-0 col-3 label-title" translate>Barcode</dt>
-    <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-barcode'}" class="mb-0 col-9">
+    <dt translate>Barcode</dt>
+    <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-barcode'}">
       {{ item.metadata.barcode }}
     </dd>
     <!-- NOTES -->
     @if (item.metadata.notes && item.metadata.notes.length > 0) {
       @for (note of item.metadata.notes | notesFilter : noteAuthorizedTypes; track note) {
-        <dt class="mb-0 col-3 label-title">{{ note.type | translate }}</dt>
-        <dd class="mb-0 col-9" [innerHTML]="note.content | nl2br"></dd>
+        <dt>{{ note.type | translate }}</dt>
+        <dd [innerHTML]="note.content | nl2br"></dd>
       }
     }
     <!-- URL -->
     @if (item.metadata.url) {
-      <dt class="mb-0 col-3 label-title" translate>URL</dt>
-      <dd class="mb-0 col-9">
+      <dt translate>URL</dt>
+      <dd>
         <a target="_blank" [href]="item.metadata.url | safeUrl">{{ item.metadata.url }}</a>
       </dd>
     }
     <!-- STATUS -->
-    <dt class="mb-0 col-3 label-title" translate>Status</dt>
-    <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-status'}" class="mb-0 col-9">
-      <shared-availability recordType="item" [record]="item" [apiService]="itemApiService"></shared-availability>
+    <dt translate>Status</dt>
+    <dd [attr.id]="item.metadata.pid | idAttribute : {prefix: 'item-status'}">
+      <shared-availability recordType="item" [record]="item" [apiService]="itemApiService" />
     </dd>
   </dl>
 
   <!-- REQUEST DIALOG -->
-  <public-search-request [record]="item" recordType="item" [viewcode]="viewcode" class="w-100 mb-2"></public-search-request>
-</div>
+  <public-search-request [record]="item" recordType="item" [viewcode]="viewcode" class="w-full mb-2" />
diff --git a/projects/public-search/src/app/document-detail/item/item.component.ts b/projects/public-search/src/app/document-detail/item/item.component.ts
index b98ab4c0a..843085295 100644
--- a/projects/public-search/src/app/document-detail/item/item.component.ts
+++ b/projects/public-search/src/app/document-detail/item/item.component.ts
@@ -17,6 +17,7 @@
  */
 import { Component, inject, Input } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
+import { ItemApiService } from '../../api/item-api.service';
 
 @Component({
   selector: 'public-search-item',
@@ -25,6 +26,7 @@ import { TranslateService } from '@ngx-translate/core';
 export class ItemComponent {
 
   private translateService: TranslateService = inject(TranslateService);
+  public itemApiService: ItemApiService = inject(ItemApiService);
 
   /** Item record */
   private _item: any;
@@ -50,9 +52,6 @@ export class ItemComponent {
   /** context */
   @Input() context: string;
 
-  /** index */
-  @Input() index: number;
-
   /** Authorized types of note */
   noteAuthorizedTypes: string[] = [
     'binding_note',
diff --git a/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.html b/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.html
index 7c9b2e3d6..8a345c42f 100644
--- a/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.html
+++ b/projects/public-search/src/app/document-detail/request/pickup-location/pickup-location.component.html
@@ -15,45 +15,52 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (fields.length > 0 && showForm) {
-  <div id="pickup-location-{{ record.metadata.pid }}" class="row pl-4" [ngClass]="{'mb-4': recordType === 'holding' }">
-    <div class="col-12 pl-0">
-      <dd class="mb-0 pl-0">
-        @if (recordType === 'holding' && itemCount > 0) {
-          <div class="alert alert-warning my-4" translate>Please make sure that your requested issue is not listed above.</div>
-
+  <div class="grid p-2" id="pickup-location-{{ record.metadata.pid }}">
+    @if (recordType === 'holding' && itemCount > 0) {
+      <p-messages
+      showTransitionOptions="0ms"
+      class="col-12"
+      [value]="[{severity: 'warning', detail:'Please make sure that your requested issue is not listed above.' | translate }]"
+      [enableService]="false"
+      [closable]="false" />
+    }
+    <form class="col-12" [formGroup]="form" (ngSubmit)="submit()">
+      <formly-form [model]="model" [fields]="fields" [form]="form" />
+      @if (!requestInProgress) {
+        <p-button
+          styleClass="mb-2 mr-2"
+          [label]="'Cancel' | translate"
+          id="pickup-location-{{ record.metadata.pid }}-cancel-button"
+          severity="danger"
+          [outlined]="true"
+          (onClick)="closeDialog()"
+        />
+      }
+      <p-button
+        id="pickup-location-{{ record.metadata.pid }}-confirm-button"
+        styleClass="mb-2"
+        type="submit"
+        [disabled]="!form.valid || requestInProgress"
+      >
+        @if (!requestInProgress) {
+          {{ 'Confirm your request' | translate }}
+        } @else {
+          <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
+          {{ 'Request in progress' | translate }}
         }
-        <form class="my-2 w-100" [formGroup]="form" (ngSubmit)="submit()">
-          <formly-form [model]="model" [fields]="fields" [form]="form"></formly-form>
-          @if (!requestInProgress) {
-            <button
-              id="pickup-location-{{ record.metadata.pid }}-cancel-button"
-              class="btn btn-sm btn-outline-secondary mr-2"
-              (click)="closeDialog()"
-              translate
-            >Cancel</button>
-          }
-          <button id="pickup-location-{{ record.metadata.pid }}-confirm-button" type="submit" class="btn btn-sm btn-primary" [disabled]="!form.valid || requestInProgress">
-            @if (!requestInProgress) {
-              {{ 'Confirm your request' | translate }}
-            } @else {
-              <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
-              {{ 'Request in progress' | translate }}
-            }
-          </button>
-        </form>
-      </dd>
-    </div>
+      </p-button>
+    </form>
   </div>
 }
 
 @if (requested && !showForm) {
-  <div class="row pl-4" [ngClass]="{'mb-4': recordType === 'holding' }">
-    <div class="col-12 mpl-0">
-      <dd class="mb-0 pl-0">
-        <div class="alert ml-0 mt-2" [ngClass]="{'alert-success': requestMessage.success, 'alert-danger': !requestMessage.success}" role="alert">
-          {{ requestMessage.message }}
-        </div>
-      </dd>
-    </div>
+  <div class="grid p-2">
+      <p-messages
+        showTransitionOptions="0ms"
+        class="col-12"
+        [value]="[{severity: requestMessage.success? 'success' : 'error', detail: requestMessage.message }]"
+        [enableService]="false"
+        [closable]="false"
+      />
   </div>
 }
diff --git a/projects/public-search/src/app/document-detail/request/request.component.html b/projects/public-search/src/app/document-detail/request/request.component.html
index 262e9525a..0bec11b24 100644
--- a/projects/public-search/src/app/document-detail/request/request.component.html
+++ b/projects/public-search/src/app/document-detail/request/request.component.html
@@ -17,45 +17,32 @@
 @if (patron) {
   @if (!requestDialog) {
     @if (canRequest && canRequest.can) {
-      <dl id="record-request-{{ record.metadata.pid }}" class="row" [ngClass]="{'row pl-4': recordType === 'item', 'mb-3': recordType === 'holding'}">
-        @if (recordType !== 'holding') {
-          <dt class="mt-2 mb-3 col-lg-2 col-sm-3">&nbsp;</dt>
+      <p-button
+        styleClass="m-2"
+        id="record-{{ record.metadata.pid }}-request-button"
+        outlined
+        (onClick)="showRequestDialog()"
+      >
+        <i class="fa fa-cart-arrow-down mr-2"></i>
+        @if (recordType === 'item') {
+          {{ 'Request' | translate }}
+        } @else {
+          @if (holdingsItemsCount > 0) {
+            {{ 'Request another issue' | translate }}
+          } @else {
+            {{ 'Request an issue' | translate }}
+          }
         }
-        <dd class="mt-2 mb-3 col-lg-9 col-sm-8">
-          <button
-            id="record-{{ record.metadata.pid }}-request-button"
-            class="btn btn-sm"
-            [ngClass]="{'btn-primary': recordType === 'item', 'btn-outline-primary': recordType === 'holding'}"
-            (click)="showRequestDialog()"
-          >
-            @if (recordType === 'item') {
-              {{ 'Request' | translate }}
-            } @else {
-              @if (holdingsItemsCount > 0) {
-                {{ 'Request another issue' | translate }}
-              } @else {
-                {{ 'Request an issue' | translate }}
-              }
-            }
-          </button>
-        </dd>
-      </dl>
+        </p-button>
     }
   } @else {
-    <dl class="m-0 ml-4 py-2 row">
-      @if (recordType !== 'holding') {
-        <dt class="my-2 col-lg-2 col-sm-3">&nbsp;</dt>
-      }
-      <dd class="pl-0 mt-0 mb-3" [ngClass]="{'col-lg-10 col-sm-9': recordType !== 'holding', 'col-lg-12': recordType === 'holding' }">
         <public-search-pickup-location
           [record]="record"
           [itemCount]="holdingsItemsCount"
           recordType="{{ recordType }}"
           [viewcode]="viewcode"
           (closeEvent)="closeDialog()"
-          class="w-100"
-        ></public-search-pickup-location>
-      </dd>
-    </dl>
+          class="w-full"
+        />
   }
 }
diff --git a/projects/public-search/src/app/error/error-page.component.ts b/projects/public-search/src/app/error/error-page.component.ts
index eec740504..cf9c25f53 100644
--- a/projects/public-search/src/app/error/error-page.component.ts
+++ b/projects/public-search/src/app/error/error-page.component.ts
@@ -26,14 +26,20 @@ export function _(str: string) {
 @Component({
   selector: 'public-search-error-page',
   template: `
-    <div class="alert alert-{{ messages[statusCode].level || 'danger' }}">
-      <h1 class="alert-heading mb-4">{{ statusCode }} - {{ messages[statusCode].title }}</h1>
-      @for (text of messages[statusCode].description || []; track text) {
-        <pre>{{ text }}</pre>
-      }
-      <hr>
-      <p>For any information please contact system administrator</p>
+    <p-messages
+      [severity]="messages[statusCode].severity"
+      [closable]="false"
+      [enableService]="false"
+      showTransitionOptions="0ms"
+    >
+      <ng-template pTemplate *ngVar="messages[statusCode] as msg">
+  <div class="w-full">
+        <h3>{{ msg.summary }}</h3>
+        <p>{{ msg.detail }}</p>
+        <em translate>For any information please contact system administrator.</em>
     </div>
+      </ng-template>
+    </p-messages>
   `
 })
 
@@ -47,34 +53,36 @@ export class ErrorPageComponent implements OnInit {
    *   - title : the error title
    *   - description : A human readable description of this error as Array<string>. Each array
    *                   element will be a separate line.
-   *   - level: the bootstrap alert look-and-feel level to use for the error. 'danger' by default.
+   *   - severity: the bootstrap alert look-and-feel level to use for the error. 'danger' by default.
    */
   messages = {
     401: {
-      title: _('Unauthorized'),
-      description: [_('Access denied due to invalid credentials.')],
-      level: 'warning'
+      summary: _('Unauthorized'),
+      detail: _('Access denied due to invalid credentials.'),
+      severity: 'warn'
     },
     403: {
-      title: _('Forbidden access'),
-      description: [_('You don\'t have permission to access this page.')],
-      level: 'warning'
+      summary: _('Forbidden access'),
+      detail: _('You don\'t have permission to access this page.'),
+      severity: 'warn'
     },
     404: {
-      title: _('Page not found'),
-      description: [_('Woops. Looks like this page doesn\'t exists')]
+      summary: _('Page not found'),
+      detail: _('Woops. Looks like this page doesn\'t exists'),
+      severity: 'info'
     },
     418: {
-      title: _('I\'m a teapot'),
-      description: [
+      summary: _('I\'m a teapot'),
+      detail: [
         _('The requested entity body is short and stout'),
         _('Tip me over and pour me out')
-      ],
-      level: 'success'
+      ].join(' '),
+      severity: 'success'
     },
     500: {
-      title: _('Internal server error'),
-      description: [_('Oops, Something went wrong !')]
+      summary: _('Internal server error'),
+      detail: _('Oops, Something went wrong !'),
+      severity: 'danger'
     }
   };
 
diff --git a/projects/public-search/src/app/main/main.component.ts b/projects/public-search/src/app/main/main.component.ts
index 83424540a..5ab9c08fa 100644
--- a/projects/public-search/src/app/main/main.component.ts
+++ b/projects/public-search/src/app/main/main.component.ts
@@ -19,11 +19,9 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'public-search-main',
   template: `
-  <div class="jumbotron jumbotron-fluid mt-4">
-    <div class="container">
-        <h1 class="display-4 text-center">Public search</h1>
+    <div class="mt-2 p-8 surface-ground">
+        <h1 class="text-center" translate>Public search</h1>
     </div>
-  </div>
 `
 })
 export class MainComponent { }
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 e057fd41b..47d2a83b3 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
@@ -19,24 +19,22 @@
     {{ record.metadata.document.title | mainTitle }}
   </a>
   @if (record.metadata.item.enumerationAndChronology && !showAdditionalInformation) {
-    <span class="badge badge-info">{{ record.metadata.item.enumerationAndChronology }}</span>
+    <p-tag [value]="record.metadata.item.enumerationAndChronology" severity="info" />
   }
-  <shared-contribution [contributions]="document?.contribution" [view]="viewcode" [limitRecord]="3"></shared-contribution>
+  <shared-contribution [contributions]="document?.contribution" [view]="viewcode" [limitRecord]="3" />
   @if (record.metadata && showAdditionalInformation) {
-    <div class="container mt-2 pl-0">
-      <dl class="row">
+      <dl class="metadata">
         <!-- CALL NUMBER -->
         @if (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>
+          <dt translate>Call number</dt>
+          <dd>{{ formattedCallNumbers }}</dd>
         }
         <!-- ENUMERATION AND CHRONOLOGY -->
         @if (record.metadata.item.enumerationAndChronology) {
-          <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>
+          <dt translate>Unit</dt>
+          <dd>{{ record.metadata.item.enumerationAndChronology }}</dd>
         }
       </dl>
-      <ng-content select="[additional-metadata]"></ng-content>
-    </div>
+      <ng-content select="[additional-metadata]" />
   }
 }
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 013206ba9..e122d59c0 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
@@ -20,8 +20,7 @@ import { PatronProfileMenuService } from '../patron-profile-menu.service';
 
 @Component({
   selector: 'public-search-patron-profile-document',
-  templateUrl: './patron-profile-document.component.html',
-  styleUrls: ['./patron-profile-document.component.scss']
+  templateUrl: './patron-profile-document.component.html'
 })
 export class PatronProfileDocumentComponent implements OnInit {
 
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 7994d288a..ad51d7886 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
@@ -16,100 +16,103 @@
 -->
 
 @if (record) {
-  <div class="d-flex container p-2">
-    <shared-open-close-button (status)="isCollapsed = $event" />
-    <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 =========================================== -->
-        @if (!isCollapsed) {
-        <div id="fee-event-{{ record.metadata.pid }}" class="col-lg-12 pl-3"
-             (expanded)="expanded(record.metadata.pid)">
-          <div class="mt-2">
-            <!-- NOTE -->
-            @if (record.metadata.note) {
-              <section id="fee-note-{{ record.metadata.pid }}">
-                <h5 class="mt-3" translate>Note</h5>
-                {{ record.metadata.note }}
-              </section>
-            }
-            <!-- DOCUMENT METADATA -->
-            @if (record.metadata.document; as document) {
-              <section id="fee-{{ record.metadata.pid }}-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 -->
-                  @if (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>
-                  }
-                  <!-- LOAN DATE -->
-                  <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>
-            }
+  <div class="grid grid-nogutter p-2 pl-1">
+    <div class="col-1">
+      <shared-open-close-button (status)="isCollapsed = $event; expanded(record.metadata.pid)" />
+    </div>
+    <div class="col-2">{{ record.metadata.creation_date | dateTranslate: 'short' }}</div>
+    <div class="col-6">{{ record.metadata.type | translate }}</div>
+    <div class="col-3 flex justify-content-end">{{ record.metadata.total_amount | currency:organisation.currency:'symbol' }}</div>
+      <!-- FEE DETAILS & EVENTS =========================================== -->
+      @if (!isCollapsed) {
+      <div id="fee-event-{{ record.metadata.pid }}" class="col-11 col-offset-1">
+          <!-- NOTE -->
+          @if (record.metadata.note) {
+            <p-panel styleClass="mb-2 bg-transparent" [header]="'Note' | translate">
+              {{ record.metadata.note }}
+            </p-panel>
+          }
+          <!-- DOCUMENT METADATA -->
+          @if (record.metadata.document; as document) {
+            <p-panel styleClass="mb-2 bg-transparent" [header]="'Document' | translate" id="fee-{{ record.metadata.pid }}-document">
+              <dl class="metadata">
+                <!-- TITLE -->
+                <dt translate>Title</dt>
+                <dd>
+                  <a href="/{{ organisation.code }}/documents/{{ document.pid }}">{{ document.title | mainTitle }}</a>
+                </dd>
+                <!-- CALL NUMBER -->
+                @if (record.metadata.loan.item.call_number) {
+                  <dt translate>Call number</dt>
+                  <dd>{{ record.metadata.loan.item.call_number }}</dd>
+                }
+                <!-- LOAN DATE -->
+                <dt translate>Loan started at</dt>
+                <dd>{{ record.metadata.loan.transaction_date | dateTranslate: 'short' }}</dd>
+              </dl>
+            </p-panel>
+          }
+
+          <!-- TRANSACTIONS HISTORY -->
+          <p-panel styleClass="bg-transparent time-line-30" [header]="'Transactions history' | translate" id="fee-{{ record.metadata.pid }}-transaction">
 
-            <!-- TRANSACTIONS HISTORY -->
-            <h5 class="mt-3" translate>Transactions history</h5>
-            <section id="fee-{{ record.metadata.pid }}-transaction" class="row">
-              @for (event of events; track event) {
-                <div 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' }}
+            <p-timeline [value]="events">
+              <ng-template pTemplate="content" let-event>
+                  <div class="grid grid-nogutter" [ngClass]="{ 'event-highlight': (event.metadata.type === 'dispute'), '': !(event.metadata.type === 'dispute') }">
+                    <div class="col-10">
+                      {{ event.metadata.type | translate }}
+                      @if (event.metadata.subtype) {
+                        [{{ event.metadata.subtype | translate }}]
+                      }
                     </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 }}
-                          @if (event.metadata.subtype) {
-                            [{{ event.metadata.subtype | translate }}]
-                          }
-                        </div>
-                        <div class="col-2 amount">
-                          @if (event.metadata.amount) {
-                            <span class="badge" [ngClass]="{ 'badge-success': (event.type === 'payment'), 'badge-danger': (event.type !== 'payment') }">
-                              {{ event.metadata.amount | currency:organisation.currency:'symbol' }}
-                              </span>
-                          } @else {
-                            &nbsp;
-                          }
-                        </div>
-                        @if (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>
-                        }
-                        @if (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>
-                        }
-                      </div>
+                    <div class="col-2 flex justify-content-end amount">
+                      @if (event.metadata.amount) {
+                        <p-tag [severity]="event.metadata.type === 'payment'? 'success' : 'danger'">
+                          {{ event.metadata.amount | currency:organisation.currency:'symbol' }}
+                        </p-tag>
+                      }
                     </div>
                   </div>
+                    @if (event.metadata.note) {
+                      <dl class="metadata">
+                        <dt>
+                          <i class="fa fa-comment-o pr-1" title="{{ 'Note' | translate }}"></i>
+                          {{ 'Note' | translate }}
+                        </dt>
+                        <dd>{{ event.metadata.note }}</dd>
+                      </dl>
+                    }
+                    @if (event.metadata.library) {
+                      <dl class="metadata">
+                        <dt>
+                          <i class="fa fa-map-marker pr-1" title="{{ 'Library' | translate }}"></i>
+                          {{ 'Library' | translate }}
+                        </dt>
+                        <dd>
+                          {{ event.metadata.library.name }}
+                        </dd>
+                      </dl>
+                    }
+              </ng-template>
+              <ng-template pTemplate="opposite" let-event>
+                <div class="p-text-secondary text-sm">
+                  <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>
-              }
-            </section>
-          </div>
+              </ng-template>
+              <ng-template pTemplate="marker" let-event>
+                <span
+                class="flex align-items-center justify-content-center text-white border-circle z-1 shadow-1"
+                [ngClass]="event.metadata.type === 'dispute'? 'background-warning': event.metadata.type === 'payment'? 'background-success': 'background-error'"
+                [style]="{'width': '1.5rem', 'height': '1.5rem'  }">
+                  <i class="fa" [ngClass]="event.metadata.type === 'dispute'? 'fa-exclamation' : 'fa-check' "></i>
+                </span>
+              </ng-template>
+          </p-timeline>
+          </p-panel>
         </div>
       }
-      </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
deleted file mode 100644
index f557f52dd..000000000
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.scss
+++ /dev/null
@@ -1,186 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2021 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-
-: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;
-    .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;
-        }
-      }
-    }
-  }
-}
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts
index baebc39bb..b3ceb1da4 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-fees/patron-profile-fee/patron-profile-fee.component.ts
@@ -22,8 +22,7 @@ import { PatronProfileMenuService } from '../../patron-profile-menu.service';
 
 @Component({
   selector: 'public-search-patron-profile-fee',
-  templateUrl: './patron-profile-fee.component.html',
-  styleUrls: ['./patron-profile-fee.component.scss']
+  templateUrl: './patron-profile-fee.component.html'
 })
 export class PatronProfileFeeComponent {
 
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 26f8f28b0..16e7bae6b 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
@@ -15,42 +15,37 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <!-- header -->
-<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-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' }}
-      </div>
-    </div>
-  </div>
+<section id="fees-section" class="container mt-2">
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+        <div class="hidden md:flex grid grid-nogutter bg-blue-900 text-white p-2 text-lg font-bold">
+          <div class="col-3" translate>Date</div>
+          <div class="col-6" translate>Category</div>
+          <div class="col-3 flex justify-content-end">
+            {{ 'Total amount' | translate }}:
+            {{ feesTotal | currency:currency:'symbol' }}
+          </div>
+        </div>
+    </ng-template>
 
-  @if (!loaded) {
-    <div class="row">
-      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
-    </div>
-  } @else {
-    @if (paginator.getRecordsCount() > 0) {
-      <div class="row border">
-        <div class="container-fluid">
-          <div id="fees-data">
-            @for (record of records; track record) {
+    @defer (when loaded) {
+      @if (paginator.getRecordsCount() > 0) {
+        <div class="alternate-color">
+          @for (record of records; track record) {
+            <div>
               <public-search-patron-profile-fee
                 [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>
+          }
+          <shared-search-show-more-pager id="show-more-fees" [paginator]="paginator" />
         </div>
-      </div>
-    } @else {
-      <div class="row">
-        <div class="col mt-2 font-weight-bold" translate>No fee</div>
-      </div>
+      } @else {
+        <div class="font-bold mx-2 my-4" translate>No fee</div>
+      }
+    } @placeholder {
+      <div class="font-bold mx-2 my-4" translate>Loading in progress</div>
     }
-  }
+  </p-card>
 </section>
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 19892a5a3..bd3ec99ee 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
@@ -14,33 +14,33 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<section 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 id="histories-section" class="container mt-2">
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+        <div class="hidden md:flex grid grid-nogutter bg-blue-900 text-white p-2 text-lg font-bold">
+          <div class="col-10" translate>Document</div>
+          <div class="col-2" translate>Return date</div>
+        </div>
+    </ng-template>
 
   @defer (when loaded) {
     @if (paginator.getRecordsCount() > 0) {
-      <div class="row border">
-        <div class="container">
+          <div class="alternate-color">
           @for (loan of records; track loan) {
+            <div>
             <public-search-patron-profile-history
               [record]="loan"
-              id="history-{{ loan.metadata.pid }}" class="row border-bottom">
-            </public-search-patron-profile-history>
+              id="history-{{ loan.metadata.pid }}"
+              />
+          </div>
           }
-        </div>
       </div>
-      <shared-search-show-more-pager id="show-more-loans" [paginator]="paginator" class="row"></shared-search-show-more-pager>
+      <shared-search-show-more-pager id="show-more-loans" [paginator]="paginator"/>
     } @else {
-      <div class="row">
-        <span class="col mt-2 font-weight-bold" translate>No history</span>
-      </div>
-    }
-  } @placeholder {
-    <div class="row">
-      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
-    </div>
+      <div class="font-bold mx-2 my-4" translate>No loan</div>
   }
+} @placeholder {
+    <div class="font-bold mx-2 my-4" translate>Loading in progress</div>
+}
+  </p-card>
 </section>
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 b0190e06d..4a56171b9 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
@@ -16,29 +16,32 @@
 -->
 
 @if (record) {
-  <div class="container p-2">
-    <div class="row">
+    <div class="grid grid-nogutter p-2">
       <!-- 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">
+      <div *ngVar="record.metadata.loan.item.document.pid | getRecord:'documents':'object':'':{ Accept:'application/rero+json' } | async as document" class="md:col-10 col-12">
         @if (document) {
           <a href="/{{ viewcode }}/documents/{{ record.metadata.loan.item.document.pid }}">
             {{ record.metadata.loan.item.document.title }}
           </a>
         } @else {
-        {{ record.metadata.loan.item.document.title }}
+          {{ record.metadata.loan.item.document.title }}
         }
         @if (record.metadata.loan.item.enumerationAndChronology) {
-          <span class="badge badge-info">{{ record.metadata.loan.item.enumerationAndChronology }}</span>
+          <p-tag severity="info">
+            {{ record.metadata.loan.item.enumerationAndChronology }}
+          </p-tag>
         }
         @if (document) {
           <shared-contribution [contributions]="document.metadata?.contribution" [view]="viewcode"></shared-contribution>
         }
+          <dl class="metadata md:hidden">
+            <dt translate>Return date</dt>
+            <dd>{{ record.metadata.date | dateTranslate: 'shortDate' }}</dd>
+          </dl>
       </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 class="md:col-2 col-12 hidden md:block">
+          {{ 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.ts b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.ts
index e6f7fffb7..311b0704c 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.ts
@@ -19,8 +19,7 @@ import { PatronProfileMenuService } from '../../patron-profile-menu.service';
 
 @Component({
   selector: 'public-search-patron-profile-history',
-  templateUrl: './patron-profile-history.component.html',
-  styleUrls: ['./patron-profile-history.component.scss']
+  templateUrl: './patron-profile-history.component.html'
 })
 export class PatronProfileHistoryComponent {
 
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 a34b42e39..c524c5fac 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
@@ -15,99 +15,85 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<div class="d-flex container p-2" [ngClass]="{'callout callout-warning ':record.metadata.is_late}">
-  <shared-open-close-button (status)="isCollapsed = $event" />
-  <div class="container-fluid">
+<div class="grid grid-nogutter p-2">
+  <div class="md:col-10 col-12 flex gap-2">
+    <shared-open-close-button (status)="isCollapsed = $event" />
     <!-- 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">
-        @if (record.metadata.status !== 'validated') {
-          <span class="badge px-2 py-1 mr-1 font-weight-normal"
-            [ngClass]="record.metadata.status | statusBadge">
-            {{ record.metadata.status | translate }}
-          </span>
-        } @else {
-          @if (record.metadata.loan_status) {
-            <span 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>
+    <div class="w-full">
+      <div>{{ record.metadata.document.title }}</div>
+      <div class="small">{{ record.metadata.document.authors }}</div>
+       <!-- ILL DETAIL -->
+      @if (!isCollapsed){
+        <dl class="metadata pt-3">
+          <!-- PUBLISHER -->
+          @if (record.metadata.document.publisher) {
+            <dt translate>Publisher</dt>
+            <dd >{{ record.metadata.document.publisher }}</dd>
           }
-        }
-      </div>
-    </div>
-    <!-- ILL DETAIL -->
-     @if (!isCollapsed){
-    <section id="ill-detail-{{ record.metadata.pid }}" class="col-12 p-0">
-      <dl class="row mt-2">
-        <!-- PUBLISHER -->
-        @if (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>
-        }
-        <!-- YEAR -->
-        @if (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>
-        }
-        <!-- IDENTIFIER -->
-        @if (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>
-        }
-        <!-- SOURCE -->
-        @if (record.metadata.document.source) {
-          <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">
-            @if (record.metadata.document.source.volume || record.metadata.document.source.number) {
-              {{ record.metadata.document.source | journalVolume }}
+          <!-- YEAR -->
+          @if (record.metadata.document.year) {
+            <dt translate>Year</dt>
+            <dd >{{ record.metadata.document.year }}</dd>
+          }
+          <!-- IDENTIFIER -->
+          @if (record.metadata.document.identifier) {
+            <dt translate>Identifier</dt>
+            <dd >{{ record.metadata.document.identifier }}</dd>
+          }
+          <!-- SOURCE -->
+          @if (record.metadata.document.source) {
+            <dt translate>Source</dt>
+            <dd >
+              @if (record.metadata.document.source.volume || record.metadata.document.source.number) {
+                {{ record.metadata.document.source | journalVolume }}
+              }
+            </dd>
+          }
+          <!-- PICKUP LOCATION -->
+          <dt translate>Pickup location</dt>
+          <dd >{{ record.metadata.pickup_location.name }}</dd>
+          <!-- SCOPE -->
+          <dt translate>Scope</dt>
+          <dd >
+            @if (record.metadata.copy) {
+              {{ 'Copy' | translate }}
+            } @else {
+              {{ 'Loan' | translate }}
             }
           </dd>
-        }
-        <!-- 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">
-          @if (record.metadata.copy) {
-            {{ 'Copy' | translate }}
-          } @else {
-            {{ 'Loan' | translate }}
+          <!-- PAGES -->
+          @if (record.metadata.copy && record.metadata.pages) {
+            <dt translate>Pages</dt>
+            <dd >{{ record.metadata.pages }}</dd>
           }
-        </dd>
-        <!-- PAGES -->
-        @if (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>
-        }
-        <!-- FOUND IN -->
-        @if (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>
-        }
-        <!-- NOTES -->
-        @if (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">
+          <!-- FOUND IN -->
+          @if (record.metadata.found_in) {
+            <dt translate>Found in</dt>
+            <dd class="flex gap-2">
+              <a href="{{ record.metadata.found_in.url }}">{{ record.metadata.found_in.url }}</a>
+              <p-tag severity="secondary">{{ record.metadata.found_in.source }}</p-tag>
+            </dd>
+          }
+          <!-- NOTES -->
+          @if (record.metadata.notes && record.metadata.notes.length > 0) {
+            <dt translate>Note</dt>
+            <dd >
+              <ul class="list-none pl-0 my-0">
                 @for (note of record.metadata.notes | notesFilter:['public_note']; track note) {
                   <li [innerHTML]="note.content | nl2br"></li>
                 }
               </ul>
-            </blockquote>
-          </dd>
-        }
-      </dl>
-    </section>
-  }
+            </dd>
+          }
+        </dl>
+      }
+      </div>
+  </div>
+  <div class="md:col-2 col-12 flex justify-content-end">
+    @if (record.metadata.loan_status) {
+      <p-tag [severity]="record.metadata.loan_status | loanStatusBadge">
+        {{ record.metadata.loan_status | translate }}
+    </p-tag>
+    }
   </div>
 </div>
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
deleted file mode 100644
index fa9626a3c..000000000
--- a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2022 RERO
- * Copyright (C) 2022 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-@import '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.ts b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.ts
index 9d8a7befd..586fc5b4d 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-ill-requests/patron-profile-ill-request/patron-profile-ill-request.component.ts
@@ -18,8 +18,7 @@ import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'public-search-patron-profile-ill-request',
-  templateUrl: './patron-profile-ill-request.component.html',
-  styleUrls: ['./patron-profile-ill-request.component.scss']
+  templateUrl: './patron-profile-ill-request.component.html'
 })
 export class PatronProfileIllRequestComponent {
 
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 8b751db36..2b6c3ff08 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
@@ -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/>.
 -->
-<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-10 pl-5" translate>Document</div>
-      <div class="col-2 text-lg-right" translate>Status</div>
-    </div>
-  </div>
+<section id="ill-request-section" class="mt-2">
+    <p-card class="p-card-body-p-0">
+      <ng-template pTemplate="header">
+          <div class="hidden md:flex grid grid-nogutter bg-blue-900 text-white p-2 text-lg font-bold">
+            <div class="col-10" translate>Document</div>
+            <div class="col-2 justify-content-end flex"><span translate>Status</span></div>
+          </div>
+      </ng-template>
 
-  @defer (when loaded) {
-    @if (paginator.getRecordsCount() > 0) {
-      <div class="row border">
-        <div class="container-fluid">
-          @for (record of records; track record) {
-            <public-search-patron-profile-ill-request
-              [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>
+    @defer (when loaded) {
+      @if (paginator.getRecordsCount() > 0) {
+        <div class="alternate-color">
+            @for (record of records; track record) {
+              <div>
+              <public-search-patron-profile-ill-request
+                [record]="record"
+                id="ill-request-{{ record.metadata.pid }}"
+              />
+            </div>
+            }
+            <shared-search-show-more-pager id="show-more-ill-requests" [paginator]="paginator" />
         </div>
-      </div>
-    } @else {
-      <div class="row">
-        <div class="col mt-2 font-weight-bold" translate>No ill request</div>
-      </div>
+      } @else {
+        <div class="font-bold mx-2 my-4" translate>No ill request</div>
+      }
     }
-  } @placeholder {
-    <div class="row">
-      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
-    </div>
-  }
+    @placeholder {
+      <div class="font-bold mx-2 my-4" translate>Loading in progress</div>
+    }
+  </p-card>
 </section>
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 450fb4887..1d7121bc2 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
@@ -15,74 +15,72 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 
-<div class="d-flex container p-2" [ngClass]="{'callout callout-warning ':record.metadata.is_late}">
-  <shared-open-close-button (status)="isCollapsed = $event" />
-  <div class="container-fluid">
-    <div class="row">
+<div class="grid grid-nogutter p-2 pl-1" [ngClass]="{'border-left-3 border-warning':record.metadata.is_late}">
       <!-- 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>
+       <div class="md:col-8 col-12 flex gap-2">
+        <shared-open-close-button (status)="isCollapsed = $event" />
+        <div class="w-full">
+          <public-search-patron-profile-document
+            [record]="record"
+            [showAdditionalInformation]="!isCollapsed"
+            [isAnimated]="true"
+          >
+          <dl class="metadata" additional-metadata>
+            <dt translate>Library</dt>
+            <dd>{{ record.metadata.library.name }}</dd>
+          </dl>
+        </public-search-patron-profile-document>
+        <dl class="metadata md:hidden">
+          <dt translate>Due date</dt>
+          <dd [ngClass]="{ 'font-bold text-success': actionSuccess}">{{ record.metadata.end_date | dateTranslate :'shortDate' }}</dd>
         </dl>
-      </public-search-patron-profile-document>
+        <div class="md:hidden">
+          <ng-container [ngTemplateOutlet]="tags" />
+        </div>
+      </div>
+    </div>
       <!-- 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}">
+      <div class="md:col-2 col-12 hidden md:block">
+        <div >
+          <span [ngClass]="{ 'font-bold text-success': actionSuccess}">
             {{ record.metadata.end_date | dateTranslate :'shortDate' }}
           </span>
         </div>
-        @if (record.metadata.extension_count && record.metadata.extension_count > 0) {
-          <div class="badge badge-secondary font-weight-normal">
-            {{ record.metadata.extension_count }}
-            {{ record.metadata.extension_count | i18nPlural: {'=1': 'renewal', 'other': 'renewals'} | translate }}
-          </div>
-        }
-        @if (record.metadata.overdue) {
-          <div>
-            <span class="badge badge-warning font-weight-normal" translate>overdue</span>
-            @if (fees > 0) {
-              <span title="{{ 'Fees to date' | translate }}">
-                {{ fees | currency:organisation.currency:'symbol' }}
-              </span>
-            }
-          </div>
-        }
-        @if (isDueSoon) {
-          <div class="badge badge-secondary font-weight-normal" translate>approaching due date</div>
-        }
+        <ng-container [ngTemplateOutlet]="tags" />
       </div>
       <!-- ACTION BUTTONS COLUMN -->
-      <div class="col-lg-2 col-md-6 col-sm-6 text-right pr-0">
-        @if (canExtend.can) {
-          <button
-            type="button"
-            class="btn btn-sm btn-primary"
-            (click)="renew()"
-            [disabled]="renewInProgress || actionDone"
-          >
-            @if (renewInProgress) {
-              <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
-            }
-            {{ 'Renew' | translate }}
-          </button>
-        } @else {
-          <button
-            type="button"
-            class="btn btn-sm btn-primary disabled"
-            pTooltip="{{ canExtend.reasons | arrayTranslate | join:' / '}}"
+      <div class="md:col-2 col-12 flex justify-content-end">
+          <p-button
+            class="pointer-events-auto"
+            [pTooltip]="canExtend.reasons | arrayTranslate | join:' / '"
             tooltipPosition="top"
-            translate
-          >Renew</button>
-        }
-      </div>
-    </div>
+            [tooltipDisabled]="canExtend.can"
+            (onClick)="renew()"
+            [disabled]="renewInProgress || actionDone || !canExtend.can"
+            [label]="'Renew' | translate"
+            [icon]="renewInProgress? 'pi pi-spin pi-spinner': 'pi pi-refresh'"
+          />
   </div>
 </div>
+
+<ng-template #tags>
+  @if (record.metadata.extension_count && record.metadata.extension_count > 0) {
+    <p-tag  styleClass="mt-1" severity="secondary">
+      {{ record.metadata.extension_count }}
+      {{ record.metadata.extension_count | i18nPlural: {'=1': 'renewal', 'other': 'renewals'} | translate }}
+    </p-tag>
+  }
+  @if (record.metadata.overdue) {
+    <div class="mt-1">
+      <p-tag severity="warning" translate>overdue</p-tag>
+      @if (fees > 0) {
+        <span title="{{ 'Fees to date' | translate }}">
+          {{ fees | currency:organisation.currency:'symbol' }}
+        </span>
+      }
+    </div>
+  }
+  @if (isDueSoon) {
+    <p-tag styleClass="mt-1" severity="info" translate>approaching due date</p-tag>
+  }
+</ng-template>
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
deleted file mode 100644
index 23a91dcb6..000000000
--- a/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.scss
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2022 RERO
- * Copyright (C) 2022 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-@import '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.ts b/projects/public-search/src/app/patron-profile/patron-profile-loans/patron-profile-loan/patron-profile-loan.component.ts
index 8af14bd12..7956a912f 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
@@ -28,8 +28,7 @@ import { PatronProfileService } from '../../patron-profile.service';
 
 @Component({
   selector: 'public-search-patron-profile-loan',
-  templateUrl: './patron-profile-loan.component.html',
-  styleUrls: ['./patron-profile-loan.component.scss']
+  templateUrl: './patron-profile-loan.component.html'
 })
 export class PatronProfileLoanComponent implements OnInit {
 
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 e52da1efd..07ee03e7e 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
@@ -16,54 +16,45 @@
 -->
 <!-- Due date dropdown menu -->
 @if (paginator.getRecordsCount() > 0) {
-  <section class="container pt-1">
-    <div class="row">
-      <div class="col-xs-12 col-md-7 col-lg-9"></div>
-      <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'}
-        ]"
-        [useIcon]="true"
-        (selectChange)="selectingSortCriteria($event)">
-      </ng-core-sort-list>
-    </div>
+  <section class="flex justify-content-end">
+    <ng-core-menu-sort
+      [config]="[
+        {value:'duedate', label:'Due date (earliest)' | translate, icon:'fa-sort-numeric-asc'},
+        {value:'-duedate', label:'Due date (latest)' | translate, icon:'fa-sort-numeric-desc'}
+      ]"
+      selectedValue="duedate"
+      (onChange)="selectingSortCriteria($event)">
+    </ng-core-menu-sort>
   </section>
 }
 
 <!-- header -->
-<section id="loans-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-8 pl-5" translate>Document</div>
-      <div class="col-2" translate>Due date</div>
-      <div class="col-2">&nbsp;</div>
-    </div>
-  </div>
-
+<section id="loans-section" class="mt-2">
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+        <div class="hidden md:flex grid grid-nogutter bg-blue-900 text-white p-2 text-lg font-bold">
+          <div class="col-8" translate>Document</div>
+          <div class="col-2" translate>Due date</div>
+        </div>
+    </ng-template>
   @defer (when loaded) {
     @if (paginator.getRecordsCount() > 0) {
-      <div class="row border">
-        <div class="container-fluid">
+        <div class="alternate-color">
           @for (loan of records; track loan) {
+            <div>
             <public-search-patron-profile-loan
               [record]="loan"
               id="loan-{{ loan.metadata.pid }}"
-              class="row border-bottom">
-            </public-search-patron-profile-loan>
+              />
+            </div>
           }
         </div>
-      </div>
-      <shared-search-show-more-pager id="show-more-loans" [paginator]="paginator" class="row"></shared-search-show-more-pager>
+      <shared-search-show-more-pager id="show-more-loans" [paginator]="paginator" />
     } @else {
-      <div class="row">
-        <div class="col mt-2 font-weight-bold" translate>No loan</div>
-      </div>
+        <div class="font-bold mx-2 my-4" translate>No loan</div>
     }
   } @placeholder {
-    <div class="row">
-      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
-    </div>
+      <div class="font-bold mx-2 my-4" translate>Loading in progress</div>
   }
+  </p-card>
 </section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.html b/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.html
index 76def9f15..930c22d55 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.html
@@ -15,13 +15,10 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @defer (when isVisible) {
-  <form>
-      <select class="form-control form-select form-select-sm ml-1 col-6" (change)="onChange($event.target.value)">
-        @for (option of menuOptions; track option) {
-          <option class="form-control" [value]="option.value" [selected]="option.selected">
-            {{ option.name }}
-          </option>
-        }
-      </select>
-  </form>
+    <p-dropdown
+    [options]="organisations"
+    [ngModel]="selectedOrganisation"
+    optionLabel="name"
+    (onChange)="onChange($event.value.value)"
+    />
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts
index 58cba572c..6dd2d7676 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-menu/patron-profile-menu.component.ts
@@ -27,6 +27,8 @@ export class PatronProfileMenuComponent {
 
   @Input() patronPid: string;
 
+  selectedOrganisation: IMenu;
+
   /**
    * Is menu visible
    * @return boolean
@@ -39,11 +41,11 @@ export class PatronProfileMenuComponent {
    * Get menu lines (organisation)
    * @return array
    */
-  get menuOptions(): IMenu[] {
+  get organisations(): IMenu[] {
     const menuSelected = this.patronProfileMenuService.menu
       .find((menu: any) => menu.value === this.patronPid);
     if (menuSelected) {
-      menuSelected.selected = true;
+      this.selectedOrganisation = menuSelected;
     }
     return this.patronProfileMenuService.menu;
   }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts
index 149f0b120..502924ad4 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-message/patron-profile-message.component.ts
@@ -16,21 +16,22 @@
  */
 import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { Subscription } from 'rxjs';
-import { Message, PatronApiService } from '../../api/patron-api.service';
+import { PatronApiService, Message } from '../../api/patron-api.service';
 import { PatronProfileMenuService } from '../patron-profile-menu.service';
+import { Message as PrimeMessage } from 'primeng/api';
 
 @Component({
   selector: 'public-search-patron-profile-message',
   template: `
-    @for (message of messages; track message) {
-      <div
-        class="alert alert-{{ message.type }} mb-2"
-        [innerHTML]="message.content | nl2br"
-      ></div>
-    }`
+      <p-messages
+      [value]="messages"
+      [closable]="false"
+      [enableService]="false"
+      showTransitionOptions="0ms"
+    />
+  `
 })
 export class PatronProfileMessageComponent implements OnInit, OnDestroy {
-
   private patronApiService: PatronApiService = inject(PatronApiService);
   private patronProfileMenuService: PatronProfileMenuService = inject(PatronProfileMenuService);
 
@@ -38,7 +39,7 @@ export class PatronProfileMessageComponent implements OnInit, OnDestroy {
   private _subscription = new Subscription();
 
   /** patron messages */
-  messages: Message[] = [];
+  messages: PrimeMessage[] = [];
 
   /** OnInit hook */
   ngOnInit(): void {
@@ -58,7 +59,11 @@ export class PatronProfileMessageComponent implements OnInit, OnDestroy {
   /** load message */
   private _loanMessage(): void {
     const patronPid = this.patronProfileMenuService.currentPatron.pid;
-    this.patronApiService.getMessages(patronPid)
-      .subscribe((messages: Message[]) => this.messages = messages);
+    this.patronApiService.getMessages(patronPid).subscribe(
+      (messages: Message[]) =>
+        (this.messages = messages.map((message:Message): PrimeMessage => {
+          return { detail: message.content, severity: message.type };
+        }))
+    );
   }
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.html b/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.html
index 76caa2ec1..93ccfb065 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component.html
@@ -14,17 +14,15 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="pl-0 mt-3">
+<ngx-loading-bar [includeSpinner]="false" height="3px"></ngx-loading-bar>
+<div>
   <form [formGroup]="form" (ngSubmit)="submit()">
-    <formly-form class="mb-0" [model]="model" [fields]="fields" [form]="form"></formly-form>
-    <div class="float-right mt-2">
-      <button type="button" id="editor-delete-button" class="btn btn-outline-danger btn-sm mr-2"
-          (click)="cancel()">
-          <i class="fa fa-times"></i> {{ 'Cancel' | translate }}
-        </button>
-        <button type="submit" id="editor-save-button" class="btn btn-primary btn-sm" [disabled]="!form.valid">
-          <i class="fa fa-save"></i> {{ 'Save' | translate }}
-        </button>
-      </div>
-    </form>
+    <div class="mb-2">
+      <formly-form [model]="model" [fields]="fields" [form]="form" />
+    </div>
+    <div class="flex gap-2 justify-content-end">
+      <p-button severity="danger" [label]="'Cancel' | translate" icon="fa fa-times" [outlined]="true" (onClick)="cancel()" />
+      <p-button type="submit" [disabled]="!form.valid" [label]="'Save' | translate" icon="fa fa-save" />
+    </div>
+  </form>
 </div>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.html b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.html
index b5570b5eb..b75ed6531 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.html
@@ -14,18 +14,17 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-@if (model) {
-  <div class="container pl-3 mt-3">
+@defer (when model) {
+  <ngx-loading-bar [includeSpinner]="false" height="3px"></ngx-loading-bar>
+  <p-messages />
+  <div>
     <form [formGroup]="form" (ngSubmit)="submit()">
-      <formly-form class="mb-0" [model]="model" [fields]="fields" [form]="form"></formly-form>
-      <div class="float-right">
-        <button type="button" id="editor-delete-button" class="btn btn-outline-danger btn-sm mr-1"
-          (click)="cancel()">
-          <i class="fa fa-times"></i> {{ 'Cancel' | translate }}
-        </button>
-        <button type="submit" id="editor-save-button" class="btn btn-primary btn-sm" [disabled]="!form.valid">
-          <i class="fa fa-save"></i> {{ 'Save' | translate }}
-        </button>
+      <div class="mb-2">
+        <formly-form [model]="model" [fields]="fields" [form]="form" />
+      </div>
+      <div class="flex gap-2 justify-content-end">
+        <p-button severity="danger" [label]="'Cancel' | translate" icon="fa fa-times" [outlined]="true" (onClick)="cancel()" />
+        <p-button type="submit" [disabled]="!form.valid" [label]="'Save' | translate" icon="fa fa-save" />
       </div>
     </form>
   </div>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts
index 45ce22b2c..a18ad00ea 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component.ts
@@ -21,7 +21,7 @@ import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker';
 import { FormlyFieldConfig } from '@ngx-formly/core';
 import { FormlyJsonschema } from '@ngx-formly/core/json-schema';
 import { TranslateService } from '@ngx-translate/core';
-import { CONFIG, RecordService, processJsonSchema, removeEmptyValues } from '@rero/ng-core';
+import { CONFIG, RecordService, processJsonSchema, removeEmptyValues, resolve$ref } from '@rero/ng-core';
 import { AppSettingsService, UserService } from '@rero/shared';
 import { MessageService } from 'primeng/api';
 import { Subscription, forkJoin, of } from 'rxjs';
@@ -59,7 +59,7 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
   /** Additional style for a field */
   private _cssConfig = {
     keep_history: 'col-12 pl-0',
-    default: 'col-6 pl-0'
+    default: 'col-12 md:col-6 pl-0'
   };
   /** Description for some fields defined as key */
   private _fieldDescription = {
@@ -74,7 +74,7 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
         if (schema) {
           const disabledFields = this.appSettingsService.settings.userProfile.readOnlyFields;
           this.fields = [
-            this.formlyJsonschema.toFieldConfig(processJsonSchema(schema.schema), {
+            this.formlyJsonschema.toFieldConfig(processJsonSchema(resolve$ref(schema.schema, schema.schema.properties)), {
 
               // post process JSONSchema7 to FormlyFieldConfig conversion
               map: (field: FormlyFieldConfig, jsonSchema: any) => {
@@ -85,7 +85,7 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
                 }
                 // Add the "row" class to the main object
                 if (field.key == null) {
-                  field.props.containerCssClass = 'row';
+                  field.props.containerCssClass = 'grid';
                 }
                 const fkey = String(field.key);
                 // Add a class on each field
@@ -94,7 +94,7 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
                   : this._cssConfig.default;
                 // Deactivation of the fields if we have a patron record
                 if ((this.userService.user.roles.length > 0) && (field.key !== undefined && disabledFields.includes(fkey))) {
-                  field.props.readonly = true;
+                  field.props.disabled = true;
                 }
                 // Hide password field
                 if (fkey === 'password') {
@@ -181,7 +181,7 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
       });
       return;
     }
-    const data = removeEmptyValues(this.form.value);
+    const data = removeEmptyValues(this.model);
     // Update user record and reload logged user
     this.recordService
       .update('users', this.userService.user.id.toString(), data)
@@ -195,7 +195,15 @@ export class PatronProfilePersonalEditorComponent implements OnInit, OnDestroy {
           });
           this.redirect();
         },
-        error: (error) => this.formError = error.title
+        error: (error) => {
+          this.messageService.add({
+            severity: 'error',
+            summary: this.translateService.instant('Error'),
+            detail: this.translateService.instant('An error occurred on the server: ') + error.title,
+            sticky: true,
+            closable: true
+          });
+        }
       });
   }
 
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.html b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.html
index 4c5ec46ba..eae12d997 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.html
@@ -14,30 +14,23 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<section id="personal-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-lg-12 pl-0" translate>Personal details</div>
-    </div>
-  </div>
-</section>
-
-<section id="personal-data" class="px-3 mt-4">
-  <dl class="container row">
+<section id="personal-section" class="mt-2">
+  <h4 translate>Personal details</h4>
+  <dl class="metadata">
     <!-- GENDER -->
     @if (user.gender) {
-      <dt class="col-lg-3 col-sm-6 label-title" translate>Gender</dt>
-      <dd class="col-lg-9 col-sm-6">{{ user.gender | translate }}</dd>
+      <dt translate>Gender</dt>
+      <dd>{{ user.gender | translate }}</dd>
     }
     <!-- USERNAME -->
     @if (user.username) {
-      <dt class="col-lg-3 col-sm-6 label-title" translate>Username</dt>
-      <dd class="col-lg-9 col-sm-6">{{ user.username }}</dd>
+      <dt translate>Username</dt>
+      <dd>{{ user.username }}</dd>
     }
     <!-- PRIMARY ADDRESS -->
     @if (user.street || user.city || user.country) {
-      <dt class="col-lg-3 col-sm-6 label-title" translate>Primary address</dt>
-      <dd class="col-lg-9 col-sm-6">
+      <dt translate>Primary address</dt>
+      <dd>
         @if (user.street) {
           {{ user.street }}<br>
         }
@@ -51,8 +44,8 @@
     }
     <!-- SECONDARY ADDRESS -->
     @if (patron.second_address) {
-      <dt class="col-lg-3 col-sm-6 label-title" translate>Secondary address</dt>
-      <dd class="col-lg-9 col-sm-6">
+      <dt translate>Secondary address</dt>
+      <dd>
         @if (patron.second_address.street) {
           {{ patron.second_address.street }}<br>
         }
@@ -66,42 +59,42 @@
     }
     <!-- HOME PHONE -->
     @if (user.home_phone) {
-      <dt class="col-lg-3 col-sm-6 label-title" translate>Home phone</dt>
-      <dd class="col-lg-9 col-sm-6">{{ user.home_phone }}</dd>
+      <dt translate>Home phone</dt>
+      <dd>{{ user.home_phone }}</dd>
     }
     <!-- BUSINESS PHONE -->
     @if (user.business_phone) {
-      <dt class="col-lg-3 col-sm-6 label-title" translate>Business phone</dt>
-      <dd class="col-lg-9 col-sm-6">{{ user.business_phone }}</dd>
+      <dt translate>Business phone</dt>
+      <dd>{{ user.business_phone }}</dd>
     }
     <!-- MOBILE PHONE -->
     @if (user.mobile_phone) {
-      <dt class="col-lg-3 col-sm-6 label-title" translate>Mobile phone</dt>
-      <dd class="col-lg-9 col-sm-6">{{ user.mobile_phone }}</dd>
+      <dt translate>Mobile phone</dt>
+      <dd>{{ user.mobile_phone }}</dd>
     }
     <!-- OTHER PHONE -->
     @if (user.other_phone) {
-      <dt class="col-lg-3 col-sm-6 label-title" translate>Other phone</dt>
-      <dd class="col-lg-9 col-sm-6">{{ user.other_phone }}</dd>
+      <dt translate>Other phone</dt>
+      <dd>{{ user.other_phone }}</dd>
     }
     <!-- EMAIL -->
     @if (user.email) {
-      <dt class="col-lg-3 col-sm-6 label-title" translate>Email</dt>
-      <dd class="col-lg-9 col-sm-6">{{ user.email }}</dd>
+      <dt translate>Email</dt>
+      <dd>{{ user.email }}</dd>
     }
     <!-- PATRON BARCODE -->
     @if (patron.patron.barcode) {
-      <dt class="col-lg-3 col-sm-6 label-title" translate>Patron number</dt>
-      <dd class="col-lg-9 col-sm-6">{{ patron.patron.barcode | join : ', ' }}</dd>
+      <dt translate>Patron number</dt>
+      <dd>{{ patron.patron.barcode | join : ', ' }}</dd>
     }
     <!-- PATRON BARCODE -->
     @if (patron.patron.expiration_date) {
-      <dt class="col-lg-3 col-sm-6 label-title" translate>Account expiration</dt>
-      <dd class="col-lg-9 col-sm-6">{{ patron.patron.expiration_date | dateTranslate: 'shortDate' }}</dd>
+      <dt translate>Account expiration</dt>
+      <dd>{{ patron.patron.expiration_date | dateTranslate: 'shortDate' }}</dd>
     }
     <!-- KEEP HISTORY -->
-    <dt class="col-lg-3 col-sm-6 label-title" translate>Keep history</dt>
-    <dd class="col-lg-9 col-sm-6">
+    <dt translate>Keep history</dt>
+    <dd>
       <i class="fa fa-circle" [ngClass]="{'text-success': user.keep_history, 'text-danger': !user.keep_history}"></i>
       @if (user.keep_history) {
         {{ 'The loan history is saved for a maximum of six months. It is visible to you and the library staff.' | translate }}
@@ -111,9 +104,9 @@
     </dd>
   </dl>
   @if (disabledButtonOnReadyOnly) {
-    <div class="mt-3 pl-3">
-      <a id="profile-edit" class="btn btn-sm btn-primary" href="/{{ viewcode }}/user/profile" translate>Edit</a>
-      <a id="profile-password-change" class="btn btn-sm btn-primary ml-2" href="/{{ viewcode }}/user/password" translate>Change my password</a>
+    <div class="flex gap-2 mt-3">
+      <a id="profile-edit" class="p-button" href="/{{ viewcode }}/user/profile" translate>Edit</a>
+      <a id="profile-password-change" class="p-button font-bold" href="/{{ viewcode }}/user/password" translate>Change my password</a>
     </div>
   }
 </section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.scss b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.scss
index 14bd7f64c..d0fed2dba 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.scss
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.scss
@@ -15,7 +15,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-dl > dt,
-dl > dd {
-  margin-bottom: 0;
+
+public-search-patron-profile-personal {
+  .p-button {
+    @extend .text-white, .font-bold;
+    &:hover {
+      @extend .no-underline;
+    }
+  }
 }
diff --git a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts
index 08f8ca922..68b81b1f0 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.ts
@@ -19,8 +19,7 @@ import { AppSettingsService, IPatron } from '@rero/shared';
 
 @Component({
   selector: 'public-search-patron-profile-personal',
-  templateUrl: './patron-profile-personal.component.html',
-  styleUrls: ['./patron-profile-personal.component.scss']
+  templateUrl: './patron-profile-personal.component.html'
 })
 export class PatronProfilePersonalComponent {
 
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 b54aca1ab..0b821c4d6 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
@@ -16,69 +16,68 @@
 -->
 
 @if (record) {
-  <div class="d-flex container p-2" [ngClass]="{'callout callout-success': record.metadata.state === 'ITEM_AT_DESK' }">
-    <shared-open-close-button (status)="isCollapsed = $event" />
-    <div class="container-fluid">
-      <div class="row">
+  <div class="grid grid-nogutter p-2 pl-1" [ngClass]="{'border-left-3 border-success':record.metadata.state === 'ITEM_AT_DESK'}">
+
+    <div class="md:col-8 col-12 flex gap-2">
+      <shared-open-close-button (status)="isCollapsed = $event" />
+      <div class="w-full">
         <!-- 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 -->
-            @if (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 }}
-              @if (record.metadata.request_expire_date) {
-                {{ 'until' | translate }} {{ record.metadata.request_expire_date | dateTranslate: 'shortDate'}}
-              }
-            }
-            <!-- PENDING OR ITEM IN TRANSIT FOR PICKUP -->
-            @if (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 }}
-            }
-            <!-- PENDING -->
-            @if (record.metadata.state === 'PENDING' && record.metadata.rank && record.metadata.rank > 0) {
-              <div [translate]="'(position {{ rank }} in waiting list)'" [translateParams]="{ rank: record.metadata.rank }"></div>
-            }
+        <public-search-patron-profile-document
+          [record]="record"
+          [showAdditionalInformation]="!isCollapsed"
+          [isAnimated]="true"
+        />
+        <dl class="metadata">
+          <dt translate>Pickup location</dt>
+          <dd>{{ record.metadata.pickup_name }}</dd>
+        </dl>
+        <dl class="metadata md:hidden">
+          <dt class="md:hidden" translate>Status</dt>
+          <dd>
+            <ng-container [ngTemplateOutlet]="status" />
           </dd>
         </dl>
-        <!-- ACTION BUTTONS ================================================= -->
-        <div class="col-lg-2 col-12 text-right">
-          @if (record.metadata.state === 'PENDING' || record.metadata.state === 'ITEM_IN_TRANSIT_FOR_PICKUP') {
-            <button
-              id="request-cancel-{{ record.metadata.pid }}"
-              type="button"
-              class="btn btn-sm btn-primary"
-              (click)="cancel()"
-              [disabled]="cancelInProgress"
-            >
-              @if (!cancelInProgress || actionDone) {
-                {{ 'Cancel' | translate }}
-              } @else {
-                <span class="spinner-border spinner-border-sm mr-1" role="status"></span>
-                {{ 'Cancel' | translate }}
-              }
-            </button>
-          } @else {
-            &nbsp;
-          }
-        </div>
       </div>
+    </div>
+        <!-- STATUS ========================================================= -->
+    <div class="md:col-2 col-12 hidden md:block">
+      <ng-container [ngTemplateOutlet]="status" />
+    </div>
+    <!-- ACTION BUTTONS ================================================= -->
+    <div class="md:col-2 col-12 flex justify-content-end">
+      @if (['PENDING', 'ITEM_IN_TRANSIT_FOR_PICKUP'].includes(record.metadata.state)) {
+        <p-button
+          id="request-cancel-{{ record.metadata.pid }}"
+          (onClick)="cancel()"
+          [disabled]="cancelInProgress"
+          [label]="'Cancel' | translate"
+          outlined
+          severity="danger"
+          [icon]="!(!cancelInProgress || actionDone)? 'fa fa-spinner': 'fa fa-trash'"
+        />
+      }
     </div>
   </div>
 }
+
+<ng-template #status>
+  <!-- ITEM AT DESK -->
+  @if (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 }}
+    @if (record.metadata.request_expire_date) {
+      {{ 'until' | translate }} {{ record.metadata.request_expire_date | dateTranslate: 'shortDate'}}
+    }
+  }
+  <!-- PENDING OR ITEM IN TRANSIT FOR PICKUP -->
+  @if (['PENDING', 'ITEM_IN_TRANSIT_FOR_PICKUP'].includes(record.metadata.state)) {
+    <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 }}
+  }
+  <!-- PENDING -->
+  @if (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-template>
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
deleted file mode 100644
index 3ae7f5c40..000000000
--- a/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2022 RERO
- * Copyright (C) 2022 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-@import '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.ts b/projects/public-search/src/app/patron-profile/patron-profile-requests/patron-profile-request/patron-profile-request.component.ts
index bdc5f9d47..42813ff29 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
@@ -24,8 +24,7 @@ import { PatronProfileService } from '../../patron-profile.service';
 
 @Component({
   selector: 'public-search-patron-profile-request',
-  templateUrl: './patron-profile-request.component.html',
-  styleUrls: ['./patron-profile-request.component.scss']
+  templateUrl: './patron-profile-request.component.html'
 })
 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 b744fbb98..62e94533b 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
@@ -14,37 +14,33 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<section 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-8 pl-5" translate>Document</div>
-      <div class="col-2">Status</div>
-      <div class="col-2">&nbsp;</div>
-    </div>
-  </div>
+<section id="requests-section" class="mt-2">
+  <p-card class="p-card-body-p-0">
+    <ng-template pTemplate="header">
+        <div class="hidden md:flex grid grid-nogutter bg-blue-900 text-white p-2 text-lg font-bold">
+          <div class="col-8" translate>Document</div>
+          <div class="col-2" translate>Status</div>
+        </div>
+    </ng-template>
 
   @defer (when loaded) {
     @if (paginator.getRecordsCount() > 0) {
-      <div class="row border">
-        <div class="container-fluid">
+      <div class="alternate-color">
           @for (request of records; track request) {
-            <public-search-patron-profile-request
-              [record]="request"
-              id="request-{{ request.metadata.pid }}"
-              class="row border-bottom">
-            </public-search-patron-profile-request>
+            <div>
+              <public-search-patron-profile-request
+                [record]="request"
+                id="request-{{ request.metadata.pid }}"
+              />
+            </div>
           }
-          <shared-search-show-more-pager id="show-more-requests" [paginator]="paginator"></shared-search-show-more-pager>
-        </div>
+          <shared-search-show-more-pager id="show-more-requests" [paginator]="paginator" />
       </div>
     } @else {
-      <div class="row">
-        <div class="col mt-2 font-weight-bold" translate>No request</div>
-      </div>
+        <div class="font-bold mx-2 my-4" translate>No request</div>
     }
   } @placeholder {
-    <div class="row">
-      <div class="col mt-2 font-weight-bold" translate>Loading in progress</div>
-    </div>
+      <div class="font-bold mx-2 my-4" translate>Loading in progress</div>
   }
+  </p-card>
 </section>
diff --git a/projects/public-search/src/app/patron-profile/patron-profile.component.html b/projects/public-search/src/app/patron-profile/patron-profile.component.html
index 3d1d6abec..df22641ea 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile.component.html
+++ b/projects/public-search/src/app/patron-profile/patron-profile.component.html
@@ -14,7 +14,7 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<ngx-loading-bar [includeSpinner]="false" height="3px"></ngx-loading-bar>
+<ngx-loading-bar [includeSpinner]="false" height="3px" />
 @if (user) { @if (user.isAuthenticated && user.isPatron) {
 <header>
   <h3>{{ fullname }}</h3>
@@ -22,27 +22,27 @@ <h3>{{ fullname }}</h3>
 <section class="mt-2">
   <public-search-patron-profile-menu
     patronPid="{{ patron.pid }}"
-  ></public-search-patron-profile-menu>
+  />
 </section>
 <section class="mt-3">
-  <public-search-patron-profile-message></public-search-patron-profile-message>
+  <p-messages />
+  <public-search-patron-profile-message/>
 </section>
-@for (tab of tabs|keyvalue: sortTabs; track tab) {
-  {{tab.key}}
-}
-<section class="mt-3">
-  <p-tabView (onChange)="tabOnChange($event)">
 
+<section class="mt-3">
+  <p-tabView  [activeIndex]="activeIndex" [scrollable]="true" (onChange)="tabOnChange($event)">
 @for (tab of tabs|keyvalue: sortTabs; track tab.key) {
   <p-tabPanel>
     <ng-template pTemplate="header">
-    {{tab.value.title}}
-    @if (tab.value.count != null) {
-        <p-badge class="ml-1" [value]="tab.value.count" severity="info"/>
-    }
-    @if (tab.value.feeTotal != null) {
-        <p-badge class="ml-1" [value]="tab.value.feeTotal  | currency : patron.organisation.currency : 'symbol'" severity="warning"/>
-    }
+      <div class="flex align-items-center gap-1">
+        <div>{{tab.value.title}}</div>
+        @if (tab.value.count != null) {
+            <p-badge [value]="tab.value.count" severity="info"/>
+        }
+        @if (tab.value.feeTotal != null) {
+            <p-badge [value]="tab.value.feeTotal  | currency : patron.organisation.currency : 'symbol'" severity="warning"/>
+        }
+      </div>
   </ng-template>
   @switch(tab.key) {
     @case ('loan') {
diff --git a/projects/public-search/src/app/patron-profile/patron-profile.component.ts b/projects/public-search/src/app/patron-profile/patron-profile.component.ts
index 8faf1c8ac..18572eb99 100644
--- a/projects/public-search/src/app/patron-profile/patron-profile.component.ts
+++ b/projects/public-search/src/app/patron-profile/patron-profile.component.ts
@@ -71,6 +71,8 @@ export class PatronProfileComponent implements OnInit, OnDestroy {
   /** Current logged user */
   user: any;
 
+  activeIndex: number = 0;
+
   /** Tabs informations */
   tabs: Tabs;
 
@@ -103,7 +105,7 @@ export class PatronProfileComponent implements OnInit, OnDestroy {
       illRequest: {
         loaded: false,
         count: 0,
-        title: this.translateService.instant('Interlibrary load'),
+        title: this.translateService.instant('Interlibrary loan'),
         order: 4,
       },
       personalDetails: {
@@ -136,9 +138,7 @@ export class PatronProfileComponent implements OnInit, OnDestroy {
    *  - zero if `a` and `b` are considered equal in sort order.
    */
   sortTabs = (a: KeyValue<string, any>, b: KeyValue<string, any>): number => {
-    if (a.value.order < b.value.order) return 1;
-    if (b.value.order > a.value.order) return -1;
-    return 0;
+    return a.value.order - b.value.order;
   };
 
   tabOnChange(event) {
@@ -179,7 +179,6 @@ export class PatronProfileComponent implements OnInit, OnDestroy {
 
   /** OnInit hook */
   ngOnInit(): void {
-    this.selectTab(this.getTabKeyByIndex(0));
     this.subscription.add(
       this.patronProfileService.loanFeesEvent$.subscribe((fees: number) => (this.tabs.loan.feeTotal = +fees.toFixed(2)))
     );
@@ -203,15 +202,15 @@ export class PatronProfileComponent implements OnInit, OnDestroy {
               Record,
               Record
             ]) => {
-              this.tabs.loan = {
-                ...this.tabs.loan,
-                loaded: true,
-                count: this.recordService.totalHits(loanResponse.hits.total),
-              };
+              Object.values(this.tabs).map(tab => tab.loaded = false);
+              this.tabs.loan.count = this.recordService.totalHits(loanResponse.hits.total);
               this.tabs.fee.feeTotal = feeResponse.aggregations.total.value;
               this.tabs.request.count = this.recordService.totalHits(requestResponse.hits.total);
               this.tabs.history.count = this.recordService.totalHits(historyResponse.hits.total);
               this.tabs.illRequest.count = this.recordService.totalHits(illRequestResponse.hits.total);
+              // back to the loan tab if the organisation as been changed
+              this.activeIndex = 0;
+              this.selectTab(this.getTabKeyByIndex(this.activeIndex));
             }
           );
         })
@@ -244,6 +243,7 @@ export class PatronProfileComponent implements OnInit, OnDestroy {
    * @param tabName - string, name of current selected tab
    */
   selectTab(name: string): void {
+    this.activeIndex = this.tabs[name].order;
     if (name in this.tabs && !this.tabs[name].loaded) {
       this.tabs[name].loaded = true;
       this.patronProfileService.changeTab({ name, count: this.tabs[name].count });
diff --git a/projects/public-search/src/app/pipe/loan-status-badge.pipe.ts b/projects/public-search/src/app/pipe/loan-status-badge.pipe.ts
index 3bb44e0f6..9453466bf 100644
--- a/projects/public-search/src/app/pipe/loan-status-badge.pipe.ts
+++ b/projects/public-search/src/app/pipe/loan-status-badge.pipe.ts
@@ -29,13 +29,15 @@ export class LoanStatusBadgePipe implements PipeTransform {
   transform(status: string): string {
     switch (status) {
       case 'PENDING':
-        return 'badge-warning';
+        return 'warning';
       case 'ITEM_AT_DESK':
-        return 'badge-success';
+        return 'success';
       case 'ITEM_ON_LOAN':
-        return 'badge-info';
+        return 'info';
+      case 'CANCELLED':
+        return 'danger'
       default:
-        return 'badge-light';
+        return 'secondary';
     }
   }
 }
diff --git a/projects/public-search/src/app/pipe/status-badge.pipe.spec.ts b/projects/public-search/src/app/pipe/status-badge.pipe.spec.ts
deleted file mode 100644
index c01e02d73..000000000
--- a/projects/public-search/src/app/pipe/status-badge.pipe.spec.ts
+++ /dev/null
@@ -1,43 +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 { TestBed } from '@angular/core/testing';
-import { StatusBadgePipe } from './status-badge.pipe';
-
-describe('StatusBadgePipe', () => {
-  let pipe: StatusBadgePipe;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({
-      providers: [
-        StatusBadgePipe
-      ]
-    });
-    pipe = TestBed.inject(StatusBadgePipe);
-  });
-
-  it('create an instance', () => {
-    expect(pipe).toBeTruthy();
-  });
-
-  it('Should return the "badge-secondary" class', () => {
-    expect(pipe.transform('pending')).toEqual('badge-secondary');
-  });
-
-  it('Should return the "badge-light" class (default)', () => {
-    expect(pipe.transform('missing')).toEqual('badge-light');
-  });
-});
diff --git a/projects/public-search/src/app/pipe/status-badge.pipe.ts b/projects/public-search/src/app/pipe/status-badge.pipe.ts
deleted file mode 100644
index ca7f3742a..000000000
--- a/projects/public-search/src/app/pipe/status-badge.pipe.ts
+++ /dev/null
@@ -1,41 +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 { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'statusBadge'
-})
-export class StatusBadgePipe implements PipeTransform {
-
-  /**
-   * Transform status to class
-   * @param status - string
-   * @return string
-   */
-  transform(status: string): string {
-    switch (status) {
-      case 'pending':
-        return 'badge-secondary';
-      case 'validated':
-        return 'badge-success';
-      case 'denied':
-        return 'badge-danger';
-      default:
-        return 'badge-light';
-    }
-  }
-}
diff --git a/projects/public-search/src/app/routes/documents-route.service.ts b/projects/public-search/src/app/routes/documents-route.service.ts
index 0b51ec363..8b69947c9 100644
--- a/projects/public-search/src/app/routes/documents-route.service.ts
+++ b/projects/public-search/src/app/routes/documents-route.service.ts
@@ -161,20 +161,24 @@ export class DocumentsRouteService extends BaseRoute implements ResourceRouteInt
                 {
                   label: _('Relevance'),
                   value: 'bestmatch',
-                  defaultQuery: true
+                  defaultQuery: true,
+                  icon: 'fa-sort-amount-desc'
                 },
                 {
                   label: _('Date (newest)'),
-                  value: 'pub_date_new'
+                  value: 'pub_date_new',
+                  icon: 'fa-sort-amount-desc'
                 },
                 {
                   label: _('Date (oldest)'),
                   value: 'pub_date_old',
+                  icon: 'fa-sort-amount-asc'
                 },
                 {
                   label: _('Title'),
                   value: 'title',
-                  defaultNoQuery: true
+                  defaultNoQuery: true,
+                  icon: 'fa-sort-alpha-asc'
                 }
               ]
             },
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/scss/bootstrap_styles.scss
similarity index 75%
rename from projects/public-search/src/app/patron-profile/patron-profile-histories/patron-profile-history/patron-profile-history.component.scss
rename to projects/public-search/src/app/scss/bootstrap_styles.scss
index 1e8eb24c5..d7adaf45a 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/scss/bootstrap_styles.scss
@@ -1,7 +1,6 @@
 /*
- * RERO ILS UI
- * Copyright (C) 2022 RERO
- * Copyright (C) 2022 UCLouvain
+ * RERO angular core
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -15,9 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
 
-:host:nth-child(even){
-  background-color: $light;
-}
+ @layer bootstrap, rero-ils-ui, primeng, rero-ils-ui;
+ @layer bootstrap {
+    @import 'bootstrap/scss/bootstrap';
+ }
+ @import "./styles.scss";
diff --git a/projects/public-search/src/app/scss/styles.scss b/projects/public-search/src/app/scss/styles.scss
index 10cc670ac..9213da26c 100644
--- a/projects/public-search/src/app/scss/styles.scss
+++ b/projects/public-search/src/app/scss/styles.scss
@@ -1,7 +1,6 @@
-/* You can add global styles to this file, and also import other style files */
 /*
- * RERO ILS UI
- * Copyright (C) 2021 RERO
+ * RERO angular core
+ * Copyright (C) 2024 RERO
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as published by
@@ -16,72 +15,6 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
-
-// ADJUST BOOTSTRAP / PRIMENG -------------------
-.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-// FIELDS FORMAT -----------------------
-ng-core-formly-field-primeng-input > input,
-formly-field > input {
-  width: 100%;
-}
-
-label {
-  align-items: baseline;
-}
-
-.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);
-}
+    @import  "../../../../shared/src/scss/styles.scss";
+    @import "../../../../public-search/src/app/patron-profile/patron-profile-personal/patron-profile-personal.component.scss";
+    @import "../../../../public-search/src/app/document-detail/holdings/holding/holding.component.scss";
diff --git a/projects/public-search/src/index.html b/projects/public-search/src/index.html
index 56c0019cb..cbeea01e7 100644
--- a/projects/public-search/src/index.html
+++ b/projects/public-search/src/index.html
@@ -14,48 +14,80 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>PublicSearch</title>
-    <base href="/">
+    <base href="/" />
 
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="icon" type="image/x-icon" href="favicon.ico">
-    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link
+      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
+      rel="stylesheet"
+      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
+      crossorigin="anonymous"
+    />
+    <style>
+       @layer bootstrap, rero-ils-ui, primeng, rero-ils-ui;
+      :root {
+        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+          Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+        --font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+          Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
+
+        font-size: 0.875rem;
+      }
+    </style>
   </head>
   <body>
     <div class="container">
         <nav class="navbar navbar-expand-lg navbar-light bg-light">
-            <a class="navbar-brand" href="/">Public Search</a>
-            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
-              <span class="navbar-toggler-icon"></span>
-            </button>
-            <div class="collapse navbar-collapse" id="navbarNav">
-              <ul class="navbar-nav">
-                <li class="nav-item">
-                  <a class="nav-link" href="/global/search/documents">Global</a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="/aoste/search/documents">Aoste</a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="/highlands/search/documents">Highlands</a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="/fictive/search/documents">Fictive</a>
-                </li>
-                <li class="nav-item">
-                  <a class="nav-link" href="/aoste/search/collections">Aoste collections</a>
-                </li>
-              </ul>
-            </div>
-            <!-- TODO: Input does'nt work on WebComponent -->
-            <main-search-bar isAdmin="false" viewCode="global"></main-search-bar>
-          </nav>
-        <public-search-root></public-search-root>
+          <a class="navbar-brand" href="/">Public Search</a>
+          <button
+            class="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target="#navbarNav"
+            aria-controls="navbarNav"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+          >
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav">
+              <li class="nav-item">
+                <a class="nav-link" href="/global/search/documents">Global</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/aoste/search/documents">Aoste</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/highlands/search/documents"
+                  >Highlands</a
+                >
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/fictive/search/documents">Fictive</a>
+              </li>
+              <li class="nav-item">
+                <a class="nav-link" href="/aoste/search/collections"
+                  >Aoste collections</a
+                >
+              </li>
+            </ul>
+          </div>
+          <!-- TODO: Input does'nt work on WebComponent -->
+          <div class="rero-ils-ui">
+            <main-search-bar
+              isAdmin="false"
+              viewCode="global"
+            />
+          </div>
+        </nav>
+      <public-search-root class="rero-ils-ui"/>
     </div>
   </body>
 </html>
diff --git a/projects/public-user-password-change/src/app/app.module.ts b/projects/public-user-password-change/src/app/app.module.ts
index f3b5b4893..294757546 100644
--- a/projects/public-user-password-change/src/app/app.module.ts
+++ b/projects/public-user-password-change/src/app/app.module.ts
@@ -14,19 +14,15 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { APP_INITIALIZER, DoBootstrap, inject, Injector, NgModule } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FormlyModule } from '@ngx-formly/core';
-import { FormlyPrimeNGModule } from '@ngx-formly/primeng';
-import { LoadingBarModule } from '@ngx-loading-bar/core';
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-import { CoreConfigService, CoreModule, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
-import { SharedModule } from '@rero/shared';
+import { CoreConfigService, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
 import { fieldPasswordMatchValidator, PatronProfilePasswordComponent } from 'projects/public-search/src/app/patron-profile/patron-profile-password/patron-profile-password.component';
 import { Observable } from 'rxjs';
 import { AppConfigService } from './app-config.service';
@@ -42,17 +38,12 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     PatronProfilePasswordComponent
   ],
   imports: [
-    HttpClientModule,
     BrowserModule,
-    BrowserAnimationsModule,
-    FormsModule,
     FormlyModule.forRoot({
       validators: [
         { name: 'passwordMatch', validation: fieldPasswordMatchValidator }
       ]
     }),
-    FormlyPrimeNGModule,
-    CoreModule,
     RecordModule,
     ReactiveFormsModule,
     TranslateModule.forRoot({
@@ -63,9 +54,7 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
       },
       isolate: false
     }),
-    SharedModule,
-    LoadingBarHttpClientModule,
-    LoadingBarModule,
+    LoadingBarHttpClientModule
   ],
   providers: [
     { provide: TranslateService, useClass: NgCoreTranslateService },
diff --git a/projects/public-user-password-change/src/index.html b/projects/public-user-password-change/src/index.html
index 4077e272a..4c714c815 100644
--- a/projects/public-user-password-change/src/index.html
+++ b/projects/public-user-password-change/src/index.html
@@ -29,18 +29,24 @@
       integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
       crossorigin="anonymous"
     />
-    <link
+    <!-- <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
       integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
       crossorigin="anonymous"
-    />
+    /> -->
+    <style>
+      .container {
+        width: 960px;
+        margin: auto;
+      }
+    </style>
   </head>
   <body class="d-flex flex-column">
     <container>
       <div class="align-self-center justify-content-between ml-5 mb-5">
         <div class="container mt-2">
-          <public-user-password-change></public-user-password-change>
+          <public-user-password-change class="rero-ils-ui" />
         </div>
       </div>
     </container>
diff --git a/projects/public-user-profile-edit/src/app/app.module.ts b/projects/public-user-profile-edit/src/app/app.module.ts
index 39829f35b..a9796c3af 100644
--- a/projects/public-user-profile-edit/src/app/app.module.ts
+++ b/projects/public-user-profile-edit/src/app/app.module.ts
@@ -14,22 +14,20 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
 import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, DoBootstrap, inject, Injector, NgModule } from '@angular/core';
 import { createCustomElement } from '@angular/elements';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { RouterModule } from '@angular/router';
-import { LoadingBarModule } from '@ngx-loading-bar/core';
 import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
-import { CoreConfigService, CoreModule, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
-import { SharedModule } from '@rero/shared';
+import { CoreConfigService, NgCoreTranslateService, RecordModule, TranslateLoader } from '@rero/ng-core';
 import { PatronProfilePersonalEditorComponent } from 'projects/public-search/src/app/patron-profile/patron-profile-personal-editor/patron-profile-personal-editor.component';
 import { Observable } from 'rxjs';
 import { AppConfigService } from './app-config.service';
 import { AppInitializerService } from './app-initializer.service';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { MessagesModule } from 'primeng/messages';
 
 /** function to instantiate the application  */
 export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
@@ -41,14 +39,11 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
     PatronProfilePersonalEditorComponent
   ],
   imports: [
-    RouterModule,
-    HttpClientModule,
     BrowserModule,
     BrowserAnimationsModule,
-    CoreModule,
     RecordModule,
-    FormsModule,
     ReactiveFormsModule,
+    MessagesModule,
     TranslateModule.forRoot({
       loader: {
         provide: BaseTranslateLoader,
@@ -57,9 +52,7 @@ export function appInitFactory(appInitializerService: AppInitializerService): ()
       },
       isolate: false
     }),
-    SharedModule,
     LoadingBarHttpClientModule,
-    LoadingBarModule,
   ],
   providers: [
     { provide: TranslateService, useClass: NgCoreTranslateService },
diff --git a/projects/public-user-profile-edit/src/index.html b/projects/public-user-profile-edit/src/index.html
index b3666ad0a..fd05210db 100644
--- a/projects/public-user-profile-edit/src/index.html
+++ b/projects/public-user-profile-edit/src/index.html
@@ -29,18 +29,24 @@
       integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
       crossorigin="anonymous"
     />
-    <link
+    <!-- <link
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
       integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
       crossorigin="anonymous"
-    />
+    /> -->
+    <style>
+      .container {
+        width: 960px;
+        margin: auto;
+      }
+    </style>
   </head>
   <body class="d-flex flex-column">
     <container>
       <div class="align-self-center justify-content-between ml-5 mb-5">
         <div class="container mt-2">
-          <public-user-profile-edit></public-user-profile-edit>
+          <public-user-profile-edit class="rero-ils-ui" />
         </div>
       </div>
     </container>
diff --git a/projects/search-bar/src/app/app.module.ts b/projects/search-bar/src/app/app.module.ts
index 68c32713e..1a5268e23 100644
--- a/projects/search-bar/src/app/app.module.ts
+++ b/projects/search-bar/src/app/app.module.ts
@@ -20,27 +20,26 @@ import { APP_INITIALIZER, DoBootstrap, inject, Injector, NgModule } from '@angul
 import { createCustomElement } from '@angular/elements';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslateLoader as BaseTranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { CoreConfigService, RecordModule, TranslateLoader } from '@rero/ng-core';
+import { CoreConfigService, TranslateLoader } from '@rero/ng-core';
 import { RemoteSearchComponent, SharedModule } from '@rero/shared';
-import { AppInitializerService } from './app-initializer.service';
 import { Observable } from 'rxjs';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
+import { AppInitializerService } from './app-initializer.service';
+import { RouterModule } from '@angular/router';
 
 /** function to instantiate the application  */
 export function appInitFactory(appInitializerService: AppInitializerService): () => Observable<any> {
   return () => appInitializerService.load();
 }
 
-
 @NgModule({
     declarations: [],
     imports: [
         BrowserModule,
         BrowserAnimationsModule,
+        RouterModule.forRoot([]),
         HttpClientModule,
-        RecordModule,
         ReactiveFormsModule,
         TranslateModule.forRoot({
             loader: {
diff --git a/projects/search-bar/src/index.html b/projects/search-bar/src/index.html
index ff0ba1920..c0580b3e2 100644
--- a/projects/search-bar/src/index.html
+++ b/projects/search-bar/src/index.html
@@ -5,18 +5,24 @@
     <title>SearchBar</title>
     <base href="/">
 
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <!-- <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
     <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
-    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> -->
+    <style>
+      .container {
+        width: 960px;
+        margin: auto;
+      }
+    </style>
   </head>
-  <body class="d-flex flex-column">
-    <div class="m-4">
+  <body>
+    <div class="container">
       <h4>Search bar</h4>
-      <div class="mb-3">
-        <main-search-bar admin="false" placeholder="Search (Aoste view)" viewcode="aoste"></main-search-bar>
+      <div style="margin-bottom: 10px">
+        <main-search-bar admin="false" placeholder="Search (Aoste view)" viewcode="aoste" class="rero-ils-ui"/>
       </div>
-      <main-search-bar placeholder="Search (Admin view)"></main-search-bar>
+      <main-search-bar inputstyleclass="text-lg w-full" placeholder="Search (Admin view)" class="rero-ils-ui" />
     </div>
   </body>
 </html>
diff --git a/projects/shared/src/lib/component/core/brief-view/brief-view.component.html b/projects/shared/src/lib/component/core/brief-view/brief-view.component.html
index 789f6f7e9..d43b127cd 100644
--- a/projects/shared/src/lib/component/core/brief-view/brief-view.component.html
+++ b/projects/shared/src/lib/component/core/brief-view/brief-view.component.html
@@ -15,16 +15,15 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-
-<div class="brief-view">
+<div class="flex align-content-start">
   @if (iconTemplate) {
-    <div class="brief-view-icon">
+    <div class="text-center">
       <ng-container *ngTemplateOutlet="iconTemplate"></ng-container>
     </div>
   }
 
-  <div class="brief-view-body">
-    <div class="brief-view-title">
+  <div class="mx-3">
+    <div>
       @if (titleTemplate) {
         <ng-container *ngTemplateOutlet="titleTemplate; context: { title:title, link:link }"></ng-container>
       } @else {
@@ -42,20 +41,18 @@ <h5>
       }
     </div>
     @if (contentTemplate) {
-      <div class="brief-view-content">
+      <div class="font-italic">
         <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
       </div>
     }
-    <div class="brief-view-tags">
+    <div>
       @if (tagsTemplate) {
         <ng-container *ngTemplateOutlet="tagsTemplate; context: { $implicit: tags }"></ng-container>
       } @else {
         @if (tags) {
-          <ul>
             @for (tag of tags; track tag) {
-              <li>{{ tag.label }}</li>
+              <p-tag severity="success" value="tag.label"/>
             }
-          </ul>
         }
       }
     </div>
diff --git a/projects/shared/src/lib/component/core/brief-view/brief-view.component.scss b/projects/shared/src/lib/component/core/brief-view/brief-view.component.scss
deleted file mode 100644
index 075548d1f..000000000
--- a/projects/shared/src/lib/component/core/brief-view/brief-view.component.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
- * Copyright (C) 2019-2023 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-@import 'bootstrap/scss/bootstrap';
-
-.brief-view {
-  display: flex;
-  align-content: flex-start;
-
-  .brief-view-icon {
-    min-width: 2rem;
-    text-align: center;
-  }
-
-  .brief-view-body {
-    margin-left: 1rem;
-    margin-right: 1rem;
-  }
-
-  .brief-view-tags {
-    ul {
-      display: inline;
-      padding: 0;
-
-      li {
-        @extend .badge;
-        @extend .badge-secondary;
-      }
-
-      li + li {
-        @extend .ml-1;
-      }
-    }
-  }
-}
diff --git a/projects/shared/src/lib/component/core/brief-view/brief-view.component.ts b/projects/shared/src/lib/component/core/brief-view/brief-view.component.ts
index 0bd440e84..37f59b20c 100644
--- a/projects/shared/src/lib/component/core/brief-view/brief-view.component.ts
+++ b/projects/shared/src/lib/component/core/brief-view/brief-view.component.ts
@@ -26,8 +26,7 @@ export interface BriefViewTag {
 
 @Component({
   selector: 'shared-brief-view',
-  templateUrl: './brief-view.component.html',
-  styleUrls: ['./brief-view.component.scss']
+  templateUrl: './brief-view.component.html'
 })
 export class BriefViewComponent implements AfterContentInit {
 
diff --git a/projects/shared/src/lib/component/documents/document-brief-view/document-brief-view.component.html b/projects/shared/src/lib/component/documents/document-brief-view/document-brief-view.component.html
index ca1b3022a..022c8d72a 100644
--- a/projects/shared/src/lib/component/documents/document-brief-view/document-brief-view.component.html
+++ b/projects/shared/src/lib/component/documents/document-brief-view/document-brief-view.component.html
@@ -23,7 +23,7 @@
 }
 <!-- contribution -->
 @if (record?.contribution; as entities) {
-  <div class="small" name="document-contribution">
+  <div class="text-sm" name="document-contribution">
       <shared-contribution
         [contributions]="entities"
         [limitRecord]="3"
@@ -33,7 +33,7 @@
 }
 <!-- provision activity publications -->
 @if (provisionActivityPublications.length > 0) {
-  <div class="small" name="document-provision-activity">
+  <div class="text-sm" name="document-provision-activity">
     {{ provisionActivityPublications | join }}
   </div>
 }
diff --git a/projects/shared/src/lib/component/documents/document-brief-view/document-brief-view.component.scss b/projects/shared/src/lib/component/documents/document-brief-view/document-brief-view.component.scss
index 02b6649b9..70ad4a697 100644
--- a/projects/shared/src/lib/component/documents/document-brief-view/document-brief-view.component.scss
+++ b/projects/shared/src/lib/component/documents/document-brief-view/document-brief-view.component.scss
@@ -16,11 +16,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
+@import 'primeflex/primeflex';
 
 .small-content{
-  font-size: small;
-  color: $secondary;
-  font-weight: bold;
+  @extend .text-sm, .font-bold, .text-color-secondary;
 }
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/description-zone/description-zone.component.html b/projects/shared/src/lib/component/documents/document-description/description-zone/description-zone.component.html
similarity index 76%
rename from projects/admin/src/app/record/detail-view/document-detail-view/document-description/description-zone/description-zone.component.html
rename to projects/shared/src/lib/component/documents/document-description/description-zone/description-zone.component.html
index 5c5c4ed02..6bd815b56 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/description-zone/description-zone.component.html
+++ b/projects/shared/src/lib/component/documents/document-description/description-zone/description-zone.component.html
@@ -14,11 +14,11 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-<div class="row">
-  <div class="font-weight-bold col-3">
-    <ng-content select="[label]"></ng-content>
-  </div>
-  <div class="col-9">
-    <ng-content select="[content]"></ng-content>
-  </div>
-</div>
+<dl class="metadata">
+  <dt>
+    <ng-content select="[label]" />
+  </dt>
+  <dd>
+    <ng-content select="[content]" />
+  </dd>
+</dl>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/description-zone/description-zone.component.ts b/projects/shared/src/lib/component/documents/document-description/description-zone/description-zone.component.ts
similarity index 95%
rename from projects/admin/src/app/record/detail-view/document-detail-view/document-description/description-zone/description-zone.component.ts
rename to projects/shared/src/lib/component/documents/document-description/description-zone/description-zone.component.ts
index 47317b667..76c96f992 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/description-zone/description-zone.component.ts
+++ b/projects/shared/src/lib/component/documents/document-description/description-zone/description-zone.component.ts
@@ -17,7 +17,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'admin-description-zone',
+  selector: 'shared-description-zone',
   templateUrl: './description-zone.component.html'
 })
 export class DescriptionZoneComponent { }
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.html b/projects/shared/src/lib/component/documents/document-description/document-description.component.html
similarity index 73%
rename from projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.html
rename to projects/shared/src/lib/component/documents/document-description/document-description.component.html
index c7712c569..b63ce4396 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.html
+++ b/projects/shared/src/lib/component/documents/document-description/document-description.component.html
@@ -14,71 +14,58 @@
   You 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="container div-striped p-0">
   <!-- FICTION STATEMENT -->
   @if (record.metadata.fiction_statement) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Fiction statement' | translate }}</ng-container>
         <ng-container content>
           {{ record.metadata.fiction_statement | translate }}
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- -------------- WORK / EXPRESSION -------------- -->
   <!-- SUPPLEMENT, RELATED TO -->
   @if (record.metadata.supplement) {
-    <div class="striped">
-      <admin-other-edition fieldLabel="{{ 'Supplement' | translate }}" [field]="record.metadata.supplement"></admin-other-edition>
-    </div>
+      <shared-other-edition fieldLabel="{{ 'Supplement' | translate }}" [field]="record.metadata.supplement"></shared-other-edition>
   }
   @if (record.metadata.relatedTo) {
-    <div class="striped">
-      <admin-other-edition fieldLabel="{{ 'Related to' | translate }}" [field]="record.metadata.relatedTo"></admin-other-edition>
-    </div>
+      <shared-other-edition fieldLabel="{{ 'Related to' | translate }}" [field]="record.metadata.relatedTo"></shared-other-edition>
   }
 
   <!-- NOTE (TYPE GENERAL) -->
   @if (notesGeneral) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'General note' | translate }}</ng-container>
         <ng-container content>
           @for (noteType of notesGeneral | keyvalue; track noteType) {
-            <ul class="list-unstyled mb-0">
+            <ul class="list-none m-0 p-0">
               @for (note of noteType.value; track note) {
                 <li>{{ note }}</li>
               }
             </ul>
           }
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!--CREDITS -->
   @if (record.metadata.credits) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Other responsibilities' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (credit of record.metadata.credits; track credit) {
               <li>{{ credit }}</li>
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- LANGUAGE -->
   @if (record.metadata.language && record.metadata.language.length > 0) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Language' | translate }}</ng-container>
         <ng-container content>
           @for (lang of record.metadata.language; track lang; let isLast = $last) {
@@ -86,14 +73,12 @@
             @if (!isLast) {, }
           }
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- ORIGINAL LANGUAGE -->
   @if (record.metadata.originalLanguage) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Original language' | translate }}</ng-container>
         <ng-container content>
           @for (lang of record.metadata.originalLanguage; track lang; let isLast = $last) {
@@ -101,67 +86,59 @@
               @if (!isLast) {, }
           }
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- ORIGINAL TITLE -->
   @if (record.metadata.originalTitle) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Original title' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (title of record.metadata.originalTitle; track title) {
               <li>{{ title }}</li>
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- WORK ACCESS POINT -->
   @if (workAccessPoint; as works) {
     @if (works.length > 0) {
-      <div class="striped">
-        <admin-description-zone>
+        <shared-description-zone>
           <ng-container label>{{ 'Work' | translate }}</ng-container>
           <ng-container content>
-            <ul class="list-unstyled mb-0">
+            <ul class="list-none m-0 p-0">
               @for (work of works; track work) {
                 <li>{{ work }}</li>
               }
             </ul>
           </ng-container>
-        </admin-description-zone>
-      </div>
+        </shared-description-zone>
     }
   }
 
   <!-- TABLE OF CONTENTS -->
   @if (record.metadata.tableOfContents) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Contents' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (table of record.metadata.tableOfContents; track table) {
               <li>{{ table }}</li>
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- DISSERTATION -->
   @if (record.metadata.dissertation) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Thesis' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (dissertation of record.metadata.dissertation; track dissertation) {
               @for (label of dissertation.label; track label) {
                 <li>{{ label.value }}</li>
@@ -169,14 +146,12 @@
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- INTENDED AUDIENCE -->
   @if (record.metadata.intendedAudience) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Intended audience' | translate }}</ng-container>
         <ng-container content>
           @for (audience of record.metadata.intendedAudience; track audience; let isLast = $last) {
@@ -184,26 +159,22 @@
             @if (!isLast) {, }
           }
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- ILLUSTRATIVE CONTENT -->
   @if (record.metadata.illustrativeContent) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Illustrations' | translate }}</ng-container>
         <ng-container content>
           {{ record.metadata.illustrativeContent.join(', ') }}
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- COLOR CONTENT -->
   @if (record.metadata.colorContent) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Colors' | translate }}</ng-container>
         <ng-container content>
           @for (color of record.metadata.colorContent; track color; let isLast = $last) {
@@ -211,33 +182,29 @@
             @if (!isLast) {, }
           }
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- SCALE -->
   @if (record.metadata.scale) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Scale' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (scale of record.metadata.scale; track scale) {
               <li>{{ scale.label }}</li>
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- CARTOGRAPHIC ATTRIBUTES -->
   @if (cartographicAttributes.length > 0) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Cartographic data' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (cartographic of cartographicAttributes; track cartographic) {
               <li>
                 @if (cartographic.projection) {
@@ -253,17 +220,15 @@
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- CLASSIFICATION -->
   @if (record.metadata.classification) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Classification' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (classification of record.metadata.classification; track classification) {
               <li>
                 {{ classification.classificationPortion }}
@@ -275,246 +240,210 @@
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- -------------- MANIFESTATION -------------- -->
 
   <!-- USAGE AND ACCESS POLICY -->
   @if (record.metadata.usageAndAccessPolicy) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Use and access condition' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (usage of record.metadata.usageAndAccessPolicy; track usage) {
               <li>{{ usage.label }}</li>
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- OTHER EDITION, OTHER PHYSICAL FORMAT, HAS REPRODUCTION -->
   @if (record.metadata.otherEdition) {
-    <div class="striped">
-      <admin-other-edition fieldLabel="{{ 'Other edition' | translate }}" [field]="record.metadata.otherEdition"></admin-other-edition>
-    </div>
+      <shared-other-edition fieldLabel="{{ 'Other edition' | translate }}" [field]="record.metadata.otherEdition"></shared-other-edition>
   }
   @if (record.metadata.otherPhysicalFormat) {
-    <div class="striped">
-      <admin-other-edition fieldLabel="{{ 'Also issued as' | translate }}" [field]="record.metadata.otherPhysicalFormat"></admin-other-edition>
-    </div>
+      <shared-other-edition fieldLabel="{{ 'Also issued as' | translate }}" [field]="record.metadata.otherPhysicalFormat"></shared-other-edition>
   }
   @if (record.metadata.hasReproduction) {
-    <div class="striped">
-      <admin-other-edition fieldLabel="{{ 'Reproduced as' | translate }}" [field]="record.metadata.hasReproduction"></admin-other-edition>
-    </div>
+      <shared-other-edition fieldLabel="{{ 'Reproduced as' | translate }}" [field]="record.metadata.hasReproduction"></shared-other-edition>
   }
 
   <!-- TITLE (KEY TITLE, ABBREVIATED TITLE, VARIANT TITLE)-->
   @if (titleVariants !== {}) {
     @for (title of titleVariants | keyvalue; track title) {
-      <div class="striped">
-        <admin-description-zone>
+        <shared-description-zone>
           <ng-container label>{{ $any(title).key | translate | ucfirst }}</ng-container>
           <ng-container content>
-            <ul class="list-unstyled mb-0">
+            <ul class="list-none m-0 p-0">
               @for (value of $any(title).value; track value) {
                 <li>{{ value }}</li>
               }
             </ul>
           </ng-container>
-        </admin-description-zone>
-      </div>
+        </shared-description-zone>
     }
   }
 
   <!-- RESPONSIBILITY STATEMENT -->
   @if (record.metadata.ui_responsibilities) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Statement of responsibility' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (responsibility of record.metadata.ui_responsibilities; track responsibility) {
               <li>{{ responsibility }}</li>
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- SERIES STATEMENT -->
   @if (record.metadata.seriesStatement) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Series statement' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (serie of editionStatement; track serie) {
               <li>{{ serie.value }}</li>
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- PROVISION ACTIVITY STATEMENT (TYPES PRODUCTION, DIFFUSION/DISTRIBUTION, FABRICATION) -->
   @if (record.metadata.provisionActivity | documentProvisionActivity | keyvalue | callbackArrayFilter: filterNotPublicationProvisionActivity;as provisionActivity) {
     @for (provision of provisionActivity; track provision) {
-      <div class="striped">
-        <admin-description-zone>
+        <shared-description-zone>
           <ng-container label>{{ provision.key | translate }}</ng-container>
           <ng-container content>
-            <ul class="list-unstyled mb-0">
+            <ul class="list-none m-0 p-0">
               @for (value of provision.value; track value; let isLast = $last) {
                 <li>{{ value }}@if (!isLast) {, }</li>
               }
             </ul>
           </ng-container>
-        </admin-description-zone>
-      </div>
+        </shared-description-zone>
     }
   }
 
   <!-- PROVISION ACTIVITY ORIGINAL DATE (TYPES PRODUCTION, DIFFUSION/DISTRIBUTION, FABRICATION) -->
   @if (provisionActivityOriginalDate.length > 0) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Date of the original' | translate }}</ng-container>
         <ng-container content>
           @for (provision of provisionActivityOriginalDate; track provision; let isLast = $last) {
             {{ provision.original_date }}@if (!isLast) {, }
           }
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- COPYRIGHT DATE -->
   @if (record.metadata.copyrightDate) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Copyright date' | translate }}</ng-container>
         <ng-container content>
           {{ record.metadata.copyrightDate.join(", ") }}
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- SEQUENCE NUMBERING -->
   @if (record.metadata.sequence_numbering) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Numbering' | translate }}</ng-container>
         <ng-container content>
           {{ record.metadata.sequence_numbering }}
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- DIMENSIONS -->
   @if (record.metadata.dimensions) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Dimensions' | translate }}</ng-container>
         <ng-container content>
           {{ record.metadata.dimensions.join(", ") }}
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- BOOK FORMAT -->
   @if (record.metadata.bookFormat) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Format' | translate }}</ng-container>
         <ng-container content>
           {{ record.metadata.bookFormat.join(", ") }}
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- PRODUCTION METHOD -->
   @if (record.metadata.productionMethod) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Production method' | translate }}</ng-container>
         <ng-container content>
           @for (method of record.metadata.productionMethod; track method; let isLast = $last) {
             {{ method | translate }}@if (!isLast) {, }
           }
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- NOTE (TYPE: CITED BY, OTHER PHYSICAL DETAILS, ACCOMPANYING MATERIAL) -->
   @if (notesExceptGeneral) {
     @for (noteType of notesExceptGeneral | keyvalue; track noteType) {
-      <div class="striped">
-        <admin-description-zone>
+        <shared-description-zone>
           <ng-container label>{{ noteType.key | translate | ucfirst }}</ng-container>
           <ng-container content>
-            <ul class="list-unstyled mb-0">
+            <ul class="list-none m-0 p-0">
               @for (note of noteType.value; track note) {
                 <li>{{ note }}</li>
               }
             </ul>
           </ng-container>
-        </admin-description-zone>
-      </div>
+        </shared-description-zone>
     }
   }
 
   <!-- SUPPLEMENTARY CONTENT -->
   @if (record.metadata.supplementaryContent) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Supplementary content' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (sup of record.metadata.supplementaryContent; track sup) {
               <li>{{ sup }}</li>
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- ACQUISITION TERMS -->
   @if (record.metadata.acquisitionTerms) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Terms of availability' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (term of record.metadata.acquisitionTerms; track term) {
               <li>{{ term }}</li>
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- IDENTIFIED BY -->
   @if (identifiedBy && identifiedBy.length > 0) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Identifier' | translate }}</ng-container>
         <ng-container content>
-          <ul class="list-unstyled mb-0">
+          <ul class="list-none m-0 p-0">
             @for (identifier of identifiedBy; track identifier; let i = $index) {
               <li [attr.id]="i | idAttribute:{prefix: 'doc-identifier'}">
                 @if (identifier.type === 'uri') {
@@ -525,23 +454,19 @@
                 @if (identifier.details) {
                    - {{ identifier.details }}
                 }
-                <small class="badge badge-secondary text-uppercase ml-1" translate>
-                  {{ identifier.type }}
-                </small>
+                <p-tag class="ml-1 uppercase text-sm" [value]="identifier.type | translate" severity="secondary"/>
               </li>
             }
           </ul>
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- -------------- TYPOLOGY -------------- -->
 
   <!-- CONTENT MEDIA CARRIER -->
   @if (record.metadata.contentMediaCarrier) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Carrier and content type' | translate }}</ng-container>
         <ng-container content>
           @for (content of record.metadata.contentMediaCarrier; track content; let isLastL1 = $last) {
@@ -554,19 +479,15 @@
               @if (!isLastL1) {, }
           }
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
 
   <!-- ISSUANCE -->
   @if (record.metadata.issuance) {
-    <div class="striped">
-      <admin-description-zone>
+      <shared-description-zone>
         <ng-container label>{{ 'Mode of issuance' | translate }}</ng-container>
         <ng-container content>
           {{ record.metadata.issuance.main_type | translate }} / {{ record.metadata.issuance.subtype | translate }}
         </ng-container>
-      </admin-description-zone>
-    </div>
+      </shared-description-zone>
   }
-</div>
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.ts b/projects/shared/src/lib/component/documents/document-description/document-description.component.ts
similarity index 99%
rename from projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.ts
rename to projects/shared/src/lib/component/documents/document-description/document-description.component.ts
index 4094723bf..060d2a7b3 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/document-description.component.ts
+++ b/projects/shared/src/lib/component/documents/document-description/document-description.component.ts
@@ -19,7 +19,7 @@ import { Component, inject, Input, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 
 @Component({
-  selector: 'admin-document-description',
+  selector: 'shared-document-description',
   templateUrl: './document-description.component.html'
 })
 export class DocumentDescriptionComponent implements OnInit {
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/other-edition/other-edition.component.html b/projects/shared/src/lib/component/documents/document-description/other-edition/other-edition.component.html
similarity index 94%
rename from projects/admin/src/app/record/detail-view/document-detail-view/document-description/other-edition/other-edition.component.html
rename to projects/shared/src/lib/component/documents/document-description/other-edition/other-edition.component.html
index 5b39a5a25..4d02771a4 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/other-edition/other-edition.component.html
+++ b/projects/shared/src/lib/component/documents/document-description/other-edition/other-edition.component.html
@@ -15,10 +15,10 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (!header) {
-  <admin-description-zone>
+  <shared-description-zone>
     <ng-container label>{{ fieldLabel }}</ng-container>
     <ng-container content>
-      <ul class="list-unstyled mb-0">
+      <ul class="list-none m-0 p-0">
         @for (edition of field; track edition) {
           <li>
             @if (edition.label) {
@@ -32,7 +32,7 @@
         }
       </ul>
     </ng-container>
-  </admin-description-zone>
+  </shared-description-zone>
 } @else {
   <div class="mb-0">
     <b>{{ fieldLabel }}</b>:
diff --git a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/other-edition/other-edition.component.ts b/projects/shared/src/lib/component/documents/document-description/other-edition/other-edition.component.ts
similarity index 96%
rename from projects/admin/src/app/record/detail-view/document-detail-view/document-description/other-edition/other-edition.component.ts
rename to projects/shared/src/lib/component/documents/document-description/other-edition/other-edition.component.ts
index 7d3a8ab43..e37c8bd0d 100644
--- a/projects/admin/src/app/record/detail-view/document-detail-view/document-description/other-edition/other-edition.component.ts
+++ b/projects/shared/src/lib/component/documents/document-description/other-edition/other-edition.component.ts
@@ -17,7 +17,7 @@
 import { Component, Input } from '@angular/core';
 
 @Component({
-  selector: 'admin-other-edition',
+  selector: 'shared-other-edition',
   templateUrl: './other-edition.component.html'
 })
 export class OtherEditionComponent {
diff --git a/projects/shared/src/lib/component/documents/files/files.component.html b/projects/shared/src/lib/component/documents/files/files.component.html
index 4b8af8533..b4446383d 100644
--- a/projects/shared/src/lib/component/documents/files/files.component.html
+++ b/projects/shared/src/lib/component/documents/files/files.component.html
@@ -17,109 +17,101 @@
 @if (loading) {
   <i class="fa fa-spinner fa-spin"></i>
 } @else {
-@if (files?.length > 0) {
-  @if(files.length > numVisible) {
-    <div class="flex flex-column gap-2">
-      <div>
-        <span class="p-input-icon-right">
-          <i class="fa fa-filter"></i>
-          <input
-            class="p-inputtext"
-            id="filter"
-            type="text"
-            pInputText
-            [placeholder]="'filter' | translate"
-            [(ngModel)]="filterText"
-            (keyup)="onTextChange($event)"
-          />
-        </span>
+  @if (files?.length > 0) {
+    @if(files.length > numVisible) {
+      <div class="flex flex-column gap-2">
+        <div>
+          <span class="p-input-icon-right">
+            <i class="fa fa-filter"></i>
+            <input
+              class="p-inputtext"
+              id="filter"
+              type="text"
+              pInputText
+              [placeholder]="'filter' | translate"
+              [(ngModel)]="filterText"
+              (keyup)="onTextChange($event)"
+            />
+          </span>
+        </div>
+        <small *ngVar="filteredFiles.length as total" id="username-help">
+          {{ getResultsText() | async }}
+        </small>
       </div>
-      <small *ngVar="filteredFiles.length as total" id="username-help">
-        {{ getResultsText() | async }}
-      </small>
-    </div>
-  }
+    }
 
-  @if (filteredFiles.length > 0) {
-    <div class="border-1 surface-border border-round text-center py-3 px-1 mt-2">
-      <p-carousel
-        [showIndicators]="false"
-        [showNavigators]="false"
-        [value]="filteredFiles"
-        [numVisible]="numVisible"
-        [page]="page"
-        [numScroll]="numVisible"
-        [circular]="false"
-      >
-        <ng-template let-file pTemplate="item">
-          <div class="px-1">
-            @if (file.thumbnail){
-            <img
-              (click)="preview(file); $event.preventDefault()"
-              src="{{ file.thumbnail }}"
-              [alt]="file.label"
-              class="file-preview w-6 shadow-1 border-300 border-1 mb-1"
-              loading="lazy"
-            />
-          } @else {
-            <div
-            class="item-icon"
-          > <i class="text-muted fa fa-5x pb-1" [ngClass]="file.mimetype | faIconClass: 'file'"></i></div>
-          }
-            <div
-              class="action flex align-items-center justify-content-center gap-2"
-            >
-              @if (file.preview) {
-              <a
-                class="file-preview"
-                href="{{ file.label }}"
+    @if (filteredFiles.length > 0) {
+      <div class="border-1 surface-border border-round text-center py-3 px-1 mt-2">
+        <p-carousel
+          [showIndicators]="false"
+          [showNavigators]="false"
+          [value]="filteredFiles"
+          [numVisible]="numVisible"
+          [page]="page"
+          [numScroll]="numVisible"
+          [circular]="false"
+        >
+          <ng-template let-file pTemplate="item">
+            <div class="px-1">
+              @if (file.thumbnail){
+              <img
                 (click)="preview(file); $event.preventDefault()"
+                src="{{ file.thumbnail }}"
+                [alt]="file.label"
+                class="w-6 shadow-1 border-300 border-1 mb-1 max-w-5rem"
+                style="cursor: zoom-in"
+                loading="lazy"
+              />
+            } @else {
+              <div
+            > <i class="text-color-secondary fa fa-5x pb-1" [ngClass]="file.mimetype | faIconClass: 'file'"></i></div>
+            }
+              <div
+                class="action flex align-items-center justify-content-center gap-2"
               >
-                <i class="fa fa-eye mx-1"></i>
-              </a>
-              } @if (file.download) {
-              <a [href]="file.download" download>
-                <i class="fa fa-download mx-1"></i>
-              </a>
-              }
+                @if (file.preview) {
+                <a
+                  style="cursor: zoom-in"
+                  href="{{ file.label }}"
+                  (click)="preview(file); $event.preventDefault()"
+                >
+                  <i class="fa text-color-secondary fa-eye mx-1"></i>
+                </a>
+                } @if (file.download) {
+                <a [href]="file.download" download>
+                  <i class="fa text-color-secondary fa-download mx-1"></i>
+                </a>
+                }
+              </div>
+              <small>{{ file.label }}</small>
             </div>
-            <small>{{ file.label }}</small>
-          </div>
-        </ng-template>
-      </p-carousel>
-    </div>
-    @if(files.length > numVisible) {
-      <p-paginator
-        (onPageChange)="onPageChange($event)"
-        [first]="1"
-        [rows]="numVisible"
-        [totalRecords]="filteredFiles.length"
-        [showJumpToPageInput]="false"
-        [pageLinkSize]="3"
-      ></p-paginator>
+          </ng-template>
+        </p-carousel>
+      </div>
+      @if(files.length > numVisible) {
+        <p-paginator
+          (onPageChange)="onPageChange($event)"
+          [first]="1"
+          [rows]="numVisible"
+          [totalRecords]="filteredFiles.length"
+          [showJumpToPageInput]="false"
+          [pageLinkSize]="3"
+        />
+      }
     }
   }
 }
-}
 
-<ng-template #previewModal>
-    @if (previewFile) {
-    <div class="modal-header">
-      <h4 id="dialog-sizes-name1" class="modal-title pull-left">
-        {{ previewFile.label }}
-      </h4>
-      <button
-        type="button"
-        class="close pull-right"
-        aria-label="Close"
-        (click)="previewModalRef.close()"
-      >
-        <span aria-hidden="true">&times;</span>
-      </button>
-    </div>
-    <div class="modal-body">
-      <iframe id="preview-iframe" width="100%" height="800px" [src]="previewFile.url"
-        style="border: none;"></iframe>
-    </div>
+<p-dialog [modal]="true" [(visible)]="previewVisible" [breakpoints]="{ '1199px': '75vw', '575px': '90vw' }"
+[style]="{ width: '50vw' }" [maximizable]="true">
+  <ng-template pTemplate="header">
+    <h4>
+      {{ previewFile?.label }}
+    </h4>
+  </ng-template>
+  @if (previewFile) {
+    <iframe id="preview-iframe" width="100%" height="800px" [src]="previewFile?.url"
+          style="border: none;">
+    </iframe>
   }
-</ng-template>
+</p-dialog>
diff --git a/projects/shared/src/lib/component/documents/files/files.component.scss b/projects/shared/src/lib/component/documents/files/files.component.scss
index 7badb7e61..96e499068 100644
--- a/projects/shared/src/lib/component/documents/files/files.component.scss
+++ b/projects/shared/src/lib/component/documents/files/files.component.scss
@@ -1,44 +1,22 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2021-2024 RERO
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * 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/>.
- */
+// /*
+//  * RERO ILS UI
+//  * Copyright (C) 2021-2024 RERO
+//  *
+//  * This program is free software: you can redistribute it and/or modify
+//  * it under the terms of the GNU Affero General Public License as published by
+//  * 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/>.
+//  */
 
- .file-preview {
-  cursor: zoom-in;
- }
-.item-icon {
-  width: 80px;
-  height: 100px;
-  display: inline-flex;
-  align-items: self-end;
-}
 :host ::ng-deep {
-  img {
-    max-width: 80px;
-  }
-  a {
-    color: #495057;
-  }
   .p-carousel-item {
-    align-self: flex-end;
+    @extend .align-self-end;
   }
 }
-
-.files-icon {
-  width: 80px;
-  height: 100px;
-  display: inline-flex;
-  align-items: self-end;
-}
diff --git a/projects/shared/src/lib/component/documents/files/files.component.ts b/projects/shared/src/lib/component/documents/files/files.component.ts
index 6e0451c6b..77cebd4de 100644
--- a/projects/shared/src/lib/component/documents/files/files.component.ts
+++ b/projects/shared/src/lib/component/documents/files/files.component.ts
@@ -17,12 +17,12 @@
 
 import { BreakpointObserver, BreakpointState, Breakpoints } from '@angular/cdk/layout';
 import { HttpClient } from '@angular/common/http';
-import { Component, Input, OnDestroy, OnInit, Type, ViewChild, inject } from '@angular/core';
+import { Component, Input, OnDestroy, OnInit, inject } from '@angular/core';
 import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
 import { TranslateService } from '@ngx-translate/core';
 import { ApiService, Record, RecordService } from '@rero/ng-core';
 import { PrimeNGConfig } from 'primeng/api';
-import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DialogService } from 'primeng/dynamicdialog';
 import { Observable, Subscription, forkJoin, map, of, switchMap, tap } from 'rxjs';
 
 // file interface
@@ -40,8 +40,7 @@ export interface File {
 // Component itself
 @Component({
   selector: 'shared-doc-files',
-  templateUrl: './files.component.html',
-  styleUrl: './files.component.scss',
+  templateUrl: './files.component.html'
 })
 export class FilesComponent implements OnInit, OnDestroy {
 
@@ -74,11 +73,7 @@ export class FilesComponent implements OnInit, OnDestroy {
     label: string;
     url: SafeUrl;
   };
-  // modal for the invenio previewer
-  previewModalRef: DynamicDialogRef;
-
-  // for modal
-  @ViewChild('previewModal') previewModalTemplate: Type<any>;
+  previewVisible = false;
 
   /** all component subscription */
   private subscriptions = new Subscription();
@@ -268,12 +263,10 @@ export class FilesComponent implements OnInit, OnDestroy {
    */
 
   preview(file: File): void {
-    this.previewModalRef = this.dialogService.open(this.previewModalTemplate, {
-      dismissableMask: true
-    });
     this.previewFile = {
       label: file.label,
       url: this.sanitizer.bypassSecurityTrustResourceUrl(file.preview),
     };
+    this.previewVisible = true;
   }
 }
diff --git a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.scss b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.scss
deleted file mode 100644
index 7f55d090a..000000000
--- a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-/*
- * RERO ILS UI
- * Copyright (C) 2019-2023 RERO
- * Copyright (C) 2019-2023 UCLouvain
- *
- * This program is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as published by
- * the Free Software Foundation, version 3 of the License.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <http://www.gnu.org/licenses/>.
- */
-
-@import 'bootstrap/scss/bootstrap';
-
-::ng-deep .brief-view-tags {
-  ul {
-    display: inline;
-    padding: 0;
-
-    li {
-      @extend .badge;
-      @extend .badge-secondary;
-    }
-    li + li {
-      @extend .ml-1;
-    }
-    li.tag-remote {
-      @extend .badge-warning;
-      @extend .mr-1;
-    }
-    li.tag-local {
-      @extend .badge-info;
-      @extend .mr-1;
-    }
-  }
-}
-
-::ng-deep .brief-view-content {
-  font-style: italic;
-
-  p {
-    @extend .mb-2;
-  }
-}
diff --git a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts
index c48baad20..87c9fb002 100644
--- a/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts
+++ b/projects/shared/src/lib/component/entities/entity-brief-view/entity-brief-view.component.ts
@@ -27,7 +27,6 @@ import { EntityBriefViewRemotePersonComponent } from './entity-brief-view.person
 @Component({
   selector: 'shared-entity-brief-view',
   providers: [ExtractSourceFieldPipe],
-  styleUrls: ['./entity-brief-view.component.scss'],
   template: `
     <shared-brief-view [title]="entityTitle" [link]="routerLink" [tags]="tags">
       <ng-template rTemplate="icon">
@@ -37,11 +36,11 @@ import { EntityBriefViewRemotePersonComponent } from './entity-brief-view.person
         <ng-container #contentTemplate></ng-container>
       </ng-template>
       <ng-template rTemplate="tags" let-tags>
-        <ul>
+        <div class="flex gap-1">
           @for (tag of tags; track tag) {
-            <li class="tag-{{ tag?.type }}">{{ tag.label }}</li>
+            <p-tag [severity]="tag.label === 'remote'? 'warning':'secondary'" [value]="tag.label"/>
           }
-        </ul>
+        </div>
       </ng-template>
     </shared-brief-view>
   `
diff --git a/projects/shared/src/lib/component/open-close-button.component.ts b/projects/shared/src/lib/component/open-close-button.component.ts
index 621a5ea26..679650ffe 100644
--- a/projects/shared/src/lib/component/open-close-button.component.ts
+++ b/projects/shared/src/lib/component/open-close-button.component.ts
@@ -20,6 +20,7 @@ import { Component, input, OnChanges, output, SimpleChanges } from '@angular/cor
   selector: 'shared-open-close-button',
   template: `
   <p-button
+    styleClass="bg-white"
     [icon]="internalStatus ? 'fa fa-caret-right' : 'fa fa-caret-down'"
     [outlined]="true"
     [rounded]="true"
diff --git a/projects/shared/src/lib/component/remote-search/remote-search-config.service.ts b/projects/shared/src/lib/component/remote-search/remote-search-config.service.ts
index 3aa723bf7..93362c5f0 100644
--- a/projects/shared/src/lib/component/remote-search/remote-search-config.service.ts
+++ b/projects/shared/src/lib/component/remote-search/remote-search-config.service.ts
@@ -45,7 +45,7 @@ export class RemoteSearchConfig {
       {
         field: 'autocomplete_title',
         index: 'documents',
-        maxSuggestions: 10,
+        maxSuggestions: 5,
         groupLabel: this.translateService.instant('documents'),
         preFilters: viewCode !== undefined ? { view: viewCode } : {},
         processSuggestions: (documents: any, query: any) => this.processDocuments(documents, query)
@@ -53,7 +53,7 @@ export class RemoteSearchConfig {
       {
         field: 'autocomplete_name',
         index: 'entities',
-        maxSuggestions: 10,
+        maxSuggestions: 5,
         groupLabel: this.translateService.instant('authors/subjects'),
         preFilters: viewCode !== undefined ? { view: viewCode } : {},
         processSuggestions: (entities: any, query: any) => this.processEntities(entities, query)
diff --git a/projects/shared/src/lib/component/remote-search/remote-search.component.html b/projects/shared/src/lib/component/remote-search/remote-search.component.html
index cd67bc511..acbf211df 100644
--- a/projects/shared/src/lib/component/remote-search/remote-search.component.html
+++ b/projects/shared/src/lib/component/remote-search/remote-search.component.html
@@ -16,9 +16,11 @@
 -->
 <ng-core-search-autocomplete
   class="w-full"
-  scrollHeight="null"
   [placeholder]="placeholder | translate | ucfirst"
   [value]="value"
   [recordTypes]="recordTypes"
+  [inputStyleClass]="inputstyleclass"
+  scrollHeight="400px"
   [hidden]="hideSearchElement"
-  (onSelect)="onSelect($event)" />
+  (onSelect)="onSelect($event)"
+  (onSearch)="onSearch($event)" />
diff --git a/projects/shared/src/lib/component/remote-search/remote-search.component.ts b/projects/shared/src/lib/component/remote-search/remote-search.component.ts
index c0bcbf72a..03a60099a 100644
--- a/projects/shared/src/lib/component/remote-search/remote-search.component.ts
+++ b/projects/shared/src/lib/component/remote-search/remote-search.component.ts
@@ -14,8 +14,9 @@
  * You should have received a copy of the GNU Affero General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import { Component, inject, Input, OnDestroy, OnInit } from '@angular/core';
-import { NavigationEnd, Router, UrlSegment } from '@angular/router';
+import { DOCUMENT } from '@angular/common';
+import { Component, Inject, inject, Input, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Router, UrlSegment } from '@angular/router';
 import { IRecordType } from '@rero/ng-core';
 import { filter, Subscription } from 'rxjs';
 import { RemoteSearchConfig } from './remote-search-config.service';
@@ -28,6 +29,7 @@ import { RemoteSearchConfig } from './remote-search-config.service';
 export class RemoteSearchComponent implements OnInit, OnDestroy {
 
   private router: Router = inject(Router);
+  private route: ActivatedRoute = inject(ActivatedRoute);
   private remoteSearchBarConfig: RemoteSearchConfig = inject(RemoteSearchConfig);
 
   // You must use lowercase variable names for this to work in a web component.
@@ -36,6 +38,9 @@ export class RemoteSearchComponent implements OnInit, OnDestroy {
   @Input() maxlengthsuggestion: number | string = 100;
   @Input() placeholder: string = 'search';
   @Input() viewcode: string | undefined;
+  @Input() inputstyleclass: string;
+  @Input() internalRouting = false;
+
 
   hideSearchElement: boolean = false;
   recordTypes: IRecordType[] = [];
@@ -46,8 +51,11 @@ export class RemoteSearchComponent implements OnInit, OnDestroy {
 
   private subscription: Subscription = new Subscription();
 
+  constructor(@Inject(DOCUMENT) private document: Document) {}
+
   ngOnInit(): void {
     this.admin = this.boolean(this.admin);
+    this.subscription.add(this.route.queryParamMap.subscribe((params: any) => {this.value = params.get('q')}));
     this.recordTypes = this.remoteSearchBarConfig.getConfig(
       this.admin,
       this.viewcode,
@@ -64,12 +72,24 @@ export class RemoteSearchComponent implements OnInit, OnDestroy {
       this.subscription.unsubscribe();
   }
 
+  onSearch(query) {
+    if (this.internalRouting) {
+      // TODO: internal navigation for the professional interface
+    } else {
+      this.document.location.href = `/${this.viewcode}/search/documents?q=${query}&page=1&size=10&sort=bestmatch`;
+    }
+  }
+
   onSelect(element: any) {
     if (!('link' in element)) {
       throw new Error('Missing parameter link');
     }
     this.value = '';
-    this.router.navigateByUrl(element.link);
+    if(this.internalRouting === true) {
+      this.router.navigateByUrl(element.link);
+    } else {
+      this.document.location.href = element.link;
+    }
   }
 
   private hideSearchInput(): boolean {
diff --git a/projects/shared/src/lib/modules/prime-ng-import/prime-ng-import.module.ts b/projects/shared/src/lib/modules/prime-ng-import/prime-ng-import.module.ts
index 29047d0be..c1f550cc3 100644
--- a/projects/shared/src/lib/modules/prime-ng-import/prime-ng-import.module.ts
+++ b/projects/shared/src/lib/modules/prime-ng-import/prime-ng-import.module.ts
@@ -24,6 +24,8 @@ import { SkeletonModule } from 'primeng/skeleton';
 import { TabViewModule } from 'primeng/tabview';
 import { TagModule } from 'primeng/tag';
 import { TimelineModule } from 'primeng/timeline';
+import { DialogModule } from 'primeng/dialog';
+
 
 @NgModule({
   exports: [
@@ -33,7 +35,8 @@ import { TimelineModule } from 'primeng/timeline';
     CarouselModule,
     TagModule,
     ButtonModule,
-    PaginatorModule
+    PaginatorModule,
+    DialogModule
   ]
 })
 export class PrimeNgImportModule { }
diff --git a/projects/shared/src/lib/paginator/show-more-pager/show-more-pager.component.html b/projects/shared/src/lib/paginator/show-more-pager/show-more-pager.component.html
index f6ceae92b..3623eb37a 100644
--- a/projects/shared/src/lib/paginator/show-more-pager/show-more-pager.component.html
+++ b/projects/shared/src/lib/paginator/show-more-pager/show-more-pager.component.html
@@ -14,16 +14,17 @@
   You should have received a copy of the GNU Affero General Public License
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
-@if (paginator && paginator.getRecordsCount() > 0) {
-    @if (paginator.isShowMore()) {
-      <button type="button" [id]="id" class="btn btn-link pr-1 py-0" (click)="paginator.next()">
-        <i class="fa fa-plus-square-o"></i> {{ 'Show more' | translate }}
-      </button>
-      @if(paginator.getHiddenInfo()) {
-        <small
-          [translate]="paginator.getHiddenInfo()"
-          [translateParams]="{ count: paginator.getHiddenCount() }"
-        ></small>
-      }
-    }
+@if (paginator && paginator?.getRecordsCount() > 0 && paginator?.isShowMore()) {
+<div class="flex align-items-center">
+  <p-button
+    severity="secondary"
+    [text]="true"
+    (onClick)="paginator.next()"
+  >
+  <i class="fa fa-plus-square-o"></i>&nbsp;{{'Show more' | translate}}
+  @if(paginator.getHiddenInfo()) {
+    &nbsp;<small [translate]="paginator.getHiddenInfo()" [translateParams]="{ count: paginator.getHiddenCount() }"></small>
+  }
+  </p-button>
+</div>
 }
diff --git a/projects/admin/src/app/pipe/document-provision-activity.pipe.spec.ts b/projects/shared/src/lib/pipe/document-provision-activity.pipe.spec.ts
similarity index 100%
rename from projects/admin/src/app/pipe/document-provision-activity.pipe.spec.ts
rename to projects/shared/src/lib/pipe/document-provision-activity.pipe.spec.ts
diff --git a/projects/admin/src/app/pipe/document-provision-activity.pipe.ts b/projects/shared/src/lib/pipe/document-provision-activity.pipe.ts
similarity index 100%
rename from projects/admin/src/app/pipe/document-provision-activity.pipe.ts
rename to projects/shared/src/lib/pipe/document-provision-activity.pipe.ts
diff --git a/projects/admin/src/app/pipe/main-title-relation.pipe.spec.ts b/projects/shared/src/lib/pipe/main-title-relation.pipe.spec.ts
similarity index 100%
rename from projects/admin/src/app/pipe/main-title-relation.pipe.spec.ts
rename to projects/shared/src/lib/pipe/main-title-relation.pipe.spec.ts
diff --git a/projects/admin/src/app/pipe/main-title-relation.pipe.ts b/projects/shared/src/lib/pipe/main-title-relation.pipe.ts
similarity index 100%
rename from projects/admin/src/app/pipe/main-title-relation.pipe.ts
rename to projects/shared/src/lib/pipe/main-title-relation.pipe.ts
diff --git a/projects/shared/src/lib/shared.module.ts b/projects/shared/src/lib/shared.module.ts
index 934da6607..c5d139004 100644
--- a/projects/shared/src/lib/shared.module.ts
+++ b/projects/shared/src/lib/shared.module.ts
@@ -23,10 +23,14 @@ import { ContributionComponent } from '../public-api';
 import { ActionButtonComponent } from './component/action-button/action-button.component';
 import { BriefViewComponent } from './component/core/brief-view/brief-view.component';
 import { DocumentBriefViewComponent } from './component/documents/document-brief-view/document-brief-view.component';
+import { DescriptionZoneComponent } from './component/documents/document-description/description-zone/description-zone.component';
+import { DocumentDescriptionComponent } from './component/documents/document-description/document-description.component';
+import { OtherEditionComponent } from './component/documents/document-description/other-edition/other-edition.component';
 import { FilesComponent } from './component/documents/files/files.component';
 import { EntityBriefViewComponent } from './component/entities/entity-brief-view/entity-brief-view.component';
 import { EntityBriefViewRemoteOrganisationComponent } from './component/entities/entity-brief-view/entity-brief-view.organisation';
 import { EntityBriefViewRemotePersonComponent } from './component/entities/entity-brief-view/entity-brief-view.person';
+import { OpenCloseButtonComponent } from './component/open-close-button.component';
 import { RemoteSearchComponent } from './component/remote-search/remote-search.component';
 import { LinkPermissionsDirective } from './directive/link-permissions.directive';
 import { NoContentDirective } from './directive/no-content.directive';
@@ -55,7 +59,8 @@ import { PartOfComponent } from './view/brief/part-of/part-of.component';
 import { EntityLinkComponent } from './view/entity-link.component';
 import { InheritedCallNumberComponent } from './view/inherited-call-number/inherited-call-number.component';
 import { ThumbnailComponent } from './view/thumbnail/thumbnail.component';
-import { OpenCloseButtonComponent } from './component/open-close-button.component';
+import { MainTitleRelationPipe } from './pipe/main-title-relation.pipe';
+import { DocumentProvisionActivityPipe } from './pipe/document-provision-activity.pipe';
 
 @NgModule({
   declarations: [
@@ -66,8 +71,10 @@ import { OpenCloseButtonComponent } from './component/open-close-button.componen
     PatronBlockedMessagePipe,
     ProvisionActivityPipe,
     UrlActivePipe,
+    DocumentProvisionActivityPipe,
     FaIconClassPipe,
     ItemHoldingsCallNumberPipe,
+    MainTitleRelationPipe,
     InheritedCallNumberComponent,
     ThumbnailComponent,
     PartOfComponent,
@@ -95,9 +102,16 @@ import { OpenCloseButtonComponent } from './component/open-close-button.componen
     IdentifiedByLabelPipe,
     FilesComponent,
     RemoteSearchComponent,
-    OpenCloseButtonComponent
+    OpenCloseButtonComponent,
+    DescriptionZoneComponent,
+    OtherEditionComponent,
+    DocumentDescriptionComponent
   ],
   exports: [
+    ProvisionActivityPipe,
+    DocumentDescriptionComponent,
+    MainTitlePipe,
+    DocumentProvisionActivityPipe,
     CommonModule,
     PrimeNgImportModule,
     ExtractSourceFieldPipe,
diff --git a/projects/shared/src/lib/view/availability/availability.component.html b/projects/shared/src/lib/view/availability/availability.component.html
index 6124e9427..ced86792a 100644
--- a/projects/shared/src/lib/view/availability/availability.component.html
+++ b/projects/shared/src/lib/view/availability/availability.component.html
@@ -18,7 +18,7 @@
 @defer (when availability) {
     <i
       class="mr-1 fa fa-circle"
-      [ngClass]="{'text-success': availability.available,'text-danger': !availability.available}"
+      [ngClass]="{'text-success': availability.available, 'text-error': !availability.available}"
     ></i>
     @switch (recordType) {
       @case('item') {
diff --git a/projects/shared/src/lib/view/brief/part-of/part-of.component.html b/projects/shared/src/lib/view/brief/part-of/part-of.component.html
index ec3b32bda..50a74c584 100644
--- a/projects/shared/src/lib/view/brief/part-of/part-of.component.html
+++ b/projects/shared/src/lib/view/brief/part-of/part-of.component.html
@@ -16,7 +16,7 @@
 -->
 @if (record && record.metadata.partOf) {
   @for (partOf of record.metadata.partOf; track partOf; let i = $index) {
-    <div class="mb-0">
+    <div>
       <b>{{ getPartOfLabel(record) }}</b>:
       @if (isPublicView) {
         <a id="{{ 'doc-part-of-' + i }}" href="/{{ viewcode }}/documents/{{ partOf.document.pid }}">
@@ -31,7 +31,7 @@
           ;
           @for(numbering of partOf.numbering; track numbering; let i = $index; let isLast = $last) {
             @if (formatNumbering(numbering); as num) {
-              <span class="list-inline-item" id="{{ 'doc-part-of-numbering-' + i }}">
+              <span id="{{ 'doc-part-of-numbering-' + i }}">
                 {{ num }}
                 @if (!isLast) {
                   ,
diff --git a/projects/shared/src/lib/view/contribution/contribution.component.html b/projects/shared/src/lib/view/contribution/contribution.component.html
index 1ad3e412d..e9b9f0833 100644
--- a/projects/shared/src/lib/view/contribution/contribution.component.html
+++ b/projects/shared/src/lib/view/contribution/contribution.component.html
@@ -17,10 +17,10 @@
 -->
 
 @if (contributions) {
-  <ul class="contributor-list-inline">
+  <ul class="list-none contributor-list mt-2 mb-0 p-0">
     @for (contributor of contributions; track contributor) {
-      <li>
-        <ng-container [ngTemplateOutlet]="contributorTpl" [ngTemplateOutletContext]="{contributor}"></ng-container>
+      <li class="inline-block mr-0">
+        <ng-container [ngTemplateOutlet]="contributorTpl" [ngTemplateOutletContext]="{contributor}"/>
       </li>
       @if (limit) {
         …
@@ -30,9 +30,9 @@
 }
 
 <ng-template #contributorTpl let-contributor='contributor'>
-  <ng-container [ngTemplateOutlet]="entityTpl" [ngTemplateOutletContext]="{entity: contributor.entity}"></ng-container>
+  <ng-container [ngTemplateOutlet]="entityTpl" [ngTemplateOutletContext]="{entity: contributor.entity}" />
   @if (withRoles && contributor.role && contributor.role.length > 0) {
-    <ul class="contributor-roles">
+    <ul class="inline">
       @for (role of contributor.role; track role) {
         <li class="contributor-role">{{ role | translate }}</li>
       }
@@ -51,12 +51,12 @@
         [external]="true"
         [entity]="entity"
         [routerLinkParams]="['/', view, 'search', 'documents']"
-      ></shared-entity-link>
+      />
       } @else {
         <shared-entity-link
           resourceName="contribution"
           [entity]="entity"
-        ></shared-entity-link>
+        />
       }
     }
   } @else {
diff --git a/projects/shared/src/lib/view/contribution/contribution.component.scss b/projects/shared/src/lib/view/contribution/contribution.component.scss
index fa6248a9a..0b2269398 100644
--- a/projects/shared/src/lib/view/contribution/contribution.component.scss
+++ b/projects/shared/src/lib/view/contribution/contribution.component.scss
@@ -16,14 +16,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@import 'bootstrap/scss/bootstrap';
 
-ul.contributor-list-inline {
-  @extend .list-unstyled;
-  @extend .mb-0;
+ul.contributor-list {
+  padding-inline-start: 0;
   li {
-    @extend .list-inline-item;
-    @extend .mr-0;
+    @extend .inline-block, .mr-0;
   }
   & > li + li::before {
     @extend .mx-1;
@@ -31,10 +28,7 @@ ul.contributor-list-inline {
   }
 
   ul.contributor-roles {
-    @extend .list-unstyled;
-    @extend .d-inline-block;
-    @extend .text-secondary;
-    @extend .ml-1;
+    @extend .list-none, .inline-block, .text-color-secondary, .ml-1;
     & > li + li::before {
       content: ", ";
     }
diff --git a/projects/shared/src/lib/view/contribution/contribution.component.ts b/projects/shared/src/lib/view/contribution/contribution.component.ts
index 68660f117..328c91b7f 100644
--- a/projects/shared/src/lib/view/contribution/contribution.component.ts
+++ b/projects/shared/src/lib/view/contribution/contribution.component.ts
@@ -19,7 +19,6 @@ import { Component, Input, OnInit } from '@angular/core';
 
 @Component({
   selector: 'shared-contribution',
-  styleUrls: ['./contribution.component.scss'],
   templateUrl: './contribution.component.html'
 })
 export class ContributionComponent implements OnInit {
diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.html b/projects/shared/src/lib/view/thumbnail/thumbnail.component.html
index defa472ed..d6f3cc15c 100644
--- a/projects/shared/src/lib/view/thumbnail/thumbnail.component.html
+++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.html
@@ -15,19 +15,13 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (record) {
-  <div class="align-self-start d-flex">
-    <figure class="mb-0" [ngClass]="figureStyle">
-      @if (svgImage) {
-        <img class="svg-image" [ngClass]="imageCssClass" [src]="coverUrl">
-      } @else {
-        <img [ngClass]="imageCssClass" [src]="coverUrl">
-      }
+  <div class="align-self-start flex">
+    <figure class="m-0" [ngClass]="figureStyle">
+      <img class="img-thumbnail shadow-1 p-2" [ngClass]="{'svg-image': svgImage}" [src]="coverUrl"/>
       @for (type of record.metadata.type; track type) {
-        @if (type.subtype) {
-          <figcaption class="figure-caption text-center font-weight-bold" translate>{{ type.subtype }}</figcaption>
-        } @else {
-          <figcaption class="figure-caption text-center font-weight-bold" translate>{{ type.main_type }}</figcaption>
-        }
+        <figcaption class="text-center font-bold">
+          {{ type.subtype? (type.subtype | translate): (type.main_type | translate) }}
+        </figcaption>
       }
     </figure>
   </div>
diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss b/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss
index 4fb6cfe30..44cd84100 100644
--- a/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss
+++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.scss
@@ -16,21 +16,23 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-figure.thumb-detail {
-  height: auto;
-  max-height: 100%;
-  width: 100%;
-}
+@import 'primeflex/primeflex';
 
-figure.thumb-detail img.img-thumbnail {
-  max-width: 160px;
-}
+shared-thumbnail {
+  figure.thumb-detail {
+    @extend .h-auto, .max-h-full, .w-full;
+  }
 
-figure.thumb-brief .svg-image {
-  min-width: 100px;
-  min-height: 100px;
-}
+  figure.thumb-detail img.img-thumbnail {
+    @extend .max-w-10rem;
+  }
+
+  figure.thumb-brief .svg-image {
+    min-width: 6rem;
+    min-height: 6rem;
+  }
 
-figure.thumb-brief img.img-thumbnail {
-  max-width: 100px;
+  figure.thumb-brief img.img-thumbnail {
+    @extend .max-w-6rem;
+  }
 }
diff --git a/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts b/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
index 7d7c0125c..45eca9306 100644
--- a/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
+++ b/projects/shared/src/lib/view/thumbnail/thumbnail.component.ts
@@ -23,8 +23,7 @@ import { catchError } from 'rxjs/operators';
 
 @Component({
   selector: 'shared-thumbnail',
-  templateUrl: './thumbnail.component.html',
-  styleUrls: ['./thumbnail.component.scss']
+  templateUrl: './thumbnail.component.html'
 })
 export class ThumbnailComponent implements OnInit {
 
@@ -36,9 +35,6 @@ export class ThumbnailComponent implements OnInit {
   /** ISBN of the record */
   isbn: string;
 
-  /** Css classes for the image */
-  imageCssClass = 'img-thumbnail img-fluid border border-light';
-
   /** Style for image container */
   figureStyle = 'thumb-detail';
 
diff --git a/projects/shared/src/public-api.ts b/projects/shared/src/public-api.ts
index 175e6f1f2..e97a6492d 100644
--- a/projects/shared/src/public-api.ts
+++ b/projects/shared/src/public-api.ts
@@ -24,6 +24,7 @@ export * from './lib/class/user';
 export * from './lib/component/action-button/action-button.component';
 export * from './lib/component/core/brief-view/brief-view.component';
 export * from './lib/component/documents/document-brief-view/document-brief-view.component';
+export * from './lib/component/documents/document-description/document-description.component';
 export * from './lib/component/documents/files/files.component';
 export * from './lib/component/entities/entity-brief-view/entity-brief-view.component';
 export * from './lib/component/open-close-button.component';
@@ -65,3 +66,6 @@ export * from './lib/view/entity-link.component';
 export * from './lib/view/inherited-call-number/inherited-call-number.component';
 export * from './lib/view/thumbnail/thumbnail.component';
 export * from './tests/user';
+export * from './lib/pipe/provision-activity.pipe';
+export * from './lib/pipe/main-title.pipe';
+export * from './lib/pipe/document-provision-activity.pipe';
diff --git a/projects/shared/src/scss/styles.scss b/projects/shared/src/scss/styles.scss
index 8658215dc..d59c21bcb 100644
--- a/projects/shared/src/scss/styles.scss
+++ b/projects/shared/src/scss/styles.scss
@@ -15,32 +15,48 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-// FIELDS FORMAT -----------------------
-ng-core-formly-field-primeng-input > input,
-formly-field > input {
-  width: 100%;
-}
+// @import "font-awesome/scss/font-awesome.scss";
+@import "primeng/resources/primeng";
+@import "primeicons/primeicons.css";
+@import "primeng/resources/themes/aura-light-blue/theme.css";
+@import "easymde/dist/easymde.min";
 
-ng-core-formly-field-primeng-input > input:read-only {
-  background: #e9ecef;
+@layer rero-ils-ui {
+  .rero-ils-ui {
+    @import "primeflex/primeflex";
+    @import "node_modules/@rero/ng-core/assets/scss/ng-core";
+    @import "../lib/component/documents/files/files.component.scss";
+    @import "../lib/view/contribution/contribution.component.scss";
+    @import "../lib/view/thumbnail/thumbnail.component.scss";
+  }
 }
 
-label {
-  align-items: baseline;
+@layer rero-ils-ui {
+  .rero-ils-ui {
+    .rero-ils-external-link:after {
+      font-family: "FontAwesome";
+      @extend .text-sm;
+      vertical-align: top;
+      content: " \f08e";
+    }
+  }
 }
 
-// ADJUST BOOTSTRAP / PRIMENG -------------------
-.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
-  padding-top: 0;
-  padding-bottom: 0;
+// THEME
+.p-tag.p-tag-secondary {
+  background-color: var(--surface-300);
+  color: #475569;
 }
+// // FIELDS FORMAT -----------------------
+// ng-core-formly-field-primeng-input > input,
+// formly-field > input {
+//   @extend .w-full;
+// }
 
-dt, dl, dd {
-  margin-bottom: 0;
-  padding-bottom: 0;
-}
+// ng-core-formly-field-primeng-input > input:read-only {
+//   @extend .bg-blue-50;
+// }
 
-div.object .row {
-  margin-left: 4px !important;
-  margin-top: 0.4rem;
-}
+// label {
+//   @extend .align-items-baseline;
+// }