diff --git a/frontend/src/DeleteReferenceButton.js b/frontend/src/DeleteReferenceButton.js
new file mode 100644
index 00000000..701e101d
--- /dev/null
+++ b/frontend/src/DeleteReferenceButton.js
@@ -0,0 +1,21 @@
+import Button from 'react-bootstrap/Button';
+import {useNavigate} from 'react-router-dom';
+import {XCircle} from 'react-bootstrap-icons';
+
+function DeleteReferenceButton({doc, ref_id, setLastUpdate, backend}) {
+  const navigate = useNavigate();
+  let handleDelete = async () => {
+    let _id = doc._id;
+    doc.links = doc.links.filter(link => link.object.toString() !== ref_id.toString());
+    backend.putDocument(doc).then(() => {
+      setLastUpdate(_id);
+      navigate('/' + ref_id);
+    });
+  };
+
+  return (
+    <XCircle title="Delete this reference" className="icon delete_reference" onClick={handleDelete}/>
+  );
+}
+
+export default DeleteReferenceButton;
\ No newline at end of file
diff --git a/frontend/src/DocumentsCards.js b/frontend/src/DocumentsCards.js
index 21d32a2a..27d552eb 100644
--- a/frontend/src/DocumentsCards.js
+++ b/frontend/src/DocumentsCards.js
@@ -8,13 +8,14 @@ import BrowseTools from './BrowseTools';
 import FutureDocument from './FutureDocument';
 import FutureCollection from './FutureCollection';
 import { TypeBadge } from './Type';
+import DeleteReferenceButton from './DeleteReferenceButton';
 
-function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backend}) {
+function DocumentsCards({docs, expandable, byRow, isDeletable, createOn, setLastUpdate, backend}) {
   return (
     <Row className="gy-4">
       {docs.map(x =>
         <Col key={x._id} md={ byRow && (12 / byRow) }>
-          <DocumentCard doc={x} expandable={expandable} />
+          <DocumentCard doc={x} expandable={expandable} isDeletable={isDeletable} ref_id={createOn} {...{setLastUpdate, backend}}/>
         </Col>
       )}
       {createOn &&
@@ -35,7 +36,7 @@ function DocumentsCards({docs, expandable, byRow, createOn, setLastUpdate, backe
   );
 }
 
-function DocumentCard({doc, expandable}) {
+function DocumentCard({doc, expandable, isDeletable, ref_id, setLastUpdate, backend}) {
   const collectionId = useMemo(() => {
     if (doc?.links?.length > 1) {
       return doc.links.every((item) => {
@@ -48,6 +49,11 @@ function DocumentCard({doc, expandable}) {
 
   return (
     <Card className="h-100">
+      {isDeletable && (
+        <Card.Header className="d-flex justify-content-end">
+          <DeleteReferenceButton doc={doc} ref_id={ref_id} setLastUpdate={setLastUpdate} backend={backend}/>
+        </Card.Header>
+      )}
       <Card.Body>
         <BrowseTools
           id={collectionId ? doc.links.length && windowWidth.current < 820 ? doc.links[0].object : doc._id : doc._id}
diff --git a/frontend/src/Page.js b/frontend/src/Page.js
index a4996ddc..baa38c63 100644
--- a/frontend/src/Page.js
+++ b/frontend/src/Page.js
@@ -220,7 +220,7 @@ function References({scholiaMetadata, active, createOn, setLastUpdate, backend})
   if (!active) return;
   return (
     <Col className="gloses" >
-      <DocumentsCards docs={scholiaMetadata} expandable={true} byRow={1}
+      <DocumentsCards docs={scholiaMetadata} expandable={true} byRow={1} isDeletable={true}
         {...{createOn, setLastUpdate, backend}}
       />
     </Col>