From 179cc8643e8b8c715ef27b9480978d7e1f7d577b Mon Sep 17 00:00:00 2001
From: Chris Topaloudis <topless@gmail.com>
Date: Fri, 11 Oct 2019 13:29:52 +0200
Subject: [PATCH] backoffice: tables

* removed resultsList from PatronsSearch, DocumentRequestsSearch, EItemsSearch, ItemSearch, SeriesSearch, LoansSearch
* cleaned extra width for ID column
* fixed titles for documents
* adjustable header according to headerActions
* overview tables
* table content adjustment
* closes #219, #337
---
 .../components/ResultsTable/ResultsTable.js   |  13 +-
 .../ResultsTable/ResultsTableBody.js          |   8 +-
 .../ResultsTable/ResultsTableHeader.js        |  21 +-
 .../__snapshots__/ResultsTable.js.snap        |  91 +-
 .../components/ResultsTable/formatters.js     |  25 +-
 .../DocumentItems/__tests__/DocumentItems.js  | 113 +--
 .../__snapshots__/DocumentItems.js.snap       | 323 ++++----
 .../DocumentMetadata/DocumentMetadata.js      |   4 +-
 .../__snapshots__/DocumentMetadata.js.snap    |   3 +-
 .../DocumentPendingLoans.js                   |   2 +-
 .../__tests__/DocumentPendingLoans.js         | 113 +--
 .../DocumentPendingLoans.js.snap              | 233 +++---
 .../DocumentRequestsSearch.js                 |  44 +-
 ...sultsList.js => DocumentRequestsSearch.js} |  64 +-
 .../DocumentRequestsSearch.js.snap            | 779 ++++++++++++++++++
 .../__snapshots__/ResultsList.js.snap         | 730 ----------------
 .../components/ResultsList/ResultsList.js     |  62 --
 .../components/ResultsList/index.js           |   1 -
 .../components/index.js                       |   1 -
 .../DocumentsSearch/DocumentsSearch.js        |  42 +-
 .../{ResultsList.js => DocumentsSearch.js}    |  63 +-
 .../__snapshots__/DocumentsSearch.js.snap     | 438 ++++++++++
 .../__snapshots__/ResultsList.js.snap         | 646 ---------------
 .../components/ResultsList/ResultsList.js     |  57 --
 .../components/ResultsList/index.js           |   1 -
 .../DocumentsSearch/components/index.js       |   1 -
 .../EItem/EItemSearch/EItemSearch.js          |  45 +-
 .../{ResultsList.js => EItemSearch.js}        |  62 +-
 .../__snapshots__/EItemSearch.js.snap         | 724 ++++++++++++++++
 .../__snapshots__/ResultsList.js.snap         | 638 --------------
 .../components/ResultsList/ResultsList.js     |  56 --
 .../components/ResultsList/index.js           |   1 -
 .../EItem/EItemSearch/components/index.js     |   1 -
 .../pages/backoffice/Home/Home.js             |   6 +-
 .../lists/IdleLoansList/IdleLoansList.js      |   6 +-
 .../IdleLoansList/__tests__/IdleLoansList.js  |  83 +-
 .../__snapshots__/IdleLoansList.js.snap       | 173 ++--
 .../OverbookedDocumentsList.js                |   3 +-
 .../__tests__/OverbookedDocumentsList.js      |  68 +-
 .../OverbookedDocumentsList.js.snap           | 205 ++---
 .../OverdueLoansList/OverdueLoansList.js      |   4 +-
 .../__tests__/OverdueLoansList.js             |  79 +-
 .../__snapshots__/OverdueLoansList.js.snap    | 283 ++++---
 .../PendingOverdueDocumentsList.js            |   3 +-
 .../PendingOverdueDocumentsList.js.snap       |  83 +-
 .../__tests__/RenewedLoansList.js             |  68 +-
 .../__snapshots__/RenewedLoansList.js.snap    | 133 +--
 .../__snapshots__/DocumentsCard.js.snap       |   8 +-
 .../__tests__/__snapshots__/LoansCard.js.snap |   8 +-
 .../ItemPastLoans/__tests__/ItemPastLoans.js  |  50 +-
 .../__snapshots__/ItemPastLoans.js.snap       | 157 ++--
 .../backoffice/ItemsSearch/ItemsSearch.js     |  49 +-
 .../{ResultsList.js => ItemsSearch.js}        |  26 +-
 .../__snapshots__/ItemsSearch.js.snap         | 655 +++++++++++++++
 .../__snapshots__/ResultsList.js.snap         | 766 -----------------
 .../components/ResultsList/ResultsList.js     |  56 --
 .../components/ResultsList/index.js           |   1 -
 .../ItemsSearch/components/index.js           |   1 -
 .../backoffice/LoansSearch/LoansSearch.js     |  49 +-
 .../{ResultsList.js => LoansSearch.js}        |  62 +-
 .../__snapshots__/LoansSearch.js.snap         | 717 ++++++++++++++++
 .../__snapshots__/ResultsList.js.snap         | 672 ---------------
 .../components/ResultsList/ResultsList.js     |  45 -
 .../components/ResultsList/index.js           |   1 -
 .../LoansSearch/components/index.js           |   1 -
 .../InternalLocationList.js                   |  10 +-
 .../components/ItemsSearch/ItemsSearch.js     |   2 +-
 .../ItemsSearch/__tests__/ItemsSearch.js      |   3 +
 .../__snapshots__/ItemsSearch.js.snap         |  27 +-
 .../ItemsResultsList.js}                      |   4 +-
 .../components/ItemsResultsList/index.js      |   1 +
 .../components/ResultsList/index.js           |   1 -
 .../ItemsSearch/components/index.js           |   2 +-
 .../__tests__/PatronCurrentLoans.js           | 102 +--
 .../__snapshots__/PatronCurrentLoans.js.snap  | 225 ++---
 .../PatronDocumentRequests.js.snap            | 101 +--
 .../__tests__/PatronPendingLoans.js           | 102 +--
 .../__snapshots__/PatronPendingLoans.js.snap  | 205 ++---
 .../backoffice/PatronsSearch/PatronsSearch.js |  28 +-
 .../{ResultsList.js => PatronsSearch.js}      |  25 +-
 .../__snapshots__/PatronsSearch.js.snap       | 376 +++++++++
 .../__snapshots__/ResultsList.js.snap         | 421 ----------
 .../components/ResultsList/ResultsList.js     |  41 -
 .../components/ResultsList/index.js           |   1 -
 .../PatronsSearch/components/index.js         |   1 -
 .../Series/SeriesSearch/SeriesSearch.js       |  42 +-
 .../{ResultsList.js => SeriesSearch.js}       |  64 +-
 .../__snapshots__/ResultsList.js.snap         | 678 ---------------
 .../__snapshots__/SeriesSearch.js.snap        | 473 +++++++++++
 .../components/ResultsList/ResultsList.js     |  60 --
 .../components/ResultsList/index.js           |   1 -
 .../Series/SeriesSearch/components/index.js   |   1 -
 .../backoffice/components/Sidebar/Sidebar.js  |   2 +-
 .../buttons/SeeAllButton/SeeAllButton.js      |   2 +-
 .../DocumentMetadata/DocumentMetadata.js      |   4 +-
 .../components/DocumentConference.js          |   2 +-
 .../components/DocumentItem/DocumentItem.js   |  10 +-
 .../__snapshots__/DocumentItem.js.snap        |   4 +-
 .../__tests__/PatronPendingLoans.js           |  52 +-
 .../__snapshots__/PatronPendingLoans.js.snap  |  75 +-
 .../frontsite/components/Header/Header.js     |   2 +-
 tests/data/eitems.json                        |  10 +-
 tests/data/loans.json                         |  10 +-
 103 files changed, 6041 insertions(+), 7055 deletions(-)
 rename invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/{ResultsList.js => DocumentRequestsSearch.js} (61%)
 create mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/__snapshots__/DocumentRequestsSearch.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/__snapshots__/ResultsList.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/ResultsList/ResultsList.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/ResultsList/index.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/index.js
 rename invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/{ResultsList.js => DocumentsSearch.js} (58%)
 create mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/__snapshots__/DocumentsSearch.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/__snapshots__/ResultsList.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/ResultsList/ResultsList.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/ResultsList/index.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/index.js
 rename invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/{ResultsList.js => EItemSearch.js} (54%)
 create mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/__snapshots__/EItemSearch.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/__snapshots__/ResultsList.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/ResultsList/ResultsList.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/ResultsList/index.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/index.js
 rename invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/{ResultsList.js => ItemsSearch.js} (79%)
 create mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/__snapshots__/ItemsSearch.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/__snapshots__/ResultsList.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/ResultsList/ResultsList.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/ResultsList/index.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/index.js
 rename invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/{ResultsList.js => LoansSearch.js} (58%)
 create mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/__snapshots__/LoansSearch.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/__snapshots__/ResultsList.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/ResultsList/ResultsList.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/ResultsList/index.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/index.js
 rename invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/{ResultsList/ResultsList.js => ItemsResultsList/ItemsResultsList.js} (97%)
 create mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ItemsResultsList/index.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ResultsList/index.js
 rename invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/{ResultsList.js => PatronsSearch.js} (77%)
 create mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/__snapshots__/PatronsSearch.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/__snapshots__/ResultsList.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/ResultsList/ResultsList.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/ResultsList/index.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/index.js
 rename invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/{ResultsList.js => SeriesSearch.js} (60%)
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/__snapshots__/ResultsList.js.snap
 create mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/__snapshots__/SeriesSearch.js.snap
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/ResultsList/ResultsList.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/ResultsList/index.js
 delete mode 100644 invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/index.js

diff --git a/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTable.js b/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTable.js
index df8a7c6df..323813d14 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTable.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTable.js
@@ -23,14 +23,12 @@ export class ResultsTable extends Component {
     return (
       <Table
         striped
+        compact
+        selectable
         {...(singleLine ? { singleLine: true } : {})}
         {...(fixed ? { fixed: true } : {})}
-        selectable
       >
-        <ResultsTableHeader
-          columns={columns}
-          withRowAction={this.props.rowActionClickHandler ? true : false}
-        />
+        <ResultsTableHeader columns={columns} />
         <ResultsTableBody
           columns={columns}
           rows={showAllResults ? rows : rows.slice(0, showMaxRows)}
@@ -67,7 +65,10 @@ export class ResultsTable extends Component {
     return (
       <Grid>
         <Grid.Row>
-          <Grid.Column width={8} verticalAlign={'middle'}>
+          <Grid.Column
+            width={headerActionComponent ? 8 : 16}
+            verticalAlign="middle"
+          >
             {header}
           </Grid.Column>
           <Grid.Column width={8} textAlign={'right'}>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTableBody.js b/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTableBody.js
index 818ee4541..dee9de003 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTableBody.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTableBody.js
@@ -15,9 +15,8 @@ export default class ResultsTableBody extends Component {
     return rows.map(row => {
       const withRowAction = this.props.rowActionClickHandler ? (
         <Button
-          circular
           compact
-          icon="eye"
+          icon="info"
           onClick={() => {
             this.props.rowActionClickHandler(row);
           }}
@@ -42,9 +41,8 @@ export default class ResultsTableBody extends Component {
   };
 
   render() {
-    const { columns, rows, detailsURL } = this.props;
-
-    return <Table.Body>{this.renderRow(columns, rows, detailsURL)}</Table.Body>;
+    const { columns, rows } = this.props;
+    return <Table.Body>{this.renderRow(columns, rows)}</Table.Body>;
   }
 }
 
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTableHeader.js b/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTableHeader.js
index 576789f93..0301e1890 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTableHeader.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/ResultsTableHeader.js
@@ -3,26 +3,15 @@ import PropTypes from 'prop-types';
 import { Table } from 'semantic-ui-react';
 
 export default class ResultsTableHeader extends Component {
-  renderHeaderCell = cellName => {
-    if (cellName === 'ID') {
-      return (
-        <Table.HeaderCell width={2} key={cellName}>
-          {cellName}
-        </Table.HeaderCell>
-      );
-    } else {
-      return <Table.HeaderCell key={cellName}>{cellName}</Table.HeaderCell>;
-    }
-  };
-
   render() {
-    const { columns, withRowAction } = this.props;
-    const headerColumns = columns.map(column => this.renderHeaderCell(column));
+    const { columns } = this.props;
     return (
       <Table.Header>
         <Table.Row data-test="header">
-          <Table.HeaderCell width={withRowAction ? 2 : 1} collapsing />
-          {headerColumns}
+          <Table.HeaderCell />
+          {columns.map(col => (
+            <Table.HeaderCell key={col}>{col}</Table.HeaderCell>
+          ))}
         </Table.Row>
       </Table.Header>
     );
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/__tests__/__snapshots__/ResultsTable.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/__tests__/__snapshots__/ResultsTable.js.snap
index 33ba665f2..304934c5a 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/__tests__/__snapshots__/ResultsTable.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/__tests__/__snapshots__/ResultsTable.js.snap
@@ -6,7 +6,7 @@ exports[`ResultsTable tests should load the ResultTable component 1`] = `
     <GridRow>
       <GridColumn
         verticalAlign="middle"
-        width={8}
+        width={16}
       />
       <GridColumn
         textAlign="right"
@@ -71,10 +71,10 @@ exports[`ResultsTable tests should not render the see all button when showing on
             >
               <GridColumn
                 verticalAlign="middle"
-                width={8}
+                width={16}
               >
                 <div
-                  className="middle aligned eight wide column"
+                  className="middle aligned sixteen wide column"
                 />
               </GridColumn>
               <GridColumn
@@ -91,11 +91,12 @@ exports[`ResultsTable tests should not render the see all button when showing on
       </Grid>
       <Table
         as="table"
+        compact={true}
         selectable={true}
         striped={true}
       >
         <table
-          className="ui selectable striped table"
+          className="ui selectable striped compact table"
         >
           <ResultsTableHeader
             columns={
@@ -107,7 +108,7 @@ exports[`ResultsTable tests should not render the see all button when showing on
                 "end_date",
               ]
             }
-            withRowAction={true}
+            withRowAction={false}
           >
             <TableHeader
               as="thead"
@@ -126,32 +127,26 @@ exports[`ResultsTable tests should not render the see all button when showing on
                   >
                     <TableHeaderCell
                       as="th"
-                      collapsing={true}
-                      width={2}
                     >
                       <TableCell
                         as="th"
                         className=""
-                        collapsing={true}
-                        width={2}
                       >
                         <th
-                          className="collapsing two wide"
+                          className=""
                         />
                       </TableCell>
                     </TableHeaderCell>
                     <TableHeaderCell
                       as="th"
                       key="ID"
-                      width={2}
                     >
                       <TableCell
                         as="th"
                         className=""
-                        width={2}
                       >
                         <th
-                          className="two wide"
+                          className=""
                         >
                           ID
                         </th>
@@ -277,22 +272,21 @@ exports[`ResultsTable tests should not render the see all button when showing on
                       >
                         <Button
                           as="button"
-                          circular={true}
                           compact={true}
                           data-test="btn-view-details-loan1"
-                          icon="eye"
+                          icon="info"
                           onClick={[Function]}
                         >
                           <Ref
                             innerRef={
                               Object {
                                 "current": <button
-                                  class="ui circular compact icon button"
+                                  class="ui compact icon button"
                                   data-test="btn-view-details-loan1"
                                 >
                                   <i
                                     aria-hidden="true"
-                                    class="eye icon"
+                                    class="info icon"
                                   />
                                 </button>,
                               }
@@ -302,29 +296,29 @@ exports[`ResultsTable tests should not render the see all button when showing on
                               innerRef={
                                 Object {
                                   "current": <button
-                                    class="ui circular compact icon button"
+                                    class="ui compact icon button"
                                     data-test="btn-view-details-loan1"
                                   >
                                     <i
                                       aria-hidden="true"
-                                      class="eye icon"
+                                      class="info icon"
                                     />
                                   </button>,
                                 }
                               }
                             >
                               <button
-                                className="ui circular compact icon button"
+                                className="ui compact icon button"
                                 data-test="btn-view-details-loan1"
                                 onClick={[Function]}
                               >
                                 <Icon
                                   as="i"
-                                  name="eye"
+                                  name="info"
                                 >
                                   <i
                                     aria-hidden="true"
-                                    className="eye icon"
+                                    className="info icon"
                                     onClick={[Function]}
                                   />
                                 </Icon>
@@ -415,22 +409,21 @@ exports[`ResultsTable tests should not render the see all button when showing on
                       >
                         <Button
                           as="button"
-                          circular={true}
                           compact={true}
                           data-test="btn-view-details-loan2"
-                          icon="eye"
+                          icon="info"
                           onClick={[Function]}
                         >
                           <Ref
                             innerRef={
                               Object {
                                 "current": <button
-                                  class="ui circular compact icon button"
+                                  class="ui compact icon button"
                                   data-test="btn-view-details-loan2"
                                 >
                                   <i
                                     aria-hidden="true"
-                                    class="eye icon"
+                                    class="info icon"
                                   />
                                 </button>,
                               }
@@ -440,29 +433,29 @@ exports[`ResultsTable tests should not render the see all button when showing on
                               innerRef={
                                 Object {
                                   "current": <button
-                                    class="ui circular compact icon button"
+                                    class="ui compact icon button"
                                     data-test="btn-view-details-loan2"
                                   >
                                     <i
                                       aria-hidden="true"
-                                      class="eye icon"
+                                      class="info icon"
                                     />
                                   </button>,
                                 }
                               }
                             >
                               <button
-                                className="ui circular compact icon button"
+                                className="ui compact icon button"
                                 data-test="btn-view-details-loan2"
                                 onClick={[Function]}
                               >
                                 <Icon
                                   as="i"
-                                  name="eye"
+                                  name="info"
                                 >
                                   <i
                                     aria-hidden="true"
-                                    className="eye icon"
+                                    className="info icon"
                                     onClick={[Function]}
                                   />
                                 </Icon>
@@ -611,10 +604,10 @@ exports[`ResultsTable tests should render the see all button when showing only a
             >
               <GridColumn
                 verticalAlign="middle"
-                width={8}
+                width={16}
               >
                 <div
-                  className="middle aligned eight wide column"
+                  className="middle aligned sixteen wide column"
                 />
               </GridColumn>
               <GridColumn
@@ -631,11 +624,12 @@ exports[`ResultsTable tests should render the see all button when showing only a
       </Grid>
       <Table
         as="table"
+        compact={true}
         selectable={true}
         striped={true}
       >
         <table
-          className="ui selectable striped table"
+          className="ui selectable striped compact table"
         >
           <ResultsTableHeader
             columns={
@@ -648,7 +642,7 @@ exports[`ResultsTable tests should render the see all button when showing only a
                 "end_date",
               ]
             }
-            withRowAction={true}
+            withRowAction={false}
           >
             <TableHeader
               as="thead"
@@ -667,17 +661,13 @@ exports[`ResultsTable tests should render the see all button when showing only a
                   >
                     <TableHeaderCell
                       as="th"
-                      collapsing={true}
-                      width={2}
                     >
                       <TableCell
                         as="th"
                         className=""
-                        collapsing={true}
-                        width={2}
                       >
                         <th
-                          className="collapsing two wide"
+                          className=""
                         />
                       </TableCell>
                     </TableHeaderCell>
@@ -699,15 +689,13 @@ exports[`ResultsTable tests should render the see all button when showing only a
                     <TableHeaderCell
                       as="th"
                       key="ID"
-                      width={2}
                     >
                       <TableCell
                         as="th"
                         className=""
-                        width={2}
                       >
                         <th
-                          className="two wide"
+                          className=""
                         >
                           ID
                         </th>
@@ -828,22 +816,21 @@ exports[`ResultsTable tests should render the see all button when showing only a
                       >
                         <Button
                           as="button"
-                          circular={true}
                           compact={true}
                           data-test="btn-view-details-1"
-                          icon="eye"
+                          icon="info"
                           onClick={[Function]}
                         >
                           <Ref
                             innerRef={
                               Object {
                                 "current": <button
-                                  class="ui circular compact icon button"
+                                  class="ui compact icon button"
                                   data-test="btn-view-details-1"
                                 >
                                   <i
                                     aria-hidden="true"
-                                    class="eye icon"
+                                    class="info icon"
                                   />
                                 </button>,
                               }
@@ -853,29 +840,29 @@ exports[`ResultsTable tests should render the see all button when showing only a
                               innerRef={
                                 Object {
                                   "current": <button
-                                    class="ui circular compact icon button"
+                                    class="ui compact icon button"
                                     data-test="btn-view-details-1"
                                   >
                                     <i
                                       aria-hidden="true"
-                                      class="eye icon"
+                                      class="info icon"
                                     />
                                   </button>,
                                 }
                               }
                             >
                               <button
-                                className="ui circular compact icon button"
+                                className="ui compact icon button"
                                 data-test="btn-view-details-1"
                                 onClick={[Function]}
                               >
                                 <Icon
                                   as="i"
-                                  name="eye"
+                                  name="info"
                                 >
                                   <i
                                     aria-hidden="true"
-                                    className="eye icon"
+                                    className="info icon"
                                     onClick={[Function]}
                                   />
                                 </Icon>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/formatters.js b/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/formatters.js
index 6d86aaf10..d4a06ecfc 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/formatters.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/common/components/ResultsTable/formatters.js
@@ -20,19 +20,29 @@ function formatLoanToTableView(loan, actions = null) {
   const startDate = loan.metadata.start_date
     ? toShortDate(fromISO(loan.metadata.start_date))
     : null;
-  const endDate = loan.metadata.start_date
+  const endDate = loan.metadata.end_date
     ? toShortDate(fromISO(loan.metadata.end_date))
     : null;
+  const requested = loan.metadata.request_start_date
+    ? fromISO(loan.metadata.request_start_date).toRelativeCalendar()
+    : null;
+  const expired = loan.metadata.end_date
+    ? fromISO(loan.metadata.end_date).toRelativeCalendar()
+    : null;
+
   return {
     ID: loan.pid ? loan.pid : loan.id,
     'Patron ID': loan.metadata.patron_pid,
     'Document ID': loan.metadata.document_pid,
+    Patron: loan.metadata.patron.email,
     State: loan.metadata.state,
     'Item barcode': loan.metadata.item ? loan.metadata.item.barcode : null,
     'Request start date': requestStartDate,
     'Request end date': requestEndDate,
     'Start date': startDate,
     'End date': endDate,
+    Requested: requested,
+    Expired: expired,
     Renewals: loan.metadata.extension_count,
     Actions: actions,
   };
@@ -45,12 +55,11 @@ function formatDocumentToTableView(document, volume = null) {
     Updated: toShortDate(fromISO(document.updated)),
   };
   if (!isEmpty(document.metadata)) {
-    serialized['Title'] = document.metadata.title.title;
+    serialized['Title'] = document.metadata.title;
     serialized['Authors'] = document.metadata.authors
       .map(author => author.full_name)
       .join(',');
     if (document.metadata.circulation) {
-      serialized['Requests'] = document.metadata.circulation.pending_loans;
       serialized['Available Items'] =
         document.metadata.circulation.has_items_for_loan;
       serialized['Overdue Loans'] = document.metadata.circulation.overdue_loans;
@@ -97,12 +106,13 @@ function formatMostLoanedDocumentToTableView(document, fromDate, toDate) {
 function formatItemToTableView(item) {
   return {
     ID: item.pid ? item.pid : item.id,
+    'Document ID': item.metadata.document_pid,
     Created: toShortDate(fromISO(item.created)),
     Updated: toShortDate(fromISO(item.updated)),
     Barcode: item.metadata.barcode,
-    'Document ID': item.metadata.document_pid,
-    Status: item.metadata.status,
+    Title: item.metadata.document.title,
     Medium: item.metadata.medium,
+    Status: item.metadata.status,
     'Circulation status': item.metadata.circulation
       ? item.metadata.circulation.state
       : null,
@@ -123,6 +133,7 @@ function formatEItemToTableView(eitem) {
     'Open access': eitem.metadata.open_access ? 'Yes' : 'No',
     Created: toShortDate(fromISO(eitem.created)),
     Updated: toShortDate(fromISO(eitem.updated)),
+    Title: eitem.metadata.document.title,
     Description: truncate(eitem.metadata.description, {
       length: TRUNCATE_LENGTH,
     }),
@@ -153,11 +164,11 @@ function formatInternalLocationToTableView(internalLoc) {
   };
   if (!isEmpty(internalLoc.metadata)) {
     assign(entry, {
+      'Location ID': internalLoc.metadata.location.pid,
       Name: internalLoc.metadata.name,
       'Physical location': internalLoc.metadata.physical_location,
+      Location: internalLoc.metadata.location.name,
       'Location e-mail': internalLoc.metadata.location.email,
-      'Location name': internalLoc.metadata.location.name,
-      'Location id': internalLoc.metadata.location.pid,
     });
   }
   return entry;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentItems/__tests__/DocumentItems.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentItems/__tests__/DocumentItems.js
index 98d8d04b2..03f91d806 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentItems/__tests__/DocumentItems.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentItems/__tests__/DocumentItems.js
@@ -2,12 +2,34 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { BackOfficeRoutes } from '../../../../../../routes/urls';
 import DocumentItems from '../DocumentItems';
-import { Settings } from 'luxon';
-import { fromISO } from '../../../../../../common/api/date';
 import history from '../../../../../../history';
-
-Settings.defaultZoneName = 'utc';
-const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+import testData from '../../../../../../../../../../tests/data/items.json';
+
+const data = {
+  hits: [
+    {
+      ID: '1',
+      pid: 'item1',
+      metadata: {
+        ...testData[0],
+        document: { title: 'Document 1 title' },
+        internal_location: { location: { name: 'Somewhere' } },
+        shelf: 'Shelf 1',
+      },
+    },
+    {
+      id: '2',
+      pid: 'item2',
+      metadata: {
+        ...testData[1],
+        document: { title: 'Document 2 title' },
+        internal_location: { location: { name: 'Somewhere Else' } },
+        shelf: 'Shelf 2',
+      },
+    },
+  ],
+  total: 2,
+};
 
 describe('DocumentItems tests', () => {
   let component;
@@ -64,38 +86,6 @@ describe('DocumentItems tests', () => {
   });
 
   it('should render item', () => {
-    const data = {
-      hits: [
-        {
-          ID: '1',
-          updated: stringDate,
-          created: stringDate,
-          pid: 'item1',
-          metadata: {
-            document_pid: 'doc1',
-            pid: 'item1',
-            internal_location: { location: { name: 'Somewhere' } },
-            barcode: '44444',
-            shelf: 'P',
-          },
-        },
-        {
-          id: '2',
-          updated: stringDate,
-          created: stringDate,
-          pid: 'item2',
-          metadata: {
-            document_pid: 'doc2',
-            pid: 'item2',
-            internal_location: { location: { name: 'Somewhere' } },
-            barcode: '44444',
-            shelf: 'P',
-          },
-        },
-      ],
-      total: 2,
-    };
-
     component = mount(
       <DocumentItems document={doc} data={data} fetchDocumentItems={() => {}} />
     );
@@ -117,36 +107,6 @@ describe('DocumentItems tests', () => {
   });
 
   it('should render the see all button when showing only a few items', () => {
-    const data = {
-      hits: [
-        {
-          id: '1',
-          updated: stringDate,
-          created: stringDate,
-          metadata: {
-            document_pid: 'doc1',
-            pid: 'item1',
-            internal_location: { location: { name: 'Somewhere' } },
-            barcode: '44444',
-            shelf: 'P',
-          },
-        },
-        {
-          id: '2',
-          updated: stringDate,
-          created: stringDate,
-          metadata: {
-            document_pid: 'doc2',
-            pid: 'item2',
-            internal_location: { location: { name: 'Somewhere' } },
-            barcode: '44444',
-            shelf: 'P',
-          },
-        },
-      ],
-      total: 2,
-    };
-
     component = mount(
       <DocumentItems
         document={doc}
@@ -166,25 +126,6 @@ describe('DocumentItems tests', () => {
   it('should go to items details when clicking on a item row', () => {
     const mockedHistoryPush = jest.fn();
     history.push = mockedHistoryPush;
-    const data = {
-      hits: [
-        {
-          ID: '1',
-          updated: stringDate,
-          created: stringDate,
-          pid: 'item1',
-          metadata: {
-            document_pid: 'doc1',
-            pid: 'item1',
-            internal_location: { location: { name: 'Somewhere' } },
-            shelf: 'P',
-            barcode: '44444',
-          },
-        },
-      ],
-      total: 2,
-    };
-
     component = mount(
       <DocumentItems
         document={doc}
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentItems/__tests__/__snapshots__/DocumentItems.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentItems/__tests__/__snapshots__/DocumentItems.js.snap
index f872fbbf4..1f9b78b1b 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentItems/__tests__/__snapshots__/DocumentItems.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentItems/__tests__/__snapshots__/DocumentItems.js.snap
@@ -37,37 +37,47 @@ exports[`DocumentItems tests should render item 1`] = `
       "hits": Array [
         Object {
           "ID": "1",
-          "created": "2018-01-01T10:05:00.000Z",
           "metadata": Object {
-            "barcode": "44444",
-            "document_pid": "doc1",
+            "barcode": "123456789-1",
+            "circulation_restriction": "NO_RESTRICTION",
+            "document": Object {
+              "title": "Document 1 title",
+            },
+            "document_pid": "docid-1",
             "internal_location": Object {
               "location": Object {
                 "name": "Somewhere",
               },
             },
-            "pid": "item1",
-            "shelf": "P",
+            "internal_location_pid": "ilocid-1",
+            "medium": "NOT_SPECIFIED",
+            "pid": "itemid-1",
+            "shelf": "Shelf 1",
+            "status": "MISSING",
           },
           "pid": "item1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": "2",
           "metadata": Object {
-            "barcode": "44444",
-            "document_pid": "doc2",
+            "barcode": "123456789-2",
+            "circulation_restriction": "NO_RESTRICTION",
+            "document": Object {
+              "title": "Document 2 title",
+            },
+            "document_pid": "docid-1",
             "internal_location": Object {
               "location": Object {
-                "name": "Somewhere",
+                "name": "Somewhere Else",
               },
             },
-            "pid": "item2",
-            "shelf": "P",
+            "internal_location_pid": "ilocid-2",
+            "medium": "NOT_SPECIFIED",
+            "pid": "itemid-2",
+            "shelf": "Shelf 2",
+            "status": "CAN_CIRCULATE",
           },
           "pid": "item2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -98,20 +108,20 @@ exports[`DocumentItems tests should render item 1`] = `
         rows={
           Array [
             Object {
-              "Barcode": "44444",
+              "Barcode": "123456789-1",
               "ID": "item1",
               "Location": "Somewhere",
-              "Medium": undefined,
-              "Shelf": "P",
-              "Status": undefined,
+              "Medium": "NOT_SPECIFIED",
+              "Shelf": "Shelf 1",
+              "Status": "MISSING",
             },
             Object {
-              "Barcode": "44444",
+              "Barcode": "123456789-2",
               "ID": "item2",
-              "Location": "Somewhere",
-              "Medium": undefined,
-              "Shelf": "P",
-              "Status": undefined,
+              "Location": "Somewhere Else",
+              "Medium": "NOT_SPECIFIED",
+              "Shelf": "Shelf 2",
+              "Status": "CAN_CIRCULATE",
             },
           ]
         }
@@ -142,10 +152,10 @@ exports[`DocumentItems tests should render item 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -181,11 +191,12 @@ exports[`DocumentItems tests should render item 1`] = `
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -198,7 +209,7 @@ exports[`DocumentItems tests should render item 1`] = `
                       "Shelf",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -217,32 +228,26 @@ exports[`DocumentItems tests should render item 1`] = `
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -343,20 +348,20 @@ exports[`DocumentItems tests should render item 1`] = `
                   rows={
                     Array [
                       Object {
-                        "Barcode": "44444",
+                        "Barcode": "123456789-1",
                         "ID": "item1",
                         "Location": "Somewhere",
-                        "Medium": undefined,
-                        "Shelf": "P",
-                        "Status": undefined,
+                        "Medium": "NOT_SPECIFIED",
+                        "Shelf": "Shelf 1",
+                        "Status": "MISSING",
                       },
                       Object {
-                        "Barcode": "44444",
+                        "Barcode": "123456789-2",
                         "ID": "item2",
-                        "Location": "Somewhere",
-                        "Medium": undefined,
-                        "Shelf": "P",
-                        "Status": undefined,
+                        "Location": "Somewhere Else",
+                        "Medium": "NOT_SPECIFIED",
+                        "Shelf": "Shelf 2",
+                        "Status": "CAN_CIRCULATE",
                       },
                     ]
                   }
@@ -386,22 +391,21 @@ exports[`DocumentItems tests should render item 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-item1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-item1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -411,29 +415,29 @@ exports[`DocumentItems tests should render item 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-item1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-item1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -464,7 +468,7 @@ exports[`DocumentItems tests should render item 1`] = `
                               className=""
                               data-test="Barcode-item1"
                             >
-                              44444
+                              123456789-1
                             </td>
                           </TableCell>
                           <TableCell
@@ -476,7 +480,7 @@ exports[`DocumentItems tests should render item 1`] = `
                               className=""
                               data-test="Status-item1"
                             >
-                              -
+                              MISSING
                             </td>
                           </TableCell>
                           <TableCell
@@ -488,7 +492,7 @@ exports[`DocumentItems tests should render item 1`] = `
                               className=""
                               data-test="Medium-item1"
                             >
-                              -
+                              NOT_SPECIFIED
                             </td>
                           </TableCell>
                           <TableCell
@@ -512,7 +516,7 @@ exports[`DocumentItems tests should render item 1`] = `
                               className=""
                               data-test="Shelf-item1"
                             >
-                              P
+                              Shelf 1
                             </td>
                           </TableCell>
                         </tr>
@@ -536,22 +540,21 @@ exports[`DocumentItems tests should render item 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-item2"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-item2"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -561,29 +564,29 @@ exports[`DocumentItems tests should render item 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-item2"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-item2"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -614,7 +617,7 @@ exports[`DocumentItems tests should render item 1`] = `
                               className=""
                               data-test="Barcode-item2"
                             >
-                              44444
+                              123456789-2
                             </td>
                           </TableCell>
                           <TableCell
@@ -626,7 +629,7 @@ exports[`DocumentItems tests should render item 1`] = `
                               className=""
                               data-test="Status-item2"
                             >
-                              -
+                              CAN_CIRCULATE
                             </td>
                           </TableCell>
                           <TableCell
@@ -638,7 +641,7 @@ exports[`DocumentItems tests should render item 1`] = `
                               className=""
                               data-test="Medium-item2"
                             >
-                              -
+                              NOT_SPECIFIED
                             </td>
                           </TableCell>
                           <TableCell
@@ -650,7 +653,7 @@ exports[`DocumentItems tests should render item 1`] = `
                               className=""
                               data-test="Location-item2"
                             >
-                              Somewhere
+                              Somewhere Else
                             </td>
                           </TableCell>
                           <TableCell
@@ -662,7 +665,7 @@ exports[`DocumentItems tests should render item 1`] = `
                               className=""
                               data-test="Shelf-item2"
                             >
-                              P
+                              Shelf 2
                             </td>
                           </TableCell>
                         </tr>
@@ -753,10 +756,10 @@ exports[`DocumentItems tests should render show a message with no items 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -816,36 +819,48 @@ exports[`DocumentItems tests should render the see all button when showing only
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
-          "id": "1",
+          "ID": "1",
           "metadata": Object {
-            "barcode": "44444",
-            "document_pid": "doc1",
+            "barcode": "123456789-1",
+            "circulation_restriction": "NO_RESTRICTION",
+            "document": Object {
+              "title": "Document 1 title",
+            },
+            "document_pid": "docid-1",
             "internal_location": Object {
               "location": Object {
                 "name": "Somewhere",
               },
             },
-            "pid": "item1",
-            "shelf": "P",
+            "internal_location_pid": "ilocid-1",
+            "medium": "NOT_SPECIFIED",
+            "pid": "itemid-1",
+            "shelf": "Shelf 1",
+            "status": "MISSING",
           },
-          "updated": "2018-01-01T10:05:00.000Z",
+          "pid": "item1",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": "2",
           "metadata": Object {
-            "barcode": "44444",
-            "document_pid": "doc2",
+            "barcode": "123456789-2",
+            "circulation_restriction": "NO_RESTRICTION",
+            "document": Object {
+              "title": "Document 2 title",
+            },
+            "document_pid": "docid-1",
             "internal_location": Object {
               "location": Object {
-                "name": "Somewhere",
+                "name": "Somewhere Else",
               },
             },
-            "pid": "item2",
-            "shelf": "P",
+            "internal_location_pid": "ilocid-2",
+            "medium": "NOT_SPECIFIED",
+            "pid": "itemid-2",
+            "shelf": "Shelf 2",
+            "status": "CAN_CIRCULATE",
           },
-          "updated": "2018-01-01T10:05:00.000Z",
+          "pid": "item2",
         },
       ],
       "total": 2,
@@ -876,20 +891,20 @@ exports[`DocumentItems tests should render the see all button when showing only
         rows={
           Array [
             Object {
-              "Barcode": "44444",
-              "ID": "1",
+              "Barcode": "123456789-1",
+              "ID": "item1",
               "Location": "Somewhere",
-              "Medium": undefined,
-              "Shelf": "P",
-              "Status": undefined,
+              "Medium": "NOT_SPECIFIED",
+              "Shelf": "Shelf 1",
+              "Status": "MISSING",
             },
             Object {
-              "Barcode": "44444",
-              "ID": "2",
-              "Location": "Somewhere",
-              "Medium": undefined,
-              "Shelf": "P",
-              "Status": undefined,
+              "Barcode": "123456789-2",
+              "ID": "item2",
+              "Location": "Somewhere Else",
+              "Medium": "NOT_SPECIFIED",
+              "Shelf": "Shelf 2",
+              "Status": "CAN_CIRCULATE",
             },
           ]
         }
@@ -920,10 +935,10 @@ exports[`DocumentItems tests should render the see all button when showing only
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -959,11 +974,12 @@ exports[`DocumentItems tests should render the see all button when showing only
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -976,7 +992,7 @@ exports[`DocumentItems tests should render the see all button when showing only
                       "Shelf",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -995,32 +1011,26 @@ exports[`DocumentItems tests should render the see all button when showing only
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -1121,12 +1131,12 @@ exports[`DocumentItems tests should render the see all button when showing only
                   rows={
                     Array [
                       Object {
-                        "Barcode": "44444",
-                        "ID": "1",
+                        "Barcode": "123456789-1",
+                        "ID": "item1",
                         "Location": "Somewhere",
-                        "Medium": undefined,
-                        "Shelf": "P",
-                        "Status": undefined,
+                        "Medium": "NOT_SPECIFIED",
+                        "Shelf": "Shelf 1",
+                        "Status": "MISSING",
                       },
                     ]
                   }
@@ -1140,12 +1150,12 @@ exports[`DocumentItems tests should render the see all button when showing only
                       <TableRow
                         as="tr"
                         cellAs="td"
-                        data-test="1"
-                        key="1"
+                        data-test="item1"
+                        key="item1"
                       >
                         <tr
                           className=""
-                          data-test="1"
+                          data-test="item1"
                         >
                           <TableCell
                             as="td"
@@ -1156,22 +1166,21 @@ exports[`DocumentItems tests should render the see all button when showing only
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
-                                data-test="btn-view-details-1"
-                                icon="eye"
+                                data-test="btn-view-details-item1"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
-                                        data-test="btn-view-details-1"
+                                        class="ui compact icon button"
+                                        data-test="btn-view-details-item1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -1181,29 +1190,29 @@ exports[`DocumentItems tests should render the see all button when showing only
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
-                                          data-test="btn-view-details-1"
+                                          class="ui compact icon button"
+                                          data-test="btn-view-details-item1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
-                                      data-test="btn-view-details-1"
+                                      className="ui compact icon button"
+                                      data-test="btn-view-details-item1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -1215,74 +1224,74 @@ exports[`DocumentItems tests should render the see all button when showing only
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="ID-1"
-                            key="0-1"
+                            data-test="ID-item1"
+                            key="0-item1"
                           >
                             <td
                               className=""
-                              data-test="ID-1"
+                              data-test="ID-item1"
                             >
-                              1
+                              item1
                             </td>
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="Barcode-1"
-                            key="1-1"
+                            data-test="Barcode-item1"
+                            key="1-item1"
                           >
                             <td
                               className=""
-                              data-test="Barcode-1"
+                              data-test="Barcode-item1"
                             >
-                              44444
+                              123456789-1
                             </td>
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="Status-1"
-                            key="2-1"
+                            data-test="Status-item1"
+                            key="2-item1"
                           >
                             <td
                               className=""
-                              data-test="Status-1"
+                              data-test="Status-item1"
                             >
-                              -
+                              MISSING
                             </td>
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="Medium-1"
-                            key="3-1"
+                            data-test="Medium-item1"
+                            key="3-item1"
                           >
                             <td
                               className=""
-                              data-test="Medium-1"
+                              data-test="Medium-item1"
                             >
-                              -
+                              NOT_SPECIFIED
                             </td>
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="Location-1"
-                            key="4-1"
+                            data-test="Location-item1"
+                            key="4-item1"
                           >
                             <td
                               className=""
-                              data-test="Location-1"
+                              data-test="Location-item1"
                             >
                               Somewhere
                             </td>
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="Shelf-1"
-                            key="5-1"
+                            data-test="Shelf-item1"
+                            key="5-item1"
                           >
                             <td
                               className=""
-                              data-test="Shelf-1"
+                              data-test="Shelf-item1"
                             >
-                              P
+                              Shelf 1
                             </td>
                           </TableCell>
                         </tr>
@@ -1359,13 +1368,13 @@ exports[`DocumentItems tests should render the see all button when showing only
                                       <Button
                                         as="button"
                                         onClick={[Function]}
-                                        size="small"
+                                        size="tiny"
                                       >
                                         <Ref
                                           innerRef={
                                             Object {
                                               "current": <button
-                                                class="ui small button"
+                                                class="ui tiny button"
                                               >
                                                 See all
                                               </button>,
@@ -1376,7 +1385,7 @@ exports[`DocumentItems tests should render the see all button when showing only
                                             innerRef={
                                               Object {
                                                 "current": <button
-                                                  class="ui small button"
+                                                  class="ui tiny button"
                                                 >
                                                   See all
                                                 </button>,
@@ -1384,7 +1393,7 @@ exports[`DocumentItems tests should render the see all button when showing only
                                             }
                                           >
                                             <button
-                                              className="ui small button"
+                                              className="ui tiny button"
                                               onClick={[Function]}
                                             >
                                               See all
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentMetadata/DocumentMetadata.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentMetadata/DocumentMetadata.js
index e8d2d42f7..d27cc5093 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentMetadata/DocumentMetadata.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentMetadata/DocumentMetadata.js
@@ -188,7 +188,7 @@ export default class DocumentMetadata extends Component {
       <Grid.Row>
         <Grid.Column width={13} verticalAlign={'middle'}>
           <Header as="h1">
-            Document #{document.pid} - {document.metadata.title.title}
+            Document #{document.pid} - {document.metadata.title}
           </Header>
         </Grid.Column>
         <Grid.Column width={3} textAlign={'right'}>
@@ -210,7 +210,7 @@ export default class DocumentMetadata extends Component {
 
   prepareData(document) {
     const rows = [
-      { name: 'Title', value: document.metadata.title.title },
+      { name: 'Title', value: document.metadata.title },
       {
         name: 'Authors',
         value: document.metadata.authors
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentMetadata/__tests__/__snapshots__/DocumentMetadata.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentMetadata/__tests__/__snapshots__/DocumentMetadata.js.snap
index da1765fa5..11dec211a 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentMetadata/__tests__/__snapshots__/DocumentMetadata.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentMetadata/__tests__/__snapshots__/DocumentMetadata.js.snap
@@ -18,6 +18,7 @@ exports[`DocumentMetadata tests should load the details component 1`] = `
         >
           Document #
            - 
+          The Gulf: The Making of An American Sea
         </Header>
       </GridColumn>
       <GridColumn
@@ -113,7 +114,7 @@ exports[`DocumentMetadata tests should load the details component 1`] = `
             Array [
               Object {
                 "name": "Title",
-                "value": undefined,
+                "value": "The Gulf: The Making of An American Sea",
               },
               Object {
                 "name": "Authors",
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/DocumentPendingLoans.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/DocumentPendingLoans.js
index 3f3c29951..af244b657 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/DocumentPendingLoans.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/DocumentPendingLoans.js
@@ -40,7 +40,7 @@ export default class DocumentPendingLoans extends Component {
       const serialized = formatter.loan.toTable(row);
       return pick(serialized, [
         'ID',
-        'Patron ID',
+        'Patron',
         'Request start date',
         'Request end date',
       ]);
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/__tests__/DocumentPendingLoans.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/__tests__/DocumentPendingLoans.js
index aff4c444d..f4d9f0b11 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/__tests__/DocumentPendingLoans.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/__tests__/DocumentPendingLoans.js
@@ -1,15 +1,27 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Settings } from 'luxon';
-import { fromISO } from '../../../../../../common/api/date';
 import { BackOfficeRoutes } from '../../../../../../routes/urls';
 import DocumentPendingLoans from '../DocumentPendingLoans';
 import history from '../../../../../../history';
+import testData from '../../../../../../../../../../tests/data/loans.json';
 
 jest.mock('../../../../../../common/config/invenioConfig');
 
-Settings.defaultZoneName = 'utc';
-const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+const data = {
+  hits: [
+    {
+      id: 1,
+      pid: 'loan1',
+      metadata: testData[0],
+    },
+    {
+      id: 2,
+      pid: 'loan2',
+      metadata: testData[1],
+    },
+  ],
+  total: 2,
+};
 
 describe('DocumentPendingLoans tests', () => {
   let component;
@@ -67,37 +79,6 @@ describe('DocumentPendingLoans tests', () => {
   });
 
   it('should render pending loans', () => {
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            document_pid: 'doc1',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 2,
-    };
     component = mount(
       <DocumentPendingLoans
         document={doc}
@@ -123,37 +104,6 @@ describe('DocumentPendingLoans tests', () => {
   });
 
   it('should render the see all button when showing only a few pending loans', () => {
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            document_pid: 'doc1',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 2,
-    };
     component = mount(
       <DocumentPendingLoans
         document={doc}
@@ -173,37 +123,6 @@ describe('DocumentPendingLoans tests', () => {
   it('should go to loan details when clicking on a pending loan', () => {
     const mockedHistoryPush = jest.fn();
     history.push = mockedHistoryPush;
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            document_pid: 'doc1',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 2,
-    };
 
     component = mount(
       <DocumentPendingLoans
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/__tests__/__snapshots__/DocumentPendingLoans.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/__tests__/__snapshots__/DocumentPendingLoans.js.snap
index 6a9e1ac13..33ebc73c8 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/__tests__/__snapshots__/DocumentPendingLoans.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentDetails/components/DocumentPendingLoans/__tests__/__snapshots__/DocumentPendingLoans.js.snap
@@ -36,30 +36,44 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 1,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_1",
-            "pid": "loan1",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-1",
+            "patron": Object {
+              "email": "patron1@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-1",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 2,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_2",
-            "pid": "loan2",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-2",
+            "patron": Object {
+              "email": "patron2@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-2",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -92,13 +106,13 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
           Array [
             Object {
               "ID": "loan1",
-              "Patron ID": "patron_1",
+              "Patron": "patron1@test.ch",
               "Request end date": null,
               "Request start date": null,
             },
             Object {
               "ID": "loan2",
-              "Patron ID": "patron_2",
+              "Patron": "patron2@test.ch",
               "Request end date": null,
               "Request start date": null,
             },
@@ -131,10 +145,10 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -170,22 +184,23 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
                     Array [
                       "ID",
-                      "Patron ID",
+                      "Patron",
                       "Request start date",
                       "Request end date",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -204,32 +219,26 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -237,7 +246,7 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
-                            key="Patron ID"
+                            key="Patron"
                           >
                             <TableCell
                               as="th"
@@ -246,7 +255,7 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                               <th
                                 className=""
                               >
-                                Patron ID
+                                Patron
                               </th>
                             </TableCell>
                           </TableHeaderCell>
@@ -289,7 +298,7 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                   columns={
                     Array [
                       "ID",
-                      "Patron ID",
+                      "Patron",
                       "Request start date",
                       "Request end date",
                     ]
@@ -299,13 +308,13 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                     Array [
                       Object {
                         "ID": "loan1",
-                        "Patron ID": "patron_1",
+                        "Patron": "patron1@test.ch",
                         "Request end date": null,
                         "Request start date": null,
                       },
                       Object {
                         "ID": "loan2",
-                        "Patron ID": "patron_2",
+                        "Patron": "patron2@test.ch",
                         "Request end date": null,
                         "Request start date": null,
                       },
@@ -337,22 +346,21 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -362,29 +370,29 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -408,14 +416,14 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="Patron ID-loan1"
+                            data-test="Patron-loan1"
                             key="1-loan1"
                           >
                             <td
                               className=""
-                              data-test="Patron ID-loan1"
+                              data-test="Patron-loan1"
                             >
-                              patron_1
+                              patron1@test.ch
                             </td>
                           </TableCell>
                           <TableCell
@@ -463,22 +471,21 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan2"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan2"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -488,29 +495,29 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan2"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan2"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -534,14 +541,14 @@ exports[`DocumentPendingLoans tests should render pending loans 1`] = `
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="Patron ID-loan2"
+                            data-test="Patron-loan2"
                             key="1-loan2"
                           >
                             <td
                               className=""
-                              data-test="Patron ID-loan2"
+                              data-test="Patron-loan2"
                             >
-                              patron_2
+                              patron2@test.ch
                             </td>
                           </TableCell>
                           <TableCell
@@ -657,10 +664,10 @@ exports[`DocumentPendingLoans tests should render show a message with no pending
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -720,30 +727,44 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 1,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_1",
-            "pid": "loan1",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-1",
+            "patron": Object {
+              "email": "patron1@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-1",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 2,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_2",
-            "pid": "loan2",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-2",
+            "patron": Object {
+              "email": "patron2@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-2",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -776,13 +797,13 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
           Array [
             Object {
               "ID": "loan1",
-              "Patron ID": "patron_1",
+              "Patron": "patron1@test.ch",
               "Request end date": null,
               "Request start date": null,
             },
             Object {
               "ID": "loan2",
-              "Patron ID": "patron_2",
+              "Patron": "patron2@test.ch",
               "Request end date": null,
               "Request start date": null,
             },
@@ -815,10 +836,10 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -854,22 +875,23 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
                     Array [
                       "ID",
-                      "Patron ID",
+                      "Patron",
                       "Request start date",
                       "Request end date",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -888,32 +910,26 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -921,7 +937,7 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
-                            key="Patron ID"
+                            key="Patron"
                           >
                             <TableCell
                               as="th"
@@ -930,7 +946,7 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                               <th
                                 className=""
                               >
-                                Patron ID
+                                Patron
                               </th>
                             </TableCell>
                           </TableHeaderCell>
@@ -973,7 +989,7 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                   columns={
                     Array [
                       "ID",
-                      "Patron ID",
+                      "Patron",
                       "Request start date",
                       "Request end date",
                     ]
@@ -983,7 +999,7 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                     Array [
                       Object {
                         "ID": "loan1",
-                        "Patron ID": "patron_1",
+                        "Patron": "patron1@test.ch",
                         "Request end date": null,
                         "Request start date": null,
                       },
@@ -1015,22 +1031,21 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -1040,29 +1055,29 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -1086,14 +1101,14 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="Patron ID-loan1"
+                            data-test="Patron-loan1"
                             key="1-loan1"
                           >
                             <td
                               className=""
-                              data-test="Patron ID-loan1"
+                              data-test="Patron-loan1"
                             >
-                              patron_1
+                              patron1@test.ch
                             </td>
                           </TableCell>
                           <TableCell
@@ -1194,13 +1209,13 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                                       <Button
                                         as="button"
                                         onClick={[Function]}
-                                        size="small"
+                                        size="tiny"
                                       >
                                         <Ref
                                           innerRef={
                                             Object {
                                               "current": <button
-                                                class="ui small button"
+                                                class="ui tiny button"
                                               >
                                                 See all
                                               </button>,
@@ -1211,7 +1226,7 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                                             innerRef={
                                               Object {
                                                 "current": <button
-                                                  class="ui small button"
+                                                  class="ui tiny button"
                                                 >
                                                   See all
                                                 </button>,
@@ -1219,7 +1234,7 @@ exports[`DocumentPendingLoans tests should render the see all button when showin
                                             }
                                           >
                                             <button
-                                              className="ui small button"
+                                              className="ui tiny button"
                                               onClick={[Function]}
                                             >
                                               See all
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/DocumentRequestsSearch.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/DocumentRequestsSearch.js
index d46c189f7..d229d2e92 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/DocumentRequestsSearch.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/DocumentRequestsSearch.js
@@ -16,13 +16,16 @@ import {
   Error as IlsError,
   SearchBar as DocumentRequestsSearchBar,
   ResultsSort,
+  ResultsTable,
 } from '../../../common/components';
+import { formatter } from '../../../common/components/ResultsTable/formatters';
 import { documentRequest as documentRequestApi } from '../../../common/api/documentRequests/documentRequest';
 import { getSearchConfig } from '../../../common/config';
 import { ClearButton, NewButton } from '../components/buttons';
+import { ExportReactSearchKitResults } from '../components';
 import { BackOfficeRoutes } from '../../../routes/urls';
-import { ResultsList as DocumentRequestResultsList } from './components';
 import { goTo } from '../../../history';
+import _pick from 'lodash/pick';
 
 export class DocumentRequestsSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -55,11 +58,40 @@ export class DocumentRequestsSearch extends Component {
     );
   };
 
-  renderResultsList = results => {
+  prepareData(data) {
+    return data.map(row => {
+      return _pick(formatter.documentRequest.toTable(row), [
+        'ID',
+        'Patron ID',
+        'Title',
+        'Library Book',
+      ]);
+    });
+  }
+
+  renderResultsTable = results => {
+    const rows = this.prepareData(results);
+    const headerActionComponent = (
+      <div>
+        <NewButton
+          text={'New document request'}
+          clickHandler={() => {
+            // TODO: EDITOR, implement create form
+          }}
+        />
+        <ExportReactSearchKitResults
+          exportBaseUrl={documentRequestApi.searchBaseURL}
+        />
+      </div>
+    );
+
     return (
-      <DocumentRequestResultsList
-        results={results}
-        viewDetailsClickHandler={row =>
+      <ResultsTable
+        rows={rows}
+        title={''}
+        name={'document request'}
+        headerActionComponent={headerActionComponent}
+        rowActionClickHandler={row =>
           goTo(BackOfficeRoutes.documentRequestDetailsFor(row.ID))
         }
       />
@@ -153,7 +185,7 @@ export class DocumentRequestsSearch extends Component {
                 <EmptyResults renderElement={this.renderEmptyResults} />
                 <Error renderElement={this.renderError} />
                 {this.renderHeader()}
-                <ResultsList renderElement={this.renderResultsList} />
+                <ResultsList renderElement={this.renderResultsTable} />
                 {this.renderFooter()}
               </Grid.Column>
             </ResultsLoader>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/DocumentRequestsSearch.js
similarity index 61%
rename from invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/ResultsList.js
rename to invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/DocumentRequestsSearch.js
index c0452212a..8ee30ac5e 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/ResultsList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/DocumentRequestsSearch.js
@@ -2,33 +2,30 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { Settings } from 'luxon';
 import { fromISO } from '../../../../common/api/date';
-import { ResultsList } from '../components';
+import { ResultsTable } from '../../../../common/components';
 import { formatter } from '../../../../common/components/ResultsTable/formatters';
-import pick from 'lodash/pick';
 
 jest.mock('../../components');
 
 Settings.defaultZoneName = 'utc';
-
-describe('DocumentRequestsSearch ResultsList tests', () => {
-  const stringDate = fromISO('2018-01-01T11:05:00+01:00');
-
-  const results = [
-    {
-      id: 3,
-      created: stringDate,
-      updated: stringDate,
+const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+const data = [
+  {
+    id: 3,
+    created: stringDate,
+    updated: stringDate,
+    pid: '3',
+    metadata: {
+      authors: 'Author1',
+      title: 'This is a title',
+      state: 'PENDING',
+      patron_pid: '1',
       pid: '3',
-      metadata: {
-        authors: 'Author1',
-        title: 'This is a title',
-        state: 'PENDING',
-        patron_pid: '1',
-        pid: '3',
-      },
     },
-  ];
+  },
+];
 
+describe('DocumentRequestsSearch ResultsTable tests', () => {
   let component;
   afterEach(() => {
     component.unmount();
@@ -36,17 +33,20 @@ describe('DocumentRequestsSearch ResultsList tests', () => {
 
   it('should not render when empty results', () => {
     component = mount(
-      <ResultsList results={[]} viewDetailsClickHandler={() => {}} />
+      <ResultsTable rows={[]} rowActionClickHandler={() => {}} />
     );
     expect(component).toMatchSnapshot();
   });
 
   it('should render a list of results', () => {
     component = mount(
-      <ResultsList results={results} viewDetailsClickHandler={() => {}} />
+      <ResultsTable
+        rows={data.map(row => formatter.documentRequest.toTable(row))}
+        rowActionClickHandler={() => {}}
+      />
     );
     expect(component).toMatchSnapshot();
-    const firstResult = results[0];
+    const firstResult = data[0];
     const resultRows = component
       .find('TableRow')
       .filterWhere(
@@ -61,34 +61,24 @@ describe('DocumentRequestsSearch ResultsList tests', () => {
           element.prop('data-test') === 'Title-' + firstResult.metadata.pid
       );
     expect(mappedStatusElements).toHaveLength(1);
-
     expect(mappedStatusElements.text()).toEqual(firstResult.metadata.title);
   });
 
   it('should call click handler on view details click', () => {
     const mockedClickHandler = jest.fn();
     component = mount(
-      <ResultsList
-        results={results}
-        viewDetailsClickHandler={mockedClickHandler}
+      <ResultsTable
+        rows={data.map(row => formatter.documentRequest.toTable(row))}
+        rowActionClickHandler={mockedClickHandler}
       />
     );
-    const firstId = results[0].pid;
+    const firstId = data[0].pid;
     const button = component
       .find('TableRow')
       .filterWhere(element => element.prop('data-test') === firstId)
       .find('button');
     button.simulate('click');
-    const expected = pick(formatter.documentRequest.toTable(results[0]), [
-      'ID',
-      'Created',
-      'Updated',
-      'State',
-      'Document ID',
-      'Patron ID',
-      'Title',
-      'Authors',
-    ]);
+    const expected = formatter.documentRequest.toTable(data[0]);
     expect(mockedClickHandler).toHaveBeenCalledWith(expected);
   });
 });
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/__snapshots__/DocumentRequestsSearch.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/__snapshots__/DocumentRequestsSearch.js.snap
new file mode 100644
index 000000000..20bfffaa4
--- /dev/null
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/__snapshots__/DocumentRequestsSearch.js.snap
@@ -0,0 +1,779 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DocumentRequestsSearch ResultsTable tests should not render when empty results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={Array []}
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Message
+        data-test="no-results"
+      >
+        <div
+          className="ui message"
+          data-test="no-results"
+        >
+          There are no 
+          .
+        </div>
+      </Message>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
+
+exports[`DocumentRequestsSearch ResultsTable tests should render a list of results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={
+    Array [
+      Object {
+        "Authors": "Author1",
+        "Created": "2018-01-01",
+        "Document ID": undefined,
+        "ID": "3",
+        "ISBN": undefined,
+        "ISSN": undefined,
+        "Issue": undefined,
+        "Library Book": "Pending",
+        "Note": undefined,
+        "Page": undefined,
+        "Patron ID": "1",
+        "Publication Year": undefined,
+        "State": "PENDING",
+        "Title": "This is a title",
+        "Updated": "2018-01-01",
+        "Volume": undefined,
+      },
+    ]
+  }
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Table
+        as="table"
+        compact={true}
+        selectable={true}
+        striped={true}
+      >
+        <table
+          className="ui selectable striped compact table"
+        >
+          <ResultsTableHeader
+            columns={
+              Array [
+                "ID",
+                "Created",
+                "Updated",
+                "Document ID",
+                "Patron ID",
+                "State",
+                "Title",
+                "Authors",
+                "ISSN",
+                "ISBN",
+                "Issue",
+                "Note",
+                "Page",
+                "Publication Year",
+                "Volume",
+                "Library Book",
+              ]
+            }
+            withRowAction={false}
+          >
+            <TableHeader
+              as="thead"
+            >
+              <thead
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="header"
+                >
+                  <tr
+                    className=""
+                    data-test="header"
+                  >
+                    <TableHeaderCell
+                      as="th"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        />
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Created"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Created
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Updated"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Updated
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Document ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Document ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Patron ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Patron ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="State"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          State
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Title"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Title
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Authors"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Authors
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="ISSN"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          ISSN
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="ISBN"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          ISBN
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Issue"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Issue
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Note"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Note
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Page"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Page
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Publication Year"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Publication Year
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Volume"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Volume
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Library Book"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Library Book
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                  </tr>
+                </TableRow>
+              </thead>
+            </TableHeader>
+          </ResultsTableHeader>
+          <ResultsTableBody
+            columns={
+              Array [
+                "ID",
+                "Created",
+                "Updated",
+                "Document ID",
+                "Patron ID",
+                "State",
+                "Title",
+                "Authors",
+                "ISSN",
+                "ISBN",
+                "Issue",
+                "Note",
+                "Page",
+                "Publication Year",
+                "Volume",
+                "Library Book",
+              ]
+            }
+            rowActionClickHandler={[Function]}
+            rows={
+              Array [
+                Object {
+                  "Authors": "Author1",
+                  "Created": "2018-01-01",
+                  "Document ID": undefined,
+                  "ID": "3",
+                  "ISBN": undefined,
+                  "ISSN": undefined,
+                  "Issue": undefined,
+                  "Library Book": "Pending",
+                  "Note": undefined,
+                  "Page": undefined,
+                  "Patron ID": "1",
+                  "Publication Year": undefined,
+                  "State": "PENDING",
+                  "Title": "This is a title",
+                  "Updated": "2018-01-01",
+                  "Volume": undefined,
+                },
+              ]
+            }
+          >
+            <TableBody
+              as="tbody"
+            >
+              <tbody
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="3"
+                  key="3"
+                >
+                  <tr
+                    className=""
+                    data-test="3"
+                  >
+                    <TableCell
+                      as="td"
+                      textAlign="center"
+                    >
+                      <td
+                        className="center aligned"
+                      >
+                        <Button
+                          as="button"
+                          compact={true}
+                          data-test="btn-view-details-3"
+                          icon="info"
+                          onClick={[Function]}
+                        >
+                          <Ref
+                            innerRef={
+                              Object {
+                                "current": <button
+                                  class="ui compact icon button"
+                                  data-test="btn-view-details-3"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="info icon"
+                                  />
+                                </button>,
+                              }
+                            }
+                          >
+                            <RefFindNode
+                              innerRef={
+                                Object {
+                                  "current": <button
+                                    class="ui compact icon button"
+                                    data-test="btn-view-details-3"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="info icon"
+                                    />
+                                  </button>,
+                                }
+                              }
+                            >
+                              <button
+                                className="ui compact icon button"
+                                data-test="btn-view-details-3"
+                                onClick={[Function]}
+                              >
+                                <Icon
+                                  as="i"
+                                  name="info"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    className="info icon"
+                                    onClick={[Function]}
+                                  />
+                                </Icon>
+                              </button>
+                            </RefFindNode>
+                          </Ref>
+                        </Button>
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="ID-3"
+                      key="0-3"
+                    >
+                      <td
+                        className=""
+                        data-test="ID-3"
+                      >
+                        3
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Created-3"
+                      key="1-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Created-3"
+                      >
+                        2018-01-01
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Updated-3"
+                      key="2-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Updated-3"
+                      >
+                        2018-01-01
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Document ID-3"
+                      key="3-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Document ID-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Patron ID-3"
+                      key="4-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Patron ID-3"
+                      >
+                        1
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="State-3"
+                      key="5-3"
+                    >
+                      <td
+                        className=""
+                        data-test="State-3"
+                      >
+                        PENDING
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Title-3"
+                      key="6-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Title-3"
+                      >
+                        This is a title
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Authors-3"
+                      key="7-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Authors-3"
+                      >
+                        Author1
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="ISSN-3"
+                      key="8-3"
+                    >
+                      <td
+                        className=""
+                        data-test="ISSN-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="ISBN-3"
+                      key="9-3"
+                    >
+                      <td
+                        className=""
+                        data-test="ISBN-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Issue-3"
+                      key="10-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Issue-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Note-3"
+                      key="11-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Note-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Page-3"
+                      key="12-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Page-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Publication Year-3"
+                      key="13-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Publication Year-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Volume-3"
+                      key="14-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Volume-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Library Book-3"
+                      key="15-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Library Book-3"
+                      >
+                        Pending
+                      </td>
+                    </TableCell>
+                  </tr>
+                </TableRow>
+              </tbody>
+            </TableBody>
+          </ResultsTableBody>
+          <ResultsTableFooter
+            allRowsNumber={1}
+            columnsNumber={16}
+            currentPage={1}
+            paginationComponent={null}
+            seeAllComponent={null}
+            showAllResults={false}
+            showMaxRows={10}
+          />
+        </table>
+      </Table>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/__snapshots__/ResultsList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/__snapshots__/ResultsList.js.snap
deleted file mode 100644
index ac5246bb9..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/__tests__/__snapshots__/ResultsList.js.snap
+++ /dev/null
@@ -1,730 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DocumentRequestsSearch ResultsList tests should not render when empty results 1`] = `
-<ResultsList
-  results={Array []}
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <div>
-        <NewButton
-          clickHandler={[Function]}
-          disabled={false}
-          fluid={false}
-          text="New document request"
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl="https://127.0.0.1:5000/api/document-requests/"
-        />
-      </div>
-    }
-    name="document request"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={Array []}
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <div>
-                      <NewButton
-                        clickHandler={[Function]}
-                        disabled={false}
-                        fluid={false}
-                        text="New document request"
-                      >
-                        <Button
-                          as="button"
-                          icon={true}
-                          labelPosition="left"
-                          onClick={[Function]}
-                          positive={true}
-                          size="small"
-                        >
-                          <Ref
-                            innerRef={
-                              Object {
-                                "current": <button
-                                  class="ui small icon positive left labeled button"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                  New document request
-                                </button>,
-                              }
-                            }
-                          >
-                            <RefFindNode
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui small icon positive left labeled button"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="plus icon"
-                                    />
-                                    New document request
-                                  </button>,
-                                }
-                              }
-                            >
-                              <button
-                                className="ui small icon positive left labeled button"
-                                onClick={[Function]}
-                              >
-                                <Icon
-                                  as="i"
-                                  name="plus"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    className="plus icon"
-                                    onClick={[Function]}
-                                  />
-                                </Icon>
-                                New document request
-                              </button>
-                            </RefFindNode>
-                          </Ref>
-                        </Button>
-                      </NewButton>
-                      <ExportReactSearchKitResults
-                        exportBaseUrl="https://127.0.0.1:5000/api/document-requests/"
-                      />
-                    </div>
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Message
-          data-test="no-results"
-        >
-          <div
-            className="ui message"
-            data-test="no-results"
-          >
-            There are no 
-            document request
-            .
-          </div>
-        </Message>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
-
-exports[`DocumentRequestsSearch ResultsList tests should render a list of results 1`] = `
-<ResultsList
-  results={
-    Array [
-      Object {
-        "created": "2018-01-01T10:05:00.000Z",
-        "id": 3,
-        "metadata": Object {
-          "authors": "Author1",
-          "patron_pid": "1",
-          "pid": "3",
-          "state": "PENDING",
-          "title": "This is a title",
-        },
-        "pid": "3",
-        "updated": "2018-01-01T10:05:00.000Z",
-      },
-    ]
-  }
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <div>
-        <NewButton
-          clickHandler={[Function]}
-          disabled={false}
-          fluid={false}
-          text="New document request"
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl="https://127.0.0.1:5000/api/document-requests/"
-        />
-      </div>
-    }
-    name="document request"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={
-      Array [
-        Object {
-          "Authors": "Author1",
-          "Created": "2018-01-01",
-          "Document ID": undefined,
-          "ID": "3",
-          "Patron ID": "1",
-          "State": "PENDING",
-          "Title": "This is a title",
-          "Updated": "2018-01-01",
-        },
-      ]
-    }
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <div>
-                      <NewButton
-                        clickHandler={[Function]}
-                        disabled={false}
-                        fluid={false}
-                        text="New document request"
-                      >
-                        <Button
-                          as="button"
-                          icon={true}
-                          labelPosition="left"
-                          onClick={[Function]}
-                          positive={true}
-                          size="small"
-                        >
-                          <Ref
-                            innerRef={
-                              Object {
-                                "current": <button
-                                  class="ui small icon positive left labeled button"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                  New document request
-                                </button>,
-                              }
-                            }
-                          >
-                            <RefFindNode
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui small icon positive left labeled button"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="plus icon"
-                                    />
-                                    New document request
-                                  </button>,
-                                }
-                              }
-                            >
-                              <button
-                                className="ui small icon positive left labeled button"
-                                onClick={[Function]}
-                              >
-                                <Icon
-                                  as="i"
-                                  name="plus"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    className="plus icon"
-                                    onClick={[Function]}
-                                  />
-                                </Icon>
-                                New document request
-                              </button>
-                            </RefFindNode>
-                          </Ref>
-                        </Button>
-                      </NewButton>
-                      <ExportReactSearchKitResults
-                        exportBaseUrl="https://127.0.0.1:5000/api/document-requests/"
-                      />
-                    </div>
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Table
-          as="table"
-          selectable={true}
-          striped={true}
-        >
-          <table
-            className="ui selectable striped table"
-          >
-            <ResultsTableHeader
-              columns={
-                Array [
-                  "ID",
-                  "Created",
-                  "Updated",
-                  "State",
-                  "Patron ID",
-                  "Document ID",
-                  "Title",
-                  "Authors",
-                ]
-              }
-              withRowAction={true}
-            >
-              <TableHeader
-                as="thead"
-              >
-                <thead
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test="header"
-                  >
-                    <tr
-                      className=""
-                      data-test="header"
-                    >
-                      <TableHeaderCell
-                        as="th"
-                        collapsing={true}
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          collapsing={true}
-                          width={2}
-                        >
-                          <th
-                            className="collapsing two wide"
-                          />
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="ID"
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          width={2}
-                        >
-                          <th
-                            className="two wide"
-                          >
-                            ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Created"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Created
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Updated"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Updated
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="State"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            State
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Patron ID"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Patron ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Document ID"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Document ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Title"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Title
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Authors"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Authors
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                    </tr>
-                  </TableRow>
-                </thead>
-              </TableHeader>
-            </ResultsTableHeader>
-            <ResultsTableBody
-              columns={
-                Array [
-                  "ID",
-                  "Created",
-                  "Updated",
-                  "State",
-                  "Patron ID",
-                  "Document ID",
-                  "Title",
-                  "Authors",
-                ]
-              }
-              rowActionClickHandler={[Function]}
-              rows={
-                Array [
-                  Object {
-                    "Authors": "Author1",
-                    "Created": "2018-01-01",
-                    "Document ID": undefined,
-                    "ID": "3",
-                    "Patron ID": "1",
-                    "State": "PENDING",
-                    "Title": "This is a title",
-                    "Updated": "2018-01-01",
-                  },
-                ]
-              }
-            >
-              <TableBody
-                as="tbody"
-              >
-                <tbody
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test="3"
-                    key="3"
-                  >
-                    <tr
-                      className=""
-                      data-test="3"
-                    >
-                      <TableCell
-                        as="td"
-                        textAlign="center"
-                      >
-                        <td
-                          className="center aligned"
-                        >
-                          <Button
-                            as="button"
-                            circular={true}
-                            compact={true}
-                            data-test="btn-view-details-3"
-                            icon="eye"
-                            onClick={[Function]}
-                          >
-                            <Ref
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui circular compact icon button"
-                                    data-test="btn-view-details-3"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="eye icon"
-                                    />
-                                  </button>,
-                                }
-                              }
-                            >
-                              <RefFindNode
-                                innerRef={
-                                  Object {
-                                    "current": <button
-                                      class="ui circular compact icon button"
-                                      data-test="btn-view-details-3"
-                                    >
-                                      <i
-                                        aria-hidden="true"
-                                        class="eye icon"
-                                      />
-                                    </button>,
-                                  }
-                                }
-                              >
-                                <button
-                                  className="ui circular compact icon button"
-                                  data-test="btn-view-details-3"
-                                  onClick={[Function]}
-                                >
-                                  <Icon
-                                    as="i"
-                                    name="eye"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      className="eye icon"
-                                      onClick={[Function]}
-                                    />
-                                  </Icon>
-                                </button>
-                              </RefFindNode>
-                            </Ref>
-                          </Button>
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="ID-3"
-                        key="0-3"
-                      >
-                        <td
-                          className=""
-                          data-test="ID-3"
-                        >
-                          3
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Created-3"
-                        key="1-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Created-3"
-                        >
-                          2018-01-01
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Updated-3"
-                        key="2-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Updated-3"
-                        >
-                          2018-01-01
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="State-3"
-                        key="3-3"
-                      >
-                        <td
-                          className=""
-                          data-test="State-3"
-                        >
-                          PENDING
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Patron ID-3"
-                        key="4-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Patron ID-3"
-                        >
-                          1
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Document ID-3"
-                        key="5-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Document ID-3"
-                        >
-                          -
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Title-3"
-                        key="6-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Title-3"
-                        >
-                          This is a title
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Authors-3"
-                        key="7-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Authors-3"
-                        >
-                          Author1
-                        </td>
-                      </TableCell>
-                    </tr>
-                  </TableRow>
-                </tbody>
-              </TableBody>
-            </ResultsTableBody>
-            <ResultsTableFooter
-              allRowsNumber={1}
-              columnsNumber={8}
-              currentPage={1}
-              paginationComponent={null}
-              seeAllComponent={null}
-              showAllResults={false}
-              showMaxRows={10}
-            />
-          </table>
-        </Table>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/ResultsList/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/ResultsList/ResultsList.js
deleted file mode 100644
index d32ef79ab..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/ResultsList/ResultsList.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ResultsTable } from '../../../../../common/components';
-import { NewButton } from '../../../components/buttons';
-import { formatter } from '../../../../../common/components/ResultsTable/formatters';
-import pick from 'lodash/pick';
-import { ExportReactSearchKitResults } from '../../../components';
-import { documentRequest as documentRequestApi } from '../../../../../common/api';
-
-export class ResultsList extends Component {
-  constructor(props) {
-    super(props);
-    this.viewDetailsClickHandler = this.props.viewDetailsClickHandler;
-  }
-
-  prepareData(data) {
-    return data.map(row => {
-      return pick(formatter.documentRequest.toTable(row), [
-        'ID',
-        'Created',
-        'Updated',
-        'State',
-        'Patron ID',
-        'Document ID',
-        'Title',
-        'Authors',
-      ]);
-    });
-  }
-
-  render() {
-    const rows = this.prepareData(this.props.results);
-    const headerActionComponent = (
-      <div>
-        <NewButton
-          text={'New document request'}
-          clickHandler={() => {
-            // TODO: EDITOR, implement create form
-          }}
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl={documentRequestApi.searchBaseURL}
-        />
-      </div>
-    );
-
-    return (
-      <ResultsTable
-        rows={rows}
-        title={''}
-        name={'document request'}
-        headerActionComponent={headerActionComponent}
-        rowActionClickHandler={this.viewDetailsClickHandler}
-      />
-    );
-  }
-}
-
-ResultsList.propTypes = {
-  results: PropTypes.array.isRequired,
-  viewDetailsClickHandler: PropTypes.func.isRequired,
-};
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/ResultsList/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/ResultsList/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/ResultsList/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentRequestsSearch/components/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/DocumentsSearch.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/DocumentsSearch.js
index ceed9fb2b..cc151834e 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/DocumentsSearch.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/DocumentsSearch.js
@@ -16,13 +16,16 @@ import {
   Error as IlsError,
   SearchBar as DocumentsSearchBar,
   ResultsSort,
+  ResultsTable,
 } from '../../../common/components';
+import { formatter } from '../../../common/components/ResultsTable/formatters';
 import { document as documentApi } from '../../../common/api/documents/document';
 import { getSearchConfig } from '../../../common/config';
 import { ClearButton, NewButton } from '../components/buttons';
 import { BackOfficeRoutes } from '../../../routes/urls';
-import { ResultsList as DocumentsResultsList } from './components';
+import { ExportReactSearchKitResults } from '../components';
 import { goTo, goToHandler } from '../../../history';
+import _pick from 'lodash/pick';
 
 export class DocumentsSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -54,11 +57,38 @@ export class DocumentsSearch extends Component {
     );
   };
 
-  renderResultsList = results => {
+  prepareData(data) {
+    return data.map(row => {
+      return _pick(formatter.document.toTable(row), [
+        'ID',
+        'Title',
+        'Authors',
+        'Available Items',
+      ]);
+    });
+  }
+
+  renderResultsTable = results => {
+    const rows = this.prepareData(results);
+    const headerActionComponent = (
+      <div>
+        <NewButton
+          text={'New document'}
+          clickHandler={goToHandler(BackOfficeRoutes.documentCreate)}
+        />
+        <ExportReactSearchKitResults
+          exportBaseUrl={documentApi.searchBaseURL}
+        />
+      </div>
+    );
+
     return (
-      <DocumentsResultsList
-        results={results}
-        viewDetailsClickHandler={row =>
+      <ResultsTable
+        rows={rows}
+        title={''}
+        name={'documents'}
+        headerActionComponent={headerActionComponent}
+        rowActionClickHandler={row =>
           goTo(BackOfficeRoutes.documentDetailsFor(row.ID))
         }
       />
@@ -149,7 +179,7 @@ export class DocumentsSearch extends Component {
                 <EmptyResults renderElement={this.renderEmptyResults} />
                 <Error renderElement={this.renderError} />
                 {this.renderHeader()}
-                <ResultsList renderElement={this.renderResultsList} />
+                <ResultsList renderElement={this.renderResultsTable} />
                 {this.renderFooter()}
               </Grid.Column>
             </ResultsLoader>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/DocumentsSearch.js
similarity index 58%
rename from invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/ResultsList.js
rename to invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/DocumentsSearch.js
index 7b787cfba..7d7ad9f3e 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/ResultsList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/DocumentsSearch.js
@@ -2,49 +2,49 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { Settings } from 'luxon';
 import { fromISO } from '../../../../common/api/date';
-import { ResultsList } from '../components';
+import { ResultsTable } from '../../../../common/components';
 import { formatter } from '../../../../common/components/ResultsTable/formatters';
 
 jest.mock('../../components');
 
 Settings.defaultZoneName = 'utc';
-
-describe('DocumentsSearch ResultsList tests', () => {
-  const stringDate = fromISO('2018-01-01T11:05:00+01:00');
-
-  const results = [
-    {
-      id: 3,
-      created: stringDate,
-      updated: stringDate,
+const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+const data = [
+  {
+    id: 3,
+    created: stringDate,
+    updated: stringDate,
+    pid: '3',
+    metadata: {
       pid: '3',
-      metadata: {
-        authors: [{ full_name: 'Author1' }],
-        title: { title: 'This is a title' },
-        abstracts: [{ value: 'This is an abstract' }],
-        pid: '3',
-      },
+      authors: [{ full_name: 'Author1' }],
+      title: 'This is a title',
     },
-  ];
+  },
+];
 
-  let component;
-  afterEach(() => {
-    component.unmount();
-  });
+let component;
+afterEach(() => {
+  component.unmount();
+});
 
+describe('DocumentsSearch ResultsTable tests', () => {
   it('should not render when empty results', () => {
     component = mount(
-      <ResultsList results={[]} viewDetailsClickHandler={() => {}} />
+      <ResultsTable rows={[]} rowActionClickHandler={() => {}} />
     );
     expect(component).toMatchSnapshot();
   });
 
   it('should render a list of results', () => {
     component = mount(
-      <ResultsList results={results} viewDetailsClickHandler={() => {}} />
+      <ResultsTable
+        rows={data.map(row => formatter.document.toTable(row))}
+        rowActionClickHandler={() => {}}
+      />
     );
     expect(component).toMatchSnapshot();
-    const firstResult = results[0];
+    const firstResult = data[0];
     const resultRows = component
       .find('TableRow')
       .filterWhere(
@@ -59,27 +59,24 @@ describe('DocumentsSearch ResultsList tests', () => {
           element.prop('data-test') === 'Title-' + firstResult.metadata.pid
       );
     expect(mappedStatusElements).toHaveLength(1);
-
-    expect(mappedStatusElements.text()).toEqual(
-      firstResult.metadata.title.title
-    );
+    expect(mappedStatusElements.text()).toEqual(firstResult.metadata.title);
   });
 
   it('should call click handler on view details click', () => {
     const mockedClickHandler = jest.fn();
     component = mount(
-      <ResultsList
-        results={results}
-        viewDetailsClickHandler={mockedClickHandler}
+      <ResultsTable
+        rows={data.map(row => formatter.document.toTable(row))}
+        rowActionClickHandler={mockedClickHandler}
       />
     );
-    const firstId = results[0].pid;
+    const firstId = data[0].pid;
     const button = component
       .find('TableRow')
       .filterWhere(element => element.prop('data-test') === firstId)
       .find('button');
     button.simulate('click');
-    const expected = formatter.document.toTable(results[0]);
+    const expected = formatter.document.toTable(data[0]);
     expect(mockedClickHandler).toHaveBeenCalledWith(expected);
   });
 });
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/__snapshots__/DocumentsSearch.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/__snapshots__/DocumentsSearch.js.snap
new file mode 100644
index 000000000..b6f8f82b9
--- /dev/null
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/__snapshots__/DocumentsSearch.js.snap
@@ -0,0 +1,438 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DocumentsSearch ResultsTable tests should not render when empty results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={Array []}
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Message
+        data-test="no-results"
+      >
+        <div
+          className="ui message"
+          data-test="no-results"
+        >
+          There are no 
+          .
+        </div>
+      </Message>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
+
+exports[`DocumentsSearch ResultsTable tests should render a list of results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={
+    Array [
+      Object {
+        "Authors": "Author1",
+        "Created": "2018-01-01",
+        "ID": "3",
+        "Title": "This is a title",
+        "Updated": "2018-01-01",
+      },
+    ]
+  }
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Table
+        as="table"
+        compact={true}
+        selectable={true}
+        striped={true}
+      >
+        <table
+          className="ui selectable striped compact table"
+        >
+          <ResultsTableHeader
+            columns={
+              Array [
+                "ID",
+                "Created",
+                "Updated",
+                "Title",
+                "Authors",
+              ]
+            }
+            withRowAction={false}
+          >
+            <TableHeader
+              as="thead"
+            >
+              <thead
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="header"
+                >
+                  <tr
+                    className=""
+                    data-test="header"
+                  >
+                    <TableHeaderCell
+                      as="th"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        />
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Created"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Created
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Updated"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Updated
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Title"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Title
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Authors"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Authors
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                  </tr>
+                </TableRow>
+              </thead>
+            </TableHeader>
+          </ResultsTableHeader>
+          <ResultsTableBody
+            columns={
+              Array [
+                "ID",
+                "Created",
+                "Updated",
+                "Title",
+                "Authors",
+              ]
+            }
+            rowActionClickHandler={[Function]}
+            rows={
+              Array [
+                Object {
+                  "Authors": "Author1",
+                  "Created": "2018-01-01",
+                  "ID": "3",
+                  "Title": "This is a title",
+                  "Updated": "2018-01-01",
+                },
+              ]
+            }
+          >
+            <TableBody
+              as="tbody"
+            >
+              <tbody
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="3"
+                  key="3"
+                >
+                  <tr
+                    className=""
+                    data-test="3"
+                  >
+                    <TableCell
+                      as="td"
+                      textAlign="center"
+                    >
+                      <td
+                        className="center aligned"
+                      >
+                        <Button
+                          as="button"
+                          compact={true}
+                          data-test="btn-view-details-3"
+                          icon="info"
+                          onClick={[Function]}
+                        >
+                          <Ref
+                            innerRef={
+                              Object {
+                                "current": <button
+                                  class="ui compact icon button"
+                                  data-test="btn-view-details-3"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="info icon"
+                                  />
+                                </button>,
+                              }
+                            }
+                          >
+                            <RefFindNode
+                              innerRef={
+                                Object {
+                                  "current": <button
+                                    class="ui compact icon button"
+                                    data-test="btn-view-details-3"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="info icon"
+                                    />
+                                  </button>,
+                                }
+                              }
+                            >
+                              <button
+                                className="ui compact icon button"
+                                data-test="btn-view-details-3"
+                                onClick={[Function]}
+                              >
+                                <Icon
+                                  as="i"
+                                  name="info"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    className="info icon"
+                                    onClick={[Function]}
+                                  />
+                                </Icon>
+                              </button>
+                            </RefFindNode>
+                          </Ref>
+                        </Button>
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="ID-3"
+                      key="0-3"
+                    >
+                      <td
+                        className=""
+                        data-test="ID-3"
+                      >
+                        3
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Created-3"
+                      key="1-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Created-3"
+                      >
+                        2018-01-01
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Updated-3"
+                      key="2-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Updated-3"
+                      >
+                        2018-01-01
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Title-3"
+                      key="3-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Title-3"
+                      >
+                        This is a title
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Authors-3"
+                      key="4-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Authors-3"
+                      >
+                        Author1
+                      </td>
+                    </TableCell>
+                  </tr>
+                </TableRow>
+              </tbody>
+            </TableBody>
+          </ResultsTableBody>
+          <ResultsTableFooter
+            allRowsNumber={1}
+            columnsNumber={5}
+            currentPage={1}
+            paginationComponent={null}
+            seeAllComponent={null}
+            showAllResults={false}
+            showMaxRows={10}
+          />
+        </table>
+      </Table>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/__snapshots__/ResultsList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/__snapshots__/ResultsList.js.snap
deleted file mode 100644
index 4c35af4a0..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/__tests__/__snapshots__/ResultsList.js.snap
+++ /dev/null
@@ -1,646 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DocumentsSearch ResultsList tests should not render when empty results 1`] = `
-<ResultsList
-  results={Array []}
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <div>
-        <NewButton
-          clickHandler={[Function]}
-          disabled={false}
-          fluid={false}
-          text="New document"
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl="https://127.0.0.1:5000/api/documents/"
-        />
-      </div>
-    }
-    name="documents"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={Array []}
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <div>
-                      <NewButton
-                        clickHandler={[Function]}
-                        disabled={false}
-                        fluid={false}
-                        text="New document"
-                      >
-                        <Button
-                          as="button"
-                          icon={true}
-                          labelPosition="left"
-                          onClick={[Function]}
-                          positive={true}
-                          size="small"
-                        >
-                          <Ref
-                            innerRef={
-                              Object {
-                                "current": <button
-                                  class="ui small icon positive left labeled button"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                  New document
-                                </button>,
-                              }
-                            }
-                          >
-                            <RefFindNode
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui small icon positive left labeled button"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="plus icon"
-                                    />
-                                    New document
-                                  </button>,
-                                }
-                              }
-                            >
-                              <button
-                                className="ui small icon positive left labeled button"
-                                onClick={[Function]}
-                              >
-                                <Icon
-                                  as="i"
-                                  name="plus"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    className="plus icon"
-                                    onClick={[Function]}
-                                  />
-                                </Icon>
-                                New document
-                              </button>
-                            </RefFindNode>
-                          </Ref>
-                        </Button>
-                      </NewButton>
-                      <ExportReactSearchKitResults
-                        exportBaseUrl="https://127.0.0.1:5000/api/documents/"
-                      />
-                    </div>
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Message
-          data-test="no-results"
-        >
-          <div
-            className="ui message"
-            data-test="no-results"
-          >
-            There are no 
-            documents
-            .
-          </div>
-        </Message>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
-
-exports[`DocumentsSearch ResultsList tests should render a list of results 1`] = `
-<ResultsList
-  results={
-    Array [
-      Object {
-        "created": "2018-01-01T10:05:00.000Z",
-        "id": 3,
-        "metadata": Object {
-          "abstracts": Array [
-            Object {
-              "value": "This is an abstract",
-            },
-          ],
-          "authors": Array [
-            Object {
-              "full_name": "Author1",
-            },
-          ],
-          "pid": "3",
-          "title": Object {
-            "title": "This is a title",
-          },
-        },
-        "pid": "3",
-        "updated": "2018-01-01T10:05:00.000Z",
-      },
-    ]
-  }
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <div>
-        <NewButton
-          clickHandler={[Function]}
-          disabled={false}
-          fluid={false}
-          text="New document"
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl="https://127.0.0.1:5000/api/documents/"
-        />
-      </div>
-    }
-    name="documents"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={
-      Array [
-        Object {
-          "Authors": "Author1",
-          "Created": "2018-01-01",
-          "ID": "3",
-          "Title": "This is a title",
-          "Updated": "2018-01-01",
-        },
-      ]
-    }
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <div>
-                      <NewButton
-                        clickHandler={[Function]}
-                        disabled={false}
-                        fluid={false}
-                        text="New document"
-                      >
-                        <Button
-                          as="button"
-                          icon={true}
-                          labelPosition="left"
-                          onClick={[Function]}
-                          positive={true}
-                          size="small"
-                        >
-                          <Ref
-                            innerRef={
-                              Object {
-                                "current": <button
-                                  class="ui small icon positive left labeled button"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                  New document
-                                </button>,
-                              }
-                            }
-                          >
-                            <RefFindNode
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui small icon positive left labeled button"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="plus icon"
-                                    />
-                                    New document
-                                  </button>,
-                                }
-                              }
-                            >
-                              <button
-                                className="ui small icon positive left labeled button"
-                                onClick={[Function]}
-                              >
-                                <Icon
-                                  as="i"
-                                  name="plus"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    className="plus icon"
-                                    onClick={[Function]}
-                                  />
-                                </Icon>
-                                New document
-                              </button>
-                            </RefFindNode>
-                          </Ref>
-                        </Button>
-                      </NewButton>
-                      <ExportReactSearchKitResults
-                        exportBaseUrl="https://127.0.0.1:5000/api/documents/"
-                      />
-                    </div>
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Table
-          as="table"
-          selectable={true}
-          striped={true}
-        >
-          <table
-            className="ui selectable striped table"
-          >
-            <ResultsTableHeader
-              columns={
-                Array [
-                  "ID",
-                  "Created",
-                  "Updated",
-                  "Title",
-                  "Authors",
-                ]
-              }
-              withRowAction={true}
-            >
-              <TableHeader
-                as="thead"
-              >
-                <thead
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test="header"
-                  >
-                    <tr
-                      className=""
-                      data-test="header"
-                    >
-                      <TableHeaderCell
-                        as="th"
-                        collapsing={true}
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          collapsing={true}
-                          width={2}
-                        >
-                          <th
-                            className="collapsing two wide"
-                          />
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="ID"
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          width={2}
-                        >
-                          <th
-                            className="two wide"
-                          >
-                            ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Created"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Created
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Updated"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Updated
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Title"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Title
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Authors"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Authors
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                    </tr>
-                  </TableRow>
-                </thead>
-              </TableHeader>
-            </ResultsTableHeader>
-            <ResultsTableBody
-              columns={
-                Array [
-                  "ID",
-                  "Created",
-                  "Updated",
-                  "Title",
-                  "Authors",
-                ]
-              }
-              rowActionClickHandler={[Function]}
-              rows={
-                Array [
-                  Object {
-                    "Authors": "Author1",
-                    "Created": "2018-01-01",
-                    "ID": "3",
-                    "Title": "This is a title",
-                    "Updated": "2018-01-01",
-                  },
-                ]
-              }
-            >
-              <TableBody
-                as="tbody"
-              >
-                <tbody
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test="3"
-                    key="3"
-                  >
-                    <tr
-                      className=""
-                      data-test="3"
-                    >
-                      <TableCell
-                        as="td"
-                        textAlign="center"
-                      >
-                        <td
-                          className="center aligned"
-                        >
-                          <Button
-                            as="button"
-                            circular={true}
-                            compact={true}
-                            data-test="btn-view-details-3"
-                            icon="eye"
-                            onClick={[Function]}
-                          >
-                            <Ref
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui circular compact icon button"
-                                    data-test="btn-view-details-3"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="eye icon"
-                                    />
-                                  </button>,
-                                }
-                              }
-                            >
-                              <RefFindNode
-                                innerRef={
-                                  Object {
-                                    "current": <button
-                                      class="ui circular compact icon button"
-                                      data-test="btn-view-details-3"
-                                    >
-                                      <i
-                                        aria-hidden="true"
-                                        class="eye icon"
-                                      />
-                                    </button>,
-                                  }
-                                }
-                              >
-                                <button
-                                  className="ui circular compact icon button"
-                                  data-test="btn-view-details-3"
-                                  onClick={[Function]}
-                                >
-                                  <Icon
-                                    as="i"
-                                    name="eye"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      className="eye icon"
-                                      onClick={[Function]}
-                                    />
-                                  </Icon>
-                                </button>
-                              </RefFindNode>
-                            </Ref>
-                          </Button>
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="ID-3"
-                        key="0-3"
-                      >
-                        <td
-                          className=""
-                          data-test="ID-3"
-                        >
-                          3
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Created-3"
-                        key="1-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Created-3"
-                        >
-                          2018-01-01
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Updated-3"
-                        key="2-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Updated-3"
-                        >
-                          2018-01-01
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Title-3"
-                        key="3-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Title-3"
-                        >
-                          This is a title
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Authors-3"
-                        key="4-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Authors-3"
-                        >
-                          Author1
-                        </td>
-                      </TableCell>
-                    </tr>
-                  </TableRow>
-                </tbody>
-              </TableBody>
-            </ResultsTableBody>
-            <ResultsTableFooter
-              allRowsNumber={1}
-              columnsNumber={5}
-              currentPage={1}
-              paginationComponent={null}
-              seeAllComponent={null}
-              showAllResults={false}
-              showMaxRows={10}
-            />
-          </table>
-        </Table>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/ResultsList/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/ResultsList/ResultsList.js
deleted file mode 100644
index 8fa14f610..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/ResultsList/ResultsList.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ResultsTable } from '../../../../../common/components';
-import { NewButton } from '../../../components/buttons';
-import { formatter } from '../../../../../common/components/ResultsTable/formatters';
-import pick from 'lodash/pick';
-import { ExportReactSearchKitResults } from '../../../components';
-import { document as documentApi } from '../../../../../common/api';
-import { BackOfficeRoutes } from '../../../../../routes/urls';
-import { goToHandler } from '../../../../../history';
-
-export class ResultsList extends Component {
-  prepareData(data) {
-    return data.map(row => {
-      return pick(formatter.document.toTable(row), [
-        'ID',
-        'Created',
-        'Updated',
-        'Title',
-        'Authors',
-        'Series',
-        'Available Items',
-        'Past Loans Count',
-      ]);
-    });
-  }
-
-  render() {
-    const rows = this.prepareData(this.props.results);
-    const headerActionComponent = (
-      <div>
-        <NewButton
-          text={'New document'}
-          clickHandler={goToHandler(BackOfficeRoutes.documentCreate)}
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl={documentApi.searchBaseURL}
-        />
-      </div>
-    );
-
-    return (
-      <ResultsTable
-        rows={rows}
-        title={''}
-        name={'documents'}
-        headerActionComponent={headerActionComponent}
-        rowActionClickHandler={this.props.viewDetailsClickHandler}
-      />
-    );
-  }
-}
-
-ResultsList.propTypes = {
-  results: PropTypes.array.isRequired,
-  viewDetailsClickHandler: PropTypes.func.isRequired,
-};
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/ResultsList/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/ResultsList/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/ResultsList/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/DocumentsSearch/components/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/EItemSearch.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/EItemSearch.js
index 5c4455829..94050b187 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/EItemSearch.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/EItemSearch.js
@@ -16,12 +16,15 @@ import {
   Error as IlsError,
   SearchBar as EItemsSearchBar,
   ResultsSort,
+  ResultsTable,
 } from '../../../../common/components';
+import { formatter } from '../../../../common/components/ResultsTable/formatters';
 import { eitem as eitemApi } from '../../../../common/api';
+import { ExportReactSearchKitResults } from '../../components';
 import { ClearButton, NewButton } from '../../components/buttons';
 import { BackOfficeRoutes } from '../../../../routes/urls';
-import { ResultsList as EItemsResultsList } from './components';
 import { goTo, goToHandler } from '../../../../history';
+import _omit from 'lodash/omit';
 
 export class EItemSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -41,13 +44,43 @@ export class EItemSearch extends Component {
     );
   };
 
-  renderResultsList = results => {
+  prepareData(data) {
+    return data.map(row => {
+      return _omit(formatter.eitem.toTable(row), [
+        'Created',
+        'Updated',
+        'Document ID',
+        'Internal Notes',
+      ]);
+    });
+  }
+
+  renderResultsTable = results => {
+    const rows = this.prepareData(results);
+    const maxRowsToShow =
+      rows.length > ResultsTable.defaultProps.showMaxRows
+        ? rows.length
+        : ResultsTable.defaultProps.showMaxRows;
+    const headerActionComponent = (
+      <div>
+        <NewButton
+          text={'New eitem'}
+          clickHandler={goToHandler(BackOfficeRoutes.eitemCreate)}
+        />
+        <ExportReactSearchKitResults exportBaseUrl={eitemApi.searchBaseURL} />
+      </div>
+    );
+
     return (
-      <EItemsResultsList
-        results={results}
-        viewDetailsClickHandler={row =>
+      <ResultsTable
+        rows={rows}
+        title={''}
+        name={'eitems'}
+        headerActionComponent={headerActionComponent}
+        rowActionClickHandler={row =>
           goTo(BackOfficeRoutes.eitemDetailsFor(row.ID))
         }
+        showMaxRows={maxRowsToShow}
       />
     );
   };
@@ -127,7 +160,7 @@ export class EItemSearch extends Component {
                 <EmptyResults renderElement={this.renderEmptyResults} />
                 <Error renderElement={this.renderError} />
                 {this.renderHeader()}
-                <ResultsList renderElement={this.renderResultsList} />
+                <ResultsList renderElement={this.renderResultsTable} />
                 {this.renderFooter()}
               </Grid.Column>
             </ResultsLoader>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/EItemSearch.js
similarity index 54%
rename from invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/ResultsList.js
rename to invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/EItemSearch.js
index d2e9f3be7..2fb90357c 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/ResultsList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/EItemSearch.js
@@ -1,53 +1,38 @@
 import React from 'react';
-import omit from 'lodash/omit';
 import { mount } from 'enzyme';
-import { Settings } from 'luxon';
-import { fromISO, toISO } from '../../../../../common/api/date';
-import { ResultsList } from '../components';
+import { ResultsTable } from '../../../../../common/components/';
+import testData from '../../../../../../../../../tests/data/eitems.json';
 import { formatter } from '../../../../../common/components/ResultsTable/formatters';
 
 jest.mock('../../../components');
 
-Settings.defaultZoneName = 'utc';
+let component;
+const data = [
+  { pid: testData[0].pid, metadata: testData[0] },
+  { pid: testData[1].pid, metadata: testData[1] },
+];
 
-describe('EItemsSearch ResultsList tests', () => {
-  const stringDate = fromISO('2018-01-01T11:05:00+01:00');
-
-  const results = [
-    {
-      id: 987,
-      created: toISO(stringDate),
-      updated: toISO(stringDate),
-      metadata: {
-        pid: 987,
-        description: 'A description.',
-        document_pid: 1342,
-        document: {
-          pid: 1342,
-        },
-        internal_notes: 'Internal notes.',
-      },
-    },
-  ];
-
-  let component;
-  afterEach(() => {
-    component.unmount();
-  });
+afterEach(() => {
+  component.unmount();
+});
 
+describe('EItemsSearch ResultsTable tests', () => {
   it('should not render when empty results', () => {
     component = mount(
-      <ResultsList results={[]} viewDetailsClickHandler={() => {}} />
+      <ResultsTable rows={[]} rowActionClickHandler={() => {}} />
     );
     expect(component).toMatchSnapshot();
   });
 
   it('should render a list of results', () => {
     component = mount(
-      <ResultsList results={results} viewDetailsClickHandler={() => {}} />
+      <ResultsTable
+        rows={data.map(row => formatter.eitem.toTable(row))}
+        rowActionClickHandler={() => {}}
+      />
     );
     expect(component).toMatchSnapshot();
-    const firstResult = results[0];
+    const firstResult = data[0];
     const resultRows = component
       .find('TableRow')
       .filterWhere(
@@ -72,21 +57,18 @@ describe('EItemsSearch ResultsList tests', () => {
   it('should call click handler on view details click', () => {
     const mockedClickHandler = jest.fn();
     component = mount(
-      <ResultsList
-        results={results}
-        viewDetailsClickHandler={mockedClickHandler}
+      <ResultsTable
+        rows={data.map(row => formatter.eitem.toTable(row))}
+        rowActionClickHandler={mockedClickHandler}
       />
     );
-    const firstId = results[0].metadata.pid;
+    const firstId = data[0].metadata.pid;
     const button = component
       .find('TableRow')
       .filterWhere(element => element.prop('data-test') === firstId)
       .find('button');
     button.simulate('click');
-    const expected = omit(formatter.eitem.toTable(results[0]), [
-      'Created',
-      'Updated',
-    ]);
+    const expected = formatter.eitem.toTable(data[0]);
     expect(mockedClickHandler).toHaveBeenCalledWith(expected);
   });
 });
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/__snapshots__/EItemSearch.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/__snapshots__/EItemSearch.js.snap
new file mode 100644
index 000000000..b933b0aad
--- /dev/null
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/__snapshots__/EItemSearch.js.snap
@@ -0,0 +1,724 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EItemsSearch ResultsTable tests should not render when empty results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={Array []}
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Message
+        data-test="no-results"
+      >
+        <div
+          className="ui message"
+          data-test="no-results"
+        >
+          There are no 
+          .
+        </div>
+      </Message>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
+
+exports[`EItemsSearch ResultsTable tests should render a list of results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={
+    Array [
+      Object {
+        "Created": "Invalid DateTime",
+        "Description": "Description of the electronic item",
+        "Document ID": "docid-1",
+        "ID": "eitemid-1",
+        "Internal Notes": "An internal note",
+        "Open access": "Yes",
+        "Title": "Document 1 title",
+        "Updated": "Invalid DateTime",
+      },
+      Object {
+        "Created": "Invalid DateTime",
+        "Description": "Description of the electronic item",
+        "Document ID": "docid-2",
+        "ID": "eitemid-2",
+        "Internal Notes": "An internal note",
+        "Open access": "No",
+        "Title": "Document 2 title",
+        "Updated": "Invalid DateTime",
+      },
+    ]
+  }
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Table
+        as="table"
+        compact={true}
+        selectable={true}
+        striped={true}
+      >
+        <table
+          className="ui selectable striped compact table"
+        >
+          <ResultsTableHeader
+            columns={
+              Array [
+                "ID",
+                "Document ID",
+                "Open access",
+                "Created",
+                "Updated",
+                "Title",
+                "Description",
+                "Internal Notes",
+              ]
+            }
+            withRowAction={false}
+          >
+            <TableHeader
+              as="thead"
+            >
+              <thead
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="header"
+                >
+                  <tr
+                    className=""
+                    data-test="header"
+                  >
+                    <TableHeaderCell
+                      as="th"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        />
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Document ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Document ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Open access"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Open access
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Created"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Created
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Updated"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Updated
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Title"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Title
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Description"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Description
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Internal Notes"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Internal Notes
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                  </tr>
+                </TableRow>
+              </thead>
+            </TableHeader>
+          </ResultsTableHeader>
+          <ResultsTableBody
+            columns={
+              Array [
+                "ID",
+                "Document ID",
+                "Open access",
+                "Created",
+                "Updated",
+                "Title",
+                "Description",
+                "Internal Notes",
+              ]
+            }
+            rowActionClickHandler={[Function]}
+            rows={
+              Array [
+                Object {
+                  "Created": "Invalid DateTime",
+                  "Description": "Description of the electronic item",
+                  "Document ID": "docid-1",
+                  "ID": "eitemid-1",
+                  "Internal Notes": "An internal note",
+                  "Open access": "Yes",
+                  "Title": "Document 1 title",
+                  "Updated": "Invalid DateTime",
+                },
+                Object {
+                  "Created": "Invalid DateTime",
+                  "Description": "Description of the electronic item",
+                  "Document ID": "docid-2",
+                  "ID": "eitemid-2",
+                  "Internal Notes": "An internal note",
+                  "Open access": "No",
+                  "Title": "Document 2 title",
+                  "Updated": "Invalid DateTime",
+                },
+              ]
+            }
+          >
+            <TableBody
+              as="tbody"
+            >
+              <tbody
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="eitemid-1"
+                  key="eitemid-1"
+                >
+                  <tr
+                    className=""
+                    data-test="eitemid-1"
+                  >
+                    <TableCell
+                      as="td"
+                      textAlign="center"
+                    >
+                      <td
+                        className="center aligned"
+                      >
+                        <Button
+                          as="button"
+                          compact={true}
+                          data-test="btn-view-details-eitemid-1"
+                          icon="info"
+                          onClick={[Function]}
+                        >
+                          <Ref
+                            innerRef={
+                              Object {
+                                "current": <button
+                                  class="ui compact icon button"
+                                  data-test="btn-view-details-eitemid-1"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="info icon"
+                                  />
+                                </button>,
+                              }
+                            }
+                          >
+                            <RefFindNode
+                              innerRef={
+                                Object {
+                                  "current": <button
+                                    class="ui compact icon button"
+                                    data-test="btn-view-details-eitemid-1"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="info icon"
+                                    />
+                                  </button>,
+                                }
+                              }
+                            >
+                              <button
+                                className="ui compact icon button"
+                                data-test="btn-view-details-eitemid-1"
+                                onClick={[Function]}
+                              >
+                                <Icon
+                                  as="i"
+                                  name="info"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    className="info icon"
+                                    onClick={[Function]}
+                                  />
+                                </Icon>
+                              </button>
+                            </RefFindNode>
+                          </Ref>
+                        </Button>
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="ID-eitemid-1"
+                      key="0-eitemid-1"
+                    >
+                      <td
+                        className=""
+                        data-test="ID-eitemid-1"
+                      >
+                        eitemid-1
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Document ID-eitemid-1"
+                      key="1-eitemid-1"
+                    >
+                      <td
+                        className=""
+                        data-test="Document ID-eitemid-1"
+                      >
+                        docid-1
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Open access-eitemid-1"
+                      key="2-eitemid-1"
+                    >
+                      <td
+                        className=""
+                        data-test="Open access-eitemid-1"
+                      >
+                        Yes
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Created-eitemid-1"
+                      key="3-eitemid-1"
+                    >
+                      <td
+                        className=""
+                        data-test="Created-eitemid-1"
+                      >
+                        Invalid DateTime
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Updated-eitemid-1"
+                      key="4-eitemid-1"
+                    >
+                      <td
+                        className=""
+                        data-test="Updated-eitemid-1"
+                      >
+                        Invalid DateTime
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Title-eitemid-1"
+                      key="5-eitemid-1"
+                    >
+                      <td
+                        className=""
+                        data-test="Title-eitemid-1"
+                      >
+                        Document 1 title
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Description-eitemid-1"
+                      key="6-eitemid-1"
+                    >
+                      <td
+                        className=""
+                        data-test="Description-eitemid-1"
+                      >
+                        Description of the electronic item
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Internal Notes-eitemid-1"
+                      key="7-eitemid-1"
+                    >
+                      <td
+                        className=""
+                        data-test="Internal Notes-eitemid-1"
+                      >
+                        An internal note
+                      </td>
+                    </TableCell>
+                  </tr>
+                </TableRow>
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="eitemid-2"
+                  key="eitemid-2"
+                >
+                  <tr
+                    className=""
+                    data-test="eitemid-2"
+                  >
+                    <TableCell
+                      as="td"
+                      textAlign="center"
+                    >
+                      <td
+                        className="center aligned"
+                      >
+                        <Button
+                          as="button"
+                          compact={true}
+                          data-test="btn-view-details-eitemid-2"
+                          icon="info"
+                          onClick={[Function]}
+                        >
+                          <Ref
+                            innerRef={
+                              Object {
+                                "current": <button
+                                  class="ui compact icon button"
+                                  data-test="btn-view-details-eitemid-2"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="info icon"
+                                  />
+                                </button>,
+                              }
+                            }
+                          >
+                            <RefFindNode
+                              innerRef={
+                                Object {
+                                  "current": <button
+                                    class="ui compact icon button"
+                                    data-test="btn-view-details-eitemid-2"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="info icon"
+                                    />
+                                  </button>,
+                                }
+                              }
+                            >
+                              <button
+                                className="ui compact icon button"
+                                data-test="btn-view-details-eitemid-2"
+                                onClick={[Function]}
+                              >
+                                <Icon
+                                  as="i"
+                                  name="info"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    className="info icon"
+                                    onClick={[Function]}
+                                  />
+                                </Icon>
+                              </button>
+                            </RefFindNode>
+                          </Ref>
+                        </Button>
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="ID-eitemid-2"
+                      key="0-eitemid-2"
+                    >
+                      <td
+                        className=""
+                        data-test="ID-eitemid-2"
+                      >
+                        eitemid-2
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Document ID-eitemid-2"
+                      key="1-eitemid-2"
+                    >
+                      <td
+                        className=""
+                        data-test="Document ID-eitemid-2"
+                      >
+                        docid-2
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Open access-eitemid-2"
+                      key="2-eitemid-2"
+                    >
+                      <td
+                        className=""
+                        data-test="Open access-eitemid-2"
+                      >
+                        No
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Created-eitemid-2"
+                      key="3-eitemid-2"
+                    >
+                      <td
+                        className=""
+                        data-test="Created-eitemid-2"
+                      >
+                        Invalid DateTime
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Updated-eitemid-2"
+                      key="4-eitemid-2"
+                    >
+                      <td
+                        className=""
+                        data-test="Updated-eitemid-2"
+                      >
+                        Invalid DateTime
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Title-eitemid-2"
+                      key="5-eitemid-2"
+                    >
+                      <td
+                        className=""
+                        data-test="Title-eitemid-2"
+                      >
+                        Document 2 title
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Description-eitemid-2"
+                      key="6-eitemid-2"
+                    >
+                      <td
+                        className=""
+                        data-test="Description-eitemid-2"
+                      >
+                        Description of the electronic item
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Internal Notes-eitemid-2"
+                      key="7-eitemid-2"
+                    >
+                      <td
+                        className=""
+                        data-test="Internal Notes-eitemid-2"
+                      >
+                        An internal note
+                      </td>
+                    </TableCell>
+                  </tr>
+                </TableRow>
+              </tbody>
+            </TableBody>
+          </ResultsTableBody>
+          <ResultsTableFooter
+            allRowsNumber={2}
+            columnsNumber={8}
+            currentPage={1}
+            paginationComponent={null}
+            seeAllComponent={null}
+            showAllResults={false}
+            showMaxRows={10}
+          />
+        </table>
+      </Table>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/__snapshots__/ResultsList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/__snapshots__/ResultsList.js.snap
deleted file mode 100644
index 3b3544c2e..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/__tests__/__snapshots__/ResultsList.js.snap
+++ /dev/null
@@ -1,638 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EItemsSearch ResultsList tests should not render when empty results 1`] = `
-<ResultsList
-  results={Array []}
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <div>
-        <NewButton
-          clickHandler={[Function]}
-          disabled={false}
-          fluid={false}
-          text="New eitem"
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl="https://127.0.0.1:5000/api/eitems/"
-        />
-      </div>
-    }
-    name="eitems"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={Array []}
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <div>
-                      <NewButton
-                        clickHandler={[Function]}
-                        disabled={false}
-                        fluid={false}
-                        text="New eitem"
-                      >
-                        <Button
-                          as="button"
-                          icon={true}
-                          labelPosition="left"
-                          onClick={[Function]}
-                          positive={true}
-                          size="small"
-                        >
-                          <Ref
-                            innerRef={
-                              Object {
-                                "current": <button
-                                  class="ui small icon positive left labeled button"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                  New eitem
-                                </button>,
-                              }
-                            }
-                          >
-                            <RefFindNode
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui small icon positive left labeled button"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="plus icon"
-                                    />
-                                    New eitem
-                                  </button>,
-                                }
-                              }
-                            >
-                              <button
-                                className="ui small icon positive left labeled button"
-                                onClick={[Function]}
-                              >
-                                <Icon
-                                  as="i"
-                                  name="plus"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    className="plus icon"
-                                    onClick={[Function]}
-                                  />
-                                </Icon>
-                                New eitem
-                              </button>
-                            </RefFindNode>
-                          </Ref>
-                        </Button>
-                      </NewButton>
-                      <ExportReactSearchKitResults
-                        exportBaseUrl="https://127.0.0.1:5000/api/eitems/"
-                      />
-                    </div>
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Message
-          data-test="no-results"
-        >
-          <div
-            className="ui message"
-            data-test="no-results"
-          >
-            There are no 
-            eitems
-            .
-          </div>
-        </Message>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
-
-exports[`EItemsSearch ResultsList tests should render a list of results 1`] = `
-<ResultsList
-  results={
-    Array [
-      Object {
-        "created": "2018-01-01T10:05:00.000Z",
-        "id": 987,
-        "metadata": Object {
-          "description": "A description.",
-          "document": Object {
-            "pid": 1342,
-          },
-          "document_pid": 1342,
-          "internal_notes": "Internal notes.",
-          "pid": 987,
-        },
-        "updated": "2018-01-01T10:05:00.000Z",
-      },
-    ]
-  }
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <div>
-        <NewButton
-          clickHandler={[Function]}
-          disabled={false}
-          fluid={false}
-          text="New eitem"
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl="https://127.0.0.1:5000/api/eitems/"
-        />
-      </div>
-    }
-    name="eitems"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={
-      Array [
-        Object {
-          "Description": "A description.",
-          "Document ID": 1342,
-          "ID": 987,
-          "Internal Notes": "Internal notes.",
-          "Open access": "No",
-        },
-      ]
-    }
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <div>
-                      <NewButton
-                        clickHandler={[Function]}
-                        disabled={false}
-                        fluid={false}
-                        text="New eitem"
-                      >
-                        <Button
-                          as="button"
-                          icon={true}
-                          labelPosition="left"
-                          onClick={[Function]}
-                          positive={true}
-                          size="small"
-                        >
-                          <Ref
-                            innerRef={
-                              Object {
-                                "current": <button
-                                  class="ui small icon positive left labeled button"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                  New eitem
-                                </button>,
-                              }
-                            }
-                          >
-                            <RefFindNode
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui small icon positive left labeled button"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="plus icon"
-                                    />
-                                    New eitem
-                                  </button>,
-                                }
-                              }
-                            >
-                              <button
-                                className="ui small icon positive left labeled button"
-                                onClick={[Function]}
-                              >
-                                <Icon
-                                  as="i"
-                                  name="plus"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    className="plus icon"
-                                    onClick={[Function]}
-                                  />
-                                </Icon>
-                                New eitem
-                              </button>
-                            </RefFindNode>
-                          </Ref>
-                        </Button>
-                      </NewButton>
-                      <ExportReactSearchKitResults
-                        exportBaseUrl="https://127.0.0.1:5000/api/eitems/"
-                      />
-                    </div>
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Table
-          as="table"
-          selectable={true}
-          striped={true}
-        >
-          <table
-            className="ui selectable striped table"
-          >
-            <ResultsTableHeader
-              columns={
-                Array [
-                  "ID",
-                  "Document ID",
-                  "Open access",
-                  "Description",
-                  "Internal Notes",
-                ]
-              }
-              withRowAction={true}
-            >
-              <TableHeader
-                as="thead"
-              >
-                <thead
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test="header"
-                  >
-                    <tr
-                      className=""
-                      data-test="header"
-                    >
-                      <TableHeaderCell
-                        as="th"
-                        collapsing={true}
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          collapsing={true}
-                          width={2}
-                        >
-                          <th
-                            className="collapsing two wide"
-                          />
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="ID"
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          width={2}
-                        >
-                          <th
-                            className="two wide"
-                          >
-                            ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Document ID"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Document ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Open access"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Open access
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Description"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Description
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Internal Notes"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Internal Notes
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                    </tr>
-                  </TableRow>
-                </thead>
-              </TableHeader>
-            </ResultsTableHeader>
-            <ResultsTableBody
-              columns={
-                Array [
-                  "ID",
-                  "Document ID",
-                  "Open access",
-                  "Description",
-                  "Internal Notes",
-                ]
-              }
-              rowActionClickHandler={[Function]}
-              rows={
-                Array [
-                  Object {
-                    "Description": "A description.",
-                    "Document ID": 1342,
-                    "ID": 987,
-                    "Internal Notes": "Internal notes.",
-                    "Open access": "No",
-                  },
-                ]
-              }
-            >
-              <TableBody
-                as="tbody"
-              >
-                <tbody
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test={987}
-                    key="987"
-                  >
-                    <tr
-                      className=""
-                      data-test={987}
-                    >
-                      <TableCell
-                        as="td"
-                        textAlign="center"
-                      >
-                        <td
-                          className="center aligned"
-                        >
-                          <Button
-                            as="button"
-                            circular={true}
-                            compact={true}
-                            data-test="btn-view-details-987"
-                            icon="eye"
-                            onClick={[Function]}
-                          >
-                            <Ref
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui circular compact icon button"
-                                    data-test="btn-view-details-987"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="eye icon"
-                                    />
-                                  </button>,
-                                }
-                              }
-                            >
-                              <RefFindNode
-                                innerRef={
-                                  Object {
-                                    "current": <button
-                                      class="ui circular compact icon button"
-                                      data-test="btn-view-details-987"
-                                    >
-                                      <i
-                                        aria-hidden="true"
-                                        class="eye icon"
-                                      />
-                                    </button>,
-                                  }
-                                }
-                              >
-                                <button
-                                  className="ui circular compact icon button"
-                                  data-test="btn-view-details-987"
-                                  onClick={[Function]}
-                                >
-                                  <Icon
-                                    as="i"
-                                    name="eye"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      className="eye icon"
-                                      onClick={[Function]}
-                                    />
-                                  </Icon>
-                                </button>
-                              </RefFindNode>
-                            </Ref>
-                          </Button>
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="ID-987"
-                        key="0-987"
-                      >
-                        <td
-                          className=""
-                          data-test="ID-987"
-                        >
-                          987
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Document ID-987"
-                        key="1-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Document ID-987"
-                        >
-                          1342
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Open access-987"
-                        key="2-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Open access-987"
-                        >
-                          No
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Description-987"
-                        key="3-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Description-987"
-                        >
-                          A description.
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Internal Notes-987"
-                        key="4-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Internal Notes-987"
-                        >
-                          Internal notes.
-                        </td>
-                      </TableCell>
-                    </tr>
-                  </TableRow>
-                </tbody>
-              </TableBody>
-            </ResultsTableBody>
-            <ResultsTableFooter
-              allRowsNumber={1}
-              columnsNumber={5}
-              currentPage={1}
-              paginationComponent={null}
-              seeAllComponent={null}
-              showAllResults={false}
-              showMaxRows={10}
-            />
-          </table>
-        </Table>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/ResultsList/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/ResultsList/ResultsList.js
deleted file mode 100644
index ce1801c10..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/ResultsList/ResultsList.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ResultsTable } from '../../../../../../common/components';
-import { NewButton } from '../../../../components/buttons';
-import { formatter } from '../../../../../../common/components/ResultsTable/formatters';
-import omit from 'lodash/omit';
-import { ExportReactSearchKitResults } from '../../../../components';
-import { eitem as eitemApi } from '../../../../../../common/api';
-import { BackOfficeRoutes } from '../../../../../../routes/urls';
-import { goToHandler } from '../../../../../../history';
-
-export class ResultsList extends Component {
-  constructor(props) {
-    super(props);
-    this.viewDetailsClickHandler = this.props.viewDetailsClickHandler;
-  }
-
-  prepareData() {
-    return this.props.results.map(row => {
-      return omit(formatter.eitem.toTable(row), ['Created', 'Updated']);
-    });
-  }
-
-  render() {
-    const rows = this.prepareData();
-    const maxRowsToShow =
-      rows.length > ResultsTable.defaultProps.showMaxRows
-        ? rows.length
-        : ResultsTable.defaultProps.showMaxRows;
-    const headerActionComponent = (
-      <div>
-        <NewButton
-          text={'New eitem'}
-          clickHandler={goToHandler(BackOfficeRoutes.eitemCreate)}
-        />
-        <ExportReactSearchKitResults exportBaseUrl={eitemApi.searchBaseURL} />
-      </div>
-    );
-
-    return (
-      <ResultsTable
-        rows={rows}
-        title={''}
-        name={'eitems'}
-        headerActionComponent={headerActionComponent}
-        rowActionClickHandler={this.viewDetailsClickHandler}
-        showMaxRows={maxRowsToShow}
-      />
-    );
-  }
-}
-
-ResultsList.propTypes = {
-  results: PropTypes.array.isRequired,
-  viewDetailsClickHandler: PropTypes.func.isRequired,
-};
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/ResultsList/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/ResultsList/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/ResultsList/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/EItem/EItemSearch/components/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/Home.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/Home.js
index aaf79e8ac..af1478e28 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/Home.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/Home.js
@@ -33,13 +33,13 @@ export default class Home extends Component {
 
         <Grid.Row columns={2}>
           <Grid.Column>
-            <OverbookedDocumentsList />
+            <IdleLoansList />
             <OverdueLoansList />
+            <RenewedLoansList />
           </Grid.Column>
           <Grid.Column>
+            <OverbookedDocumentsList />
             <PendingOverdueDocumentsList />
-            <RenewedLoansList />
-            <IdleLoansList />
           </Grid.Column>
         </Grid.Row>
       </Grid>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/IdleLoansList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/IdleLoansList.js
index f60cd440a..5656b46aa 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/IdleLoansList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/IdleLoansList.js
@@ -43,7 +43,7 @@ export default class IdleLoansList extends Component {
         'Updated',
         'Patron ID',
         'Document ID',
-        'Start date',
+        'Requested',
       ]);
     });
   }
@@ -54,9 +54,9 @@ export default class IdleLoansList extends Component {
     return (
       <ResultsTable
         rows={rows}
-        title={'Idle loans'}
+        title={'Idle loan requests'}
         subtitle={'Loan requests pending since more than 10 days.'}
-        name={'idle loans'}
+        name={'idle loan requests'}
         rowActionClickHandler={row => goTo(this.showDetailsUrl(row.ID))}
         seeAllComponent={this.seeAllButton()}
         showMaxRows={this.props.showMaxEntries}
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/__tests__/IdleLoansList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/__tests__/IdleLoansList.js
index 843e42c88..5e1977b7d 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/__tests__/IdleLoansList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/__tests__/IdleLoansList.js
@@ -1,23 +1,36 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Settings } from 'luxon';
 import { BackOfficeRoutes } from '../../../../../../../routes/urls';
 import IdleLoansList from '../IdleLoansList';
 import history from '../../../../../../../history';
+import testData from '../../../../../../../../../../../tests/data/loans.json';
 
 jest.mock('../../../../../../../common/config/invenioConfig');
 
-Settings.defaultZoneName = 'utc';
-const stringDate = '2018-01-01T11:05:00+01:00';
+const data = {
+  hits: [
+    {
+      id: 1,
+      pid: 'loan1',
+      metadata: testData[0],
+    },
+    {
+      id: 2,
+      pid: 'loan2',
+      metadata: testData[1],
+    },
+  ],
+  total: 2,
+};
 
-describe('IdleLoansList tests', () => {
-  let component;
-  afterEach(() => {
-    if (component) {
-      component.unmount();
-    }
-  });
+let component;
+afterEach(() => {
+  if (component) {
+    component.unmount();
+  }
+});
 
+describe('IdleLoansList tests', () => {
   it('should load the details component', () => {
     const component = shallow(
       <IdleLoansList
@@ -55,38 +68,6 @@ describe('IdleLoansList tests', () => {
   });
 
   it('should render loans', () => {
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-            document_pid: 'doc1',
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-            document_pid: 'doc1',
-          },
-        },
-      ],
-      total: 2,
-    };
-
     component = mount(
       <IdleLoansList data={data} fetchIdlePendingLoans={() => {}} />
     );
@@ -110,24 +91,6 @@ describe('IdleLoansList tests', () => {
   it('should go to loan details when clicking on a loan', () => {
     const mockedHistoryPush = jest.fn();
     history.push = mockedHistoryPush;
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 1,
-    };
 
     component = mount(
       <IdleLoansList
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/__tests__/__snapshots__/IdleLoansList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/__tests__/__snapshots__/IdleLoansList.js.snap
index 51fab0095..7ea9516f5 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/__tests__/__snapshots__/IdleLoansList.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/IdleLoansList/__tests__/__snapshots__/IdleLoansList.js.snap
@@ -8,7 +8,7 @@ exports[`IdleLoansList tests should load the details component 1`] = `
       fixed={false}
       headerActionClickHandler={null}
       headerActionComponent={null}
-      name="idle loans"
+      name="idle loan requests"
       paginationComponent={null}
       renderSegment={true}
       rowActionClickHandler={[Function]}
@@ -24,7 +24,7 @@ exports[`IdleLoansList tests should load the details component 1`] = `
       showMaxRows={5}
       singleLine={false}
       subtitle="Loan requests pending since more than 10 days."
-      title="Idle loans"
+      title="Idle loan requests"
     />
   </Error>
 </Loader>
@@ -36,30 +36,44 @@ exports[`IdleLoansList tests should render loans 1`] = `
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T11:05:00+01:00",
           "id": 1,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T11:05:00+01:00",
-            "patron_pid": "patron_1",
-            "pid": "loan1",
-            "start_date": "2018-01-01T11:05:00+01:00",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-1",
+            "patron": Object {
+              "email": "patron1@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-1",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan1",
-          "updated": "2018-01-01T11:05:00+01:00",
         },
         Object {
-          "created": "2018-01-01T11:05:00+01:00",
           "id": 2,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T11:05:00+01:00",
-            "patron_pid": "patron_2",
-            "pid": "loan2",
-            "start_date": "2018-01-01T11:05:00+01:00",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-2",
+            "patron": Object {
+              "email": "patron2@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-2",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan2",
-          "updated": "2018-01-01T11:05:00+01:00",
         },
       ],
       "total": 2,
@@ -75,23 +89,23 @@ exports[`IdleLoansList tests should render loans 1`] = `
         fixed={false}
         headerActionClickHandler={null}
         headerActionComponent={null}
-        name="idle loans"
+        name="idle loan requests"
         paginationComponent={null}
         renderSegment={true}
         rowActionClickHandler={[Function]}
         rows={
           Array [
             Object {
-              "Document ID": "doc1",
+              "Document ID": "docid-1",
               "ID": "loan1",
-              "Patron ID": "patron_1",
-              "Start date": "2018-01-01",
+              "Patron ID": "1",
+              "Requested": null,
             },
             Object {
-              "Document ID": "doc1",
+              "Document ID": "docid-1",
               "ID": "loan2",
-              "Patron ID": "patron_2",
-              "Start date": "2018-01-01",
+              "Patron ID": "1",
+              "Requested": null,
             },
           ]
         }
@@ -106,7 +120,7 @@ exports[`IdleLoansList tests should render loans 1`] = `
         showMaxRows={5}
         singleLine={false}
         subtitle="Loan requests pending since more than 10 days."
-        title="Idle loans"
+        title="Idle loan requests"
       >
         <Segment>
           <div
@@ -122,20 +136,20 @@ exports[`IdleLoansList tests should render loans 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
-                          content="Idle loans"
+                          content="Idle loan requests"
                           subheader="Loan requests pending since more than 10 days."
                         >
                           <h3
                             className="ui header"
                           >
-                            Idle loans
+                            Idle loan requests
                             <HeaderSubheader
                               content="Loan requests pending since more than 10 days."
                             >
@@ -163,11 +177,12 @@ exports[`IdleLoansList tests should render loans 1`] = `
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -175,10 +190,10 @@ exports[`IdleLoansList tests should render loans 1`] = `
                       "ID",
                       "Patron ID",
                       "Document ID",
-                      "Start date",
+                      "Requested",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -197,32 +212,26 @@ exports[`IdleLoansList tests should render loans 1`] = `
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -260,7 +269,7 @@ exports[`IdleLoansList tests should render loans 1`] = `
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
-                            key="Start date"
+                            key="Requested"
                           >
                             <TableCell
                               as="th"
@@ -269,7 +278,7 @@ exports[`IdleLoansList tests should render loans 1`] = `
                               <th
                                 className=""
                               >
-                                Start date
+                                Requested
                               </th>
                             </TableCell>
                           </TableHeaderCell>
@@ -284,23 +293,23 @@ exports[`IdleLoansList tests should render loans 1`] = `
                       "ID",
                       "Patron ID",
                       "Document ID",
-                      "Start date",
+                      "Requested",
                     ]
                   }
                   rowActionClickHandler={[Function]}
                   rows={
                     Array [
                       Object {
-                        "Document ID": "doc1",
+                        "Document ID": "docid-1",
                         "ID": "loan1",
-                        "Patron ID": "patron_1",
-                        "Start date": "2018-01-01",
+                        "Patron ID": "1",
+                        "Requested": null,
                       },
                       Object {
-                        "Document ID": "doc1",
+                        "Document ID": "docid-1",
                         "ID": "loan2",
-                        "Patron ID": "patron_2",
-                        "Start date": "2018-01-01",
+                        "Patron ID": "1",
+                        "Requested": null,
                       },
                     ]
                   }
@@ -330,22 +339,21 @@ exports[`IdleLoansList tests should render loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -355,29 +363,29 @@ exports[`IdleLoansList tests should render loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -408,7 +416,7 @@ exports[`IdleLoansList tests should render loans 1`] = `
                               className=""
                               data-test="Patron ID-loan1"
                             >
-                              patron_1
+                              1
                             </td>
                           </TableCell>
                           <TableCell
@@ -420,19 +428,19 @@ exports[`IdleLoansList tests should render loans 1`] = `
                               className=""
                               data-test="Document ID-loan1"
                             >
-                              doc1
+                              docid-1
                             </td>
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="Start date-loan1"
+                            data-test="Requested-loan1"
                             key="3-loan1"
                           >
                             <td
                               className=""
-                              data-test="Start date-loan1"
+                              data-test="Requested-loan1"
                             >
-                              2018-01-01
+                              -
                             </td>
                           </TableCell>
                         </tr>
@@ -456,22 +464,21 @@ exports[`IdleLoansList tests should render loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan2"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan2"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -481,29 +488,29 @@ exports[`IdleLoansList tests should render loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan2"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan2"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -534,7 +541,7 @@ exports[`IdleLoansList tests should render loans 1`] = `
                               className=""
                               data-test="Patron ID-loan2"
                             >
-                              patron_2
+                              1
                             </td>
                           </TableCell>
                           <TableCell
@@ -546,19 +553,19 @@ exports[`IdleLoansList tests should render loans 1`] = `
                               className=""
                               data-test="Document ID-loan2"
                             >
-                              doc1
+                              docid-1
                             </td>
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="Start date-loan2"
+                            data-test="Requested-loan2"
                             key="3-loan2"
                           >
                             <td
                               className=""
-                              data-test="Start date-loan2"
+                              data-test="Requested-loan2"
                             >
-                              2018-01-01
+                              -
                             </td>
                           </TableCell>
                         </tr>
@@ -609,7 +616,7 @@ exports[`IdleLoansList tests should render show a message with no loans 1`] = `
         fixed={false}
         headerActionClickHandler={null}
         headerActionComponent={null}
-        name="idle loans"
+        name="idle loan requests"
         paginationComponent={null}
         renderSegment={true}
         rowActionClickHandler={[Function]}
@@ -625,7 +632,7 @@ exports[`IdleLoansList tests should render show a message with no loans 1`] = `
         showMaxRows={5}
         singleLine={false}
         subtitle="Loan requests pending since more than 10 days."
-        title="Idle loans"
+        title="Idle loan requests"
       >
         <Segment>
           <div
@@ -641,20 +648,20 @@ exports[`IdleLoansList tests should render show a message with no loans 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
-                          content="Idle loans"
+                          content="Idle loan requests"
                           subheader="Loan requests pending since more than 10 days."
                         >
                           <h3
                             className="ui header"
                           >
-                            Idle loans
+                            Idle loan requests
                             <HeaderSubheader
                               content="Loan requests pending since more than 10 days."
                             >
@@ -688,7 +695,7 @@ exports[`IdleLoansList tests should render show a message with no loans 1`] = `
                 data-test="no-results"
               >
                 There are no 
-                idle loans
+                idle loan requests
                 .
               </div>
             </Message>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/OverbookedDocumentsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/OverbookedDocumentsList.js
index 15dd84788..74ecc7367 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/OverbookedDocumentsList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/OverbookedDocumentsList.js
@@ -38,7 +38,7 @@ export default class OverbookedDocumentsList extends Component {
   prepareData(data) {
     return data.hits.map(row => {
       let entry = formatter.document.toTable(row);
-      return pick(entry, ['ID', 'Title', 'Requests', 'Available Items']);
+      return pick(entry, ['ID', 'Title', 'Pending Requests']);
     });
   }
 
@@ -56,7 +56,6 @@ export default class OverbookedDocumentsList extends Component {
         rowActionClickHandler={row => goTo(this.showDetailsUrl(row.ID))}
         seeAllComponent={this.seeAllButton()}
         showMaxRows={this.props.showMaxEntries}
-        fixed
         singleLine
       />
     );
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/__tests__/OverbookedDocumentsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/__tests__/OverbookedDocumentsList.js
index 71afd321a..9ccfb2a2e 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/__tests__/OverbookedDocumentsList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/__tests__/OverbookedDocumentsList.js
@@ -1,13 +1,25 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Settings } from 'luxon';
-import { fromISO } from '../../../../../../../common/api/date';
 import { BackOfficeRoutes } from '../../../../../../../routes/urls';
 import OverbookedDocumentsList from '../OverbookedDocumentsList';
 import history from '../../../../../../../history';
+import testData from '../../../../../../../../../../../tests/data/documents.json';
 
-Settings.defaultZoneName = 'utc';
-const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+const data = {
+  hits: [
+    {
+      id: 1,
+      pid: 'doc1',
+      metadata: testData[0],
+    },
+    {
+      id: 2,
+      pid: 'doc2',
+      metadata: testData[1],
+    },
+  ],
+  total: 2,
+};
 
 describe('OverbookedDocumentsList tests', () => {
   let component;
@@ -54,38 +66,6 @@ describe('OverbookedDocumentsList tests', () => {
   });
 
   it('should render documents', () => {
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'doc1',
-          metadata: {
-            title: { title: 'X' },
-            authors: ['Author1'],
-            abstracts: 'This is an abstract',
-            circulation: {
-              pending_loans: 1,
-              has_items_for_loan: 2,
-            },
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'doc2',
-          metadata: {
-            title: { title: 'X' },
-            authors: ['Author1'],
-            abstracts: 'This is an abstract',
-          },
-        },
-      ],
-      total: 2,
-    };
-
     component = mount(
       <OverbookedDocumentsList
         data={data}
@@ -112,22 +92,6 @@ describe('OverbookedDocumentsList tests', () => {
   it('should go to loan details when clicking on a document', () => {
     const mockedHistoryPush = jest.fn();
     history.push = mockedHistoryPush;
-    const data = {
-      hits: [
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'doc2',
-          metadata: {
-            title: { title: 'X' },
-            authors: ['Author1'],
-            abstracts: 'This is an abstract',
-          },
-        },
-      ],
-      total: 1,
-    };
 
     component = mount(
       <OverbookedDocumentsList
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/__tests__/__snapshots__/OverbookedDocumentsList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/__tests__/__snapshots__/OverbookedDocumentsList.js.snap
index 8422083d2..9d9c89a32 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/__tests__/__snapshots__/OverbookedDocumentsList.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverbookedDocumentsList/__tests__/__snapshots__/OverbookedDocumentsList.js.snap
@@ -5,7 +5,7 @@ exports[`OverbookedDocumentsList tests should load the details component 1`] = `
   <Error>
     <ResultsTable
       currentPage={1}
-      fixed={true}
+      fixed={false}
       headerActionClickHandler={null}
       headerActionComponent={null}
       name="overbooked documents"
@@ -36,38 +36,47 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 1,
           "metadata": Object {
-            "abstracts": "This is an abstract",
+            "abstract": "This is an abstract",
             "authors": Array [
-              "Author1",
+              Object {
+                "full_name": "Jack E. Davis",
+              },
             ],
-            "circulation": Object {
-              "has_items_for_loan": 2,
-              "pending_loans": 1,
-            },
-            "title": Object {
-              "title": "X",
+            "edition": "ed. 1",
+            "keywords": Object {
+              "source": "X",
+              "value": "Patata",
             },
+            "languages": Array [
+              "en",
+            ],
+            "pid": "docid-1",
+            "title": "The Gulf: The Making of An American Sea",
           },
           "pid": "doc1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 2,
           "metadata": Object {
-            "abstracts": "This is an abstract",
+            "abstract": "This is an abstract",
             "authors": Array [
-              "Author1",
+              Object {
+                "full_name": "Caroline Fraser",
+              },
             ],
-            "title": Object {
-              "title": "X",
+            "keywords": Object {
+              "source": "X",
+              "value": "Patata",
             },
+            "languages": Array [
+              "it",
+            ],
+            "pid": "docid-2",
+            "title": "Prairie Fires: The American Dreams of Laura Ingalls Wilder",
           },
           "pid": "doc2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -80,7 +89,7 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
     <Error>
       <ResultsTable
         currentPage={1}
-        fixed={true}
+        fixed={false}
         headerActionClickHandler={null}
         headerActionComponent={null}
         name="overbooked documents"
@@ -90,14 +99,12 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
         rows={
           Array [
             Object {
-              "Available Items": 2,
               "ID": "doc1",
-              "Requests": 1,
-              "Title": "X",
+              "Title": "The Gulf: The Making of An American Sea",
             },
             Object {
               "ID": "doc2",
-              "Title": "X",
+              "Title": "Prairie Fires: The American Dreams of Laura Ingalls Wilder",
             },
           ]
         }
@@ -128,10 +135,10 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -169,24 +176,22 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
             </Grid>
             <Table
               as="table"
-              fixed={true}
+              compact={true}
               selectable={true}
               singleLine={true}
               striped={true}
             >
               <table
-                className="ui fixed selectable single line striped table"
+                className="ui selectable single line striped compact table"
               >
                 <ResultsTableHeader
                   columns={
                     Array [
                       "ID",
                       "Title",
-                      "Requests",
-                      "Available Items",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -205,32 +210,26 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -251,36 +250,6 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
                               </th>
                             </TableCell>
                           </TableHeaderCell>
-                          <TableHeaderCell
-                            as="th"
-                            key="Requests"
-                          >
-                            <TableCell
-                              as="th"
-                              className=""
-                            >
-                              <th
-                                className=""
-                              >
-                                Requests
-                              </th>
-                            </TableCell>
-                          </TableHeaderCell>
-                          <TableHeaderCell
-                            as="th"
-                            key="Available Items"
-                          >
-                            <TableCell
-                              as="th"
-                              className=""
-                            >
-                              <th
-                                className=""
-                              >
-                                Available Items
-                              </th>
-                            </TableCell>
-                          </TableHeaderCell>
                         </tr>
                       </TableRow>
                     </thead>
@@ -291,22 +260,18 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
                     Array [
                       "ID",
                       "Title",
-                      "Requests",
-                      "Available Items",
                     ]
                   }
                   rowActionClickHandler={[Function]}
                   rows={
                     Array [
                       Object {
-                        "Available Items": 2,
                         "ID": "doc1",
-                        "Requests": 1,
-                        "Title": "X",
+                        "Title": "The Gulf: The Making of An American Sea",
                       },
                       Object {
                         "ID": "doc2",
-                        "Title": "X",
+                        "Title": "Prairie Fires: The American Dreams of Laura Ingalls Wilder",
                       },
                     ]
                   }
@@ -336,22 +301,21 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-doc1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-doc1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -361,29 +325,29 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-doc1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-doc1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -414,31 +378,7 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
                               className=""
                               data-test="Title-doc1"
                             >
-                              X
-                            </td>
-                          </TableCell>
-                          <TableCell
-                            as="td"
-                            data-test="Requests-doc1"
-                            key="2-doc1"
-                          >
-                            <td
-                              className=""
-                              data-test="Requests-doc1"
-                            >
-                              1
-                            </td>
-                          </TableCell>
-                          <TableCell
-                            as="td"
-                            data-test="Available Items-doc1"
-                            key="3-doc1"
-                          >
-                            <td
-                              className=""
-                              data-test="Available Items-doc1"
-                            >
-                              2
+                              The Gulf: The Making of An American Sea
                             </td>
                           </TableCell>
                         </tr>
@@ -462,22 +402,21 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-doc2"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-doc2"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -487,29 +426,29 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-doc2"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-doc2"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -540,31 +479,7 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
                               className=""
                               data-test="Title-doc2"
                             >
-                              X
-                            </td>
-                          </TableCell>
-                          <TableCell
-                            as="td"
-                            data-test="Requests-doc2"
-                            key="2-doc2"
-                          >
-                            <td
-                              className=""
-                              data-test="Requests-doc2"
-                            >
-                              -
-                            </td>
-                          </TableCell>
-                          <TableCell
-                            as="td"
-                            data-test="Available Items-doc2"
-                            key="3-doc2"
-                          >
-                            <td
-                              className=""
-                              data-test="Available Items-doc2"
-                            >
-                              -
+                              Prairie Fires: The American Dreams of Laura Ingalls Wilder
                             </td>
                           </TableCell>
                         </tr>
@@ -574,7 +489,7 @@ exports[`OverbookedDocumentsList tests should render documents 1`] = `
                 </ResultsTableBody>
                 <ResultsTableFooter
                   allRowsNumber={2}
-                  columnsNumber={4}
+                  columnsNumber={2}
                   currentPage={1}
                   paginationComponent={null}
                   seeAllComponent={
@@ -612,7 +527,7 @@ exports[`OverbookedDocumentsList tests should render show a message with no docu
     <Error>
       <ResultsTable
         currentPage={1}
-        fixed={true}
+        fixed={false}
         headerActionClickHandler={null}
         headerActionComponent={null}
         name="overbooked documents"
@@ -647,10 +562,10 @@ exports[`OverbookedDocumentsList tests should render show a message with no docu
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/OverdueLoansList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/OverdueLoansList.js
index a7fb9f233..0dece6676 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/OverdueLoansList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/OverdueLoansList.js
@@ -44,7 +44,7 @@ export default class OverdueLoansList extends Component {
         'ID',
         'Patron ID',
         'Item barcode',
-        'End date',
+        'Expired',
         'Actions',
       ]);
     });
@@ -57,7 +57,7 @@ export default class OverdueLoansList extends Component {
       <ResultsTable
         rows={rows}
         title={'Overdue loans'}
-        subtitle={'Active loans with past due end date.'}
+        subtitle={'Active loans that passed their end date.'}
         name={'overdue loans'}
         rowActionClickHandler={row => goTo(this.showDetailsUrl(row.ID))}
         seeAllComponent={this.seeAllButton()}
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/__tests__/OverdueLoansList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/__tests__/OverdueLoansList.js
index 13e4ca0cd..494c77418 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/__tests__/OverdueLoansList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/__tests__/OverdueLoansList.js
@@ -1,16 +1,34 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Settings } from 'luxon';
-import { fromISO } from '../../../../../../../common/api/date';
 import { BackOfficeRoutes } from '../../../../../../../routes/urls';
 import OverdueLoansList from '../OverdueLoansList';
 import history from '../../../../../../../history';
+import testData from '../../../../../../../../../../../tests/data/loans.json';
 
 jest.mock('../../../../../components');
 jest.mock('../../../../../../../common/config/invenioConfig');
 
-Settings.defaultZoneName = 'utc';
-const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+const data = {
+  hits: [
+    {
+      id: 1,
+      pid: 'loan1',
+      metadata: {
+        ...testData[0],
+        item: { barcode: 123 },
+      },
+    },
+    {
+      id: 2,
+      pid: 'loan2',
+      metadata: {
+        ...testData[1],
+        item: { barcode: 123 },
+      },
+    },
+  ],
+  total: 2,
+};
 
 describe('OverdueLoansList tests', () => {
   let component;
@@ -57,39 +75,6 @@ describe('OverdueLoansList tests', () => {
   });
 
   it('should render loans', () => {
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-            item: { barcode: 123 },
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            document_pid: 'doc1',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-            item: { barcode: 123 },
-          },
-        },
-      ],
-      total: 2,
-    };
     component = mount(
       <OverdueLoansList data={data} fetchOverdueLoans={() => {}} />
     );
@@ -113,26 +98,6 @@ describe('OverdueLoansList tests', () => {
   it('should go to loan details when clicking on a loan', () => {
     const mockedHistoryPush = jest.fn();
     history.push = mockedHistoryPush;
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-            document_pid: 'doc1',
-            item: { barcode: 123 },
-          },
-        },
-      ],
-      total: 1,
-    };
-
     component = mount(
       <OverdueLoansList
         data={data}
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/__tests__/__snapshots__/OverdueLoansList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/__tests__/__snapshots__/OverdueLoansList.js.snap
index f148b04cd..1ca784912 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/__tests__/__snapshots__/OverdueLoansList.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/OverdueLoansList/__tests__/__snapshots__/OverdueLoansList.js.snap
@@ -23,7 +23,7 @@ exports[`OverdueLoansList tests should load the details component 1`] = `
       showAllResults={false}
       showMaxRows={5}
       singleLine={false}
-      subtitle="Active loans with past due end date."
+      subtitle="Active loans that passed their end date."
       title="Overdue loans"
     />
   </Error>
@@ -36,36 +36,50 @@ exports[`OverdueLoansList tests should render loans 1`] = `
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 1,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
             "item": Object {
               "barcode": 123,
             },
-            "patron_pid": "patron_1",
-            "pid": "loan1",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "item_pid": "itemid-1",
+            "patron": Object {
+              "email": "patron1@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-1",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 2,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
             "item": Object {
               "barcode": 123,
             },
-            "patron_pid": "patron_2",
-            "pid": "loan2",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "item_pid": "itemid-2",
+            "patron": Object {
+              "email": "patron2@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-2",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -91,53 +105,67 @@ exports[`OverdueLoansList tests should render loans 1`] = `
               "Actions": <Memo(Connect(OverdueLoanSendMailModal))
                 loan={
                   Object {
-                    "created": "2018-01-01T10:05:00.000Z",
                     "id": 1,
                     "metadata": Object {
-                      "document_pid": "doc1",
-                      "end_date": "2018-01-01T10:05:00.000Z",
+                      "document_pid": "docid-1",
+                      "end_date": "2018-07-28",
                       "item": Object {
                         "barcode": 123,
                       },
-                      "patron_pid": "patron_1",
-                      "pid": "loan1",
-                      "start_date": "2018-01-01T10:05:00.000Z",
+                      "item_pid": "itemid-1",
+                      "patron": Object {
+                        "email": "patron1@test.ch",
+                      },
+                      "patron_pid": "1",
+                      "pickup_location_pid": "locid-1",
+                      "pid": "loanid-1",
+                      "start_date": "2018-06-28",
+                      "state": "PENDING",
+                      "transaction_date": "2018-06-29",
+                      "transaction_location_pid": "locid-1",
+                      "transaction_user_pid": "user_pid",
                     },
                     "pid": "loan1",
-                    "updated": "2018-01-01T10:05:00.000Z",
                   }
                 }
               />,
-              "End date": "2018-01-01",
+              "Expired": "last year",
               "ID": "loan1",
               "Item barcode": 123,
-              "Patron ID": "patron_1",
+              "Patron ID": "1",
             },
             Object {
               "Actions": <Memo(Connect(OverdueLoanSendMailModal))
                 loan={
                   Object {
-                    "created": "2018-01-01T10:05:00.000Z",
                     "id": 2,
                     "metadata": Object {
-                      "document_pid": "doc1",
-                      "end_date": "2018-01-01T10:05:00.000Z",
+                      "document_pid": "docid-1",
+                      "end_date": "2018-07-28",
                       "item": Object {
                         "barcode": 123,
                       },
-                      "patron_pid": "patron_2",
-                      "pid": "loan2",
-                      "start_date": "2018-01-01T10:05:00.000Z",
+                      "item_pid": "itemid-2",
+                      "patron": Object {
+                        "email": "patron2@test.ch",
+                      },
+                      "patron_pid": "1",
+                      "pickup_location_pid": "locid-1",
+                      "pid": "loanid-2",
+                      "start_date": "2018-06-28",
+                      "state": "PENDING",
+                      "transaction_date": "2018-06-29",
+                      "transaction_location_pid": "locid-1",
+                      "transaction_user_pid": "user_pid",
                     },
                     "pid": "loan2",
-                    "updated": "2018-01-01T10:05:00.000Z",
                   }
                 }
               />,
-              "End date": "2018-01-01",
+              "Expired": "last year",
               "ID": "loan2",
               "Item barcode": 123,
-              "Patron ID": "patron_2",
+              "Patron ID": "1",
             },
           ]
         }
@@ -151,7 +179,7 @@ exports[`OverdueLoansList tests should render loans 1`] = `
         showAllResults={false}
         showMaxRows={5}
         singleLine={false}
-        subtitle="Active loans with past due end date."
+        subtitle="Active loans that passed their end date."
         title="Overdue loans"
       >
         <Segment>
@@ -168,27 +196,27 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
                           content="Overdue loans"
-                          subheader="Active loans with past due end date."
+                          subheader="Active loans that passed their end date."
                         >
                           <h3
                             className="ui header"
                           >
                             Overdue loans
                             <HeaderSubheader
-                              content="Active loans with past due end date."
+                              content="Active loans that passed their end date."
                             >
                               <div
                                 className="sub header"
                               >
-                                Active loans with past due end date.
+                                Active loans that passed their end date.
                               </div>
                             </HeaderSubheader>
                           </h3>
@@ -209,11 +237,12 @@ exports[`OverdueLoansList tests should render loans 1`] = `
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -221,11 +250,11 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                       "ID",
                       "Patron ID",
                       "Item barcode",
-                      "End date",
+                      "Expired",
                       "Actions",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -244,32 +273,26 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -307,7 +330,7 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
-                            key="End date"
+                            key="Expired"
                           >
                             <TableCell
                               as="th"
@@ -316,7 +339,7 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                               <th
                                 className=""
                               >
-                                End date
+                                Expired
                               </th>
                             </TableCell>
                           </TableHeaderCell>
@@ -346,7 +369,7 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                       "ID",
                       "Patron ID",
                       "Item barcode",
-                      "End date",
+                      "Expired",
                       "Actions",
                     ]
                   }
@@ -357,53 +380,67 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                         "Actions": <Memo(Connect(OverdueLoanSendMailModal))
                           loan={
                             Object {
-                              "created": "2018-01-01T10:05:00.000Z",
                               "id": 1,
                               "metadata": Object {
-                                "document_pid": "doc1",
-                                "end_date": "2018-01-01T10:05:00.000Z",
+                                "document_pid": "docid-1",
+                                "end_date": "2018-07-28",
                                 "item": Object {
                                   "barcode": 123,
                                 },
-                                "patron_pid": "patron_1",
-                                "pid": "loan1",
-                                "start_date": "2018-01-01T10:05:00.000Z",
+                                "item_pid": "itemid-1",
+                                "patron": Object {
+                                  "email": "patron1@test.ch",
+                                },
+                                "patron_pid": "1",
+                                "pickup_location_pid": "locid-1",
+                                "pid": "loanid-1",
+                                "start_date": "2018-06-28",
+                                "state": "PENDING",
+                                "transaction_date": "2018-06-29",
+                                "transaction_location_pid": "locid-1",
+                                "transaction_user_pid": "user_pid",
                               },
                               "pid": "loan1",
-                              "updated": "2018-01-01T10:05:00.000Z",
                             }
                           }
                         />,
-                        "End date": "2018-01-01",
+                        "Expired": "last year",
                         "ID": "loan1",
                         "Item barcode": 123,
-                        "Patron ID": "patron_1",
+                        "Patron ID": "1",
                       },
                       Object {
                         "Actions": <Memo(Connect(OverdueLoanSendMailModal))
                           loan={
                             Object {
-                              "created": "2018-01-01T10:05:00.000Z",
                               "id": 2,
                               "metadata": Object {
-                                "document_pid": "doc1",
-                                "end_date": "2018-01-01T10:05:00.000Z",
+                                "document_pid": "docid-1",
+                                "end_date": "2018-07-28",
                                 "item": Object {
                                   "barcode": 123,
                                 },
-                                "patron_pid": "patron_2",
-                                "pid": "loan2",
-                                "start_date": "2018-01-01T10:05:00.000Z",
+                                "item_pid": "itemid-2",
+                                "patron": Object {
+                                  "email": "patron2@test.ch",
+                                },
+                                "patron_pid": "1",
+                                "pickup_location_pid": "locid-1",
+                                "pid": "loanid-2",
+                                "start_date": "2018-06-28",
+                                "state": "PENDING",
+                                "transaction_date": "2018-06-29",
+                                "transaction_location_pid": "locid-1",
+                                "transaction_user_pid": "user_pid",
                               },
                               "pid": "loan2",
-                              "updated": "2018-01-01T10:05:00.000Z",
                             }
                           }
                         />,
-                        "End date": "2018-01-01",
+                        "Expired": "last year",
                         "ID": "loan2",
                         "Item barcode": 123,
-                        "Patron ID": "patron_2",
+                        "Patron ID": "1",
                       },
                     ]
                   }
@@ -433,22 +470,21 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -458,29 +494,29 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -511,7 +547,7 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                               className=""
                               data-test="Patron ID-loan1"
                             >
-                              patron_1
+                              1
                             </td>
                           </TableCell>
                           <TableCell
@@ -528,14 +564,14 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="End date-loan1"
+                            data-test="Expired-loan1"
                             key="3-loan1"
                           >
                             <td
                               className=""
-                              data-test="End date-loan1"
+                              data-test="Expired-loan1"
                             >
-                              2018-01-01
+                              last year
                             </td>
                           </TableCell>
                           <TableCell
@@ -550,20 +586,27 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                               <Connect(OverdueLoanSendMailModal)
                                 loan={
                                   Object {
-                                    "created": "2018-01-01T10:05:00.000Z",
                                     "id": 1,
                                     "metadata": Object {
-                                      "document_pid": "doc1",
-                                      "end_date": "2018-01-01T10:05:00.000Z",
+                                      "document_pid": "docid-1",
+                                      "end_date": "2018-07-28",
                                       "item": Object {
                                         "barcode": 123,
                                       },
-                                      "patron_pid": "patron_1",
-                                      "pid": "loan1",
-                                      "start_date": "2018-01-01T10:05:00.000Z",
+                                      "item_pid": "itemid-1",
+                                      "patron": Object {
+                                        "email": "patron1@test.ch",
+                                      },
+                                      "patron_pid": "1",
+                                      "pickup_location_pid": "locid-1",
+                                      "pid": "loanid-1",
+                                      "start_date": "2018-06-28",
+                                      "state": "PENDING",
+                                      "transaction_date": "2018-06-29",
+                                      "transaction_location_pid": "locid-1",
+                                      "transaction_user_pid": "user_pid",
                                     },
                                     "pid": "loan1",
-                                    "updated": "2018-01-01T10:05:00.000Z",
                                   }
                                 }
                               />
@@ -590,22 +633,21 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan2"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan2"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -615,29 +657,29 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan2"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan2"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -668,7 +710,7 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                               className=""
                               data-test="Patron ID-loan2"
                             >
-                              patron_2
+                              1
                             </td>
                           </TableCell>
                           <TableCell
@@ -685,14 +727,14 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                           </TableCell>
                           <TableCell
                             as="td"
-                            data-test="End date-loan2"
+                            data-test="Expired-loan2"
                             key="3-loan2"
                           >
                             <td
                               className=""
-                              data-test="End date-loan2"
+                              data-test="Expired-loan2"
                             >
-                              2018-01-01
+                              last year
                             </td>
                           </TableCell>
                           <TableCell
@@ -707,20 +749,27 @@ exports[`OverdueLoansList tests should render loans 1`] = `
                               <Connect(OverdueLoanSendMailModal)
                                 loan={
                                   Object {
-                                    "created": "2018-01-01T10:05:00.000Z",
                                     "id": 2,
                                     "metadata": Object {
-                                      "document_pid": "doc1",
-                                      "end_date": "2018-01-01T10:05:00.000Z",
+                                      "document_pid": "docid-1",
+                                      "end_date": "2018-07-28",
                                       "item": Object {
                                         "barcode": 123,
                                       },
-                                      "patron_pid": "patron_2",
-                                      "pid": "loan2",
-                                      "start_date": "2018-01-01T10:05:00.000Z",
+                                      "item_pid": "itemid-2",
+                                      "patron": Object {
+                                        "email": "patron2@test.ch",
+                                      },
+                                      "patron_pid": "1",
+                                      "pickup_location_pid": "locid-1",
+                                      "pid": "loanid-2",
+                                      "start_date": "2018-06-28",
+                                      "state": "PENDING",
+                                      "transaction_date": "2018-06-29",
+                                      "transaction_location_pid": "locid-1",
+                                      "transaction_user_pid": "user_pid",
                                     },
                                     "pid": "loan2",
-                                    "updated": "2018-01-01T10:05:00.000Z",
                                   }
                                 }
                               />
@@ -789,7 +838,7 @@ exports[`OverdueLoansList tests should render show a message with no loans 1`] =
         showAllResults={false}
         showMaxRows={5}
         singleLine={false}
-        subtitle="Active loans with past due end date."
+        subtitle="Active loans that passed their end date."
         title="Overdue loans"
       >
         <Segment>
@@ -806,27 +855,27 @@ exports[`OverdueLoansList tests should render show a message with no loans 1`] =
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
                           content="Overdue loans"
-                          subheader="Active loans with past due end date."
+                          subheader="Active loans that passed their end date."
                         >
                           <h3
                             className="ui header"
                           >
                             Overdue loans
                             <HeaderSubheader
-                              content="Active loans with past due end date."
+                              content="Active loans that passed their end date."
                             >
                               <div
                                 className="sub header"
                               >
-                                Active loans with past due end date.
+                                Active loans that passed their end date.
                               </div>
                             </HeaderSubheader>
                           </h3>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/PendingOverdueDocumentsList/PendingOverdueDocumentsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/PendingOverdueDocumentsList/PendingOverdueDocumentsList.js
index 8cac99dec..6c4a8702b 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/PendingOverdueDocumentsList/PendingOverdueDocumentsList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/PendingOverdueDocumentsList/PendingOverdueDocumentsList.js
@@ -38,7 +38,6 @@ export default class PendingOverdueDocumentsList extends Component {
         'Title',
         'Overdue Loans',
         'Pending Requests',
-        'Available Items',
       ]);
     });
   }
@@ -49,7 +48,7 @@ export default class PendingOverdueDocumentsList extends Component {
     return (
       <ResultsTable
         rows={rows}
-        title={'Pending Overdue Documents'}
+        title={'Pending overdue documents'}
         subtitle={`Documents with pending loan requests, no available items and an active loan that's overdue.`}
         name={'pending overdue documents'}
         rowActionClickHandler={row => goTo(this.showDetailsUrl(row.ID))}
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/PendingOverdueDocumentsList/__tests__/__snapshots__/PendingOverdueDocumentsList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/PendingOverdueDocumentsList/__tests__/__snapshots__/PendingOverdueDocumentsList.js.snap
index 9f72c255b..9942ca5dd 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/PendingOverdueDocumentsList/__tests__/__snapshots__/PendingOverdueDocumentsList.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/PendingOverdueDocumentsList/__tests__/__snapshots__/PendingOverdueDocumentsList.js.snap
@@ -24,7 +24,7 @@ exports[`PendingOverdueDocumentsList tests should load the details component 1`]
       showMaxRows={5}
       singleLine={false}
       subtitle="Documents with pending loan requests, no available items and an active loan that's overdue."
-      title="Pending Overdue Documents"
+      title="Pending overdue documents"
     />
   </Error>
 </Loader>
@@ -104,11 +104,11 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
           Array [
             Object {
               "ID": "document1",
-              "Title": undefined,
+              "Title": "The Gulf: The Making of An American Sea",
             },
             Object {
               "ID": "document2",
-              "Title": undefined,
+              "Title": "Prairie Fires: The American Dreams of Laura Ingalls Wilder",
             },
           ]
         }
@@ -123,7 +123,7 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
         showMaxRows={5}
         singleLine={false}
         subtitle="Documents with pending loan requests, no available items and an active loan that's overdue."
-        title="Pending Overdue Documents"
+        title="Pending overdue documents"
       >
         <Segment>
           <div
@@ -139,20 +139,20 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
-                          content="Pending Overdue Documents"
+                          content="Pending overdue documents"
                           subheader="Documents with pending loan requests, no available items and an active loan that's overdue."
                         >
                           <h3
                             className="ui header"
                           >
-                            Pending Overdue Documents
+                            Pending overdue documents
                             <HeaderSubheader
                               content="Documents with pending loan requests, no available items and an active loan that's overdue."
                             >
@@ -180,11 +180,12 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -193,7 +194,7 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
                       "Title",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -212,32 +213,26 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -275,11 +270,11 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
                     Array [
                       Object {
                         "ID": "document1",
-                        "Title": undefined,
+                        "Title": "The Gulf: The Making of An American Sea",
                       },
                       Object {
                         "ID": "document2",
-                        "Title": undefined,
+                        "Title": "Prairie Fires: The American Dreams of Laura Ingalls Wilder",
                       },
                     ]
                   }
@@ -309,22 +304,21 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-document1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-document1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -334,29 +328,29 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-document1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-document1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -387,7 +381,7 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
                               className=""
                               data-test="Title-document1"
                             >
-                              -
+                              The Gulf: The Making of An American Sea
                             </td>
                           </TableCell>
                         </tr>
@@ -411,22 +405,21 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-document2"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-document2"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -436,29 +429,29 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-document2"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-document2"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -489,7 +482,7 @@ exports[`PendingOverdueDocumentsList tests should render documents 1`] = `
                               className=""
                               data-test="Title-document2"
                             >
-                              -
+                              Prairie Fires: The American Dreams of Laura Ingalls Wilder
                             </td>
                           </TableCell>
                         </tr>
@@ -556,7 +549,7 @@ exports[`PendingOverdueDocumentsList tests should render show a message with no
         showMaxRows={5}
         singleLine={false}
         subtitle="Documents with pending loan requests, no available items and an active loan that's overdue."
-        title="Pending Overdue Documents"
+        title="Pending overdue documents"
       >
         <Segment>
           <div
@@ -572,20 +565,20 @@ exports[`PendingOverdueDocumentsList tests should render show a message with no
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
-                          content="Pending Overdue Documents"
+                          content="Pending overdue documents"
                           subheader="Documents with pending loan requests, no available items and an active loan that's overdue."
                         >
                           <h3
                             className="ui header"
                           >
-                            Pending Overdue Documents
+                            Pending overdue documents
                             <HeaderSubheader
                               content="Documents with pending loan requests, no available items and an active loan that's overdue."
                             >
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/RenewedLoansList/__tests__/RenewedLoansList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/RenewedLoansList/__tests__/RenewedLoansList.js
index 85aae2437..475367cf5 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/RenewedLoansList/__tests__/RenewedLoansList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/RenewedLoansList/__tests__/RenewedLoansList.js
@@ -1,13 +1,25 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Settings } from 'luxon';
-import { fromISO } from '../../../../../../../common/api/date';
 import { BackOfficeRoutes } from '../../../../../../../routes/urls';
 import RenewedLoansList from '../RenewedLoansList';
 import history from '../../../../../../../history';
+import testData from '../../../../../../../../../../../tests/data/loans.json';
 
-Settings.defaultZoneName = 'utc';
-const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+const data = {
+  hits: [
+    {
+      id: 1,
+      pid: 'loan1',
+      metadata: testData[0],
+    },
+    {
+      id: 2,
+      pid: 'loan2',
+      metadata: testData[1],
+    },
+  ],
+  total: 2,
+};
 
 describe('RenewedLoansList tests', () => {
   let component;
@@ -54,36 +66,6 @@ describe('RenewedLoansList tests', () => {
   });
 
   it('should render loans', () => {
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 2,
-    };
-
     component = mount(
       <RenewedLoansList data={data} fetchRenewedLoans={() => {}} />
     );
@@ -107,24 +89,6 @@ describe('RenewedLoansList tests', () => {
   it('should go to loan details when clicking on a loan', () => {
     const mockedHistoryPush = jest.fn();
     history.push = mockedHistoryPush;
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 1,
-    };
-
     component = mount(
       <RenewedLoansList
         data={data}
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/RenewedLoansList/__tests__/__snapshots__/RenewedLoansList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/RenewedLoansList/__tests__/__snapshots__/RenewedLoansList.js.snap
index b4b22ec4d..aae91c589 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/RenewedLoansList/__tests__/__snapshots__/RenewedLoansList.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/lists/RenewedLoansList/__tests__/__snapshots__/RenewedLoansList.js.snap
@@ -36,28 +36,44 @@ exports[`RenewedLoansList tests should render loans 1`] = `
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 1,
           "metadata": Object {
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_1",
-            "pid": "loan1",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-1",
+            "patron": Object {
+              "email": "patron1@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-1",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 2,
           "metadata": Object {
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_2",
-            "pid": "loan2",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-2",
+            "patron": Object {
+              "email": "patron2@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-2",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -80,20 +96,20 @@ exports[`RenewedLoansList tests should render loans 1`] = `
         rows={
           Array [
             Object {
-              "End date": "2018-01-01",
+              "End date": "2018-07-28",
               "ID": "loan1",
               "Item barcode": null,
-              "Patron ID": "patron_1",
+              "Patron ID": "1",
               "Renewals": undefined,
-              "State": undefined,
+              "State": "PENDING",
             },
             Object {
-              "End date": "2018-01-01",
+              "End date": "2018-07-28",
               "ID": "loan2",
               "Item barcode": null,
-              "Patron ID": "patron_2",
+              "Patron ID": "1",
               "Renewals": undefined,
-              "State": undefined,
+              "State": "PENDING",
             },
           ]
         }
@@ -124,10 +140,10 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -165,11 +181,12 @@ exports[`RenewedLoansList tests should render loans 1`] = `
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -182,7 +199,7 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                       "Renewals",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -201,32 +218,26 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -327,20 +338,20 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                   rows={
                     Array [
                       Object {
-                        "End date": "2018-01-01",
+                        "End date": "2018-07-28",
                         "ID": "loan1",
                         "Item barcode": null,
-                        "Patron ID": "patron_1",
+                        "Patron ID": "1",
                         "Renewals": undefined,
-                        "State": undefined,
+                        "State": "PENDING",
                       },
                       Object {
-                        "End date": "2018-01-01",
+                        "End date": "2018-07-28",
                         "ID": "loan2",
                         "Item barcode": null,
-                        "Patron ID": "patron_2",
+                        "Patron ID": "1",
                         "Renewals": undefined,
-                        "State": undefined,
+                        "State": "PENDING",
                       },
                     ]
                   }
@@ -370,22 +381,21 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -395,29 +405,29 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -448,7 +458,7 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                               className=""
                               data-test="Patron ID-loan1"
                             >
-                              patron_1
+                              1
                             </td>
                           </TableCell>
                           <TableCell
@@ -460,7 +470,7 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                               className=""
                               data-test="State-loan1"
                             >
-                              -
+                              PENDING
                             </td>
                           </TableCell>
                           <TableCell
@@ -484,7 +494,7 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                               className=""
                               data-test="End date-loan1"
                             >
-                              2018-01-01
+                              2018-07-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -520,22 +530,21 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan2"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan2"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -545,29 +554,29 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan2"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan2"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -598,7 +607,7 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                               className=""
                               data-test="Patron ID-loan2"
                             >
-                              patron_2
+                              1
                             </td>
                           </TableCell>
                           <TableCell
@@ -610,7 +619,7 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                               className=""
                               data-test="State-loan2"
                             >
-                              -
+                              PENDING
                             </td>
                           </TableCell>
                           <TableCell
@@ -634,7 +643,7 @@ exports[`RenewedLoansList tests should render loans 1`] = `
                               className=""
                               data-test="End date-loan2"
                             >
-                              2018-01-01
+                              2018-07-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -729,10 +738,10 @@ exports[`RenewedLoansList tests should render show a message with no loans 1`] =
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/widgets/DocumentsCard/__tests__/__snapshots__/DocumentsCard.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/widgets/DocumentsCard/__tests__/__snapshots__/DocumentsCard.js.snap
index 7d3cb3923..8db1ec966 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/widgets/DocumentsCard/__tests__/__snapshots__/DocumentsCard.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/widgets/DocumentsCard/__tests__/__snapshots__/DocumentsCard.js.snap
@@ -183,13 +183,13 @@ exports[`DocumentsCard tests should render stats with 2 records 1`] = `
                               disabled={true}
                               fluid={true}
                               onClick={[Function]}
-                              size="small"
+                              size="tiny"
                             >
                               <Ref
                                 innerRef={
                                   Object {
                                     "current": <button
-                                      class="ui small fluid disabled button"
+                                      class="ui tiny fluid disabled button"
                                       disabled=""
                                       tabindex="-1"
                                     >
@@ -202,7 +202,7 @@ exports[`DocumentsCard tests should render stats with 2 records 1`] = `
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui small fluid disabled button"
+                                        class="ui tiny fluid disabled button"
                                         disabled=""
                                         tabindex="-1"
                                       >
@@ -212,7 +212,7 @@ exports[`DocumentsCard tests should render stats with 2 records 1`] = `
                                   }
                                 >
                                   <button
-                                    className="ui small fluid disabled button"
+                                    className="ui tiny fluid disabled button"
                                     disabled={true}
                                     onClick={[Function]}
                                     tabIndex={-1}
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/widgets/LoansCard/__tests__/__snapshots__/LoansCard.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/widgets/LoansCard/__tests__/__snapshots__/LoansCard.js.snap
index ebdcd7d71..b32fcc730 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/widgets/LoansCard/__tests__/__snapshots__/LoansCard.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Home/components/widgets/LoansCard/__tests__/__snapshots__/LoansCard.js.snap
@@ -197,13 +197,13 @@ exports[`LoansCard tests should render stats with 2 records 1`] = `
                             disabled={true}
                             fluid={true}
                             onClick={[Function]}
-                            size="small"
+                            size="tiny"
                           >
                             <Ref
                               innerRef={
                                 Object {
                                   "current": <button
-                                    class="ui small fluid disabled button"
+                                    class="ui tiny fluid disabled button"
                                     disabled=""
                                     tabindex="-1"
                                   >
@@ -216,7 +216,7 @@ exports[`LoansCard tests should render stats with 2 records 1`] = `
                                 innerRef={
                                   Object {
                                     "current": <button
-                                      class="ui small fluid disabled button"
+                                      class="ui tiny fluid disabled button"
                                       disabled=""
                                       tabindex="-1"
                                     >
@@ -226,7 +226,7 @@ exports[`LoansCard tests should render stats with 2 records 1`] = `
                                 }
                               >
                                 <button
-                                  className="ui small fluid disabled button"
+                                  className="ui tiny fluid disabled button"
                                   disabled={true}
                                   onClick={[Function]}
                                   tabIndex={-1}
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemDetails/components/ItemPastLoans/__tests__/ItemPastLoans.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemDetails/components/ItemPastLoans/__tests__/ItemPastLoans.js
index 0842cc78b..57fa2f8b1 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemDetails/components/ItemPastLoans/__tests__/ItemPastLoans.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemDetails/components/ItemPastLoans/__tests__/ItemPastLoans.js
@@ -1,13 +1,25 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Settings } from 'luxon';
-import { fromISO } from '../../../../../../common/api/date';
 import ItemPastLoans from '../ItemPastLoans';
+import testData from '../../../../../../../../../../tests/data/loans.json';
 
 jest.mock('../../../../../../common/config/invenioConfig');
 
-Settings.defaultZoneName = 'utc';
-const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+const data = {
+  hits: [
+    {
+      id: 1,
+      pid: 'loan1',
+      metadata: testData[0],
+    },
+    {
+      id: 2,
+      pid: 'loan2',
+      metadata: testData[1],
+    },
+  ],
+  total: 2,
+};
 
 describe('ItemPastLoans tests', () => {
   let component;
@@ -65,36 +77,6 @@ describe('ItemPastLoans tests', () => {
   });
 
   it('should render pending loans', () => {
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 2,
-    };
-
     component = mount(
       <ItemPastLoans itemDetails={item} data={data} fetchPastLoans={() => {}} />
     );
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemDetails/components/ItemPastLoans/__tests__/__snapshots__/ItemPastLoans.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemDetails/components/ItemPastLoans/__tests__/__snapshots__/ItemPastLoans.js.snap
index a7913e63f..ce50250b9 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemDetails/components/ItemPastLoans/__tests__/__snapshots__/ItemPastLoans.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemDetails/components/ItemPastLoans/__tests__/__snapshots__/ItemPastLoans.js.snap
@@ -36,28 +36,44 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 1,
           "metadata": Object {
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_1",
-            "pid": "loan1",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-1",
+            "patron": Object {
+              "email": "patron1@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-1",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 2,
           "metadata": Object {
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_2",
-            "pid": "loan2",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-2",
+            "patron": Object {
+              "email": "patron2@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-2",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -89,22 +105,22 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
         rows={
           Array [
             Object {
-              "Document ID": undefined,
-              "End date": "2018-01-01",
+              "Document ID": "docid-1",
+              "End date": "2018-07-28",
               "ID": "loan1",
-              "Patron ID": "patron_1",
+              "Patron ID": "1",
               "Renewals": undefined,
-              "Start date": "2018-01-01",
-              "State": undefined,
+              "Start date": "2018-06-28",
+              "State": "PENDING",
             },
             Object {
-              "Document ID": undefined,
-              "End date": "2018-01-01",
+              "Document ID": "docid-1",
+              "End date": "2018-07-28",
               "ID": "loan2",
-              "Patron ID": "patron_2",
+              "Patron ID": "1",
               "Renewals": undefined,
-              "Start date": "2018-01-01",
-              "State": undefined,
+              "Start date": "2018-06-28",
+              "State": "PENDING",
             },
           ]
         }
@@ -135,10 +151,10 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -174,11 +190,12 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -192,7 +209,7 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                       "Renewals",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -211,32 +228,26 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -353,22 +364,22 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                   rows={
                     Array [
                       Object {
-                        "Document ID": undefined,
-                        "End date": "2018-01-01",
+                        "Document ID": "docid-1",
+                        "End date": "2018-07-28",
                         "ID": "loan1",
-                        "Patron ID": "patron_1",
+                        "Patron ID": "1",
                         "Renewals": undefined,
-                        "Start date": "2018-01-01",
-                        "State": undefined,
+                        "Start date": "2018-06-28",
+                        "State": "PENDING",
                       },
                       Object {
-                        "Document ID": undefined,
-                        "End date": "2018-01-01",
+                        "Document ID": "docid-1",
+                        "End date": "2018-07-28",
                         "ID": "loan2",
-                        "Patron ID": "patron_2",
+                        "Patron ID": "1",
                         "Renewals": undefined,
-                        "Start date": "2018-01-01",
-                        "State": undefined,
+                        "Start date": "2018-06-28",
+                        "State": "PENDING",
                       },
                     ]
                   }
@@ -398,22 +409,21 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -423,29 +433,29 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -476,7 +486,7 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                               className=""
                               data-test="Patron ID-loan1"
                             >
-                              patron_1
+                              1
                             </td>
                           </TableCell>
                           <TableCell
@@ -488,7 +498,7 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                               className=""
                               data-test="Document ID-loan1"
                             >
-                              -
+                              docid-1
                             </td>
                           </TableCell>
                           <TableCell
@@ -500,7 +510,7 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                               className=""
                               data-test="State-loan1"
                             >
-                              -
+                              PENDING
                             </td>
                           </TableCell>
                           <TableCell
@@ -512,7 +522,7 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                               className=""
                               data-test="Start date-loan1"
                             >
-                              2018-01-01
+                              2018-06-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -524,7 +534,7 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                               className=""
                               data-test="End date-loan1"
                             >
-                              2018-01-01
+                              2018-07-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -560,22 +570,21 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan2"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan2"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -585,29 +594,29 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan2"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan2"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -638,7 +647,7 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                               className=""
                               data-test="Patron ID-loan2"
                             >
-                              patron_2
+                              1
                             </td>
                           </TableCell>
                           <TableCell
@@ -650,7 +659,7 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                               className=""
                               data-test="Document ID-loan2"
                             >
-                              -
+                              docid-1
                             </td>
                           </TableCell>
                           <TableCell
@@ -662,7 +671,7 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                               className=""
                               data-test="State-loan2"
                             >
-                              -
+                              PENDING
                             </td>
                           </TableCell>
                           <TableCell
@@ -674,7 +683,7 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                               className=""
                               data-test="Start date-loan2"
                             >
-                              2018-01-01
+                              2018-06-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -686,7 +695,7 @@ exports[`ItemPastLoans tests should render pending loans 1`] = `
                               className=""
                               data-test="End date-loan2"
                             >
-                              2018-01-01
+                              2018-07-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -790,10 +799,10 @@ exports[`ItemPastLoans tests should render show a message with no past loans 1`]
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/ItemsSearch.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/ItemsSearch.js
index c57310552..85c75137a 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/ItemsSearch.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/ItemsSearch.js
@@ -17,12 +17,15 @@ import {
   Error as IlsError,
   SearchBar as ItemsSearchBar,
   ResultsSort,
+  ResultsTable,
 } from '../../../common/components';
+import { formatter } from '../../../common/components/ResultsTable/formatters';
 import { item as itemApi } from '../../../common/api';
+import { ExportReactSearchKitResults } from '../components';
 import { ClearButton, NewButton } from '../components/buttons';
 import { BackOfficeRoutes } from '../../../routes/urls';
-import { ResultsList as ItemsResultsList } from './components';
 import { goTo } from '../../../history';
+import _omit from 'lodash/omit';
 
 export class ItemsSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -42,13 +45,47 @@ export class ItemsSearch extends Component {
     );
   };
 
-  renderResultsList = results => {
+  prepareData(data) {
+    return data.map(row => {
+      return _omit(formatter.item.toTable(row), [
+        'Created',
+        'Updated',
+        'Document ID',
+        'Internal location',
+        'Location',
+        'Shelf',
+      ]);
+    });
+  }
+
+  renderResultsTable = results => {
+    const rows = this.prepareData(results);
+    const maxRowsToShow =
+      rows.length > ResultsTable.defaultProps.showMaxRows
+        ? rows.length
+        : ResultsTable.defaultProps.showMaxRows;
+    const headerActionComponent = (
+      <div>
+        <NewButton
+          text={'New item'}
+          clickHandler={() => {
+            // TODO: EDITOR, implement create form
+          }}
+        />
+        <ExportReactSearchKitResults exportBaseUrl={itemApi.searchBaseURL} />
+      </div>
+    );
+
     return (
-      <ItemsResultsList
-        results={results}
-        viewDetailsClickHandler={row => {
+      <ResultsTable
+        rows={rows}
+        title={''}
+        name={'items'}
+        headerActionComponent={headerActionComponent}
+        rowActionClickHandler={row => {
           goTo(BackOfficeRoutes.itemDetailsFor(row.ID));
         }}
+        showMaxRows={maxRowsToShow}
       />
     );
   };
@@ -140,7 +177,7 @@ export class ItemsSearch extends Component {
                 <EmptyResults renderElement={this.renderEmptyResults} />
                 <Error renderElement={this.renderError} />
                 {this.renderHeader()}
-                <ResultsList renderElement={this.renderResultsList} />
+                <ResultsList renderElement={this.renderResultsTable} />
                 {this.renderFooter()}
               </Grid.Column>
             </ResultsLoader>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/ItemsSearch.js
similarity index 79%
rename from invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/ResultsList.js
rename to invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/ItemsSearch.js
index 0f15eb0cf..1ed2df186 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/ResultsList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/ItemsSearch.js
@@ -3,7 +3,7 @@ import omit from 'lodash/omit';
 import { mount } from 'enzyme';
 import { Settings } from 'luxon';
 import { fromISO, toISO } from '../../../../common/api/date';
-import { ResultsList } from '../components';
+import { ResultsTable } from '../../../../common/components';
 import { formatter } from '../../../../common/components/ResultsTable/formatters';
 
 jest.mock('../../components');
@@ -13,7 +13,7 @@ Settings.defaultZoneName = 'utc';
 describe('ItemsSearch ResultsList tests', () => {
   const stringDate = fromISO('2018-01-01T11:05:00+01:00');
 
-  const results = [
+  const data = [
     {
       id: 987,
       created: toISO(stringDate),
@@ -41,17 +41,20 @@ describe('ItemsSearch ResultsList tests', () => {
 
   it('should not render when empty results', () => {
     component = mount(
-      <ResultsList results={[]} viewDetailsClickHandler={() => {}} />
+      <ResultsTable rows={[]} rowActionClickHandler={() => {}} />
     );
     expect(component).toMatchSnapshot();
   });
 
   it('should render a list of results', () => {
     component = mount(
-      <ResultsList results={results} viewDetailsClickHandler={() => {}} />
+      <ResultsTable
+        rows={data.map(row => formatter.item.toTable(row))}
+        rowActionClickHandler={() => {}}
+      />
     );
     expect(component).toMatchSnapshot();
-    const firstResult = results[0];
+    const firstResult = data[0];
     const resultRows = component
       .find('TableRow')
       .filterWhere(
@@ -73,21 +76,18 @@ describe('ItemsSearch ResultsList tests', () => {
   it('should call click handler on view details click', () => {
     const mockedClickHandler = jest.fn();
     component = mount(
-      <ResultsList
-        results={results}
-        viewDetailsClickHandler={mockedClickHandler}
+      <ResultsTable
+        rows={data.map(row => formatter.item.toTable(row))}
+        rowActionClickHandler={mockedClickHandler}
       />
     );
-    const firstId = results[0].metadata.pid;
+    const firstId = data[0].metadata.pid;
     const button = component
       .find('TableRow')
       .filterWhere(element => element.prop('data-test') === firstId)
       .find('button');
     button.simulate('click');
-    const expected = omit(formatter.item.toTable(results[0]), [
-      'Created',
-      'Updated',
-    ]);
+    const expected = formatter.item.toTable(data[0]);
     expect(mockedClickHandler).toHaveBeenCalledWith(expected);
   });
 });
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/__snapshots__/ItemsSearch.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/__snapshots__/ItemsSearch.js.snap
new file mode 100644
index 000000000..ca7eab92f
--- /dev/null
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/__snapshots__/ItemsSearch.js.snap
@@ -0,0 +1,655 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ItemsSearch ResultsList tests should not render when empty results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={Array []}
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Message
+        data-test="no-results"
+      >
+        <div
+          className="ui message"
+          data-test="no-results"
+        >
+          There are no 
+          .
+        </div>
+      </Message>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
+
+exports[`ItemsSearch ResultsList tests should render a list of results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={
+    Array [
+      Object {
+        "Barcode": "9865745223",
+        "Circulation status": null,
+        "Created": "2018-01-01",
+        "Document ID": 1342,
+        "ID": 987,
+        "Internal location": "A library",
+        "Location": null,
+        "Medium": undefined,
+        "Shelf": undefined,
+        "Status": "IN_BINDING",
+        "Title": undefined,
+        "Updated": "Invalid DateTime",
+      },
+    ]
+  }
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Table
+        as="table"
+        compact={true}
+        selectable={true}
+        striped={true}
+      >
+        <table
+          className="ui selectable striped compact table"
+        >
+          <ResultsTableHeader
+            columns={
+              Array [
+                "ID",
+                "Document ID",
+                "Created",
+                "Updated",
+                "Barcode",
+                "Title",
+                "Medium",
+                "Status",
+                "Circulation status",
+                "Internal location",
+                "Location",
+                "Shelf",
+              ]
+            }
+            withRowAction={false}
+          >
+            <TableHeader
+              as="thead"
+            >
+              <thead
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="header"
+                >
+                  <tr
+                    className=""
+                    data-test="header"
+                  >
+                    <TableHeaderCell
+                      as="th"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        />
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Document ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Document ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Created"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Created
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Updated"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Updated
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Barcode"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Barcode
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Title"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Title
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Medium"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Medium
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Status"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Status
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Circulation status"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Circulation status
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Internal location"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Internal location
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Location"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Location
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Shelf"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Shelf
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                  </tr>
+                </TableRow>
+              </thead>
+            </TableHeader>
+          </ResultsTableHeader>
+          <ResultsTableBody
+            columns={
+              Array [
+                "ID",
+                "Document ID",
+                "Created",
+                "Updated",
+                "Barcode",
+                "Title",
+                "Medium",
+                "Status",
+                "Circulation status",
+                "Internal location",
+                "Location",
+                "Shelf",
+              ]
+            }
+            rowActionClickHandler={[Function]}
+            rows={
+              Array [
+                Object {
+                  "Barcode": "9865745223",
+                  "Circulation status": null,
+                  "Created": "2018-01-01",
+                  "Document ID": 1342,
+                  "ID": 987,
+                  "Internal location": "A library",
+                  "Location": null,
+                  "Medium": undefined,
+                  "Shelf": undefined,
+                  "Status": "IN_BINDING",
+                  "Title": undefined,
+                  "Updated": "Invalid DateTime",
+                },
+              ]
+            }
+          >
+            <TableBody
+              as="tbody"
+            >
+              <tbody
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test={987}
+                  key="987"
+                >
+                  <tr
+                    className=""
+                    data-test={987}
+                  >
+                    <TableCell
+                      as="td"
+                      textAlign="center"
+                    >
+                      <td
+                        className="center aligned"
+                      >
+                        <Button
+                          as="button"
+                          compact={true}
+                          data-test="btn-view-details-987"
+                          icon="info"
+                          onClick={[Function]}
+                        >
+                          <Ref
+                            innerRef={
+                              Object {
+                                "current": <button
+                                  class="ui compact icon button"
+                                  data-test="btn-view-details-987"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="info icon"
+                                  />
+                                </button>,
+                              }
+                            }
+                          >
+                            <RefFindNode
+                              innerRef={
+                                Object {
+                                  "current": <button
+                                    class="ui compact icon button"
+                                    data-test="btn-view-details-987"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="info icon"
+                                    />
+                                  </button>,
+                                }
+                              }
+                            >
+                              <button
+                                className="ui compact icon button"
+                                data-test="btn-view-details-987"
+                                onClick={[Function]}
+                              >
+                                <Icon
+                                  as="i"
+                                  name="info"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    className="info icon"
+                                    onClick={[Function]}
+                                  />
+                                </Icon>
+                              </button>
+                            </RefFindNode>
+                          </Ref>
+                        </Button>
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="ID-987"
+                      key="0-987"
+                    >
+                      <td
+                        className=""
+                        data-test="ID-987"
+                      >
+                        987
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Document ID-987"
+                      key="1-987"
+                    >
+                      <td
+                        className=""
+                        data-test="Document ID-987"
+                      >
+                        1342
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Created-987"
+                      key="2-987"
+                    >
+                      <td
+                        className=""
+                        data-test="Created-987"
+                      >
+                        2018-01-01
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Updated-987"
+                      key="3-987"
+                    >
+                      <td
+                        className=""
+                        data-test="Updated-987"
+                      >
+                        Invalid DateTime
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Barcode-987"
+                      key="4-987"
+                    >
+                      <td
+                        className=""
+                        data-test="Barcode-987"
+                      >
+                        9865745223
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Title-987"
+                      key="5-987"
+                    >
+                      <td
+                        className=""
+                        data-test="Title-987"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Medium-987"
+                      key="6-987"
+                    >
+                      <td
+                        className=""
+                        data-test="Medium-987"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Status-987"
+                      key="7-987"
+                    >
+                      <td
+                        className=""
+                        data-test="Status-987"
+                      >
+                        IN_BINDING
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Circulation status-987"
+                      key="8-987"
+                    >
+                      <td
+                        className=""
+                        data-test="Circulation status-987"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Internal location-987"
+                      key="9-987"
+                    >
+                      <td
+                        className=""
+                        data-test="Internal location-987"
+                      >
+                        A library
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Location-987"
+                      key="10-987"
+                    >
+                      <td
+                        className=""
+                        data-test="Location-987"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Shelf-987"
+                      key="11-987"
+                    >
+                      <td
+                        className=""
+                        data-test="Shelf-987"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                  </tr>
+                </TableRow>
+              </tbody>
+            </TableBody>
+          </ResultsTableBody>
+          <ResultsTableFooter
+            allRowsNumber={1}
+            columnsNumber={12}
+            currentPage={1}
+            paginationComponent={null}
+            seeAllComponent={null}
+            showAllResults={false}
+            showMaxRows={10}
+          />
+        </table>
+      </Table>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/__snapshots__/ResultsList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/__snapshots__/ResultsList.js.snap
deleted file mode 100644
index ee95f9f49..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/__tests__/__snapshots__/ResultsList.js.snap
+++ /dev/null
@@ -1,766 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ItemsSearch ResultsList tests should not render when empty results 1`] = `
-<ResultsList
-  results={Array []}
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <div>
-        <NewButton
-          clickHandler={[Function]}
-          disabled={false}
-          fluid={false}
-          text="New item"
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl="https://127.0.0.1:5000/api/items/"
-        />
-      </div>
-    }
-    name="items"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={Array []}
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <div>
-                      <NewButton
-                        clickHandler={[Function]}
-                        disabled={false}
-                        fluid={false}
-                        text="New item"
-                      >
-                        <Button
-                          as="button"
-                          icon={true}
-                          labelPosition="left"
-                          onClick={[Function]}
-                          positive={true}
-                          size="small"
-                        >
-                          <Ref
-                            innerRef={
-                              Object {
-                                "current": <button
-                                  class="ui small icon positive left labeled button"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                  New item
-                                </button>,
-                              }
-                            }
-                          >
-                            <RefFindNode
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui small icon positive left labeled button"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="plus icon"
-                                    />
-                                    New item
-                                  </button>,
-                                }
-                              }
-                            >
-                              <button
-                                className="ui small icon positive left labeled button"
-                                onClick={[Function]}
-                              >
-                                <Icon
-                                  as="i"
-                                  name="plus"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    className="plus icon"
-                                    onClick={[Function]}
-                                  />
-                                </Icon>
-                                New item
-                              </button>
-                            </RefFindNode>
-                          </Ref>
-                        </Button>
-                      </NewButton>
-                      <ExportReactSearchKitResults
-                        exportBaseUrl="https://127.0.0.1:5000/api/items/"
-                      />
-                    </div>
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Message
-          data-test="no-results"
-        >
-          <div
-            className="ui message"
-            data-test="no-results"
-          >
-            There are no 
-            items
-            .
-          </div>
-        </Message>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
-
-exports[`ItemsSearch ResultsList tests should render a list of results 1`] = `
-<ResultsList
-  results={
-    Array [
-      Object {
-        "created": "2018-01-01T10:05:00.000Z",
-        "id": 987,
-        "metadata": Object {
-          "barcode": "9865745223",
-          "document": Object {
-            "pid": 1342,
-          },
-          "document_pid": 1342,
-          "internal_location": Object {
-            "name": "A library",
-            "pid": 1,
-          },
-          "internal_location_pid": 1,
-          "pid": 987,
-          "status": "IN_BINDING",
-        },
-      },
-    ]
-  }
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <div>
-        <NewButton
-          clickHandler={[Function]}
-          disabled={false}
-          fluid={false}
-          text="New item"
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl="https://127.0.0.1:5000/api/items/"
-        />
-      </div>
-    }
-    name="items"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={
-      Array [
-        Object {
-          "Barcode": "9865745223",
-          "Circulation status": null,
-          "Document ID": 1342,
-          "ID": 987,
-          "Internal location": "A library",
-          "Location": null,
-          "Medium": undefined,
-          "Shelf": undefined,
-          "Status": "IN_BINDING",
-        },
-      ]
-    }
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <div>
-                      <NewButton
-                        clickHandler={[Function]}
-                        disabled={false}
-                        fluid={false}
-                        text="New item"
-                      >
-                        <Button
-                          as="button"
-                          icon={true}
-                          labelPosition="left"
-                          onClick={[Function]}
-                          positive={true}
-                          size="small"
-                        >
-                          <Ref
-                            innerRef={
-                              Object {
-                                "current": <button
-                                  class="ui small icon positive left labeled button"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                  New item
-                                </button>,
-                              }
-                            }
-                          >
-                            <RefFindNode
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui small icon positive left labeled button"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="plus icon"
-                                    />
-                                    New item
-                                  </button>,
-                                }
-                              }
-                            >
-                              <button
-                                className="ui small icon positive left labeled button"
-                                onClick={[Function]}
-                              >
-                                <Icon
-                                  as="i"
-                                  name="plus"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    className="plus icon"
-                                    onClick={[Function]}
-                                  />
-                                </Icon>
-                                New item
-                              </button>
-                            </RefFindNode>
-                          </Ref>
-                        </Button>
-                      </NewButton>
-                      <ExportReactSearchKitResults
-                        exportBaseUrl="https://127.0.0.1:5000/api/items/"
-                      />
-                    </div>
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Table
-          as="table"
-          selectable={true}
-          striped={true}
-        >
-          <table
-            className="ui selectable striped table"
-          >
-            <ResultsTableHeader
-              columns={
-                Array [
-                  "ID",
-                  "Barcode",
-                  "Document ID",
-                  "Status",
-                  "Medium",
-                  "Circulation status",
-                  "Internal location",
-                  "Location",
-                  "Shelf",
-                ]
-              }
-              withRowAction={true}
-            >
-              <TableHeader
-                as="thead"
-              >
-                <thead
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test="header"
-                  >
-                    <tr
-                      className=""
-                      data-test="header"
-                    >
-                      <TableHeaderCell
-                        as="th"
-                        collapsing={true}
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          collapsing={true}
-                          width={2}
-                        >
-                          <th
-                            className="collapsing two wide"
-                          />
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="ID"
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          width={2}
-                        >
-                          <th
-                            className="two wide"
-                          >
-                            ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Barcode"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Barcode
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Document ID"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Document ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Status"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Status
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Medium"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Medium
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Circulation status"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Circulation status
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Internal location"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Internal location
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Location"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Location
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Shelf"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Shelf
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                    </tr>
-                  </TableRow>
-                </thead>
-              </TableHeader>
-            </ResultsTableHeader>
-            <ResultsTableBody
-              columns={
-                Array [
-                  "ID",
-                  "Barcode",
-                  "Document ID",
-                  "Status",
-                  "Medium",
-                  "Circulation status",
-                  "Internal location",
-                  "Location",
-                  "Shelf",
-                ]
-              }
-              rowActionClickHandler={[Function]}
-              rows={
-                Array [
-                  Object {
-                    "Barcode": "9865745223",
-                    "Circulation status": null,
-                    "Document ID": 1342,
-                    "ID": 987,
-                    "Internal location": "A library",
-                    "Location": null,
-                    "Medium": undefined,
-                    "Shelf": undefined,
-                    "Status": "IN_BINDING",
-                  },
-                ]
-              }
-            >
-              <TableBody
-                as="tbody"
-              >
-                <tbody
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test={987}
-                    key="987"
-                  >
-                    <tr
-                      className=""
-                      data-test={987}
-                    >
-                      <TableCell
-                        as="td"
-                        textAlign="center"
-                      >
-                        <td
-                          className="center aligned"
-                        >
-                          <Button
-                            as="button"
-                            circular={true}
-                            compact={true}
-                            data-test="btn-view-details-987"
-                            icon="eye"
-                            onClick={[Function]}
-                          >
-                            <Ref
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui circular compact icon button"
-                                    data-test="btn-view-details-987"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="eye icon"
-                                    />
-                                  </button>,
-                                }
-                              }
-                            >
-                              <RefFindNode
-                                innerRef={
-                                  Object {
-                                    "current": <button
-                                      class="ui circular compact icon button"
-                                      data-test="btn-view-details-987"
-                                    >
-                                      <i
-                                        aria-hidden="true"
-                                        class="eye icon"
-                                      />
-                                    </button>,
-                                  }
-                                }
-                              >
-                                <button
-                                  className="ui circular compact icon button"
-                                  data-test="btn-view-details-987"
-                                  onClick={[Function]}
-                                >
-                                  <Icon
-                                    as="i"
-                                    name="eye"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      className="eye icon"
-                                      onClick={[Function]}
-                                    />
-                                  </Icon>
-                                </button>
-                              </RefFindNode>
-                            </Ref>
-                          </Button>
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="ID-987"
-                        key="0-987"
-                      >
-                        <td
-                          className=""
-                          data-test="ID-987"
-                        >
-                          987
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Barcode-987"
-                        key="1-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Barcode-987"
-                        >
-                          9865745223
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Document ID-987"
-                        key="2-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Document ID-987"
-                        >
-                          1342
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Status-987"
-                        key="3-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Status-987"
-                        >
-                          IN_BINDING
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Medium-987"
-                        key="4-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Medium-987"
-                        >
-                          -
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Circulation status-987"
-                        key="5-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Circulation status-987"
-                        >
-                          -
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Internal location-987"
-                        key="6-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Internal location-987"
-                        >
-                          A library
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Location-987"
-                        key="7-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Location-987"
-                        >
-                          -
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Shelf-987"
-                        key="8-987"
-                      >
-                        <td
-                          className=""
-                          data-test="Shelf-987"
-                        >
-                          -
-                        </td>
-                      </TableCell>
-                    </tr>
-                  </TableRow>
-                </tbody>
-              </TableBody>
-            </ResultsTableBody>
-            <ResultsTableFooter
-              allRowsNumber={1}
-              columnsNumber={9}
-              currentPage={1}
-              paginationComponent={null}
-              seeAllComponent={null}
-              showAllResults={false}
-              showMaxRows={10}
-            />
-          </table>
-        </Table>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/ResultsList/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/ResultsList/ResultsList.js
deleted file mode 100644
index 6b1191064..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/ResultsList/ResultsList.js
+++ /dev/null
@@ -1,56 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ResultsTable } from '../../../../../common/components';
-import { NewButton } from '../../../components/buttons';
-import { formatter } from '../../../../../common/components/ResultsTable/formatters';
-import omit from 'lodash/omit';
-import { ExportReactSearchKitResults } from '../../../components';
-import { item as itemApi } from '../../../../../common/api';
-
-export class ResultsList extends Component {
-  constructor(props) {
-    super(props);
-    this.viewDetailsClickHandler = this.props.viewDetailsClickHandler;
-  }
-
-  prepareData() {
-    return this.props.results.map(row => {
-      return omit(formatter.item.toTable(row), ['Created', 'Updated']);
-    });
-  }
-
-  render() {
-    const rows = this.prepareData();
-    const maxRowsToShow =
-      rows.length > ResultsTable.defaultProps.showMaxRows
-        ? rows.length
-        : ResultsTable.defaultProps.showMaxRows;
-    const headerActionComponent = (
-      <div>
-        <NewButton
-          text={'New item'}
-          clickHandler={() => {
-            // TODO: EDITOR, implement create form
-          }}
-        />
-        <ExportReactSearchKitResults exportBaseUrl={itemApi.searchBaseURL} />
-      </div>
-    );
-
-    return (
-      <ResultsTable
-        rows={rows}
-        title={''}
-        name={'items'}
-        headerActionComponent={headerActionComponent}
-        rowActionClickHandler={this.viewDetailsClickHandler}
-        showMaxRows={maxRowsToShow}
-      />
-    );
-  }
-}
-
-ResultsList.propTypes = {
-  results: PropTypes.array.isRequired,
-  viewDetailsClickHandler: PropTypes.func.isRequired,
-};
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/ResultsList/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/ResultsList/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/ResultsList/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/ItemsSearch/components/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/LoansSearch.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/LoansSearch.js
index c0fd297bf..c90ad632c 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/LoansSearch.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/LoansSearch.js
@@ -17,11 +17,17 @@ import {
   Error as IlsError,
   SearchBar as LoansSearchBar,
   ResultsSort,
+  ResultsTable,
 } from '../../../common/components';
+import { formatter } from '../../../common/components/ResultsTable/formatters';
+import {
+  ExportReactSearchKitResults,
+  OverdueLoanSendMailModal,
+} from '../components';
 import { loan as loanApi } from '../../../common/api/loans/loan';
-import { ResultsList as LoansResultsList } from './components';
 import { BackOfficeRoutes } from '../../../routes/urls';
 import { goTo } from '../../../history';
+import _pick from 'lodash/pick';
 
 export class LoansSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -41,13 +47,44 @@ export class LoansSearch extends Component {
     );
   };
 
-  renderResultsList = results => {
+  prepareData(data) {
+    return data.map(row => {
+      const actions = row.metadata.is_overdue && (
+        <OverdueLoanSendMailModal loan={row} />
+      );
+      return _pick(formatter.loan.toTable(row, actions), [
+        'ID',
+        'Document ID',
+        'Patron',
+        'State',
+        'Requested',
+        'Expired',
+        'Renewals',
+        'Actions',
+      ]);
+    });
+  }
+
+  renderResultsTable = results => {
+    const rows = this.prepareData(results);
+    const maxRowsToShow =
+      rows.length > ResultsTable.defaultProps.showMaxRows
+        ? rows.length
+        : ResultsTable.defaultProps.showMaxRows;
+
+    const headerActionComponent = (
+      <ExportReactSearchKitResults exportBaseUrl={loanApi.searchBaseURL} />
+    );
+
     return (
-      <LoansResultsList
-        results={results}
-        viewDetailsClickHandler={row =>
+      <ResultsTable
+        rows={rows}
+        name={'loans'}
+        headerActionComponent={headerActionComponent}
+        rowActionClickHandler={row =>
           goTo(BackOfficeRoutes.loanDetailsFor(row.ID))
         }
+        showMaxRows={maxRowsToShow}
       />
     );
   };
@@ -131,7 +168,7 @@ export class LoansSearch extends Component {
                 <EmptyResults renderElement={this.renderEmptyResults} />
                 <Error renderElement={this.renderError} />
                 {this.renderHeader()}
-                <ResultsList renderElement={this.renderResultsList} />
+                <ResultsList renderElement={this.renderResultsTable} />
                 {this.renderFooter()}
               </Grid.Column>
             </ResultsLoader>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/LoansSearch.js
similarity index 58%
rename from invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/ResultsList.js
rename to invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/LoansSearch.js
index 51f8a3a85..42b4a4748 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/ResultsList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/LoansSearch.js
@@ -2,49 +2,51 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { Settings } from 'luxon';
 import { fromISO, toISO } from '../../../../common/api/date';
-import { ResultsList } from '../components';
+import { ResultsTable } from '../../../../common/components';
 import { formatter } from '../../../../common/components/ResultsTable/formatters';
 
 jest.mock('../../components');
-
 Settings.defaultZoneName = 'utc';
+const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+const start = stringDate.plus({ days: 1 });
+const end = stringDate.plus({ months: 1 });
 
-describe('LoansSearch ResultsList tests', () => {
-  const stringDate = fromISO('2018-01-01T11:05:00+01:00');
-  const start = stringDate.plus({ days: 1 });
-  const end = stringDate.plus({ months: 1 });
-
-  const results = [
-    {
-      id: 3,
-      created: toISO(stringDate),
-      metadata: {
-        state: 'ITEM_ON_LOAN',
-        patron_pid: 1,
-        start_date: toISO(start),
-        end_date: toISO(end),
-      },
+const data = [
+  {
+    id: 3,
+    created: toISO(stringDate),
+    metadata: {
+      state: 'ITEM_ON_LOAN',
+      patron_pid: 1,
+      start_date: toISO(start),
+      end_date: toISO(end),
+      patron: { email: 'patron@test.ch' },
     },
-  ];
+  },
+];
 
-  let component;
-  afterEach(() => {
-    component.unmount();
-  });
+let component;
+afterEach(() => {
+  component.unmount();
+});
 
+describe('LoansSearch ResultsTable tests', () => {
   it('should not render when empty results', () => {
     component = mount(
-      <ResultsList results={[]} viewDetailsClickHandler={() => {}} />
+      <ResultsTable rows={[]} rowActionClickHandler={() => {}} />
     );
     expect(component).toMatchSnapshot();
   });
 
   it('should render a list of results', () => {
     component = mount(
-      <ResultsList results={results} viewDetailsClickHandler={() => {}} />
+      <ResultsTable
+        rows={data.map(row => formatter.loan.toTable(row))}
+        rowActionClickHandler={() => {}}
+      />
     );
     expect(component).toMatchSnapshot();
-    const firstResult = results[0];
+    const firstResult = data[0];
     const resultRows = component
       .find('TableRow')
       .filterWhere(element => element.prop('data-test') === firstResult.id);
@@ -63,18 +65,18 @@ describe('LoansSearch ResultsList tests', () => {
   it('should call click handler on view details click', () => {
     const mockedClickHandler = jest.fn();
     component = mount(
-      <ResultsList
-        results={results}
-        viewDetailsClickHandler={mockedClickHandler}
+      <ResultsTable
+        rows={data.map(row => formatter.loan.toTable(row))}
+        rowActionClickHandler={mockedClickHandler}
       />
     );
-    const firstId = results[0].id;
+    const firstId = data[0].id;
     const button = component
       .find('TableRow')
       .filterWhere(element => element.prop('data-test') === firstId)
       .find('button');
     button.simulate('click');
-    const expected = formatter.loan.toTable(results[0]);
+    const expected = formatter.loan.toTable(data[0]);
     expect(mockedClickHandler).toHaveBeenCalledWith(expected);
   });
 });
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/__snapshots__/LoansSearch.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/__snapshots__/LoansSearch.js.snap
new file mode 100644
index 000000000..b5ecbf98d
--- /dev/null
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/__snapshots__/LoansSearch.js.snap
@@ -0,0 +1,717 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LoansSearch ResultsTable tests should not render when empty results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={Array []}
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Message
+        data-test="no-results"
+      >
+        <div
+          className="ui message"
+          data-test="no-results"
+        >
+          There are no 
+          .
+        </div>
+      </Message>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
+
+exports[`LoansSearch ResultsTable tests should render a list of results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={
+    Array [
+      Object {
+        "Actions": null,
+        "Document ID": undefined,
+        "End date": "2018-02-01",
+        "Expired": "last year",
+        "ID": 3,
+        "Item barcode": null,
+        "Patron": "patron@test.ch",
+        "Patron ID": 1,
+        "Renewals": undefined,
+        "Request end date": null,
+        "Request start date": null,
+        "Requested": null,
+        "Start date": "2018-01-02",
+        "State": "ITEM_ON_LOAN",
+      },
+    ]
+  }
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Table
+        as="table"
+        compact={true}
+        selectable={true}
+        striped={true}
+      >
+        <table
+          className="ui selectable striped compact table"
+        >
+          <ResultsTableHeader
+            columns={
+              Array [
+                "ID",
+                "Patron ID",
+                "Document ID",
+                "Patron",
+                "State",
+                "Item barcode",
+                "Request start date",
+                "Request end date",
+                "Start date",
+                "End date",
+                "Requested",
+                "Expired",
+                "Renewals",
+                "Actions",
+              ]
+            }
+            withRowAction={false}
+          >
+            <TableHeader
+              as="thead"
+            >
+              <thead
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="header"
+                >
+                  <tr
+                    className=""
+                    data-test="header"
+                  >
+                    <TableHeaderCell
+                      as="th"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        />
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Patron ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Patron ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Document ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Document ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Patron"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Patron
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="State"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          State
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Item barcode"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Item barcode
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Request start date"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Request start date
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Request end date"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Request end date
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Start date"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Start date
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="End date"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          End date
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Requested"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Requested
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Expired"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Expired
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Renewals"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Renewals
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Actions"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Actions
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                  </tr>
+                </TableRow>
+              </thead>
+            </TableHeader>
+          </ResultsTableHeader>
+          <ResultsTableBody
+            columns={
+              Array [
+                "ID",
+                "Patron ID",
+                "Document ID",
+                "Patron",
+                "State",
+                "Item barcode",
+                "Request start date",
+                "Request end date",
+                "Start date",
+                "End date",
+                "Requested",
+                "Expired",
+                "Renewals",
+                "Actions",
+              ]
+            }
+            rowActionClickHandler={[Function]}
+            rows={
+              Array [
+                Object {
+                  "Actions": null,
+                  "Document ID": undefined,
+                  "End date": "2018-02-01",
+                  "Expired": "last year",
+                  "ID": 3,
+                  "Item barcode": null,
+                  "Patron": "patron@test.ch",
+                  "Patron ID": 1,
+                  "Renewals": undefined,
+                  "Request end date": null,
+                  "Request start date": null,
+                  "Requested": null,
+                  "Start date": "2018-01-02",
+                  "State": "ITEM_ON_LOAN",
+                },
+              ]
+            }
+          >
+            <TableBody
+              as="tbody"
+            >
+              <tbody
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test={3}
+                  key="3"
+                >
+                  <tr
+                    className=""
+                    data-test={3}
+                  >
+                    <TableCell
+                      as="td"
+                      textAlign="center"
+                    >
+                      <td
+                        className="center aligned"
+                      >
+                        <Button
+                          as="button"
+                          compact={true}
+                          data-test="btn-view-details-3"
+                          icon="info"
+                          onClick={[Function]}
+                        >
+                          <Ref
+                            innerRef={
+                              Object {
+                                "current": <button
+                                  class="ui compact icon button"
+                                  data-test="btn-view-details-3"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="info icon"
+                                  />
+                                </button>,
+                              }
+                            }
+                          >
+                            <RefFindNode
+                              innerRef={
+                                Object {
+                                  "current": <button
+                                    class="ui compact icon button"
+                                    data-test="btn-view-details-3"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="info icon"
+                                    />
+                                  </button>,
+                                }
+                              }
+                            >
+                              <button
+                                className="ui compact icon button"
+                                data-test="btn-view-details-3"
+                                onClick={[Function]}
+                              >
+                                <Icon
+                                  as="i"
+                                  name="info"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    className="info icon"
+                                    onClick={[Function]}
+                                  />
+                                </Icon>
+                              </button>
+                            </RefFindNode>
+                          </Ref>
+                        </Button>
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="ID-3"
+                      key="0-3"
+                    >
+                      <td
+                        className=""
+                        data-test="ID-3"
+                      >
+                        3
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Patron ID-3"
+                      key="1-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Patron ID-3"
+                      >
+                        1
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Document ID-3"
+                      key="2-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Document ID-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Patron-3"
+                      key="3-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Patron-3"
+                      >
+                        patron@test.ch
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="State-3"
+                      key="4-3"
+                    >
+                      <td
+                        className=""
+                        data-test="State-3"
+                      >
+                        ITEM_ON_LOAN
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Item barcode-3"
+                      key="5-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Item barcode-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Request start date-3"
+                      key="6-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Request start date-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Request end date-3"
+                      key="7-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Request end date-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Start date-3"
+                      key="8-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Start date-3"
+                      >
+                        2018-01-02
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="End date-3"
+                      key="9-3"
+                    >
+                      <td
+                        className=""
+                        data-test="End date-3"
+                      >
+                        2018-02-01
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Requested-3"
+                      key="10-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Requested-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Expired-3"
+                      key="11-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Expired-3"
+                      >
+                        last year
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Renewals-3"
+                      key="12-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Renewals-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Actions-3"
+                      key="13-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Actions-3"
+                      >
+                        -
+                      </td>
+                    </TableCell>
+                  </tr>
+                </TableRow>
+              </tbody>
+            </TableBody>
+          </ResultsTableBody>
+          <ResultsTableFooter
+            allRowsNumber={1}
+            columnsNumber={14}
+            currentPage={1}
+            paginationComponent={null}
+            seeAllComponent={null}
+            showAllResults={false}
+            showMaxRows={10}
+          />
+        </table>
+      </Table>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/__snapshots__/ResultsList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/__snapshots__/ResultsList.js.snap
deleted file mode 100644
index 1c404d6f8..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/__tests__/__snapshots__/ResultsList.js.snap
+++ /dev/null
@@ -1,672 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`LoansSearch ResultsList tests should not render when empty results 1`] = `
-<ResultsList
-  results={Array []}
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <ExportReactSearchKitResults
-        exportBaseUrl="https://127.0.0.1:5000/api/circulation/loans/"
-      />
-    }
-    name="loans"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={Array []}
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <ExportReactSearchKitResults
-                      exportBaseUrl="https://127.0.0.1:5000/api/circulation/loans/"
-                    />
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Message
-          data-test="no-results"
-        >
-          <div
-            className="ui message"
-            data-test="no-results"
-          >
-            There are no 
-            loans
-            .
-          </div>
-        </Message>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
-
-exports[`LoansSearch ResultsList tests should render a list of results 1`] = `
-<ResultsList
-  results={
-    Array [
-      Object {
-        "created": "2018-01-01T10:05:00.000Z",
-        "id": 3,
-        "metadata": Object {
-          "end_date": "2018-02-01T10:05:00.000Z",
-          "patron_pid": 1,
-          "start_date": "2018-01-02T10:05:00.000Z",
-          "state": "ITEM_ON_LOAN",
-        },
-      },
-    ]
-  }
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <ExportReactSearchKitResults
-        exportBaseUrl="https://127.0.0.1:5000/api/circulation/loans/"
-      />
-    }
-    name="loans"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={
-      Array [
-        Object {
-          "Actions": null,
-          "Document ID": undefined,
-          "End date": "2018-02-01",
-          "ID": 3,
-          "Item barcode": null,
-          "Patron ID": 1,
-          "Renewals": undefined,
-          "Request end date": null,
-          "Request start date": null,
-          "Start date": "2018-01-02",
-          "State": "ITEM_ON_LOAN",
-        },
-      ]
-    }
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <ExportReactSearchKitResults
-                      exportBaseUrl="https://127.0.0.1:5000/api/circulation/loans/"
-                    />
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Table
-          as="table"
-          selectable={true}
-          striped={true}
-        >
-          <table
-            className="ui selectable striped table"
-          >
-            <ResultsTableHeader
-              columns={
-                Array [
-                  "ID",
-                  "Patron ID",
-                  "Document ID",
-                  "State",
-                  "Item barcode",
-                  "Request start date",
-                  "Request end date",
-                  "Start date",
-                  "End date",
-                  "Renewals",
-                  "Actions",
-                ]
-              }
-              withRowAction={true}
-            >
-              <TableHeader
-                as="thead"
-              >
-                <thead
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test="header"
-                  >
-                    <tr
-                      className=""
-                      data-test="header"
-                    >
-                      <TableHeaderCell
-                        as="th"
-                        collapsing={true}
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          collapsing={true}
-                          width={2}
-                        >
-                          <th
-                            className="collapsing two wide"
-                          />
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="ID"
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          width={2}
-                        >
-                          <th
-                            className="two wide"
-                          >
-                            ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Patron ID"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Patron ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Document ID"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Document ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="State"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            State
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Item barcode"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Item barcode
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Request start date"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Request start date
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Request end date"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Request end date
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Start date"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Start date
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="End date"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            End date
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Renewals"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Renewals
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Actions"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Actions
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                    </tr>
-                  </TableRow>
-                </thead>
-              </TableHeader>
-            </ResultsTableHeader>
-            <ResultsTableBody
-              columns={
-                Array [
-                  "ID",
-                  "Patron ID",
-                  "Document ID",
-                  "State",
-                  "Item barcode",
-                  "Request start date",
-                  "Request end date",
-                  "Start date",
-                  "End date",
-                  "Renewals",
-                  "Actions",
-                ]
-              }
-              rowActionClickHandler={[Function]}
-              rows={
-                Array [
-                  Object {
-                    "Actions": null,
-                    "Document ID": undefined,
-                    "End date": "2018-02-01",
-                    "ID": 3,
-                    "Item barcode": null,
-                    "Patron ID": 1,
-                    "Renewals": undefined,
-                    "Request end date": null,
-                    "Request start date": null,
-                    "Start date": "2018-01-02",
-                    "State": "ITEM_ON_LOAN",
-                  },
-                ]
-              }
-            >
-              <TableBody
-                as="tbody"
-              >
-                <tbody
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test={3}
-                    key="3"
-                  >
-                    <tr
-                      className=""
-                      data-test={3}
-                    >
-                      <TableCell
-                        as="td"
-                        textAlign="center"
-                      >
-                        <td
-                          className="center aligned"
-                        >
-                          <Button
-                            as="button"
-                            circular={true}
-                            compact={true}
-                            data-test="btn-view-details-3"
-                            icon="eye"
-                            onClick={[Function]}
-                          >
-                            <Ref
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui circular compact icon button"
-                                    data-test="btn-view-details-3"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="eye icon"
-                                    />
-                                  </button>,
-                                }
-                              }
-                            >
-                              <RefFindNode
-                                innerRef={
-                                  Object {
-                                    "current": <button
-                                      class="ui circular compact icon button"
-                                      data-test="btn-view-details-3"
-                                    >
-                                      <i
-                                        aria-hidden="true"
-                                        class="eye icon"
-                                      />
-                                    </button>,
-                                  }
-                                }
-                              >
-                                <button
-                                  className="ui circular compact icon button"
-                                  data-test="btn-view-details-3"
-                                  onClick={[Function]}
-                                >
-                                  <Icon
-                                    as="i"
-                                    name="eye"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      className="eye icon"
-                                      onClick={[Function]}
-                                    />
-                                  </Icon>
-                                </button>
-                              </RefFindNode>
-                            </Ref>
-                          </Button>
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="ID-3"
-                        key="0-3"
-                      >
-                        <td
-                          className=""
-                          data-test="ID-3"
-                        >
-                          3
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Patron ID-3"
-                        key="1-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Patron ID-3"
-                        >
-                          1
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Document ID-3"
-                        key="2-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Document ID-3"
-                        >
-                          -
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="State-3"
-                        key="3-3"
-                      >
-                        <td
-                          className=""
-                          data-test="State-3"
-                        >
-                          ITEM_ON_LOAN
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Item barcode-3"
-                        key="4-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Item barcode-3"
-                        >
-                          -
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Request start date-3"
-                        key="5-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Request start date-3"
-                        >
-                          -
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Request end date-3"
-                        key="6-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Request end date-3"
-                        >
-                          -
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Start date-3"
-                        key="7-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Start date-3"
-                        >
-                          2018-01-02
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="End date-3"
-                        key="8-3"
-                      >
-                        <td
-                          className=""
-                          data-test="End date-3"
-                        >
-                          2018-02-01
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Renewals-3"
-                        key="9-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Renewals-3"
-                        >
-                          -
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Actions-3"
-                        key="10-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Actions-3"
-                        >
-                          -
-                        </td>
-                      </TableCell>
-                    </tr>
-                  </TableRow>
-                </tbody>
-              </TableBody>
-            </ResultsTableBody>
-            <ResultsTableFooter
-              allRowsNumber={1}
-              columnsNumber={11}
-              currentPage={1}
-              paginationComponent={null}
-              seeAllComponent={null}
-              showAllResults={false}
-              showMaxRows={10}
-            />
-          </table>
-        </Table>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/ResultsList/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/ResultsList/ResultsList.js
deleted file mode 100644
index 3ec632302..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/ResultsList/ResultsList.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ResultsTable } from '../../../../../common/components';
-import { OverdueLoanSendMailModal } from '../../../components';
-import { formatter } from '../../../../../common/components/ResultsTable/formatters';
-import { ExportReactSearchKitResults } from '../../../components';
-import { loan as loanApi } from '../../../../../common/api';
-
-export class ResultsList extends Component {
-  prepareData(data) {
-    return data.map(row => {
-      const actions = row.metadata.is_overdue && (
-        <OverdueLoanSendMailModal loan={row} />
-      );
-      return formatter.loan.toTable(row, actions);
-    });
-  }
-
-  render() {
-    const rows = this.prepareData(this.props.results);
-    const maxRowsToShow =
-      rows.length > ResultsTable.defaultProps.showMaxRows
-        ? rows.length
-        : ResultsTable.defaultProps.showMaxRows;
-
-    const headerActionComponent = (
-      <ExportReactSearchKitResults exportBaseUrl={loanApi.searchBaseURL} />
-    );
-
-    return (
-      <ResultsTable
-        rows={rows}
-        name={'loans'}
-        headerActionComponent={headerActionComponent}
-        rowActionClickHandler={this.props.viewDetailsClickHandler}
-        showMaxRows={maxRowsToShow}
-      />
-    );
-  }
-}
-
-ResultsList.propTypes = {
-  results: PropTypes.array.isRequired,
-  viewDetailsClickHandler: PropTypes.func.isRequired,
-};
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/ResultsList/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/ResultsList/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/ResultsList/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/LoansSearch/components/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Location/LocationList/components/InternalLocationList/InternalLocationList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Location/LocationList/components/InternalLocationList/InternalLocationList.js
index 478868e5c..d11e72fcf 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Location/LocationList/components/InternalLocationList/InternalLocationList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Location/LocationList/components/InternalLocationList/InternalLocationList.js
@@ -25,7 +25,7 @@ export default class InternalLocationList extends Component {
     this.fetchInternalLocations();
   }
 
-  handleOnRefClick(itemPid) {
+  handleOnRefClick(ilocPid) {
     // TODO: navigate to item edit form
   }
 
@@ -62,7 +62,13 @@ export default class InternalLocationList extends Component {
     const rows = data.hits.map(row => {
       let serialized = formatter.internalLocation.toTable(row);
       serialized['Actions'] = this.rowActions(row.pid);
-      return omit(serialized, ['Created', 'Updated', 'Link']);
+      return omit(serialized, [
+        'Created',
+        'Updated',
+        'Link',
+        'Location ID',
+        'Location e-mail',
+      ]);
     });
     rows.totalHits = data.total;
     return rows;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/ItemsSearch.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/ItemsSearch.js
index bbcf015b2..03359e934 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/ItemsSearch.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/ItemsSearch.js
@@ -11,7 +11,7 @@ import {
 } from 'semantic-ui-react';
 import { BackOfficeRoutes } from '../../../../../routes/urls';
 import { Error, Loader } from '../../../../../common/components';
-import { ResultsList as ItemsResultsList } from './components';
+import { ItemsResultsList } from './components';
 import isEmpty from 'lodash/isEmpty';
 import { goTo } from '../../../../../history';
 
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/__tests__/ItemsSearch.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/__tests__/ItemsSearch.js
index f3749f3dd..0d554b398 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/__tests__/ItemsSearch.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/__tests__/ItemsSearch.js
@@ -63,6 +63,9 @@ describe('PatronLoans tests', () => {
             status: 'CAN_CIRCULATE',
             circulation: {},
             medium: 'book',
+            document: {
+              title: 'Here is a title',
+            },
           },
         },
       ],
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/__tests__/__snapshots__/ItemsSearch.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/__tests__/__snapshots__/ItemsSearch.js.snap
index 43c0f9290..483db6d20 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/__tests__/__snapshots__/ItemsSearch.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/__tests__/__snapshots__/ItemsSearch.js.snap
@@ -94,6 +94,9 @@ exports[`PatronLoans tests should render items in search 1`] = `
           "metadata": Object {
             "barcode": "44444",
             "circulation": Object {},
+            "document": Object {
+              "title": "Here is a title",
+            },
             "document_pid": "doc1",
             "internal_location": Object {
               "location": Object {
@@ -236,7 +239,7 @@ exports[`PatronLoans tests should render items in search 1`] = `
                       1
                        item(s).
                     </p>
-                    <ResultsList
+                    <ItemsResultsList
                       checkoutItem={[MockFunction]}
                       clearResults={[MockFunction]}
                       fetchPatronCurrentLoans={[MockFunction]}
@@ -250,6 +253,9 @@ exports[`PatronLoans tests should render items in search 1`] = `
                               "metadata": Object {
                                 "barcode": "44444",
                                 "circulation": Object {},
+                                "document": Object {
+                                  "title": "Here is a title",
+                                },
                                 "document_pid": "doc1",
                                 "internal_location": Object {
                                   "location": Object {
@@ -316,10 +322,10 @@ exports[`PatronLoans tests should render items in search 1`] = `
                                   >
                                     <GridColumn
                                       verticalAlign="middle"
-                                      width={8}
+                                      width={16}
                                     >
                                       <div
-                                        className="middle aligned eight wide column"
+                                        className="middle aligned sixteen wide column"
                                       />
                                     </GridColumn>
                                     <GridColumn
@@ -336,11 +342,12 @@ exports[`PatronLoans tests should render items in search 1`] = `
                             </Grid>
                             <Table
                               as="table"
+                              compact={true}
                               selectable={true}
                               striped={true}
                             >
                               <table
-                                className="ui selectable striped table"
+                                className="ui selectable striped compact table"
                               >
                                 <ResultsTableHeader
                                   columns={
@@ -371,32 +378,26 @@ exports[`PatronLoans tests should render items in search 1`] = `
                                         >
                                           <TableHeaderCell
                                             as="th"
-                                            collapsing={true}
-                                            width={1}
                                           >
                                             <TableCell
                                               as="th"
                                               className=""
-                                              collapsing={true}
-                                              width={1}
                                             >
                                               <th
-                                                className="collapsing one wide"
+                                                className=""
                                               />
                                             </TableCell>
                                           </TableHeaderCell>
                                           <TableHeaderCell
                                             as="th"
                                             key="ID"
-                                            width={2}
                                           >
                                             <TableCell
                                               as="th"
                                               className=""
-                                              width={2}
                                             >
                                               <th
-                                                className="two wide"
+                                                className=""
                                               >
                                                 ID
                                               </th>
@@ -632,7 +633,7 @@ exports[`PatronLoans tests should render items in search 1`] = `
                           </div>
                         </Segment>
                       </ResultsTable>
-                    </ResultsList>
+                    </ItemsResultsList>
                   </div>
                 </Error>
               </Loader>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ResultsList/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ItemsResultsList/ItemsResultsList.js
similarity index 97%
rename from invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ResultsList/ResultsList.js
rename to invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ItemsResultsList/ItemsResultsList.js
index 8e2c38422..880971ffc 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ResultsList/ResultsList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ItemsResultsList/ItemsResultsList.js
@@ -7,7 +7,7 @@ import { invenioConfig, ES_DELAY } from '../../../../../../../common/config';
 import isEmpty from 'lodash/isEmpty';
 import pick from 'lodash/pick';
 
-export class ResultsList extends Component {
+export class ItemsResultsList extends Component {
   constructor(props) {
     super(props);
     this.viewDetailsClickHandler = this.props.viewDetailsClickHandler;
@@ -128,7 +128,7 @@ export class ResultsList extends Component {
   }
 }
 
-ResultsList.propTypes = {
+ItemsResultsList.propTypes = {
   results: PropTypes.object.isRequired,
   viewDetailsClickHandler: PropTypes.func.isRequired,
   clearResults: PropTypes.func.isRequired,
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ItemsResultsList/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ItemsResultsList/index.js
new file mode 100644
index 000000000..f12e738e0
--- /dev/null
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ItemsResultsList/index.js
@@ -0,0 +1 @@
+export { ItemsResultsList } from './ItemsResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ResultsList/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ResultsList/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/ResultsList/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/index.js
index 22bf3a49a..f12e738e0 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/index.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/ItemsSearch/components/index.js
@@ -1 +1 @@
-export { ResultsList } from './ResultsList';
+export { ItemsResultsList } from './ItemsResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronCurrentLoans/__tests__/PatronCurrentLoans.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronCurrentLoans/__tests__/PatronCurrentLoans.js
index f38e5b586..55fa8b3de 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronCurrentLoans/__tests__/PatronCurrentLoans.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronCurrentLoans/__tests__/PatronCurrentLoans.js
@@ -1,15 +1,27 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Settings } from 'luxon';
-import { fromISO } from '../../../../../../common/api/date';
 import { BackOfficeRoutes } from '../../../../../../routes/urls';
 import PatronCurrentLoans from '../PatronCurrentLoans';
 import history from '../../../../../../history';
+import testData from '../../../../../../../../../../tests/data/loans.json';
 
 jest.mock('../../../../../../common/config/invenioConfig');
 
-Settings.defaultZoneName = 'utc';
-const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+const data = {
+  hits: [
+    {
+      id: 1,
+      pid: 'loan1',
+      metadata: testData[0],
+    },
+    {
+      id: 2,
+      pid: 'loan2',
+      metadata: testData[1],
+    },
+  ],
+  total: 2,
+};
 
 describe('PatronLoans tests', () => {
   let component;
@@ -57,38 +69,6 @@ describe('PatronLoans tests', () => {
 
   it('should render patron loans', () => {
     const mockedFetchPatronLoans = jest.fn();
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            document_pid: 'doc1',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 2,
-    };
-
     component = mount(
       <PatronCurrentLoans
         patronPid={patron.pid}
@@ -116,37 +96,7 @@ describe('PatronLoans tests', () => {
 
   it('should render the see all button when showing only a few patron loans', () => {
     const mockedFetchPatronLoans = jest.fn();
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            document_pid: 'doc1',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 2,
-    };
+
     component = mount(
       <PatronCurrentLoans
         patronPid={patron.pid}
@@ -166,24 +116,6 @@ describe('PatronLoans tests', () => {
   it('should go to loan details when clicking on a patron loan', () => {
     const mockedHistoryPush = jest.fn();
     history.push = mockedHistoryPush;
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 1,
-    };
 
     const mockedFetchPatronLoans = jest.fn();
     component = mount(
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronCurrentLoans/__tests__/__snapshots__/PatronCurrentLoans.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronCurrentLoans/__tests__/__snapshots__/PatronCurrentLoans.js.snap
index 970eb6f97..c4c15a213 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronCurrentLoans/__tests__/__snapshots__/PatronCurrentLoans.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronCurrentLoans/__tests__/__snapshots__/PatronCurrentLoans.js.snap
@@ -36,30 +36,44 @@ exports[`PatronLoans tests should render patron loans 1`] = `
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 1,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_1",
-            "pid": "loan1",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-1",
+            "patron": Object {
+              "email": "patron1@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-1",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 2,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_2",
-            "pid": "loan2",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-2",
+            "patron": Object {
+              "email": "patron2@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-2",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -98,18 +112,18 @@ exports[`PatronLoans tests should render patron loans 1`] = `
         rows={
           Array [
             Object {
-              "End date": "2018-01-01",
+              "End date": "2018-07-28",
               "ID": "loan1",
               "Item barcode": null,
               "Renewals": undefined,
-              "Start date": "2018-01-01",
+              "Start date": "2018-06-28",
             },
             Object {
-              "End date": "2018-01-01",
+              "End date": "2018-07-28",
               "ID": "loan2",
               "Item barcode": null,
               "Renewals": undefined,
-              "Start date": "2018-01-01",
+              "Start date": "2018-06-28",
             },
           ]
         }
@@ -140,10 +154,10 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -179,11 +193,12 @@ exports[`PatronLoans tests should render patron loans 1`] = `
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -195,7 +210,7 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                       "Renewals",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -214,32 +229,26 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -324,18 +333,18 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                   rows={
                     Array [
                       Object {
-                        "End date": "2018-01-01",
+                        "End date": "2018-07-28",
                         "ID": "loan1",
                         "Item barcode": null,
                         "Renewals": undefined,
-                        "Start date": "2018-01-01",
+                        "Start date": "2018-06-28",
                       },
                       Object {
-                        "End date": "2018-01-01",
+                        "End date": "2018-07-28",
                         "ID": "loan2",
                         "Item barcode": null,
                         "Renewals": undefined,
-                        "Start date": "2018-01-01",
+                        "Start date": "2018-06-28",
                       },
                     ]
                   }
@@ -365,22 +374,21 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -390,29 +398,29 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -455,7 +463,7 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                               className=""
                               data-test="Start date-loan1"
                             >
-                              2018-01-01
+                              2018-06-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -467,7 +475,7 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                               className=""
                               data-test="End date-loan1"
                             >
-                              2018-01-01
+                              2018-07-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -503,22 +511,21 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan2"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan2"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -528,29 +535,29 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan2"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan2"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -593,7 +600,7 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                               className=""
                               data-test="Start date-loan2"
                             >
-                              2018-01-01
+                              2018-06-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -605,7 +612,7 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                               className=""
                               data-test="End date-loan2"
                             >
-                              2018-01-01
+                              2018-07-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -716,10 +723,10 @@ exports[`PatronLoans tests should render show a message with no user loans 1`] =
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -779,30 +786,44 @@ exports[`PatronLoans tests should render the see all button when showing only a
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 1,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_1",
-            "pid": "loan1",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-1",
+            "patron": Object {
+              "email": "patron1@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-1",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 2,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_2",
-            "pid": "loan2",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-2",
+            "patron": Object {
+              "email": "patron2@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-2",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -840,18 +861,18 @@ exports[`PatronLoans tests should render the see all button when showing only a
         rows={
           Array [
             Object {
-              "End date": "2018-01-01",
+              "End date": "2018-07-28",
               "ID": "loan1",
               "Item barcode": null,
               "Renewals": undefined,
-              "Start date": "2018-01-01",
+              "Start date": "2018-06-28",
             },
             Object {
-              "End date": "2018-01-01",
+              "End date": "2018-07-28",
               "ID": "loan2",
               "Item barcode": null,
               "Renewals": undefined,
-              "Start date": "2018-01-01",
+              "Start date": "2018-06-28",
             },
           ]
         }
@@ -882,10 +903,10 @@ exports[`PatronLoans tests should render the see all button when showing only a
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -921,11 +942,12 @@ exports[`PatronLoans tests should render the see all button when showing only a
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -937,7 +959,7 @@ exports[`PatronLoans tests should render the see all button when showing only a
                       "Renewals",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -956,32 +978,26 @@ exports[`PatronLoans tests should render the see all button when showing only a
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -1066,11 +1082,11 @@ exports[`PatronLoans tests should render the see all button when showing only a
                   rows={
                     Array [
                       Object {
-                        "End date": "2018-01-01",
+                        "End date": "2018-07-28",
                         "ID": "loan1",
                         "Item barcode": null,
                         "Renewals": undefined,
-                        "Start date": "2018-01-01",
+                        "Start date": "2018-06-28",
                       },
                     ]
                   }
@@ -1100,22 +1116,21 @@ exports[`PatronLoans tests should render the see all button when showing only a
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -1125,29 +1140,29 @@ exports[`PatronLoans tests should render the see all button when showing only a
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -1190,7 +1205,7 @@ exports[`PatronLoans tests should render the see all button when showing only a
                               className=""
                               data-test="Start date-loan1"
                             >
-                              2018-01-01
+                              2018-06-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -1202,7 +1217,7 @@ exports[`PatronLoans tests should render the see all button when showing only a
                               className=""
                               data-test="End date-loan1"
                             >
-                              2018-01-01
+                              2018-07-28
                             </td>
                           </TableCell>
                           <TableCell
@@ -1291,13 +1306,13 @@ exports[`PatronLoans tests should render the see all button when showing only a
                                       <Button
                                         as="button"
                                         onClick={[Function]}
-                                        size="small"
+                                        size="tiny"
                                       >
                                         <Ref
                                           innerRef={
                                             Object {
                                               "current": <button
-                                                class="ui small button"
+                                                class="ui tiny button"
                                               >
                                                 See all
                                               </button>,
@@ -1308,7 +1323,7 @@ exports[`PatronLoans tests should render the see all button when showing only a
                                             innerRef={
                                               Object {
                                                 "current": <button
-                                                  class="ui small button"
+                                                  class="ui tiny button"
                                                 >
                                                   See all
                                                 </button>,
@@ -1316,7 +1331,7 @@ exports[`PatronLoans tests should render the see all button when showing only a
                                             }
                                           >
                                             <button
-                                              className="ui small button"
+                                              className="ui tiny button"
                                               onClick={[Function]}
                                             >
                                               See all
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronDocumentRequests/__tests__/__snapshots__/PatronDocumentRequests.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronDocumentRequests/__tests__/__snapshots__/PatronDocumentRequests.js.snap
index 5550b4387..4625f91ba 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronDocumentRequests/__tests__/__snapshots__/PatronDocumentRequests.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronDocumentRequests/__tests__/__snapshots__/PatronDocumentRequests.js.snap
@@ -135,10 +135,10 @@ exports[`PatronDocumentRequests tests should render patron document requests 1`]
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -174,11 +174,12 @@ exports[`PatronDocumentRequests tests should render patron document requests 1`]
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -189,7 +190,7 @@ exports[`PatronDocumentRequests tests should render patron document requests 1`]
                       "Created",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -208,32 +209,26 @@ exports[`PatronDocumentRequests tests should render patron document requests 1`]
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -341,22 +336,21 @@ exports[`PatronDocumentRequests tests should render patron document requests 1`]
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-documentRequest1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-documentRequest1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -366,29 +360,29 @@ exports[`PatronDocumentRequests tests should render patron document requests 1`]
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-documentRequest1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-documentRequest1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -467,22 +461,21 @@ exports[`PatronDocumentRequests tests should render patron document requests 1`]
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-documentRequest2"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-documentRequest2"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -492,29 +485,29 @@ exports[`PatronDocumentRequests tests should render patron document requests 1`]
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-documentRequest2"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-documentRequest2"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -667,10 +660,10 @@ exports[`PatronDocumentRequests tests should render show a message with no user
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -829,10 +822,10 @@ exports[`PatronDocumentRequests tests should render the see all button when show
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -868,11 +861,12 @@ exports[`PatronDocumentRequests tests should render the see all button when show
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -883,7 +877,7 @@ exports[`PatronDocumentRequests tests should render the see all button when show
                       "Created",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -902,32 +896,26 @@ exports[`PatronDocumentRequests tests should render the see all button when show
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -1029,22 +1017,21 @@ exports[`PatronDocumentRequests tests should render the see all button when show
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-documentRequest1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-documentRequest1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -1054,29 +1041,29 @@ exports[`PatronDocumentRequests tests should render the see all button when show
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-documentRequest1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-documentRequest1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -1208,13 +1195,13 @@ exports[`PatronDocumentRequests tests should render the see all button when show
                                       <Button
                                         as="button"
                                         onClick={[Function]}
-                                        size="small"
+                                        size="tiny"
                                       >
                                         <Ref
                                           innerRef={
                                             Object {
                                               "current": <button
-                                                class="ui small button"
+                                                class="ui tiny button"
                                               >
                                                 See all
                                               </button>,
@@ -1225,7 +1212,7 @@ exports[`PatronDocumentRequests tests should render the see all button when show
                                             innerRef={
                                               Object {
                                                 "current": <button
-                                                  class="ui small button"
+                                                  class="ui tiny button"
                                                 >
                                                   See all
                                                 </button>,
@@ -1233,7 +1220,7 @@ exports[`PatronDocumentRequests tests should render the see all button when show
                                             }
                                           >
                                             <button
-                                              className="ui small button"
+                                              className="ui tiny button"
                                               onClick={[Function]}
                                             >
                                               See all
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronPendingLoans/__tests__/PatronPendingLoans.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronPendingLoans/__tests__/PatronPendingLoans.js
index c6898d9d8..dcf7b7e18 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronPendingLoans/__tests__/PatronPendingLoans.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronPendingLoans/__tests__/PatronPendingLoans.js
@@ -1,15 +1,27 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Settings } from 'luxon';
-import { fromISO } from '../../../../../../common/api/date';
 import { BackOfficeRoutes } from '../../../../../../routes/urls';
 import PatronPendingLoans from '../PatronPendingLoans';
 import history from '../../../../../../history';
+import testData from '../../../../../../../../../../tests/data/loans.json';
 
 jest.mock('../../../../../../common/config/invenioConfig');
 
-Settings.defaultZoneName = 'utc';
-const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+const data = {
+  hits: [
+    {
+      id: 1,
+      pid: 'loan1',
+      metadata: testData[0],
+    },
+    {
+      id: 2,
+      pid: 'loan2',
+      metadata: testData[1],
+    },
+  ],
+  total: 2,
+};
 
 describe('PatronLoans tests', () => {
   let component;
@@ -57,38 +69,6 @@ describe('PatronLoans tests', () => {
 
   it('should render patron loans', () => {
     const mockedFetchPatronLoans = jest.fn();
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            document_pid: 'doc1',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 2,
-    };
-
     component = mount(
       <PatronPendingLoans
         patronPid={patron.pid}
@@ -116,37 +96,6 @@ describe('PatronLoans tests', () => {
 
   it('should render the see all button when showing only a few patron loans', () => {
     const mockedFetchPatronLoans = jest.fn();
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            document_pid: 'doc1',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 2,
-    };
     component = mount(
       <PatronPendingLoans
         patronPid={patron.pid}
@@ -166,25 +115,6 @@ describe('PatronLoans tests', () => {
   it('should go to loan details when clicking on a patron loan', () => {
     const mockedHistoryPush = jest.fn();
     history.push = mockedHistoryPush;
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 1,
-    };
-
     const mockedFetchPatronLoans = jest.fn();
     component = mount(
       <PatronPendingLoans
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronPendingLoans/__tests__/__snapshots__/PatronPendingLoans.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronPendingLoans/__tests__/__snapshots__/PatronPendingLoans.js.snap
index 6e5d90d81..8c6ab9337 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronPendingLoans/__tests__/__snapshots__/PatronPendingLoans.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronDetails/components/PatronPendingLoans/__tests__/__snapshots__/PatronPendingLoans.js.snap
@@ -36,30 +36,44 @@ exports[`PatronLoans tests should render patron loans 1`] = `
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 1,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_1",
-            "pid": "loan1",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-1",
+            "patron": Object {
+              "email": "patron1@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-1",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 2,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_2",
-            "pid": "loan2",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-2",
+            "patron": Object {
+              "email": "patron2@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-2",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -98,11 +112,11 @@ exports[`PatronLoans tests should render patron loans 1`] = `
         rows={
           Array [
             Object {
-              "Document ID": "doc1",
+              "Document ID": "docid-1",
               "ID": "loan1",
             },
             Object {
-              "Document ID": "doc1",
+              "Document ID": "docid-1",
               "ID": "loan2",
             },
           ]
@@ -134,10 +148,10 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -173,11 +187,12 @@ exports[`PatronLoans tests should render patron loans 1`] = `
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -186,7 +201,7 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                       "Document ID",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -205,32 +220,26 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -267,11 +276,11 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                   rows={
                     Array [
                       Object {
-                        "Document ID": "doc1",
+                        "Document ID": "docid-1",
                         "ID": "loan1",
                       },
                       Object {
-                        "Document ID": "doc1",
+                        "Document ID": "docid-1",
                         "ID": "loan2",
                       },
                     ]
@@ -302,22 +311,21 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -327,29 +335,29 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -380,7 +388,7 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                               className=""
                               data-test="Document ID-loan1"
                             >
-                              doc1
+                              docid-1
                             </td>
                           </TableCell>
                         </tr>
@@ -404,22 +412,21 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan2"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan2"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -429,29 +436,29 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan2"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan2"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -482,7 +489,7 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                               className=""
                               data-test="Document ID-loan2"
                             >
-                              doc1
+                              docid-1
                             </td>
                           </TableCell>
                         </tr>
@@ -581,10 +588,10 @@ exports[`PatronLoans tests should render show a message with no user loans 1`] =
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -644,30 +651,44 @@ exports[`PatronLoans tests should render the see all button when showing only a
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 1,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_1",
-            "pid": "loan1",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-1",
+            "patron": Object {
+              "email": "patron1@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-1",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 2,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_2",
-            "pid": "loan2",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-2",
+            "patron": Object {
+              "email": "patron2@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-2",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -705,11 +726,11 @@ exports[`PatronLoans tests should render the see all button when showing only a
         rows={
           Array [
             Object {
-              "Document ID": "doc1",
+              "Document ID": "docid-1",
               "ID": "loan1",
             },
             Object {
-              "Document ID": "doc1",
+              "Document ID": "docid-1",
               "ID": "loan2",
             },
           ]
@@ -741,10 +762,10 @@ exports[`PatronLoans tests should render the see all button when showing only a
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -780,11 +801,12 @@ exports[`PatronLoans tests should render the see all button when showing only a
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -793,7 +815,7 @@ exports[`PatronLoans tests should render the see all button when showing only a
                       "Document ID",
                     ]
                   }
-                  withRowAction={true}
+                  withRowAction={false}
                 >
                   <TableHeader
                     as="thead"
@@ -812,32 +834,26 @@ exports[`PatronLoans tests should render the see all button when showing only a
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={2}
                             >
                               <th
-                                className="collapsing two wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -874,7 +890,7 @@ exports[`PatronLoans tests should render the see all button when showing only a
                   rows={
                     Array [
                       Object {
-                        "Document ID": "doc1",
+                        "Document ID": "docid-1",
                         "ID": "loan1",
                       },
                     ]
@@ -905,22 +921,21 @@ exports[`PatronLoans tests should render the see all button when showing only a
                             >
                               <Button
                                 as="button"
-                                circular={true}
                                 compact={true}
                                 data-test="btn-view-details-loan1"
-                                icon="eye"
+                                icon="info"
                                 onClick={[Function]}
                               >
                                 <Ref
                                   innerRef={
                                     Object {
                                       "current": <button
-                                        class="ui circular compact icon button"
+                                        class="ui compact icon button"
                                         data-test="btn-view-details-loan1"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          class="eye icon"
+                                          class="info icon"
                                         />
                                       </button>,
                                     }
@@ -930,29 +945,29 @@ exports[`PatronLoans tests should render the see all button when showing only a
                                     innerRef={
                                       Object {
                                         "current": <button
-                                          class="ui circular compact icon button"
+                                          class="ui compact icon button"
                                           data-test="btn-view-details-loan1"
                                         >
                                           <i
                                             aria-hidden="true"
-                                            class="eye icon"
+                                            class="info icon"
                                           />
                                         </button>,
                                       }
                                     }
                                   >
                                     <button
-                                      className="ui circular compact icon button"
+                                      className="ui compact icon button"
                                       data-test="btn-view-details-loan1"
                                       onClick={[Function]}
                                     >
                                       <Icon
                                         as="i"
-                                        name="eye"
+                                        name="info"
                                       >
                                         <i
                                           aria-hidden="true"
-                                          className="eye icon"
+                                          className="info icon"
                                           onClick={[Function]}
                                         />
                                       </Icon>
@@ -983,7 +998,7 @@ exports[`PatronLoans tests should render the see all button when showing only a
                               className=""
                               data-test="Document ID-loan1"
                             >
-                              doc1
+                              docid-1
                             </td>
                           </TableCell>
                         </tr>
@@ -1060,13 +1075,13 @@ exports[`PatronLoans tests should render the see all button when showing only a
                                       <Button
                                         as="button"
                                         onClick={[Function]}
-                                        size="small"
+                                        size="tiny"
                                       >
                                         <Ref
                                           innerRef={
                                             Object {
                                               "current": <button
-                                                class="ui small button"
+                                                class="ui tiny button"
                                               >
                                                 See all
                                               </button>,
@@ -1077,7 +1092,7 @@ exports[`PatronLoans tests should render the see all button when showing only a
                                             innerRef={
                                               Object {
                                                 "current": <button
-                                                  class="ui small button"
+                                                  class="ui tiny button"
                                                 >
                                                   See all
                                                 </button>,
@@ -1085,7 +1100,7 @@ exports[`PatronLoans tests should render the see all button when showing only a
                                             }
                                           >
                                             <button
-                                              className="ui small button"
+                                              className="ui tiny button"
                                               onClick={[Function]}
                                             >
                                               See all
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/PatronsSearch.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/PatronsSearch.js
index f41cd585c..ca67ab2e9 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/PatronsSearch.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/PatronsSearch.js
@@ -16,12 +16,15 @@ import {
   Error as IlsError,
   SearchBar as PatronsSearchBar,
   ResultsSort,
+  ResultsTable,
 } from '../../../common/components';
+import { formatter } from '../../../common/components/ResultsTable/formatters';
 import { patron as patronApi } from '../../../common/api';
 import { getSearchConfig } from '../../../common/config';
 import { ClearButton } from '../components/buttons';
-import { ResultsList as PatronsResultsList } from './components';
+import { ExportReactSearchKitResults } from '../components';
 import { goTo } from '../../../history';
+import _pick from 'lodash/pick';
 
 export class PatronsSearch extends Component {
   searchApi = new InvenioSearchApi({
@@ -41,11 +44,24 @@ export class PatronsSearch extends Component {
     );
   };
 
-  renderResultsList = results => {
+  prepareData(data) {
+    return data.map(row => {
+      return _pick(formatter.patron.toTable(row), ['ID', 'Name', 'Email']);
+    });
+  }
+
+  renderResultsTable = results => {
+    const rows = this.prepareData(results);
+    const headerActionComponent = (
+      <ExportReactSearchKitResults exportBaseUrl={patronApi.searchBaseURL} />
+    );
+
     return (
-      <PatronsResultsList
-        results={results}
-        viewDetailsClickHandler={row =>
+      <ResultsTable
+        rows={rows}
+        title={''}
+        headerActionComponent={headerActionComponent}
+        rowActionClickHandler={row =>
           goTo(BackOfficeRoutes.patronDetailsFor(row.ID))
         }
       />
@@ -123,7 +139,7 @@ export class PatronsSearch extends Component {
                 <EmptyResults renderElement={this.renderEmptyResults} />
                 <Error renderElement={this.renderError} />
                 {this.renderHeader()}
-                <ResultsList renderElement={this.renderResultsList} />
+                <ResultsList renderElement={this.renderResultsTable} />
                 {this.renderFooter()}
               </Grid.Column>
             </ResultsLoader>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/PatronsSearch.js
similarity index 77%
rename from invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/ResultsList.js
rename to invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/PatronsSearch.js
index 31d720019..d5d89c136 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/ResultsList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/PatronsSearch.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import { ResultsList } from '../components';
+import { ResultsTable } from '../../../../common/components';
 import { formatter } from '../../../../common/components/ResultsTable/formatters';
 
 jest.mock('../../components');
 
 describe('PatronsSearch ResultsList tests', () => {
-  const results = [
+  const data = [
     {
       metadata: {
         email: 'admin@test.ch',
@@ -26,17 +26,20 @@ describe('PatronsSearch ResultsList tests', () => {
 
   it('should not render when empty results', () => {
     component = mount(
-      <ResultsList results={[]} viewDetailsClickHandler={() => {}} />
+      <ResultsTable rows={[]} rowActionClickHandler={() => {}} />
     );
     expect(component).toMatchSnapshot();
   });
 
   it('should render a list of results', () => {
     component = mount(
-      <ResultsList results={results} viewDetailsClickHandler={() => {}} />
+      <ResultsTable
+        rows={data.map(row => formatter.patron.toTable(row))}
+        rowActionClickHandler={() => {}}
+      />
     );
     expect(component).toMatchSnapshot();
-    const firstResult = results[0].metadata;
+    const firstResult = data[0].metadata;
     const resultRows = component
       .find('TableRow')
       .filterWhere(element => element.prop('data-test') === firstResult.id);
@@ -48,7 +51,6 @@ describe('PatronsSearch ResultsList tests', () => {
         element => element.prop('data-test') === 'Email-' + firstResult.id
       );
     expect(mappedStatusElements).toHaveLength(1);
-
     expect(mappedStatusElements.text()).toEqual(firstResult.email);
 
     mappedStatusElements = resultRows
@@ -57,25 +59,24 @@ describe('PatronsSearch ResultsList tests', () => {
         element => element.prop('data-test') === 'Name-' + firstResult.id
       );
     expect(mappedStatusElements).toHaveLength(1);
-
     expect(mappedStatusElements.text()).toEqual(firstResult.name);
   });
 
   it('should call click handler on view details click', () => {
     const mockedClickHandler = jest.fn();
     component = mount(
-      <ResultsList
-        results={results}
-        viewDetailsClickHandler={mockedClickHandler}
+      <ResultsTable
+        rows={data.map(row => formatter.patron.toTable(row))}
+        rowActionClickHandler={mockedClickHandler}
       />
     );
-    const firstId = results[0].metadata.id;
+    const firstId = data[0].metadata.id;
     const button = component
       .find('TableRow')
       .filterWhere(element => element.prop('data-test') === firstId)
       .find('button');
     button.simulate('click');
-    const expected = formatter.patron.toTable(results[0]);
+    const expected = formatter.patron.toTable(data[0]);
     expect(mockedClickHandler).toHaveBeenCalledWith(expected);
   });
 });
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/__snapshots__/PatronsSearch.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/__snapshots__/PatronsSearch.js.snap
new file mode 100644
index 000000000..b3d8b5d94
--- /dev/null
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/__snapshots__/PatronsSearch.js.snap
@@ -0,0 +1,376 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PatronsSearch ResultsList tests should not render when empty results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={Array []}
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Message
+        data-test="no-results"
+      >
+        <div
+          className="ui message"
+          data-test="no-results"
+        >
+          There are no 
+          .
+        </div>
+      </Message>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
+
+exports[`PatronsSearch ResultsList tests should render a list of results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={
+    Array [
+      Object {
+        "Email": "admin@test.ch",
+        "ID": 3,
+        "Name": "admin",
+      },
+    ]
+  }
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Table
+        as="table"
+        compact={true}
+        selectable={true}
+        striped={true}
+      >
+        <table
+          className="ui selectable striped compact table"
+        >
+          <ResultsTableHeader
+            columns={
+              Array [
+                "ID",
+                "Name",
+                "Email",
+              ]
+            }
+            withRowAction={false}
+          >
+            <TableHeader
+              as="thead"
+            >
+              <thead
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="header"
+                >
+                  <tr
+                    className=""
+                    data-test="header"
+                  >
+                    <TableHeaderCell
+                      as="th"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        />
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Name"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Name
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Email"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Email
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                  </tr>
+                </TableRow>
+              </thead>
+            </TableHeader>
+          </ResultsTableHeader>
+          <ResultsTableBody
+            columns={
+              Array [
+                "ID",
+                "Name",
+                "Email",
+              ]
+            }
+            rowActionClickHandler={[Function]}
+            rows={
+              Array [
+                Object {
+                  "Email": "admin@test.ch",
+                  "ID": 3,
+                  "Name": "admin",
+                },
+              ]
+            }
+          >
+            <TableBody
+              as="tbody"
+            >
+              <tbody
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test={3}
+                  key="3"
+                >
+                  <tr
+                    className=""
+                    data-test={3}
+                  >
+                    <TableCell
+                      as="td"
+                      textAlign="center"
+                    >
+                      <td
+                        className="center aligned"
+                      >
+                        <Button
+                          as="button"
+                          compact={true}
+                          data-test="btn-view-details-3"
+                          icon="info"
+                          onClick={[Function]}
+                        >
+                          <Ref
+                            innerRef={
+                              Object {
+                                "current": <button
+                                  class="ui compact icon button"
+                                  data-test="btn-view-details-3"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="info icon"
+                                  />
+                                </button>,
+                              }
+                            }
+                          >
+                            <RefFindNode
+                              innerRef={
+                                Object {
+                                  "current": <button
+                                    class="ui compact icon button"
+                                    data-test="btn-view-details-3"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="info icon"
+                                    />
+                                  </button>,
+                                }
+                              }
+                            >
+                              <button
+                                className="ui compact icon button"
+                                data-test="btn-view-details-3"
+                                onClick={[Function]}
+                              >
+                                <Icon
+                                  as="i"
+                                  name="info"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    className="info icon"
+                                    onClick={[Function]}
+                                  />
+                                </Icon>
+                              </button>
+                            </RefFindNode>
+                          </Ref>
+                        </Button>
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="ID-3"
+                      key="0-3"
+                    >
+                      <td
+                        className=""
+                        data-test="ID-3"
+                      >
+                        3
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Name-3"
+                      key="1-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Name-3"
+                      >
+                        admin
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Email-3"
+                      key="2-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Email-3"
+                      >
+                        admin@test.ch
+                      </td>
+                    </TableCell>
+                  </tr>
+                </TableRow>
+              </tbody>
+            </TableBody>
+          </ResultsTableBody>
+          <ResultsTableFooter
+            allRowsNumber={1}
+            columnsNumber={3}
+            currentPage={1}
+            paginationComponent={null}
+            seeAllComponent={null}
+            showAllResults={false}
+            showMaxRows={10}
+          />
+        </table>
+      </Table>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/__snapshots__/ResultsList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/__snapshots__/ResultsList.js.snap
deleted file mode 100644
index e53c85331..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/__tests__/__snapshots__/ResultsList.js.snap
+++ /dev/null
@@ -1,421 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`PatronsSearch ResultsList tests should not render when empty results 1`] = `
-<ResultsList
-  results={Array []}
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <ExportReactSearchKitResults
-        exportBaseUrl="https://127.0.0.1:5000/api/patrons/"
-      />
-    }
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={Array []}
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <ExportReactSearchKitResults
-                      exportBaseUrl="https://127.0.0.1:5000/api/patrons/"
-                    />
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Message
-          data-test="no-results"
-        >
-          <div
-            className="ui message"
-            data-test="no-results"
-          >
-            There are no 
-            .
-          </div>
-        </Message>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
-
-exports[`PatronsSearch ResultsList tests should render a list of results 1`] = `
-<ResultsList
-  results={
-    Array [
-      Object {
-        "metadata": Object {
-          "email": "admin@test.ch",
-          "id": 3,
-          "links": Object {
-            "self": "https://localhost:5000/api/patrons/3",
-          },
-          "name": "admin",
-        },
-      },
-    ]
-  }
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <ExportReactSearchKitResults
-        exportBaseUrl="https://127.0.0.1:5000/api/patrons/"
-      />
-    }
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={
-      Array [
-        Object {
-          "Email": "admin@test.ch",
-          "ID": 3,
-          "Name": "admin",
-        },
-      ]
-    }
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <ExportReactSearchKitResults
-                      exportBaseUrl="https://127.0.0.1:5000/api/patrons/"
-                    />
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Table
-          as="table"
-          selectable={true}
-          striped={true}
-        >
-          <table
-            className="ui selectable striped table"
-          >
-            <ResultsTableHeader
-              columns={
-                Array [
-                  "ID",
-                  "Name",
-                  "Email",
-                ]
-              }
-              withRowAction={true}
-            >
-              <TableHeader
-                as="thead"
-              >
-                <thead
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test="header"
-                  >
-                    <tr
-                      className=""
-                      data-test="header"
-                    >
-                      <TableHeaderCell
-                        as="th"
-                        collapsing={true}
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          collapsing={true}
-                          width={2}
-                        >
-                          <th
-                            className="collapsing two wide"
-                          />
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="ID"
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          width={2}
-                        >
-                          <th
-                            className="two wide"
-                          >
-                            ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Name"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Name
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Email"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Email
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                    </tr>
-                  </TableRow>
-                </thead>
-              </TableHeader>
-            </ResultsTableHeader>
-            <ResultsTableBody
-              columns={
-                Array [
-                  "ID",
-                  "Name",
-                  "Email",
-                ]
-              }
-              rowActionClickHandler={[Function]}
-              rows={
-                Array [
-                  Object {
-                    "Email": "admin@test.ch",
-                    "ID": 3,
-                    "Name": "admin",
-                  },
-                ]
-              }
-            >
-              <TableBody
-                as="tbody"
-              >
-                <tbody
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test={3}
-                    key="3"
-                  >
-                    <tr
-                      className=""
-                      data-test={3}
-                    >
-                      <TableCell
-                        as="td"
-                        textAlign="center"
-                      >
-                        <td
-                          className="center aligned"
-                        >
-                          <Button
-                            as="button"
-                            circular={true}
-                            compact={true}
-                            data-test="btn-view-details-3"
-                            icon="eye"
-                            onClick={[Function]}
-                          >
-                            <Ref
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui circular compact icon button"
-                                    data-test="btn-view-details-3"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="eye icon"
-                                    />
-                                  </button>,
-                                }
-                              }
-                            >
-                              <RefFindNode
-                                innerRef={
-                                  Object {
-                                    "current": <button
-                                      class="ui circular compact icon button"
-                                      data-test="btn-view-details-3"
-                                    >
-                                      <i
-                                        aria-hidden="true"
-                                        class="eye icon"
-                                      />
-                                    </button>,
-                                  }
-                                }
-                              >
-                                <button
-                                  className="ui circular compact icon button"
-                                  data-test="btn-view-details-3"
-                                  onClick={[Function]}
-                                >
-                                  <Icon
-                                    as="i"
-                                    name="eye"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      className="eye icon"
-                                      onClick={[Function]}
-                                    />
-                                  </Icon>
-                                </button>
-                              </RefFindNode>
-                            </Ref>
-                          </Button>
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="ID-3"
-                        key="0-3"
-                      >
-                        <td
-                          className=""
-                          data-test="ID-3"
-                        >
-                          3
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Name-3"
-                        key="1-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Name-3"
-                        >
-                          admin
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Email-3"
-                        key="2-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Email-3"
-                        >
-                          admin@test.ch
-                        </td>
-                      </TableCell>
-                    </tr>
-                  </TableRow>
-                </tbody>
-              </TableBody>
-            </ResultsTableBody>
-            <ResultsTableFooter
-              allRowsNumber={1}
-              columnsNumber={3}
-              currentPage={1}
-              paginationComponent={null}
-              seeAllComponent={null}
-              showAllResults={false}
-              showMaxRows={10}
-            />
-          </table>
-        </Table>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/ResultsList/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/ResultsList/ResultsList.js
deleted file mode 100644
index d11c0ad15..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/ResultsList/ResultsList.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ResultsTable } from '../../../../../common/components';
-import { formatter } from '../../../../../common/components/ResultsTable/formatters';
-import { pick } from 'lodash/object';
-import { ExportReactSearchKitResults } from '../../../components';
-import { patron as patronApi } from '../../../../../common/api';
-
-export class ResultsList extends Component {
-  constructor(props) {
-    super(props);
-    this.viewDetailsClickHandler = this.props.viewDetailsClickHandler;
-  }
-
-  prepareData(data) {
-    return data.map(row => {
-      return pick(formatter.patron.toTable(row), ['ID', 'Name', 'Email']);
-    });
-  }
-
-  render() {
-    const rows = this.prepareData(this.props.results);
-    const headerActionComponent = (
-      <ExportReactSearchKitResults exportBaseUrl={patronApi.searchBaseURL} />
-    );
-
-    return (
-      <ResultsTable
-        rows={rows}
-        title={''}
-        headerActionComponent={headerActionComponent}
-        rowActionClickHandler={this.viewDetailsClickHandler}
-      />
-    );
-  }
-}
-
-ResultsList.propTypes = {
-  results: PropTypes.array.isRequired,
-  viewDetailsClickHandler: PropTypes.func.isRequired,
-};
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/ResultsList/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/ResultsList/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/ResultsList/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/PatronsSearch/components/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/SeriesSearch.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/SeriesSearch.js
index 93e0b176d..c015751c7 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/SeriesSearch.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/SeriesSearch.js
@@ -16,12 +16,16 @@ import {
   Error as IlsError,
   SearchBar as SeriesSearchBar,
   ResultsSort,
+  ResultsTable,
 } from '../../../../common/components';
+import { formatter } from '../../../../common/components/ResultsTable/formatters';
 import { series as seriesApi } from '../../../../common/api/series/series';
 import { getSearchConfig } from '../../../../common/config';
+import { ExportReactSearchKitResults } from '../../components';
 import { ClearButton, NewButton } from '../../components/buttons';
 import { BackOfficeRoutes } from '../../../../routes/urls';
-import { ResultsList as SeriesResultsList } from './components';
+import _pick from 'lodash/pick';
+
 import { goTo } from '../../../../history';
 
 export class SeriesSearch extends Component {
@@ -59,11 +63,37 @@ export class SeriesSearch extends Component {
     );
   };
 
-  renderResultsList = results => {
+  prepareData(data) {
+    return data.map(row => {
+      return _pick(formatter.series.toTable(row), [
+        'ID',
+        'Mode of Issuance',
+        'Title',
+      ]);
+    });
+  }
+
+  renderResultsTable = results => {
+    const rows = this.prepareData(results);
+    const headerActionComponent = (
+      <div>
+        <NewButton
+          text={'New series'}
+          clickHandler={() => {
+            goTo(BackOfficeRoutes.seriesCreate);
+          }}
+        />
+        <ExportReactSearchKitResults exportBaseUrl={seriesApi.searchBaseURL} />
+      </div>
+    );
+
     return (
-      <SeriesResultsList
-        results={results}
-        viewDetailsClickHandler={row =>
+      <ResultsTable
+        rows={rows}
+        title={''}
+        name={'series'}
+        headerActionComponent={headerActionComponent}
+        rowActionClickHandler={row =>
           goTo(BackOfficeRoutes.seriesDetailsFor(row.ID))
         }
       />
@@ -157,7 +187,7 @@ export class SeriesSearch extends Component {
                 <EmptyResults renderElement={this.renderEmptyResults} />
                 <Error renderElement={this.renderError} />
                 {this.renderHeader()}
-                <ResultsList renderElement={this.renderResultsList} />
+                <ResultsList renderElement={this.renderResultsTable} />
                 {this.renderFooter()}
               </Grid.Column>
             </ResultsLoader>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/SeriesSearch.js
similarity index 60%
rename from invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/ResultsList.js
rename to invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/SeriesSearch.js
index 30c59d5e0..f8e830980 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/ResultsList.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/SeriesSearch.js
@@ -2,52 +2,54 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { Settings } from 'luxon';
 import { fromISO } from '../../../../../common/api/date';
-import { ResultsList } from '../components';
+import { ResultsTable } from '../../../../../common/components';
 import { formatter } from '../../../../../common/components/ResultsTable/formatters';
 
 jest.mock('../../../components');
 
 Settings.defaultZoneName = 'utc';
+const stringDate = fromISO('2018-01-01T11:05:00+01:00');
 
-describe('SeriesSearch ResultsList tests', () => {
-  const stringDate = fromISO('2018-01-01T11:05:00+01:00');
-
-  const results = [
-    {
-      id: '3',
-      created: stringDate,
-      updated: stringDate,
+const data = [
+  {
+    id: '3',
+    created: stringDate,
+    updated: stringDate,
+    pid: '3',
+    metadata: {
       pid: '3',
-      metadata: {
-        authors: ['Author1'],
-        title: 'This is a title',
-        abstract: 'This is an abstract',
-        mode_of_issuance: 'SERIAL',
-        languages: ['en'],
-        pid: '3',
-        related_records: [],
-      },
+      authors: ['Author1'],
+      title: 'This is a title',
+      abstract: 'This is an abstract',
+      mode_of_issuance: 'SERIAL',
+      languages: ['en'],
+      related_records: [],
     },
-  ];
+  },
+];
 
-  let component;
-  afterEach(() => {
-    component.unmount();
-  });
+let component;
+afterEach(() => {
+  component.unmount();
+});
 
+describe('SeriesSearch ResultsTable tests', () => {
   it('should not render when empty results', () => {
     component = mount(
-      <ResultsList results={[]} viewDetailsClickHandler={() => {}} />
+      <ResultsTable rows={[]} rowActionClickHandler={() => {}} />
     );
     expect(component).toMatchSnapshot();
   });
 
   it('should render a list of results', () => {
     component = mount(
-      <ResultsList results={results} viewDetailsClickHandler={() => {}} />
+      <ResultsTable
+        rows={data.map(row => formatter.series.toTable(row))}
+        rowActionClickHandler={() => {}}
+      />
     );
     expect(component).toMatchSnapshot();
-    const firstResult = results[0];
+    const firstResult = data[0];
     const resultRows = component
       .find('TableRow')
       .filterWhere(
@@ -69,18 +71,18 @@ describe('SeriesSearch ResultsList tests', () => {
   it('should call click handler on view details click', () => {
     const mockedClickHandler = jest.fn();
     component = mount(
-      <ResultsList
-        results={results}
-        viewDetailsClickHandler={mockedClickHandler}
+      <ResultsTable
+        rows={data.map(row => formatter.series.toTable(row))}
+        rowActionClickHandler={mockedClickHandler}
       />
     );
-    const firstId = results[0].pid;
+    const firstId = data[0].pid;
     const button = component
       .find('TableRow')
       .filterWhere(element => element.prop('data-test') === firstId)
       .find('button');
     button.simulate('click');
-    const expected = formatter.series.toTable(results[0]);
+    const expected = formatter.series.toTable(data[0]);
     expect(mockedClickHandler).toHaveBeenCalledWith(expected);
   });
 });
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/__snapshots__/ResultsList.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/__snapshots__/ResultsList.js.snap
deleted file mode 100644
index a33cf9e47..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/__snapshots__/ResultsList.js.snap
+++ /dev/null
@@ -1,678 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SeriesSearch ResultsList tests should not render when empty results 1`] = `
-<ResultsList
-  results={Array []}
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <div>
-        <NewButton
-          clickHandler={[Function]}
-          disabled={false}
-          fluid={false}
-          text="New series"
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl="https://127.0.0.1:5000/api/series/"
-        />
-      </div>
-    }
-    name="series"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={Array []}
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <div>
-                      <NewButton
-                        clickHandler={[Function]}
-                        disabled={false}
-                        fluid={false}
-                        text="New series"
-                      >
-                        <Button
-                          as="button"
-                          icon={true}
-                          labelPosition="left"
-                          onClick={[Function]}
-                          positive={true}
-                          size="small"
-                        >
-                          <Ref
-                            innerRef={
-                              Object {
-                                "current": <button
-                                  class="ui small icon positive left labeled button"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                  New series
-                                </button>,
-                              }
-                            }
-                          >
-                            <RefFindNode
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui small icon positive left labeled button"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="plus icon"
-                                    />
-                                    New series
-                                  </button>,
-                                }
-                              }
-                            >
-                              <button
-                                className="ui small icon positive left labeled button"
-                                onClick={[Function]}
-                              >
-                                <Icon
-                                  as="i"
-                                  name="plus"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    className="plus icon"
-                                    onClick={[Function]}
-                                  />
-                                </Icon>
-                                New series
-                              </button>
-                            </RefFindNode>
-                          </Ref>
-                        </Button>
-                      </NewButton>
-                      <ExportReactSearchKitResults
-                        exportBaseUrl="https://127.0.0.1:5000/api/series/"
-                      />
-                    </div>
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Message
-          data-test="no-results"
-        >
-          <div
-            className="ui message"
-            data-test="no-results"
-          >
-            There are no 
-            series
-            .
-          </div>
-        </Message>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
-
-exports[`SeriesSearch ResultsList tests should render a list of results 1`] = `
-<ResultsList
-  results={
-    Array [
-      Object {
-        "created": "2018-01-01T10:05:00.000Z",
-        "id": "3",
-        "metadata": Object {
-          "abstract": "This is an abstract",
-          "authors": Array [
-            "Author1",
-          ],
-          "languages": Array [
-            "en",
-          ],
-          "mode_of_issuance": "SERIAL",
-          "pid": "3",
-          "related_records": Array [],
-          "title": "This is a title",
-        },
-        "pid": "3",
-        "updated": "2018-01-01T10:05:00.000Z",
-      },
-    ]
-  }
-  viewDetailsClickHandler={[Function]}
->
-  <ResultsTable
-    currentPage={1}
-    fixed={false}
-    headerActionClickHandler={null}
-    headerActionComponent={
-      <div>
-        <NewButton
-          clickHandler={[Function]}
-          disabled={false}
-          fluid={false}
-          text="New series"
-        />
-        <ExportReactSearchKitResults
-          exportBaseUrl="https://127.0.0.1:5000/api/series/"
-        />
-      </div>
-    }
-    name="series"
-    paginationComponent={null}
-    renderSegment={true}
-    rowActionClickHandler={[Function]}
-    rows={
-      Array [
-        Object {
-          "Authors": Array [
-            "Author1",
-          ],
-          "Created": "2018-01-01",
-          "ID": "3",
-          "Mode of Issuance": "SERIAL",
-          "Title": "This is a title",
-          "Updated": "2018-01-01",
-        },
-      ]
-    }
-    seeAllComponent={null}
-    showAllResults={false}
-    showMaxRows={10}
-    singleLine={false}
-    subtitle=""
-    title=""
-  >
-    <Segment>
-      <div
-        className="ui segment"
-      >
-        <Grid>
-          <div
-            className="ui grid"
-          >
-            <GridRow>
-              <div
-                className="row"
-              >
-                <GridColumn
-                  verticalAlign="middle"
-                  width={8}
-                >
-                  <div
-                    className="middle aligned eight wide column"
-                  />
-                </GridColumn>
-                <GridColumn
-                  textAlign="right"
-                  width={8}
-                >
-                  <div
-                    className="right aligned eight wide column"
-                  >
-                    <div>
-                      <NewButton
-                        clickHandler={[Function]}
-                        disabled={false}
-                        fluid={false}
-                        text="New series"
-                      >
-                        <Button
-                          as="button"
-                          icon={true}
-                          labelPosition="left"
-                          onClick={[Function]}
-                          positive={true}
-                          size="small"
-                        >
-                          <Ref
-                            innerRef={
-                              Object {
-                                "current": <button
-                                  class="ui small icon positive left labeled button"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    class="plus icon"
-                                  />
-                                  New series
-                                </button>,
-                              }
-                            }
-                          >
-                            <RefFindNode
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui small icon positive left labeled button"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="plus icon"
-                                    />
-                                    New series
-                                  </button>,
-                                }
-                              }
-                            >
-                              <button
-                                className="ui small icon positive left labeled button"
-                                onClick={[Function]}
-                              >
-                                <Icon
-                                  as="i"
-                                  name="plus"
-                                >
-                                  <i
-                                    aria-hidden="true"
-                                    className="plus icon"
-                                    onClick={[Function]}
-                                  />
-                                </Icon>
-                                New series
-                              </button>
-                            </RefFindNode>
-                          </Ref>
-                        </Button>
-                      </NewButton>
-                      <ExportReactSearchKitResults
-                        exportBaseUrl="https://127.0.0.1:5000/api/series/"
-                      />
-                    </div>
-                  </div>
-                </GridColumn>
-              </div>
-            </GridRow>
-          </div>
-        </Grid>
-        <Table
-          as="table"
-          selectable={true}
-          striped={true}
-        >
-          <table
-            className="ui selectable striped table"
-          >
-            <ResultsTableHeader
-              columns={
-                Array [
-                  "ID",
-                  "Created",
-                  "Updated",
-                  "Mode of Issuance",
-                  "Title",
-                  "Authors",
-                ]
-              }
-              withRowAction={true}
-            >
-              <TableHeader
-                as="thead"
-              >
-                <thead
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test="header"
-                  >
-                    <tr
-                      className=""
-                      data-test="header"
-                    >
-                      <TableHeaderCell
-                        as="th"
-                        collapsing={true}
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          collapsing={true}
-                          width={2}
-                        >
-                          <th
-                            className="collapsing two wide"
-                          />
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="ID"
-                        width={2}
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                          width={2}
-                        >
-                          <th
-                            className="two wide"
-                          >
-                            ID
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Created"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Created
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Updated"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Updated
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Mode of Issuance"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Mode of Issuance
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Title"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Title
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                      <TableHeaderCell
-                        as="th"
-                        key="Authors"
-                      >
-                        <TableCell
-                          as="th"
-                          className=""
-                        >
-                          <th
-                            className=""
-                          >
-                            Authors
-                          </th>
-                        </TableCell>
-                      </TableHeaderCell>
-                    </tr>
-                  </TableRow>
-                </thead>
-              </TableHeader>
-            </ResultsTableHeader>
-            <ResultsTableBody
-              columns={
-                Array [
-                  "ID",
-                  "Created",
-                  "Updated",
-                  "Mode of Issuance",
-                  "Title",
-                  "Authors",
-                ]
-              }
-              rowActionClickHandler={[Function]}
-              rows={
-                Array [
-                  Object {
-                    "Authors": Array [
-                      "Author1",
-                    ],
-                    "Created": "2018-01-01",
-                    "ID": "3",
-                    "Mode of Issuance": "SERIAL",
-                    "Title": "This is a title",
-                    "Updated": "2018-01-01",
-                  },
-                ]
-              }
-            >
-              <TableBody
-                as="tbody"
-              >
-                <tbody
-                  className=""
-                >
-                  <TableRow
-                    as="tr"
-                    cellAs="td"
-                    data-test="3"
-                    key="3"
-                  >
-                    <tr
-                      className=""
-                      data-test="3"
-                    >
-                      <TableCell
-                        as="td"
-                        textAlign="center"
-                      >
-                        <td
-                          className="center aligned"
-                        >
-                          <Button
-                            as="button"
-                            circular={true}
-                            compact={true}
-                            data-test="btn-view-details-3"
-                            icon="eye"
-                            onClick={[Function]}
-                          >
-                            <Ref
-                              innerRef={
-                                Object {
-                                  "current": <button
-                                    class="ui circular compact icon button"
-                                    data-test="btn-view-details-3"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      class="eye icon"
-                                    />
-                                  </button>,
-                                }
-                              }
-                            >
-                              <RefFindNode
-                                innerRef={
-                                  Object {
-                                    "current": <button
-                                      class="ui circular compact icon button"
-                                      data-test="btn-view-details-3"
-                                    >
-                                      <i
-                                        aria-hidden="true"
-                                        class="eye icon"
-                                      />
-                                    </button>,
-                                  }
-                                }
-                              >
-                                <button
-                                  className="ui circular compact icon button"
-                                  data-test="btn-view-details-3"
-                                  onClick={[Function]}
-                                >
-                                  <Icon
-                                    as="i"
-                                    name="eye"
-                                  >
-                                    <i
-                                      aria-hidden="true"
-                                      className="eye icon"
-                                      onClick={[Function]}
-                                    />
-                                  </Icon>
-                                </button>
-                              </RefFindNode>
-                            </Ref>
-                          </Button>
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="ID-3"
-                        key="0-3"
-                      >
-                        <td
-                          className=""
-                          data-test="ID-3"
-                        >
-                          3
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Created-3"
-                        key="1-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Created-3"
-                        >
-                          2018-01-01
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Updated-3"
-                        key="2-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Updated-3"
-                        >
-                          2018-01-01
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Mode of Issuance-3"
-                        key="3-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Mode of Issuance-3"
-                        >
-                          SERIAL
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Title-3"
-                        key="4-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Title-3"
-                        >
-                          This is a title
-                        </td>
-                      </TableCell>
-                      <TableCell
-                        as="td"
-                        data-test="Authors-3"
-                        key="5-3"
-                      >
-                        <td
-                          className=""
-                          data-test="Authors-3"
-                        >
-                          Author1
-                        </td>
-                      </TableCell>
-                    </tr>
-                  </TableRow>
-                </tbody>
-              </TableBody>
-            </ResultsTableBody>
-            <ResultsTableFooter
-              allRowsNumber={1}
-              columnsNumber={6}
-              currentPage={1}
-              paginationComponent={null}
-              seeAllComponent={null}
-              showAllResults={false}
-              showMaxRows={10}
-            />
-          </table>
-        </Table>
-      </div>
-    </Segment>
-  </ResultsTable>
-</ResultsList>
-`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/__snapshots__/SeriesSearch.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/__snapshots__/SeriesSearch.js.snap
new file mode 100644
index 000000000..72cd00fc2
--- /dev/null
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/__tests__/__snapshots__/SeriesSearch.js.snap
@@ -0,0 +1,473 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SeriesSearch ResultsTable tests should not render when empty results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={Array []}
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Message
+        data-test="no-results"
+      >
+        <div
+          className="ui message"
+          data-test="no-results"
+        >
+          There are no 
+          .
+        </div>
+      </Message>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
+
+exports[`SeriesSearch ResultsTable tests should render a list of results 1`] = `
+<ResultsTable
+  currentPage={1}
+  fixed={false}
+  headerActionClickHandler={null}
+  headerActionComponent={null}
+  paginationComponent={null}
+  renderSegment={true}
+  rowActionClickHandler={[Function]}
+  rows={
+    Array [
+      Object {
+        "Authors": Array [
+          "Author1",
+        ],
+        "Created": "2018-01-01",
+        "ID": "3",
+        "Mode of Issuance": "SERIAL",
+        "Title": "This is a title",
+        "Updated": "2018-01-01",
+      },
+    ]
+  }
+  seeAllComponent={null}
+  showAllResults={false}
+  showMaxRows={10}
+  singleLine={false}
+  subtitle=""
+  title=""
+>
+  <Segment>
+    <div
+      className="ui segment"
+    >
+      <Grid>
+        <div
+          className="ui grid"
+        >
+          <GridRow>
+            <div
+              className="row"
+            >
+              <GridColumn
+                verticalAlign="middle"
+                width={16}
+              >
+                <div
+                  className="middle aligned sixteen wide column"
+                />
+              </GridColumn>
+              <GridColumn
+                textAlign="right"
+                width={8}
+              >
+                <div
+                  className="right aligned eight wide column"
+                />
+              </GridColumn>
+            </div>
+          </GridRow>
+        </div>
+      </Grid>
+      <Table
+        as="table"
+        compact={true}
+        selectable={true}
+        striped={true}
+      >
+        <table
+          className="ui selectable striped compact table"
+        >
+          <ResultsTableHeader
+            columns={
+              Array [
+                "ID",
+                "Created",
+                "Updated",
+                "Title",
+                "Mode of Issuance",
+                "Authors",
+              ]
+            }
+            withRowAction={false}
+          >
+            <TableHeader
+              as="thead"
+            >
+              <thead
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="header"
+                >
+                  <tr
+                    className=""
+                    data-test="header"
+                  >
+                    <TableHeaderCell
+                      as="th"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        />
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="ID"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          ID
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Created"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Created
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Updated"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Updated
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Title"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Title
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Mode of Issuance"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Mode of Issuance
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                    <TableHeaderCell
+                      as="th"
+                      key="Authors"
+                    >
+                      <TableCell
+                        as="th"
+                        className=""
+                      >
+                        <th
+                          className=""
+                        >
+                          Authors
+                        </th>
+                      </TableCell>
+                    </TableHeaderCell>
+                  </tr>
+                </TableRow>
+              </thead>
+            </TableHeader>
+          </ResultsTableHeader>
+          <ResultsTableBody
+            columns={
+              Array [
+                "ID",
+                "Created",
+                "Updated",
+                "Title",
+                "Mode of Issuance",
+                "Authors",
+              ]
+            }
+            rowActionClickHandler={[Function]}
+            rows={
+              Array [
+                Object {
+                  "Authors": Array [
+                    "Author1",
+                  ],
+                  "Created": "2018-01-01",
+                  "ID": "3",
+                  "Mode of Issuance": "SERIAL",
+                  "Title": "This is a title",
+                  "Updated": "2018-01-01",
+                },
+              ]
+            }
+          >
+            <TableBody
+              as="tbody"
+            >
+              <tbody
+                className=""
+              >
+                <TableRow
+                  as="tr"
+                  cellAs="td"
+                  data-test="3"
+                  key="3"
+                >
+                  <tr
+                    className=""
+                    data-test="3"
+                  >
+                    <TableCell
+                      as="td"
+                      textAlign="center"
+                    >
+                      <td
+                        className="center aligned"
+                      >
+                        <Button
+                          as="button"
+                          compact={true}
+                          data-test="btn-view-details-3"
+                          icon="info"
+                          onClick={[Function]}
+                        >
+                          <Ref
+                            innerRef={
+                              Object {
+                                "current": <button
+                                  class="ui compact icon button"
+                                  data-test="btn-view-details-3"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    class="info icon"
+                                  />
+                                </button>,
+                              }
+                            }
+                          >
+                            <RefFindNode
+                              innerRef={
+                                Object {
+                                  "current": <button
+                                    class="ui compact icon button"
+                                    data-test="btn-view-details-3"
+                                  >
+                                    <i
+                                      aria-hidden="true"
+                                      class="info icon"
+                                    />
+                                  </button>,
+                                }
+                              }
+                            >
+                              <button
+                                className="ui compact icon button"
+                                data-test="btn-view-details-3"
+                                onClick={[Function]}
+                              >
+                                <Icon
+                                  as="i"
+                                  name="info"
+                                >
+                                  <i
+                                    aria-hidden="true"
+                                    className="info icon"
+                                    onClick={[Function]}
+                                  />
+                                </Icon>
+                              </button>
+                            </RefFindNode>
+                          </Ref>
+                        </Button>
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="ID-3"
+                      key="0-3"
+                    >
+                      <td
+                        className=""
+                        data-test="ID-3"
+                      >
+                        3
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Created-3"
+                      key="1-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Created-3"
+                      >
+                        2018-01-01
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Updated-3"
+                      key="2-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Updated-3"
+                      >
+                        2018-01-01
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Title-3"
+                      key="3-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Title-3"
+                      >
+                        This is a title
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Mode of Issuance-3"
+                      key="4-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Mode of Issuance-3"
+                      >
+                        SERIAL
+                      </td>
+                    </TableCell>
+                    <TableCell
+                      as="td"
+                      data-test="Authors-3"
+                      key="5-3"
+                    >
+                      <td
+                        className=""
+                        data-test="Authors-3"
+                      >
+                        Author1
+                      </td>
+                    </TableCell>
+                  </tr>
+                </TableRow>
+              </tbody>
+            </TableBody>
+          </ResultsTableBody>
+          <ResultsTableFooter
+            allRowsNumber={1}
+            columnsNumber={6}
+            currentPage={1}
+            paginationComponent={null}
+            seeAllComponent={null}
+            showAllResults={false}
+            showMaxRows={10}
+          />
+        </table>
+      </Table>
+    </div>
+  </Segment>
+</ResultsTable>
+`;
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/ResultsList/ResultsList.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/ResultsList/ResultsList.js
deleted file mode 100644
index 306ee8d6a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/ResultsList/ResultsList.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { ResultsTable } from '../../../../../../common/components';
-import { NewButton } from '../../../../components/buttons';
-import { formatter } from '../../../../../../common/components/ResultsTable/formatters';
-import pick from 'lodash/pick';
-import { ExportReactSearchKitResults } from '../../../../components';
-import { series as seriesApi } from '../../../../../../common/api';
-import { BackOfficeRoutes } from '../../../../../../routes/urls';
-import { goTo } from '../../../../../../history';
-
-export class ResultsList extends Component {
-  constructor(props) {
-    super(props);
-    this.viewDetailsClickHandler = this.props.viewDetailsClickHandler;
-  }
-
-  prepareData(data) {
-    return data.map(row => {
-      return pick(formatter.series.toTable(row), [
-        'ID',
-        'Created',
-        'Updated',
-        'Mode of Issuance',
-        'Title',
-        'Authors',
-      ]);
-    });
-  }
-
-  render() {
-    const rows = this.prepareData(this.props.results);
-    const headerActionComponent = (
-      <div>
-        <NewButton
-          text={'New series'}
-          clickHandler={() => {
-            goTo(BackOfficeRoutes.seriesCreate);
-          }}
-        />
-        <ExportReactSearchKitResults exportBaseUrl={seriesApi.searchBaseURL} />
-      </div>
-    );
-
-    return (
-      <ResultsTable
-        rows={rows}
-        title={''}
-        name={'series'}
-        headerActionComponent={headerActionComponent}
-        rowActionClickHandler={this.viewDetailsClickHandler}
-      />
-    );
-  }
-}
-
-ResultsList.propTypes = {
-  results: PropTypes.array.isRequired,
-  viewDetailsClickHandler: PropTypes.func.isRequired,
-};
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/ResultsList/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/ResultsList/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/ResultsList/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/index.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/index.js
deleted file mode 100644
index 22bf3a49a..000000000
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/Series/SeriesSearch/components/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { ResultsList } from './ResultsList';
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/components/Sidebar/Sidebar.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/components/Sidebar/Sidebar.js
index 46f63cfd0..b945f40c3 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/components/Sidebar/Sidebar.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/components/Sidebar/Sidebar.js
@@ -92,7 +92,7 @@ class Sidebar extends Component {
               active={patronsActive}
               onClick={goToHandler(BackOfficeRoutes.patronsList)}
             >
-              All Users
+              All of them
             </Menu.Item>
           </Menu.Menu>
         </Menu.Item>
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/components/buttons/SeeAllButton/SeeAllButton.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/components/buttons/SeeAllButton/SeeAllButton.js
index dc5bfe400..330c269c1 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/components/buttons/SeeAllButton/SeeAllButton.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/backoffice/components/buttons/SeeAllButton/SeeAllButton.js
@@ -7,7 +7,7 @@ export default class SeeAllButton extends Component {
     const { fluid, disabled } = this.props;
     return (
       <Button
-        size="small"
+        size="tiny"
         {...(disabled ? { disabled: true } : {})}
         {...(fluid ? { fluid: true } : {})}
         onClick={this.props.clickHandler}
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsDetails/components/DocumentMetadata/DocumentMetadata.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsDetails/components/DocumentMetadata/DocumentMetadata.js
index b4c8d1f3f..ca6eada13 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsDetails/components/DocumentMetadata/DocumentMetadata.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsDetails/components/DocumentMetadata/DocumentMetadata.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
-import { Container, Divider, Grid, Segment, Tab } from 'semantic-ui-react';
+import { Container, Divider, Tab } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
-import { DocumentTags, DocumentRelations, DocumentInfo } from './components';
+import { DocumentRelations, DocumentInfo } from './components';
 import { DocumentTableOfContent } from './components/DocumentTableOfContent';
 import { DocumentConference } from './components/DocumentConference';
 
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsDetails/components/DocumentMetadata/components/DocumentConference.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsDetails/components/DocumentMetadata/components/DocumentConference.js
index 2dee53a61..3eff70fea 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsDetails/components/DocumentMetadata/components/DocumentConference.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsDetails/components/DocumentMetadata/components/DocumentConference.js
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Divider, List, Table } from 'semantic-ui-react';
+import { Divider, Table } from 'semantic-ui-react';
 import PropTypes from 'prop-types';
 
 export class DocumentConference extends Component {
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsSearch/components/DocumentItem/DocumentItem.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsSearch/components/DocumentItem/DocumentItem.js
index bda78c6c3..44b381b0d 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsSearch/components/DocumentItem/DocumentItem.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsSearch/components/DocumentItem/DocumentItem.js
@@ -48,7 +48,7 @@ export default class DocumentItem extends Component {
               <div className="document-share-buttons"></div>
             </Responsive>
             <Item.Content>
-              <Item.Header>{this.metadata.title.title}</Item.Header>
+              <Item.Header>{this.metadata.title}</Item.Header>
               <Item.Meta>
                 <span className="author">
                   Authors:{' '}
@@ -63,14 +63,10 @@ export default class DocumentItem extends Component {
                 </span>
               </Item.Meta>
               <Responsive {...Responsive.onlyMobile}>
-                <Item.Description>
-                  {this.metadata.abstracts[0].value}
-                </Item.Description>
+                <Item.Description>{this.metadata.abstract}</Item.Description>
               </Responsive>
               <Responsive {...Responsive.onlyComputer}>
-                <Item.Description>
-                  {this.metadata.abstracts[0].value}
-                </Item.Description>
+                <Item.Description>{this.metadata.abstract}</Item.Description>
               </Responsive>
               <Item.Extra>
                 <Button
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsSearch/components/DocumentItem/__tests__/__snapshots__/DocumentItem.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsSearch/components/DocumentItem/__tests__/__snapshots__/DocumentItem.js.snap
index fb165aaec..e4eb0e867 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsSearch/components/DocumentItem/__tests__/__snapshots__/DocumentItem.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Documents/DocumentsSearch/components/DocumentItem/__tests__/__snapshots__/DocumentItem.js.snap
@@ -25,7 +25,9 @@ exports[`should render correctly 1`] = `
       >
         <div
           className="header"
-        />
+        >
+          Lorem ipsum
+        </div>
         <div
           className="meta"
         >
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Profile/components/PatronPendingLoans/__tests__/PatronPendingLoans.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Profile/components/PatronPendingLoans/__tests__/PatronPendingLoans.js
index 7b3727860..4d2e5cd48 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Profile/components/PatronPendingLoans/__tests__/PatronPendingLoans.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Profile/components/PatronPendingLoans/__tests__/PatronPendingLoans.js
@@ -1,13 +1,25 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
-import { Settings } from 'luxon';
-import { fromISO } from '../../../../../../common/api/date';
 import PatronPendingLoans from '../PatronPendingLoans';
+import testData from '../../../../../../../../../../tests/data/loans.json';
 
 jest.mock('../../../../../../common/config');
 
-Settings.defaultZoneName = 'utc';
-const stringDate = fromISO('2018-01-01T11:05:00+01:00');
+const data = {
+  hits: [
+    {
+      id: 1,
+      pid: 'loan1',
+      metadata: testData[0],
+    },
+    {
+      id: 2,
+      pid: 'loan2',
+      metadata: testData[1],
+    },
+  ],
+  total: 2,
+};
 
 describe('PatronLoans tests', () => {
   let component;
@@ -55,38 +67,6 @@ describe('PatronLoans tests', () => {
 
   it('should render patron loans', () => {
     const mockedFetchPatronLoans = jest.fn();
-    const data = {
-      hits: [
-        {
-          id: 1,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan1',
-          metadata: {
-            pid: 'loan1',
-            document_pid: 'doc1',
-            patron_pid: 'patron_1',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-        {
-          id: 2,
-          updated: stringDate,
-          created: stringDate,
-          pid: 'loan2',
-          metadata: {
-            pid: 'loan2',
-            document_pid: 'doc1',
-            patron_pid: 'patron_2',
-            start_date: stringDate,
-            end_date: stringDate,
-          },
-        },
-      ],
-      total: 2,
-    };
-
     component = mount(
       <PatronPendingLoans
         patronPid={patron.pid}
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Profile/components/PatronPendingLoans/__tests__/__snapshots__/PatronPendingLoans.js.snap b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Profile/components/PatronPendingLoans/__tests__/__snapshots__/PatronPendingLoans.js.snap
index a0802e5f2..39e396ef5 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Profile/components/PatronPendingLoans/__tests__/__snapshots__/PatronPendingLoans.js.snap
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/Profile/components/PatronPendingLoans/__tests__/__snapshots__/PatronPendingLoans.js.snap
@@ -37,30 +37,44 @@ exports[`PatronLoans tests should render patron loans 1`] = `
     Object {
       "hits": Array [
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 1,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_1",
-            "pid": "loan1",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-1",
+            "patron": Object {
+              "email": "patron1@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-1",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan1",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
         Object {
-          "created": "2018-01-01T10:05:00.000Z",
           "id": 2,
           "metadata": Object {
-            "document_pid": "doc1",
-            "end_date": "2018-01-01T10:05:00.000Z",
-            "patron_pid": "patron_2",
-            "pid": "loan2",
-            "start_date": "2018-01-01T10:05:00.000Z",
+            "document_pid": "docid-1",
+            "end_date": "2018-07-28",
+            "item_pid": "itemid-2",
+            "patron": Object {
+              "email": "patron2@test.ch",
+            },
+            "patron_pid": "1",
+            "pickup_location_pid": "locid-1",
+            "pid": "loanid-2",
+            "start_date": "2018-06-28",
+            "state": "PENDING",
+            "transaction_date": "2018-06-29",
+            "transaction_location_pid": "locid-1",
+            "transaction_user_pid": "user_pid",
           },
           "pid": "loan2",
-          "updated": "2018-01-01T10:05:00.000Z",
         },
       ],
       "total": 2,
@@ -105,13 +119,13 @@ exports[`PatronLoans tests should render patron loans 1`] = `
         rows={
           Array [
             Object {
-              "Document ID": "doc1",
+              "Document ID": "docid-1",
               "ID": "loan1",
               "Request end date": null,
               "Request start date": null,
             },
             Object {
-              "Document ID": "doc1",
+              "Document ID": "docid-1",
               "ID": "loan2",
               "Request end date": null,
               "Request start date": null,
@@ -139,10 +153,10 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
@@ -178,11 +192,12 @@ exports[`PatronLoans tests should render patron loans 1`] = `
             </Grid>
             <Table
               as="table"
+              compact={true}
               selectable={true}
               striped={true}
             >
               <table
-                className="ui selectable striped table"
+                className="ui selectable striped compact table"
               >
                 <ResultsTableHeader
                   columns={
@@ -212,32 +227,26 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                         >
                           <TableHeaderCell
                             as="th"
-                            collapsing={true}
-                            width={1}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              collapsing={true}
-                              width={1}
                             >
                               <th
-                                className="collapsing one wide"
+                                className=""
                               />
                             </TableCell>
                           </TableHeaderCell>
                           <TableHeaderCell
                             as="th"
                             key="ID"
-                            width={2}
                           >
                             <TableCell
                               as="th"
                               className=""
-                              width={2}
                             >
                               <th
-                                className="two wide"
+                                className=""
                               >
                                 ID
                               </th>
@@ -306,13 +315,13 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                   rows={
                     Array [
                       Object {
-                        "Document ID": "doc1",
+                        "Document ID": "docid-1",
                         "ID": "loan1",
                         "Request end date": null,
                         "Request start date": null,
                       },
                       Object {
-                        "Document ID": "doc1",
+                        "Document ID": "docid-1",
                         "ID": "loan2",
                         "Request end date": null,
                         "Request start date": null,
@@ -365,7 +374,7 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                               className=""
                               data-test="Document ID-loan1"
                             >
-                              doc1
+                              docid-1
                             </td>
                           </TableCell>
                           <TableCell
@@ -433,7 +442,7 @@ exports[`PatronLoans tests should render patron loans 1`] = `
                               className=""
                               data-test="Document ID-loan2"
                             >
-                              doc1
+                              docid-1
                             </td>
                           </TableCell>
                           <TableCell
@@ -557,10 +566,10 @@ exports[`PatronLoans tests should render show a message with no user loans 1`] =
                   >
                     <GridColumn
                       verticalAlign="middle"
-                      width={8}
+                      width={16}
                     >
                       <div
-                        className="middle aligned eight wide column"
+                        className="middle aligned sixteen wide column"
                       >
                         <Header
                           as="h3"
diff --git a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/components/Header/Header.js b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/components/Header/Header.js
index 777c0b256..f6bd0bf00 100644
--- a/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/components/Header/Header.js
+++ b/invenio_app_ils/ui/src/invenio_app_ils/pages/frontsite/components/Header/Header.js
@@ -55,6 +55,7 @@ export default class Header extends Component {
       this.renderRightDropDown()
     );
   };
+
   render() {
     return (
       <Menu
@@ -63,7 +64,6 @@ export default class Header extends Component {
         fluid
         inverted
         fixed="top"
-        inverted
         className="header-menu"
         widths={3}
       >
diff --git a/tests/data/eitems.json b/tests/data/eitems.json
index 065fec655..119e709af 100644
--- a/tests/data/eitems.json
+++ b/tests/data/eitems.json
@@ -4,13 +4,19 @@
     "document_pid": "docid-1",
     "internal_notes": "An internal note",
     "description": "Description of the electronic item",
-    "open_access": true
+    "open_access": true,
+    "document": {
+      "title": "Document 1 title"
+    }
   },
   {
     "pid": "eitemid-2",
     "document_pid": "docid-2",
     "internal_notes": "An internal note",
     "description": "Description of the electronic item",
-    "open_access": false
+    "open_access": false,
+    "document": {
+      "title": "Document 2 title"
+    }
   }
 ]
diff --git a/tests/data/loans.json b/tests/data/loans.json
index 9c45ecd66..59cddf66c 100644
--- a/tests/data/loans.json
+++ b/tests/data/loans.json
@@ -10,7 +10,10 @@
     "state": "PENDING",
     "transaction_date": "2018-06-29",
     "transaction_location_pid": "locid-1",
-    "transaction_user_pid": "user_pid"
+    "transaction_user_pid": "user_pid",
+    "patron": {
+      "email": "patron1@test.ch"
+    }
   },
   {
     "document_pid": "docid-1",
@@ -23,7 +26,10 @@
     "state": "PENDING",
     "transaction_date": "2018-06-29",
     "transaction_location_pid": "locid-1",
-    "transaction_user_pid": "user_pid"
+    "transaction_user_pid": "user_pid",
+    "patron": {
+      "email": "patron2@test.ch"
+    }
   },
   {
     "document_pid": "docid-3",