diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 6be7839..9d7dae8 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -24,16 +24,12 @@
   <component name="ChangeListManager">
     <list default="true" id="458cde88-df3d-44bc-9d57-a33823e2f1a6" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/java/com/release11/klaus/KlausApplication.java" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/java/com/release11/klaus/KlausApplication.java" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/main/resources/application.properties" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/application.properties" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/resources/data-access.properties" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/data-access.properties" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/main/resources/logback.xml" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/logback.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/resources/static/css/styles.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/css/styles.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/main/resources/static/js/paggination.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/js/paggination.js" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/main/resources/templates/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/templates/index.html" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/target/classes/application.properties" beforeDir="false" afterPath="$PROJECT_DIR$/target/classes/application.properties" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/target/classes/data-access.properties" beforeDir="false" afterPath="$PROJECT_DIR$/target/classes/data-access.properties" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/target/test-classes/com/release11/klaus/controller/KlausMvcControllerTest.class" beforeDir="false" afterPath="$PROJECT_DIR$/target/test-classes/com/release11/klaus/controller/KlausMvcControllerTest.class" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/target/classes/static/css/styles.css" beforeDir="false" afterPath="$PROJECT_DIR$/target/classes/static/css/styles.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/target/classes/static/js/paggination.js" beforeDir="false" afterPath="$PROJECT_DIR$/target/classes/static/js/paggination.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/target/classes/templates/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/target/classes/templates/index.html" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -85,7 +81,7 @@
     <property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
     <property name="com.intellij.testIntegration.createTest.CreateTestDialog.defaultLibrary" value="JUnit5" />
     <property name="com.intellij.testIntegration.createTest.CreateTestDialog.defaultLibrarySuperClass.JUnit5" value="" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$/src/test" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
     <property name="restartRequiresConfirmation" value="false" />
     <property name="settings.editor.selected.configurable" value="MavenSettings" />
   </component>
@@ -275,13 +271,6 @@
       <option name="presentableId" value="Default" />
       <updated>1598862102028</updated>
     </task>
-    <task id="LOCAL-00067" summary="jenkins - testing remote deploy">
-      <created>1601380234222</created>
-      <option name="number" value="00067" />
-      <option name="presentableId" value="LOCAL-00067" />
-      <option name="project" value="LOCAL" />
-      <updated>1601380234222</updated>
-    </task>
     <task id="LOCAL-00068" summary="moving docker to a separate package">
       <created>1601380914561</created>
       <option name="number" value="00068" />
@@ -618,7 +607,14 @@
       <option name="project" value="LOCAL" />
       <updated>1604499398654</updated>
     </task>
-    <option name="localTasksCounter" value="116" />
+    <task id="LOCAL-00116" summary="front-end update">
+      <created>1604770061649</created>
+      <option name="number" value="00116" />
+      <option name="presentableId" value="LOCAL-00116" />
+      <option name="project" value="LOCAL" />
+      <updated>1604770061650</updated>
+    </task>
+    <option name="localTasksCounter" value="117" />
     <servers />
   </component>
   <component name="UnknownFeatures">
@@ -638,7 +634,6 @@
   </component>
   <component name="VcsManagerConfiguration">
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="KT in README.md" />
     <MESSAGE value="fabric8" />
     <MESSAGE value="updating Dockerfile, adding  fabric8" />
     <MESSAGE value="testing docker jenkins" />
@@ -663,7 +658,8 @@
     <MESSAGE value="- default message for user testing,&#10;- updating frontend" />
     <MESSAGE value="changing eureka address" />
     <MESSAGE value="cleaning properties" />
-    <option name="LAST_COMMIT_MESSAGE" value="cleaning properties" />
+    <MESSAGE value="front-end update" />
+    <option name="LAST_COMMIT_MESSAGE" value="front-end update" />
   </component>
   <component name="WindowStateProjectService">
     <state x="904" y="236" key="#Notifications" timestamp="1600868491636">
@@ -726,68 +722,68 @@
     <state x="549" y="167" key="FileChooserDialogImpl/0.0.1536.824/1920.0.1920.1160@0.0.1536.824" timestamp="1602662342585" />
     <state x="2606" y="235" key="FileChooserDialogImpl/0.0.1536.824/1920.0.1920.1160@1920.0.1920.1160" timestamp="1604501503902" />
     <state x="549" y="167" key="FileChooserDialogImpl/0.0.1536.824@0.0.1536.824" timestamp="1602147205037" />
-    <state width="1877" height="76" key="GridCell.Tab.0.bottom" timestamp="1604769326304">
-      <screen x="1920" y="0" width="1920" height="1040" />
+    <state width="1493" height="89" key="GridCell.Tab.0.bottom" timestamp="1604916507124">
+      <screen x="0" y="0" width="1536" height="824" />
     </state>
     <state width="1877" height="239" key="GridCell.Tab.0.bottom/-1920.0.1536.832/0.0.1920.1040@0.0.1920.1040" timestamp="1600275797041" />
     <state width="1493" height="260" key="GridCell.Tab.0.bottom/0.0.1536.824/1920.0.1920.1040@0.0.1536.824" timestamp="1604747895197" />
-    <state width="1877" height="76" key="GridCell.Tab.0.bottom/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604769326304" />
-    <state width="1493" height="315" key="GridCell.Tab.0.bottom/0.0.1536.824/1920.0.1920.1160@0.0.1536.824" timestamp="1604494395906" />
+    <state width="1493" height="260" key="GridCell.Tab.0.bottom/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604770088085" />
+    <state width="1493" height="89" key="GridCell.Tab.0.bottom/0.0.1536.824/1920.0.1920.1160@0.0.1536.824" timestamp="1604916507124" />
     <state width="1877" height="315" key="GridCell.Tab.0.bottom/0.0.1536.824/1920.0.1920.1160@1920.0.1920.1160" timestamp="1604501251887" />
     <state width="1493" height="217" key="GridCell.Tab.0.bottom/0.0.1536.824@0.0.1536.824" timestamp="1602147432366" />
-    <state width="1877" height="76" key="GridCell.Tab.0.center" timestamp="1604769326304">
-      <screen x="1920" y="0" width="1920" height="1040" />
+    <state width="1493" height="89" key="GridCell.Tab.0.center" timestamp="1604916507123">
+      <screen x="0" y="0" width="1536" height="824" />
     </state>
     <state width="1877" height="239" key="GridCell.Tab.0.center/-1920.0.1536.832/0.0.1920.1040@0.0.1920.1040" timestamp="1600275797041" />
     <state width="1493" height="260" key="GridCell.Tab.0.center/0.0.1536.824/1920.0.1920.1040@0.0.1536.824" timestamp="1604747895196" />
-    <state width="1877" height="76" key="GridCell.Tab.0.center/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604769326304" />
-    <state width="1493" height="315" key="GridCell.Tab.0.center/0.0.1536.824/1920.0.1920.1160@0.0.1536.824" timestamp="1604494395906" />
+    <state width="1493" height="260" key="GridCell.Tab.0.center/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604770088085" />
+    <state width="1493" height="89" key="GridCell.Tab.0.center/0.0.1536.824/1920.0.1920.1160@0.0.1536.824" timestamp="1604916507123" />
     <state width="1877" height="315" key="GridCell.Tab.0.center/0.0.1536.824/1920.0.1920.1160@1920.0.1920.1160" timestamp="1604501251887" />
     <state width="1493" height="217" key="GridCell.Tab.0.center/0.0.1536.824@0.0.1536.824" timestamp="1602147432366" />
-    <state width="1877" height="76" key="GridCell.Tab.0.left" timestamp="1604769326304">
-      <screen x="1920" y="0" width="1920" height="1040" />
+    <state width="1493" height="89" key="GridCell.Tab.0.left" timestamp="1604916507123">
+      <screen x="0" y="0" width="1536" height="824" />
     </state>
     <state width="1877" height="239" key="GridCell.Tab.0.left/-1920.0.1536.832/0.0.1920.1040@0.0.1920.1040" timestamp="1600275797041" />
     <state width="1493" height="260" key="GridCell.Tab.0.left/0.0.1536.824/1920.0.1920.1040@0.0.1536.824" timestamp="1604747895196" />
-    <state width="1877" height="76" key="GridCell.Tab.0.left/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604769326304" />
-    <state width="1493" height="315" key="GridCell.Tab.0.left/0.0.1536.824/1920.0.1920.1160@0.0.1536.824" timestamp="1604494395906" />
+    <state width="1493" height="260" key="GridCell.Tab.0.left/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604770088085" />
+    <state width="1493" height="89" key="GridCell.Tab.0.left/0.0.1536.824/1920.0.1920.1160@0.0.1536.824" timestamp="1604916507123" />
     <state width="1877" height="315" key="GridCell.Tab.0.left/0.0.1536.824/1920.0.1920.1160@1920.0.1920.1160" timestamp="1604501251887" />
     <state width="1493" height="217" key="GridCell.Tab.0.left/0.0.1536.824@0.0.1536.824" timestamp="1602147432366" />
-    <state width="1877" height="76" key="GridCell.Tab.0.right" timestamp="1604769326304">
-      <screen x="1920" y="0" width="1920" height="1040" />
+    <state width="1493" height="89" key="GridCell.Tab.0.right" timestamp="1604916507123">
+      <screen x="0" y="0" width="1536" height="824" />
     </state>
     <state width="1877" height="239" key="GridCell.Tab.0.right/-1920.0.1536.832/0.0.1920.1040@0.0.1920.1040" timestamp="1600275797041" />
     <state width="1493" height="260" key="GridCell.Tab.0.right/0.0.1536.824/1920.0.1920.1040@0.0.1536.824" timestamp="1604747895196" />
-    <state width="1877" height="76" key="GridCell.Tab.0.right/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604769326304" />
-    <state width="1493" height="315" key="GridCell.Tab.0.right/0.0.1536.824/1920.0.1920.1160@0.0.1536.824" timestamp="1604494395906" />
+    <state width="1493" height="260" key="GridCell.Tab.0.right/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604770088085" />
+    <state width="1493" height="89" key="GridCell.Tab.0.right/0.0.1536.824/1920.0.1920.1160@0.0.1536.824" timestamp="1604916507123" />
     <state width="1877" height="315" key="GridCell.Tab.0.right/0.0.1536.824/1920.0.1920.1160@1920.0.1920.1160" timestamp="1604501251887" />
     <state width="1493" height="217" key="GridCell.Tab.0.right/0.0.1536.824@0.0.1536.824" timestamp="1602147432366" />
-    <state width="1493" height="260" key="GridCell.Tab.1.bottom" timestamp="1604747895198">
-      <screen x="0" y="0" width="1536" height="824" />
+    <state width="1493" height="260" key="GridCell.Tab.1.bottom" timestamp="1604770088085">
+      <screen x="1920" y="0" width="1920" height="1040" />
     </state>
     <state width="1493" height="260" key="GridCell.Tab.1.bottom/0.0.1536.824/1920.0.1920.1040@0.0.1536.824" timestamp="1604747895198" />
-    <state width="1877" height="261" key="GridCell.Tab.1.bottom/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1602255424969" />
+    <state width="1493" height="260" key="GridCell.Tab.1.bottom/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604770088085" />
     <state width="1877" height="297" key="GridCell.Tab.1.bottom/0.0.1536.824/1920.0.1920.1160@1920.0.1920.1160" timestamp="1602672852817" />
     <state width="1493" height="261" key="GridCell.Tab.1.bottom/0.0.1536.824@0.0.1536.824" timestamp="1600697207730" />
-    <state width="1493" height="260" key="GridCell.Tab.1.center" timestamp="1604747895197">
-      <screen x="0" y="0" width="1536" height="824" />
+    <state width="1493" height="260" key="GridCell.Tab.1.center" timestamp="1604770088085">
+      <screen x="1920" y="0" width="1920" height="1040" />
     </state>
     <state width="1493" height="260" key="GridCell.Tab.1.center/0.0.1536.824/1920.0.1920.1040@0.0.1536.824" timestamp="1604747895197" />
-    <state width="1877" height="261" key="GridCell.Tab.1.center/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1602255424969" />
+    <state width="1493" height="260" key="GridCell.Tab.1.center/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604770088085" />
     <state width="1877" height="297" key="GridCell.Tab.1.center/0.0.1536.824/1920.0.1920.1160@1920.0.1920.1160" timestamp="1602672852817" />
     <state width="1493" height="261" key="GridCell.Tab.1.center/0.0.1536.824@0.0.1536.824" timestamp="1600697207730" />
-    <state width="1493" height="260" key="GridCell.Tab.1.left" timestamp="1604747895197">
-      <screen x="0" y="0" width="1536" height="824" />
+    <state width="1493" height="260" key="GridCell.Tab.1.left" timestamp="1604770088085">
+      <screen x="1920" y="0" width="1920" height="1040" />
     </state>
     <state width="1493" height="260" key="GridCell.Tab.1.left/0.0.1536.824/1920.0.1920.1040@0.0.1536.824" timestamp="1604747895197" />
-    <state width="1877" height="261" key="GridCell.Tab.1.left/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1602255424969" />
+    <state width="1493" height="260" key="GridCell.Tab.1.left/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604770088085" />
     <state width="1877" height="297" key="GridCell.Tab.1.left/0.0.1536.824/1920.0.1920.1160@1920.0.1920.1160" timestamp="1602672852817" />
     <state width="1493" height="261" key="GridCell.Tab.1.left/0.0.1536.824@0.0.1536.824" timestamp="1600697207730" />
-    <state width="1493" height="260" key="GridCell.Tab.1.right" timestamp="1604747895198">
-      <screen x="0" y="0" width="1536" height="824" />
+    <state width="1493" height="260" key="GridCell.Tab.1.right" timestamp="1604770088085">
+      <screen x="1920" y="0" width="1920" height="1040" />
     </state>
     <state width="1493" height="260" key="GridCell.Tab.1.right/0.0.1536.824/1920.0.1920.1040@0.0.1536.824" timestamp="1604747895198" />
-    <state width="1877" height="261" key="GridCell.Tab.1.right/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1602255424969" />
+    <state width="1493" height="260" key="GridCell.Tab.1.right/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604770088085" />
     <state width="1877" height="297" key="GridCell.Tab.1.right/0.0.1536.824/1920.0.1920.1160@1920.0.1920.1160" timestamp="1602672852817" />
     <state width="1493" height="261" key="GridCell.Tab.1.right/0.0.1536.824@0.0.1536.824" timestamp="1600697207730" />
     <state x="299" y="67" key="Maven.ArtifactSearchDialog" timestamp="1598862685882">
@@ -808,12 +804,12 @@
     </state>
     <state x="277" y="57" key="SettingsEditor/0.0.1536.824/1920.0.1920.1040@0.0.1536.824" timestamp="1600935670743" />
     <state x="277" y="57" key="SettingsEditor/0.0.1536.824@0.0.1536.824" timestamp="1601975962923" />
-    <state x="2371" y="204" key="Vcs.Push.Dialog.v2" timestamp="1604499402409">
-      <screen x="1920" y="0" width="1920" height="1160" />
+    <state x="2371" y="183" key="Vcs.Push.Dialog.v2" timestamp="1604770067322">
+      <screen x="1920" y="0" width="1920" height="1040" />
     </state>
     <state x="451" y="183" key="Vcs.Push.Dialog.v2/-1920.0.1536.832/0.0.1920.1040@0.0.1920.1040" timestamp="1600275760386" />
     <state x="361" y="145" key="Vcs.Push.Dialog.v2/0.0.1536.824/1920.0.1920.1040@0.0.1536.824" timestamp="1604413405123" />
-    <state x="2371" y="183" key="Vcs.Push.Dialog.v2/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604428728268" />
+    <state x="2371" y="183" key="Vcs.Push.Dialog.v2/0.0.1536.824/1920.0.1920.1040@1920.0.1920.1040" timestamp="1604770067322" />
     <state x="361" y="145" key="Vcs.Push.Dialog.v2/0.0.1536.824/1920.0.1920.1160@0.0.1536.824" timestamp="1604494473937" />
     <state x="2371" y="204" key="Vcs.Push.Dialog.v2/0.0.1536.824/1920.0.1920.1160@1920.0.1920.1160" timestamp="1604499402409" />
     <state x="361" y="145" key="Vcs.Push.Dialog.v2/0.0.1536.824@0.0.1536.824" timestamp="1602145235569" />
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index 6dc5652..5b60490 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -1,7 +1,7 @@
 #environment:
 server.port = 8097
 spring.application.name = klaus
-eureka.client.service-url.defaultZone=http://netflix:eureka@localhost:8761/eureka/
+eureka.client.service-url.defaultZone=http://netflix:eureka@eureka:8761/eureka/
 spring.cloud.config.discovery.service-id = klaus-config-service
 #spring.cloud.config.fail-fast=true
 #spring.cloud.config.username = SpringConfigUsername
@@ -11,6 +11,3 @@ spring.output.ansi.enabled = always
 logging.level.root=INFO
 logging.level.org.springframework.web=INFO
 logging.level.com.release11=INFO
-
-redis.host = localhost
-redis.port = 6379
\ No newline at end of file
diff --git a/src/main/resources/data-access.properties b/src/main/resources/data-access.properties
index 122952c..27196b6 100644
--- a/src/main/resources/data-access.properties
+++ b/src/main/resources/data-access.properties
@@ -1,2 +1,2 @@
-redis.host = localhost
+redis.host = redis
 redis.port = 6379
\ No newline at end of file
diff --git a/src/main/resources/logback.xml b/src/main/resources/logback.xml
index eca6395..651420c 100644
--- a/src/main/resources/logback.xml
+++ b/src/main/resources/logback.xml
@@ -3,7 +3,7 @@
     <include resource="org/springframework/boot/logging/logback/base.xml"/>
     <!--https://github.com/kmtong/logback-redis-appender-->
     <appender name="LOGSTASH" class="com.release11.klaus.utilis.RedisAppender">
-        <host>localhost</host>
+        <host>redis</host>
         <port>6379</port>
         <key>logstash</key>
         <layout class="ch.qos.logback.classic.PatternLayout">
diff --git a/src/main/resources/static/css/styles.css b/src/main/resources/static/css/styles.css
index 936336c..ebb0efa 100644
--- a/src/main/resources/static/css/styles.css
+++ b/src/main/resources/static/css/styles.css
@@ -205,9 +205,10 @@ button{
     border-radius: 2px;
 }
 
-label { display: block; }
-.hint { display: none; color: gray; font-style: italic; }
-input:focus + .hint { display: inline; }
-textarea:focus  + .hint { display: inline; }
-textarea:focus  + .hint { display: inline; }
-select:focus  + .hint { display: inline; }
\ No newline at end of file
+label { display: block;
+}
+.hint { display: none; color: gray; font-style: italic; float:right;}
+input:focus + .hint { display: inline; float:right;}
+textarea:focus  + .hint { display: inline; float:right; }
+textarea:focus  + .hint { display: inline; float:right; }
+select:focus  + .hint { display: inline; float:right; }
\ No newline at end of file
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index e838042..261f054 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -56,7 +56,7 @@
                                                 <option value="application/json">application/json</option>
                                                 <option value="text/xml">text/xml</option>
                                             </select>
-                                                <span class="hint">Dupa dupa dupa</span>
+                                                <span class="hint">Standard that indicates the nature and format of a document, file, or assortment of bytes.</span>
                                             </label>
                                         </td>
                                         <td>
@@ -68,7 +68,7 @@
                                         <td>Mocked response body:</td>
                                         <td><label><textarea rows="4" cols="30" th:field="*{messageBody}"
                                                       placeholder="Your message body"></textarea>
-                                            <span class="hint">Dupa dupa dupa</span>
+                                            <span class="hint">The resource data that will be requested by the client.</span>
                                         </label>
                                         </td>
                                         <td th:if="${#fields.hasErrors('messageBody')}" th:errors="*{messageBody}">
@@ -81,7 +81,7 @@
                                         <td>
                                             <label>
                                             <input type="text" th:field="*{httpStatus}" placeholder="200">
-                                            <span class="hint">Dupa dupa dupa</span>
+                                            <span class="hint">Status codes are issued by a server in response to a client's request made to the server.</span>
                                             </label></td>
                                         <td th:if="${#fields.hasErrors('httpStatus')}" th:errors="*{httpStatus}">
                                             HttpStatus Error
@@ -96,24 +96,20 @@
                                         <label>
                                         <td><input type="text" name="headerKey" id="headerKey"
                                                    placeholder="myHeaderKey"/>
-                                            <span class="hint">Dupa dupa dupa</span>
+                                            <span class="hint"></span>
                                         </label></td>
                                         <td>
                                             <label>
                                             <input type="text" name="headerValue" id="headerValue"
                                                    placeholder="myHeaderValue"/>
-                                                <span class="hint">Dupa dupa dupa</span>
-                                            <input type="image" name="addHeader" src="/img/icons8-plus-48.png"
-                                                   style="width: 20px;"/>
-
-
+                                                <span class="hint">HTTP headers let the client and the server pass additional information with an HTTP request or response.</span>
+                                                <input type="image" name="addHeader" src="/img/icons8-plus-48.png"
+                                                       style="width: 20px;"/>
                                             </label>
                                         </td>
-
-
                                     </tr>
-                                    <tr th:each="entry, stats : *{httpHeaders}" bgcolor="#b3ffff">
-                                        <td><input type="text" name="value" th:value="${entry.key}"
+                                    <tr th:each="entry, stats : *{httpHeaders}">
+                                        <td bgcolor="#b3ffff"><input type="text" name="value" th:value="${entry.key}"
                                                    disabled="disabled"/></td>
                                         <td>
                                             &#9;
@@ -128,7 +124,7 @@
                                         <td>Mocked response id:</td>
                                         <td><label><input type="text" th:field="*{mockedResponseId}"
                                                    th:value="*{mockedResponseId}"/>
-                                            <span class="hint">Dupa dupa dupa</span>
+                                            <span class="hint">Unique identifier for the mocked message.</span>
                                             </label></td>
                                         <td th:if="${#fields.hasErrors('mockedResponseId')}"
                                             th:errors="*{mockedResponseId}">Id
diff --git a/target/classes/static/css/styles.css b/target/classes/static/css/styles.css
index 893ba64..92473b8 100644
--- a/target/classes/static/css/styles.css
+++ b/target/classes/static/css/styles.css
@@ -191,4 +191,23 @@ table { border-collapse: collapse; }
 tr { border: none; }
 td {
 border: none;
-}
\ No newline at end of file
+}
+
+button{
+    padding: 5px 14px;
+    border-width: 1px;
+    border-style: solid;
+    background: #32a6cc;
+    color: #fff;
+    transition: all 0.3s ease;
+    font-family: Arial, sans-serif;
+    font-size: 1em;
+    border-radius: 2px;
+}
+
+label { display: block;}
+.hint { display: none; color: gray; font-style: italic; float:right;}
+input:focus + .hint { display: inline; float:right;}
+textarea:focus  + .hint { display: inline; float:right; }
+textarea:focus  + .hint { display: inline; float:right; }
+select:focus  + .hint { display: inline; float:right; }
\ No newline at end of file
diff --git a/target/classes/static/js/paggination.js b/target/classes/static/js/paggination.js
index 41a6cd4..f87a55b 100644
--- a/target/classes/static/js/paggination.js
+++ b/target/classes/static/js/paggination.js
@@ -14,10 +14,28 @@ var state = {
 }
 
 var myList, data, previousSort;
-  console.log("raz dwa trzy")
 state.querySet = listForPagination;
 buildTable();
 
+
+document.querySelector('#btn-list-1').addEventListener('click', function() {
+  var x = document.getElementById("list-wrapper");
+  if (x.style.display === "none") {
+    x.style.display = "block";
+  } else {
+    x.style.display = "none";
+  }
+  })
+
+document.querySelector('#btn-list-2').addEventListener('click', function() {
+  var x = document.getElementById("advanced-wrapper");
+  if (x.style.display === "none") {
+    x.style.display = "block";
+  } else {
+    x.style.display = "none";
+  }
+  })
+
 for (let i = 3; i >= 0; i--) {
   document.querySelector('#btn-sort-' + i).addEventListener('click', function() {
     addButtonListeners(i)
diff --git a/target/classes/templates/index.html b/target/classes/templates/index.html
index d5232c4..261f054 100644
--- a/target/classes/templates/index.html
+++ b/target/classes/templates/index.html
@@ -21,157 +21,186 @@
                         <p>With this tool you can create mockups for http requests and use them for integration tests of
                             your system.</p>
                         <div>
-                                <br>
-                                <p>You can test the mocked message using the url or the button below:</p>
-                                <table>
-                                    <tr>
-                                        <td>
-                                            <p>
-                                                http://[[${localhost}]]:8097/klaus/v1/get/[[${mockedMessageDto.clientUUID}]]/[[${mockedMessageDto.mockedResponseId}]]</p>
-                                        </td>
-                                        <td>
-                                            <form action="#" th:action="@{/home/getMockedResponse}"
-                                                  th:object="${mockedMessageDto}"
-                                                  method="get">
-                                                <input type="text" th:field="*{clientUUID}" hidden/>
-                                                <input type="text" th:field="*{mockedResponseId}" hidden/>
-                                                <input type="submit" value="Test your mock"/>
-                                            </form>
-                                        </td>
-                                    </tr>
-                                </table>
-                                <br>
+                            <br>
+                            <p>You can test the mocked message using the url or the button below:</p>
+                            <table>
+                                <tr>
+                                    <td>
+                                        <p>
+                                            http://[[${localhost}]]:8097/klaus/v1/get/[[${mockedMessageDto.clientUUID}]]/[[${mockedMessageDto.mockedResponseId}]]</p>
+                                    </td>
+                                    <td>
+                                        <form action="#" th:action="@{/home/getMockedResponse}"
+                                              th:object="${mockedMessageDto}"
+                                              method="get">
+                                            <input type="text" th:field="*{clientUUID}" hidden/>
+                                            <input type="text" th:field="*{mockedResponseId}" hidden/>
+                                            <input type="submit" value="Test your mock"/>
+                                        </form>
+                                    </td>
+                                </tr>
+                            </table>
+                            <br>
 
-                                <table>
-                                    <p>In order to set or update mockup response please fill the form below and save
-                                        your message:</p>
-                                    <form action="#" th:action="@{/home/__${mockedMessageDto.clientUUID}__}"
-                                          th:object="${mockedMessageDto}" method="post">
-                                        <input type="text" th:field="*{clientUUID}" hidden/>
-                                        <tr>
-                                            <td>Media type:</td>
-                                            <td><select th:field="*{mediaType}">
+                            <table>
+                                <p>In order to set or update mockup response please fill the form below and save
+                                    your message:</p>
+                                <form action="#" th:action="@{/home/__${mockedMessageDto.clientUUID}__}"
+                                      th:object="${mockedMessageDto}" method="post">
+                                    <input type="text" th:field="*{clientUUID}" hidden/>
+                                    <tr>
+                                        <td>Media type:</td>
+                                        <td>
+                                            <label><select th:field="*{mediaType}">
                                                 <option value="application/xml">application/xml</option>
                                                 <option value="application/json">application/json</option>
                                                 <option value="text/xml">text/xml</option>
-                                            </select></td>
-                                        </tr>
-
-                                        <tr>
-                                            <td>Mocked response body:</td>
-                                            <td><textarea rows="4" cols="30" th:field="*{messageBody}"
-                                                          placeholder="Your message body"></textarea></td>
-                                            <td th:if="${#fields.hasErrors('messageBody')}" th:errors="*{messageBody}">
-                                                Body Error
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>Mocked response http code status:</td>
-                                            <td><input type="text" th:field="*{httpStatus}" placeholder="200"></td>
-                                            <td th:if="${#fields.hasErrors('httpStatus')}" th:errors="*{httpStatus}">
-                                                HttpStatus Error
-                                            </td>
-                                        </tr>
-
-                                        <tr>
-                                            <td>Header name</td>
-                                            <td>Header value</td>
-                                        </tr>
-                                        <tr>
-                                            <td><input type="text" name="headerKey" id="headerKey"
-                                                       placeholder="myHeaderKey"/></td>
-                                            <td>
-                                                <input type="text" name="headerValue" id="headerValue"
-                                                       placeholder="myHeaderValue"/>
-                                                <input type="image" name="addHeader" src="/img/icons8-plus-48.png"
-                                                       style="width: 20px;"/>
-                                            </td>
-                                        </tr>
-                                        <tr th:each="entry, stats : *{httpHeaders}" bgcolor="#b3ffff">
-                                            <td><input type="text" name="value" th:value="${entry.key}"
-                                                       disabled="disabled"/></td>
-                                            <td>
-                                                &#9;
-                                                <input type="text" name="value"
-                                                       th:field="*{httpHeaders[__${entry.key}__]}"/>
-                                                <button type="submit" name="removeHeader" th:value="${entry.key}">
-                                                    <img src="/img/icons8-cancel-64.png" style="width: 20px;"/>
-                                                </button>
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td>Mocked response id:</td>
-                                            <td><input type="text" th:field="*{mockedResponseId}"
-                                                       th:value="*{mockedResponseId}"/></td>
-                                            <td th:if="${#fields.hasErrors('mockedResponseId')}"
-                                                th:errors="*{mockedResponseId}">Id
-                                                Error
-                                            </td>
-                                        </tr>
-                                        <tr>
-                                            <td><input type="submit" value="Save my message"/></td>
-                                            <td>
-                                                <button type="submit" name="newMessage" th:value="*{clientUUID}">
-                                                    <img src="/img/update-button.png" style="width: 20px;"/>
-                                                </button>
-                                            </td>
-                                        </tr>
-                                    </form>
-                                </table>
-                                <table>
-                                    <tr>
+                                            </select>
+                                                <span class="hint">Standard that indicates the nature and format of a document, file, or assortment of bytes.</span>
+                                            </label>
+                                        </td>
                                         <td>
-                                            <form action="#" th:action="@{/etrack/__${mockedMessageDto.clientUUID}__}"
-                                                  th:object="${mockedMessageDto}"
-                                                  method="get">
-                                                <p><input type="submit" value="History"/></p>
-                                            </form>
+
                                         </td>
                                     </tr>
-                                </table>
-                                <p th:if="${mockSaved}">Mock has been saved</p>
-                            </div>
-                            <div class="column">
-                                <br>
 
-                            </div>
+                                    <tr>
+                                        <td>Mocked response body:</td>
+                                        <td><label><textarea rows="4" cols="30" th:field="*{messageBody}"
+                                                      placeholder="Your message body"></textarea>
+                                            <span class="hint">The resource data that will be requested by the client.</span>
+                                        </label>
+                                        </td>
+                                        <td th:if="${#fields.hasErrors('messageBody')}" th:errors="*{messageBody}">
+                                            Body Error
+                                        </td>
+
+                                    </tr>
+                                    <tr>
+                                        <td>Mocked response http code status:</td>
+                                        <td>
+                                            <label>
+                                            <input type="text" th:field="*{httpStatus}" placeholder="200">
+                                            <span class="hint">Status codes are issued by a server in response to a client's request made to the server.</span>
+                                            </label></td>
+                                        <td th:if="${#fields.hasErrors('httpStatus')}" th:errors="*{httpStatus}">
+                                            HttpStatus Error
+                                        </td>
+                                    </tr>
+
+                                    <tr>
+                                        <td>Header name</td>
+                                        <td>Header value</td>
+                                    </tr>
+                                    <tr>
+                                        <label>
+                                        <td><input type="text" name="headerKey" id="headerKey"
+                                                   placeholder="myHeaderKey"/>
+                                            <span class="hint"></span>
+                                        </label></td>
+                                        <td>
+                                            <label>
+                                            <input type="text" name="headerValue" id="headerValue"
+                                                   placeholder="myHeaderValue"/>
+                                                <span class="hint">HTTP headers let the client and the server pass additional information with an HTTP request or response.</span>
+                                                <input type="image" name="addHeader" src="/img/icons8-plus-48.png"
+                                                       style="width: 20px;"/>
+                                            </label>
+                                        </td>
+                                    </tr>
+                                    <tr th:each="entry, stats : *{httpHeaders}">
+                                        <td bgcolor="#b3ffff"><input type="text" name="value" th:value="${entry.key}"
+                                                   disabled="disabled"/></td>
+                                        <td>
+                                            &#9;
+                                            <input type="text" name="value"
+                                                   th:field="*{httpHeaders[__${entry.key}__]}"/>
+                                            <button type="submit" name="removeHeader" th:value="${entry.key}">
+                                                <img src="/img/icons8-cancel-64.png" style="width: 20px;"/>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td>Mocked response id:</td>
+                                        <td><label><input type="text" th:field="*{mockedResponseId}"
+                                                   th:value="*{mockedResponseId}"/>
+                                            <span class="hint">Unique identifier for the mocked message.</span>
+                                            </label></td>
+                                        <td th:if="${#fields.hasErrors('mockedResponseId')}"
+                                            th:errors="*{mockedResponseId}">Id
+                                            Error
+                                        </td>
+                                    </tr>
+                                    <tr>
+                                        <td><input type="submit" value="Save my message"/></td>
+                                        <td>
+                                            <button type="submit" name="newMessage" th:value="*{clientUUID}">
+                                                <img src="/img/update-button.png" style="width: 20px;"/>
+                                            </button>
+                                        </td>
+                                    </tr>
+                                </form>
+                            </table>
+                            <p th:if="${mockSaved}">Mock has been saved</p>
+                            <table>
+                                <tr>
+                                    <td>
+                                        <form action="#" th:action="@{/etrack/__${mockedMessageDto.clientUUID}__}"
+                                              th:object="${mockedMessageDto}"
+                                              method="get">
+                                            <p><input type="submit" value="History"/></p>
+                                        </form>
+                                    </td>
+                                    <td>
+                                        <button class="btn-list" name="Messages List" id="btn-list-1">Messages List
+                                        </button>
+                                    </td>
+                                    <td>
+                                        <button class="btn-list" name="Messages List" id="btn-list-2">Advanced</button>
+                                    </td>
+                                </tr>
+                            </table>
                         </div>
+                    </div>
                 </section>
                 <hr>
             </div>
 
             <div>
-                <p>Here you can see the interactive list of all your mocked messages. You can call all of them. Use the buttons to sort the list and also update or delete messages.</p>
-                <form action="#" th:action="@{/home/__${mockedMessageDto.clientUUID}__}"
-                      th:object="${mockedMessageDto}" method="post">
-                    <table>
-                        <thead>
-                        <tr>
-                            <th class="tr-pageable">
-                                <p class="btn-sort" id="btn-sort-0">#</p>
-                            </th>
-                            <th class="tr-pageable">
-                                <p class="btn-sort activeButton" id="btn-sort-1">MessageId</p>
-                            </th>
-                            <th class="tr-pageable">
-                                <p class="btn-sort" id="btn-sort-2">Media Type</p>
-                            </th>
-                            <th class="tr-pageable">
-                                <p class="btn-sort" id="btn-sort-3">Http Status</p>
-                            </th>
-                        </tr>
-                        </thead>
-                        <input type="text" th:field="*{clientUUID}" hidden/>
-                        <tbody id="table-body">
-                        </tbody>
-                    </table>
-                </form>
-                <div class="container ">
-                    <div id="pagination-wrapper"></div>
+                <div id="list-wrapper" style="display: none;">
+                    <p>Here you can see the interactive list of all your mocked messages. You can call all of them. Use
+                        the buttons to sort the list and also update or delete messages.</p>
+                    <form action="#" th:action="@{/home/__${mockedMessageDto.clientUUID}__}"
+                          th:object="${mockedMessageDto}" method="post">
+                        <table>
+                            <thead>
+                            <tr>
+                                <th class="tr-pageable">
+                                    <p class="btn-sort" id="btn-sort-0">#</p>
+                                </th>
+                                <th class="tr-pageable">
+                                    <p class="btn-sort activeButton" id="btn-sort-1">MessageId</p>
+                                </th>
+                                <th class="tr-pageable">
+                                    <p class="btn-sort" id="btn-sort-2">Media Type</p>
+                                </th>
+                                <th class="tr-pageable">
+                                    <p class="btn-sort" id="btn-sort-3">Http Status</p>
+                                </th>
+                            </tr>
+                            </thead>
+                            <input type="text" th:field="*{clientUUID}" hidden/>
+                            <tbody id="table-body">
+                            </tbody>
+                        </table>
+                    </form>
+                    <div class="container ">
+                        <div id="pagination-wrapper"></div>
+                    </div>
                 </div>
             </div>
             <hr>
-            <div>
+            <div id="advanced-wrapper" style="display: none;">
                 <br>If you are keen to use the mocking service with bigger amount of messages or automate the process by
                 inserting
                 high amount of random messages please consider using swagger or send batch requests on the urls below:
@@ -196,6 +225,8 @@
 <script type="text/javascript" th:inline="javascript">
 var listForPagination = /*[[${mockedMessageDtoList}]]*/;
 
+
+
 </script>
 <script src="/js/paggination.js"></script>
 <script>
@@ -210,6 +241,8 @@ $.get("https://raw.githubusercontent.com/Szakalakamaka/viewpresenter/master/src/
 });
 
 
+
+
 </script>
 
 </body>