diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index ac28277..ce63c29 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -21,7 +21,8 @@
   <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/resources/static/js/main.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/main/resources/static/js/main.js" 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" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -38,9 +39,9 @@
     <option name="RECENT_TEMPLATES">
       <list>
         <option value="Interface" />
-        <option value="Class" />
         <option value="JUnit5 Test Class" />
         <option value="HTML File" />
+        <option value="Class" />
       </list>
     </option>
   </component>
@@ -296,7 +297,7 @@
       <workItem from="1609858872909" duration="2771000" />
       <workItem from="1610359988935" duration="8484000" />
       <workItem from="1610621157443" duration="1615000" />
-      <workItem from="1610971272685" duration="1256000" />
+      <workItem from="1610971272685" duration="3168000" />
     </task>
     <task id="LOCAL-00077" summary="testing jenkins docker">
       <created>1601453886631</created>
diff --git a/src/main/resources/static/js/paggination.js b/src/main/resources/static/js/paggination.js
index 32f81e9..b08c1c7 100644
--- a/src/main/resources/static/js/paggination.js
+++ b/src/main/resources/static/js/paggination.js
@@ -1,3 +1,6 @@
+var pubhost = location.hostname;
+document.getElementById("pubhost").innerHTML = location.hostname;
+
 var state = {
   'querySet': [{
     "clientUUID": "436c4774-038f-4540-9c18-2691ca9b53d4",
@@ -17,8 +20,7 @@ var myList, data, previousSort;
 state.querySet = listForPagination;
 buildTable();
 
-var pubhost = location.hostname;
-document.getElementById("pubhost").innerHTML = location.hostname;
+
 
 document.querySelector('#btn-list-1').addEventListener('click', function() {
   var x = document.getElementById("list-wrapper");
diff --git a/src/main/resources/templates/index.html b/src/main/resources/templates/index.html
index 03c838f..aa43a22 100644
--- a/src/main/resources/templates/index.html
+++ b/src/main/resources/templates/index.html
@@ -1,39 +1,35 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://thymeleaf.org">
-<head>
-    <meta charset="UTF-8">
-    <title>R11 Tools: Mock</title>
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
-    <link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
-    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
-    <link href="/css/styles.css" rel="stylesheet"/>
-</head>
-<body>
-<script>
-
-</script>
-<hr>
-<div id="container">
-    <div id="header"></div>
-    <div id="container1">
-        <div id="sidebar"></div>
-        <div id="child-body">
+    <head>
+        <meta charset="UTF-8">
+        <title>R11 Tools: Mock</title>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
+        <link href="https://fonts.googleapis.com/css?family=Lato:100,300,600" rel="stylesheet" type="text/css">
+        <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
+        <link href="/css/styles.css" rel="stylesheet"/>
+    </head>
+    <body>
+        <hr>
+        <div id="container">
             <div class="container">
                 <section class="page-section" id="main-section">
                     <div class="container">
                         <p>With this tool you can create mockups for http requests and use them for integration tests of
-                            your system.</p>
+                            your system.
+                        </p>
                         <div>
                             <br>
                             <p>You can test the mocked message using the url default values from the form will be used.</p>
-                            <gen-link>http://<span id="pubhost"></span>:8097/klaus/v1/get/[[${mockedMessageDto.clientUUID}]]/[[${mockedMessageDto.mockedResponseId}]]</gen-link>
+                            <script>
+                                var pubhost = location.hostname;
+                                document.getElementById("pubhost").innerHTML = location.hostname;
+                            </script>
+                            <gen-link>http://<span id="pubhost">localhost</span>:8097/klaus/v1/get/[[${mockedMessageDto.clientUUID}]]/[[${mockedMessageDto.mockedResponseId}]]</gen-link>
                             <p>Use this link to get your message.</p>
                             <br>
-
-
-
                             <table>
-                                <p>In order to change mockup response settings please fill the form below and save.</p><br>
+                                <p>In order to change mockup response settings please fill the form below and save.</p>
+                                <br>
                                 <form action="#" th:action="@{/mock/__${mockedMessageDto.clientUUID}__}"
                                       th:object="${mockedMessageDto}" method="post">
                                     <input type="text" th:field="*{clientUUID}" hidden/>
@@ -50,13 +46,11 @@
                                             </label>
                                         </td>
                                         <td>
-
                                         </td>
                                     </tr>
-
                                     <tr>
                                         <td>Mocked response body:</td>
-<!--                                        rows="4" cols="30"-->
+                                        <!--                                        rows="4" cols="30"-->
                                         <td><label>
                                             <textarea id="message-body"  th:field="*{messageBody}" placeholder="Your message body"></textarea>
                                             <span class="hint">The resource data that will be requested by the client.</span>
@@ -65,15 +59,15 @@
                                         <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>
+                                                <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>
@@ -82,21 +76,21 @@
                                         <td><br></td>
                                         <td><br></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><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"/>
+                                                <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;"/>
@@ -105,7 +99,7 @@
                                     </tr>
                                     <tr th:each="entry, stats : *{httpHeaders}">
                                         <td bgcolor="#b3ffff"><input type="text" name="value" th:value="${entry.key}"
-                                                   disabled="disabled"/></td>
+                                                                     disabled="disabled"/></td>
                                         <td>
                                             &#9;
                                             <input type="text" name="value"
@@ -118,9 +112,10 @@
                                     <tr>
                                         <td>Mocked response id:</td>
                                         <td><label><input type="text" th:field="*{mockedResponseId}"
-                                                   th:value="*{mockedResponseId}"/>
+                                                          th:value="*{mockedResponseId}"/>
                                             <span class="hint">Unique identifier for the mocked message.</span>
-                                            </label></td>
+                                        </label>
+                                        </td>
                                         <td th:if="${#fields.hasErrors('mockedResponseId')}"
                                             th:errors="*{mockedResponseId}">Id
                                             Error
@@ -157,11 +152,11 @@
                 </section>
                 <hr>
             </div>
-
             <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>
+                        the buttons to sort the list and also update or delete messages.
+                    </p>
                     <form action="#" th:action="@{/mock/__${mockedMessageDto.clientUUID}__}"
                           th:object="${mockedMessageDto}" method="post">
                         <table>
@@ -182,8 +177,7 @@
                             </tr>
                             </thead>
                             <input type="text" th:field="*{clientUUID}" hidden/>
-                            <tbody id="table-body">
-                            </tbody>
+                            <tbody id="table-body"></tbody>
                         </table>
                     </form>
                     <div class="container ">
@@ -193,33 +187,7 @@
             </div>
             <hr>
         </div>
-    </div>
-</div>
-<div id="foot"></div>
-</div>
 
-<script type="text/javascript" th:inline="javascript">
-var listForPagination = /*[[${mockedMessageDtoList}]]*/;
-
-
-
-</script>
-<script src="/js/paggination.js"></script>
-<script>
-$.get("https://raw.githubusercontent.com/Szakalakamaka/viewpresenter/master/src/main/resources/templates/navbar.html", function(data){
-    $("#header").html(data);
-});
-$.get("https://raw.githubusercontent.com/Szakalakamaka/viewpresenter/master/src/main/resources/templates/sidebar.html", function(data){
-    $("#sidebar").html(data);
-});
-$.get("https://raw.githubusercontent.com/Szakalakamaka/viewpresenter/master/src/main/resources/templates/footer.html", function(data){
-    $("#foot").html(data);
-});
-
-
-
-
-</script>
-
-</body>
+        <script src="/js/paggination.js"></script>
+    </body>
 </html>
\ No newline at end of file
