diff --git a/src/renderer/views/Watch/Watch.js b/src/renderer/views/Watch/Watch.js
index f8c12a21..128b88aa 100644
--- a/src/renderer/views/Watch/Watch.js
+++ b/src/renderer/views/Watch/Watch.js
@@ -310,12 +310,11 @@ export default Vue.extend({
               count: Number(count), // Number of images total
               interval: Number(interval) // How long one image is used
             })
-            console.log(storyboardArray[storyboardArray.length - 1].url)
-            console.log(storyboardArray[storyboardArray.length - 1])
-            console.log(storyboard)
           })
-          const vttFile = this.buildVTTFileLocally(storyboardArray)
-          // this.videoStoryboardSrc = storyboardArray[0]
+          // TODO MAKE A VARIABLE WHICH CAN CHOOSE BETWEEN STROYBOARD ARRAY ELEMENTS
+          const vttFile = this.buildVTTFileLocally(storyboardArray[1])
+          this.videoStoryboardSrc = vttFile
+
           this.captionSourceList =
             result.player_response.captions &&
             result.player_response.captions.playerCaptionsTracklistRenderer
@@ -369,8 +368,60 @@ export default Vue.extend({
         })
     },
 
-    buildVTTFileLocally: function(Storyboards) {
-      // let vttString = 'WEBVTT\n\n'
+    padNumberWithLeadingZeros: function(number, length) {
+      let numberString = number.toString()
+      while (numberString.length < length) {
+        numberString = '0' + numberString
+      }
+      return numberString
+    },
+
+    buildVTTFileLocally: function(Storyboard) {
+      let vttString = 'WEBVTT\n\n'
+      // how many images are in one image
+      const numberOfSubImagesPerImage = Storyboard.sWidth * Storyboard.sHeight
+      // the number of storyboard images
+      const numberOfImages = Math.ceil(Storyboard.count / numberOfSubImagesPerImage)
+      const intervalInSeconds = Storyboard.interval / 1000
+      let currentUrl = Storyboard.url
+      let startHours = 0
+      let startMinutes = 0
+      let startSeconds = 0
+      let endHours = 0
+      let endMinutes = 0
+      let endSeconds = intervalInSeconds
+      for (let i = 0; i < numberOfImages; i++) {
+        let xCoord = 0
+        let yCoord = 0
+        for (let j = 0; j < numberOfSubImagesPerImage; j++) {
+          // add the timestamp information
+          vttString += `${this.padNumberWithLeadingZeros(startHours, 2)}:${this.padNumberWithLeadingZeros(startMinutes, 2)}:${this.padNumberWithLeadingZeros(startSeconds, 2)}.000 --> ${this.padNumberWithLeadingZeros(endHours, 2)}:${this.padNumberWithLeadingZeros(endMinutes, 2)}:${this.padNumberWithLeadingZeros(endSeconds, 2)}.000\n`
+          // add the current image url as well as the x, y, width, height information
+          vttString += currentUrl + `#xywh=${xCoord},${yCoord},${Storyboard.width},${Storyboard.height}\n\n`
+          // update the variables
+          startHours = endHours
+          startMinutes = endMinutes
+          startSeconds = endSeconds
+          endSeconds += intervalInSeconds
+          if (endSeconds >= 60) {
+            endSeconds -= 60
+            endMinutes += 1
+          }
+          if (endMinutes >= 60) {
+            endMinutes -= 60
+            endHours += 1
+          }
+          // x coordinate can only be smaller than the width of one subimage * the number of subimages per row
+          xCoord = (xCoord + Storyboard.width) % (Storyboard.width * Storyboard.sWidth)
+          // only if the x coordinate is , so in a new row, we have to update the y coordinate
+          if (xCoord === 0) {
+            yCoord += Storyboard.height
+          }
+        }
+        // make sure that there is no value like M0 or M1 in the parameters that gets replaced
+        currentUrl = currentUrl.replace('M' + i.toString() + '.jpg', 'M' + (i + 1).toString() + '.jpg')
+      }
+      return vttString
     },
 
     getVideoInformationInvidious: function() {