diff --git a/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css b/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css
index 3eaf2fb..7000295 100644
--- a/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css
+++ b/Backend/mocked-services/src/main/resources/static/css/r11flexbox.css
@@ -1,26 +1,57 @@
-#uuid-flex-container {
-    display: flex;
-    flex-direction: row;
-    align-items: stretch;
-    position: relative;
+#editable-block {
+    flex-grow: 0;
+    flex-shrink: 0;
 }
 
-#uuid-flex-container .uuid-inputField-icon{
-    font-size: medium;
-    position: absolute;
-    top: 0;
-    right: 0;
-    margin-right: 41%;
-    margin-top: 1%;
+#uuid-edit {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+}
+
+#uuid-edit-field {
+    display: flex;
+    width: fit-content;
+    align-items: center;
+    width: 50%;
+    margin-right: 10px;
+    
+}
+
+#uuid-edit-field .uuid-inputField-icon{
     background: none;
     color: black;
     border: 0;
 }
 
-#uuid-flex-container .uuid-inputField-icon:hover{
+#uuid-edit-field .uuid-inputField-icon:hover{
     color: #2A93B0;
 }
 
+#uuid-input {
+    border: none;
+    width: 100%
+}
+
+#uuid-input:focus {
+    outline: none;
+    
+}
+
+#uuid-validation-strategy input {
+    margin-left: 10px;
+}
+
+.disabled {
+    background-color: #CCD1CF;
+
+}
+
+.disabled #uuid-input {
+    background-color: #CCD1CF;
+
+}
+
 .uuid-inputField-icon-span {
     font-size: x-large;
 }
\ No newline at end of file
diff --git a/Backend/mocked-services/src/main/resources/static/css/r11tool.css b/Backend/mocked-services/src/main/resources/static/css/r11tool.css
index 7e413b8..fd559f4 100644
--- a/Backend/mocked-services/src/main/resources/static/css/r11tool.css
+++ b/Backend/mocked-services/src/main/resources/static/css/r11tool.css
@@ -199,7 +199,7 @@ body {
 }
 
 .action-button {
-    background: rgba(155, 165, 160, 0.507);
+    background: #CCD1CF;
     border:1px solid rgba(186, 197, 191, 0.507);
     border-radius: 5px;
     color: white;
diff --git a/Backend/mocked-services/src/main/resources/static/html/mock.html b/Backend/mocked-services/src/main/resources/static/html/mock.html
index ee4e09d..bb373c8 100644
--- a/Backend/mocked-services/src/main/resources/static/html/mock.html
+++ b/Backend/mocked-services/src/main/resources/static/html/mock.html
@@ -19,24 +19,28 @@
                 </div>
                 <div>
                     <label for="uuid-input" class="block-display">UUID</label>
-                    <div id="uuid-flex-container">
-                        <input id="uuid-input" disabled onfocusout="changeUUID(this);" class="bordered-field flex-item with-padding diabled-background" value="UUID" style="margin-bottom:2%; width: 60%;"/>
-                        <button onclick="copyUUIDToClipboard();" class="uuid-inputField-icon modification-button flex-item btn-copy action-button"> 
-                            <span class="material-icons uuid-inputField-icon-span ">content_copy</span> 
-                        </button>
-                    </div>
-                    <div id="editableBlock">
-                        <label for="editable">Editable</label>
-                        <input type="checkbox" onchange="changeEditionOfUUID(this)" name="editable" id="editable" value="false"/>
-                    </div>
-                        <div class="hiddable" id="uuid-validation-strategy">
-                            <label style="margin-bottom: 1%;display: block;"> UUID generation strategy:</label>
-                            <input type="radio" checked name="uuid-validation-type" value="new" id="generateNew"/>
-                            <label for="generateNew">Generate new UUID</label>
-                            <br>
-                            <input type="radio" name="uuid-validation-type" value="restore" id="restore"/>
-                            <label for="generateNew">Restore previous UUID</label>
+                    <div id="uuid-edit">
+                        <div id="uuid-edit-field" class="bordered-field disabled">
+                            <input id="uuid-input" disabled onfocusout="changeUUID(this);" value="UUID" />
+                            <button onclick="copyUUIDToClipboard();" class="uuid-inputField-icon modification-button flex-item btn-copy action-button"> 
+                                <span class="material-icons uuid-inputField-icon-span ">content_copy</span> 
+                            </button>
                         </div>
+                        <div id="editableBlock">
+                            <input type="checkbox" onchange="changeEditionOfUUID(this)" name="editable" id="editable" value="false"/>
+                            <label for="editable">Editable</label>
+                        </div>
+                    </div>
+                    
+                    <div class="hiddable" id="uuid-validation-strategy">
+                        <label><b>UUID generation strategy:</b></label>
+                        
+                        <input type="radio" checked name="uuid-validation-type" value="new" id="generateNew"/>
+                        <label for="generateNew">Generate new UUID</label>
+                        
+                        <input type="radio" name="uuid-validation-type" value="restore" id="restore"/>
+                        <label for="restore">Restore previous UUID</label>
+                    </div>
 
                 </div>
                 <div>
@@ -311,10 +315,10 @@
             <button>No</button>
         </div>
     </div>
-    <script type="text/javascript" src="/js/modal.js"></script>
-    <script type="text/javascript" src="/js/uianimation.js"></script>
-    <script type="text/javascript" src="/js/datatransfer.js"></script>
-    <script type="text/javascript" src="/js/historyloader.js"></script>
-    <script type="text/javascript" src="/js/fiddle.js"></script>
+    <script type="text/javascript" src="../js/modal.js"></script>
+    <script type="text/javascript" src="../js/uianimation.js"></script>
+    <script type="text/javascript" src="../js/datatransfer.js"></script>
+    <script type="text/javascript" src="../js/historyloader.js"></script>
+    <script type="text/javascript" src="../js/fiddle.js"></script>
 </body>
 </html>
diff --git a/Backend/mocked-services/src/main/resources/static/js/datatransfer.js b/Backend/mocked-services/src/main/resources/static/js/datatransfer.js
index 63737fc..e137ce9 100644
--- a/Backend/mocked-services/src/main/resources/static/js/datatransfer.js
+++ b/Backend/mocked-services/src/main/resources/static/js/datatransfer.js
@@ -237,10 +237,13 @@ function fillStaticFields(uuid, id, mediaType, body, httpStatus){
 function changeEditionOfUUID(element){
 
     var inputFieldId= "#uuid-input"
+    var inputFieldDiv = "#uuid-edit-field"
     if(element.checked){
         $(inputFieldId).removeAttr('disabled');
+        $(inputFieldDiv).removeClass('disabled');
     } else{
         $(inputFieldId).attr('disabled', true);
+        $(inputFieldDiv).addClass('disabled');
     }
 }
 
@@ -276,7 +279,8 @@ async function fetchUUIDCheck(givenUUID , strategy){
     return newUUID ;
 }
 
-function checkUUIDChars(uuid) { 
+function checkUUIDChars(uuid) {
+    console.log("UUID in check: " + uuid);
     const regex = new RegExp("/^[A-z0-9-]+$/");
     if(regex.test(uuid)){
         return uuid ;
@@ -287,7 +291,9 @@ function checkUUIDChars(uuid) {
 function changeUUID(element){
 
     const uuidStrategy = $('input[name="uuid-validation-type"]:checked').val();
-    const givenUUID = checkUUIDChars(element.value);
+    // const givenUUID = checkUUIDChars(element.value);
+    const givenUUID = element.value;
+    console.log(givenUUID);
 
     if( givenUUID == clientUUID ){
         uuidChangeModalDisplay("noChg");
diff --git a/Backend/mocked-services/src/main/resources/static/js/uianimation.js b/Backend/mocked-services/src/main/resources/static/js/uianimation.js
index ffe38f5..46dfb20 100644
--- a/Backend/mocked-services/src/main/resources/static/js/uianimation.js
+++ b/Backend/mocked-services/src/main/resources/static/js/uianimation.js
@@ -124,17 +124,15 @@ $('#btnSave').mouseleave(function(){hidTip('btnSaveTip')});
 $('#btnSave').focusout(function(){focusOutTip('btnSaveTip')});
 
 $('#new-tile').mouseover(function(){showTip('btn-newTileTip');});
-//$('#new-tile').focusin(function(){focusInTip('btn-newTileTip')});
 $('#new-tile').mouseleave(function(){hidTip('btn-newTileTip')});
 $('#new-tile').focusout(function(){focusOutTip('btn-newTileTip')});
 
 $('#listItems').mouseover(function(){showTip('messagesTip');});
-//$('#listItems').focusin(function(){focusInTip('messagesTip')});
 $('#listItems').mouseleave(function(){hidTip('messagesTip')});
-//$('#listItems').focusout(function(){focusOutTip('messagesTip')});
 
-$('#uuid-flex-container').mouseover(function(){ showTip('UUIDFieldTip') });
-$('#uuid-flex-container').mouseleave(function(){ hidTip('UUIDFieldTip') });
+
+$('#uuid-edit-field').mouseover(function(){ showTip('UUIDFieldTip') });
+$('#uuid-edit-field').mouseleave(function(){ hidTip('UUIDFieldTip') });
 
 $('#uuid-validation-strategy').mouseover(function(){ showTip('UUIDValidationStrategyTip') });
 $('#uuid-validation-strategy').mouseleave(function(){ hidTip('UUIDValidationStrategyTip') });