diff --git a/src/main/resources/static/css/commons/r11form.css b/src/main/resources/static/css/commons/r11form.css
index eea242e..469813e 100644
--- a/src/main/resources/static/css/commons/r11form.css
+++ b/src/main/resources/static/css/commons/r11form.css
@@ -163,9 +163,10 @@
 }
 
 
-.headline {
+.float-left {
     display: flex;
     justify-content: left;
+    width: 100%;
 }
 
 .version-span {
@@ -174,7 +175,7 @@
     color: rgba(85,85,85,0.555);
 }
 
-.tool-window {
+.block-display {
     display: block;
 }
 
@@ -227,20 +228,36 @@
     margin: 3px 0;
 }
 
-.medium-input {
+.quater-width {
+    width: 25%;
+}
+
+.half-width {
     width: 50%;
 }
 
-.small-input {
-    width: 30%;
+.half-width.with-padding {
+    width: 45%;
 }
 
-.large-input {
+.max-width {
     width: 100%;
 }
 
-.large-button {
-    width: 100%;
+.max-width.with-padding {
+    width: 94%;
+}
+
+.max-height {
+    height: 100%;
+}
+
+.max-height.with-padding {
+    height: 90%;
+}
+
+.small-margins {
+    margin: 3%;
 }
 
 .small-vertical-margin {
diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index 2891961..bd64b5d 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -3,33 +3,39 @@
 <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="stylesheet" href="../css/commons/r11form.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">
     <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">0</span></div>
-                <div id="link">
-                    <label for="messageLink">Link</label>
-                    <div id="messageLink" class="field">https://www.testlink.com/doesntwork/tho</div>
+    <div class="container">
+        <div class="tool extended">
+            <div class="tool-context">
+                <div class="float-left">
+                    <h1>MockedServices <span class="version-span">v0.0.1</span></h1>
                 </div>
-                <div id="msgBody">
-                    <div id="messageFields">
-                        <div class="fieldFloater">
-                            <div>
+                <div>
+                    <!-- h2 -->
+                    <div><h2>Your Message</h2></div>
+                    <!-- save -->
+                    <div>
+                        <!-- <button class="action-button active large-button small-vertical-margin">Save</button> -->
+                    </div>
+                    <!-- link -->
+                    <div>
+                        <label for="message-link" class="block-display">Link</label>
+                        <input id="message-link" disabled class="bordered-field max-width with-padding" value="http://yourlink.com/r/api/mock/blablabla">
+                    </div>
+                    <div class="float-left">
+                        <!-- status and type -->
+                        <div class="medium-input block-display small-vertical-margin">
+                            <!-- status -->
+                            <div class="max-width with-padding 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" type="text" value="200" list="httpStatusSuggestion">
                                 <datalist id="httpStatusSuggestion">
                                     <option value="200">
                                     <option value="300">
@@ -39,9 +45,10 @@
                                     <option value="500">
                                 </datalist>
                             </div>
-                            <div id="typeSelection">
+                            <!-- content type -->
+                            <div class="max-width with-padding 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" type="text" value="application/xml" list="contentTypes">
                                 <datalist id="contentTypes">
                                     <option value="application/xml">
                                     <option value="application/json">
@@ -49,145 +56,37 @@
                                 </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>
-                        </div>
-                        <div style="clear: both;"></div>
+                        <button class="small-margins half-width with-padding action-button active">Save</button>
                     </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>
-                                    </tr>
-                                </thead>
-                                <tbody>
-                                </tbody>
-                            </table>
+                    <!-- body -->
+                    <div></div>
+                    <!-- show/hide -->
+                    <div></div>
+                    <!-- advanced -->
+                    <div>
+                        <!-- tab menu -->
+                        <div></div>
+                        <!-- container -->
+                        <div>
+                            <!-- headers -->
+                            <div></div>
+                            <!-- history -->
+                            <div></div>
                         </div>
                     </div>
                 </div>
+            </div>
+            <div class="tool-extention">
+                <!-- header -->
+                <div></div>
+                <!-- container -->
+                <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>
         </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 class="tooltip-window lite">
 
-            <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>
-        </div>
-        <div style="clear:both;"></div>
-
-
-    </div>
-    <div id="overlay"></div>
-    <div id="modal-confirm" class="modal">
-        <div class="header">
-            <div>Message saved<i class="r-exclamation"></i></div>
-            <button>&times;</button>
-        </div>
-        <div class="body">Your message has been successfuly saved.<br>You might view it under the link.</div>
-    </div>
-    <div id="modal-query" class="modal">
-        <div class="header">
-            <div>Unsaved data<i class="r-exclamation"></i></div>
-            <button>&times;</button>
-        </div>
-        <div class="body">You haven't saved your message! Any changes will be lost.<br>Do you want to continue?</div>
-        <div class="function">
-            <button>Yes</button>
-            <button>No</button>
         </div>
     </div>
     <script type="text/javascript" src="/js/modal.js"></script>
