diff --git a/package-lock.json b/package-lock.json
index 906c15a..6cad67d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "@recogito/recogito-client-core": "^1.6.0",
         "@svgdotjs/svg.js": "^3.1.1",
         "perfect-arrows": "^0.3.7",
-        "tiny-emitter": "^2.1.0"
+        "tiny-emitter": "^2.1.0",
+        "uuid": "^9.0.0"
       },
       "devDependencies": {
         "@babel/plugin-proposal-class-properties": "^7.16.0",
@@ -1863,6 +1864,14 @@
         "url": "https://github.com/sponsors/rsimon"
       }
     },
+    "node_modules/@recogito/recogito-client-core/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/@svgdotjs/svg.js": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/@svgdotjs/svg.js/-/svg.js-3.1.1.tgz",
@@ -6138,6 +6147,15 @@
         "websocket-driver": "^0.7.4"
       }
     },
+    "node_modules/sockjs/node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "dev": true,
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
     "node_modules/source-map": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -6583,9 +6601,9 @@
       }
     },
     "node_modules/uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
       "bin": {
         "uuid": "dist/bin/uuid"
       }
@@ -8335,6 +8353,13 @@
         "regenerator-runtime": "^0.13.9",
         "timeago-react": "^3.0.2",
         "uuid": "^8.3.2"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
       }
     },
     "@svgdotjs/svg.js": {
@@ -11620,6 +11645,14 @@
         "faye-websocket": "^0.11.3",
         "uuid": "^8.3.2",
         "websocket-driver": "^0.7.4"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+          "dev": true
+        }
       }
     },
     "source-map": {
@@ -11941,9 +11974,9 @@
       "dev": true
     },
     "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
+      "integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
     },
     "vary": {
       "version": "1.1.2",
diff --git a/package.json b/package.json
index c88391d..6e1331d 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "@recogito/recogito-client-core": "^1.6.0",
     "@svgdotjs/svg.js": "^3.1.1",
     "perfect-arrows": "^0.3.7",
-    "tiny-emitter": "^2.1.0"
+    "tiny-emitter": "^2.1.0",
+    "uuid": "^9.0.0"
   }
 }
diff --git a/public/annotations.w3c.json b/public/annotations.w3c.json
index dc33d3e..ad6a201 100644
--- a/public/annotations.w3c.json
+++ b/public/annotations.w3c.json
@@ -101,8 +101,13 @@
   {
     "@context": "http://www.w3.org/ns/anno.jsonld",
     "type": "Annotation",
-    "id": "#570a0a77-28d2-4c05-ab5f-5a098df52f5e",
-    "body": [],
+    "id": "#relation-1",
+    "body": [{
+      "type": "TextualBody",
+      "value": "MyTag",
+      "purpose": "tagging"
+    }],
+    "motivation": "linking",
     "target": [
       {
         "id": "#1"
diff --git a/public/index.html b/public/index.html
index 340ef1b..d9f37de 100644
--- a/public/index.html
+++ b/public/index.html
@@ -78,7 +78,7 @@ <h1>Homer: The Odyssey</h1>
           console.log('deleted', c);
         });
 
-        // r.loadAnnotations('annotations.w3c.json');
+        r.loadAnnotations('annotations.w3c.json');
       };
     </script>
   </body>
diff --git a/src/NetworkCanvas.js b/src/NetworkCanvas.js
index d34df40..95f72b8 100644
--- a/src/NetworkCanvas.js
+++ b/src/NetworkCanvas.js
@@ -1,5 +1,6 @@
 import { SVG } from '@svgdotjs/svg.js';
 import EventEmitter from 'tiny-emitter';
+import { v4 as uuid } from 'uuid';
 
 import NetworkEdge from './NetworkEdge';
 import NetworkNode from './NetworkNode';
@@ -144,7 +145,9 @@ export default class NetworkCanvas extends EventEmitter {
   onCompleteConnection = () => {
     const { start, end } = this.currentFloatingEdge;
 
-    const edge = new NetworkEdge(start, end);
+    const id = `#${uuid()}`;
+
+    const edge = new NetworkEdge(id, start, end);
 
     const annotation = edge.toAnnotation();
 
@@ -236,7 +239,7 @@ export default class NetworkCanvas extends EventEmitter {
   setAnnotations = annotations => annotations.forEach(a => {
     const start = NetworkNode.findById(a.targets[0].id);
     const end = NetworkNode.findById(a.targets[1].id);
-    this.addEdge(new NetworkEdge(start, end));
+    this.addEdge(new NetworkEdge(a.id, start, end));
   });
 
   unregisterInstance = instance => 
diff --git a/src/NetworkEdge.js b/src/NetworkEdge.js
index fb977ad..30ce3db 100644
--- a/src/NetworkEdge.js
+++ b/src/NetworkEdge.js
@@ -2,7 +2,9 @@ import WebAnnotation from '@recogito/recogito-client-core/src/WebAnnotation';
 
 export default class NetworkEdge {
 
-  constructor(start, end) {
+  constructor(id, start, end) {
+    this.id = id;
+
     this.start = start;
     this.end = end;
     
@@ -20,6 +22,7 @@ export default class NetworkEdge {
   }
 
   toAnnotation = () => WebAnnotation.create({
+    id: this.id,
     body: this.bodies,
     motivation: 'linking',
     target: [