diff --git a/vrobbler/apps/scrobbles/models.py b/vrobbler/apps/scrobbles/models.py
index fc407b2..ebcc6dc 100644
--- a/vrobbler/apps/scrobbles/models.py
+++ b/vrobbler/apps/scrobbles/models.py
@@ -792,6 +792,12 @@ class Scrobble(TimeStampedModel):
         except TypeError as e:
             return logdata_cls()
 
+    @property
+    def notes(self):
+        if self.logdata:
+            return self.logdata.notes or []
+        return []
+
     def redirect_url(self, user_id) -> str:
         user = User.objects.filter(id=user_id).first()
         redirect_url = self.media_obj.get_absolute_url()
diff --git a/vrobbler/apps/webpages/views.py b/vrobbler/apps/webpages/views.py
index 3856f83..85b09e8 100644
--- a/vrobbler/apps/webpages/views.py
+++ b/vrobbler/apps/webpages/views.py
@@ -22,18 +22,8 @@ class WebPageDetailView(ScrobbleableDetailView):
             latest = self.object.scrobbles(self.request.user).first()
             if latest:
                 context["latest_scrobble_uuid"] = str(latest.uuid)
-                context["latest_scrobble_notes"] = (
-                    latest.log.get("notes", []) if latest.log else []
-                )
-                print(
-                    f"DEBUG: Found scrobble {latest.uuid} for user {self.request.user}"
-                )
-            else:
-                print(
-                    f"DEBUG: No scrobble found for user {self.request.user} on webpage {self.object.uuid}"
-                )
-        else:
-            print(f"DEBUG: User not authenticated")
+                notes = latest.log.get("notes", []) if latest.log else []
+                context["latest_scrobble_notes"] = notes
         return context
 
 
@@ -62,7 +52,6 @@ class WebPageReadView(
         webpage = WebPage.objects.get(uuid=self.kwargs.get("slug"))
         latest_scrobble = webpage.scrobbles(user).last()
         if not latest_scrobble.played_to_completion:
-
             latest_scrobble.stop()
 
             latest_scrobble.log["notes"] = self.request.POST.get("notes")
diff --git a/vrobbler/templates/scrobbles/scrobble_detail.html b/vrobbler/templates/scrobbles/scrobble_detail.html
index f245792..541147d 100644
--- a/vrobbler/templates/scrobbles/scrobble_detail.html
+++ b/vrobbler/templates/scrobbles/scrobble_detail.html
@@ -11,6 +11,17 @@
 
 <h1>{{ object.media_obj }} - {{object.media_type}}</h1>
 
+{% if object.notes %}
+<details class="mb-3">
+  <summary>Notes ({{ object.notes|length }})</summary>
+  <ul class="mt-2">
+  {% for note in object.notes %}
+    <li>{{ note }}</li>
+  {% endfor %}
+  </ul>
+</details>
+{% endif %}
+
 <!-- Your existing detail page content -->
 {% if object.logdata.avg_seconds_per_page %}
 <p>Rate: {{object.logdata.avg_seconds_per_page}}s per page</p>
diff --git a/vrobbler/templates/webpages/webpage_detail.html b/vrobbler/templates/webpages/webpage_detail.html
index cbfa807..0561ea7 100644
--- a/vrobbler/templates/webpages/webpage_detail.html
+++ b/vrobbler/templates/webpages/webpage_detail.html
@@ -17,9 +17,7 @@
 <script type="text/javascript">
 (function() {
     var latestScrobbleUuid = "{{ latest_scrobble_uuid|default:'' }}";
-    console.log('DEBUG: latestScrobbleUuid =', latestScrobbleUuid);
     if (!latestScrobbleUuid) {
-        console.log('No latest scrobble UUID available');
         return;
     }
 
@@ -48,6 +46,7 @@
                 return {
                     "@context": "http://www.w3.org/ns/anno.jsonld",
                     "@type": "Annotation",
+                    "id": "note-{{ forloop.counter }}",
                     "body": [{"@type": "TextualBody", "value": parsed.text}],
                     "target": {"selector": [{"type": "TextPositionSelector", "start": parsed.position.start, "end": parsed.position.end}]}
                 };
@@ -57,16 +56,12 @@
         {% endfor %}
     ].filter(function(n) { return n !== null; });
 
+    console.log("existing:", existingNotes);
     if (existingNotes.length > 0) {
         r.setAnnotations(existingNotes);
     }
 
-    r.on('createAnnotation', function(annotation) {
-        var note = annotation.body && annotation.body[0] ? annotation.body[0].value : null;
-        if (!note) {
-            return;
-        }
-
+    function getPositionFromAnnotation(annotation) {
         var position = null;
         if (annotation.target && annotation.target.selector) {
             var selector = annotation.target.selector;
@@ -77,9 +72,19 @@
                 }
             }
         }
+        return position;
+    }
+
+    var currentAnnotation = null;
+
+    r.on('createAnnotation', function(annotation) {
+        var note = annotation.body && annotation.body[0] ? annotation.body[0].value : null;
+        if (!note) {
+            return;
+        }
+
+        var position = getPositionFromAnnotation(annotation);
 
-        console.log('Sending fetch to:', '/api/v1/scrobbles/' + latestScrobbleUuid + '/');
-        console.log('CSRF token:', '{{ csrf_token }}');
         fetch('/api/v1/scrobbles/' + latestScrobbleUuid + '/', {
             method: 'PATCH',
             credentials: 'same-origin',
@@ -98,6 +103,14 @@
             console.error('Error saving note:', error);
         });
     });
+
+    r.on('selectAnnotation', function(annotation, element) {
+        currentAnnotation = annotation;
+    });
+
+    r.on('deleteAnnotation', function(annotation) {
+        console.log('Deleted annotation:', annotation);
+    });
 })();
 </script>
 {% endblock %}
@@ -131,7 +144,7 @@
                 {% for scrobble in scrobbles.all %}
                 <tr>
                     <td><a href={{scrobble.get_absolute_url}}>{{scrobble.local_timestamp}}</a></td>
-                    <td>{% for note in scrobble.logdata.notes %}{{note}}{% if not forloop.last %}; {% endif%}{% endfor %}
+                    <td>{% if scrobble.logdata.notes %}{% for note in scrobble.logdata.notes %}{{note}}{% if not forloop.last %}; {% endif%}{% endfor %}{% endif %}
                 </tr>
                 {% endfor %}
             </tbody>