diff --git a/src/main/resources/static/css/commons/r11form.css b/src/main/resources/static/css/commons/r11form.css
index 7c4a3c6..1aa6319 100644
--- a/src/main/resources/static/css/commons/r11form.css
+++ b/src/main/resources/static/css/commons/r11form.css
@@ -56,8 +56,11 @@
     resize: vertical;
 }
 
-.container {
+body {
     font-family: 'Nunito', sans-serif;
+}
+
+.container {
     display: flex;
     justify-content: left;
     width: 100%;
diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index be3367d..38cc38b 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -131,14 +131,14 @@
                                                 </tr>
                                             </thead>
                                             <tbody>
-                                                <tr class="even">
+                                                <!-- <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>
+                                                </tr> -->
                                             </tbody>
                                         </table>
                                     </div>
@@ -225,6 +225,25 @@
             </div>
         </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>
     <script type="text/javascript" src="/js/uianimation.js"></script>
     <script type="text/javascript" src="/js/datatransfer.js"></script>
diff --git a/target/classes/static/css/commons/r11form.css b/target/classes/static/css/commons/r11form.css
index 7c4a3c6..1aa6319 100644
--- a/target/classes/static/css/commons/r11form.css
+++ b/target/classes/static/css/commons/r11form.css
@@ -56,8 +56,11 @@
     resize: vertical;
 }
 
-.container {
+body {
     font-family: 'Nunito', sans-serif;
+}
+
+.container {
     display: flex;
     justify-content: left;
     width: 100%;
diff --git a/target/classes/static/html/mock.html b/target/classes/static/html/mock.html
index be3367d..38cc38b 100644
--- a/target/classes/static/html/mock.html
+++ b/target/classes/static/html/mock.html
@@ -131,14 +131,14 @@
                                                 </tr>
                                             </thead>
                                             <tbody>
-                                                <tr class="even">
+                                                <!-- <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>
+                                                </tr> -->
                                             </tbody>
                                         </table>
                                     </div>
@@ -225,6 +225,25 @@
             </div>
         </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>
     <script type="text/javascript" src="/js/uianimation.js"></script>
     <script type="text/javascript" src="/js/datatransfer.js"></script>