diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css
index f29cc12..53e4502 100644
--- a/src/main/resources/static/css/main.css
+++ b/src/main/resources/static/css/main.css
@@ -279,9 +279,13 @@ input:focus {
 }
 
 #historyFunction {
-    margin-top: 30px;
+    margin-top: 10px;
     margin-bottom: 30px;
     width: 670px;
+    display: none;
+}
+
+#historyFunction.active {
     display: flex;
     align-content: space-between;
 }
@@ -302,4 +306,23 @@ input:focus {
     margin-right: 15px;
 }
 
+#historyFilterSwitch {
+    width: 100%;
+    font-size: 18px;
+    cursor: pointer;
+    border: 0;
+	padding: 0;
+	background: 0;
+    outline: 0;
+    text-align: left;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    margin-left: 15px;
+
+}
+
+#historyFilterSwitch:hover {
+    color: orange;
+}
+
 
diff --git a/src/main/resources/static/html/mock.html b/src/main/resources/static/html/mock.html
index 4614de4..a8ce335 100644
--- a/src/main/resources/static/html/mock.html
+++ b/src/main/resources/static/html/mock.html
@@ -91,6 +91,7 @@
                         </table>
                     </div>
                     <div id="history" style="display:none;">
+                        <button id="historyFilterSwitch">>Filters</button>
                         <div id="historyFunction">
                             <div>
                                 <label for="historyFrom">From</label>
@@ -112,22 +113,6 @@
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    <tr>
-                                        <td>2020-02-02 10:56:23</td>
-                                        <td>Request received</td>
-                                    </tr>
-                                    <tr>
-                                        <td>2020-02-02 10:56:23</td>
-                                        <td>Request received</td>
-                                    </tr>
-                                    <tr>
-                                        <td>2020-02-02 10:56:23</td>
-                                        <td>Request received</td>
-                                    </tr>
-                                    <tr>
-                                        <td>2020-02-02 10:56:23</td>
-                                        <td>Request received</td>
-                                    </tr>
                                 </tbody>
                             </table>
                         </div>
diff --git a/src/main/resources/static/js/historyloader.js b/src/main/resources/static/js/historyloader.js
index 7e20f19..a835758 100644
--- a/src/main/resources/static/js/historyloader.js
+++ b/src/main/resources/static/js/historyloader.js
@@ -1,8 +1,30 @@
 var historyJson = {};
+const maxIterations = 30;
+var filters = false;
+var defaultTo = new Date();
+defaultTo.setDate(defaultTo.getDate + 1);
+var defaultFrom = new Date();
+defaultFrom.setDate(defaultFrom.getDate - 30);
 
-function searchHistory(){
+function filterHistory(){
     var dateFrom = $('#historyFrom').val();
     var dateTo = $('#historyTo').val();
+    loadHistory(dateFrom, dateTo);
+}
+
+const startSearch = function(){
+    filterHistory();
+}
+$('#btn-searchHistory').click(startSearch);
+
+const filterSwitch = function(){
+    $('#historyFunction').toggleClass("active");
+}
+
+$('#historyFilterSwitch').click(filterSwitch);
+
+function loadHistory(dateFrom, dateTo){
+    console.log('Request send for history data')
     var eventRequest = {
         clientUUID : json[jsonIndex].clientUUID,
         localDateTimeFrom : dateFrom,
@@ -15,12 +37,30 @@ function searchHistory(){
         data: JSON.stringify(eventRequest, null, 2),
         contentType: "application/json"
     }).done(function(data){
-        console.log(data);
+        // TODO: Add display function
         historyJson = data;
+        displayHistory();
     });
 }
 
-const startSearch = function(){
-    searchHistory();
+function historyToHtml(){
+    console.log('generating history');
+    var innerHTML = '';
+    var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
+    for(let i=0; i<iterations; i++){
+        innerHTML += '<tr>' +
+            '<td>' + historyJson[i].dateTimeStamp + '</td>' +
+            '<td>' + historyJson[i].interfaceName + '</td>' +
+        '</tr>';
+    }
+    console.log('history generated');
+    return innerHTML;
 }
-$('#btn-searchHistory').click(startSearch);
\ No newline at end of file
+
+const displayHistory = function(){
+    console.log('Setting history...');
+    $('#historyTable tbody').html(historyToHtml());
+    console.log('History set');
+}
+
+$(document).ready(loadHistory(defaultFrom, defaultTo));
\ No newline at end of file
diff --git a/target/classes/static/css/main.css b/target/classes/static/css/main.css
index f29cc12..53e4502 100644
--- a/target/classes/static/css/main.css
+++ b/target/classes/static/css/main.css
@@ -279,9 +279,13 @@ input:focus {
 }
 
 #historyFunction {
-    margin-top: 30px;
+    margin-top: 10px;
     margin-bottom: 30px;
     width: 670px;
+    display: none;
+}
+
+#historyFunction.active {
     display: flex;
     align-content: space-between;
 }
@@ -302,4 +306,23 @@ input:focus {
     margin-right: 15px;
 }
 
+#historyFilterSwitch {
+    width: 100%;
+    font-size: 18px;
+    cursor: pointer;
+    border: 0;
+	padding: 0;
+	background: 0;
+    outline: 0;
+    text-align: left;
+    margin-top: 30px;
+    margin-bottom: 30px;
+    margin-left: 15px;
+
+}
+
+#historyFilterSwitch:hover {
+    color: orange;
+}
+
 
diff --git a/target/classes/static/html/mock.html b/target/classes/static/html/mock.html
index 4614de4..a8ce335 100644
--- a/target/classes/static/html/mock.html
+++ b/target/classes/static/html/mock.html
@@ -91,6 +91,7 @@
                         </table>
                     </div>
                     <div id="history" style="display:none;">
+                        <button id="historyFilterSwitch">>Filters</button>
                         <div id="historyFunction">
                             <div>
                                 <label for="historyFrom">From</label>
@@ -112,22 +113,6 @@
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    <tr>
-                                        <td>2020-02-02 10:56:23</td>
-                                        <td>Request received</td>
-                                    </tr>
-                                    <tr>
-                                        <td>2020-02-02 10:56:23</td>
-                                        <td>Request received</td>
-                                    </tr>
-                                    <tr>
-                                        <td>2020-02-02 10:56:23</td>
-                                        <td>Request received</td>
-                                    </tr>
-                                    <tr>
-                                        <td>2020-02-02 10:56:23</td>
-                                        <td>Request received</td>
-                                    </tr>
                                 </tbody>
                             </table>
                         </div>
diff --git a/target/classes/static/js/historyloader.js b/target/classes/static/js/historyloader.js
index 7e20f19..a835758 100644
--- a/target/classes/static/js/historyloader.js
+++ b/target/classes/static/js/historyloader.js
@@ -1,8 +1,30 @@
 var historyJson = {};
+const maxIterations = 30;
+var filters = false;
+var defaultTo = new Date();
+defaultTo.setDate(defaultTo.getDate + 1);
+var defaultFrom = new Date();
+defaultFrom.setDate(defaultFrom.getDate - 30);
 
-function searchHistory(){
+function filterHistory(){
     var dateFrom = $('#historyFrom').val();
     var dateTo = $('#historyTo').val();
+    loadHistory(dateFrom, dateTo);
+}
+
+const startSearch = function(){
+    filterHistory();
+}
+$('#btn-searchHistory').click(startSearch);
+
+const filterSwitch = function(){
+    $('#historyFunction').toggleClass("active");
+}
+
+$('#historyFilterSwitch').click(filterSwitch);
+
+function loadHistory(dateFrom, dateTo){
+    console.log('Request send for history data')
     var eventRequest = {
         clientUUID : json[jsonIndex].clientUUID,
         localDateTimeFrom : dateFrom,
@@ -15,12 +37,30 @@ function searchHistory(){
         data: JSON.stringify(eventRequest, null, 2),
         contentType: "application/json"
     }).done(function(data){
-        console.log(data);
+        // TODO: Add display function
         historyJson = data;
+        displayHistory();
     });
 }
 
-const startSearch = function(){
-    searchHistory();
+function historyToHtml(){
+    console.log('generating history');
+    var innerHTML = '';
+    var iterations = historyJson.length <= maxIterations ? historyJson.length : maxIterations;
+    for(let i=0; i<iterations; i++){
+        innerHTML += '<tr>' +
+            '<td>' + historyJson[i].dateTimeStamp + '</td>' +
+            '<td>' + historyJson[i].interfaceName + '</td>' +
+        '</tr>';
+    }
+    console.log('history generated');
+    return innerHTML;
 }
-$('#btn-searchHistory').click(startSearch);
\ No newline at end of file
+
+const displayHistory = function(){
+    console.log('Setting history...');
+    $('#historyTable tbody').html(historyToHtml());
+    console.log('History set');
+}
+
+$(document).ready(loadHistory(defaultFrom, defaultTo));
\ No newline at end of file