diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index c120c53..023e002 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -7,11 +7,13 @@
     <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="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</div>
         <div id="itemData">
@@ -158,6 +160,25 @@
         <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/uianimation.js"></script>
     <script type="text/javascript" src="/js/datatransfer.js"></script>
diff --git a/target/classes/static/html/mock.html b/target/classes/static/html/mock.html
index c120c53..023e002 100644
--- a/target/classes/static/html/mock.html
+++ b/target/classes/static/html/mock.html
@@ -7,11 +7,13 @@
     <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="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</div>
         <div id="itemData">
@@ -158,6 +160,25 @@
         <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/uianimation.js"></script>
     <script type="text/javascript" src="/js/datatransfer.js"></script>
