diff --git a/src/main/resources/static/css/commons/r11form.css b/src/main/resources/static/css/commons/r11form.css
index d043bb1..7c4a3c6 100644
--- a/src/main/resources/static/css/commons/r11form.css
+++ b/src/main/resources/static/css/commons/r11form.css
@@ -209,6 +209,11 @@
     justify-content: space-between;
 }
 
+.display-space-evenly {
+    display: flex;
+    justify-content: space-evenly;
+}
+
 .content p {
     margin: 0;
     padding: 0;
@@ -292,6 +297,10 @@
     width: 50%;
 }
 
+.tree-fourth-width {
+    width: 75%;
+}
+
 .half-width.with-padding {
     width: 45%;
 }
diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index 1bdf5b1..2bd58d8 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -105,20 +105,40 @@
                             </div>
                             <!-- history -->
                             <div id="history" class="medium-vertical-margin tabcontent">
-                                <table class="table-default">
-                                    <tr class="bottom-border">
-                                        <th>Timestamp</th>
-                                        <th>Type</th>
-                                    </tr>
-                                    <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>
-                                </table>
+                                <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 class="quater-width action-button active small-margins">Search</button>
+                                    </div>
+                                
+                                    <div class="max-width centered-content large-vertical-margin">
+                                        <table class="table-default">
+                                            <tr class="bottom-border">
+                                                <th>Timestamp</th>
+                                                <th>Type</th>
+                                            </tr>
+                                            <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>
+                                        </table>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>
diff --git a/target/classes/static/css/commons/r11form.css b/target/classes/static/css/commons/r11form.css
index d043bb1..7c4a3c6 100644
--- a/target/classes/static/css/commons/r11form.css
+++ b/target/classes/static/css/commons/r11form.css
@@ -209,6 +209,11 @@
     justify-content: space-between;
 }
 
+.display-space-evenly {
+    display: flex;
+    justify-content: space-evenly;
+}
+
 .content p {
     margin: 0;
     padding: 0;
@@ -292,6 +297,10 @@
     width: 50%;
 }
 
+.tree-fourth-width {
+    width: 75%;
+}
+
 .half-width.with-padding {
     width: 45%;
 }
diff --git a/target/classes/static/html/mock.html b/target/classes/static/html/mock.html
index 1bdf5b1..2bd58d8 100644
--- a/target/classes/static/html/mock.html
+++ b/target/classes/static/html/mock.html
@@ -105,20 +105,40 @@
                             </div>
                             <!-- history -->
                             <div id="history" class="medium-vertical-margin tabcontent">
-                                <table class="table-default">
-                                    <tr class="bottom-border">
-                                        <th>Timestamp</th>
-                                        <th>Type</th>
-                                    </tr>
-                                    <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>
-                                </table>
+                                <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 class="quater-width action-button active small-margins">Search</button>
+                                    </div>
+                                
+                                    <div class="max-width centered-content large-vertical-margin">
+                                        <table class="table-default">
+                                            <tr class="bottom-border">
+                                                <th>Timestamp</th>
+                                                <th>Type</th>
+                                            </tr>
+                                            <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>
+                                        </table>
+                                    </div>
+                                </div>
                             </div>
                         </div>
                     </div>