diff --git a/src/lib/index.js b/src/lib/index.js
index aa79e4fb1..0878562c3 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -27,6 +27,7 @@ export {
 export { SeriesCardGroup } from '@modules/Series/SeriesCardGroup';
 export { DocumentCardGroup } from '@modules/Document/DocumentCardGroup';
 export { DocumentRequestForm } from '@pages/frontsite/DocumentRequests';
+export { default as DocumentItemBody } from '@pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentItemBody';
 export { default as LiteratureSearch } from '@pages/frontsite/Literature/LiteratureSearch/LiteratureSearch';
 export { Headline } from '@pages/frontsite/Home/Headline';
 export { BackOfficeRoutes, FrontSiteRoutes } from '@routes/urls';
diff --git a/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentItem.js b/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentItem.js
index a18eb1909..c31100027 100644
--- a/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentItem.js
+++ b/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentItem.js
@@ -51,18 +51,21 @@ class DocumentItem extends Component {
 
         <Table stackable striped compact fixed className="document-item-table">
           <Table.Header>
-            <Table.Row data-test="header">
-              <Table.HeaderCell>Barcode</Table.HeaderCell>
-              <Table.HeaderCell>Shelf</Table.HeaderCell>
-              <Table.HeaderCell>Call Number</Table.HeaderCell>
-              <Table.HeaderCell>Status</Table.HeaderCell>
-              <Table.HeaderCell>Medium</Table.HeaderCell>
-              <Table.HeaderCell>Loan restriction</Table.HeaderCell>
-            </Table.Row>
+            <Overridable id="DocumentDetails.DocumentItem.TableHeader">
+              <Table.Row data-test="header">
+                <Table.HeaderCell>Barcode</Table.HeaderCell>
+                <Table.HeaderCell>Shelf</Table.HeaderCell>
+                <Table.HeaderCell>Status</Table.HeaderCell>
+                <Table.HeaderCell>Medium</Table.HeaderCell>
+                <Table.HeaderCell>Loan restriction</Table.HeaderCell>
+              </Table.Row>
+            </Overridable>
           </Table.Header>
 
           <Table.Body>
-            <DocumentItemBody items={itemsToShow} />
+            <Overridable id="DocumentDetails.DocumentItemTableBody">
+              <DocumentItemBody items={itemsToShow} />
+            </Overridable>
           </Table.Body>
 
           {this.moreItemsToLoad && (
diff --git a/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentItemBody.js b/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentItemBody.js
index 00d3c3eaf..f8e099378 100644
--- a/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentItemBody.js
+++ b/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentItemBody.js
@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import _get from 'lodash/get';
 import { PropTypes } from 'prop-types';
 import { Table } from 'semantic-ui-react';
-import { Media } from '@components/Media';
 import { getDisplayVal, invenioConfig } from '@config';
 
 export default class DocumentItemBody extends Component {
@@ -27,19 +26,8 @@ export default class DocumentItemBody extends Component {
     return getDisplayVal('ITEMS.statuses', item.status);
   };
 
-  callNumber = (items) => {
-    const identifiers = _get(items, 'identifiers', []);
-    if (identifiers === null) {
-      return '-';
-    }
-    const callNumber = identifiers.find(
-      (identifier) => identifier.scheme.toLowerCase() === 'call number'
-    );
-    return callNumber ? callNumber.value : '-';
-  };
-
   render() {
-    const { items } = this.props;
+    const { items, callNumber, shelfLink } = this.props;
 
     return items.map((item) => (
       <Table.Row key={item.pid}>
@@ -50,27 +38,14 @@ export default class DocumentItemBody extends Component {
           {item.barcode}
         </Table.Cell>
 
-        <Media greaterThanOrEqual="tablet">
-          <Table.Cell
-            data-label="Shelf"
-            className="document-item-table-itemCell"
-          >
-            {item.shelf}
-          </Table.Cell>
-        </Media>
-
-        <Media lessThan="tablet">
-          <Table.Cell
-            data-label="Shelf"
-            className="document-item-table-itemCell"
-          >
-            {item.shelf || 'none'}
-          </Table.Cell>
-        </Media>
-
-        <Table.Cell data-label="Call Number">
-          {this.callNumber(item)}
+        <Table.Cell data-label="Shelf" className="document-item-table-itemCell">
+          {(shelfLink !== null ? shelfLink(item) : _get(item, 'shelf')) ||
+            'none'}
         </Table.Cell>
+
+        {callNumber && (
+          <Table.Cell data-label="Call Number">{callNumber(item)}</Table.Cell>
+        )}
         <Table.Cell data-label="Status">{this.statusLabel(item)}</Table.Cell>
         <Table.Cell data-label="Medium">
           {getDisplayVal('ITEMS.mediums', item.medium)}
@@ -88,4 +63,11 @@ export default class DocumentItemBody extends Component {
 
 DocumentItemBody.propTypes = {
   items: PropTypes.array.isRequired,
+  shelfLink: PropTypes.func,
+  callNumber: PropTypes.func,
+};
+
+DocumentItemBody.defaultProps = {
+  shelfLink: null,
+  callNumber: null,
 };
diff --git a/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentTabs.js b/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentTabs.js
index ae5f02714..e716b7cb6 100644
--- a/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentTabs.js
+++ b/src/lib/pages/frontsite/Documents/DocumentDetails/DocumentItems/DocumentTabs.js
@@ -82,7 +82,7 @@ export default class DocumentTabs extends Component {
 
         return (
           <Menu.Item
-            icon="edit"
+            icon
             active={menuItemIsActive}
             name={internalLocationName}
             onClick={this.handleLocationClick}