diff --git a/projects/ng-core-tester/src/app/app-routing.module.ts b/projects/ng-core-tester/src/app/app-routing.module.ts
index 6daf00a7..f8bd3625 100644
--- a/projects/ng-core-tester/src/app/app-routing.module.ts
+++ b/projects/ng-core-tester/src/app/app-routing.module.ts
@@ -371,23 +371,23 @@ const routes: Routes = [
               label: 'Relevance',
               value: 'relevance',
               defaultQuery: true,
-              icon: 'fa-sort-amount-desc'
+              icon: 'fa fa-sort-amount-desc'
             },
             {
               label: 'Date descending',
               value: 'newest',
               defaultNoQuery: true,
-              icon: 'fa-sort-amount-desc'
+              icon: 'fa fa-sort-amount-desc'
             },
             {
               label: 'Date ascending',
               value: 'oldest',
-              icon: 'fa-sort-amount-asc'
+              icon: 'fa fa-sort-amount-asc'
             },
             {
               label: 'Title',
               value: 'title',
-              icon: 'fa-sort-alpha-asc'
+              icon: 'fa fa-sort-alpha-asc'
             }
           ],
           exportFormats: [
diff --git a/projects/ng-core-tester/src/app/app.component.html b/projects/ng-core-tester/src/app/app.component.html
index 00da2034..8b6617f3 100644
--- a/projects/ng-core-tester/src/app/app.component.html
+++ b/projects/ng-core-tester/src/app/app.component.html
@@ -23,7 +23,7 @@
       <app-menu />
     </div>
     <div class="flex flex-auto justify-content-end">
-      <app-search-bar class="w-full" viewcode="sonar"></app-search-bar>
+      <app-search-bar class="w-full" viewcode="global"/>
     </div>
   </div>
   <router-outlet></router-outlet>
diff --git a/projects/ng-core-tester/src/app/routes/documents-route.ts b/projects/ng-core-tester/src/app/routes/documents-route.ts
index 6e6b37ad..9245ff62 100644
--- a/projects/ng-core-tester/src/app/routes/documents-route.ts
+++ b/projects/ng-core-tester/src/app/routes/documents-route.ts
@@ -70,12 +70,17 @@ export class DocumentsRoute implements RouteInterface {
             aggregationsOrder: [
               'document_type',
               'author',
+              'year',
+              'acquisition',
               'library',
               'organisation',
               'language',
               'subject',
               'status'
             ],
+            listHeaders: {
+              Accept: 'application/rero+json, application/json'
+            },
             aggregationsExpand: ['document_type'],
             aggregationsBucketSize: 5,
             preprocessRecordEditor: (record: any): any => {
diff --git a/projects/ng-core-tester/src/app/search-bar/search-bar.component.html b/projects/ng-core-tester/src/app/search-bar/search-bar.component.html
index 58b471e4..5f84f097 100644
--- a/projects/ng-core-tester/src/app/search-bar/search-bar.component.html
+++ b/projects/ng-core-tester/src/app/search-bar/search-bar.component.html
@@ -18,5 +18,7 @@
   [recordTypes]="recordTypes"
   scrollHeight="400px"
   (onSelect)="onSelect($event)"
+  (onSearch)="onSearch($event)"
+  inputStyleClass="text-lg"
   [value]="value"
 />
diff --git a/projects/ng-core-tester/src/app/search-bar/search-bar.component.ts b/projects/ng-core-tester/src/app/search-bar/search-bar.component.ts
index 04989f09..75b12842 100644
--- a/projects/ng-core-tester/src/app/search-bar/search-bar.component.ts
+++ b/projects/ng-core-tester/src/app/search-bar/search-bar.component.ts
@@ -44,20 +44,27 @@ export class SearchBarComponent implements OnInit {
     this.recordTypes = [
       {
         index: 'documents',
-        field: 'title',
+        field: 'autocomplete_title',
         groupLabel: this.translateService.instant('Documents'),
         processSuggestions: (data: any, query: string) => this.processDocuments(data, query),
         preFilters: this.viewcode() ? { view: this.viewcode() } : {}
       },
       {
-        index: 'organisations',
-        field: 'name',
-        groupLabel: this.translateService.instant('Organisations'),
-        processSuggestions: (data: any) => this.processOrganisations(data),
+        index: 'entities',
+        field: 'autocomplete_name',
+        groupLabel: this.translateService.instant('Entities'),
+        processSuggestions: (data: any) => this.processEntities(data),
         preFilters: this.viewcode() ? { view: this.viewcode() } : {}
       }
     ];
   }
+  onSearch(query) {
+    this.router.navigate(['/record', 'search', 'documents'], {
+      queryParams: {
+        q: query
+      }
+    });
+  }
 
   onSelect(event: IAutoComplete) {
     const label = event.originalLabel ? event.originalLabel : event.label;
@@ -73,11 +80,11 @@ export class SearchBarComponent implements OnInit {
         });
         this.router.navigate(['/record', 'search', 'documents', 'detail', event.value]);
         break;
-      case 'organisations':
+      case 'entities':
         this.messageService.add({
           severity: 'success',
-          summary: 'ORGANISATIONS',
-          detail: 'navigate to organisation: ' + event.value,
+          summary: 'ENTITIES',
+          detail: 'navigate to entity: ' + event.value,
           life: CONFIG.MESSAGE_LIFE
         });
         break;
@@ -100,14 +107,14 @@ export class SearchBarComponent implements OnInit {
     return values;
   }
 
-  private processOrganisations(data: Record): any {
+  private processEntities(data: Record): any {
     const values: IAutoComplete[] = [];
     data.hits.hits.map((hit: any) => {
       values.push({
-        iconClass: 'fa fa-industry',
+        iconClass: 'fa fa-user',
         id: hit.metadata.pid,
-        index: 'organisations',
-        label: hit.metadata.name,
+        index: 'entities',
+        label: hit.metadata.authorized_access_point_en,
         value: hit.metadata.pid,
       });
     });
diff --git a/projects/rero/ng-core/assets/scss/_editor.scss b/projects/rero/ng-core/assets/scss/_editor.scss
index e1519595..57a4c2e7 100644
--- a/projects/rero/ng-core/assets/scss/_editor.scss
+++ b/projects/rero/ng-core/assets/scss/_editor.scss
@@ -15,13 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@layer ng-core {
-  ng-core-editor-formly-field-textarea,
-  ng-core-formly-field-primeng-input,
-  ng-core-tree-select,
-  ng-core-multi-select,
-  ng-core-primeng-select,
-  ng-core-date-picker {
-    @extend .w-full;
-  }
+ng-core-editor-formly-field-textarea,
+ng-core-formly-field-primeng-input,
+ng-core-tree-select,
+ng-core-multi-select,
+ng-core-primeng-select,
+ng-core-date-picker {
+  @extend .w-full;
 }
diff --git a/projects/rero/ng-core/assets/scss/_theme.scss b/projects/rero/ng-core/assets/scss/_theme.scss
index e8ba1ca3..17554999 100644
--- a/projects/rero/ng-core/assets/scss/_theme.scss
+++ b/projects/rero/ng-core/assets/scss/_theme.scss
@@ -15,50 +15,54 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@layer ng-core {
-  :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;
+a {
+  @extend .no-underline;
+ }
 
-    @extend .text-sm;
-
-    a {
-      @extend .text-blue-500, .no-underline;
-    }
+a:not(.p-button):not(.p-element):not([role=button]):not([role=tab]) {
+  color: var(--blue-500);
+}
 
-    a:hover {
-      @extend .text-blue-600, .underline;
-    }
+a:hover:not(.p-button):not(.p-element):not([role=button]):not([role=tab]) {
+  color: var(--blue-600);
+  @extend .text-blue-600, .underline;
+}
 
-    .p-submenu-list {
-      z-index: 1000;
-    }
+.p-submenu-list {
+  z-index: 1000;
+}
 
-    .p-menuitem {
-      a {
-        @extend .text-color;
-      }
-      a:hover {
-        @extend .no-underline;
-      }
-    }
+.p-menuitem {
+  a {
+    @extend .text-color;
+  }
+  a:hover {
+    @extend .no-underline;
+  }
+}
 
-    dl.metadata {
-      @extend .grid, .my-0, .w-full;
-      dt {
-        @extend .font-bold, .col-12, .py-0;
-        @include styleclass('md:col-4');
-      }
-      dd {
-        @extend .col-12, .py-0;
-        @include styleclass('md:col-8');
-        margin-inline-start: 0;
-      }
-    }
-    .p-menubar {
-      @extend .mb-0, .border-none, .bg-white;
-    }
+dl.metadata {
+  @extend .grid, .my-0, .w-full;
+  dt {
+    @extend .font-bold, .col-12, .py-0;
+    @include styleclass('md:col-4');
   }
+  dd {
+    @extend .col-12, .py-0, .m-0;
+    @include styleclass('md:col-8');
+  }
+}
+
+.p-menubar {
+  @extend .mb-0, .border-none, .bg-white;
+}
+
+// bootstrap patches
+label {
+  @extend .m-0;
+}
+
+legend {
+  @extend .text-base;
+  width: auto;
 }
diff --git a/projects/rero/ng-core/assets/scss/_typography.scss b/projects/rero/ng-core/assets/scss/_typography.scss
index 619da83b..6b1b8792 100644
--- a/projects/rero/ng-core/assets/scss/_typography.scss
+++ b/projects/rero/ng-core/assets/scss/_typography.scss
@@ -15,75 +15,125 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@layer ng-core {
-  :root {
-    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-      @extend .mt-0, .mb-2, .font-medium, .line-height-2;
-    }
-
-    h1, .h1 {
-      @extend .text-5xl;
-    }
-
-    h2, .h2 {
-      @extend .text-4xl;
-    }
-
-    h3, .h3 {
-      @extend .text-3xl;
-    }
-
-    h4, .h4 {
-      @extend .text-2xl;
-    }
-
-    h5, .h5 {
-      @extend .text-xl;
-    }
-
-    h6, .h6 {
-      @extend .text-lg;
-    }
-
-    // from aura-light-blue message theme
-    .text-info {
-      color: #2563eb;
-    }
-
-    .text-success {
-      color: #16a34a;
-    }
-
-    .text-warning {
-      color: #ca8a04;
-    }
-
-    .text-error {
-      color: #dc2626;
-    }
-
-    .border-info {
-      border-color: #2563eb;
-    }
-
-    .border-success {
-      border-color: #16a34a;
-    }
-
-    .border-warning {
-      border-color: #ca8a04;
-    }
-
-    .border-error {
-      border-color: #dc2626;
-    }
-
-    .text-link {
-      @include styleclass('text-blue-500 hover:text-blue-600 hover:underline cursor-pointer');
-    }
-
-    .text-link-secondary {
-      @include styleclass('text-color-secondary hover:text-blue-600 cursor-pointer');
-    }
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  @extend .mt-0, .mb-2, .font-medium, .line-height-2;
+}
+
+h1,
+.h1 {
+  @extend .text-5xl;
+}
+
+h2,
+.h2 {
+  @extend .text-4xl;
+}
+
+h3,
+.h3 {
+  @extend .text-3xl;
+}
+
+h4,
+.h4 {
+  @extend .text-2xl;
+}
+
+h5,
+.h5 {
+  @extend .text-xl;
+}
+
+h6,
+.h6 {
+  @extend .text-lg;
+}
+
+// from aura-light-blue message theme
+.text-info {
+  color: #2563eb;
+}
+
+.text-success {
+  color: #16a34a;
+}
+
+.text-warning {
+  color: #ca8a04;
+}
+
+.text-error {
+  color: #dc2626;
+}
+
+.border-info {
+  border-color: #2563eb;
+}
+
+.border-success {
+  border-color: #16a34a;
+}
+
+.border-warning {
+  border-color: #ca8a04;
+}
+
+.border-error {
+  border-color: #dc2626;
+}
+
+.background-info {
+  background-color: #2563eb;
+}
+
+.background-success {
+  background-color: #16a34a;
+}
+
+.background-warning {
+  background-color: #ca8a04;
+}
+
+.background-error {
+  background-color: #dc2626;
+}
+
+.text-link {
+  @include styleclass('text-blue-500 hover:text-blue-600 hover:underline cursor-pointer');
+}
+
+.text-link-secondary {
+  @include styleclass('text-color-secondary hover:text-blue-600 cursor-pointer');
+}
+
+.alternate-color > *:nth-child(even) {
+  @extend .surface-100;
+}
+
+.p-card-body-p-0 {
+  .p-card-body {
+    @extend .p-0;
+  }
+}
+
+.bg-transparent {
+  background-color: transparent;
+}
+
+.time-line-30 {
+  .p-timeline-event-opposite {
+    width: 30%;
+    @extend .flex-initial;
   }
 }
diff --git a/projects/rero/ng-core/assets/scss/ng-core.scss b/projects/rero/ng-core/assets/scss/ng-core.scss
index 2181f68a..fa11d9db 100644
--- a/projects/rero/ng-core/assets/scss/ng-core.scss
+++ b/projects/rero/ng-core/assets/scss/ng-core.scss
@@ -21,3 +21,5 @@
 
 @import "../../src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss";
 @import "../../src/lib/record/editor/editor.component.scss";
+@import "../../src/lib/record/search-autocomplete/search-autocomplete.component.scss";
+
diff --git a/projects/rero/ng-core/src/lib/prime-ng-core-module.ts b/projects/rero/ng-core/src/lib/prime-ng-core-module.ts
index 6b66ec70..c8187318 100644
--- a/projects/rero/ng-core/src/lib/prime-ng-core-module.ts
+++ b/projects/rero/ng-core/src/lib/prime-ng-core-module.ts
@@ -26,6 +26,7 @@ import { CardModule } from 'primeng/card';
 import { CheckboxModule } from 'primeng/checkbox';
 import { ConfirmDialogModule } from 'primeng/confirmdialog';
 import { DialogModule } from 'primeng/dialog';
+import { DividerModule } from 'primeng/divider';
 import { DropdownModule } from "primeng/dropdown";
 import { DialogService, DynamicDialogModule } from 'primeng/dynamicdialog';
 import { InputGroupModule } from 'primeng/inputgroup';
@@ -46,6 +47,7 @@ import { ToastModule } from 'primeng/toast';
 import { TooltipModule } from 'primeng/tooltip';
 import { TriStateCheckboxModule } from 'primeng/tristatecheckbox';
 import { FieldsetModule } from 'primeng/fieldset';
+import { MenuModule } from 'primeng/menu';
 
 
 @NgModule({
@@ -65,6 +67,7 @@ import { FieldsetModule } from 'primeng/fieldset';
     ClipboardModule,
     ConfirmDialogModule,
     DialogModule,
+    DividerModule,
     DropdownModule,
     DynamicDialogModule,
     FieldsetModule,
@@ -85,6 +88,7 @@ import { FieldsetModule } from 'primeng/fieldset';
     ToastModule,
     TooltipModule,
     TriStateCheckboxModule,
+    MenuModule
   ]
 })
 export class PrimeNgCoreModule { }
diff --git a/projects/rero/ng-core/src/lib/record/editor/editor.component.scss b/projects/rero/ng-core/src/lib/record/editor/editor.component.scss
index 1a654709..6394f1bf 100644
--- a/projects/rero/ng-core/src/lib/record/editor/editor.component.scss
+++ b/projects/rero/ng-core/src/lib/record/editor/editor.component.scss
@@ -15,11 +15,10 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@layer ng-core {
-  ng-core-editor {
-    .bd-toc, .bd-sidebar {
-        top: 4rem;
-        height: 100vh - 10vh;
-    }
+ng-core-editor {
+  .bd-toc,
+  .bd-sidebar {
+    top: 4rem;
+    height: 100vh - 10vh;
   }
 }
diff --git a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts
index 8b1eff19..4e61906d 100644
--- a/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts
+++ b/projects/rero/ng-core/src/lib/record/editor/formly/primeng/select/select.ts
@@ -54,7 +54,7 @@ export interface IFormlySelectFieldConfig extends FormlyFieldConfig<ISelectProps
 @Component({
   selector: 'ng-core-primeng-select',
   template: `
-  <div class="card flex justify-content-center">
+  <div class="flex justify-content-center">
      <p-dropdown
       [appendTo]="props.appendTo"
       [class]="props.class"
diff --git a/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss b/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss
index 2596fef5..1a1f309d 100644
--- a/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss
+++ b/projects/rero/ng-core/src/lib/record/editor/wrappers/card-wrapper/card-wrapper.component.scss
@@ -15,20 +15,19 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-@layer ng-core {
-  ng-core-card-wrapper {
-    // primeng bug?
-    span.p-fieldset-legend-text {
-      @extend .hidden;
+ng-core-card-wrapper {
+  // primeng bug?
+  span.p-fieldset-legend-text {
+    @extend .hidden;
+  }
+  .p-fieldset .p-fieldset-legend {
+    @extend .m-0;
+    span {
+      @extend .p-0;
     }
-    .p-fieldset .p-fieldset-legend {
-      @extend .m-0;
-      span {
-        @extend .p-0;
-      }
-      ng-core-label-editor > div, ng-core-editor-dropdown-label-editor > div {
-        @extend .ml-2;
-      }
+    ng-core-label-editor > div,
+    ng-core-editor-dropdown-label-editor > div {
+      @extend .ml-2;
     }
   }
 }
diff --git a/projects/rero/ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts b/projects/rero/ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts
index 41385136..d1439677 100644
--- a/projects/rero/ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts
+++ b/projects/rero/ng-core/src/lib/record/editor/wrappers/form-field-wrapper/form-field-wrapper.component.ts
@@ -20,7 +20,7 @@ import { FieldWrapper } from '@ngx-formly/core';
 @Component({
   selector: 'ng-core-form-field-wrapper',
   template: `
-    <div class="form-group mt-2" [ngClass]="props.cssClass" [class.has-error]="showError">
+    <div [ngClass]="props.cssClass" [class.has-error]="showError">
       <!-- label -->
       @if (props.label && props.hideLabel !== true) {
         <label [attr.for]="id" [pTooltip]="props.description" tooltipPosition="top">
diff --git a/projects/rero/ng-core/src/lib/record/export-button/export-button.component.html b/projects/rero/ng-core/src/lib/record/export-button/export-button.component.html
index a51d124a..2241f71b 100644
--- a/projects/rero/ng-core/src/lib/record/export-button/export-button.component.html
+++ b/projects/rero/ng-core/src/lib/record/export-button/export-button.component.html
@@ -40,15 +40,13 @@
     }
   } @else {
     <!-- display multiple export formats as dropdown list -->
-    <p-splitButton
-      [model]="exportOptions()"
-      styleClass="mx-1"
-      outlined
-    >
-      <ng-template pTemplate="content">
-        <i class="pi pi-cloud-download mr-2"></i>
-        {{ 'Export as' | translate }} …
-      </ng-template>
-    </p-splitButton>
+      <p-menu #menu [model]="exportOptions()" [popup]="true" />
+      <p-button severity="secondary" outlined (onClick)="menu.toggle($event)">
+        <div class="flex gap-3 align-items-center">
+        <i class="fa fa-download"></i>
+        {{ 'Export as' | translate }}&nbsp;…
+        <i class="fa fa-caret-down"></i>
+      </div>
+      </p-button>
   }
 }
diff --git a/projects/rero/ng-core/src/lib/record/search-autocomplete/search-autocomplete.component.scss b/projects/rero/ng-core/src/lib/record/search-autocomplete/search-autocomplete.component.scss
new file mode 100644
index 00000000..90352e30
--- /dev/null
+++ b/projects/rero/ng-core/src/lib/record/search-autocomplete/search-autocomplete.component.scss
@@ -0,0 +1,20 @@
+/*
+ * 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
+ * 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/>.
+ */
+
+ng-core-search-autocomplete p-Autocomplete button {
+  @extend .text-gray-500, .bg-white, .border-300;
+}
diff --git a/projects/rero/ng-core/src/lib/record/search-autocomplete/search-autocomplete.component.ts b/projects/rero/ng-core/src/lib/record/search-autocomplete/search-autocomplete.component.ts
index 203e86ac..f1829dcc 100644
--- a/projects/rero/ng-core/src/lib/record/search-autocomplete/search-autocomplete.component.ts
+++ b/projects/rero/ng-core/src/lib/record/search-autocomplete/search-autocomplete.component.ts
@@ -44,6 +44,9 @@ export interface IAutoComplete {
   selector: 'ng-core-search-autocomplete',
   template: `
     <p-autoComplete
+      dropdownIcon="pi pi-search"
+      [dropdown]="true"
+      dropdownMode="none"
       [styleClass]="styleClass()"
       [inputStyleClass]="inputStyleClass()"
       [delay]="delay()"
@@ -51,10 +54,13 @@ export interface IAutoComplete {
       [minLength]="minLength()"
       [placeholder]="placeholder()"
       [ngModel]="value()"
+      (ngModelChange)="currentValue = $event"
       [scrollHeight]="scrollHeight()"
       [suggestions]="suggestions()"
-      (completeMethod)="search($event)"
+      (completeMethod)="setSuggestionQuery($event)"
       (onSelect)="onSelectValue($event)"
+      (onKeyUp)="search($event)"
+      (onDropdownClick)="buttonClick($event)"
     >
     <ng-template let-item pTemplate="group">
       <div class="flex align-items-center" [ngClass]="groupClass()" [innerHTML]="item.label"></div>
@@ -84,9 +90,11 @@ export class SearchAutocompleteComponent {
   scrollHeight = input<string>('250px');
   styleClass = input<string>('w-full');
   value = input<string>();
+  currentValue: string = '';
 
   // Output
   onSelect = output();
+  onSearch = output<string>();
 
   // Whether to display options as grouped when nested options are provided.
   group = false;
@@ -94,11 +102,15 @@ export class SearchAutocompleteComponent {
   // User Query
   private query = new Subject<string>();
 
+  buttonClick(event) {
+    this.onSearch.emit(this.currentValue);
+  }
+
   suggestions = toSignal(this.query.pipe(
     switchMap((query: string) => this.getSuggestions(query))
   ), { initialValue: []});
 
-  search(event: AutoCompleteCompleteEvent): void {
+  setSuggestionQuery(event: AutoCompleteCompleteEvent): void {
     this.query.next(event.query);
   }
 
@@ -106,6 +118,12 @@ export class SearchAutocompleteComponent {
     this.onSelect.emit(event.value);
   }
 
+  search(event) {
+    if(event?.code === 'Enter') {
+      this.onSearch.emit(event.srcElement.value);
+    }
+  }
+
   private getSuggestions(query: string): any {
     return combineLatest(this.prepareQuery(query)).pipe(
       map((data: IAutoComplete[]) => {
diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/aggregation.component.html b/projects/rero/ng-core/src/lib/record/search/aggregation/aggregation.component.html
index 77664518..c213a1a6 100644
--- a/projects/rero/ng-core/src/lib/record/search/aggregation/aggregation.component.html
+++ b/projects/rero/ng-core/src/lib/record/search/aggregation/aggregation.component.html
@@ -23,13 +23,13 @@
       [size]="aggregation().bucketSize" />
   </div>
 } @else {
-  <p-panel
-    styleClass="mb-2"
-    [header]="(aggregation().name || aggregation().key) | translate | ucfirst"
+  <p-fieldset
+    [legend]="(aggregation().name || aggregation().key) | translate | ucfirst"
     [toggleable]="true"
     [collapsed]="!isAggregationDisplayed"
     (collapsedChange)="toggleVisibility()"
   >
+  <div class="p-2">
   @switch (aggregation().type) {
     @case ('range') {
       <ng-core-aggregation-slider
@@ -58,5 +58,6 @@
       }
     }
   }
-  </p-panel>
+</div>
+</p-fieldset>
 }
diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.html b/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.html
index 91a9412b..1efcbda7 100644
--- a/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.html
+++ b/projects/rero/ng-core/src/lib/record/search/aggregation/buckets/buckets.component.html
@@ -15,11 +15,11 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (buckets()) {
-  <ul class="list-none m-0 p-0">
+  <ul class="list-none text-sm m-0 p-0">
   @for (bucket of buckets()|slice:0:bucketSize; track bucket; let index = $index) {
     <li>
         @if (bucket.doc_count) {
-          <div class="flex gap-1 align-items-center text-link-secondary mb-1">
+          <div class="flex gap-1 align-items-top text-link-secondary mb-1">
             <p-triStateCheckbox
               inputId="{{ bucket.aggregationKey }}-{{ index }}"
               variant="filled"
@@ -55,6 +55,6 @@
 }
 @if (displayMoreAndLessLink) {
   <div class="flex justify-content-end">
-    <span class="text-link" (onClick)="moreMode = !moreMode">{{ (moreMode ? 'more…' : 'less…') | translate }}</span>
+    <span class="text-link" (click)="moreMode = !moreMode">{{ (moreMode ? 'more…' : 'less…') | translate }}</span>
   </div>
 }
diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.html b/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.html
index ab353490..d058f0d4 100644
--- a/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.html
+++ b/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.html
@@ -16,16 +16,26 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <p-calendar
+    styleClass="w-full"
+    inputStyleClass="text-center"
     [(ngModel)]="dateRangeModel"
-    [minDate]="minDate"
-    [maxDate]="maxDate"
     selectionMode="range"
-    [readonlyInput]="true" />
-<div class="flex mt-2">
-  <div class="flex flex-auto justify-content-center">
-    <p-button [label]="'Apply' | translate" [outlined]="true" (onClick)="$event.preventDefault(); updateFilter()" />
-    @if (hasQueryParam) {
-      <p-button class="ml-1" [label]="'Clear filter' | translate" [outlined]="true" (onClick)="$event.preventDefault(); clearFilter()" />
-    }
-  </div>
+    [showIcon]="true"
+    [readonlyInput]="true" >
+    <ng-template pTemplate="footer">
+      <p-divider/>
+      <div class="grid grid-nogutter">
+        @for (cfg of buttonConfig; track cfg) {
+          <div class="col-6 flex justify-content-center">
+            <p-button (onClick)="setRange(cfg.value)" styleClass="w-full" class="flex-grow-1 p-1" [outlined]="true" size="small" [label]="cfg.label"></p-button>
+          </div>
+        }
+      </div>
+    </ng-template>
+    </p-calendar>
+<div class="flex justify-content-end mt-2 gap-2">
+  <p-button size="small" [label]="'Apply' | translate" [outlined]="true" (onClick)="$event.preventDefault(); updateFilter()" />
+  @if (hasQueryParam) {
+    <p-button size="small" class="ml-1" [label]="'Clear filter' | translate" [outlined]="true" (onClick)="$event.preventDefault(); clearFilter()" />
+  }
 </div>
diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.ts b/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.ts
index f4782dac..353db6b8 100644
--- a/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.ts
+++ b/projects/rero/ng-core/src/lib/record/search/aggregation/date-range/date-range.component.ts
@@ -18,6 +18,7 @@
 import { Component, OnDestroy, OnInit, inject, input } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { RecordSearchService } from '../../record-search.service';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: 'ng-core-aggregation-date-range',
@@ -26,6 +27,7 @@ import { RecordSearchService } from '../../record-search.service';
 export class AggregationDateRangeComponent implements OnInit, OnDestroy {
 
   protected recordSearchService: RecordSearchService = inject(RecordSearchService);
+  protected translateService: TranslateService = inject(TranslateService);
 
   // COMPONENTS ATTRIBUTES ====================================================
   // Buckets list
@@ -44,6 +46,7 @@ export class AggregationDateRangeComponent implements OnInit, OnDestroy {
 
   /** True if route have aggregation query param. */
   hasQueryParam = false;
+  buttonConfig = [];
 
   /** Subscription to search service. */
   private searchServiceSubscription: Subscription;
@@ -53,10 +56,15 @@ export class AggregationDateRangeComponent implements OnInit, OnDestroy {
     // Define min/max values if not exists
     if (this.config().min && this.config().min !== null) {
       this.minDate = new Date(this.config().min);
+    } else{
+      this.minDate = new Date(1900, 0, 0);
     }
     if (this.config().max && this.config().max !== null) {
       this.maxDate = new Date(this.config().max);
+    } else {
+      this.maxDate = new Date();
     }
+    this.dateRangeModel = [this.minDate, this.maxDate];
 
     this.searchServiceSubscription = this.recordSearchService.aggregationsFilters.subscribe((filters: any) => {
       if (!filters) {
@@ -66,10 +74,30 @@ export class AggregationDateRangeComponent implements OnInit, OnDestroy {
       this.hasQueryParam = filter !== undefined;
       this.dateRangeModel = (filter)
         ? filter.values[0].split('--').map((item: string) => new Date(+item))  // split filter data and transform each part into Date
-        : [];
+        :  [this.minDate, this.maxDate];
     });
+    const today = new Date();
+    this.buttonConfig = [
+    {
+      value: [new Date(new Date().setDate(today.getDate() - 31)), today],
+      label: this.translateService.instant('Last month')
+    }, {
+      value: [new Date(new Date().setDate(today.getDate() - 366)), today],
+      label: this.translateService.instant('Last year')
+    }, {
+      value: [new Date(today.getFullYear(), today.getMonth(), 1), new Date(today.getFullYear(), today.getMonth() + 1, 0)],
+      label: this.translateService.instant('This month')
+    },
+    {
+      value: [new Date(today.getFullYear(), 0, 1), new Date(today.getFullYear() + 1, 0, 1)],
+      label: this.translateService.instant('This year')
+    }
+  ];
+  }
+  setRange(value) {
+    this.dateRangeModel = value;
+    this.updateFilter();
   }
-
   /** OnDestroy hook */
   ngOnDestroy(): void {
     this.searchServiceSubscription.unsubscribe();
diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.html b/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.html
index 0e229081..6e9e900a 100644
--- a/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.html
+++ b/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.html
@@ -14,27 +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/>.
 -->
-<div class="flex">
-  <div class="flex-auto mr-1">
+<p-inputGroup>
     <p-inputNumber
-      styleClass="w-full"
-      [ngModel]="range[0]"
+      class="mr-1"
+      inputId="integeronly"
+      [(ngModel)]="range[0]"
       [min]="range[0]"
       [max]="range[1]" />
-  </div>
-  <div class="flex-auto">
     <p-inputNumber
-      styleClass="w-full"
-      [ngModel]="range[1]"
+      class="ml-1"
+      inputId="integeronly"
+      [(ngModel)]="range[1]"
       [min]="range[0]"
       [max]="range[1]" />
-  </div>
-</div>
-<div class="flex mt-2">
-  <div class="flex flex-auto justify-content-center">
-    <p-button [label]="'Apply' | translate" [outlined]="true" (onClick)="$event.preventDefault(); updateFilter()" />
+</p-inputGroup>
+<div class="flex justify-content-end mt-2 gap-2">
+    <p-button size="small" [label]="'Apply' | translate" [outlined]="true" (onClick)="$event.preventDefault(); updateFilter()" />
     @if (hasQueryParam) {
-      <p-button class="ml-1" [label]="'Clear filter' | translate" [outlined]="true" (onClick)="$event.preventDefault(); clearFilter()" />
+      <p-button size="small" [label]="'Clear filter' | translate" [outlined]="true" (onClick)="$event.preventDefault(); clearFilter()" />
     }
-  </div>
 </div>
diff --git a/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.ts b/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.ts
index 93330815..9fe8c738 100644
--- a/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.ts
+++ b/projects/rero/ng-core/src/lib/record/search/aggregation/slider/slider.component.ts
@@ -58,7 +58,7 @@ export class AggregationSliderComponent implements OnDestroy, OnInit {
           if (!filters) {
             return;
           }
-          let filter = filters.find((element: any) => element.key === this.key);
+          let filter = filters.find((element: any) => element.key === this.key());
           if (filter) {
             filter = filter.values[0].split('--').map((item: string) => +item);
             this.hasQueryParam = true;
diff --git a/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.html b/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.html
index 10660a43..263eb2ec 100644
--- a/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.html
+++ b/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.html
@@ -15,23 +15,14 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 @if (options().length > 0) {
-<p-dropdown
-  [placeholder]="'select…' | translate"
-  [options]="options()"
-  [ngModel]="selectedOption()?.value"
-  (onChange)="changeSorting($event)"
->
-  <ng-template pTemplate="selectedItem" let-item>
-    @if(item.icon) {
-    <i class="fa {{ item.icon }} mr-2"></i>
+<p-menu #menu [model]="options()" [popup]="true" />
+<p-button severity="secondary" outlined (onClick)="menu.toggle($event)">
+  <div class="flex gap-3 align-items-center">
+    @if (selectedOption()?.icon) {
+      <i [ngClass]="selectedOption().icon"></i>
     }
-    {{ item.label }}
-  </ng-template>
-  <ng-template let-item pTemplate="item">
-    @if(item.icon) {
-    <i class="fa {{ item.icon }} mr-2"></i>
-    }
-    {{item.label }}
-  </ng-template>
-</p-dropdown>
+  {{ selectedOption()?.label | translate }}&nbsp;…
+  <i class="fa fa-caret-down"></i>
+</div>
+</p-button>
 }
diff --git a/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.ts b/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.ts
index 2534c8a9..e09de98a 100644
--- a/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.ts
+++ b/projects/rero/ng-core/src/lib/record/search/menu-sort/menu-sort.component.ts
@@ -17,15 +17,7 @@
 import { Component, computed, inject, input, output } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
-import { DropdownChangeEvent } from 'primeng/dropdown';
-
-export interface ISortOption {
-  value: string;
-  label: string;
-  defaultQuery?: boolean;
-  defaultNoQuery?: boolean;
-  icon?: string;
-}
+import { MenuItem, MenuItemCommandEvent } from 'primeng/api';
 
 @Component({
   selector: 'ng-core-menu-sort',
@@ -37,42 +29,25 @@ export class MenuSortComponent {
   protected activatedRoute: ActivatedRoute = inject(ActivatedRoute);
 
   /** Input */
-  config = input.required<ISortOption[]>();
+  config = input.required<MenuItem[]>();
   selectedValue = input<string>();
-  selectedOption = computed(() => this.config().find((conf: ISortOption) => conf.value === this.selectedValue()));
+  selectedOption = computed(() => this.config().find((conf: MenuItem) => conf.value === this.selectedValue()));
   options = computed(() => this.sortOptions());
 
   /** Change event */
   onChange = output<string>();
 
   /** Return the sort options from config. */
-  sortOptions(): ISortOption[] {
+  sortOptions(): MenuItem[] {
     return (this.config())
       ? this.config()
-          .map((option: ISortOption) => {
+          .map((option: MenuItem) => {
             option.label = this.translateService.instant(option.label);
+            option.command = (event: MenuItemCommandEvent) => this.onChange.emit(event.item.value);
             return option;
           })
-          .sort((a: ISortOption, b: ISortOption) => a.label.localeCompare(b.label))
+          .sort((a: MenuItem, b: MenuItem) => a.label.localeCompare(b.label))
       : [];
   }
 
-  // /**
-  //  * Return the current sort object.
-  //  * @returns SortOption
-  //  */
-  // get currentSortOption(): ISortOption {
-  //   const sortParam = this.activatedRoute.snapshot?.queryParamMap?.get(this.sortParamName());
-  //   return (sortParam && this.config().sortOptions)
-  //     ? this.config().sortOptions.find((item: ISortOption) => item.value === sortParam)
-  //     : null;
-  // }
-
-  /**
-   * Change sorting with select a new value in dropdown menu
-   * @param dropdownEvent - DropdownChangeEvent
-   */
-  changeSorting(dropdownEvent: DropdownChangeEvent): void {
-    this.onChange.emit(dropdownEvent.value);
-  }
 }
diff --git a/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts b/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts
index 4c0cba49..a15a31f0 100644
--- a/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts
+++ b/projects/rero/ng-core/src/lib/record/search/record-search-page.component.ts
@@ -17,11 +17,11 @@
 import { Component, inject, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { FormlyFieldConfig } from '@ngx-formly/core';
+import { MenuItem } from 'primeng/api';
 import { combineLatest, Subscription } from 'rxjs';
 import { ActionStatus } from '../action-status';
 import { JSONSchema7 } from '../editor/editor.component';
 import { RecordUiService } from '../record-ui.service';
-import { ISortOption } from './menu-sort/menu-sort.component';
 import { RecordSearchService } from './record-search.service';
 
 @Component({
@@ -241,7 +241,7 @@ export class RecordSearchPageComponent implements OnInit, OnDestroy {
     }
 
     const defaultSortValue = this.q ? 'defaultQuery' : 'defaultNoQuery';
-    config.sortOptions.forEach((option: ISortOption) => {
+    config.sortOptions.forEach((option: MenuItem) => {
       if (option[defaultSortValue] === true) {
         this.sort = option.value;
       }
diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.html b/projects/rero/ng-core/src/lib/record/search/record-search.component.html
index 61c23d0c..53da9d3e 100644
--- a/projects/rero/ng-core/src/lib/record/search/record-search.component.html
+++ b/projects/rero/ng-core/src/lib/record/search/record-search.component.html
@@ -88,7 +88,7 @@ <h5>{{ availableTypes[0].label | translate }}</h5>
     />
     <ng-content select="[top-search-result]"></ng-content>
     @if ((aggregations && aggregations.length) || searchFields.length > 0 || searchFilters.length > 0) {
-    <div class="col-2">
+    <div class="md:col-5 lg:col-3 col-12">
       @if (searchFields.length > 0 && q) {
       <div class="mb-3">
         <span class="mr-1" translate>Search in</span>
@@ -126,7 +126,7 @@ <h5>{{ availableTypes[0].label | translate }}</h5>
       } }
     </div>
     }
-    <div id="recordlist" class="col-10">
+    <div id="recordlist" class="md:col-7 lg:col-9 col-12">
       @if (showEmptySearchMessage) {
       <p-messages
         [value]="[{ severity: 'info', detail: 'Enter a query to get results.' | translate }]"
@@ -135,7 +135,7 @@ <h5>{{ availableTypes[0].label | translate }}</h5>
       />
       }
       <ng-content select="[top-result]"/>
-      <p-dataView [value]="records">
+      <p-dataView [value]="records" [emptyMessage]="' '">
         <ng-template pTemplate="list" let-records>
           <ul class="p-0 m-0">
             @for (record of records; track record ; let first = $first) {
diff --git a/projects/rero/ng-core/src/lib/record/search/record-search.component.ts b/projects/rero/ng-core/src/lib/record/search/record-search.component.ts
index 0fcec5fa..e5e2c78e 100644
--- a/projects/rero/ng-core/src/lib/record/search/record-search.component.ts
+++ b/projects/rero/ng-core/src/lib/record/search/record-search.component.ts
@@ -47,7 +47,7 @@ import { ChangeEvent } from './paginator/paginator.component';
 import { TabViewChangeEvent } from 'primeng/tabview';
 import { IChecked } from './search-filters/search-filters.component';
 import { DropdownChangeEvent } from 'primeng/dropdown';
-import { ISortOption } from './menu-sort/menu-sort.component';
+import { MenuItem } from 'primeng/api';
 
 export interface SearchParams {
   currentType: string;
@@ -295,10 +295,10 @@ export class RecordSearchComponent implements OnInit, OnChanges, OnDestroy {
         });
   }
 
-  get selectedSortValue(): ISortOption {
+  get selectedSortValue(): MenuItem {
     const sortParam = this.activatedRoute.snapshot?.queryParamMap?.get('sort');
     return (sortParam && this.config.sortOptions)
-      ? this.config.sortOptions.find((item: ISortOption) => item.value === sortParam)?.value
+      ? this.config.sortOptions.find((item: MenuItem) => item.value === sortParam)?.value
       : null;
   }
 
diff --git a/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.html b/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.html
index 2f492f46..436cb0d5 100644
--- a/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.html
+++ b/projects/rero/ng-core/src/lib/record/search/result/record-search-result.component.html
@@ -16,10 +16,10 @@
   along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -->
 <div class="flex align-items-start">
-  <div class="flex flex-auto">
+  <div class="flex-grow-1">
     <ng-container #item></ng-container>
   </div>
-  <div class="flex flex-auto justify-content-end ml-2">
+  <div class="flex flex-none gap-2 justify-content-end ml-2">
     @if (adminMode.can) {
         <!-- use button -->
         @if (useStatus && useStatus.can && useStatus.url) {
@@ -45,17 +45,13 @@
 
         <!-- delete button -->
         @if (deleteStatus) {
-          <span class="ml-2">
-            @if (deleteStatus) {
-              <p-button
-                [outlined]="true"
-                severity="danger"
-                [ariaLabel]="'Delete' | translate"
-                (onClick)="deleteRecord(record.id, deleteStatus?.type)"
-                icon="fa fa-trash"
-              />
-            }
-          </span>
+          <p-button
+            [outlined]="true"
+            severity="danger"
+            [ariaLabel]="'Delete' | translate"
+            (onClick)="deleteRecord(record.id, deleteStatus?.type)"
+            icon="fa fa-trash"
+          />
         }
     }
   </div>