diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 8953f49..3789764 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -20,7 +20,11 @@
   </component>
   <component name="ChangeListManager">
     <list default="true" id="458cde88-df3d-44bc-9d57-a33823e2f1a6" name="Default Changelist" comment="">
+<<<<<<< HEAD
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+=======
+      <change beforePath="$PROJECT_DIR$/src/main/resources/static/js/uianimation.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/js/uianimation.js" afterDir="false" />
+>>>>>>> modzeleg
       <change beforePath="$PROJECT_DIR$/src/main/resources/templates/mock.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/templates/mock.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css
index 9899efb..1f7876b 100644
--- a/src/main/resources/static/css/main.css
+++ b/src/main/resources/static/css/main.css
@@ -1,5 +1,5 @@
 #container {
-    width: 950px;
+    width: 1330px;
     margin-left: auto;
     margin-right: auto;
     min-height: 1900px;
diff --git a/src/main/resources/static/css/wojtas.css b/src/main/resources/static/css/wojtas.css
new file mode 100644
index 0000000..d595257
--- /dev/null
+++ b/src/main/resources/static/css/wojtas.css
@@ -0,0 +1,43 @@
+p#tooltipText {
+    /* /* padding: 20px;  */
+    width: 200px;
+    height: 150px;
+}
+
+div#tooltip {
+    border-radius: 15px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    margin-top: 160px;
+    border: 2px solid rgba(155, 165, 160, 0.507);
+    float: right;
+    width: 40%;
+    /* width: 70%; */
+    /* background-color: rgb(68, 158, 116); */
+    height: 100%;
+}
+
+.collapsible {
+    background-color: rgba(155, 165, 160, 0.507);
+    color: rgb(44, 44, 44);
+    cursor: pointer;
+    padding: 18px;
+    width: 100%;
+    border: none;
+    text-align: center;
+    outline: none;
+    font-size: 20px;
+}
+
+.active, .collapsibleActive:hover {
+    background-color: rgb(85, 85, 85);
+}
+
+.collapsibleData {
+    padding: 0 18px;
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height 0.2s ease-out;
+    background-color: #f1f1f1;
+}
\ No newline at end of file
diff --git a/src/main/resources/static/js/uianimation.js b/src/main/resources/static/js/uianimation.js
index bbeadd3..9071cad 100644
--- a/src/main/resources/static/js/uianimation.js
+++ b/src/main/resources/static/js/uianimation.js
@@ -51,5 +51,25 @@ function showHeaders(){
     $('#headersTab').off('click');
 }
 
+function hidTip(){$('#toolTipContent').css('display', 'none');}
+
+function showTip(){$('#toolTipContent').css('display', 'block');}
+
+$('#messageLink').mouseover(function(){$('#messageLinkTip').css('display', 'block'); showTip();});
+$('#messageLink').mouseleave(function(){$('#messageLinkTip').css('display', 'none'); hidTip();});
+$('#httpStatus').mouseover(function(){$('#httpStatusTip').css('display', 'block'); showTip();});
+$('#httpStatus').mouseleave(function(){$('#httpStatusTip').css('display', 'none'); hidTip();});
+$('#typeSelector').mouseover(function(){$('#typeSelectorTip').css('display', 'block'); showTip();});
+$('#typeSelector').mouseleave(function(){$('#typeSelectorTip').css('display', 'none'); hidTip();});
+$('#bodyEditor').mouseover(function(){$('#bodyEditorTip').css('display', 'block'); showTip();});
+$('#bodyEditor').mouseleave(function(){$('#bodyEditorTip').css('display', 'none'); hidTip();});
+$('#headersTab').mouseover(function(){$('#headersTabTip').css('display', 'block'); showTip();});
+$('#headersTab').mouseleave(function(){$('#headersTabTip').css('display', 'none'); hidTip();});
+$('#historyTab').mouseover(function(){$('#historyTabTip').css('display', 'block'); showTip();});
+$('#historyTab').mouseleave(function(){$('#historyTabTip').css('display', 'none'); hidTip();});
+$('#headerKeyInput').mouseover(function(){$('#newHeaderTip').css('display', 'block'); showTip();});
+$('#headerKeyInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none'); hidTip();});
+$('#headerValueInput').mouseover(function(){$('#newHeaderTip').css('display', 'block'); showTip();});
+$('#headerValueInput').mouseleave(function(){$('#newHeaderTip').css('display', 'none'); hidTip();});
+
 
-//TODO: Add animation for Headers and History
\ No newline at end of file
diff --git a/src/main/resources/templates/mock.html b/src/main/resources/templates/mock.html
index 16faa42..3e2baa0 100644
--- a/src/main/resources/templates/mock.html
+++ b/src/main/resources/templates/mock.html
@@ -27,7 +27,7 @@
                 <div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId"></span></div>
                 <div id="link">
                     <p class="label">Your link</p>
-                    <div id="messageLink" class="borderStyle">http://<span id="pubhost">localhost</span>:8097/klaus/v1/get/<span id="clientUuid">acc39106-f351-46bb-b81b-31b860af3e56</span>/<span id="mockedMessageResponse2">1</div>
+                    <div id="messageLink" class="borderStyle">http://<span id="pubhost">localhost</span>:8097/klaus/v1/get/<span id="clientUuid">acc39106-f351-46bb-b81b-31b860af3e56</span>/<span id="mockedMessageResponse2">1</span></div>
                 </div>
                 <div id="msgBody">
                     <div id="typeSelection">
@@ -100,6 +100,35 @@
                     <div style="clear: both;"></div>
                 </div>
         </div>
+        <div id="tooltip">
+            <div id="toolTipContent" style="display: none;">
+                <div id="toolHeader"><h2>Tip:</h2></div>
+                <div>
+                    <div id="messageLinkTip" class="collapsible" style="display: none;">
+                        <!--style="display: none;"-->
+                        <p>It's url where you need send your request</p>
+                    </div>
+                    <div id="httpStatusTip" class="collapsible" style="display: none;">
+                        <p>Set http status for server response. 200 OK is default.</p>
+                    </div>
+                    <div id="typeSelectorTip" class="collapsible" style="display: none;">
+                        <p>Select content type of body. Set plain text if data has no format.</p>
+                    </div>
+                    <div id="bodyEditorTip" class="collapsible" style="display: none;">
+                        <p>Text placed in this field will be displayed as response body</p>
+                    </div>
+                    <div id="headersTabTip" class="collapsible" style="display: none;">
+                        <p>Set headers for your messages.</p>
+                    </div>
+                    <div id="historyTabTip" class="collapsible" style="display: none;">
+                        <p>Check history of this message</p>
+                    </div>
+                    <div id="newHeaderTip" class="collapsible" style="display: none;">
+                        <p>Type values and press enter to add new header.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
         <div style="clear:both;"></div>