diff --git a/app/static/js/ascroll.js b/app/static/js/ascroll.js
index b4d2e83..85dc4a1 100755
--- a/app/static/js/ascroll.js
+++ b/app/static/js/ascroll.js
@@ -195,10 +195,9 @@ function showOverlay(event) {
 function renderAnnotation(config, video, ascroll, clip) {
     var div = document.createElement('div')
     div.classList.add('annotation')
-
-    var annotation = clip[0]
-    var color1 = `hsl(${annotation.color1.hue}, 60%, 15%)`
-    var color2 = `hsl(${annotation.color2.hue}, 60%, 15%)`
+    var annotation = clip.annotations[0]
+    var color1 = `hsl(${clip.color1.hue}, 60%, 15%)`
+    var color2 = `hsl(${clip.color2.hue}, 60%, 15%)`
     if (!config.first) {
         config.first = annotation
         config.info.style.background = color1
@@ -211,7 +210,7 @@ function renderAnnotation(config, video, ascroll, clip) {
         figcaption = `<figcaption><a href="${pandoraURL}/${annotation.id}" target="_blank">${txt}</a></figcaption>`
     }
     var values = []
-    clip.forEach(a => {
+    clip.annotations.forEach(a => {
         values.push(a.value.replace(/src="\//g, `src="${pandoraURL}/`).replace(/href="\//g, `href="${pandoraURL}/`))
     })
     values = values.join('<br><br>')
@@ -290,22 +289,29 @@ async function loadClips(annotations) {
             colors[clip.id] = clip
         })
         var previous
+
         annotations.forEach(annotation => {
             var clipId = annotation.id.split('/')[0] + '/' + annotation.in.toFixed(3)  + '-'+ annotation.out.toFixed(3)
-            clips[clipId] = clips[clipId] || []
-            clips[clipId].push(annotation)
-            annotation.color1 = colors[clipId]
-
-            if(previous) {
-                previous.color2 = annotation.color1
+            clips[clipId] = clips[clipId] || {
+                id: clipId,
+                color1:  colors[clipId],
+                annotations: []
+            }
+            clips[clipId].annotations.push(annotation)
+            annotation.color1 = colors[clipId]
+            if(previous && previous.id != clipId) {
+                previous.color2 = clips[clipId].color1
+            }
+            if (!previous || previous.id != clipId) {
+                previous = clips[clipId]
             }
-            previous = annotation
         })
-        if (annotations.length) {
-            annotations[annotations.length - 1].color2 = annotations[0].color1
+        var clips = Object.values(clips)
+        if (clips.length) {
+            clips[clips.length - 1].color2 = clips[0].color1
         }
         //return annotations
-        return Object.values(clips)
+        return clips
     })
 }