diff --git a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
index 0dbf610d881507005fe7c9e4ff0bf8475356f093..5ffeb66e3e316ab967e108346221fae2f750c9b9 100644
--- a/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
+++ b/gemeinsamforschen/src/main/webapp/assets/css/annotationStyle.css
@@ -150,8 +150,14 @@ ol {
 }
 .leftcontent-text {
     overflow: scroll;
+    white-space: pre-line;
+    color: lightgrey;
 }
 .resize-vertical {
     resize: vertical;
 }
+.categoryText {
+    color: black;
+    font-weight: bold;
+}
 
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
index f2b891a1fc2b2b39f72904a66b7b1418a28f9243..8a5e0c9969b609ae60efef8c4d4be44ce23f2c24 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/annotationScript.js
@@ -6,23 +6,50 @@ var targetId = 200;
 var targetCategory = "TITEL";
 
 // declare document text, start and end character
-var documentText, startCharacter, endCharacter;
+var startCharacter, endCharacter;
 
 /**
  * This function will fire when the DOM is ready
  */
 $(document).ready(function() {
+    let fullSubmissionId = getValueFromUrl("fullSubmissionId");
+    let category = getValueFromUrl("category");
 
-    // connect to websocket on page ready
-    connect(targetId);
+    getFullSubmission(getValueFromUrl("fullSubmissionId"), function (response) {
+
+        // set text
+        $('#documentText').html(response.text);
+
+        // fetch submission parts
+        getSubmissionPart(fullSubmissionId, category, function (response) {
+
+            let body = response.body;
+            // save body
+            $('#documentText').data("body", body);
+            let offset = 0;
+            for (let i = 0; i < body.length; i++) {
+                addHighlightedTextWithOffset(body[i].startCharacter, body[i].endCharacter, offset);
+                // add char count of '<span class="categoryText"></span>'
+                offset += 34;
+            }
+
+            // scroll document text to first span element
+            let documentText = $('#documentText');
+            let span = $('#documentText span').first();
+            documentText.scrollTo(span);
+
+
+        }, function () {
+            // error
+        })
 
-    // receive text
-    getSubmissionPart("2f216683-5f13-4b5f-8a26-4ffa0566eca1", targetCategory, function (response) {
-        // todo success
     }, function () {
-        // todo error
+        // error
     });
 
+    // connect to websocket on page ready
+    connect(targetId);
+
     /**
      * Context menu handler
      */
@@ -209,8 +236,6 @@ $(document).ready(function() {
         $('#annotation-edit-form-comment').val('')
     });
 
-    documentText = $('#documentText').html();
-
     // fetch annotations from server on page start
     getAnnotations(targetId, targetCategory, function (response) {
         // iterate over annotations and display each
@@ -366,6 +391,8 @@ function displayAnnotation(annotation) {
  * @param userToken The user token
  */
 function addHighlightedText(startCharacter, endCharacter, userToken) {
+    // initialize variables
+    let documentText = $('#documentText').text();
     // create <span> tag with the annotated text
     var replacement = $('<span></span>').attr('id', 'anchor').css('background-color', getUserColor(userToken)).html(documentText.slice(startCharacter, endCharacter));
 
@@ -379,10 +406,58 @@ function addHighlightedText(startCharacter, endCharacter, userToken) {
     $('#documentText').html(newDocument);
 }
 
+/**
+ * Add a highlighted text at specific position
+ *
+ * @param startCharacter The offset of the start character
+ * @param endCharacter The offset of the end character
+ * @param offset The calculated extra offset depending on already highlighted text
+ */
+function addHighlightedTextWithOffset(startCharacter, endCharacter, offset) {
+
+    var documentText = $('#documentText').text();
+    var documentHtml = $('#documentText').html();
+
+    // create <span> tag with the annotated text
+    var replacement = $('<span></span>').attr('class', 'categoryText').html(documentText.slice(startCharacter, endCharacter));
+
+    // wrap an <p> tag around the replacement, get its parent (the <p>) and ask for the html
+    var replacementHtml = replacement.wrap('<p/>').parent().html();
+
+    // insert the replacementHtml
+    var newDocument = documentHtml.slice(0, startCharacter + offset) + replacementHtml + documentHtml.slice(endCharacter + offset);
+
+    // set new document text
+    $('#documentText').html(newDocument);
+}
+
+/**
+ * Iterate over all data arrays and calculate the offset for a given start character
+ *
+ * @param startCharacter The given start character
+ * @returns {number} The offset
+ */
+function calculateExtraOffset(startCharacter) {
+    let extraOffset = 0;
+    $('#annotations').find('.category-card').each(function () {
+        let array = $(this).data('array');
+        if (array != null) {
+            for (let i = 0; i < array.length; i++) {
+                if (array[i].end <= startCharacter) {
+                    extraOffset += 22 + $(this).attr('id').length;
+                }
+            }
+        }
+    });
+    return extraOffset;
+}
+
 /**
  * Restore the base text
  */
 function deleteHighlightedText() {
+    // initialize variables
+    let documentText = $('#documentText').text();
     $('#documentText').html(documentText);
 }
 
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/project-student.js b/gemeinsamforschen/src/main/webapp/assets/js/project-student.js
index 59d86b776099b0c7f02de12356cf658f250abc66..52d70fce190a33b61943161dd21b71688945a553 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/project-student.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/project-student.js
@@ -1,6 +1,6 @@
 $(document).ready(function(){
     // fetch all submission part project representations from database
-    getSubmissionPartsByProjectId(getProjectIdFromUrl(), function (response) {
+    getSubmissionPartsByProjectId(getValueFromUrl("projectId"), function (response) {
         
         // iterate over response and display each element
         for (let i = 0; i < response.length; i++) {
@@ -9,7 +9,12 @@ $(document).ready(function(){
 
         // add click listener to feedback buttons
         $('.annotationview').click(function () {
-            location.href="annotation-document.jsp?token="+getUserTokenFromUrl();
+            let fullSubmissionId = $(this).closest("li").data("fullSubmissionId");
+            let category = $(this).closest("li").data("category");
+            location.href="annotation-document.jsp?token=" + getUserTokenFromUrl() +
+                "&projectId=" + getValueFromUrl("projectId") +
+                "&fullSubmissionId=" + fullSubmissionId +
+                "&category=" + category;
         });
         
     }, function () {
@@ -32,7 +37,7 @@ $(document).ready(function(){
     });
 
     $('#btnUnstructuredUpload').click(function () {
-        location.href="unstructured-upload.jsp?token="+getUserTokenFromUrl() + "&projectId=" + getProjectIdFromUrl();
+        location.href="unstructured-upload.jsp?token="+getUserTokenFromUrl() + "&projectId=" + getValueFromUrl("projectId");
     })
 });
 
@@ -54,9 +59,11 @@ function displaySubmission(user, category, fullSubmissionId) {
                         .append("feedback")
                     )
             )
-    )
-        // add data to link
-        .data("fullSubmissionId", fullSubmissionId);
+            // add data to link
+            .data("fullSubmissionId", fullSubmissionId)
+            .data("category", category)
+    );
+
 }
 
 /**
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js
index 6ffb2c1a00c252c8b94e2fa2440b8808198c9e9c..ce860a8239e768fe8b76c25ca813f972ea10ac46 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredAnnotation.js
@@ -26,7 +26,7 @@ $(document).ready(function() {
 
     }, function () {
         // jump to upload page on error
-        location.href="unstructured-upload.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getProjectIdFromUrl();
+        location.href="unstructured-upload.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getValueFromUrl("projectId");
     });
 
     // set click listener to save button
@@ -285,7 +285,7 @@ function saveButtonHandler() {
 
         $.when.apply($, promises).then(function () {
             // redirect user to project page after saving
-            location.href="project-student.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getProjectIdFromUrl();
+            location.href="project-student.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getValueFromUrl("projectId");
         });
 
         // redirect user to project page after saving
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredUpload.js b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredUpload.js
index 265a0a907ebd8bd020d5a5f8d14328c4240808ed..a024e123aff2d536041ab11c0d964bbcac28bbda 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/unstructuredUpload.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/unstructuredUpload.js
@@ -14,7 +14,7 @@ $(document).ready(function() {
             var fullSubmissionPostRequest = {
                 user: user,
                 text: text,
-                projectId: getProjectIdFromUrl()
+                projectId: getValueFromUrl("projectId")
             };
 
             // save request in database
@@ -23,7 +23,7 @@ $(document).ready(function() {
                 $('#upload-textarea').val("");
 
                 // jump to next page
-                location.href="unstructured-annotation.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getProjectIdFromUrl() + "&submission=" + response.id;
+                location.href="unstructured-annotation.jsp?token=" + getUserTokenFromUrl() + "&projectId=" + getValueFromUrl("projectId") + "&submission=" + response.id;
             });
         }
     });
diff --git a/gemeinsamforschen/src/main/webapp/assets/js/utility.js b/gemeinsamforschen/src/main/webapp/assets/js/utility.js
index ad821640f2142940cf7424d7219d2ea2452c286f..40197ba6a20c5ceacd0bca910d85b13efb11c624 100644
--- a/gemeinsamforschen/src/main/webapp/assets/js/utility.js
+++ b/gemeinsamforschen/src/main/webapp/assets/js/utility.js
@@ -13,14 +13,13 @@ function getUserTokenFromUrl() {
 
 }
 
-function getProjectIdFromUrl() {
+function getValueFromUrl(name) {
     var parts = window.location.search.substr(1).split("&");
     var $_GET = {};
     for (var i = 0; i < parts.length; i++) {
         var temp = parts[i].split("=");
         $_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]);
     }
-    return $_GET['projectId'];
+    return $_GET[name];
 
 }
-
diff --git a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
index 30aeafc119b7260833a65f05194117114feffd2c..9b44cabee269f297ccc4b1910028b8ecf5c75b4a 100644
--- a/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
+++ b/gemeinsamforschen/src/main/webapp/pages/annotation-document.jsp
@@ -22,6 +22,8 @@
     <script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>
     <!-- js - scrollTo -->
     <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
+    <!-- js - utility -->
+    <script src="../assets/js/utility.js"></script>
     <!-- js - annotation websocket script -->
     <script src="../assets/js/annotationWebsocket.js"></script>
     <!-- js - annotation REST script -->
@@ -44,10 +46,7 @@
                     <div class="content-mainpage">
                         <div class="leftcolumn">
                             <div class="leftcontent">
-                                <div class="leftcontent-text context-menu-one" id="documentText">
-                                    Style never met and those among great. At no or september sportsmen he perfectly happiness attending. Depending listening delivered off new she procuring satisfied sex existence. Person plenty answer to exeter it if. Law use assistance especially resolution cultivated did out sentiments unsatiable. Way necessary had intention happiness but september delighted his curiosity. Furniture furnished or on strangers neglected remainder engrossed. Shot what able cold new the see hold. Friendly as an betrayed formerly he. Morning because as to society behaved moments. Put ladies design mrs sister was. Play on hill felt john no gate. Am passed figure to marked in. Prosperous middletons is ye inhabiting as assistance me especially. For looking two cousins regular amongst.
-                                    Style never met and those among great. At no or september sportsmen he perfectly happiness attending. Depending listening delivered off new she procuring satisfied sex existence. Person plenty answer to exeter it if. Law use assistance especially resolution cultivated did out sentiments unsatiable. Way necessary had intention happiness but september delighted his curiosity. Furniture furnished or on strangers neglected remainder engrossed. Shot what able cold new the see hold. Friendly as an betrayed formerly he. Morning because as to society behaved moments. Put ladies design mrs sister was. Play on hill felt john no gate. Am passed figure to marked in. Prosperous middletons is ye inhabiting as assistance me especially. For looking two cousins regular amongst.
-                                </div>
+                                <div class="leftcontent-text context-menu-one" id="documentText"></div>
                                 <div class="leftcontent-buttons">
                                     <div class="leftcontent-buttons-next">
                                         <button id="btnContinue" type="button" class="btn btn-secondary">Weiter</button>