diff --git a/Backend/mocked-services/src/main/resources/static/css/r11addons.css b/Backend/mocked-services/src/main/resources/static/css/r11addons.css
index afb4425..a7e4f86 100644
--- a/Backend/mocked-services/src/main/resources/static/css/r11addons.css
+++ b/Backend/mocked-services/src/main/resources/static/css/r11addons.css
@@ -21,12 +21,12 @@
 .tile {
     width: 100%;
     padding-top: 40%;
-    border: 1px solid gray;
-    border-radius: 3px;
+    border-radius: 5px;
     position: relative;
-    background: #f0f0f095;
+    background: #D5D7E6;
     margin-bottom: 10px;
     cursor: default;
+    border-bottom: 1px solid darkgray;
 }
 
 .tile:hover {
@@ -34,7 +34,7 @@
 }
 
 .tile.active {
-    background: #00000070;
+    background: #2A93B0;
     color: white;
     filter: none;
 }
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 2243166..7e413b8 100644
--- a/Backend/mocked-services/src/main/resources/static/css/r11tool.css
+++ b/Backend/mocked-services/src/main/resources/static/css/r11tool.css
@@ -1,4 +1,9 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
+
+input {
+    box-sizing: border-box;
+}
+
 .hyperlink, .hyperlink:visited, .hyperlink:active {
     color: rgb(47, 125, 146);
     cursor: pointer;
@@ -9,6 +14,7 @@
 }
 
 .bordered-field {
+    background-color: #FFFFFF;
     border: 2px solid rgba(93, 99, 96, 0.705);
     border-radius: 5px;
     padding: 8px;
@@ -182,9 +188,10 @@ body {
 }
 
 .action-button.active {
-    background: #3bc4f1;
+    background: #2A93B0;
     border: 1px solid #7ed0eb;
     cursor: pointer;
+    
 }
 
 .action-button.active:hover {
@@ -194,6 +201,7 @@ body {
 .action-button {
     background: rgba(155, 165, 160, 0.507);
     border:1px solid rgba(186, 197, 191, 0.507);
+    border-radius: 5px;
     color: white;
     padding: 10px 20px;
     font-weight: 700;
diff --git a/Backend/mocked-services/src/main/resources/static/css/r11tooltip.css b/Backend/mocked-services/src/main/resources/static/css/r11tooltip.css
index 34fcbfb..63e70f6 100644
--- a/Backend/mocked-services/src/main/resources/static/css/r11tooltip.css
+++ b/Backend/mocked-services/src/main/resources/static/css/r11tooltip.css
@@ -1,8 +1,7 @@
 .tooltip-window {
     position: fixed;
     right: 0;
-    filter: drop-shadow(-2px 0px 2px darkgray);
-    background: #e8f3f7;
+    background: #FFFFFF;
     padding: 15px 30px;
     font-family: 'Nunito', sans-serif;
     width: 40%;
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 8bedcb9..d844052 100644
--- a/Backend/mocked-services/src/main/resources/static/html/mock.html
+++ b/Backend/mocked-services/src/main/resources/static/html/mock.html
@@ -21,10 +21,7 @@
                     
                     
Your Message
                     Messaged id: 1
-                    
-                    
-                        
-                    
+
                     
                     
                         
@@ -58,7 +55,9 @@
                                 
                             
                         
-                        
+                        
+                            
+                        
                     
                     
                     
@@ -184,6 +183,12 @@
                         
Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.
                     
+                    
+                        
Save button!
+                        
To save message, the message must be changed!
+                    
+                
                     
                         Http Status
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 ce82f5d..55eda14 100644
--- a/Backend/mocked-services/src/main/resources/static/js/datatransfer.js
+++ b/Backend/mocked-services/src/main/resources/static/js/datatransfer.js
@@ -269,7 +269,24 @@ function checkIfInputValid(input){
     return !(input == '' || input == null || input == undefined);
 }
 
+function checkIfHeaderEssential(key){
+
+    if( key == "Connection" || key == "Keep-Alive" || key == "Date" ){
+        return true; 
+    }
+    return false;
+
+}
+
 function buildRowHtml(key, value){
+
+    if(checkIfHeaderEssential(key)){
+        return '' + 
+        '
' +
+            '| ' +
+            ' | ' +
+        ' | 
';
+    } 
     return '' + 
     '
' +
         '| ' +
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 2d7add0..e375856 100644
--- a/Backend/mocked-services/src/main/resources/static/js/uianimation.js
+++ b/Backend/mocked-services/src/main/resources/static/js/uianimation.js
@@ -114,3 +114,8 @@ $('#headerValueInput').mouseover(function(){showTip('newHeaderTip')});
 $('#headerValueInput').focusin(function(){focusInTip('newHeaderTip')});
 $('#headerValueInput').mouseleave(function(){hidTip('newHeaderTip')});
 $('#headerValueInput').focusout(function(){focusOutTip('newHeaderTip')});
+
+$('#btnSave').mouseover(function(){showTip('btnSaveTip');});
+$('#btnSave').focusin(function(){focusInTip('btnSaveTip')});
+$('#btnSave').mouseleave(function(){hidTip('btnSaveTip')});
+$('#btnSave').focusout(function(){focusOutTip('btnSaveTip')});
\ No newline at end of file
diff --git a/Frontend/assets/css/frame.css b/Frontend/assets/css/frame.css
index 524ec3c..1534b8a 100644
--- a/Frontend/assets/css/frame.css
+++ b/Frontend/assets/css/frame.css
@@ -1,7 +1,12 @@
 @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&display=swap');
 
+html {
+    background-image: url("../images/background.jpg");
+}
+
 body {
     font-family: 'Nunito', sans-serif;
+    
     color: #2e3133;
     font-weight: normal;
     margin: 0px;
@@ -19,33 +24,37 @@ body {
 }
 
 div#header {
-    background-color: rgb(85, 85, 85);
+    background-color: #FFFFFF;
     width: 100%;
     height: 80px;
 }
 
 #logo {
     padding: 20px 20px 20px;
+    width: 250px;
+    grid-column: 1;
 }
 
 iframe#frame {
     flex-grow: 1;
+    background-color: #FFFFFF;
 }
 
 div#content {
     width: 100%;
     height: calc(100% - 80px);
     display: flex;
+    backdrop-filter: blur(10px);
 }
 
 div#toolList {
     float: left;
     width: 200px;
-    background-color: rgb(85, 85, 85);
+    background-color: transparent;
     height: 100%;
 }
 
-li{
+li {
     font-size: 20px;
     font-weight: bold;
 }
@@ -65,12 +74,14 @@ div#copyright a, a:visited,  a:active {
 ul#toolList {
     list-style-type: none;
     margin: 0;
-    padding: 0;
+    padding: 10px 0 0 0;
     overflow: hidden;
     display: block;
     float: left;
-    background-color: rgb(85, 85, 85);
+    background-color: transparent;
     width: 100%;
+    height: calc(100% - 80px);
+    backdrop-filter: blur(10px);
 }
 
 #toolListRow a {
@@ -82,6 +93,20 @@ ul#toolList {
 }
 
 #toolListRow a:hover {
-    background-color: #111111;
+    background-color: #2A93B0;
+    color: white;
+    transform: scale(1.25, 1.25);
     transition-duration: .3s;
+}
+
+#titlebar {
+    display: block;
+    padding: 10px 0;
+    color: black;
+
+    margin-top: -78px;
+
+    font-size: 36px;
+    text-align: center;
+    
 }
\ No newline at end of file
diff --git a/Frontend/assets/css/tools/r11form.css b/Frontend/assets/css/tools/r11form.css
index d7e87f5..f4af46e 100644
--- a/Frontend/assets/css/tools/r11form.css
+++ b/Frontend/assets/css/tools/r11form.css
@@ -15,11 +15,11 @@
 .tooltip-window {
     position: fixed;
     right: 0;
-    filter: drop-shadow(-2px 0px 2px darkgray);
-    background: #e8f3f7;
+    /* filter: drop-shadow(-2px 0px 2px black); */
+    background: #FFFFFF;
     padding: 15px 30px;
     font-family: 'Nunito', sans-serif;
-    width: 40%;
+    width: 30%;
     height: 100%;
     overflow: scroll;
 }
@@ -31,9 +31,6 @@
     content: "▼";
 } */
 
-.tooltip-window .tip {
-}
-
 .bordered-field {
     border: 2px solid rgba(93, 99, 96, 0.705);
     border-radius: 5px;
@@ -63,7 +60,7 @@
 }
 
 .tool {
-    width: 55%;
+    width: 65%;
     display: flex;
     justify-content: space-evenly;
 }
@@ -255,9 +252,10 @@
 }
 
 .action-button.active {
-    background: #3bc4f1;
+    background: #2A93B0;
     border: 1px solid #7ed0eb;
     cursor: pointer;
+    border-radius: 5px;
 }
 
 .action-button.active:hover {
@@ -390,15 +388,17 @@
 .section-button {
     width: 100%;
     padding: 15px 0;
+    margin: 5px 0px;
     font-size: 18px;
-    background: #b4b4b4c5;
+    background: #D5D7E6;
     cursor: pointer;
     border-bottom: darkgray 2px solid !important;
+    border-radius: 5px;
 }
 
 .section-button:hover {
     /* border-bottom: #3bc4f1 2px solid; */
-    backdrop-filter: brightness(110%); 
+    backdrop-filter: brightness(100%); 
 }
 
 .section-button .active {
diff --git a/Frontend/assets/images/background.jpg b/Frontend/assets/images/background.jpg
new file mode 100644
index 0000000..3cbefc4
Binary files /dev/null and b/Frontend/assets/images/background.jpg differ
diff --git a/Frontend/assets/images/favicon.ico b/Frontend/assets/images/favicon.ico
index a9ccec0..aced239 100644
Binary files a/Frontend/assets/images/favicon.ico and b/Frontend/assets/images/favicon.ico differ
diff --git a/Frontend/assets/images/logo.png b/Frontend/assets/images/logo.png
deleted file mode 100644
index dca29bc..0000000
Binary files a/Frontend/assets/images/logo.png and /dev/null differ
diff --git a/Frontend/assets/images/logo_biale.svg b/Frontend/assets/images/logo_biale.svg
new file mode 100644
index 0000000..7852133
--- /dev/null
+++ b/Frontend/assets/images/logo_biale.svg
@@ -0,0 +1,101 @@
+
+
+
+
diff --git a/Frontend/assets/images/logo_czarne.svg b/Frontend/assets/images/logo_czarne.svg
new file mode 100644
index 0000000..6dfa487
--- /dev/null
+++ b/Frontend/assets/images/logo_czarne.svg
@@ -0,0 +1,47 @@
+
+
+
diff --git a/Frontend/assets/samples/sampleXml.xml b/Frontend/assets/samples/sampleXml.xml
new file mode 100644
index 0000000..cd89168
--- /dev/null
+++ b/Frontend/assets/samples/sampleXml.xml
@@ -0,0 +1,33 @@
+
+
+    City library
+    345123
+    
+        
+            7321
+            Adam
+            Choke
+        
+        
+            5123
+            Lauren
+            Wong
+        
+    
+    
+        
+            6422
+            Harry Potter
+            7542
+        
+        
+            1234
+            Macbeth
+            5123
+        
+        
+            9556
+            Romeo and Juliet
+        
+    
+
\ No newline at end of file
diff --git a/Frontend/assets/scripts/tools/scripts.js b/Frontend/assets/scripts/tools/scripts.js
index 085cd1a..8792bc5 100644
--- a/Frontend/assets/scripts/tools/scripts.js
+++ b/Frontend/assets/scripts/tools/scripts.js
@@ -11,6 +11,18 @@ function clearDefaultContent(element, text) {
     }
 }
 
+function fillDefaultXML(element) {
+    if(element.classList.contains("active")){
+        const serverAddress = window.location.protocol + "//" + window.location.hostname + ":8086";
+        clearDefaultContent(document.getElementById("xmlArea"), "Insert XML here");
+        fetch(serverAddress + "/assets/samples/sampleXml.xml")
+            .then(response => response.text())
+            .then((exampleData) => {
+                document.getElementById("xmlArea").value = exampleData;
+            })
+            }
+        }
+
 //Set default text in grey
 function setDefaultContent(element, text) {
     if (element.value == "") {
diff --git a/Frontend/index.html b/Frontend/index.html
index a5647f6..162acd4 100644
--- a/Frontend/index.html
+++ b/Frontend/index.html
@@ -14,7 +14,8 @@ | 
diff --git a/Frontend/tools/xpath.html b/Frontend/tools/xpath.html
index c7ed0a9..776cc66 100644
--- a/Frontend/tools/xpath.html
+++ b/Frontend/tools/xpath.html
@@ -3184,18 +3184,7 @@