diff --git a/src/main/resources/static/css/commons/r11form.css b/src/main/resources/static/css/commons/r11form.css
index 4d5c135..4e1d3c9 100644
--- a/src/main/resources/static/css/commons/r11form.css
+++ b/src/main/resources/static/css/commons/r11form.css
@@ -48,6 +48,10 @@
     background: #eeeeeed2;
 }
 
+.disabled-background {
+    background: #eeeeeed2;
+}
+
 .vertically-resizeable {
     resize: vertical;
 }
@@ -420,4 +424,5 @@
 
 .hiddable.active {
     display: inherit;
-}
\ No newline at end of file
+}
+
diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index d3330db..577e3d0 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -29,7 +29,8 @@
                     <!-- link -->
                     <div>
                         <label for="messageLink" class="block-display">Link</label>
-                        <input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla">
+                        <div id="messageLink" class="bordered-field max-width with-padding disabled-background"><a class="hyperlink" href="www.google.com" target="_blank">www.google.com</a></div>
+                        <!-- <input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla"> -->
                     </div>
                     <div class="display-space-between max-width">
                         <!-- status and type -->
diff --git a/src/main/resources/static/js/datatransfer.js b/src/main/resources/static/js/datatransfer.js
index 4f7661a..d39162c 100644
--- a/src/main/resources/static/js/datatransfer.js
+++ b/src/main/resources/static/js/datatransfer.js
@@ -216,7 +216,8 @@ function initializeMock(index){
 
 function fillStaticFields(uuid, id, mediaType, body, httpStatus){
     let link = createLink(uuid,id);
-    $('#messageLink').val(link);
+    let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
+    $('#messageLink').html(linkHtml);
     $('#httpStatus').val(httpStatus);
     $('#typeSelector').val(mediaType);
     $('#bodyEditor').val(body);
diff --git a/target/classes/static/css/commons/r11form.css b/target/classes/static/css/commons/r11form.css
index 4d5c135..4e1d3c9 100644
--- a/target/classes/static/css/commons/r11form.css
+++ b/target/classes/static/css/commons/r11form.css
@@ -48,6 +48,10 @@
     background: #eeeeeed2;
 }
 
+.disabled-background {
+    background: #eeeeeed2;
+}
+
 .vertically-resizeable {
     resize: vertical;
 }
@@ -420,4 +424,5 @@
 
 .hiddable.active {
     display: inherit;
-}
\ No newline at end of file
+}
+
diff --git a/target/classes/static/html/mock.html b/target/classes/static/html/mock.html
index d3330db..577e3d0 100644
--- a/target/classes/static/html/mock.html
+++ b/target/classes/static/html/mock.html
@@ -29,7 +29,8 @@
                     <!-- link -->
                     <div>
                         <label for="messageLink" class="block-display">Link</label>
-                        <input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla">
+                        <div id="messageLink" class="bordered-field max-width with-padding disabled-background"><a class="hyperlink" href="www.google.com" target="_blank">www.google.com</a></div>
+                        <!-- <input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla"> -->
                     </div>
                     <div class="display-space-between max-width">
                         <!-- status and type -->
diff --git a/target/classes/static/js/datatransfer.js b/target/classes/static/js/datatransfer.js
index 4f7661a..d39162c 100644
--- a/target/classes/static/js/datatransfer.js
+++ b/target/classes/static/js/datatransfer.js
@@ -216,7 +216,8 @@ function initializeMock(index){
 
 function fillStaticFields(uuid, id, mediaType, body, httpStatus){
     let link = createLink(uuid,id);
-    $('#messageLink').val(link);
+    let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
+    $('#messageLink').html(linkHtml);
     $('#httpStatus').val(httpStatus);
     $('#typeSelector').val(mediaType);
     $('#bodyEditor').val(body);