diff --git a/src/main/resources/static/css/commons/font/fontello.eot b/src/main/resources/static/css/commons/font/fontello.eot
new file mode 100644
index 0000000..8eb8762
Binary files /dev/null and b/src/main/resources/static/css/commons/font/fontello.eot differ
diff --git a/src/main/resources/static/css/commons/font/fontello.svg b/src/main/resources/static/css/commons/font/fontello.svg
new file mode 100644
index 0000000..66886e8
--- /dev/null
+++ b/src/main/resources/static/css/commons/font/fontello.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2021 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="plus" unicode="&#xe801;" d="M786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q23 0 38-16t16-38z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="cancel" unicode="&#xe802;" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
+</font>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/src/main/resources/static/css/commons/font/fontello.ttf b/src/main/resources/static/css/commons/font/fontello.ttf
new file mode 100644
index 0000000..a6a2ea2
Binary files /dev/null and b/src/main/resources/static/css/commons/font/fontello.ttf differ
diff --git a/src/main/resources/static/css/commons/font/fontello.woff b/src/main/resources/static/css/commons/font/fontello.woff
new file mode 100644
index 0000000..8e3c9e6
Binary files /dev/null and b/src/main/resources/static/css/commons/font/fontello.woff differ
diff --git a/src/main/resources/static/css/commons/font/fontello.woff2 b/src/main/resources/static/css/commons/font/fontello.woff2
new file mode 100644
index 0000000..b1c349b
Binary files /dev/null and b/src/main/resources/static/css/commons/font/fontello.woff2 differ
diff --git a/src/main/resources/static/css/commons/fontello.css b/src/main/resources/static/css/commons/fontello.css
new file mode 100644
index 0000000..28bc34a
--- /dev/null
+++ b/src/main/resources/static/css/commons/fontello.css
@@ -0,0 +1,59 @@
+@font-face {
+    font-family: 'fontello';
+    src: url('font/fontello.eot?49304387');
+    src: url('font/fontello.eot?49304387#iefix') format('embedded-opentype'),
+         url('font/fontello.woff2?49304387') format('woff2'),
+         url('font/fontello.woff?49304387') format('woff'),
+         url('font/fontello.ttf?49304387') format('truetype'),
+         url('font/fontello.svg?49304387#fontello') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+  /*
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    @font-face {
+      font-family: 'fontello';
+      src: url('../font/fontello.svg?49304387#fontello') format('svg');
+    }
+  }
+  */
+   
+   [class^="icon-"]:before, [class*=" icon-"]:before {
+    font-family: "fontello";
+    font-style: normal;
+    font-weight: normal;
+    speak: never;
+   
+    display: inline-block;
+    text-decoration: inherit;
+    width: 1em;
+    margin-right: .2em;
+    text-align: center;
+    /* opacity: .8; */
+   
+    /* For safety - reset parent styles, that can break glyph codes*/
+    font-variant: normal;
+    text-transform: none;
+   
+    /* fix buttons height, for twitter bootstrap */
+    line-height: 1em;
+   
+    /* Animation center compensation - margins should be symmetric */
+    /* remove if not needed */
+    margin-left: .2em;
+   
+    /* you can be more comfortable with increased icons size */
+    /* font-size: 120%; */
+   
+    /* Font smoothing. That was taken from TWBS */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+   
+    /* Uncomment for 3D effect */
+    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+  }
+   
+  .icon-plus:before { content: '\e801'; } /* '' */
+  .icon-cancel:before { content: '\e802'; } /* '' */
\ No newline at end of file
diff --git a/src/main/resources/static/css/commons/r11form.css b/src/main/resources/static/css/commons/r11form.css
new file mode 100644
index 0000000..67188b2
--- /dev/null
+++ b/src/main/resources/static/css/commons/r11form.css
@@ -0,0 +1,454 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
+@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
+@import url('fontello.css');
+
+
+.hyperlink, .hyperlink:visited, .hyperlink:active {
+    color: rgb(47, 125, 146);
+    cursor: pointer;
+}
+
+.hyperlink:hover {
+    filter: brightness(120%);
+}
+
+.tooltip-window {
+    position: fixed;
+    right: 0;
+    filter: drop-shadow(-2px 0px 2px darkgray);
+    background: #e8f3f7;
+    padding: 15px 30px;
+    font-family: 'Nunito', sans-serif;
+    width: 40%;
+    height: 100%;
+    overflow: scroll;
+}
+
+.tooltip-window.lite {
+    width: 30%;
+}
+
+.tooltip-window .tip {
+}
+
+.bordered-field {
+    border: 2px solid rgba(93, 99, 96, 0.705);
+    border-radius: 5px;
+    padding: 8px;
+    
+}
+
+.bordered-field:focus {
+    outline: none;
+    box-shadow: 0 0 5px rgba(81, 203, 238);
+    border: 2px solid #00000070;
+}
+
+.bordered-field:disabled {
+    background: #eeeeeed2;
+}
+
+.disabled-background {
+    background: #eeeeeed2;
+}
+
+.vertically-resizeable {
+    resize: vertical;
+}
+
+body {
+    font-family: 'Nunito', sans-serif;
+}
+
+.container {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+}
+
+.tool {
+    width: 55%;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.tool.extended {
+    width: 65%;
+}
+
+.tool .tool-context {
+    width: 90%;
+}
+
+.tool.extended .tool-context {
+    width: 75%;
+}
+
+.tool.extended .tool-extention {
+    width: 20%;
+    padding-top: 2%;
+    display: block;
+}
+
+.tool .tool-extention {
+    display: none;
+}
+
+.tool-extention {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.tool-extention.active {
+    opacity: 100%;
+    pointer-events: all;
+}
+
+.clickable-text {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+    cursor: pointer;
+}
+
+.clickable-text.highlight:hover {
+    color: #3bc4f1;
+}
+
+.modification-button {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+}
+
+.modification-button.btn-add {
+    font-size: 16px;
+    color: #00000030;
+    margin: auto 0 auto 0;
+}
+
+.modification-button.btn-add:hover {
+    color:#58ac43;
+}
+
+.modification-button.btn-tile:hover {
+    color: #ca1111;
+}
+
+.modification-button.btn-hashmap {
+    font-size: 16px;
+    color: #00000030;
+    margin: auto 0 auto 0;
+}
+
+.modification-button.btn-hashmap:hover {
+    color: #ca1111;
+}
+
+.modification-button.btn-tile {
+    width: 10%;
+    margin: 20% 0 0 0;
+    font-size: 14px;
+    color: #00000020
+}
+
+.modification-button.btn-addtile {
+    font-size: 38px;
+    color: #00000030;
+}
+
+.modification-button.btn-addtile:hover {
+    color: #58ac43;
+}
+
+.tile {
+    width: 100%;
+    padding-top: 40%;
+    border: 1px solid gray;
+    border-radius: 3px;
+    position: relative;
+    background: #f0f0f095;
+    margin-bottom: 10px;
+    cursor: default;
+}
+
+.tile:hover {
+    filter: brightness(110%);
+}
+
+.tile.active {
+    background: #00000070;
+    color: white;
+    filter: none;
+    pointer-events: none;
+}
+
+.tile.active .btn-tile {
+    opacity: 0;
+}
+
+.tile .content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0 2% 0 7%;
+    display: flex;
+}
+
+.text-aligned-to-right {
+    text-align: right;
+}
+
+.centered-vertically {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.display-space-between {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.display-space-evenly {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.content p {
+    margin: 0;
+    padding: 0;
+}
+
+
+.float-left {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+}
+
+.version-span {
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(85,85,85,0.555);
+}
+
+.block-display {
+    display: block;
+}
+
+.block-label {
+    display: block;
+    margin: 0 0 0 5px;
+}
+
+.tabmenu {
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    border-bottom: 1px solid rgba(185, 185, 185, 0.5);
+}
+
+.tabitem {
+    flex-grow: 1;
+    cursor: pointer;
+    padding: 5px 0;
+}
+
+.tabitem:hover {
+    font-weight: 700;
+}
+
+.tabitem.active {
+    background: rgba(33, 34, 34, 0.705);
+    color: white;
+    font-weight: 700;
+    cursor:default;
+    flex-grow: 1;
+}
+
+.big-font {
+    font-size: 20px;
+}
+
+.action-button.active {
+    background: #3bc4f1;
+    border: 1px solid #7ed0eb;
+    cursor: pointer;
+}
+
+.action-button.active:hover {
+    filter: brightness(110%);
+}
+
+.action-button {
+    background: rgba(155, 165, 160, 0.507);
+    border:1px solid rgba(186, 197, 191, 0.507);
+    color: white;
+    padding: 10px 20px;
+    font-weight: 700;
+    margin: 3px 0;
+}
+
+.quater-width {
+    width: 25%;
+}
+
+.half-width {
+    width: 50%;
+}
+
+.tree-fourth-width {
+    width: 75%;
+}
+
+.half-width.with-padding {
+    width: 45%;
+}
+
+.max-width {
+    width: 100%;
+}
+
+.max-width.with-padding {
+    width: 94%;
+}
+
+.max-height {
+    height: 100%;
+}
+
+.height-300 {
+    height: 300px;
+}
+
+.max-height.with-padding {
+    height: 90%;
+}
+
+.small-margins {
+    margin: 3%;
+}
+
+.small-vertical-margin {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.medium-vertical-margin {
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.large-vertical-margin {
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.textarea-300 {
+    height: 300px;
+}
+
+.centered-content {
+    display: flex;
+    justify-content: center;
+}
+
+.table-map {
+    width: 60%;
+}
+
+.table-map input{
+    font-size: 16px;
+    padding: 7px;
+    border: 1px solid rgba(145, 146, 146, 0.849);
+    border-radius: 5px;
+}
+
+.table-map input.key {
+    background: #f0f0f0;
+}
+
+.table-default {
+    width: 80%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.table-default tr {
+    background: #f0f0f02d;
+}
+
+.table-default tr.bottom-border {
+    border-bottom: 1px solid black;
+}
+
+.table-default th {
+    background: #ffffff;
+}
+
+.table-default tr.even {
+    background: #f0f0f0;
+}
+
+.tip {
+    display: none;
+}
+
+.tip.active {
+    display: block;
+}
+
+.tabcontent {
+    display: none;
+}
+
+.tabcontent.active {
+    display: flex;
+    justify-content: center;
+}
+
+.collapsible .section-button {
+    width: 100%;
+    padding: 15px 0;
+    font-size: 18px;
+    background: #00000012;
+    cursor: pointer;
+}
+
+.collapsible .section-button:hover {
+    filter: brightness(110%); 
+}
+
+.collapsible.active .section-button {
+    background: #00000030;
+}
+
+.collapsible.active .section {
+    display: block;
+}
+
+.collapsible .section {
+    display: none;
+    background: #ffffff50;
+}
+
+.section .content {
+    padding: 15px 15px 30px 15px ;
+    text-align: justify;
+}
+
+.hiddable {
+    display: none;
+}
+
+.hiddable.active {
+    display: inherit;
+}
+
diff --git a/src/main/resources/static/css/form.css b/src/main/resources/static/css/form.css
new file mode 100644
index 0000000..47188aa
--- /dev/null
+++ b/src/main/resources/static/css/form.css
@@ -0,0 +1,7 @@
+.r11-form {
+    display: block;
+}
+
+.r11-form input, textarea {
+    border: 
+}
\ No newline at end of file
diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index e43a22d..98e5c9c 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -3,33 +3,38 @@
 <head>
     <title>R11 MockedServices</title>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="/css/main.css" type="text/css">
-    <link rel="stylesheet" href="/css/tooltip.css" type="text/css">
-    <link rel="stylesheet" href="http://gordon.zipper.release11.com:8085/common.css" type="text/css">
-    <link rel="stylesheet" href="/Dependency/fontello-plus/css/fontello.css" type="text/css"/>
     <link rel="stylesheet" href="/css/modal.css" type="text/css">
-    <link rel="stylesheet" href="/css/table.css" type="text/css">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Acme&family=Josefin+Slab:wght@500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/commons/r11form.css" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
 <body>
-    
-    <div id="container">
-        <div id="toolName">Mocked Service <span id="version">v0.0.1</span></div>
-        <div id="itemData">
-                <div id="basicItemData" class="articleHead">Your message</div>
-                <div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId"></span></div>
-                <div id="link">
-                    <label for="messageLink">Link</label>
-                    <div id="messageLink" class="field"></div>
+    <div class="container">
+        <div class="tool extended">
+            <div class="tool-context">
+                <div>
+                    <h1>MockedServices <span class="version-span">v1.0.0</span></h1>
                 </div>
-                <div id="msgBody">
-                    <div id="messageFields">
-                        <div class="fieldFloater">
-                            <div>
+                <div>
+                    <!-- h2 -->
+                    <div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
+                    <div id="advancedItemData" class="hiddable"><h2>Messaged id: <span id="mockedMessageId">1</span></h2></div>
+                    <!-- save -->
+                    <div>
+                        <!-- <button class="action-button active large-button small-vertical-margin">Save</button> -->
+                    </div>
+                    <!-- link -->
+                    <div>
+                        <label for="messageLink" class="block-display">Link</label>
+                        <div id="messageLink" class="bordered-field max-width with-padding disabled-background"><a class="hyperlink" href="www.google.com" target="_blank">www.google.com</a></div>
+                        <!-- <input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla"> -->
+                    </div>
+                    <div class="display-space-between max-width">
+                        <!-- status and type -->
+                        <div class="medium-input block-display small-vertical-margin">
+                            <!-- status -->
+                            <div class="max-width  small-vertical-margin">
                                 <label for="httpStatus">Http Status</label>
-                                <input type="text" id="httpStatus" class="field fieldDefault" value="200" list="httpStatusSuggestion">
+                                <input id="httpStatus" class="bordered-field max-width data-field" type="text" value="200" list="httpStatusSuggestion">
                                 <datalist id="httpStatusSuggestion">
                                     <option value="200">
                                     <option value="300">
@@ -39,9 +44,10 @@
                                     <option value="500">
                                 </datalist>
                             </div>
-                            <div id="typeSelection">
+                            <!-- content type -->
+                            <div class="max-width  small-vertical-margin">
                                 <label for="typeSelector">Content Type</label>
-                                <input id="typeSelector" class="field fieldDefault" list="contentTypes" value="application/xml"/>
+                                <input id="typeSelector" class="bordered-field max-width data-field" type="text" value="application/xml" list="contentTypes">
                                 <datalist id="contentTypes">
                                     <option value="application/xml">
                                     <option value="application/json">
@@ -49,127 +55,171 @@
                                 </datalist>
                             </div>
                         </div>
-                        <div class="fieldFloater" id="functionBar">
-                            <div class="buttonSpacer"></div>
-                            <div><button id="btn-save" type="submit" class="functionBarButton btn-action">Save</button></div>
-                            <div class="buttonSpacer"></div>
-                            <div style="clear: both;"></div>
+                        <button id="btn-save" class="small-margins half-width with-padding action-button">Save</button>
+                    </div>
+                    <!-- body -->
+                    <div class="small-vertical-margin">
+                        <label for="bodyEditor">Body</label>
+                        <textarea id="bodyEditor" class="data-field bordered-field max-width with-padding height-300 vertically-resizeable"></textarea>
+                    </div>
+                    <!-- show/hide -->
+                    <div id="optional" class="clickable-text highlight">
+                        <h3>&gt; show/hide advanced settings</h3>
+                    </div>
+                    <!-- advanced -->
+                    <div id="advanced" class="max-width with-padding hiddable">
+                        <!-- tab menu -->
+                        <div class="tabmenu medium-vertical-margin">
+                            <button id="headersTab" class="tabitem active clickable-text big-font">Headers</button>
+                            <button id="historyTab" class="tabitem clickable-text big-font">History</button>
                         </div>
-                        <div style="clear: both;"></div>
-                    </div>
-
-                    <div id="bodyEdition">
-                        <label for="bodyEditor">Body:</label>
-                        <textarea type="text" id="bodyEditor" class="field resizeNone fieldText"></textarea>
-                    </div>
-
-                </div>
-                <div id="optional">&gt; show/hide advanced settings</div>
-                <div id="advanced" style="display: none;">
-                    <div id="advancedMenu">
-                        <div id="headersTab" class="advancedMenuTabSelected">Headers</div>
-                        <div id="historyTab" class="advancedMenuTab">History</div>
-                    </div>
-                    <div id="headers">
-                        <table id="headerTable">
-                            <thead>
-                                <tr>
-                                    <td>Header</td>
-                                    <td>Value</td>
-                                    <td></td>
-                                </tr>
-                            </thead>
-                            <tbody id="httpStatusValues">
-                            </tbody>
-                            <tfoot>
-                                <tr>
-                                    <td><input type="text" name="headerKey" id="headerKeyInput" placeholder="key" class="tableField"/></td>
-                                    <td><input type="text" name="headerValue" id="headerValueInput" placeholder="value" class="tableField"/></td>
-                                    <td id="btn-addRow" class="btn-function-table btn-table-add">+</td>
-                                </tr>
-                            </tfoot>
-                        </table>
-                    </div>
-                    <div id="history" style="display:none;">
-                        <div id="historyFunction">
-                            <div>
-                                <label for="historyFrom">From</label>
-                                <input type="date" name="dateFrom" id="historyFrom"/>
-                                <input type="time" name="timeFrom" id="historyTimeFrom"/>
-                            </div>
-                            <div>
-                                <label for="historyTo">To</label>
-                                <input type="date" name="dateTo" id="historyTo"/>
-                                <input type="time" name="dateTo" id="historyTimeTo"/>
-                            </div>
-                            <button id="btn-searchHistory">Search</button>
-                        </div>
-                        <div style="clear:both;"></div>
-                        <div id="historyDisplay">
-                            <table id="historyTable" class="simpleTable">
-                                <thead>
-                                    <tr class="head">
-                                        <th>Timestamp</th>
-                                        <th>Status</th>
+                        <!-- container -->
+                        <div class="medium-vertical-margin">
+                            <!-- headers -->
+                            <div id="headers" class="medium-vertical-margin tabcontent active">
+                                <table class="table-map">
+                                    <thead>
+                                        <tr>
+                                            <th>Name</th>
+                                            <th>Value</th>
+                                            <th></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody id="headerMapTable">
+                                        <tr>
+                                            <td><input class="key" value="basic value"></td>
+                                            <td><input value="basic value"></td>
+                                            <td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>
+                                        </tr>
+                                    </tbody>
+                                    <tr>
+                                        <td><input id="headerKeyInput" placeholder="name"></td>
+                                        <td><input id="headerValueInput" placeholder="value"></td>
+                                        <td><button id="btn-newRow" class="modification-button btn-add"><i class="icon-plus"></i></button></td>
                                     </tr>
-                                </thead>
-                                <tbody>
-                                </tbody>
-                            </table>
+                                </table>
+                            </div>
+                            <!-- history -->
+                            <div id="history" class="medium-vertical-margin tabcontent">
+                                <div class="block-display max-width">
+                                    <div class="display-space-between max-width small-vertical-margin">
+                                        <div class="three-fourth-width display-space-evenly">
+                                            <div class="block-display half-width with-padding">
+                                                <label for="historyFrom" class="block-label">From</label>
+                                                <input id="historyFrom" type="date" class="bordered-field max-width with-padding">
+                                                <input id="historyTimeFrom" type="time" class="small-vertical-margin bordered-field max-width with-padding">
+                                            </div>
+                                            <div class="block-display half-width with-padding">
+                                                <label for="historyTo" class="block-label">To</label>
+                                                <input id="historyTo" type="date" class="bordered-field max-width with-padding">
+                                                <input id="historyTimeTo" type="time" class="small-vertical-margin bordered-field max-width with-padding">
+                                            </div>
+                                        </div>
+                                        <button id="btn-searchHistory" class="quater-width action-button active small-margins">Search</button>
+                                    </div>
+                                
+                                    <div class="max-width centered-content large-vertical-margin">
+                                        <table id="historyTable" class="table-default">
+                                            <thead>
+                                                <tr class="bottom-border">
+                                                    <th>Timestamp</th>
+                                                    <th>Type</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <!-- <tr class="even">
+                                                    <td>2021-01-01T10:57:26</td>
+                                                    <td>Client request</td>
+                                                </tr>
+                                                <tr>
+                                                    <td>2021-01-01T10:57:26</td>
+                                                    <td>Client request</td>
+                                                </tr> -->
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-
-        </div>
-        <div id="selectMenu">
-            <div id="selectMenuContent" style="display: none;">
-                <div id="selectMenuHead" class="articleHead">List</div>
-                <div id="listItems"></div>
-                <div id="iconPlus" class="menuItem"><i class="icon-plus"></i></div>
+            </div>
+            <div id="selectMenuContent" class="tool-extention">
+                <!-- header -->
+                <div>
+                    <h2>Message List</h2>
+                </div>
+                <!-- tile list -->
+                <div id="listItems">
+                    <!-- <div class="tile">
+                        <div class="content">
+                            <div class="display-space-between">
+                                <div class="centered-vertically">
+                                    <p>Id: 2</p>
+                                    <p>Status: 200</p>
+                                </div>
+                                <div>
+                                    <button id="test1" class="modification-button btn-tile"><i class="icon-cancel"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div> -->
+                </div>
+                <div class="max-width centered-content small-vertical-margin">
+                    <button id="btn-newtile" class="modification-button btn-addtile"><i class="icon-plus"></i></button>
+                </div>
             </div>
         </div>
-        <div id="tooltip" class="fixed tooltip">
-            <div id="mockIntroTip">
-                <h2>What's mock service?</h2>
-                <p>It's super simple! Need data as response from the server? Mock your api in just a few clicks.</p>
-                <p>Hover over an item to see description!</p>
-                <br>
-                <h2>Help:</h2>
-            </div>
-
-            <div id="messageLinkTip" class="collapsible" style="display: none;">
-                <!--style="display: none;"-->
-                <h4>The link</h4>
-                <p>It's url where you need send your request</p>
-            </div>
-            <div id="httpStatusTip" class="collapsible" style="display: none;">
-                <h4>Http status</h4>
-                <p>Set http status for server response. 200 OK is default.</p>
-            </div>
-            <div id="typeSelectorTip" class="collapsible" style="display: none;">
-                <h4>Content type</h4>
-                <p>Select content type of body. Set plain text if data has no format.</p>
-            </div>
-            <div id="bodyEditorTip" class="collapsible" style="display: none;">
-                <h4>Body</h4>
-                <p>Text placed in this field will be displayed as response body</p>
-            </div>
-            <div id="headersTabTip" class="collapsible" style="display: none;">
-                <h4>Headers</h4>
-                <p>Set headers for your messages.</p>
-            </div>
-            <div id="historyTabTip" class="collapsible" style="display: none;">
-                <h4>History</h4>
-                <p>Check history of this message</p>
-            </div>
-            <div id="newHeaderTip" class="collapsible" style="display: none;">
-                <h4>Next header value</h4>
-                <p>Type values and press enter to add new header.</p>
+        <div class="tooltip-window lite">
+            <div>
+                <h2>What's this?</h2>
+                <p>MockedServices is a tool that allows developer to create, in easy and simple way, http server mocked endpoints for integration tests.</p>
+                <h2>Help</h2>
+                <p>When cursor hovers over an item. It's description is displayed below.</p>
+                <div class="large-vertical-margin">
+                    <div id="messageLinkTip" class="tip">
+                        <h3>Link</h3>
+                        <p>Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="httpStatusTip" class="tip">
+                        <h3>Http Status</h3>
+                        <p>Value of the field is corresponding to status value that server will return.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="typeSelectorTip" class="tip">
+                        <h3>Content Type</h3>
+                        <p>Value of the field describes content of body payload contained in the response. For example if content is in xml format the value should be "application/xml" or "text/xml"</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="bodyEditorTip" class="tip">
+                        <h3>Body</h3>
+                        <p>Value of the field describes content of response body. It's basicly the message we want server to return. If it's simple response like 200 OK or 404 not found then field might be left empty.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="headersTabTip" class="tip">
+                        <h3>Headers</h3>
+                        <p>Content of this tab allows to set and modify headers that will be included in the response.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="historyTabTip" class="tip">
+                        <h3>History</h3>
+                        <p>Content of this tab displays the history of requests or responses received/sent to the endpoint</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="newHeaderTip" class="tip">
+                        <h3>New header</h3>
+                        <p>Insert value in the field and press the plus icon to add a new header to the message.</p>
+                    </div>
+                </div>
             </div>
         </div>
-        <div style="clear:both;"></div>
-
-
     </div>
     <div id="overlay"></div>
     <div id="modal-confirm" class="modal">
@@ -194,5 +244,6 @@
     <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>
\ No newline at end of file
diff --git a/src/main/resources/static/js/datatransfer.js b/src/main/resources/static/js/datatransfer.js
index 7e6465f..9fa3c6e 100644
--- a/src/main/resources/static/js/datatransfer.js
+++ b/src/main/resources/static/js/datatransfer.js
@@ -1,7 +1,3 @@
-//TODO: Add delete buttons for messages
-//TODO: Save button deactivation after swap, post or delete
-//TODO: It sends request, gets responds but doesnt run a function!!
-//TODO: Warning is displayed twice
 var clientUUID = '';
 var advancedDisplayed = false;
 var json = {};
@@ -10,11 +6,9 @@ var lastId = 1;
 var htable_row = 0;
 var host = getDomain();
 var dataModified = false;
-// TODO: Remove discard changes
 const addMessageName = 'addMessage';
 const loadMessageName = 'changeMessage';
 const removeMessageName = 'removeMessage';
-// TODO: Add last given command
 
 const C_UUID = 'mock-uuid';
 const C_ID = 'last-displayed-id';
@@ -32,10 +26,9 @@ const getUpdate = function(){
 const dataRefresh = function(){
     getData();
 }
-$('#iconPlus').click(function(){callAddMessage()});
-$('#btn-addRow').click(function(){addRow()});
-//TODO remove later save onclick init
-$('#btn-save').click(getUpdate);
+$('#btn-newtile').click(function(){callAddMessage()});
+// $('#btn-addRow').click(function(){addRow()});
+// $('#btn-save').click(getUpdate);
 
 function getData(){
     $.getJSON(host + '/api/mock/'+clientUUID, function(data) {
@@ -64,18 +57,16 @@ function getDomain(){
 function setDataModified(){
     if(dataModified) return;
     dataModified = true;
-    $('#btn-save').removeClass('btn-inactive');
-    $('#btn-save').addClass('btn-action');
+    $('#btn-save').addClass('active');
     $('#btn-save').click(getUpdate);
 }
 
 //Adding change listener to fields
-$('.field').change(setModified);
+$('.data-field').change(setModified);
 
 function setDataOrigin(){
     dataModified = false;
-    $('#btn-save').addClass('btn-inactive');
-    $('#btn-save').removeClass('btn-action');
+    $('#btn-save').removeClass('active');
     $('#btn-save').off();
 }
 
@@ -104,7 +95,7 @@ function refreshData(){
 }
 
 function setCookie(){
-    document.cookie = C_UUID + '=' +clientUUID+';'
+    document.cookie = C_UUID + '=' +clientUUID;
     document.cookie = C_ID + '=' + lastId;
     document.cookie = C_ADV + '=' + advancedVisibility;
 }
@@ -216,7 +207,8 @@ function initializeMock(index){
 
 function fillStaticFields(uuid, id, mediaType, body, httpStatus){
     let link = createLink(uuid,id);
-    $('#messageLink').html('<a href="' + link + '" target="_blank">' + link + '</a>');
+    let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
+    $('#messageLink').html(linkHtml);
     $('#httpStatus').val(httpStatus);
     $('#typeSelector').val(mediaType);
     $('#bodyEditor').val(body);
@@ -230,69 +222,61 @@ function createLink(uuid, id){
 }
 
 function fillHeaderTable(headers){
-    var innerHTML = $('#httpStatusValues').html();
-    innerHTML += generateHeaderTable(headers);
-    $('#httpStatusValues').html(innerHTML);
-    $('.tableField').change(function(){setDataModified()});
+    var innerHTML = buildHeaderMapHtml(headers);
+    refreshHeaderTable(innerHTML);
 }
-//TODO: Add addRow() to generate new rows and populate them with data
-function generateHeaderTable(headers){
-    let count = 0;
-    let innerHTML = '';
-    for(var item in headers){
-        if( headers.hasOwnProperty(item) ) count++;
-    }
-    var keys = new Array(count);
-    var values = new Array(count);
-    let index = 0;
-    for(var key in Object.keys(headers)){
-        keys[index++]=Object.keys(headers)[key];
-    }
-    index = 0;
-    for(var val in headers){
-        values[index++]=headers[val];
-    }
 
-    for(let i=0; i<count; i++){
-        innerHTML+=
-            '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
-                '<td>' +
-                    '<input type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + keys[i] + '"/></td>' +
-                '<td>' +
-                    '<input type="text" name="headerValue" placeholder="value" class="tableField" value="' + values[i] + '"/></td>' +
-            '<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">&times;</td>' +
-            '</tr>';
-        htable_row++;
+function refreshHeaderTable(html){
+    $('#headerMapTable').html(html);
+    $('.table-map').change(function(){setDataModified()});
+    $('.btn-hashmap').click(function(){
+        $(this).closest('tr').remove();
+        setDataModified();
+    })
+}
+
+function buildHeaderMapHtml(headers){
+    var innerHTML = '';
+    for(var key in headers){
+        innerHTML += buildRowHtml(key, headers[key]);
     }
     return innerHTML;
 }
 
-function removeRow(row){
-    $('#hrow' + row).remove();
-    setDataModified();
+function addRow(key, value){
+    var headerMap = $('#headerMapTable');
+    var headersMapHtml = headerMap.html();
+    headersMapHtml += buildRowHtml(key, value);
+    refreshHeaderTable(headersMapHtml);
 }
 
-function addRow(){
-    var table = $('#httpStatusValues');
-    var hkey = $('#headerKeyInput');
-    var hval = $('#headerValueInput');
-    if(hkey.val() == 'key' || hkey.val() == '' || hval.val() == 'value' || hval.val() == '') return;
-    var innerHtml =
-        '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
-        '<td>' +
-        '<input " type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + hkey.val() +
-        '"/></td>' +
-        '<td>' +
-        '<input " type="text" name="headerKey" placeholder="key" class="tableField" value="' + hval.val() + '"/></td>' +
-        '<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">X</td>' +
-        '</tr>';
-    htable_row++;
-    table.append(innerHtml);
-    hkey.val('');
-    hval.val('');
-    setDataModified();
+const newRowInput = function(){
+    const hName = $('#headerKeyInput');
+    const hValue = $('#headerValueInput');
+    if(checkIfInputValid(hName.val()) && checkIfInputValid(hValue.val())){
+        addRow(hName.val(), hValue.val());
+        hName.val(null);
+        hValue.val(null);
+        setDataModified();
+    }
 }
 
+$('#btn-newRow').click(newRowInput);
+
+function checkIfInputValid(input){
+    return !(input == '' || input == null || input == undefined);
+}
+
+function buildRowHtml(key, value){
+    return '' + 
+    '<tr>' +
+        '<td><input class="key data-field" value="' + key + '"></td>' +
+        '<td><input class="data-field" value="' + value + '"></td>' +
+        '<td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>' +
+    '</tr>';
+}
+
+
 function fillMessageList(){
     $("#listItems").html('');
     var innerHTML = '';
@@ -300,10 +284,21 @@ function fillMessageList(){
         innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
     }
     $("#listItems").append(innerHTML);
+    $('.tile').click(function(e) {
+        var element = $(this);
+        var button = element.find('.btn-tile').children().get(0);
+        console.log(button == e.target);
+        if(!(button == e.target)){
+            console.log("Button is not a target. Loading message.")
+            callLoadMessage(parseInt($(this).attr('tileid')));
+        }
+    });
+    $('.btn-tile').click(function(){
+        // console.log(this);
+        callRemoveMessage($(this).closest('.tile').attr('tileId'));
+    })
 }
 
-
-//TODO: Implement methods where its possible
 function findJsonById(id){
     return json[findJsonIndexById(id)];
 }
@@ -324,10 +319,15 @@ function callLoadMessage(id){
 }
 
 function loadMessage(id){
+    if(id == null || id == undefined){
+        console.log('id is null');
+        return;
+    }
     lastId = id;
     setCookie();
     setDataOrigin();
     for(let i=0; i<json.length; i++){
+        console.log('id == ' + id + ' mockedId == ' + json[i].mockedResponseId);
         if(id == json[i].mockedResponseId){
             jsonIndex = i;
             console.log("Message found");
@@ -341,25 +341,33 @@ function loadMessage(id){
     console.log("Message not found");
 }
 
+
 function selectMessage(id){
+    const tiles = $('.tile');
     console.log("Selecting message...");
-    $(".menuItemSelected").on("click");
-    $(".menuItemSelected").addClass("menuItem");
-    $(".menuItemSelected").removeClass("menuItemSelected");
+    tiles.removeClass("active");
     console.log("Selected message deselected");
-    let itemId = '#item_'+id;
-    $(itemId).off("click");
-    $(itemId).addClass("menuItemSelected");
-    $(itemId).removeClass("menuItem");
+    $('.tile[tileid="'+id+'"]').addClass("active");
     console.log("Selected message selected");
 }
 
+
+
 function generateMessageTileHtml(id, httpStatus, mediaType){
-    var innerHTML = '<div class="menuItem" id="item_' + id + '" onclick="callLoadMessage('+ id +')">' +
-        '<table><tr><td>Id: '+ id +'</td></tr>' +
-        '<tr><td>Http-status: '+ httpStatus +'</td></tr>' +
-        '</table></div><div class="btn-del-MenuItem" onclick="callRemoveMessage(' + id + ')">&times;</div>' +
-        '<div style="clear: both;"></div>';
+    var innerHTML = '' +
+    '<div tileid="' + id + '" class="tile">' +
+        '<div class="content">' +
+            '<div class="display-space-between">' +
+                '<div class="centered-vertically">' +
+                    '<p>Id: ' + id + '</p>' +
+                    '<p>Status: ' + httpStatus + '</p>' +
+                '</div>' +
+                '<div>' +
+                    '<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>' +
+                '</div>' +
+            '</div>' +
+        '</div>' +
+    '</div>';
     return innerHTML;
 }
 
@@ -399,7 +407,7 @@ function generateJson(){
 
 
 function convertTableToJson(){
-    var rows = $('.httpStatusValue');
+    const rows = $('#headerMapTable').children();
     console.log("Rows: "+rows.length);
     var obj = {};
     var key;
diff --git a/src/main/resources/static/js/fiddle.js b/src/main/resources/static/js/fiddle.js
new file mode 100644
index 0000000..9fd89dc
--- /dev/null
+++ b/src/main/resources/static/js/fiddle.js
@@ -0,0 +1,5 @@
+const deleteParent = function(){
+    $(this).closest('div.tile').remove();
+}
+
+$('#test1').click(deleteParent);
\ No newline at end of file
diff --git a/src/main/resources/static/js/historyloader.js b/src/main/resources/static/js/historyloader.js
index 3107624..f5437e5 100644
--- a/src/main/resources/static/js/historyloader.js
+++ b/src/main/resources/static/js/historyloader.js
@@ -56,7 +56,8 @@ function historyToHtml(){
     var innerHTML = '';
     var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
     for(let i=0; i<iterations; i++){
-        innerHTML += '<tr>' +
+        let style = i%2==0 ? ' class="even"' : '';
+        innerHTML += '<tr' + style + '>' +
             '<td>' + historyJson[i].dateTimeStamp + '</td>' +
             '<td>' + historyJson[i].interfaceName + '</td>' +
         '</tr>';
diff --git a/src/main/resources/static/js/modal.js b/src/main/resources/static/js/modal.js
index b07de7d..3ea450c 100644
--- a/src/main/resources/static/js/modal.js
+++ b/src/main/resources/static/js/modal.js
@@ -11,7 +11,6 @@ const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0);
 const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
 const allModals = $('.modal');
 const btnModalClose = $('.modal button');
-//TODO: Implement in datatransfer
 const closeModals = function() {
     hideModal(allModals);
 }
diff --git a/src/main/resources/static/js/uianimation.js b/src/main/resources/static/js/uianimation.js
index 97a88f4..0c7fd25 100644
--- a/src/main/resources/static/js/uianimation.js
+++ b/src/main/resources/static/js/uianimation.js
@@ -6,50 +6,41 @@ var advancedID = $("#advancedItemData");
 var focusedField = false;
 function changeAdvancedVisibility(){
     if(advancedVisibility){
-        selectMenu.css('display', 'none');
-        advancedTab.css('display', 'none');
-        advancedID.css('display', 'none');
-        basicID.css('display', 'block')
+        selectMenu.removeClass('active');
+        advancedTab.removeClass('active');
+        advancedID.removeClass('active');
+        basicID.addClass('active');
         advancedVisibility = false;
     }
     else {
-        selectMenu.css('display', 'block');
-        advancedTab.css('display', 'block');
-        advancedID.css('display', 'block');
-        basicID.css('display', 'none');
+        selectMenu.addClass('active');
+        advancedTab.addClass('active');
+        advancedID.addClass('active');
+        basicID.removeClass('active');
         advancedVisibility = true;
     }
     setCookie();
 }
 
-function createMessageTab() {
-    var items = document.getElementById("listItems");
-    items.innerHTML += '<div class="menuItem">Item</div>';
-}
-
 $("#optional").click(changeAdvancedVisibility);
-$(".menuFactory").click(createMessageTab);
 $('#historyTab').click(showHistory);
 
+const tabitem = $('.tabitem');
 function showHistory(){
-    $('#headers').css('display', 'none');
-    $('.advancedMenuTabSelected').addClass('advancedMenuTab');
-    $('.advancedMenuTabSelected').click(showHeaders);
-    $('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
-    $('#history').css('display', 'block');
-    $('#historyTab').addClass('advancedMenuTabSelected');
-    $('#historyTab').removeClass('advancedMenuTab');
+    $('#headersTab').click(showHeaders);
+    tabitem.removeClass('active');
+    $('.tabcontent').removeClass('active');
+    $('#history').addClass('active');
+    $('#historyTab').addClass('active');
     $('#historyTab').off('click');
 }
 
 function showHeaders(){
-    $('#history').css('display', 'none');
-    $('.advancedMenuTabSelected').addClass('advancedMenuTab');
-    $('.advancedMenuTabSelected').click(showHistory);
-    $('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
-    $('#headers').css('display', 'block');
-    $('#headersTab').addClass('advancedMenuTabSelected');
-    $('#headersTab').removeClass('advancedMenuTab');
+    $('#historyTab').click(showHistory);
+    tabitem.removeClass('active');
+    $('.tabcontent').removeClass('active');
+    $('#headers').addClass('active');
+    $('#headersTab').addClass('active');
     $('#headersTab').off('click');
 }
 
@@ -65,13 +56,13 @@ function focusOutTip(element){
 
 function hidTip(element){
     if(focusedField) return;
-    $('#'+element).fadeOut(100);
+    $('#'+element).removeClass('active');
 }
 
 function showTip(element){
     if(focusedField) return;
-    $('.collapsible').fadeOut(0);
-    $('#'+element).fadeIn(100);
+    $('.tip').removeClass('active');
+    $('#'+element).addClass('active');
 }
 
 $('#messageLink').mouseover(function(){showTip('messageLinkTip')});
diff --git a/target/classes/static/css/commons/font/fontello.eot b/target/classes/static/css/commons/font/fontello.eot
new file mode 100644
index 0000000..8eb8762
Binary files /dev/null and b/target/classes/static/css/commons/font/fontello.eot differ
diff --git a/target/classes/static/css/commons/font/fontello.svg b/target/classes/static/css/commons/font/fontello.svg
new file mode 100644
index 0000000..66886e8
--- /dev/null
+++ b/target/classes/static/css/commons/font/fontello.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2021 by original authors @ fontello.com</metadata>
+<defs>
+<font id="fontello" horiz-adv-x="1000" >
+<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="plus" unicode="&#xe801;" d="M786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q23 0 38-16t16-38z" horiz-adv-x="785.7" />
+
+<glyph glyph-name="cancel" unicode="&#xe802;" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
+</font>
+</defs>
+</svg>
\ No newline at end of file
diff --git a/target/classes/static/css/commons/font/fontello.ttf b/target/classes/static/css/commons/font/fontello.ttf
new file mode 100644
index 0000000..a6a2ea2
Binary files /dev/null and b/target/classes/static/css/commons/font/fontello.ttf differ
diff --git a/target/classes/static/css/commons/font/fontello.woff b/target/classes/static/css/commons/font/fontello.woff
new file mode 100644
index 0000000..8e3c9e6
Binary files /dev/null and b/target/classes/static/css/commons/font/fontello.woff differ
diff --git a/target/classes/static/css/commons/font/fontello.woff2 b/target/classes/static/css/commons/font/fontello.woff2
new file mode 100644
index 0000000..b1c349b
Binary files /dev/null and b/target/classes/static/css/commons/font/fontello.woff2 differ
diff --git a/target/classes/static/css/commons/fontello.css b/target/classes/static/css/commons/fontello.css
new file mode 100644
index 0000000..28bc34a
--- /dev/null
+++ b/target/classes/static/css/commons/fontello.css
@@ -0,0 +1,59 @@
+@font-face {
+    font-family: 'fontello';
+    src: url('font/fontello.eot?49304387');
+    src: url('font/fontello.eot?49304387#iefix') format('embedded-opentype'),
+         url('font/fontello.woff2?49304387') format('woff2'),
+         url('font/fontello.woff?49304387') format('woff'),
+         url('font/fontello.ttf?49304387') format('truetype'),
+         url('font/fontello.svg?49304387#fontello') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+  /* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+  /* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+  /*
+  @media screen and (-webkit-min-device-pixel-ratio:0) {
+    @font-face {
+      font-family: 'fontello';
+      src: url('../font/fontello.svg?49304387#fontello') format('svg');
+    }
+  }
+  */
+   
+   [class^="icon-"]:before, [class*=" icon-"]:before {
+    font-family: "fontello";
+    font-style: normal;
+    font-weight: normal;
+    speak: never;
+   
+    display: inline-block;
+    text-decoration: inherit;
+    width: 1em;
+    margin-right: .2em;
+    text-align: center;
+    /* opacity: .8; */
+   
+    /* For safety - reset parent styles, that can break glyph codes*/
+    font-variant: normal;
+    text-transform: none;
+   
+    /* fix buttons height, for twitter bootstrap */
+    line-height: 1em;
+   
+    /* Animation center compensation - margins should be symmetric */
+    /* remove if not needed */
+    margin-left: .2em;
+   
+    /* you can be more comfortable with increased icons size */
+    /* font-size: 120%; */
+   
+    /* Font smoothing. That was taken from TWBS */
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+   
+    /* Uncomment for 3D effect */
+    /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+  }
+   
+  .icon-plus:before { content: '\e801'; } /* '' */
+  .icon-cancel:before { content: '\e802'; } /* '' */
\ No newline at end of file
diff --git a/target/classes/static/css/commons/r11form.css b/target/classes/static/css/commons/r11form.css
new file mode 100644
index 0000000..67188b2
--- /dev/null
+++ b/target/classes/static/css/commons/r11form.css
@@ -0,0 +1,454 @@
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap');
+@import url('https://necolas.github.io/normalize.css/8.0.1/normalize.css');
+@import url('fontello.css');
+
+
+.hyperlink, .hyperlink:visited, .hyperlink:active {
+    color: rgb(47, 125, 146);
+    cursor: pointer;
+}
+
+.hyperlink:hover {
+    filter: brightness(120%);
+}
+
+.tooltip-window {
+    position: fixed;
+    right: 0;
+    filter: drop-shadow(-2px 0px 2px darkgray);
+    background: #e8f3f7;
+    padding: 15px 30px;
+    font-family: 'Nunito', sans-serif;
+    width: 40%;
+    height: 100%;
+    overflow: scroll;
+}
+
+.tooltip-window.lite {
+    width: 30%;
+}
+
+.tooltip-window .tip {
+}
+
+.bordered-field {
+    border: 2px solid rgba(93, 99, 96, 0.705);
+    border-radius: 5px;
+    padding: 8px;
+    
+}
+
+.bordered-field:focus {
+    outline: none;
+    box-shadow: 0 0 5px rgba(81, 203, 238);
+    border: 2px solid #00000070;
+}
+
+.bordered-field:disabled {
+    background: #eeeeeed2;
+}
+
+.disabled-background {
+    background: #eeeeeed2;
+}
+
+.vertically-resizeable {
+    resize: vertical;
+}
+
+body {
+    font-family: 'Nunito', sans-serif;
+}
+
+.container {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+}
+
+.tool {
+    width: 55%;
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.tool.extended {
+    width: 65%;
+}
+
+.tool .tool-context {
+    width: 90%;
+}
+
+.tool.extended .tool-context {
+    width: 75%;
+}
+
+.tool.extended .tool-extention {
+    width: 20%;
+    padding-top: 2%;
+    display: block;
+}
+
+.tool .tool-extention {
+    display: none;
+}
+
+.tool-extention {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.tool-extention.active {
+    opacity: 100%;
+    pointer-events: all;
+}
+
+.clickable-text {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+    cursor: pointer;
+}
+
+.clickable-text.highlight:hover {
+    color: #3bc4f1;
+}
+
+.modification-button {
+    padding: 0;
+    outline: none;
+    background: none;
+    border: none;
+    font-weight: 300;
+}
+
+.modification-button.btn-add {
+    font-size: 16px;
+    color: #00000030;
+    margin: auto 0 auto 0;
+}
+
+.modification-button.btn-add:hover {
+    color:#58ac43;
+}
+
+.modification-button.btn-tile:hover {
+    color: #ca1111;
+}
+
+.modification-button.btn-hashmap {
+    font-size: 16px;
+    color: #00000030;
+    margin: auto 0 auto 0;
+}
+
+.modification-button.btn-hashmap:hover {
+    color: #ca1111;
+}
+
+.modification-button.btn-tile {
+    width: 10%;
+    margin: 20% 0 0 0;
+    font-size: 14px;
+    color: #00000020
+}
+
+.modification-button.btn-addtile {
+    font-size: 38px;
+    color: #00000030;
+}
+
+.modification-button.btn-addtile:hover {
+    color: #58ac43;
+}
+
+.tile {
+    width: 100%;
+    padding-top: 40%;
+    border: 1px solid gray;
+    border-radius: 3px;
+    position: relative;
+    background: #f0f0f095;
+    margin-bottom: 10px;
+    cursor: default;
+}
+
+.tile:hover {
+    filter: brightness(110%);
+}
+
+.tile.active {
+    background: #00000070;
+    color: white;
+    filter: none;
+    pointer-events: none;
+}
+
+.tile.active .btn-tile {
+    opacity: 0;
+}
+
+.tile .content {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    padding: 0 2% 0 7%;
+    display: flex;
+}
+
+.text-aligned-to-right {
+    text-align: right;
+}
+
+.centered-vertically {
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.display-space-between {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+}
+
+.display-space-evenly {
+    display: flex;
+    justify-content: space-evenly;
+}
+
+.content p {
+    margin: 0;
+    padding: 0;
+}
+
+
+.float-left {
+    display: flex;
+    justify-content: left;
+    width: 100%;
+}
+
+.version-span {
+    font-size: 13px;
+    font-weight: 400;
+    color: rgba(85,85,85,0.555);
+}
+
+.block-display {
+    display: block;
+}
+
+.block-label {
+    display: block;
+    margin: 0 0 0 5px;
+}
+
+.tabmenu {
+    display: flex;
+    flex-direction: row;
+    text-align: center;
+    border-bottom: 1px solid rgba(185, 185, 185, 0.5);
+}
+
+.tabitem {
+    flex-grow: 1;
+    cursor: pointer;
+    padding: 5px 0;
+}
+
+.tabitem:hover {
+    font-weight: 700;
+}
+
+.tabitem.active {
+    background: rgba(33, 34, 34, 0.705);
+    color: white;
+    font-weight: 700;
+    cursor:default;
+    flex-grow: 1;
+}
+
+.big-font {
+    font-size: 20px;
+}
+
+.action-button.active {
+    background: #3bc4f1;
+    border: 1px solid #7ed0eb;
+    cursor: pointer;
+}
+
+.action-button.active:hover {
+    filter: brightness(110%);
+}
+
+.action-button {
+    background: rgba(155, 165, 160, 0.507);
+    border:1px solid rgba(186, 197, 191, 0.507);
+    color: white;
+    padding: 10px 20px;
+    font-weight: 700;
+    margin: 3px 0;
+}
+
+.quater-width {
+    width: 25%;
+}
+
+.half-width {
+    width: 50%;
+}
+
+.tree-fourth-width {
+    width: 75%;
+}
+
+.half-width.with-padding {
+    width: 45%;
+}
+
+.max-width {
+    width: 100%;
+}
+
+.max-width.with-padding {
+    width: 94%;
+}
+
+.max-height {
+    height: 100%;
+}
+
+.height-300 {
+    height: 300px;
+}
+
+.max-height.with-padding {
+    height: 90%;
+}
+
+.small-margins {
+    margin: 3%;
+}
+
+.small-vertical-margin {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.medium-vertical-margin {
+    margin-top: 30px;
+    margin-bottom: 30px;
+}
+
+.large-vertical-margin {
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+.textarea-300 {
+    height: 300px;
+}
+
+.centered-content {
+    display: flex;
+    justify-content: center;
+}
+
+.table-map {
+    width: 60%;
+}
+
+.table-map input{
+    font-size: 16px;
+    padding: 7px;
+    border: 1px solid rgba(145, 146, 146, 0.849);
+    border-radius: 5px;
+}
+
+.table-map input.key {
+    background: #f0f0f0;
+}
+
+.table-default {
+    width: 80%;
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+.table-default tr {
+    background: #f0f0f02d;
+}
+
+.table-default tr.bottom-border {
+    border-bottom: 1px solid black;
+}
+
+.table-default th {
+    background: #ffffff;
+}
+
+.table-default tr.even {
+    background: #f0f0f0;
+}
+
+.tip {
+    display: none;
+}
+
+.tip.active {
+    display: block;
+}
+
+.tabcontent {
+    display: none;
+}
+
+.tabcontent.active {
+    display: flex;
+    justify-content: center;
+}
+
+.collapsible .section-button {
+    width: 100%;
+    padding: 15px 0;
+    font-size: 18px;
+    background: #00000012;
+    cursor: pointer;
+}
+
+.collapsible .section-button:hover {
+    filter: brightness(110%); 
+}
+
+.collapsible.active .section-button {
+    background: #00000030;
+}
+
+.collapsible.active .section {
+    display: block;
+}
+
+.collapsible .section {
+    display: none;
+    background: #ffffff50;
+}
+
+.section .content {
+    padding: 15px 15px 30px 15px ;
+    text-align: justify;
+}
+
+.hiddable {
+    display: none;
+}
+
+.hiddable.active {
+    display: inherit;
+}
+
diff --git a/target/classes/static/css/form.css b/target/classes/static/css/form.css
new file mode 100644
index 0000000..47188aa
--- /dev/null
+++ b/target/classes/static/css/form.css
@@ -0,0 +1,7 @@
+.r11-form {
+    display: block;
+}
+
+.r11-form input, textarea {
+    border: 
+}
\ No newline at end of file
diff --git a/target/classes/static/html/mock.html b/target/classes/static/html/mock.html
index e43a22d..98e5c9c 100644
--- a/target/classes/static/html/mock.html
+++ b/target/classes/static/html/mock.html
@@ -3,33 +3,38 @@
 <head>
     <title>R11 MockedServices</title>
     <meta charset="utf-8">
-    <link rel="stylesheet" href="/css/main.css" type="text/css">
-    <link rel="stylesheet" href="/css/tooltip.css" type="text/css">
-    <link rel="stylesheet" href="http://gordon.zipper.release11.com:8085/common.css" type="text/css">
-    <link rel="stylesheet" href="/Dependency/fontello-plus/css/fontello.css" type="text/css"/>
     <link rel="stylesheet" href="/css/modal.css" type="text/css">
-    <link rel="stylesheet" href="/css/table.css" type="text/css">
-    <link rel="preconnect" href="https://fonts.gstatic.com">
-    <link href="https://fonts.googleapis.com/css2?family=Acme&family=Josefin+Slab:wght@500&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/css/commons/r11form.css" type="text/css">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 </head>
 <body>
-    
-    <div id="container">
-        <div id="toolName">Mocked Service <span id="version">v0.0.1</span></div>
-        <div id="itemData">
-                <div id="basicItemData" class="articleHead">Your message</div>
-                <div id="advancedItemData" class="articleHead" style="display: none;">Message id: <span id="mockedMessageId"></span></div>
-                <div id="link">
-                    <label for="messageLink">Link</label>
-                    <div id="messageLink" class="field"></div>
+    <div class="container">
+        <div class="tool extended">
+            <div class="tool-context">
+                <div>
+                    <h1>MockedServices <span class="version-span">v1.0.0</span></h1>
                 </div>
-                <div id="msgBody">
-                    <div id="messageFields">
-                        <div class="fieldFloater">
-                            <div>
+                <div>
+                    <!-- h2 -->
+                    <div id="basicItemData" class="hiddable active"><h2>Your Message</h2></div>
+                    <div id="advancedItemData" class="hiddable"><h2>Messaged id: <span id="mockedMessageId">1</span></h2></div>
+                    <!-- save -->
+                    <div>
+                        <!-- <button class="action-button active large-button small-vertical-margin">Save</button> -->
+                    </div>
+                    <!-- link -->
+                    <div>
+                        <label for="messageLink" class="block-display">Link</label>
+                        <div id="messageLink" class="bordered-field max-width with-padding disabled-background"><a class="hyperlink" href="www.google.com" target="_blank">www.google.com</a></div>
+                        <!-- <input id="messageLink" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla"> -->
+                    </div>
+                    <div class="display-space-between max-width">
+                        <!-- status and type -->
+                        <div class="medium-input block-display small-vertical-margin">
+                            <!-- status -->
+                            <div class="max-width  small-vertical-margin">
                                 <label for="httpStatus">Http Status</label>
-                                <input type="text" id="httpStatus" class="field fieldDefault" value="200" list="httpStatusSuggestion">
+                                <input id="httpStatus" class="bordered-field max-width data-field" type="text" value="200" list="httpStatusSuggestion">
                                 <datalist id="httpStatusSuggestion">
                                     <option value="200">
                                     <option value="300">
@@ -39,9 +44,10 @@
                                     <option value="500">
                                 </datalist>
                             </div>
-                            <div id="typeSelection">
+                            <!-- content type -->
+                            <div class="max-width  small-vertical-margin">
                                 <label for="typeSelector">Content Type</label>
-                                <input id="typeSelector" class="field fieldDefault" list="contentTypes" value="application/xml"/>
+                                <input id="typeSelector" class="bordered-field max-width data-field" type="text" value="application/xml" list="contentTypes">
                                 <datalist id="contentTypes">
                                     <option value="application/xml">
                                     <option value="application/json">
@@ -49,127 +55,171 @@
                                 </datalist>
                             </div>
                         </div>
-                        <div class="fieldFloater" id="functionBar">
-                            <div class="buttonSpacer"></div>
-                            <div><button id="btn-save" type="submit" class="functionBarButton btn-action">Save</button></div>
-                            <div class="buttonSpacer"></div>
-                            <div style="clear: both;"></div>
+                        <button id="btn-save" class="small-margins half-width with-padding action-button">Save</button>
+                    </div>
+                    <!-- body -->
+                    <div class="small-vertical-margin">
+                        <label for="bodyEditor">Body</label>
+                        <textarea id="bodyEditor" class="data-field bordered-field max-width with-padding height-300 vertically-resizeable"></textarea>
+                    </div>
+                    <!-- show/hide -->
+                    <div id="optional" class="clickable-text highlight">
+                        <h3>&gt; show/hide advanced settings</h3>
+                    </div>
+                    <!-- advanced -->
+                    <div id="advanced" class="max-width with-padding hiddable">
+                        <!-- tab menu -->
+                        <div class="tabmenu medium-vertical-margin">
+                            <button id="headersTab" class="tabitem active clickable-text big-font">Headers</button>
+                            <button id="historyTab" class="tabitem clickable-text big-font">History</button>
                         </div>
-                        <div style="clear: both;"></div>
-                    </div>
-
-                    <div id="bodyEdition">
-                        <label for="bodyEditor">Body:</label>
-                        <textarea type="text" id="bodyEditor" class="field resizeNone fieldText"></textarea>
-                    </div>
-
-                </div>
-                <div id="optional">&gt; show/hide advanced settings</div>
-                <div id="advanced" style="display: none;">
-                    <div id="advancedMenu">
-                        <div id="headersTab" class="advancedMenuTabSelected">Headers</div>
-                        <div id="historyTab" class="advancedMenuTab">History</div>
-                    </div>
-                    <div id="headers">
-                        <table id="headerTable">
-                            <thead>
-                                <tr>
-                                    <td>Header</td>
-                                    <td>Value</td>
-                                    <td></td>
-                                </tr>
-                            </thead>
-                            <tbody id="httpStatusValues">
-                            </tbody>
-                            <tfoot>
-                                <tr>
-                                    <td><input type="text" name="headerKey" id="headerKeyInput" placeholder="key" class="tableField"/></td>
-                                    <td><input type="text" name="headerValue" id="headerValueInput" placeholder="value" class="tableField"/></td>
-                                    <td id="btn-addRow" class="btn-function-table btn-table-add">+</td>
-                                </tr>
-                            </tfoot>
-                        </table>
-                    </div>
-                    <div id="history" style="display:none;">
-                        <div id="historyFunction">
-                            <div>
-                                <label for="historyFrom">From</label>
-                                <input type="date" name="dateFrom" id="historyFrom"/>
-                                <input type="time" name="timeFrom" id="historyTimeFrom"/>
-                            </div>
-                            <div>
-                                <label for="historyTo">To</label>
-                                <input type="date" name="dateTo" id="historyTo"/>
-                                <input type="time" name="dateTo" id="historyTimeTo"/>
-                            </div>
-                            <button id="btn-searchHistory">Search</button>
-                        </div>
-                        <div style="clear:both;"></div>
-                        <div id="historyDisplay">
-                            <table id="historyTable" class="simpleTable">
-                                <thead>
-                                    <tr class="head">
-                                        <th>Timestamp</th>
-                                        <th>Status</th>
+                        <!-- container -->
+                        <div class="medium-vertical-margin">
+                            <!-- headers -->
+                            <div id="headers" class="medium-vertical-margin tabcontent active">
+                                <table class="table-map">
+                                    <thead>
+                                        <tr>
+                                            <th>Name</th>
+                                            <th>Value</th>
+                                            <th></th>
+                                        </tr>
+                                    </thead>
+                                    <tbody id="headerMapTable">
+                                        <tr>
+                                            <td><input class="key" value="basic value"></td>
+                                            <td><input value="basic value"></td>
+                                            <td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>
+                                        </tr>
+                                    </tbody>
+                                    <tr>
+                                        <td><input id="headerKeyInput" placeholder="name"></td>
+                                        <td><input id="headerValueInput" placeholder="value"></td>
+                                        <td><button id="btn-newRow" class="modification-button btn-add"><i class="icon-plus"></i></button></td>
                                     </tr>
-                                </thead>
-                                <tbody>
-                                </tbody>
-                            </table>
+                                </table>
+                            </div>
+                            <!-- history -->
+                            <div id="history" class="medium-vertical-margin tabcontent">
+                                <div class="block-display max-width">
+                                    <div class="display-space-between max-width small-vertical-margin">
+                                        <div class="three-fourth-width display-space-evenly">
+                                            <div class="block-display half-width with-padding">
+                                                <label for="historyFrom" class="block-label">From</label>
+                                                <input id="historyFrom" type="date" class="bordered-field max-width with-padding">
+                                                <input id="historyTimeFrom" type="time" class="small-vertical-margin bordered-field max-width with-padding">
+                                            </div>
+                                            <div class="block-display half-width with-padding">
+                                                <label for="historyTo" class="block-label">To</label>
+                                                <input id="historyTo" type="date" class="bordered-field max-width with-padding">
+                                                <input id="historyTimeTo" type="time" class="small-vertical-margin bordered-field max-width with-padding">
+                                            </div>
+                                        </div>
+                                        <button id="btn-searchHistory" class="quater-width action-button active small-margins">Search</button>
+                                    </div>
+                                
+                                    <div class="max-width centered-content large-vertical-margin">
+                                        <table id="historyTable" class="table-default">
+                                            <thead>
+                                                <tr class="bottom-border">
+                                                    <th>Timestamp</th>
+                                                    <th>Type</th>
+                                                </tr>
+                                            </thead>
+                                            <tbody>
+                                                <!-- <tr class="even">
+                                                    <td>2021-01-01T10:57:26</td>
+                                                    <td>Client request</td>
+                                                </tr>
+                                                <tr>
+                                                    <td>2021-01-01T10:57:26</td>
+                                                    <td>Client request</td>
+                                                </tr> -->
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
-
-        </div>
-        <div id="selectMenu">
-            <div id="selectMenuContent" style="display: none;">
-                <div id="selectMenuHead" class="articleHead">List</div>
-                <div id="listItems"></div>
-                <div id="iconPlus" class="menuItem"><i class="icon-plus"></i></div>
+            </div>
+            <div id="selectMenuContent" class="tool-extention">
+                <!-- header -->
+                <div>
+                    <h2>Message List</h2>
+                </div>
+                <!-- tile list -->
+                <div id="listItems">
+                    <!-- <div class="tile">
+                        <div class="content">
+                            <div class="display-space-between">
+                                <div class="centered-vertically">
+                                    <p>Id: 2</p>
+                                    <p>Status: 200</p>
+                                </div>
+                                <div>
+                                    <button id="test1" class="modification-button btn-tile"><i class="icon-cancel"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div> -->
+                </div>
+                <div class="max-width centered-content small-vertical-margin">
+                    <button id="btn-newtile" class="modification-button btn-addtile"><i class="icon-plus"></i></button>
+                </div>
             </div>
         </div>
-        <div id="tooltip" class="fixed tooltip">
-            <div id="mockIntroTip">
-                <h2>What's mock service?</h2>
-                <p>It's super simple! Need data as response from the server? Mock your api in just a few clicks.</p>
-                <p>Hover over an item to see description!</p>
-                <br>
-                <h2>Help:</h2>
-            </div>
-
-            <div id="messageLinkTip" class="collapsible" style="display: none;">
-                <!--style="display: none;"-->
-                <h4>The link</h4>
-                <p>It's url where you need send your request</p>
-            </div>
-            <div id="httpStatusTip" class="collapsible" style="display: none;">
-                <h4>Http status</h4>
-                <p>Set http status for server response. 200 OK is default.</p>
-            </div>
-            <div id="typeSelectorTip" class="collapsible" style="display: none;">
-                <h4>Content type</h4>
-                <p>Select content type of body. Set plain text if data has no format.</p>
-            </div>
-            <div id="bodyEditorTip" class="collapsible" style="display: none;">
-                <h4>Body</h4>
-                <p>Text placed in this field will be displayed as response body</p>
-            </div>
-            <div id="headersTabTip" class="collapsible" style="display: none;">
-                <h4>Headers</h4>
-                <p>Set headers for your messages.</p>
-            </div>
-            <div id="historyTabTip" class="collapsible" style="display: none;">
-                <h4>History</h4>
-                <p>Check history of this message</p>
-            </div>
-            <div id="newHeaderTip" class="collapsible" style="display: none;">
-                <h4>Next header value</h4>
-                <p>Type values and press enter to add new header.</p>
+        <div class="tooltip-window lite">
+            <div>
+                <h2>What's this?</h2>
+                <p>MockedServices is a tool that allows developer to create, in easy and simple way, http server mocked endpoints for integration tests.</p>
+                <h2>Help</h2>
+                <p>When cursor hovers over an item. It's description is displayed below.</p>
+                <div class="large-vertical-margin">
+                    <div id="messageLinkTip" class="tip">
+                        <h3>Link</h3>
+                        <p>Link is an url representing an endpoint at which you can receive your mocked response by simply sending get request.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="httpStatusTip" class="tip">
+                        <h3>Http Status</h3>
+                        <p>Value of the field is corresponding to status value that server will return.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="typeSelectorTip" class="tip">
+                        <h3>Content Type</h3>
+                        <p>Value of the field describes content of body payload contained in the response. For example if content is in xml format the value should be "application/xml" or "text/xml"</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="bodyEditorTip" class="tip">
+                        <h3>Body</h3>
+                        <p>Value of the field describes content of response body. It's basicly the message we want server to return. If it's simple response like 200 OK or 404 not found then field might be left empty.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="headersTabTip" class="tip">
+                        <h3>Headers</h3>
+                        <p>Content of this tab allows to set and modify headers that will be included in the response.</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="historyTabTip" class="tip">
+                        <h3>History</h3>
+                        <p>Content of this tab displays the history of requests or responses received/sent to the endpoint</p>
+                    </div>
+                </div>
+                <div class="large-vertical-margin">
+                    <div id="newHeaderTip" class="tip">
+                        <h3>New header</h3>
+                        <p>Insert value in the field and press the plus icon to add a new header to the message.</p>
+                    </div>
+                </div>
             </div>
         </div>
-        <div style="clear:both;"></div>
-
-
     </div>
     <div id="overlay"></div>
     <div id="modal-confirm" class="modal">
@@ -194,5 +244,6 @@
     <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>
\ No newline at end of file
diff --git a/target/classes/static/js/datatransfer.js b/target/classes/static/js/datatransfer.js
index 7e6465f..9fa3c6e 100644
--- a/target/classes/static/js/datatransfer.js
+++ b/target/classes/static/js/datatransfer.js
@@ -1,7 +1,3 @@
-//TODO: Add delete buttons for messages
-//TODO: Save button deactivation after swap, post or delete
-//TODO: It sends request, gets responds but doesnt run a function!!
-//TODO: Warning is displayed twice
 var clientUUID = '';
 var advancedDisplayed = false;
 var json = {};
@@ -10,11 +6,9 @@ var lastId = 1;
 var htable_row = 0;
 var host = getDomain();
 var dataModified = false;
-// TODO: Remove discard changes
 const addMessageName = 'addMessage';
 const loadMessageName = 'changeMessage';
 const removeMessageName = 'removeMessage';
-// TODO: Add last given command
 
 const C_UUID = 'mock-uuid';
 const C_ID = 'last-displayed-id';
@@ -32,10 +26,9 @@ const getUpdate = function(){
 const dataRefresh = function(){
     getData();
 }
-$('#iconPlus').click(function(){callAddMessage()});
-$('#btn-addRow').click(function(){addRow()});
-//TODO remove later save onclick init
-$('#btn-save').click(getUpdate);
+$('#btn-newtile').click(function(){callAddMessage()});
+// $('#btn-addRow').click(function(){addRow()});
+// $('#btn-save').click(getUpdate);
 
 function getData(){
     $.getJSON(host + '/api/mock/'+clientUUID, function(data) {
@@ -64,18 +57,16 @@ function getDomain(){
 function setDataModified(){
     if(dataModified) return;
     dataModified = true;
-    $('#btn-save').removeClass('btn-inactive');
-    $('#btn-save').addClass('btn-action');
+    $('#btn-save').addClass('active');
     $('#btn-save').click(getUpdate);
 }
 
 //Adding change listener to fields
-$('.field').change(setModified);
+$('.data-field').change(setModified);
 
 function setDataOrigin(){
     dataModified = false;
-    $('#btn-save').addClass('btn-inactive');
-    $('#btn-save').removeClass('btn-action');
+    $('#btn-save').removeClass('active');
     $('#btn-save').off();
 }
 
@@ -104,7 +95,7 @@ function refreshData(){
 }
 
 function setCookie(){
-    document.cookie = C_UUID + '=' +clientUUID+';'
+    document.cookie = C_UUID + '=' +clientUUID;
     document.cookie = C_ID + '=' + lastId;
     document.cookie = C_ADV + '=' + advancedVisibility;
 }
@@ -216,7 +207,8 @@ function initializeMock(index){
 
 function fillStaticFields(uuid, id, mediaType, body, httpStatus){
     let link = createLink(uuid,id);
-    $('#messageLink').html('<a href="' + link + '" target="_blank">' + link + '</a>');
+    let linkHtml = '<a class="hyperlink" target="_blank" href="'+link+'">'+link+'</a>';
+    $('#messageLink').html(linkHtml);
     $('#httpStatus').val(httpStatus);
     $('#typeSelector').val(mediaType);
     $('#bodyEditor').val(body);
@@ -230,69 +222,61 @@ function createLink(uuid, id){
 }
 
 function fillHeaderTable(headers){
-    var innerHTML = $('#httpStatusValues').html();
-    innerHTML += generateHeaderTable(headers);
-    $('#httpStatusValues').html(innerHTML);
-    $('.tableField').change(function(){setDataModified()});
+    var innerHTML = buildHeaderMapHtml(headers);
+    refreshHeaderTable(innerHTML);
 }
-//TODO: Add addRow() to generate new rows and populate them with data
-function generateHeaderTable(headers){
-    let count = 0;
-    let innerHTML = '';
-    for(var item in headers){
-        if( headers.hasOwnProperty(item) ) count++;
-    }
-    var keys = new Array(count);
-    var values = new Array(count);
-    let index = 0;
-    for(var key in Object.keys(headers)){
-        keys[index++]=Object.keys(headers)[key];
-    }
-    index = 0;
-    for(var val in headers){
-        values[index++]=headers[val];
-    }
 
-    for(let i=0; i<count; i++){
-        innerHTML+=
-            '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
-                '<td>' +
-                    '<input type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + keys[i] + '"/></td>' +
-                '<td>' +
-                    '<input type="text" name="headerValue" placeholder="value" class="tableField" value="' + values[i] + '"/></td>' +
-            '<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">&times;</td>' +
-            '</tr>';
-        htable_row++;
+function refreshHeaderTable(html){
+    $('#headerMapTable').html(html);
+    $('.table-map').change(function(){setDataModified()});
+    $('.btn-hashmap').click(function(){
+        $(this).closest('tr').remove();
+        setDataModified();
+    })
+}
+
+function buildHeaderMapHtml(headers){
+    var innerHTML = '';
+    for(var key in headers){
+        innerHTML += buildRowHtml(key, headers[key]);
     }
     return innerHTML;
 }
 
-function removeRow(row){
-    $('#hrow' + row).remove();
-    setDataModified();
+function addRow(key, value){
+    var headerMap = $('#headerMapTable');
+    var headersMapHtml = headerMap.html();
+    headersMapHtml += buildRowHtml(key, value);
+    refreshHeaderTable(headersMapHtml);
 }
 
-function addRow(){
-    var table = $('#httpStatusValues');
-    var hkey = $('#headerKeyInput');
-    var hval = $('#headerValueInput');
-    if(hkey.val() == 'key' || hkey.val() == '' || hval.val() == 'value' || hval.val() == '') return;
-    var innerHtml =
-        '<tr id="hrow' + htable_row + '" class="httpStatusValue">' +
-        '<td>' +
-        '<input " type="text" name="headerKey" placeholder="key" class="tableField textField-key" value="' + hkey.val() +
-        '"/></td>' +
-        '<td>' +
-        '<input " type="text" name="headerKey" placeholder="key" class="tableField" value="' + hval.val() + '"/></td>' +
-        '<td class="btn-function-table btn-table-remove" onclick="removeRow(' + htable_row + ')">X</td>' +
-        '</tr>';
-    htable_row++;
-    table.append(innerHtml);
-    hkey.val('');
-    hval.val('');
-    setDataModified();
+const newRowInput = function(){
+    const hName = $('#headerKeyInput');
+    const hValue = $('#headerValueInput');
+    if(checkIfInputValid(hName.val()) && checkIfInputValid(hValue.val())){
+        addRow(hName.val(), hValue.val());
+        hName.val(null);
+        hValue.val(null);
+        setDataModified();
+    }
 }
 
+$('#btn-newRow').click(newRowInput);
+
+function checkIfInputValid(input){
+    return !(input == '' || input == null || input == undefined);
+}
+
+function buildRowHtml(key, value){
+    return '' + 
+    '<tr>' +
+        '<td><input class="key data-field" value="' + key + '"></td>' +
+        '<td><input class="data-field" value="' + value + '"></td>' +
+        '<td><button class="modification-button btn-hashmap"><i class="icon-cancel"></i></button></td>' +
+    '</tr>';
+}
+
+
 function fillMessageList(){
     $("#listItems").html('');
     var innerHTML = '';
@@ -300,10 +284,21 @@ function fillMessageList(){
         innerHTML += generateMessageTileHtml(json[i].mockedResponseId, json[i].httpStatus, json[i].mediaType);
     }
     $("#listItems").append(innerHTML);
+    $('.tile').click(function(e) {
+        var element = $(this);
+        var button = element.find('.btn-tile').children().get(0);
+        console.log(button == e.target);
+        if(!(button == e.target)){
+            console.log("Button is not a target. Loading message.")
+            callLoadMessage(parseInt($(this).attr('tileid')));
+        }
+    });
+    $('.btn-tile').click(function(){
+        // console.log(this);
+        callRemoveMessage($(this).closest('.tile').attr('tileId'));
+    })
 }
 
-
-//TODO: Implement methods where its possible
 function findJsonById(id){
     return json[findJsonIndexById(id)];
 }
@@ -324,10 +319,15 @@ function callLoadMessage(id){
 }
 
 function loadMessage(id){
+    if(id == null || id == undefined){
+        console.log('id is null');
+        return;
+    }
     lastId = id;
     setCookie();
     setDataOrigin();
     for(let i=0; i<json.length; i++){
+        console.log('id == ' + id + ' mockedId == ' + json[i].mockedResponseId);
         if(id == json[i].mockedResponseId){
             jsonIndex = i;
             console.log("Message found");
@@ -341,25 +341,33 @@ function loadMessage(id){
     console.log("Message not found");
 }
 
+
 function selectMessage(id){
+    const tiles = $('.tile');
     console.log("Selecting message...");
-    $(".menuItemSelected").on("click");
-    $(".menuItemSelected").addClass("menuItem");
-    $(".menuItemSelected").removeClass("menuItemSelected");
+    tiles.removeClass("active");
     console.log("Selected message deselected");
-    let itemId = '#item_'+id;
-    $(itemId).off("click");
-    $(itemId).addClass("menuItemSelected");
-    $(itemId).removeClass("menuItem");
+    $('.tile[tileid="'+id+'"]').addClass("active");
     console.log("Selected message selected");
 }
 
+
+
 function generateMessageTileHtml(id, httpStatus, mediaType){
-    var innerHTML = '<div class="menuItem" id="item_' + id + '" onclick="callLoadMessage('+ id +')">' +
-        '<table><tr><td>Id: '+ id +'</td></tr>' +
-        '<tr><td>Http-status: '+ httpStatus +'</td></tr>' +
-        '</table></div><div class="btn-del-MenuItem" onclick="callRemoveMessage(' + id + ')">&times;</div>' +
-        '<div style="clear: both;"></div>';
+    var innerHTML = '' +
+    '<div tileid="' + id + '" class="tile">' +
+        '<div class="content">' +
+            '<div class="display-space-between">' +
+                '<div class="centered-vertically">' +
+                    '<p>Id: ' + id + '</p>' +
+                    '<p>Status: ' + httpStatus + '</p>' +
+                '</div>' +
+                '<div>' +
+                    '<button class="modification-button btn-tile"><i class="icon-cancel"></i></button>' +
+                '</div>' +
+            '</div>' +
+        '</div>' +
+    '</div>';
     return innerHTML;
 }
 
@@ -399,7 +407,7 @@ function generateJson(){
 
 
 function convertTableToJson(){
-    var rows = $('.httpStatusValue');
+    const rows = $('#headerMapTable').children();
     console.log("Rows: "+rows.length);
     var obj = {};
     var key;
diff --git a/target/classes/static/js/fiddle.js b/target/classes/static/js/fiddle.js
new file mode 100644
index 0000000..9fd89dc
--- /dev/null
+++ b/target/classes/static/js/fiddle.js
@@ -0,0 +1,5 @@
+const deleteParent = function(){
+    $(this).closest('div.tile').remove();
+}
+
+$('#test1').click(deleteParent);
\ No newline at end of file
diff --git a/target/classes/static/js/historyloader.js b/target/classes/static/js/historyloader.js
index 3107624..f5437e5 100644
--- a/target/classes/static/js/historyloader.js
+++ b/target/classes/static/js/historyloader.js
@@ -56,7 +56,8 @@ function historyToHtml(){
     var innerHTML = '';
     var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
     for(let i=0; i<iterations; i++){
-        innerHTML += '<tr>' +
+        let style = i%2==0 ? ' class="even"' : '';
+        innerHTML += '<tr' + style + '>' +
             '<td>' + historyJson[i].dateTimeStamp + '</td>' +
             '<td>' + historyJson[i].interfaceName + '</td>' +
         '</tr>';
diff --git a/target/classes/static/js/modal.js b/target/classes/static/js/modal.js
index b07de7d..3ea450c 100644
--- a/target/classes/static/js/modal.js
+++ b/target/classes/static/js/modal.js
@@ -11,7 +11,6 @@ const dataLossModalYes = dataLossModal.children().eq(2).children().eq(0);
 const dataLossModalNo = dataLossModal.children().eq(2).children().eq(1);
 const allModals = $('.modal');
 const btnModalClose = $('.modal button');
-//TODO: Implement in datatransfer
 const closeModals = function() {
     hideModal(allModals);
 }
diff --git a/target/classes/static/js/uianimation.js b/target/classes/static/js/uianimation.js
index 97a88f4..0c7fd25 100644
--- a/target/classes/static/js/uianimation.js
+++ b/target/classes/static/js/uianimation.js
@@ -6,50 +6,41 @@ var advancedID = $("#advancedItemData");
 var focusedField = false;
 function changeAdvancedVisibility(){
     if(advancedVisibility){
-        selectMenu.css('display', 'none');
-        advancedTab.css('display', 'none');
-        advancedID.css('display', 'none');
-        basicID.css('display', 'block')
+        selectMenu.removeClass('active');
+        advancedTab.removeClass('active');
+        advancedID.removeClass('active');
+        basicID.addClass('active');
         advancedVisibility = false;
     }
     else {
-        selectMenu.css('display', 'block');
-        advancedTab.css('display', 'block');
-        advancedID.css('display', 'block');
-        basicID.css('display', 'none');
+        selectMenu.addClass('active');
+        advancedTab.addClass('active');
+        advancedID.addClass('active');
+        basicID.removeClass('active');
         advancedVisibility = true;
     }
     setCookie();
 }
 
-function createMessageTab() {
-    var items = document.getElementById("listItems");
-    items.innerHTML += '<div class="menuItem">Item</div>';
-}
-
 $("#optional").click(changeAdvancedVisibility);
-$(".menuFactory").click(createMessageTab);
 $('#historyTab').click(showHistory);
 
+const tabitem = $('.tabitem');
 function showHistory(){
-    $('#headers').css('display', 'none');
-    $('.advancedMenuTabSelected').addClass('advancedMenuTab');
-    $('.advancedMenuTabSelected').click(showHeaders);
-    $('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
-    $('#history').css('display', 'block');
-    $('#historyTab').addClass('advancedMenuTabSelected');
-    $('#historyTab').removeClass('advancedMenuTab');
+    $('#headersTab').click(showHeaders);
+    tabitem.removeClass('active');
+    $('.tabcontent').removeClass('active');
+    $('#history').addClass('active');
+    $('#historyTab').addClass('active');
     $('#historyTab').off('click');
 }
 
 function showHeaders(){
-    $('#history').css('display', 'none');
-    $('.advancedMenuTabSelected').addClass('advancedMenuTab');
-    $('.advancedMenuTabSelected').click(showHistory);
-    $('.advancedMenuTabSelected').removeClass('advancedMenuTabSelected');
-    $('#headers').css('display', 'block');
-    $('#headersTab').addClass('advancedMenuTabSelected');
-    $('#headersTab').removeClass('advancedMenuTab');
+    $('#historyTab').click(showHistory);
+    tabitem.removeClass('active');
+    $('.tabcontent').removeClass('active');
+    $('#headers').addClass('active');
+    $('#headersTab').addClass('active');
     $('#headersTab').off('click');
 }
 
@@ -65,13 +56,13 @@ function focusOutTip(element){
 
 function hidTip(element){
     if(focusedField) return;
-    $('#'+element).fadeOut(100);
+    $('#'+element).removeClass('active');
 }
 
 function showTip(element){
     if(focusedField) return;
-    $('.collapsible').fadeOut(0);
-    $('#'+element).fadeIn(100);
+    $('.tip').removeClass('active');
+    $('#'+element).addClass('active');
 }
 
 $('#messageLink').mouseover(function(){showTip('messageLinkTip')});