diff --git a/ui/src/overridableMapping.js b/ui/src/overridableMapping.js
index b6c6d1ae0..55e8fecfb 100644
--- a/ui/src/overridableMapping.js
+++ b/ui/src/overridableMapping.js
@@ -37,6 +37,7 @@ import { OpeningHoursDetails } from "./overridden/frontsite/OpeningHours/Opening
 import { PaymentInformationGrid } from "./overridden/backoffice/PaymentInformation/PaymentInformation";
 import { OrderDetailsLine } from "./overridden/backoffice/Acquisition/OrderDetails";
 import { ItemCirculationShelf } from "./overridden/backoffice/Items/ItemCirculationShelf";
+import { DocumentItems } from "./overridden/backoffice/Document/DocumentDetails/DocumentItems";
 
 export const overriddenCmps = {
   "Backoffice.PatronDetails.Metadata": PatronMetadata,
@@ -71,4 +72,5 @@ export const overriddenCmps = {
   "Acquisition.OrderLine": OrderDetailsLine,
   "DocumentCirculation.Extras": DocumentCirculationExtras,
   "ItemCirculation.backoffice.shelf": ItemCirculationShelf,
+  "DocumentDetails.DocumentItems": DocumentItems,
 };
diff --git a/ui/src/overridden/backoffice/Document/DocumentDetails/DocumentItems.js b/ui/src/overridden/backoffice/Document/DocumentDetails/DocumentItems.js
new file mode 100644
index 000000000..5e082b00c
--- /dev/null
+++ b/ui/src/overridden/backoffice/Document/DocumentDetails/DocumentItems.js
@@ -0,0 +1,127 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import {
+  BackOfficeRoutes,
+  itemApi,
+  ResultsTable,
+  Loader,
+  Error,
+  SeeAllButton,
+} from "@inveniosoftware/react-invenio-app-ils";
+import _get from "lodash/get";
+import _isEmpty from "lodash/isEmpty";
+
+export class DocumentItems extends Component {
+  componentDidMount() {
+    const { fetchDocumentItems, documentDetails } = this.props;
+    fetchDocumentItems(documentDetails.pid);
+  }
+
+  seeAllButton = () => {
+    const { documentDetails } = this.props;
+
+    const path = BackOfficeRoutes.itemsListWithQuery(
+      itemApi.query().withDocPid(documentDetails.pid).qs()
+    );
+    return <SeeAllButton to={path} />;
+  };
+
+  viewDetails = ({ row }) => {
+    return (
+      <Link
+        to={BackOfficeRoutes.itemDetailsFor(row.metadata.pid)}
+        data-test={row.metadata.pid}
+      >
+        {row.metadata.barcode}
+      </Link>
+    );
+  };
+
+  locationFormatter = ({ row }) => {
+    return `${row.metadata.internal_location.name} (${row.metadata.internal_location.location.name})`;
+  };
+
+  callNumberFormatter = ({ row }) => {
+    if (!_isEmpty(row.metadata.identifiers)) {
+      return row.metadata.identifiers.find(
+        (identifier) => identifier.scheme === "CALL_NUMBER"
+      ).value;
+    }
+    return "-";
+  };
+
+  renderTable(data) {
+    const { showMaxItems } = this.props;
+    const columns = [
+      {
+        title: "Barcode",
+        field: "metadata.barcode",
+        formatter: this.viewDetails,
+      },
+      { title: "Status", field: "metadata.status" },
+      { title: "Medium", field: "metadata.medium" },
+      {
+        title: "Location",
+        field: "metadata.internal_location.name",
+        formatter: this.locationFormatter,
+      },
+      {
+        title: "Call number",
+        field: "metadata.identifiers",
+        formatter: this.callNumberFormatter,
+      },
+      { title: "Restrictions", field: "metadata.circulation_restriction" },
+      {
+        title: "Loan Status",
+        field: "metadata.circulation.state",
+        formatter: ({ row, col }) => {
+          if (_get(row, col.field) === "ITEM_ON_LOAN") {
+            return (
+              <Link
+                to={BackOfficeRoutes.loanDetailsFor(row.metadata.circulation.loan_pid)}
+              >
+                on loan
+              </Link>
+            );
+          }
+          return _get(row, col.field) || "-";
+        },
+      },
+    ];
+    return (
+      <ResultsTable
+        data={data.hits}
+        columns={columns}
+        totalHitsCount={data.total}
+        name="attached items"
+        seeAllComponent={this.seeAllButton()}
+        showMaxRows={showMaxItems}
+      />
+    );
+  }
+
+  render() {
+    const { documentItems, isLoading, error } = this.props;
+    return (
+      <Loader isLoading={isLoading}>
+        <Error error={error}>{this.renderTable(documentItems)}</Error>
+      </Loader>
+    );
+  }
+}
+
+DocumentItems.propTypes = {
+  documentItems: PropTypes.object.isRequired,
+  documentDetails: PropTypes.object.isRequired,
+  fetchDocumentItems: PropTypes.func.isRequired,
+  showMaxItems: PropTypes.number,
+  isLoading: PropTypes.bool,
+  error: PropTypes.object,
+};
+
+DocumentItems.defaultProps = {
+  showMaxItems: 5,
+  isLoading: false,
+  error: null,
+};
diff --git a/ui/src/overridden/backoffice/Items/ItemCirculationShelf.js b/ui/src/overridden/backoffice/Items/ItemCirculationShelf.js
index 329f4cbe5..60747bbf8 100644
--- a/ui/src/overridden/backoffice/Items/ItemCirculationShelf.js
+++ b/ui/src/overridden/backoffice/Items/ItemCirculationShelf.js
@@ -1,11 +1,11 @@
-import { isEmpty } from "lodash";
+import _isEmpty from "lodash/isEmpty";
 import React from "react";
 import { Grid, Icon } from "semantic-ui-react";
 import PropTypes from "prop-types";
 
 export const ItemCirculationShelf = ({ metadata }) => {
   let callNumber = {};
-  if (!isEmpty(metadata.identifiers)) {
+  if (!_isEmpty(metadata.identifiers)) {
     callNumber = metadata.identifiers.find(
       (identifier) => identifier.scheme === "CALL_NUMBER"
     );
@@ -13,8 +13,8 @@ export const ItemCirculationShelf = ({ metadata }) => {
   return (
     <Grid.Column width={6}>
       <Icon name="map pin" />
-      Call number: {callNumber ? callNumber.value : "missing"} (SHELF:{" "}
-      {metadata.shelf ? metadata.shelf : "missing"})
+      Call number: {!_isEmpty(callNumber) ? callNumber.value : "missing"}
+      {metadata.shelf ? ` (SHELF: ${metadata.shelf})` : ""}
     </Grid.Column>
   );
 };